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

package/src/blocks/account-menu-block.tsx

@@ -9,6 +9,7 @@ import { useLogoutMutation } from '@akinon/next/data/client/user';
 import { emitCommerceEvent } from '../utils/analytics';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readResponsiveArray } from './responsive-array';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
@@ -23,6 +24,56 @@ const DEFAULT_ITEM_ORDER = [
   'coupons'
 ];
 
+type ActiveMatch = 'exact' | 'startsWith';
+
+/**
+ * One entry of the editor's item list (`menuItems`).
+ *
+ * `match` overrides the block-wide Active Item Match for this entry, and a
+ * blank one inherits it. `activePaths` names further pages that keep the entry
+ * selected — a "Personal details" tab that stays selected on the address and
+ * password pages — and each of them is matched with the entry's own rule.
+ */
+interface AccountMenuListEntry {
+  id?: unknown;
+  label?: unknown;
+  href?: unknown;
+  match?: unknown;
+  activePaths?: unknown;
+}
+
+interface ResolvedMenuItem {
+  key: string;
+  href: string;
+  label: string;
+  match: ActiveMatch;
+  activePaths: string[];
+}
+
+const toActiveMatch = (value: unknown, fallback: ActiveMatch): ActiveMatch =>
+  value === 'exact' || value === 'startsWith' ? value : fallback;
+
+const toText = (value: unknown) =>
+  typeof value === 'string' || typeof value === 'number'
+    ? String(value).trim()
+    : '';
+
+// Commas, spaces and line breaks all separate paths: a path never contains
+// one, and the editor field is free text.
+const toPathList = (value: unknown) =>
+  typeof value === 'string'
+    ? value
+        .split(/[\s,]+/)
+        .map((path) => path.trim())
+        .filter(Boolean)
+    : [];
+
+// `/account/orders/` and `/account/orders` are the same page; whether the
+// pathname carries the slash depends on the brand's trailingSlash setting,
+// and the configured href is typed by hand.
+const trimTrailingSlash = (path: string) =>
+  path.length > 1 ? path.replace(/\/+$/, '') : path;
+
 /**
  * Functional account block: account area navigation.
  *
@@ -30,9 +81,14 @@ const DEFAULT_ITEM_ORDER = [
  * import the brand alias, so every target is an editor property. The
  * defaults are the conventional '/account/...' paths — brands whose ROUTES
  * differ (superstep uses '/users/orders' for orders) override them here.
- * Properties: showLogout, itemOrder, orientation, activeMatch, emptyLabel,
- * ordersHref, addressesHref, profileHref, favouritesHref, couponsHref,
- * logoutLabel and the matching *Label keys.
+ *
+ * Items come from `menuItems` — the list the designer adds to with + and
+ * removes from with − — whenever the block has one. Every composition saved
+ * before that list existed has none and keeps rendering from the five fixed
+ * keys: itemOrder, ordersHref, addressesHref, profileHref, favouritesHref,
+ * couponsHref and the matching *Label keys.
+ * Other properties: showLogout, orientation, overflow, activeMatch,
+ * emptyLabel, logoutLabel, logoutRedirect.
  * Parts: menu, item (selected), logout, empty.
  */
 const AccountMenuBlock = ({
@@ -63,74 +119,124 @@ const AccountMenuBlock = ({
   const showLogout = boolProp('showLogout', true);
   const orientation =
     prop('orientation', 'vertical') === 'horizontal' ? 'horizontal' : 'vertical';
-  const activeMatch =
-    prop('activeMatch', 'exact') === 'startsWith' ? 'startsWith' : 'exact';
+  // A horizontal menu that does not fit either wraps onto a new line (what it
+  // has always done) or stays on one line and scrolls sideways — the tab strip
+  // most brands put above the account pages on a phone.
+  const scrollsSideways =
+    orientation === 'horizontal' && prop('overflow', 'wrap') === 'scroll';
+  const activeMatch = toActiveMatch(prop('activeMatch', 'exact'), 'exact');
   const emptyLabel = prop('emptyLabel', '');
 
   const pathname = usePathname();
   const localize = useLocalizeHref();
   const [logout, { isLoading: isLoggingOut }] = useLogoutMutation();
 
-  const definitions: Record<
-    string,
-    { key: string; href: string; label: string }
-  > = {
-    orders: {
-      key: 'orders',
-      href: prop('ordersHref', '/account/orders'),
-      label: prop('ordersLabel', 'Orders')
-    },
-    addresses: {
-      key: 'addresses',
-      href: prop('addressesHref', '/account/address'),
-      label: prop('addressesLabel', 'Addresses')
-    },
-    profile: {
-      key: 'profile',
-      href: prop('profileHref', '/account/profile'),
-      label: prop('profileLabel', 'Profile')
-    },
-    favourites: {
-      key: 'favourites',
-      href: prop('favouritesHref', '/account/favourite-products'),
-      label: prop('favouritesLabel', 'Favourites')
-    },
-    coupons: {
-      key: 'coupons',
-      href: prop('couponsHref', '/account/coupons'),
-      label: prop('couponsLabel', 'Coupons')
-    }
+  const legacyItems = (): ResolvedMenuItem[] => {
+    const definitions: Record<string, { href: string; label: string }> = {
+      orders: {
+        href: prop('ordersHref', '/account/orders'),
+        label: prop('ordersLabel', 'Orders')
+      },
+      addresses: {
+        href: prop('addressesHref', '/account/address'),
+        label: prop('addressesLabel', 'Addresses')
+      },
+      profile: {
+        href: prop('profileHref', '/account/profile'),
+        label: prop('profileLabel', 'Profile')
+      },
+      favourites: {
+        href: prop('favouritesHref', '/account/favourite-products'),
+        label: prop('favouritesLabel', 'Favourites')
+      },
+      coupons: {
+        href: prop('couponsHref', '/account/coupons'),
+        label: prop('couponsLabel', 'Coupons')
+      }
+    };
+
+    const requestedOrder = prop('itemOrder', DEFAULT_ITEM_ORDER.join(','))
+      .split(',')
+      .map((key) => key.trim())
+      .filter(Boolean);
+    // A repeated key would render the same route twice and collide on the
+    // React key, so the list is de-duplicated before it is resolved.
+    const resolvedOrder = Array.from(
+      new Set(requestedOrder.length > 0 ? requestedOrder : DEFAULT_ITEM_ORDER)
+    );
+
+    return resolvedOrder
+      .filter((key) => Boolean(definitions[key]))
+      .map((key) => ({
+        key,
+        href: definitions[key].href,
+        label: definitions[key].label,
+        match: activeMatch,
+        activePaths: []
+      }))
+      .filter((item) => Boolean(item.href) && Boolean(item.label));
   };
 
-  const requestedOrder = prop('itemOrder', DEFAULT_ITEM_ORDER.join(','))
-    .split(',')
-    .map((key) => key.trim())
-    .filter(Boolean);
-  // A repeated key would render the same route twice and collide on the React
-  // key, so the list is de-duplicated before it is resolved.
-  const resolvedOrder = Array.from(
-    new Set(requestedOrder.length > 0 ? requestedOrder : DEFAULT_ITEM_ORDER)
-  );
+  const listItems = (rawList: unknown): ResolvedMenuItem[] => {
+    const seenKeys = new Set<string>();
+
+    return readResponsiveArray<AccountMenuListEntry | null>(
+      rawList,
+      currentBreakpoint
+    )
+      .map((entry, index) => {
+        const id = toText(entry?.id) || `item-${index + 1}`;
+        // Two entries sharing an id (one duplicated by hand in the JSON) would
+        // collide on the React key, so the second one is told apart.
+        const key = seenKeys.has(id) ? `${id}-${index + 1}` : id;
+        seenKeys.add(key);
 
-  const items = resolvedOrder
-    .map((key) => definitions[key])
-    .filter((item) => Boolean(item?.href) && Boolean(item?.label));
+        return {
+          key,
+          href: toText(entry?.href),
+          label: toText(entry?.label),
+          match: toActiveMatch(entry?.match, activeMatch),
+          activePaths: toPathList(entry?.activePaths)
+        };
+      })
+      .filter((item) => Boolean(item.href) && Boolean(item.label));
+  };
+
+  // A list is any array, flat or per breakpoint. An emptied list is still a
+  // list: the designer removed every entry, so the menu shows none. An object
+  // holding no array is not a list: a block dropped in the editor can carry
+  // `{desktop: undefined}` (`{}` once saved), and it must keep the five fixed
+  // entries the editor's panel shows for it, not render an empty menu.
+  const rawMenuItems = block.properties?.menuItems;
+  const hasItemList =
+    Array.isArray(rawMenuItems) ||
+    (rawMenuItems !== null &&
+      typeof rawMenuItems === 'object' &&
+      Object.values(rawMenuItems).some(Array.isArray));
+
+  const items = hasItemList ? listItems(rawMenuItems) : legacyItems();
 
   // The pathname carries the locale (`/en/account/orders`) and the configured
   // hrefs do not, so each item is matched in the localized form its link renders.
-  const isActive = (href: string) => {
+  const matchesPage = (href: string, match: ActiveMatch) => {
     if (!pathname || !href) return false;
-    const target = localize(href);
-    if (activeMatch === 'startsWith') {
+    const current = trimTrailingSlash(pathname);
+    const target = trimTrailingSlash(localize(href));
+    if (match === 'startsWith') {
       return (
-        pathname === target ||
-        pathname.startsWith(`${target.replace(/\/$/, '')}/`)
+        current === target ||
+        current.startsWith(`${target.replace(/\/$/, '')}/`)
       );
     }
 
-    return pathname === target;
+    return current === target;
   };
 
+  const isActive = (item: ResolvedMenuItem) =>
+    [item.href, ...item.activePaths].some((href) =>
+      matchesPage(href, item.match)
+    );
+
   const handleLogout = async () => {
     if (isDesigner) return;
 
@@ -189,7 +295,10 @@ const AccountMenuBlock = ({
     padding: '8px 0',
     color: 'inherit',
     textDecoration: 'none',
-    fontWeight: active ? 600 : 400
+    fontWeight: active ? 600 : 400,
+    // On a scrolling strip an entry keeps its full width instead of being
+    // squeezed until its label breaks.
+    ...(scrollsSideways ? { flexShrink: 0 } : null)
   });
 
   // Both spellings of each field are published so a designer can bind either
@@ -201,7 +310,7 @@ const AccountMenuBlock = ({
     label: item.label,
     href: item.href,
     url: item.href,
-    active: isActive(item.href)
+    active: isActive(item)
   }));
 
   // A designer who marked a child as the row layout gets that layout repeated
@@ -219,21 +328,34 @@ const AccountMenuBlock = ({
     />
   ) : null;
 
+  const horizontalLayout: React.CSSProperties = scrollsSideways
+    ? {
+        flexWrap: 'nowrap',
+        overflowX: 'auto',
+        // `nowrap` is inherited by row layouts too, so a templated row is as
+        // wide as its content and the strip scrolls instead of squeezing it.
+        whiteSpace: 'nowrap',
+        scrollbarWidth: 'none',
+        WebkitOverflowScrolling: 'touch'
+      }
+    : { flexWrap: 'wrap' };
+
   return (
     <nav
       data-account-menu=""
       data-account-menu-orientation={orientation}
+      data-account-menu-overflow={scrollsSideways ? 'scroll' : undefined}
       {...partAttrs('menu')}
       style={{
         display: 'flex',
         flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-        ...(orientation === 'horizontal' ? { flexWrap: 'wrap' } : null),
+        ...(orientation === 'horizontal' ? horizontalLayout : null),
         gap: 'var(--account-menu-gap, 4px)'
       }}
     >
       {customItems ??
         items.map((item) => {
-          const active = isActive(item.href);
+          const active = isActive(item);
 
           return (
             <NextLink

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

@@ -13,7 +13,6 @@ import {
   ITEM_TEMPLATE_ROLE,
   ItemTemplateList
 } from './item-template';
-import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import type { Block } from '../theme-block';
 import {
@@ -30,7 +29,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -52,7 +51,7 @@ type OrderItemLike = {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -431,7 +430,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
- * color, size, item-status, item-tracking, item-return-code, item-actions,
+ * color, size, item-status, item-tracking, item-return-code,
  * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
  * delivery, tracking, addresses, address, address-label, totals, total-row,
  * total-label, total-value, grand-total, payment-info, payment-info-label.
@@ -1132,21 +1131,6 @@ const OrderDetailBlock = ({
                 showPickupDate && returnDetails.pickupDate
                   ? formatPickupDate(returnDetails.pickupDate, locale)
                   : '';
-              const lineActions = renderOrderLineActions({
-                order,
-                line,
-                isDesigner
-              });
-              const showLineMeta =
-                showShipmentStatus &&
-                Boolean(
-                  item.status?.label ||
-                    trackingValue ||
-                    returnCodeValue ||
-                    returnMethodValue ||
-                    returnCarrierValue ||
-                    pickupDateValue
-                );
 
               return (
                 <li
@@ -1262,100 +1246,98 @@ const OrderDetailBlock = ({
                       </div>
                     </div>
 
-                    {(showLineMeta || lineActions) && (
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: isMobile ? 'flex-start' : 'flex-end',
-                          textAlign: isMobile ? 'left' : 'right',
-                          gap: '4px',
-                          flex: isMobile ? '1 1 100%' : '0 0 auto'
-                        }}
-                      >
-                        {lineActions && (
-                          <div
-                            data-order-detail-item-actions=""
-                            {...partAttrs('item-actions')}
-                          >
-                            {lineActions}
-                          </div>
-                        )}
-                        {showLineMeta && item.status?.label && (
-                          <span
-                            data-order-detail-item-status=""
-                            data-order-status-value={item.status.value}
-                            {...partAttrs('item-status')}
-                            style={{ display: 'inline-block' }}
-                          >
-                            {item.status.label}
-                          </span>
-                        )}
-                        {/* Label and value in their own spans, so a
-                            composition can colour them apart. */}
-                        {showLineMeta && returnMethodValue && (
-                          <span
-                            data-order-detail-item-return-method=""
-                            {...partAttrs('item-return-method')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnMethodLabel}</span>{' '}
-                            <span data-value="">{returnMethodValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && returnCarrierValue && (
-                          <span
-                            data-order-detail-item-return-carrier=""
-                            {...partAttrs('item-return-carrier')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnCarrierLabel}</span>{' '}
-                            <span data-value="">{returnCarrierValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && pickupDateValue && (
-                          <span
-                            data-order-detail-item-pickup-date=""
-                            {...partAttrs('item-pickup-date')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{pickupDateLabel}</span>{' '}
-                            <span data-value="">{pickupDateValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && trackingValue && (
-                          <span
-                            data-order-detail-item-tracking=""
-                            {...partAttrs('item-tracking')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {lineTrackingLabel}{' '}
-                            {item.tracking_url ? (
-                              <a
-                                href={isDesigner ? '#' : item.tracking_url}
-                                onClick={guard}
-                                target={isDesigner ? undefined : '_blank'}
-                                rel="noreferrer"
-                                style={{ color: 'inherit' }}
-                              >
-                                {item.tracking_number || item.tracking_url}
-                              </a>
-                            ) : (
-                              trackingValue
-                            )}
-                          </span>
-                        )}
-                        {showLineMeta && returnCodeValue && (
-                          <span
-                            data-order-detail-item-return-code=""
-                            {...partAttrs('item-return-code')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {returnCodeLabel} {returnCodeValue}
-                          </span>
-                        )}
-                      </div>
-                    )}
+                    {showShipmentStatus &&
+                      (item.status?.label ||
+                        trackingValue ||
+                        returnCodeValue ||
+                        returnMethodValue ||
+                        returnCarrierValue ||
+                        pickupDateValue) && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isMobile ? 'flex-start' : 'flex-end',
+                            textAlign: isMobile ? 'left' : 'right',
+                            gap: '4px',
+                            flex: isMobile ? '1 1 100%' : '0 0 auto'
+                          }}
+                        >
+                          {item.status?.label && (
+                            <span
+                              data-order-detail-item-status=""
+                              data-order-status-value={item.status.value}
+                              {...partAttrs('item-status')}
+                              style={{ display: 'inline-block' }}
+                            >
+                              {item.status.label}
+                            </span>
+                          )}
+                          {/* Label and value in their own spans, so a
+                              composition can colour them apart. */}
+                          {returnMethodValue && (
+                            <span
+                              data-order-detail-item-return-method=""
+                              {...partAttrs('item-return-method')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnMethodLabel}</span>{' '}
+                              <span data-value="">{returnMethodValue}</span>
+                            </span>
+                          )}
+                          {returnCarrierValue && (
+                            <span
+                              data-order-detail-item-return-carrier=""
+                              {...partAttrs('item-return-carrier')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnCarrierLabel}</span>{' '}
+                              <span data-value="">{returnCarrierValue}</span>
+                            </span>
+                          )}
+                          {pickupDateValue && (
+                            <span
+                              data-order-detail-item-pickup-date=""
+                              {...partAttrs('item-pickup-date')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{pickupDateLabel}</span>{' '}
+                              <span data-value="">{pickupDateValue}</span>
+                            </span>
+                          )}
+                          {trackingValue && (
+                            <span
+                              data-order-detail-item-tracking=""
+                              {...partAttrs('item-tracking')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {lineTrackingLabel}{' '}
+                              {item.tracking_url ? (
+                                <a
+                                  href={isDesigner ? '#' : item.tracking_url}
+                                  onClick={guard}
+                                  target={isDesigner ? undefined : '_blank'}
+                                  rel="noreferrer"
+                                  style={{ color: 'inherit' }}
+                                >
+                                  {item.tracking_number || item.tracking_url}
+                                </a>
+                              ) : (
+                                trackingValue
+                              )}
+                            </span>
+                          )}
+                          {returnCodeValue && (
+                            <span
+                              data-order-detail-item-return-code=""
+                              {...partAttrs('item-return-code')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {returnCodeLabel} {returnCodeValue}
+                            </span>
+                          )}
+                        </div>
+                      )}
                   </div>
                 </li>
               );

package/src/blocks/text-block.tsx

@@ -7,7 +7,6 @@ import { getInnerRootInlineStyles, partAttrs } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { localizeHtmlLinks } from '../utils/localize-href';
-import { useValueLocale } from '../utils/localized-value';
 // Rich-text element defaults from the theme settings.
 import {
   THEME_RICH_TEXT_ATTRIBUTE,
@@ -20,7 +19,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const { defaultLocale } = useValueLocale();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -36,10 +35,7 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] ||
-        (defaultLocale && value[defaultLocale]) ||
-        Object.values(value)[0] ||
-        ''
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
       );
     }