+
setQuery(event.target.value)}
+ placeholder={t('searchPlaceholder')}
+ className="max-w-xs"
+ aria-label={t('searchPlaceholder')}
+ />
+
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+ {!customers ? (
+
+
+
+
+
+ ) : customers.length === 0 ? (
+
+ ) : (
+
+
+ {t('table.customer')}
+ {t('table.orders')}
+ {t('table.spend')}
+ {t('table.marketing')}
+ {t('table.joined')}
+
+ {t('view')}
+
+
+
+ {customers.map((customer) => (
+
+
+ {customer.displayName}
+
+ {customer.email}
+ {customer.phone ? ` · ${customer.phone}` : ''}
+
+
+
+ {customer.orderCount}
+
+
+ {formatMoney(customer.lifetimeSpend, format)}
+
+
+
+ {customer.acceptsMarketing ? (
+ {t('subscribed')}
+ ) : (
+ {t('notSubscribed')}
+ )}
+
+
+
+ {formatDateTime(customer.createdAt, format)}
+
+
+
+
+
+
+ ))}
+
+
+ )}
+
+ {selectedId ? (
+
setSelectedId(null)} />
+ ) : null}
+
+ );
+}
+
+function CustomerDialog({ customerId, onClose }: { customerId: string; onClose: () => void }) {
+ const t = useTranslations('customers');
+ const format = useFormatter();
+
+ const [detail, setDetail] = useState