@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/src/blocks/order-tracking-block.tsx

@@ -0,0 +1,533 @@
+'use client';
+
+import React, { useState } from 'react';
+import { buildClientRequestUrl, getCookie } from '@akinon/next/utils';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { formatDate, formatMoney } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * Anonymous lookup endpoint. Commerce exposes it under /users/, and the core
+ * `account` url map (`anonymousOrderTracking`) is not imported here because
+ * that module pulls in brand `settings` at import time. Brands that mount it
+ * elsewhere override it through the `endpoint` property.
+ */
+const DEFAULT_ENDPOINT = '/users/orders/anonymous/';
+
+interface TrackedOrderItem {
+  id?: number;
+  price?: string;
+  status?: { label?: string };
+  product?: { pk?: number; name?: string; image?: string } | null;
+}
+
+interface TrackedOrder {
+  id?: number;
+  number?: string;
+  amount?: string;
+  created_date?: string;
+  currency?: { value?: string };
+  status?: { label?: string };
+  orderitem_set?: TrackedOrderItem[];
+}
+
+interface ResultRow {
+  key: string;
+  label: string;
+  value: string;
+  type: 'number' | 'date' | 'status' | 'total';
+}
+
+type LookupState = 'idle' | 'busy' | 'found' | 'error';
+
+const readCount = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
+/**
+ * Anonymous order lookup: order number plus e-mail in, order status out.
+ * Mirrors the brand's anonymous-orders view — a CSRF-protected POST to the
+ * commerce anonymous order endpoint through the client proxy, which returns a
+ * list whose first entry is the matching order.
+ *
+ * Read-only by construction: it can display an order but has no cancel,
+ * return or re-order affordance, so nothing here mutates an order.
+ *
+ * Parts: root, title, form, field, label, input, submit, error, result, row,
+ * row-label, row-value, number, status, list, item, image, content, name,
+ * item-status, line-total, reset. A child marked as the item template replaces
+ * the built-in order line.
+ */
+const OrderTrackingBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) =>
+    readToggle(block.properties?.[key], currentBreakpoint, fallback);
+
+  const title = prop('title', 'Track your order');
+  const numberLabel = prop('numberLabel', 'Order number');
+  const emailLabel = prop('emailLabel', 'E-mail');
+  const submitLabel = prop('submitLabel', 'Find my order');
+  const submittingLabel = prop('submittingLabel', 'Searching…');
+  const notFoundLabel = prop(
+    'notFoundLabel',
+    'No order matches that number and e-mail.'
+  );
+  const dateLabel = prop('dateLabel', 'Order date');
+  const statusLabel = prop('statusLabel', 'Status');
+  const totalLabel = prop('totalLabel', 'Total');
+  const resetLabel = prop('resetLabel', '').trim();
+  const numberPlaceholder = prop('numberPlaceholder', '');
+  const emailPlaceholder = prop('emailPlaceholder', '');
+  const endpoint = prop('endpoint', DEFAULT_ENDPOINT).trim() || DEFAULT_ENDPOINT;
+  const showLineItems = boolProp('showLineItems', true);
+  const showItemImage = boolProp('showItemImage', true);
+  const showItemStatus = boolProp('showItemStatus', true);
+  const showOrderDate = boolProp('showOrderDate', true);
+  const showOrderStatus = boolProp('showOrderStatus', true);
+  const showTotal = boolProp('showTotal', true);
+
+  const imageWidth = readCount(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 56),
+    56
+  );
+  const imageHeight = readCount(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 75),
+    75
+  );
+  const maxItems = readCount(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0
+  );
+
+  const { locale, currency: localeCurrency, locales } = useLocalization();
+
+  const [values, setValues] = useState({ number: '', email: '' });
+  const [state, setState] = useState<LookupState>('idle');
+  const [order, setOrder] = useState<TrackedOrder | null>(null);
+
+  const setField = (key: keyof typeof values) => (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const nextValue = event.target.value;
+    setValues((current) => ({ ...current, [key]: nextValue }));
+  };
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // A lookup from inside the designer would send a real shopper's e-mail to
+    // commerce from the editor iframe, so the form is inert there.
+    if (isDesigner || state === 'busy') return;
+
+    setState('busy');
+    setOrder(null);
+
+    // Every other client request goes through RTK Query's `customBaseQuery`
+    // (akinon-next/data/client/api.ts), whose `prepareHeaders` derives the
+    // shopper's locale and currency from the pz cookies. This raw fetch has to
+    // derive them the same way: without the two headers commerce answers in the
+    // backend default locale and currency, while the result below formats the
+    // amounts with the shopper's currency — so a USD shopper reads TRY numbers
+    // labelled USD.
+    const activeLocale = getCookie('pz-locale') || locale;
+    // Commerce expects the locale's `apiValue` ("en-us"), not the pz locale
+    // value ("en"), which is why the settings locale list is looked up.
+    const localeApiValue = locales?.find(
+      (entry) => entry.value === activeLocale
+    )?.apiValue;
+    const activeCurrency = getCookie('pz-currency') || localeCurrency;
+
+    const headers: Record<string, string> = {
+      // Commerce rejects the POST without the Django CSRF header; the
+      // cookie is set by the storefront on first render.
+      'X-CSRFToken': getCookie('csrftoken') || ''
+    };
+
+    // Only sent once resolved: a literal "undefined" header value would make
+    // commerce reject the negotiation instead of falling back on its default.
+    if (localeApiValue) headers['Accept-Language'] = localeApiValue;
+    if (activeCurrency) headers['x-currency'] = activeCurrency;
+
+    try {
+      const response = await fetch(
+        buildClientRequestUrl(endpoint, {
+          contentType: 'application/json',
+          responseType: 'json'
+        }),
+        {
+          method: 'POST',
+          headers,
+          body: JSON.stringify({
+            email: values.email.trim(),
+            number: values.number.trim()
+          })
+        }
+      );
+
+      if (!response.ok) {
+        setState('error');
+
+        return;
+      }
+
+      const payload = await response.json();
+      // The endpoint answers with a list; an empty list means "no match",
+      // which is a not-found, not a transport failure.
+      const found = Array.isArray(payload) ? payload[0] : payload;
+
+      if (!found) {
+        setState('error');
+
+        return;
+      }
+
+      setOrder(found as TrackedOrder);
+      setState('found');
+    } catch {
+      setState('error');
+    }
+  };
+
+  // The lookup never runs in the designer, so the author would only ever see
+  // the idle form. `previewState` lets them open the other two states to style
+  // them; on the storefront the real state always wins.
+  const previewState = prop('previewState', 'idle') as LookupState;
+  const activeState: LookupState = isDesigner ? previewState : state;
+
+  const currency = order?.currency?.value || localeCurrency || '';
+  const allItems = Array.isArray(order?.orderitem_set) ? order.orderitem_set : [];
+  const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
+
+  const resultRows: ResultRow[] = [
+    {
+      key: 'number',
+      label: numberLabel,
+      value: order?.number || (order?.id ? `#${order.id}` : ''),
+      type: 'number'
+    }
+  ];
+
+  if (showOrderDate && order?.created_date) {
+    resultRows.push({
+      key: 'date',
+      label: dateLabel,
+      value: formatDate(order.created_date, locale),
+      type: 'date'
+    });
+  }
+
+  if (showOrderStatus && order?.status?.label) {
+    resultRows.push({
+      key: 'status',
+      label: statusLabel,
+      value: order.status.label,
+      type: 'status'
+    });
+  }
+
+  if (showTotal) {
+    resultRows.push({
+      key: 'total',
+      label: totalLabel,
+      value: formatMoney(order?.amount, { locale, currency }),
+      type: 'total'
+    });
+  }
+
+  // Plain objects so a designer binds item.name / item.image / item.price /
+  // item.status in their own row layout.
+  const templateItems = items.map((item, index) => ({
+    key: String(item.id ?? item.product?.pk ?? index),
+    name: item.product?.name || '',
+    image: item.product?.image || '',
+    status: item.status?.label || '',
+    price: formatMoney(item.price, { locale, currency })
+  }));
+
+  const customRows = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={templateItems as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    border: '1px solid var(--order-tracking-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '12px',
+    padding: '4px 0'
+  };
+
+  const isBusy = activeState === 'busy';
+  const hasResult = activeState === 'found' && (order !== null || isDesigner);
+
+  return (
+    <div
+      data-order-tracking=""
+      data-order-tracking-state={activeState}
+      {...partAttrs('root', { loading: isBusy })}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--order-tracking-gap, 16px)'
+      }}
+    >
+      {title && (
+        <div
+          data-order-tracking-title=""
+          {...partAttrs('title')}
+          style={{ fontWeight: 600 }}
+        >
+          {title}
+        </div>
+      )}
+
+      {activeState !== 'found' && (
+        <form
+          data-order-tracking-form=""
+          onSubmit={submit}
+          {...partAttrs('form', { loading: isBusy })}
+          style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
+        >
+          <label
+            data-order-tracking-field="number"
+            {...partAttrs('field')}
+            style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+          >
+            <span {...partAttrs('label')}>{numberLabel}</span>
+            <input
+              type="text"
+              name="number"
+              value={values.number}
+              onChange={setField('number')}
+              autoComplete="off"
+              required
+              placeholder={numberPlaceholder || undefined}
+              {...partAttrs('input', { invalid: activeState === 'error' })}
+              style={inputStyle}
+            />
+          </label>
+
+          <label
+            data-order-tracking-field="email"
+            {...partAttrs('field')}
+            style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+          >
+            <span {...partAttrs('label')}>{emailLabel}</span>
+            <input
+              type="email"
+              name="email"
+              value={values.email}
+              onChange={setField('email')}
+              autoComplete="email"
+              required
+              placeholder={emailPlaceholder || undefined}
+              {...partAttrs('input', { invalid: activeState === 'error' })}
+              style={inputStyle}
+            />
+          </label>
+
+          {activeState === 'error' && (
+            <div
+              data-order-tracking-error=""
+              role="alert"
+              {...partAttrs('error', { invalid: true })}
+            >
+              {notFoundLabel}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            data-order-tracking-submit=""
+            disabled={isBusy}
+            aria-busy={isBusy}
+            {...partAttrs('submit', { disabled: isBusy, loading: isBusy })}
+            style={{
+              padding: '12px 20px',
+              background: 'var(--order-tracking-cta-bg, #111827)',
+              color: 'var(--order-tracking-cta-color, #ffffff)',
+              border: 'none',
+              cursor: isBusy ? 'not-allowed' : 'pointer',
+              opacity: isBusy ? 0.7 : 1
+            }}
+          >
+            {isBusy ? submittingLabel : submitLabel}
+          </button>
+        </form>
+      )}
+
+      {hasResult && (
+        <div data-order-tracking-result="" {...partAttrs('result')}>
+          {resultRows.map((row) =>
+            row.type === 'total' ? (
+              <div
+                key={row.key}
+                style={{ ...rowStyle, fontWeight: 600 }}
+                data-order-tracking-row="total"
+                {...partAttrs('row')}
+              >
+                <span {...partAttrs('row-label')}>{row.label}</span>
+                <span {...partAttrs('row-value')}>{row.value}</span>
+              </div>
+            ) : (
+              <div
+                key={row.key}
+                style={rowStyle}
+                data-order-tracking-row={row.type}
+                {...partAttrs('row')}
+              >
+                <span {...partAttrs('row-label')}>{row.label}</span>
+                <span
+                  {...(row.type === 'number'
+                    ? { 'data-order-tracking-number': '' }
+                    : null)}
+                  {...(row.type === 'status'
+                    ? { 'data-order-tracking-status': '' }
+                    : null)}
+                  {...partAttrs(row.type === 'status' ? 'status' : 'row-value')}
+                >
+                  {row.value}
+                </span>
+              </div>
+            )
+          )}
+
+          {showLineItems && (items.length > 0 || customRows) && (
+            <ul
+              data-order-tracking-items=""
+              {...partAttrs('list')}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                listStyle: 'none',
+                margin: '12px 0 0',
+                padding: 0
+              }}
+            >
+              {customRows ??
+                items.map((item, index) => (
+                  <li
+                    key={item.id ?? item.product?.pk ?? index}
+                    data-order-tracking-item=""
+                    {...partAttrs('item')}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      gap: '12px'
+                    }}
+                  >
+                    {showItemImage && item.product?.image && (
+                      // Plain img: order thumbnails come from arbitrary commerce
+                      // CDNs that the brand next.config may not allow.
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={item.product.image}
+                        alt={item.product?.name || ''}
+                        width={imageWidth}
+                        height={imageHeight}
+                        {...partAttrs('image')}
+                        style={{
+                          objectFit: 'cover',
+                          display: 'block',
+                          flex: '0 0 auto'
+                        }}
+                      />
+                    )}
+
+                    <div
+                      {...partAttrs('content')}
+                      style={{ flex: '1 1 auto', minWidth: 0 }}
+                    >
+                      <span
+                        data-order-tracking-item-name=""
+                        {...partAttrs('name')}
+                      >
+                        {item.product?.name || ''}
+                      </span>
+                      {showItemStatus && item.status?.label && (
+                        <div
+                          data-order-tracking-item-status=""
+                          {...partAttrs('item-status')}
+                          style={{ marginTop: '2px', opacity: 0.8 }}
+                        >
+                          {item.status.label}
+                        </div>
+                      )}
+                    </div>
+
+                    <span
+                      data-order-tracking-item-price=""
+                      {...partAttrs('line-total')}
+                      style={{ flex: '0 0 auto' }}
+                    >
+                      {formatMoney(item.price, { locale, currency })}
+                    </span>
+                  </li>
+                ))}
+            </ul>
+          )}
+
+          {resetLabel && (
+            <button
+              type="button"
+              data-order-tracking-reset=""
+              onClick={() => {
+                // Designer clicks must not clear a preview the author is styling.
+                if (isDesigner) return;
+
+                setOrder(null);
+                setState('idle');
+              }}
+              {...partAttrs('reset')}
+              style={{
+                marginTop: '12px',
+                background: 'none',
+                border: 'none',
+                color: 'inherit',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                padding: 0
+              }}
+            >
+              {resetLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrderTrackingBlock;