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

package/src/blocks/basket-summary-block.tsx

@@ -0,0 +1,404 @@
+'use client';
+
+import React, { useState } from 'react';
+import NextLink from 'next/link';
+import {
+  basketApi,
+  useGetBasketQuery,
+  useApplyVoucherCodeMutation,
+  useRemoveVoucherCodeMutation
+} from '@akinon/next/data/client/basket';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useThemePageContext } from '../theme-page-context';
+import { formatMoney, parseAmount } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+interface BasketTotalsLike {
+  total_amount?: string;
+  total_product_amount?: string;
+  total_discount_amount?: string;
+  total_quantity?: number;
+  voucher_code?: string | null;
+  basketitem_set?: Array<{ currency_type?: string }>;
+}
+
+interface TotalsRow {
+  key: string;
+  label: string;
+  value: string;
+  /** `total` is the grand total; it carries its own part and weight. */
+  type: 'subtotal' | 'discount' | 'total';
+}
+
+/**
+ * Last-resort checkout target. Only used when the editor left `checkoutHref`
+ * empty and no page context supplied one.
+ */
+const DEFAULT_CHECKOUT_HREF = '/orders/checkout';
+
+/**
+ * Functional commerce block: basket totals, optional voucher field and the
+ * checkout call to action. Totals stay commerce-driven; the editor owns the
+ * checkout label/target, every row label, whether the voucher field is exposed
+ * and the styling.
+ *
+ * Parts: root, totals, row, row-label, row-value, total, total-label,
+ * total-value, coupon, coupon-applied, coupon-code, coupon-remove,
+ * coupon-input, coupon-button, coupon-error, cta, empty. A child marked as the
+ * item template replaces the built-in totals row.
+ *
+ * Checkout target resolution, highest priority first:
+ *   1. `checkoutHref` property — authoritative whenever the author sets it.
+ *   2. The SSR page context basket `checkoutUrl` (built from the brand ROUTES).
+ *   3. `/orders/checkout` — the conventional pz route, last resort only.
+ */
+const BasketSummaryBlock = ({
+  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 showCoupon = boolProp('showCoupon', true);
+  const showSubtotal = boolProp('showSubtotal', true);
+  const showDiscount = boolProp('showDiscount', true);
+  const showCheckout = boolProp('showCheckout', true);
+  const checkoutLabel = prop('checkoutLabel', 'Go to checkout');
+  const couponLabel = prop('couponLabel', 'Apply');
+  const couponPlaceholder = prop('couponPlaceholder', 'Coupon code');
+  const couponRemoveLabel = prop('couponRemoveLabel', 'Remove');
+  const couponApplyError = prop(
+    'couponApplyError',
+    'Coupon code could not be applied.'
+  );
+  const couponRemoveError = prop(
+    'couponRemoveError',
+    'Coupon code could not be removed.'
+  );
+  const subtotalLabel = prop('subtotalLabel', 'Subtotal');
+  const discountLabel = prop('discountLabel', 'Discount');
+  const totalLabel = prop('totalLabel', 'Total');
+  const discountPrefix = prop('discountPrefix', '-');
+  const emptyLabel = prop('emptyLabel', '').trim();
+
+  const pageContext = useThemePageContext();
+  const dispatch = useAppDispatch();
+  const { locale, currency: localeCurrency } = useLocalization();
+  const { data: basket } = useGetBasketQuery(undefined as never);
+  const [applyVoucherCode, { isLoading: isApplying }] =
+    useApplyVoucherCodeMutation();
+  const [removeVoucherCode, { isLoading: isRemoving }] =
+    useRemoveVoucherCodeMutation();
+
+  const [code, setCode] = useState('');
+  const [error, setError] = useState('');
+
+  const contextBasket = (pageContext?.basket ?? null) as {
+    totalAmount?: string;
+    totalProductAmount?: string;
+    totalDiscountAmount?: string;
+    voucherCode?: string;
+    checkoutUrl?: string;
+    items?: Array<{ currency?: string }>;
+  } | null;
+
+  const liveBasket = basket as BasketTotalsLike | undefined;
+
+  const totals = {
+    subtotal:
+      liveBasket?.total_product_amount ?? contextBasket?.totalProductAmount,
+    discount:
+      liveBasket?.total_discount_amount ?? contextBasket?.totalDiscountAmount,
+    total: liveBasket?.total_amount ?? contextBasket?.totalAmount,
+    voucher: liveBasket?.voucher_code ?? contextBasket?.voucherCode ?? ''
+  };
+
+  // The basket reports the currency it was priced in; the storefront currency
+  // is only the fallback for an empty basket.
+  const currency =
+    liveBasket?.basketitem_set?.[0]?.currency_type ||
+    contextBasket?.items?.[0]?.currency ||
+    localeCurrency ||
+    '';
+
+  const money = (value?: string | number) =>
+    formatMoney(value, { locale, currency });
+
+  // No page supplies a basket page context yet, so `checkoutUrl` is inert for
+  // now; the read is kept because the basket page context is being wired.
+  const checkoutHref =
+    prop('checkoutHref', '').trim() ||
+    contextBasket?.checkoutUrl ||
+    DEFAULT_CHECKOUT_HREF;
+
+  const hasBasket = Boolean(liveBasket || contextBasket);
+
+  // Rows are built before the early return so the item template and the
+  // built-in markup read exactly the same list.
+  const rows: TotalsRow[] = [];
+
+  if (showSubtotal && totals.subtotal !== undefined) {
+    rows.push({
+      key: 'subtotal',
+      label: subtotalLabel,
+      value: money(totals.subtotal),
+      type: 'subtotal'
+    });
+  }
+
+  if (showDiscount && (parseAmount(totals.discount) ?? 0) > 0) {
+    rows.push({
+      key: 'discount',
+      label: discountLabel,
+      value: `${discountPrefix}${money(totals.discount)}`,
+      type: 'discount'
+    });
+  }
+
+  rows.push({
+    key: 'total',
+    label: totalLabel,
+    value: money(totals.total),
+    type: 'total'
+  });
+
+  const customRows = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={rows as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (!hasBasket) {
+    if (!isDesigner && !emptyLabel) return null;
+
+    return (
+      <div
+        data-basket-summary=""
+        data-basket-summary-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel || (isDesigner ? 'Basket summary (no basket data)' : '')}
+      </div>
+    );
+  }
+
+  // applyVoucherCode/removeVoucherCode declare no invalidatesTags in the core,
+  // so the getBasket cache keeps the pre-coupon totals until a hard refresh.
+  // Both mutations return the recalculated basket, so it is written straight
+  // into the cache — the same approach the brand storefronts use.
+  const syncBasketCache = (nextBasket: unknown) => {
+    if (!nextBasket || typeof nextBasket !== 'object') return;
+
+    dispatch(
+      basketApi.util.updateQueryData('getBasket', undefined, (draft) => {
+        Object.assign(draft as Record<string, unknown>, nextBasket);
+      })
+    );
+  };
+
+  const submitVoucher = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError('');
+
+    const value = code.trim();
+
+    if (isDesigner || !value) return;
+
+    try {
+      const nextBasket = await applyVoucherCode({
+        voucher_code: value
+      }).unwrap();
+
+      syncBasketCache(nextBasket);
+      setCode('');
+    } catch {
+      setError(couponApplyError);
+    }
+  };
+
+  const dropVoucher = async () => {
+    setError('');
+
+    if (isDesigner) return;
+
+    try {
+      const nextBasket = await removeVoucherCode().unwrap();
+
+      syncBasketCache(nextBasket);
+    } catch {
+      setError(couponRemoveError);
+    }
+  };
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '12px',
+    padding: '4px 0'
+  };
+
+  return (
+    <div
+      data-basket-summary=""
+      {...partAttrs('root')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--basket-summary-gap, 12px)'
+      }}
+    >
+      <div data-basket-summary-totals="" {...partAttrs('totals')}>
+        {/* A designer who marked a child as the row layout gets their own row
+            repeated per total; otherwise the built-in rows below render. */}
+        {customRows ??
+          rows.map((row) =>
+            row.type === 'total' ? (
+              <div
+                key={row.key}
+                style={{ ...rowStyle, fontWeight: 600 }}
+                data-basket-summary-row="total"
+                {...partAttrs('total')}
+              >
+                <span {...partAttrs('total-label')}>{row.label}</span>
+                <span {...partAttrs('total-value')}>{row.value}</span>
+              </div>
+            ) : (
+              <div
+                key={row.key}
+                style={rowStyle}
+                data-basket-summary-row={row.type}
+                {...partAttrs('row')}
+              >
+                <span {...partAttrs('row-label')}>{row.label}</span>
+                <span {...partAttrs('row-value')}>{row.value}</span>
+              </div>
+            )
+          )}
+      </div>
+
+      {showCoupon && (
+        <div data-basket-summary-coupon="" {...partAttrs('coupon')}>
+          {totals.voucher ? (
+            <div
+              {...partAttrs('coupon-applied', { selected: true })}
+              style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
+            >
+              <span {...partAttrs('coupon-code')}>{totals.voucher}</span>
+              <button
+                type="button"
+                disabled={isRemoving || isDesigner}
+                onClick={dropVoucher}
+                {...partAttrs('coupon-remove', {
+                  disabled: isRemoving || isDesigner,
+                  loading: isRemoving
+                })}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: 'inherit',
+                  textDecoration: 'underline',
+                  padding: 0
+                }}
+              >
+                {couponRemoveLabel}
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={submitVoucher} style={{ display: 'flex', gap: '8px' }}>
+              <input
+                type="text"
+                value={code}
+                onChange={(event) => setCode(event.target.value)}
+                placeholder={couponPlaceholder}
+                aria-label={couponPlaceholder}
+                aria-invalid={error ? true : undefined}
+                {...partAttrs('coupon-input', { invalid: Boolean(error) })}
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  border: '1px solid var(--basket-summary-border, #d1d5db)',
+                  background: 'transparent',
+                  color: 'inherit',
+                  padding: '8px 12px',
+                  outline: 'none'
+                }}
+              />
+              <button
+                type="submit"
+                disabled={isApplying}
+                {...partAttrs('coupon-button', {
+                  disabled: isApplying,
+                  loading: isApplying
+                })}
+                style={{
+                  border: '1px solid currentColor',
+                  background: 'transparent',
+                  color: 'inherit',
+                  cursor: 'pointer',
+                  padding: '8px 16px'
+                }}
+              >
+                {couponLabel}
+              </button>
+            </form>
+          )}
+          {error && (
+            <div
+              data-basket-summary-error=""
+              role="alert"
+              {...partAttrs('coupon-error', { invalid: true })}
+              style={{ marginTop: '6px' }}
+            >
+              {error}
+            </div>
+          )}
+        </div>
+      )}
+
+      {showCheckout && (
+        <NextLink
+          href={isDesigner ? '#' : checkoutHref}
+          data-basket-checkout=""
+          {...partAttrs('cta')}
+          // Navigating inside the designer iframe would drop the author out of
+          // the page they are editing, so the CTA is inert there.
+          onClick={(event) => {
+            if (isDesigner) event.preventDefault();
+          }}
+          style={{
+            display: 'block',
+            textAlign: 'center',
+            padding: '12px 20px',
+            background: 'var(--basket-summary-cta-bg, #111827)',
+            color: 'var(--basket-summary-cta-color, #ffffff)',
+            textDecoration: 'none'
+          }}
+        >
+          {checkoutLabel}
+        </NextLink>
+      )}
+    </div>
+  );
+};
+
+export default BasketSummaryBlock;

package/src/blocks/block-renderer-registry.tsx

@@ -18,6 +18,48 @@ import LinkBlock from './link-block';
 import LottieBlock from './lottie-block';
 import EmbedBlock from './embed-block';
 import MapBlock from './map-block';
+import ProductGalleryBlock from './product-gallery-block';
+import ProductTitleBlock from './product-title-block';
+import ProductPriceBlock from './product-price-block';
+import VariantSelectorBlock from './variant-selector-block';
+import AddToCartBlock from './add-to-cart-block';
+import FavoriteButtonBlock from './favorite-button-block';
+import ProductDescriptionBlock from './product-description-block';
+import StockStatusBlock from './stock-status-block';
+import ProductGridBlock from './product-grid-block';
+import ListingTitleBlock from './listing-title-block';
+import FacetFiltersBlock from './facet-filters-block';
+import SortSelectBlock from './sort-select-block';
+import ListingPaginationBlock from './listing-pagination-block';
+import ListingBreadcrumbBlock from './listing-breadcrumb-block';
+import BasketItemsBlock from './basket-items-block';
+import BasketSummaryBlock from './basket-summary-block';
+import AccountMenuBlock from './account-menu-block';
+import OrderListBlock from './order-list-block';
+import AuthFormBlock from './auth-form-block';
+import AddressListBlock from './address-list-block';
+import ProfileFormBlock from './profile-form-block';
+import ChangePasswordFormBlock from './change-password-form-block';
+import OrderDetailBlock from './order-detail-block';
+import CouponListBlock from './coupon-list-block';
+import FavouritesGridBlock from './favourites-grid-block';
+import CheckoutSummaryBlock from './checkout-summary-block';
+import CheckoutStepsBlock from './checkout-steps-block';
+import OrderSuccessBlock from './order-success-block';
+import OrderTrackingBlock from './order-tracking-block';
+import ProductBreadcrumbBlock from './product-breadcrumb-block';
+import ProductAttributesBlock from './product-attributes-block';
+import ProductRecommendationsBlock from './product-recommendations-block';
+import SizeGuideBlock from './size-guide-block';
+import AppliedFiltersBlock from './applied-filters-block';
+import ListingResultCountBlock from './listing-result-count-block';
+import CountdownBlock from './countdown-block';
+import RegisterFormBlock from './register-form-block';
+import ForgotPasswordBlock from './forgot-password-block';
+import OauthButtonsBlock from './oauth-buttons-block';
+import StoreLocatorBlock from './store-locator-block';
+import FaqAccordionBlock from './faq-accordion-block';
+import ShareBlock from './share-block';
 
 export interface BlockRendererProps {
   block: Block;
@@ -73,5 +115,57 @@ blockRendererRegistry.register('link', LinkBlock);
 blockRendererRegistry.register('lottie', LottieBlock);
 blockRendererRegistry.register('embed', EmbedBlock);
 blockRendererRegistry.register('map', MapBlock);
+blockRendererRegistry.register('product-gallery', ProductGalleryBlock);
+blockRendererRegistry.register('product-title', ProductTitleBlock);
+blockRendererRegistry.register('product-price', ProductPriceBlock);
+blockRendererRegistry.register('variant-selector', VariantSelectorBlock);
+blockRendererRegistry.register('add-to-cart', AddToCartBlock);
+blockRendererRegistry.register('favorite-button', FavoriteButtonBlock);
+blockRendererRegistry.register('product-description', ProductDescriptionBlock);
+blockRendererRegistry.register('stock-status', StockStatusBlock);
+blockRendererRegistry.register('product-grid', ProductGridBlock);
+blockRendererRegistry.register('listing-title', ListingTitleBlock);
+blockRendererRegistry.register('facet-filters', FacetFiltersBlock);
+blockRendererRegistry.register('sort-select', SortSelectBlock);
+blockRendererRegistry.register('listing-pagination', ListingPaginationBlock);
+blockRendererRegistry.register('listing-breadcrumb', ListingBreadcrumbBlock);
+blockRendererRegistry.register('basket-items', BasketItemsBlock);
+blockRendererRegistry.register('basket-summary', BasketSummaryBlock);
+blockRendererRegistry.register('account-menu', AccountMenuBlock);
+blockRendererRegistry.register('order-list', OrderListBlock);
+blockRendererRegistry.register('auth-form', AuthFormBlock);
+
+// Account
+blockRendererRegistry.register('address-list', AddressListBlock);
+blockRendererRegistry.register('profile-form', ProfileFormBlock);
+blockRendererRegistry.register('change-password-form', ChangePasswordFormBlock);
+blockRendererRegistry.register('order-detail', OrderDetailBlock);
+blockRendererRegistry.register('coupon-list', CouponListBlock);
+blockRendererRegistry.register('favourites-grid', FavouritesGridBlock);
+
+// Chrome extras
+
+// Order flow
+blockRendererRegistry.register('checkout-summary', CheckoutSummaryBlock);
+blockRendererRegistry.register('checkout-steps', CheckoutStepsBlock);
+blockRendererRegistry.register('order-success', OrderSuccessBlock);
+blockRendererRegistry.register('order-tracking', OrderTrackingBlock);
+
+// Catalog extras
+blockRendererRegistry.register('product-breadcrumb', ProductBreadcrumbBlock);
+blockRendererRegistry.register('product-attributes', ProductAttributesBlock);
+blockRendererRegistry.register('product-recommendations', ProductRecommendationsBlock);
+blockRendererRegistry.register('size-guide', SizeGuideBlock);
+blockRendererRegistry.register('applied-filters', AppliedFiltersBlock);
+blockRendererRegistry.register('listing-result-count', ListingResultCountBlock);
+blockRendererRegistry.register('countdown', CountdownBlock);
+
+// Auth and content
+blockRendererRegistry.register('register-form', RegisterFormBlock);
+blockRendererRegistry.register('forgot-password', ForgotPasswordBlock);
+blockRendererRegistry.register('oauth-buttons', OauthButtonsBlock);
+blockRendererRegistry.register('store-locator', StoreLocatorBlock);
+blockRendererRegistry.register('faq-accordion', FaqAccordionBlock);
+blockRendererRegistry.register('share', ShareBlock);
 
 export default blockRendererRegistry;