@akinon/projectzero 2.0.0-beta.16 → 2.0.0-beta.17

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @akinon/projectzero
 
+## 2.0.0-beta.17
+
+### Minor Changes
+
+- 2a8ddcf6: ZERO-4111: Add total balance field to store credit localization and update related components
+- c67942a4: ZERO-3423: Updated version control and debug messages for the package
+
 ## 2.0.0-beta.16
 
 ## 2.0.0-beta.15

package/app-template/.env.example

@@ -13,3 +13,5 @@ NEXT_PUBLIC_VIRTUAL_TRY_ON_API_URL=https://d2a26507c7094f359aba349b96a96881.lb.a
 # CACHE_SECRET=KhvhE1go3GDmYJ7PhZLmskqfhYNlPSm6
 # CACHE_HOST=default:redispw@localhost
 # CACHE_PORT=6379
+
+# BF_CACHE=false

package/app-template/CHANGELOG.md

@@ -1,5 +1,56 @@
 # projectzeronext
 
+## 2.0.0-beta.17
+
+### Minor Changes
+
+- 2a8ddcf6: ZERO-4111: Add total balance field to store credit localization and update related components
+- 36143125: ZERO-3987: Add barcode scanner functionality with modal and button
+- f7e0f646: ZERO-4032: Add bfcache-headers middleware, integrate it into the default chain, and introduce a new environment variable for control.
+- 5fb34b5c: ZERO-3955: Add aspect ratio validation and error handling for image cropping
+- d76d3255: ZERO-4011: Refactor sitemap content generation to append locale suffix based on matched locale
+
+### Patch Changes
+
+- Updated dependencies [4798959a]
+- Updated dependencies [8218dafa]
+- Updated dependencies [2a8ddcf6]
+- Updated dependencies [8a7fd0f4]
+- Updated dependencies [36143125]
+- Updated dependencies [572f4f7b]
+- Updated dependencies [f7e0f646]
+- Updated dependencies [94a86fcc]
+- Updated dependencies [bcaad120]
+- Updated dependencies [5fb34b5c]
+- Updated dependencies [88cb4f62]
+- Updated dependencies [6b73b050]
+  - @akinon/pz-masterpass-rest@2.0.0-beta.17
+  - @akinon/next@2.0.0-beta.17
+  - @akinon/pz-virtual-try-on@2.0.0-beta.17
+  - @akinon/pz-masterpass@2.0.0-beta.17
+  - @akinon/pz-akifast@2.0.0-beta.17
+  - @akinon/pz-apple-pay@2.0.0-beta.17
+  - @akinon/pz-b2b@2.0.0-beta.17
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.17
+  - @akinon/pz-bkm@2.0.0-beta.17
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.17
+  - @akinon/pz-click-collect@2.0.0-beta.17
+  - @akinon/pz-credit-payment@2.0.0-beta.17
+  - @akinon/pz-cybersource-uc@2.0.0-beta.17
+  - @akinon/pz-flow-payment@2.0.0-beta.17
+  - @akinon/pz-google-pay@2.0.0-beta.17
+  - @akinon/pz-gpay@2.0.0-beta.17
+  - @akinon/pz-haso@2.0.0-beta.17
+  - @akinon/pz-hepsipay@2.0.0-beta.17
+  - @akinon/pz-multi-basket@2.0.0-beta.17
+  - @akinon/pz-one-click-checkout@2.0.0-beta.17
+  - @akinon/pz-otp@2.0.0-beta.17
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.17
+  - @akinon/pz-saved-card@2.0.0-beta.17
+  - @akinon/pz-similar-products@2.0.0-beta.17
+  - @akinon/pz-tabby-extension@2.0.0-beta.17
+  - @akinon/pz-tamara-extension@2.0.0-beta.17
+
 ## 2.0.0-beta.16
 
 ### Minor Changes

package/app-template/docs/advanced-usage.md

@@ -142,3 +142,13 @@ This codemod will:
 - Clean up middleware rewrite blocks
 - Update path references in `tsconfig.json`, `next.config.js`, and source files
 - Replace `params.locale` / `params.currency` / `params.url` usages with `parsePzParams`
+
+## Enabling Browser Back/Forward Cache (bfcache)
+
+By default, dynamic pages may include `Cache-Control: no-store` headers, which prevents browsers from using the back/forward cache (bfcache). To enable bfcache support, set the `BF_CACHE` environment variable to `true`:
+
+```bash
+BF_CACHE=true
+```
+
+When enabled, a middleware wrapper overrides the `Cache-Control` header to `private, no-cache, max-age=0, must-revalidate`, allowing the browser to cache pages for instant back/forward navigation while still revalidating content on revisit.

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,32 +24,32 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.16",
-    "@akinon/pz-akifast": "2.0.0-beta.16",
-    "@akinon/pz-apple-pay": "2.0.0-beta.16",
-    "@akinon/pz-b2b": "2.0.0-beta.16",
-    "@akinon/pz-basket-gift-pack": "2.0.0-beta.16",
-    "@akinon/pz-bkm": "2.0.0-beta.16",
-    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.16",
-    "@akinon/pz-click-collect": "2.0.0-beta.16",
-    "@akinon/pz-credit-payment": "2.0.0-beta.16",
-    "@akinon/pz-cybersource-uc": "2.0.0-beta.16",
-    "@akinon/pz-flow-payment": "2.0.0-beta.16",
-    "@akinon/pz-google-pay": "2.0.0-beta.16",
-    "@akinon/pz-gpay": "2.0.0-beta.16",
-    "@akinon/pz-haso": "2.0.0-beta.16",
-    "@akinon/pz-hepsipay": "2.0.0-beta.16",
-    "@akinon/pz-masterpass": "2.0.0-beta.16",
-    "@akinon/pz-masterpass-rest": "2.0.0-beta.16",
-    "@akinon/pz-multi-basket": "2.0.0-beta.16",
-    "@akinon/pz-one-click-checkout": "2.0.0-beta.16",
-    "@akinon/pz-otp": "2.0.0-beta.16",
-    "@akinon/pz-pay-on-delivery": "2.0.0-beta.16",
-    "@akinon/pz-saved-card": "2.0.0-beta.16",
-    "@akinon/pz-similar-products": "2.0.0-beta.16",
-    "@akinon/pz-tabby-extension": "2.0.0-beta.16",
-    "@akinon/pz-tamara-extension": "2.0.0-beta.16",
-    "@akinon/pz-virtual-try-on": "2.0.0-beta.16",
+    "@akinon/next": "2.0.0-beta.17",
+    "@akinon/pz-akifast": "2.0.0-beta.17",
+    "@akinon/pz-apple-pay": "2.0.0-beta.17",
+    "@akinon/pz-b2b": "2.0.0-beta.17",
+    "@akinon/pz-basket-gift-pack": "2.0.0-beta.17",
+    "@akinon/pz-bkm": "2.0.0-beta.17",
+    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.17",
+    "@akinon/pz-click-collect": "2.0.0-beta.17",
+    "@akinon/pz-credit-payment": "2.0.0-beta.17",
+    "@akinon/pz-cybersource-uc": "2.0.0-beta.17",
+    "@akinon/pz-flow-payment": "2.0.0-beta.17",
+    "@akinon/pz-google-pay": "2.0.0-beta.17",
+    "@akinon/pz-gpay": "2.0.0-beta.17",
+    "@akinon/pz-haso": "2.0.0-beta.17",
+    "@akinon/pz-hepsipay": "2.0.0-beta.17",
+    "@akinon/pz-masterpass": "2.0.0-beta.17",
+    "@akinon/pz-masterpass-rest": "2.0.0-beta.17",
+    "@akinon/pz-multi-basket": "2.0.0-beta.17",
+    "@akinon/pz-one-click-checkout": "2.0.0-beta.17",
+    "@akinon/pz-otp": "2.0.0-beta.17",
+    "@akinon/pz-pay-on-delivery": "2.0.0-beta.17",
+    "@akinon/pz-saved-card": "2.0.0-beta.17",
+    "@akinon/pz-similar-products": "2.0.0-beta.17",
+    "@akinon/pz-tabby-extension": "2.0.0-beta.17",
+    "@akinon/pz-tamara-extension": "2.0.0-beta.17",
+    "@akinon/pz-virtual-try-on": "2.0.0-beta.17",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.1.6",
     "@react-google-maps/api": "2.17.1",
@@ -72,7 +72,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.16",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.17",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/public/locales/en/checkout.json

@@ -143,6 +143,7 @@
     "store_credit": {
       "use_my_store_credits": "Use my pz-zero credits",
       "available_balance": "Available Balance",
+      "total_balance": "Total Balance",
       "insufficient_balance": "Your pz-zero credits are not sufficient to pay for the order, please select an additional payment method to cover the balance of <Amount/>"
     }
   },

package/app-template/public/locales/en/product.json

@@ -86,6 +86,8 @@
     "multiple_results_subtitle": "Try-on completed for {{count}} products",
     "error_incompatible": "Image Not Compatible",
     "error_auto_reported": "Error automatically reported",
+    "error_aspect_ratio_too_tall": "The image is too tall. Maximum allowed ratio is 9:16 (portrait). Please crop or use a different image.",
+    "error_aspect_ratio_too_wide": "The image is too wide. Maximum allowed ratio is 21:9 (landscape). Please crop or use a different image.",
     "feedback_question": "How was the result?",
     "feedback_success": "Success",
     "feedback_failed": "Failed",
@@ -96,5 +98,21 @@
     "starting": "Starting...",
     "will_start": "will start virtual try-on for",
     "products_count": "products"
+  },
+  "barcode_scanner": {
+    "title": "Scan Barcode",
+    "button_label": "Barcode Scanner",
+    "button_text": "Try on products in store",
+    "help_text": "Point your camera at the product barcode",
+    "scan_more_help": "To scan another product, point your camera at the new barcode.",
+    "searching": "Searching for product...",
+    "continue_to_vto": "Continue to Virtual Cabin",
+    "permission_denied_title": "Camera Permission Required",
+    "permission_denied_message": "You need to allow camera access for the barcode scanner.",
+    "try_again": "Try Again",
+    "errors": {
+      "product_not_found": "No product found for this barcode.",
+      "search_failed": "Search failed. Please try again."
+    }
   }
 }

package/app-template/public/locales/tr/product.json

@@ -88,6 +88,8 @@
     "multiple_results_subtitle": "{{count}} ürün için deneme tamamlandı",
     "error_incompatible": "Görüntü Uyumlu Değil",
     "error_auto_reported": "Hata otomatik olarak bildirildi",
+    "error_aspect_ratio_too_tall": "Görsel çok uzun. Dikey görseller için izin verilen maksimum oran 9:16'dır. Lütfen kırpın veya farklı bir görsel seçin.",
+    "error_aspect_ratio_too_wide": "Görsel çok geniş. Yatay görseller için izin verilen maksimum oran 21:9'dur. Lütfen kırpın veya farklı bir görsel seçin.",
     "feedback_question": "Sonuç nasıldı?",
     "feedback_success": "Başarılı",
     "feedback_failed": "Başarısız",
@@ -98,5 +100,21 @@
     "starting": "Başlatılıyor...",
     "will_start": "için sanal deneme başlatılacak",
     "products_count": "ürün"
+  },
+  "barcode_scanner": {
+    "title": "Barkodu Okut",
+    "button_label": "Barkod Tarayıcı",
+    "button_text": "Mağazadaki ürünü üstünde dene",
+    "help_text": "Ürün barkodunu kameraya yaklaştırın",
+    "scan_more_help": "Bir ürün daha okutmak isterseniz, yeni barkodu da kameranıza yaklaştırın.",
+    "searching": "Ürün aranıyor...",
+    "continue_to_vto": "Sanal Kabine Devam Et",
+    "permission_denied_title": "Kamera İzni Gerekli",
+    "permission_denied_message": "Barkod okuyucu için kamera erişimine izin vermeniz gerekmektedir.",
+    "try_again": "Tekrar Dene",
+    "errors": {
+      "product_not_found": "Bu barkoda ait ürün bulunamadı.",
+      "search_failed": "Arama başarısız oldu. Lütfen tekrar deneyin."
+    }
   }
 }

package/app-template/src/app/[pz]/account/orders/[id]/page.tsx

@@ -63,7 +63,26 @@ const AccountOrderDetail = () => {
   }, [order, isSuccess, localeValue]);
 
   if (isLoading && isFetching) {
-    return <LoaderSpinner />;
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!order) {
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <p className="mt-5 text-start text-lg mb-4">
+          {t('account.my_orders.detail.no_orders_found')}
+        </p>
+        <Link href={`/account/orders/`}>
+          <Button className="px-4" appearance="filled">
+            {t('account.my_orders.detail.back_to_orders')}
+          </Button>
+        </Link>
+      </div>
+    );
   }
 
   return (

package/app-template/src/app/[pz]/xml-sitemap/[node]/route.ts

@@ -58,10 +58,12 @@ export async function GET(request: Request, context: { params: Promise<{ node: s
 
   let sitemapContent = await sitemap.text();
 
-  sitemapContent = sitemapContent.replace(
-    /\.com/g,
-    `.com${matchedLocale?.[0] ?? ''}`
-  );
+  if (matchedLocale?.[0]) {
+    const localeSuffix = matchedLocale[0];
+    const domainRegex = /(?<=<loc>\s*)https?:\/\/[^/<\s]+/g;
+
+    sitemapContent = sitemapContent.replace(domainRegex, `$&${localeSuffix}`);
+  }
 
   return new Response(sitemapContent, {
     headers: {

package/app-template/src/app/api/barcode-search/route.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/api/barcode-search';

package/app-template/src/components/modal.tsx

@@ -41,12 +41,14 @@ export const Modal = (props: ModalProps) => {
           'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
           overlayClassName
         )}
+        onClick={(e) => e.stopPropagation()}
       />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
           className
         )}
+        onClick={(e) => e.stopPropagation()}
       >
         {(showCloseButton || title) && (
           <div

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

@@ -4,46 +4,198 @@ import {
   usePayWithLoyaltyBalanceMutation
 } from '@akinon/next/data/client/checkout';
 import { useAppSelector } from '@akinon/next/redux/hooks';
-import { useMemo, useState } from 'react';
+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: isPayWithLoyaltyBalanceLoading }] =
+  const [payWithLoyaltyBalance, { isLoading: isPayLoading }] =
     usePayWithLoyaltyBalanceMutation();
 
-  const { loyaltyBalance, preOrder } = useAppSelector(
+  const { loyaltyBalance, loyaltyBalances, preOrder } = useAppSelector(
     (state) => state.checkout
   );
 
-  const { isLoading: isLoyaltyBalanceLoading } =
+  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 handleClick = async () => {
+  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 {
-      await payWithLoyaltyBalance(isLoyaltyBalanceUsed ? '0' : loyaltyBalance);
+      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;
   }
@@ -56,19 +208,207 @@ export const StoreCredits = () => {
     );
   }
 
-  if (parseFloat(loyaltyBalance) <= 0) {
+  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(
-        'hidden  flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
-        isPayWithLoyaltyBalanceLoading && 'pointer-events-none opacity-30',
-        parseFloat(loyaltyBalance) > 0 && 'block'
+        '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={handleClick}>
+        <button onClick={handleToggleLegacyAll}>
           <span
             className={clsx(
               'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
@@ -84,7 +424,10 @@ export const StoreCredits = () => {
         </button>
 
         <div className="w-full pl-4">
-          <p className="cursor-pointer text-sm" onClick={handleClick}>
+          <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]">

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());
 
@@ -168,7 +168,10 @@ const AddressBox = ({
         <Button
           appearance="ghost"
           className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
-          onClick={() => setIsEditAddressModalOpen(true)}
+          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)}
+          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) {

package/commands/plugins.ts

@@ -29,7 +29,14 @@ async function checkVersion(pkg: PackageJson) {
 
     if (!semver.satisfies(pkg.dependencies['@akinon/next'], latestVersion)) {
       console.warn(
-        `\x1b[43mWarning: The "${packageName}" package is currently at version ${pkg.dependencies['@akinon/next']}. Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`,
+        `\x1b[43m Warning: The "${packageName}" package is currently at`,
+        `\x1b[41m version ${pkg.dependencies['@akinon/next']}`,
+        `\x1b[43m Please upgrade it to the latest version (${latestVersion}) to ensure plugin compatibility.`,
+        '\x1b[0m\n'
+      );
+    } else {
+      console.log(
+        `\x1b[42m Info: The package "${packageName}" is currently in the current version (${latestVersion}).`,
         '\x1b[0m\n'
       );
     }
@@ -54,7 +61,27 @@ export default async () => {
     }
   }
 
-  const pkg: PackageJson = require(path.resolve(rootDir, './package.json'));
+  function findPackageJson(): PackageJson {
+    const packageJsonPaths = [
+      path.resolve(rootDir, './package.json'),
+      path.resolve(rootDir, './apps/projectzeronext/package.json')
+    ];
+
+    for (const packageJsonPath of packageJsonPaths) {
+      try {
+        const pkg = require(packageJsonPath);
+        if (pkg.dependencies['@akinon/next']) {
+          return pkg;
+        }
+      } catch (error) {
+        continue;
+      }
+    }
+
+    throw new Error('Could not find package.json with @akinon/next dependency');
+  }
+
+  const pkg = findPackageJson();
   await checkVersion(pkg);
 
   const pluginsFilePath = findPluginsFilePath();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {