fix(loyalty): drop unregistered device-tablet icon, guard QR template against null
Some checks failed
Some checks failed
- The icon registry has no 'device-tablet' (closest available is 'phone', which is already used for similar device-mobile contexts). Replace uses I added in the merchant menu item and the empty state. - The pairing-QR modal uses x-show on the QR/payload blocks, but x-show only toggles display while Alpine still evaluates child expressions. pairingResult is null on first render, so the template threw "can't access property 'qr_png_base64'/'setup_payload', pairingResult is null" until pairing actually fired. Wrap the block in <template x-if="pairingResult"> so the bindings only mount when the data exists. (There is a third 'device-tablet' reference in store/analytics.html that predates this work — leaving it for a separate cleanup since it's not on the Android-rollout path.) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -282,7 +282,7 @@ loyalty_module = ModuleDefinition(
|
|||||||
MenuItemDefinition(
|
MenuItemDefinition(
|
||||||
id="devices",
|
id="devices",
|
||||||
label_key="loyalty.menu.terminal_devices",
|
label_key="loyalty.menu.terminal_devices",
|
||||||
icon="device-tablet",
|
icon="phone",
|
||||||
route="/merchants/loyalty/devices",
|
route="/merchants/loyalty/devices",
|
||||||
order=32,
|
order=32,
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td :colspan="'{{ '6' if show_store_filter else '5' }}'" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
|
<td :colspan="'{{ '6' if show_store_filter else '5' }}'" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<span x-html="$icon('device-tablet', 'w-12 h-12 mb-2 text-gray-300')"></span>
|
<span x-html="$icon('phone', 'w-12 h-12 mb-2 text-gray-300')"></span>
|
||||||
<p class="font-medium">{{ _('loyalty.terminal_devices.no_devices') }}</p>
|
<p class="font-medium">{{ _('loyalty.terminal_devices.no_devices') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@@ -150,13 +150,17 @@
|
|||||||
{{ _('loyalty.terminal_devices.qr_warning_body') }}
|
{{ _('loyalty.terminal_devices.qr_warning_body') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-center bg-white p-4 rounded-lg" x-show="pairingResult">
|
<template x-if="pairingResult">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-center bg-white p-4 rounded-lg">
|
||||||
<img :src="pairingResult.qr_png_base64" alt="Pairing QR code" class="w-64 h-64">
|
<img :src="pairingResult.qr_png_base64" alt="Pairing QR code" class="w-64 h-64">
|
||||||
</div>
|
</div>
|
||||||
<details class="text-sm" x-show="pairingResult">
|
<details class="text-sm mt-3">
|
||||||
<summary class="cursor-pointer text-gray-600 dark:text-gray-400">{{ _('loyalty.terminal_devices.show_payload') }}</summary>
|
<summary class="cursor-pointer text-gray-600 dark:text-gray-400">{{ _('loyalty.terminal_devices.show_payload') }}</summary>
|
||||||
<pre class="mt-2 p-3 text-xs bg-gray-50 dark:bg-gray-900 rounded overflow-x-auto" x-text="JSON.stringify(pairingResult.setup_payload, null, 2)"></pre>
|
<pre class="mt-2 p-3 text-xs bg-gray-50 dark:bg-gray-900 rounded overflow-x-auto" x-text="JSON.stringify(pairingResult.setup_payload, null, 2)"></pre>
|
||||||
</details>
|
</details>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<div class="flex items-center justify-end">
|
<div class="flex items-center justify-end">
|
||||||
<button @click="closeQrModal()" type="button"
|
<button @click="closeQrModal()" type="button"
|
||||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
||||||
|
|||||||
Reference in New Issue
Block a user