@akinon/projectzero 2.0.32 → 2.0.33-beta.0

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import ContactSection from './sections/contact-section';
+import AddressSection from './sections/address-section';
+import ShippingSection from './sections/shipping-section';
+import PaymentSection from './sections/payment-section';
+import OnePageSummary from './one-page-summary';
+import MobileSummarySheet from './mobile-summary-sheet';
+import TrustBadges from './trust-badges';
+import { useSectionState, type SectionId } from './hooks/use-section-state';
+import { useCheckoutFunnelGtm } from './hooks/use-checkout-funnel-gtm';
+import type { CheckoutVariantProps } from '../types';
+
+const OnePageCheckout = ({ options }: CheckoutVariantProps) => {
+  const autoAdvance = options?.autoAdvance ?? true;
+  const stickyMobileCta = options?.stickyMobileCta ?? true;
+  const enableEditMode = options?.enableEditMode ?? true;
+  const showOrderReview = options?.showOrderReview ?? true;
+  const showTrustBadges = options?.showTrustBadges ?? true;
+  const gtmEnabled = options?.gtmEnabled ?? true;
+  const compactMode = options?.compactMode ?? false;
+
+  const { sections, activeSection, openSection } = useSectionState({
+    autoAdvance
+  });
+  useCheckoutFunnelGtm(activeSection, { enabled: gtmEnabled });
+
+  const sectionStatus = useCallback(
+    (id: SectionId) =>
+      sections.find((section) => section.id === id)?.status ?? 'locked',
+    [sections]
+  );
+
+  const goTo = useCallback(
+    (id: SectionId) => () => openSection(id),
+    [openSection]
+  );
+
+  return (
+    <PluginModule component={Component.MasterpassProvider}>
+      <PluginModule component={Component.MasterpassDeleteConfirmationModal} />
+      <PluginModule component={Component.MasterpassOtpModal} />
+      <PluginModule component={Component.MasterpassLinkModal} />
+
+      <div
+        className={clsx(
+          'min-h-screen bg-[#fafafa]',
+          compactMode ? 'pb-12 md:pb-8' : 'pb-20 md:pb-16'
+        )}
+        data-compact={compactMode || undefined}
+      >
+        <div
+          className={clsx(
+            'container w-full px-4 md:px-6 lg:px-8',
+            compactMode ? 'pt-4' : 'pt-6 md:pt-10'
+          )}
+        >
+          <div
+            className={clsx(
+              'flex flex-col lg:flex-row lg:items-start',
+              compactMode ? 'gap-4 lg:gap-6' : 'gap-6 lg:gap-8'
+            )}
+          >
+            <div
+              className="w-full lg:w-2/3"
+              data-testid="one-page-sections"
+            >
+              <ContactSection
+                status={sectionStatus('contact')}
+                onEdit={goTo('contact')}
+              />
+              <AddressSection
+                status={sectionStatus('address')}
+                onEdit={goTo('address')}
+                onComplete={goTo('shipping')}
+                editable={enableEditMode}
+              />
+              <ShippingSection
+                status={sectionStatus('shipping')}
+                onEdit={goTo('shipping')}
+                onComplete={goTo('payment')}
+                editable={enableEditMode}
+              />
+              <PaymentSection
+                status={sectionStatus('payment')}
+                onEdit={goTo('payment')}
+              />
+
+              {showTrustBadges && <TrustBadges />}
+            </div>
+
+            <aside
+              className="hidden w-full lg:block lg:w-1/3"
+              data-testid="one-page-summary"
+            >
+              <div className="sticky top-6">
+                <OnePageSummary
+                  onEditSection={openSection}
+                  showReview={showOrderReview}
+                />
+              </div>
+            </aside>
+          </div>
+        </div>
+
+        {stickyMobileCta && (
+          <div
+            className="fixed inset-x-0 bottom-0 z-30 lg:hidden"
+            data-testid="one-page-mobile-cta"
+          >
+            <MobileSummarySheet
+              onEditSection={openSection}
+              showReview={showOrderReview}
+            />
+          </div>
+        )}
+      </div>
+    </PluginModule>
+  );
+};
+
+export default OnePageCheckout;

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

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import { Price, Icon } from '@theme/components';
+import type { RootState } from '@theme/redux/store';
+import OnePageSummary from './one-page-summary';
+import type { SectionId } from './hooks/use-section-state';
+
+interface MobileSummarySheetProps {
+  onEditSection: (section: SectionId) => void;
+  showReview?: boolean;
+}
+
+const MobileSummarySheet = ({
+  onEditSection,
+  showReview = true
+}: MobileSummarySheetProps) => {
+  const { t } = useLocalization();
+  const [isOpen, setIsOpen] = useState(false);
+  const preOrder = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+
+  if (!preOrder) return null;
+  const paymentName = preOrder.payment_option?.name;
+
+  return (
+    <>
+      {isOpen && (
+        <button
+          type="button"
+          aria-label={t('checkout.one_page.summary.hide_summary')}
+          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
+          onClick={() => setIsOpen(false)}
+          data-testid="one-page-mobile-summary-backdrop"
+        />
+      )}
+
+      <div className="relative z-50">
+        <button
+          type="button"
+          onClick={() => setIsOpen((prev) => !prev)}
+          aria-expanded={isOpen}
+          aria-controls="mobile-summary-content"
+          className="flex w-full items-center justify-between gap-3 border-t border-gray-200 bg-white px-5 py-4 shadow-[0_-8px_24px_-12px_rgba(0,0,0,0.12)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
+          data-testid="one-page-mobile-summary-toggle"
+        >
+          <span className="flex flex-col items-start gap-1">
+            <span className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-gray-600">
+              <Icon name="basket" size={12} aria-hidden="true" />
+              {isOpen
+                ? t('checkout.one_page.summary.hide_summary')
+                : t('checkout.one_page.summary.show_summary')}
+              <Icon
+                name="chevron-end"
+                size={10}
+                aria-hidden="true"
+                className={clsx('transition-transform duration-200', {
+                  'rotate-90': isOpen,
+                  '-rotate-90': !isOpen
+                })}
+              />
+            </span>
+            {paymentName && (
+              <span className="text-xs font-medium text-black-800">
+                {paymentName}
+              </span>
+            )}
+          </span>
+          <span className="text-xl font-bold tabular-nums text-black-800">
+            <Price value={preOrder.unpaid_amount} />
+          </span>
+        </button>
+
+        {isOpen && (
+          <div
+            id="mobile-summary-content"
+            role="dialog"
+            aria-modal="true"
+            aria-label={t('checkout.summary.title')}
+            className="max-h-[75vh] overflow-y-auto border-t border-gray-200 bg-[#fafafa] px-4 py-5"
+          >
+            <OnePageSummary
+              onEditSection={onEditSection}
+              showReview={showReview}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default MobileSummarySheet;

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

@@ -0,0 +1,237 @@
+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 { 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]">
+        <header className="flex items-baseline justify-between px-6 py-5">
+          <span className="text-lg font-semibold tracking-tight text-black-800">
+            {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"
+            >
+              <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">
+            <dt>{t('checkout.summary.subtotal')}</dt>
+            <dd className="font-medium tabular-nums text-black-800">
+              <Price value={preOrder.basket.total_amount} />
+            </dd>
+          </div>
+          <div className="flex items-center justify-between">
+            <dt>{t('checkout.summary.shipping')}</dt>
+            <dd className="font-medium tabular-nums text-black-800">
+              <Price value={preOrder.shipping_amount} />
+            </dd>
+          </div>
+          {parseFloat(preOrder.loyalty_money || '0') > 0 && (
+            <div className="flex items-center justify-between">
+              <dt>{t('checkout.summary.loyalty_money_total')}</dt>
+              <dd className="font-medium tabular-nums text-black-800">
+                <Price value={preOrder.loyalty_money} />
+              </dd>
+            </div>
+          )}
+          {parseFloat(preOrder.basket.total_discount_amount || '0') > 0 && (
+            <div className="flex items-center justify-between">
+              <dt>{t('checkout.summary.discounts_total')}</dt>
+              <dd className="font-medium tabular-nums text-black-800">
+                <Price
+                  value={preOrder.basket.total_discount_amount}
+                  useNegative
+                />
+              </dd>
+            </div>
+          )}
+        </dl>
+
+        <div className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5">
+          <span className="text-sm font-medium uppercase tracking-wider text-gray-700">
+            {t('checkout.summary.total')}
+          </span>
+          <span className="text-2xl font-bold tracking-tight text-black-800 tabular-nums">
+            <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"
+                  >
+                    {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"
+                  >
+                    {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"
+                  >
+                    {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,201 @@
+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 { 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}
+    >
+      {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',
+              '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] shadow-[inset_0_0_0_1px_rgb(31,31,31)]'
+                : 'border-gray-200 bg-white hover:border-gray-400'
+            )}
+            data-testid={`one-page-payment-card-${option.pk}`}
+            data-payment-type={option.payment_type}
+          >
+            <Icon
+              name={getOptionIcon(option)}
+              size={20}
+              className={clsx(
+                'flex-shrink-0 transition-colors',
+                selected ? 'fill-black-800' : 'fill-gray-600'
+              )}
+              aria-hidden="true"
+            />
+            <span
+              className={clsx(
+                'flex-1 text-sm font-medium leading-tight',
+                selected ? 'text-black-800' : 'text-gray-700'
+              )}
+            >
+              {option.name}
+            </span>
+            <span
+              className={clsx(
+                'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2 transition-all',
+                selected
+                  ? 'border-black-800 bg-black-800'
+                  : 'border-gray-300 bg-white group-hover:border-gray-400'
+              )}
+              aria-hidden="true"
+            >
+              {selected && (
+                <span className="block h-1.5 w-1.5 rounded-full bg-white" />
+              )}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PaymentOptionsGrid;