@akinon/projectzero 1.126.20-v1-rc.17 → 1.126.20

package/app-template/src/views/checkout/variants/one-page/one-page-summary.tsx

@@ -0,0 +1,301 @@
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { Price, Link } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
+import { Image } from '@akinon/next/components/image';
+import { StoreCredits } from '@theme/views/checkout/steps/payment/options/store-credit';
+import type { RootState } from '@theme/redux/store';
+import type { SectionId } from './hooks/use-section-state';
+
+interface OnePageSummaryProps {
+  onEditSection: (section: SectionId) => void;
+  showReview?: boolean;
+}
+
+const OnePageSummary = ({
+  onEditSection,
+  showReview = true
+}: OnePageSummaryProps) => {
+  const { t } = useLocalization();
+  const preOrder = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+  const { isMobileApp } = useAppSelector((state: RootState) => state.root);
+
+  if (!preOrder?.basket) return null;
+
+  const itemCount = preOrder.basket.basketitem_set.length;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PluginModule
+        component={Component.CheckoutGiftPack}
+        props={{
+          className:
+            'flex flex-col w-full rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]'
+        }}
+      />
+      <StoreCredits />
+
+      <section
+        className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]"
+        {...partAttrs('summary')}
+      >
+        <header
+          className="flex items-baseline justify-between px-6 py-5"
+          {...partAttrs('summary-header')}
+        >
+          <span
+            className="text-lg font-semibold tracking-tight text-black-800"
+            {...partAttrs('summary-title')}
+          >
+            {t('checkout.summary.title')}
+          </span>
+          <span className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
+            {itemCount} {t('checkout.summary.items')}
+          </span>
+        </header>
+
+        <ul className="max-h-72 divide-y divide-gray-100 overflow-y-auto border-t border-gray-100">
+          {preOrder.basket.basketitem_set.map((item, index) => (
+            <li
+              key={`one-page-summary-item-${index}`}
+              className="flex gap-3 px-6 py-4"
+              {...partAttrs('summary-item')}
+            >
+              <Link
+                href={item.product.absolute_url || '#'}
+                passHref
+                className={
+                  isMobileApp
+                    ? 'pointer-events-none flex-shrink-0'
+                    : 'flex-shrink-0 overflow-hidden rounded-md'
+                }
+              >
+                <Image
+                  src={item.product.productimage_set[0]?.image}
+                  alt={item.product.name}
+                  width={56}
+                  height={84}
+                />
+              </Link>
+              <div className="flex flex-1 flex-col justify-between text-xs">
+                <Link
+                  href={item.product.absolute_url || '#'}
+                  className="line-clamp-2 text-sm font-medium text-black-800 transition-colors hover:text-secondary"
+                >
+                  {item.product.name}
+                </Link>
+                <div className="flex items-end justify-between gap-2">
+                  <span className="text-gray-500">
+                    {t('checkout.summary.quantity')}:{' '}
+                    <span className="font-medium tabular-nums text-black-800">
+                      {item.quantity}
+                    </span>
+                  </span>
+                  <div className="flex flex-col items-end gap-0.5">
+                    {item.product.retail_price !== item.product.price && (
+                      <span className="text-[10px] text-gray-400 line-through">
+                        <Price value={item.product.retail_price} />
+                      </span>
+                    )}
+                    <span className="text-sm font-semibold text-black-800 tabular-nums">
+                      <Price value={item.product.price} />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+
+        <dl className="space-y-2.5 border-t border-gray-100 px-6 py-5 text-sm text-gray-600">
+          <div
+            className="flex items-center justify-between"
+            {...partAttrs('summary-row')}
+          >
+            <dt {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.subtotal')}
+            </dt>
+            {/*
+              The amount declares its own weight and colour, so a rule on the
+              row can never reach it by inheritance — it gets its own part
+              instead of leaving the row's Text Color a dead control.
+            */}
+            <dd
+              className="font-medium tabular-nums text-black-800"
+              {...partAttrs('summary-row-value')}
+            >
+              <Price value={preOrder.basket.total_amount} />
+            </dd>
+          </div>
+          <div
+            className="flex items-center justify-between"
+            {...partAttrs('summary-row')}
+          >
+            <dt {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.shipping')}
+            </dt>
+            <dd
+              className="font-medium tabular-nums text-black-800"
+              {...partAttrs('summary-row-value')}
+            >
+              <Price value={preOrder.shipping_amount} />
+            </dd>
+          </div>
+          {parseFloat(preOrder.loyalty_money || '0') > 0 && (
+            <div
+              className="flex items-center justify-between"
+              {...partAttrs('summary-row')}
+            >
+              <dt {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.loyalty_money_total')}
+              </dt>
+              <dd
+                className="font-medium tabular-nums text-black-800"
+                {...partAttrs('summary-row-value')}
+              >
+                <Price value={preOrder.loyalty_money} />
+              </dd>
+            </div>
+          )}
+          {parseFloat(preOrder.basket.total_discount_amount || '0') > 0 && (
+            <div
+              className="flex items-center justify-between"
+              {...partAttrs('summary-row')}
+            >
+              <dt {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.discounts_total')}
+              </dt>
+              <dd
+                className="font-medium tabular-nums text-black-800"
+                {...partAttrs('summary-row-value')}
+              >
+                <Price
+                  value={preOrder.basket.total_discount_amount}
+                  useNegative
+                />
+              </dd>
+            </div>
+          )}
+        </dl>
+
+        {/*
+          The row carries the baseline typography that used to live on the
+          label span, so the row's own controls have something to change; the
+          amount keeps its distinct treatment and answers to its own part.
+        */}
+        <div
+          className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5 text-sm font-medium uppercase tracking-wider text-gray-700"
+          {...partAttrs('summary-total')}
+        >
+          <span {...partAttrs('summary-total-label')}>
+            {t('checkout.summary.total')}
+          </span>
+          <span
+            className="text-2xl font-bold tracking-tight text-black-800 tabular-nums"
+            {...partAttrs('summary-total-value')}
+          >
+            <Price value={preOrder.unpaid_amount} />
+          </span>
+        </div>
+      </section>
+
+      {showReview &&
+        (preOrder.shipping_address ||
+          preOrder.shipping_option ||
+          preOrder.payment_option) && (
+          <section className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]">
+            <header className="px-6 py-5">
+              <span className="text-base font-semibold tracking-tight text-black-800">
+                {t('checkout.one_page.summary.review_title')}
+              </span>
+            </header>
+
+            <ul className="divide-y divide-gray-100 border-t border-gray-100 text-sm text-black-800">
+              {preOrder.shipping_address && (
+                <li className="flex items-start justify-between gap-3 px-6 py-4">
+                  <div className="flex-1">
+                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                      {t('checkout.one_page.summary.deliver_to')}
+                    </div>
+                    <div className="font-medium">
+                      {preOrder.shipping_address.title}
+                    </div>
+                    <div className="text-xs text-gray-600">
+                      {preOrder.shipping_address.line},{' '}
+                      {preOrder.shipping_address.township?.name},{' '}
+                      {preOrder.shipping_address.city?.name}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => onEditSection('address')}
+                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
+                    data-testid="one-page-summary-edit-address"
+                    {...partAttrs('summary-edit')}
+                  >
+                    {t('checkout.one_page.edit')}
+                  </button>
+                </li>
+              )}
+
+              {preOrder.shipping_option && (
+                <li className="flex items-start justify-between gap-3 px-6 py-4">
+                  <div className="flex-1">
+                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                      {t('checkout.one_page.summary.shipping_method')}
+                    </div>
+                    <div className="font-medium">
+                      {preOrder.shipping_option.name}
+                    </div>
+                    {preOrder.shipping_option.shipping_amount && (
+                      <div className="text-xs tabular-nums text-gray-600">
+                        <Price
+                          value={preOrder.shipping_option.shipping_amount}
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => onEditSection('shipping')}
+                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
+                    data-testid="one-page-summary-edit-shipping"
+                    {...partAttrs('summary-edit')}
+                  >
+                    {t('checkout.one_page.edit')}
+                  </button>
+                </li>
+              )}
+
+              {preOrder.payment_option && (
+                <li className="flex items-start justify-between gap-3 px-6 py-4">
+                  <div className="flex-1">
+                    <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                      {t('checkout.one_page.summary.payment_method')}
+                    </div>
+                    <div className="font-medium">
+                      {preOrder.payment_option.name}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => onEditSection('payment')}
+                    className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
+                    data-testid="one-page-summary-edit-payment"
+                    {...partAttrs('summary-edit')}
+                  >
+                    {t('checkout.one_page.edit')}
+                  </button>
+                </li>
+              )}
+            </ul>
+          </section>
+        )}
+    </div>
+  );
+};
+
+export default OnePageSummary;

package/app-template/src/views/checkout/variants/one-page/payment-options-grid.tsx

@@ -0,0 +1,220 @@
+import { useCallback, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
+import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
+import { useLocalization } from '@akinon/next/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
+import { Icon } from '@theme/components';
+import type { RootState } from '@theme/redux/store';
+import type { CheckoutPaymentOption } from '@akinon/next/types';
+
+const PAYMENT_TYPE_ICON: Record<string, string> = {
+  credit_card: 'cvc',
+  funds_transfer: 'file',
+  pay_on_delivery: 'address',
+  bkm_express: 'akinon',
+  masterpass: 'cvc',
+  masterpass_rest: 'cvc',
+  saved_card: 'cvc',
+  gpay: 'google',
+  google_pay: 'google',
+  apple_pay: 'apple',
+  wallet: 'akinon',
+  redirection: 'globe',
+  credit_payment: 'installment',
+  loyalty: 'heart-full',
+  hepsipay: 'akinon',
+  tabby: 'installment',
+  tamara: 'installment',
+  iyzico: 'cvc',
+  cybersource_uc: 'cvc',
+  flow_payment: 'installment'
+};
+
+const SLUG_KEYWORD_ICON: Array<[string, string]> = [
+  ['apple', 'apple'],
+  ['google', 'google'],
+  ['gpay', 'google'],
+  ['hepsi', 'akinon'],
+  ['tabby', 'installment'],
+  ['tamara', 'installment'],
+  ['flow', 'installment'],
+  ['saved', 'cvc'],
+  ['credit', 'cvc'],
+  ['transfer', 'file'],
+  ['delivery', 'address'],
+  ['wallet', 'akinon']
+];
+
+const getOptionIcon = (option: CheckoutPaymentOption): string => {
+  if (PAYMENT_TYPE_ICON[option.payment_type]) {
+    return PAYMENT_TYPE_ICON[option.payment_type];
+  }
+  const slug = option.slug?.toLowerCase() || '';
+  for (const [keyword, icon] of SLUG_KEYWORD_ICON) {
+    if (slug.includes(keyword)) return icon;
+  }
+  return 'default';
+};
+
+const PaymentOptionsGrid = () => {
+  const { t } = useLocalization();
+  const { preOrder, attributeBasedShippingOptions } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const [setPaymentOption, { isLoading }] = useSetPaymentOptionMutation();
+  const { filteredPaymentOptions } = usePaymentOptions();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const visibleOptions = useMemo(() => {
+    if (
+      attributeBasedShippingOptions &&
+      Object.keys(attributeBasedShippingOptions).length > 0
+    ) {
+      return filteredPaymentOptions.filter(
+        (option) => option.slug?.toLowerCase() !== 'pay-on-delivery'
+      );
+    }
+    return filteredPaymentOptions;
+  }, [filteredPaymentOptions, attributeBasedShippingOptions]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (
+        ![
+          'ArrowRight',
+          'ArrowLeft',
+          'ArrowDown',
+          'ArrowUp',
+          'Home',
+          'End'
+        ].includes(event.key)
+      ) {
+        return;
+      }
+      event.preventDefault();
+      const buttons = Array.from(
+        containerRef.current?.querySelectorAll<HTMLButtonElement>(
+          'button[role="radio"]'
+        ) ?? []
+      );
+      if (buttons.length === 0) return;
+      const currentIndex = buttons.findIndex(
+        (btn) => btn === document.activeElement
+      );
+      let nextIndex = currentIndex;
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          nextIndex = (currentIndex + 1 + buttons.length) % buttons.length;
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = buttons.length - 1;
+          break;
+      }
+      buttons[nextIndex]?.focus();
+    },
+    []
+  );
+
+  if (visibleOptions.length === 0) {
+    return (
+      <p className="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-5 py-4 text-sm italic text-gray-600">
+        {t('checkout.one_page.payment.no_options')}
+      </p>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        'grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3',
+        { 'pointer-events-none opacity-60': isLoading }
+      )}
+      role="radiogroup"
+      aria-label={t('checkout.one_page.payment.title')}
+      onKeyDown={handleKeyDown}
+      {...partAttrs('payment-options')}
+    >
+      {visibleOptions.map((option, index) => {
+        const selected = preOrder?.payment_option?.pk === option.pk;
+        return (
+          <button
+            key={option.pk}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            tabIndex={
+              selected || (!preOrder?.payment_option && index === 0) ? 0 : -1
+            }
+            onClick={() => setPaymentOption(option.pk)}
+            className={clsx(
+              'group relative flex min-h-[5rem] items-center gap-3',
+              'rounded-xl border px-4 py-3 text-left',
+              // Typography and colour sit on the button — the element the
+              // payment-option part is stamped on — instead of on the label
+              // span. A part rule can only reach the label by inheritance, and
+              // a utility class declared on the span outranks an inherited
+              // value however !important the rule is, so every Text Color /
+              // Font Size / Font Weight control in the panel was a silent
+              // no-op while these lived one level down.
+              'text-sm font-medium leading-tight',
+              'transition-all duration-200 ease-out',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-black-800 focus-visible:ring-offset-2',
+              selected
+                ? 'border-black-800 bg-black-800/[0.03] text-black-800 shadow-[inset_0_0_0_1px_rgb(31,31,31)]'
+                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-400'
+            )}
+            data-testid={`one-page-payment-card-${option.pk}`}
+            data-payment-type={option.payment_type}
+            {...partAttrs('payment-option', { selected })}
+          >
+            {/*
+              `Icon` renders an icon FONT (<i class="pz-icon-…">), so the
+              `fill-*` utilities that used to sit here never coloured
+              anything — fill only applies to SVG. The glyph takes its colour
+              from `color`, which now comes from the button, so the icon
+              follows both the selected state and the panel's Text Color.
+            */}
+            <Icon
+              name={getOptionIcon(option)}
+              size={20}
+              className="flex-shrink-0 transition-colors"
+              aria-hidden="true"
+              {...partAttrs('payment-option-icon')}
+            />
+            <span className="flex-1">{option.name}</span>
+            {/*
+              A ring of `currentColor` with a transparent centre: the marker
+              follows whatever colour the composition sets on the button and
+              the middle shows the card's own background, so it stays legible
+              on any palette. The geometry is what the filled circle plus its
+              6px inner dot drew before.
+            */}
+            <span
+              className={clsx(
+                'flex h-4 w-4 flex-shrink-0 rounded-full transition-all',
+                selected
+                  ? 'border-[5px] border-current'
+                  : 'border-2 border-gray-300 group-hover:border-gray-400'
+              )}
+              aria-hidden="true"
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PaymentOptionsGrid;