@akinon/pz-theme 2.0.75-rc.0 → 2.0.76-beta.0

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

@@ -68,6 +68,8 @@ const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
 const VARIANT_LAYOUTS = ['inline', 'rows'];
 const QUANTITY_CONTROLS = ['stepper', 'select'];
 const REMOVE_PLACEMENTS = ['aside', 'inline'];
+/** `plugin` keeps pz-basket-gift-pack's own icon + links UI. */
+const GIFT_WRAP_PRESENTATIONS = ['plugin', 'checkbox'];
 
 const toText = (value: unknown): string =>
   typeof value === 'string'
@@ -173,8 +175,11 @@ const readOption = <T extends string>(
 /**
  * What a line is worth, read the way the brand storefronts read it: the
  * struck "retail" figure comes from the price list (`retail_price` above
- * `price`), the "in basket" figure from a basket campaign that cut the line
- * (`discount_amount` > 0 → `total_amount / quantity`).
+ * `price`), the "in basket" figure from a basket CAMPAIGN that cut the
+ * line's own unit price (`unit_price` below `price`). `discount_amount` is
+ * deliberately not a signal — a basket-level voucher writes its share into
+ * it without touching the unit price, and reading it repeated the plain
+ * price as a "SEPETTE" badge the moment a promo code was applied.
  */
 const describeLinePrice = (item: BasketLineLike) => {
   const price = parseAmount(item.price ?? item.product?.price);
@@ -185,13 +190,9 @@ const describeLinePrice = (item: BasketLineLike) => {
     discounted && retail! > 0
       ? Math.round(((retail! - price!) / retail!) * 100)
       : 0;
-  const quantity = Number(item.quantity ?? 0);
-  const total = parseAmount(item.total_amount);
-  const basketDiscount = parseAmount(item.discount_amount) ?? 0;
+  const unit = parseAmount(item.unit_price);
   const basketUnit =
-    basketDiscount > 0 && total !== null && quantity > 0
-      ? total / quantity
-      : null;
+    unit !== null && price !== null && unit < price ? unit : null;
 
   return { price, retail, discounted, percent, basketUnit };
 };
@@ -284,7 +285,9 @@ const RemoveGlyph = ({ icon }: { icon: string }) =>
  * variant-row, variant-label, variant-value, price-row, retail-price, price
  * (`selected` while a retail figure is struck), discount-badge,
  * basket-price, quantity, quantity-button, quantity-input, quantity-select,
- * quantity-select-icon, gift-wrap, actions, line-total, remove, empty. A child marked as the item
+ * quantity-select-icon, upsell-banner, gift-wrap, gift-wrap-toggle, gift-wrap-box,
+ * gift-wrap-label, controls (wraps quantity, gift wrap and
+ * the inline remove), remove-slot, actions, line-total, remove, empty. A child marked as the item
  * template replaces the built-in row.
  *
  * Properties (beyond the toggles): variantLayout (inline | rows), variantRows
@@ -360,6 +363,99 @@ const BasketItemsBlock = ({
     'aside'
   );
   const showGiftWrap = boolProp('showGiftWrap', false);
+  const showUpsellBanner = boolProp('showUpsellBanner', false);
+  const upsellBannerFormat = prop('upsellBannerFormat', '{message}');
+  const giftWrapPresentation = readOption<'plugin' | 'checkbox'>(
+    block.properties?.giftWrapPresentation,
+    currentBreakpoint,
+    GIFT_WRAP_PRESENTATIONS,
+    'plugin'
+  );
+  // Authored wording for the pz-basket-gift-pack plugin; an empty value
+  // keeps the plugin's own default for that string.
+  const giftWrapTranslations = Object.fromEntries(
+    (
+      [
+        ['addGiftPack', 'giftWrapAddLabel'],
+        ['giftPackAdded', 'giftWrapAddedLabel'],
+        ['removeGiftPack', 'giftWrapRemoveLabel'],
+        ['addNote', 'giftWrapNoteLabel'],
+        ['placeholderInput', 'giftWrapNotePlaceholder'],
+        ['save', 'giftWrapSaveLabel']
+      ] as const
+    )
+      .map(([pluginKey, propKey]) => [pluginKey, prop(propKey, '').trim()])
+      .filter(([, value]) => Boolean(value))
+  );
+  const giftWrapCheckboxLabel =
+    prop('giftWrapAddLabel', '').trim() || 'Gift wrap';
+
+  /**
+   * The checkbox presentation of the gift pack: a 17px box and the label,
+   * toggling the plugin's own add / remove handlers — the plugin still owns
+   * the request; only its default icon-and-links UI is replaced.
+   * Parts: gift-wrap-toggle, gift-wrap-box (`checked`), gift-wrap-label.
+   */
+  const giftWrapCheckboxRow = (
+    checked: boolean,
+    onToggle: (() => void) | null
+  ) => (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      disabled={!onToggle}
+      onClick={(event) => {
+        event.preventDefault();
+        onToggle?.();
+      }}
+      {...partAttrs('gift-wrap-toggle', { checked })}
+      style={{
+        // Block-level flex on purpose: an inline-flex button reports a
+        // different baseline once the box has the checkmark in it, and the
+        // wrapper's line box grows or shrinks with the toggle.
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        padding: 0,
+        border: 'none',
+        background: 'none',
+        color: 'inherit',
+        font: 'inherit',
+        cursor: onToggle ? 'pointer' : 'default'
+      }}
+    >
+      <span
+        {...partAttrs('gift-wrap-box', { checked })}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '17px',
+          height: '17px',
+          flex: '0 0 auto',
+          background: '#ffffff',
+          border: '1px solid var(--basket-items-border, rgba(0, 0, 0, 0.07))'
+        }}
+      >
+        {checked && (
+          <svg
+            width="9"
+            height="8"
+            viewBox="0 0 8 8"
+            fill="currentColor"
+            aria-hidden="true"
+            style={{ display: 'block' }}
+          >
+            <path d="M7.54 1.33L3.14 5.73L3.14 5.73L2.51 6.36L1.88 5.73L0 3.85L0.63 3.22L2.51 5.1L6.91 0.7L7.54 1.33Z" />
+          </svg>
+        )}
+      </span>
+      <span {...partAttrs('gift-wrap-label', { checked })}>
+        {giftWrapCheckboxLabel}
+      </span>
+    </button>
+  );
   const showRetailPrice = boolProp('showRetailPrice', false);
   const showDiscountBadge = boolProp('showDiscountBadge', false);
   const discountBadgeFormat = prop('discountBadgeFormat', '-{percent}%');
@@ -476,6 +572,43 @@ const BasketItemsBlock = ({
 
   const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
 
+  type UpsellDetailLike = {
+    message?: string;
+    params?: {
+      required?: number;
+      partial?: number;
+      remaining?: number;
+    } | null;
+  };
+
+  // Commerce announces basket promotions in progress ("add 2 more items")
+  // through `upsell_details`; the banner only ever shows what the API sent,
+  // so it disappears on its own when no campaign is running.
+  const liveUpsells: UpsellDetailLike[] = showUpsellBanner
+    ? (
+        (basket as { upsell_details?: UpsellDetailLike[] } | undefined)
+          ?.upsell_details ?? []
+      ).filter((entry) => entry && (entry.message || entry.params))
+    : [];
+  const upsells: UpsellDetailLike[] =
+    isDesigner && showUpsellBanner && liveUpsells.length === 0
+      ? [
+          {
+            message: 'Add 2 more items to unlock the campaign',
+            params: { required: 3, partial: 1, remaining: 2 }
+          }
+        ]
+      : liveUpsells;
+
+  const formatUpsell = (upsell: UpsellDetailLike) => {
+    const params = upsell.params ?? {};
+    return upsellBannerFormat
+      .replace(/\{message\}/g, upsell.message ?? '')
+      .replace(/\{remaining\}/g, String(params.remaining ?? ''))
+      .replace(/\{required\}/g, String(params.required ?? ''))
+      .replace(/\{partial\}/g, String(params.partial ?? ''));
+  };
+
   const changeQuantity = (item: BasketLineLike, nextQuantity: number) => {
     const productPk = item.product?.pk;
 
@@ -592,6 +725,16 @@ const BasketItemsBlock = ({
         padding: 0
       }}
     >
+      {upsells.map((upsell, index) => (
+        <li
+          key={`upsell-${index}`}
+          data-basket-items-upsell=""
+          {...partAttrs('upsell-banner')}
+          style={{ listStyle: 'none' }}
+        >
+          {formatUpsell(upsell)}
+        </li>
+      ))}
       {customRows ??
         items.map((item, index) => {
           // The line reports the currency it was priced in; the storefront
@@ -714,7 +857,12 @@ const BasketItemsBlock = ({
 
           return (
             <li
-              key={item.id ?? item.product?.pk ?? index}
+              // Not item.id: the commerce backend recreates the basket item
+              // (new id) whenever an attribute like the gift note is written,
+              // and an id key would remount the row — visibly re-loading the
+              // gift wrap plugin on every checkbox toggle. The product pk
+              // survives those rewrites.
+              key={item.product?.pk ?? item.id ?? index}
               data-basket-item=""
               {...partAttrs('item')}
               style={{
@@ -912,6 +1060,18 @@ const BasketItemsBlock = ({
                   </div>
                 )}
 
+                {/* One container around the quantity control, the gift
+                    wrap slot and the inline remove, so a brand can lay the
+                    three out per breakpoint (the mobile design puts the
+                    remove beside the quantity box) without new markup. */}
+                <div
+                  {...partAttrs('controls')}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start'
+                  }}
+                >
                 {allowQuantityChange && quantityControl === 'select' && (
                   <div
                     data-basket-item-quantity=""
@@ -1030,7 +1190,29 @@ const BasketItemsBlock = ({
                   >
                     <PluginModule
                       component={Component.BasketGiftPack}
-                      props={{ basketItem: item }}
+                      props={{
+                        basketItem: item,
+                        translations: giftWrapTranslations,
+                        ...(giftWrapPresentation === 'checkbox'
+                          ? {
+                              customUIRender: ({
+                                hasGiftPack,
+                                onAddGiftPack,
+                                onRemoveGiftPack
+                              }: {
+                                hasGiftPack: boolean;
+                                onAddGiftPack: () => void;
+                                onRemoveGiftPack: () => void;
+                              }) =>
+                                giftWrapCheckboxRow(
+                                  hasGiftPack,
+                                  hasGiftPack
+                                    ? onRemoveGiftPack
+                                    : onAddGiftPack
+                                )
+                            }
+                          : {})
+                      }}
                     />
                   </div>
                 )}
@@ -1039,22 +1221,30 @@ const BasketItemsBlock = ({
                   <div
                     data-basket-item-gift-wrap=""
                     {...partAttrs('gift-wrap')}
-                    style={{ marginTop: '8px', opacity: 0.6 }}
+                    style={{
+                      marginTop: '8px',
+                      opacity: giftWrapPresentation === 'checkbox' ? 1 : 0.6
+                    }}
                   >
                     {/* The plugin renders against a live basket only; the
-                        canvas shows where it lands. */}
-                    Gift wrap (plugin)
+                        canvas shows the checkbox itself, or where the
+                        plugin's own UI lands. */}
+                    {giftWrapPresentation === 'checkbox'
+                      ? giftWrapCheckboxRow(false, null)
+                      : 'Gift wrap (plugin)'}
                   </div>
                 )}
 
                 {removePlacement === 'inline' && removeControl && (
                   <div
                     data-basket-item-remove-slot=""
+                    {...partAttrs('remove-slot')}
                     style={{ marginTop: '8px' }}
                   >
                     {removeControl}
                   </div>
                 )}
+                </div>
               </div>
 
               <div