@akinon/projectzero 2.0.0-beta.9 → 2.0.0

package/app-template/src/views/checkout/steps/payment/options/store-credit.tsx

@@ -0,0 +1,464 @@
+import clsx from 'clsx';
+import {
+  useGetCheckoutLoyaltyBalanceQuery,
+  usePayWithLoyaltyBalanceMutation
+} from '@akinon/next/data/client/checkout';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { Icon, Price } from '@theme/components';
+import { Trans } from '@akinon/next/components';
+import { LoaderSpinner } from '@theme/components';
+import { AccountUsage, LoyaltyBalanceItem } from '@akinon/next/types';
+
+export const StoreCredits = () => {
+  const { t } = useLocalization();
+
+  const [payWithLoyaltyBalance, { isLoading: isPayLoading }] =
+    usePayWithLoyaltyBalanceMutation();
+
+  const { loyaltyBalance, loyaltyBalances, preOrder } = useAppSelector(
+    (state) => state.checkout
+  );
+
+  const { data: checkoutLoyaltyData, isLoading: isLoyaltyBalanceLoading } =
+    useGetCheckoutLoyaltyBalanceQuery(undefined, {
+      refetchOnMountOrArgChange: true,
+      skip: !preOrder?.payment_option
+    });
+
+  // New approach: read accounts from LoyaltyMoneyUsagePage context
+  const loyaltyAccounts: LoyaltyBalanceItem[] = useMemo(() => {
+    const loyaltyContext = checkoutLoyaltyData?.context_list?.find(
+      (ctx) => ctx.page_name === 'LoyaltyMoneyUsagePage'
+    );
+    return (
+      (loyaltyContext?.page_context?.accounts as LoyaltyBalanceItem[]) ?? []
+    );
+  }, [checkoutLoyaltyData]);
+
+  const selectableAccounts = useMemo(() => {
+    return loyaltyAccounts.filter((account) => parseFloat(account.balance) > 0);
+  }, [loyaltyAccounts]);
+
+  // Determine which mode to use:
+  // - "accounts" mode: backend returns page_context.accounts (new)
+  // - "legacy" mode: Redux loyaltyBalance/loyaltyBalances from page_context.balance/balances (old)
+  const hasAccounts = selectableAccounts.length > 0;
+  const hasLegacyGrouped = !hasAccounts && loyaltyBalances?.length > 0;
+  const hasLegacySingle =
+    !hasAccounts && !hasLegacyGrouped && parseFloat(loyaltyBalance || '0') > 0;
+
+  const isLoyaltyBalanceUsed = useMemo(() => {
+    return parseFloat(preOrder?.loyalty_money ?? '0') > 0;
+  }, [preOrder?.loyalty_money]);
+
+  // --- Accounts mode state ---
+  const [selectedAccountIds, setSelectedAccountIds] = useState<Set<string>>(
+    new Set()
+  );
+
+  useEffect(() => {
+    if (!hasAccounts) return;
+    const usages = preOrder?.loyalty_account_usages;
+    if (usages && Array.isArray(usages)) {
+      setSelectedAccountIds(
+        new Set(
+          usages
+            .filter((u) => parseFloat(String(u.amount)) > 0)
+            .map((u) => String(u.label_id))
+        )
+      );
+    } else if (
+      parseFloat(preOrder?.loyalty_money ?? '0') > 0 &&
+      selectableAccounts.length > 0
+    ) {
+      setSelectedAccountIds(
+        new Set(selectableAccounts.map((a) => String(a.label_id)))
+      );
+    } else {
+      setSelectedAccountIds(new Set());
+    }
+  }, [
+    hasAccounts,
+    preOrder?.loyalty_account_usages,
+    preOrder?.loyalty_money,
+    selectableAccounts
+  ]);
+
+  // --- Legacy grouped mode state ---
+  const [selectedLabels, setSelectedLabels] = useState<Record<string, boolean>>(
+    {}
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const totalGroupedBalance = useMemo(() => {
+    if (!loyaltyBalances) return 0;
+    return loyaltyBalances.reduce(
+      (sum, item) => sum + parseFloat(item.balance || '0'),
+      0
+    );
+  }, [loyaltyBalances]);
+
+  // --- Handlers ---
+  const handleToggleAccount = async (account: LoyaltyBalanceItem) => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      const key = String(account.label_id);
+      const newSelected = new Set(selectedAccountIds);
+
+      if (newSelected.has(key)) {
+        newSelected.delete(key);
+      } else {
+        newSelected.add(key);
+      }
+
+      setSelectedAccountIds(newSelected);
+
+      const accountUsages: AccountUsage[] = selectableAccounts
+        .filter((acc) => newSelected.has(String(acc.label_id)))
+        .map((acc) => ({
+          label_id: acc.label_id,
+          amount: parseFloat(acc.balance)
+        }));
+
+      await payWithLoyaltyBalance({ account_usages: accountUsages });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleLegacyAll = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      if (isLoyaltyBalanceUsed) {
+        if (hasLegacyGrouped) {
+          const accountUsages: AccountUsage[] = loyaltyBalances.map((item) => ({
+            label_id: item.label_id,
+            amount: 0
+          }));
+          await payWithLoyaltyBalance({ account_usages: accountUsages });
+          setSelectedLabels({});
+        } else {
+          await payWithLoyaltyBalance('0');
+        }
+      } else {
+        if (hasLegacyGrouped) {
+          const accountUsages: AccountUsage[] = loyaltyBalances.map((item) => ({
+            label_id: item.label_id,
+            amount: parseFloat(item.balance)
+          }));
+          await payWithLoyaltyBalance({ account_usages: accountUsages });
+          const allSelected = loyaltyBalances.reduce(
+            (acc, item) => ({ ...acc, [String(item.label_id)]: true }),
+            {} as Record<string, boolean>
+          );
+          setSelectedLabels(allSelected);
+        } else {
+          await payWithLoyaltyBalance(loyaltyBalance);
+        }
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleLegacyLabel = async (item: LoyaltyBalanceItem) => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      const key = String(item.label_id);
+      const isCurrentlySelected = selectedLabels[key] ?? false;
+      const newSelectedLabels = {
+        ...selectedLabels,
+        [key]: !isCurrentlySelected
+      };
+
+      const accountUsages: AccountUsage[] = loyaltyBalances.map((b) => ({
+        label_id: b.label_id,
+        amount: newSelectedLabels[String(b.label_id)]
+          ? parseFloat(b.balance)
+          : 0
+      }));
+
+      await payWithLoyaltyBalance({ account_usages: accountUsages });
+      setSelectedLabels(newSelectedLabels);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- Early returns ---
+  if (preOrder?.is_guest) {
+    return null;
+  }
+
+  if (isLoyaltyBalanceLoading) {
+    return (
+      <div className="mb-3 px-4 py-3 xs:px-0">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!hasAccounts && !hasLegacyGrouped && !hasLegacySingle) {
+    return null;
+  }
+
+  // --- Accounts mode render (new: from page_context.accounts) ---
+  if (hasAccounts) {
+    return (
+      <div
+        className={twMerge(
+          'flex flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+          isPayLoading && 'pointer-events-none opacity-30'
+        )}
+      >
+        {selectableAccounts.map((account) => {
+          const isSelected = selectedAccountIds.has(String(account.label_id));
+
+          return (
+            <div
+              key={String(account.label_id) ?? 'default'}
+              className="mb-3 flex w-full items-center"
+            >
+              <button onClick={() => handleToggleAccount(account)}>
+                <span
+                  className={clsx(
+                    'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+                    isSelected ? 'bg-primary' : 'bg-white'
+                  )}
+                >
+                  <Icon
+                    name={isSelected ? 'check' : ''}
+                    size={10}
+                    className={clsx({ 'text-white': isSelected })}
+                  />
+                </span>
+              </button>
+
+              <div className="w-full pl-4 rtl:pr-4">
+                <p
+                  className="cursor-pointer text-sm"
+                  onClick={() => handleToggleAccount(account)}
+                >
+                  {account.label ??
+                    t('checkout.payment.store_credit.use_my_store_credits')}
+                </p>
+                <p className="flex text-sm text-[#606060]">
+                  {t('checkout.payment.store_credit.available_balance')}:
+                  <Price
+                    value={account.balance}
+                    currencyCode={
+                      account.currency?.toUpperCase() ||
+                      preOrder?.currency_type_label
+                    }
+                    className="pe-1 font-bold"
+                  />
+                </p>
+              </div>
+            </div>
+          );
+        })}
+
+        {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+          <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+            <Trans
+              i18nKey="checkout.payment.store_credit.insufficient_balance"
+              components={{
+                Amount: (
+                  <div className="inline-flex">
+                    <Price
+                      value={preOrder?.unpaid_amount}
+                      currencyCode={preOrder?.currency_type_label}
+                      className="text-primary"
+                    />
+                  </div>
+                )
+              }}
+            />
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // --- Legacy grouped mode render (from Redux loyaltyBalances) ---
+  if (hasLegacyGrouped) {
+    return (
+      <div
+        className={twMerge(
+          'flex flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+          isPayLoading && 'pointer-events-none opacity-30'
+        )}
+      >
+        <div className="flex w-full items-center mb-3">
+          <button onClick={handleToggleLegacyAll}>
+            <span
+              className={clsx(
+                'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+                isLoyaltyBalanceUsed ? 'bg-primary' : 'bg-white'
+              )}
+            >
+              <Icon
+                name={isLoyaltyBalanceUsed ? 'check' : ''}
+                size={10}
+                className={clsx({ 'text-white': isLoyaltyBalanceUsed })}
+              />
+            </span>
+          </button>
+
+          <div className="w-full pl-4">
+            <p
+              className="cursor-pointer text-sm"
+              onClick={handleToggleLegacyAll}
+            >
+              {t('checkout.payment.store_credit.use_my_store_credits')}
+            </p>
+            <p className="flex text-sm text-[#606060]">
+              {t('checkout.payment.store_credit.total_balance')}:
+              <Price
+                value={String(totalGroupedBalance)}
+                currencyCode={preOrder?.currency_type_label}
+                className="pe-1 font-bold"
+              />
+            </p>
+          </div>
+        </div>
+
+        <div className="ml-9 flex flex-col gap-2">
+          {loyaltyBalances.map((item) => {
+            const isSelected = selectedLabels[String(item.label_id)] ?? false;
+            return (
+              <div
+                key={String(item.label_id)}
+                className="flex items-center border border-solid border-gray-200 rounded p-2"
+              >
+                <button onClick={() => handleToggleLegacyLabel(item)}>
+                  <span
+                    className={clsx(
+                      'flex h-4 w-4 items-center justify-center rounded border border-solid border-primary',
+                      isSelected ? 'bg-primary' : 'bg-white'
+                    )}
+                  >
+                    <Icon
+                      name={isSelected ? 'check' : ''}
+                      size={8}
+                      className={clsx({ 'text-white': isSelected })}
+                    />
+                  </span>
+                </button>
+                <div className="flex w-full items-center justify-between pl-3">
+                  <span
+                    className="cursor-pointer text-sm"
+                    onClick={() => handleToggleLegacyLabel(item)}
+                  >
+                    {item.label ??
+                      t('checkout.payment.store_credit.use_my_store_credits')}
+                  </span>
+                  <Price
+                    value={item.balance}
+                    currencyCode={
+                      item.currency?.toUpperCase() ||
+                      preOrder?.currency_type_label
+                    }
+                    className="text-sm font-bold"
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+          <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+            <Trans
+              i18nKey="checkout.payment.store_credit.insufficient_balance"
+              components={{
+                Amount: (
+                  <div className="inline-flex">
+                    <Price
+                      value={preOrder?.unpaid_amount}
+                      currencyCode={preOrder?.currency_type_label}
+                      className="text-primary"
+                    />
+                  </div>
+                )
+              }}
+            />
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // --- Legacy single balance mode render (from Redux loyaltyBalance) ---
+  return (
+    <div
+      className={twMerge(
+        'flex flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+        isPayLoading && 'pointer-events-none opacity-30'
+      )}
+    >
+      <div className="flex w-full items-center">
+        <button onClick={handleToggleLegacyAll}>
+          <span
+            className={clsx(
+              'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+              isLoyaltyBalanceUsed ? 'bg-primary' : 'bg-white'
+            )}
+          >
+            <Icon
+              name={isLoyaltyBalanceUsed ? 'check' : ''}
+              size={10}
+              className={clsx({ 'text-white': isLoyaltyBalanceUsed })}
+            />
+          </span>
+        </button>
+
+        <div className="w-full pl-4">
+          <p
+            className="cursor-pointer text-sm"
+            onClick={handleToggleLegacyAll}
+          >
+            {t('checkout.payment.store_credit.use_my_store_credits')}
+          </p>
+          <p className="flex text-sm text-[#606060]">
+            {t('checkout.payment.store_credit.available_balance')}:
+            <Price
+              value={loyaltyBalance}
+              currencyCode={preOrder?.currency_type_label}
+              className="pe-1 font-bold"
+            />
+          </p>
+        </div>
+      </div>
+
+      {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+        <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+          <Trans
+            i18nKey="checkout.payment.store_credit.insufficient_balance"
+            components={{
+              Amount: (
+                <div className="inline-flex">
+                  <Price
+                    value={preOrder?.unpaid_amount}
+                    currencyCode={preOrder?.currency_type_label}
+                    className="text-primary"
+                  />
+                </div>
+              )
+            }}
+          />
+        </p>
+      )}
+    </div>
+  );
+};

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -44,7 +44,7 @@ const PaymentOptionButtons = () => {
         {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
-            className="border border-gray-200 px-4 py-3 mt-3 flex h-12"
+            className="border px-4 py-3 mt-3 flex h-12"
             onClick={scrollToTop}
           >
             <Radio
@@ -69,10 +69,10 @@ const PaymentOptionButtons = () => {
             onClick={() => onClickHandler(option)}
             className={clsx(
               'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800/60 font-medium',
-              'bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              'border-gray-400 text-xs uppercase text-black-800 font-medium',
+              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
               {
-                'text-black-800/100 border-b-transparent':
+                'text-opacity-100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
               }
             )}

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -85,7 +85,7 @@ const AddressBox = ({
   };
 
   const onSubmit = (data) => {
-    editAddress({ ...data, invalidateTag: 'Addresses' })
+    editAddress({ ...data, invalidateTag: 'Checkout' })
       .unwrap()
       .then((editAddressResponse) => {
         handleAddressClick(addressType, editAddressResponse);
@@ -96,7 +96,7 @@ const AddressBox = ({
   };
 
   const handleRemoveAddress = async (addressPk: number) => {
-    await removeAddress({ id: addressPk, invalidateTag: 'Addresses' });
+    await removeAddress({ id: addressPk, invalidateTag: 'Checkout' });
     setRemoveAddressModalOpen(false);
     dispatch(resetCheckoutState());
 
@@ -130,7 +130,7 @@ const AddressBox = ({
       onClick={() => handleAddressClick(addressType, address)}
       key={address.pk}
       className={clsx(
-        'cursor-pointer relative w-full border border-gray-200 shadow-sm p-4 min-h-[8rem]',
+        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
         "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
         'after:border-secondary-400 after:absolute after:inset-0 after:duration-150 after:-z-10',
         {
@@ -167,8 +167,11 @@ const AddressBox = ({
       <div className="text-xs flex justify-between">
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
-          onClick={() => setIsEditAddressModalOpen(true)}
+          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsEditAddressModalOpen(true);
+          }}
           data-testid="checkout-address-edit"
         >
           {t('checkout.address.box.edit')}
@@ -180,21 +183,26 @@ const AddressBox = ({
           setOpen={setIsEditAddressModalOpen}
           className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
         >
-          <AddressForm
-            data={{
-              ...address,
-              country: address.country?.pk,
-              city: address.city?.pk,
-              township: address.township?.pk,
-              district: address.district?.pk
-            }}
-            onSubmit={onSubmit}
-          />
+          <div onClick={(e) => e.stopPropagation()}>
+            <AddressForm
+              data={{
+                ...address,
+                country: address.country?.pk,
+                city: address.city?.pk,
+                township: address.township?.pk,
+                district: address.district?.pk
+              }}
+              onSubmit={onSubmit}
+            />
+          </div>
         </Modal>
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
-          onClick={() => setRemoveAddressModalOpen(true)}
+          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          onClick={(e) => {
+            e.stopPropagation();
+            setRemoveAddressModalOpen(true);
+          }}
           data-testid="checkout-address-remove"
         >
           {t('checkout.address.box.remove')}
@@ -207,14 +215,18 @@ const AddressBox = ({
         setOpen={setRemoveAddressModalOpen}
         showCloseButton={false}
       >
-        <div className="text-center px-6 py-10">
+        <div
+          className="text-center px-6 py-10"
+          onClick={(e) => e.stopPropagation()}
+        >
           <p className="mb-4">
             {t('account.address_book.modal.delete_description')}
           </p>
           <div className="space-x-3 flex justify-center">
             <Button
               appearance="outlined"
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 setRemoveAddressModalOpen(false);
               }}
               data-testid="remove-address-modal-cancel"
@@ -224,7 +236,8 @@ const AddressBox = ({
             <Button
               appearance="filled"
               disabled={removeAddressLoading}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 handleRemoveAddress(address.pk);
               }}
               className={

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -77,7 +77,7 @@ const Addresses = () => {
   }, [billing_and_shipping_same]);
 
   const onSubmit = (data) => {
-    addAddress({ ...data, invalidateTag: 'Addresses' })
+    addAddress({ ...data, invalidateTag: 'Checkout' })
       .unwrap()
       .then((addAddressResponse) => {
         if (addressList.length === 0) {
@@ -153,7 +153,7 @@ const Addresses = () => {
                   role="button"
                   onClick={() => setIsModalOpen(true)}
                   className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border border-gray-200 shadow-sm p-4',
+                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
                     "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
                     'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
                     {

package/app-template/src/views/checkout/summary.tsx

@@ -8,6 +8,7 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { twMerge } from 'tailwind-merge';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
+import { StoreCredits } from './steps/payment/options/store-credit';
 
 export const Summary = () => {
   const { t } = useLocalization();
@@ -38,6 +39,7 @@ export const Summary = () => {
             'flex flex-col w-full mb-4 border border-solid border-gray-400'
         }}
       />
+      <StoreCredits />
       <div className="flex flex-col w-full border border-solid border-gray-400">
         <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
           <span className="text-black-800 text-xl font-light sm:text-2xl">
@@ -118,6 +120,14 @@ export const Summary = () => {
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
+          {parseFloat(preOrder?.loyalty_money) > 0 && (
+            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+              <span>{t('checkout.summary.loyalty_money_total')}</span>
+              <span>
+                <Price value={preOrder?.loyalty_money} />
+              </span>
+            </div>
+          )}
           <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
             <span>{t('checkout.summary.discounts_total')}</span>
             <span>
@@ -149,7 +159,7 @@ export const Summary = () => {
             </div>
           </div>
           <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
-            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"
                 components={{
@@ -162,7 +172,7 @@ export const Summary = () => {
                 }}
               />
             </div>
-            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               {preOrder.shipping_address?.line}{' '}
               {preOrder.shipping_address?.postcode}{' '}
               {preOrder.shipping_address?.district && (

package/app-template/src/views/find-in-store/index.tsx

@@ -123,14 +123,14 @@ export const FindInStore = ({ productPk, productName, variants }) => {
               className="w-full"
               options={retailStoreOptions}
               {...register('city_id')}
-              error={errors.city_id}
+              error={errors.city_id as any}
             />
             {sizeOptions.length > 1 && (
               <Select
                 className="w-full"
                 options={sizeOptions}
                 {...register('size')}
-                error={errors.size}
+                error={errors.size as any}
               />
             )}
           </div>