@akinon/projectzero 1.65.0 → 1.67.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @akinon/projectzero
 
+## 1.67.0
+
+## 1.66.0
+
 ## 1.65.0
 
 ## 1.64.0

package/app-template/CHANGELOG.md

@@ -1,5 +1,68 @@
 # projectzeronext
 
+## 1.67.0
+
+### Minor Changes
+
+- a1a99f0: ZERO-2887: Add LoaderSpinner to Filters component
+- bc2b411: ZERO-2825: Add attribute-based shipping options to checkout page
+- 3d2212a: ZERO-2745: Add multi basket support
+- 38a634e: ZERO-2893: Refactor category filter handling and URL parameters
+- 9e25a64: ZERO-2835: Update category page layout with breadcrumb
+
+### Patch Changes
+
+- Updated dependencies [bc2b411]
+- Updated dependencies [3d2212a]
+- Updated dependencies [8f47cca]
+- Updated dependencies [9e25a64]
+  - @akinon/next@1.67.0
+  - @akinon/pz-akifast@1.67.0
+  - @akinon/pz-b2b@1.67.0
+  - @akinon/pz-basket-gift-pack@1.67.0
+  - @akinon/pz-bkm@1.67.0
+  - @akinon/pz-checkout-gift-pack@1.67.0
+  - @akinon/pz-click-collect@1.67.0
+  - @akinon/pz-credit-payment@1.67.0
+  - @akinon/pz-gpay@1.67.0
+  - @akinon/pz-masterpass@1.67.0
+  - @akinon/pz-one-click-checkout@1.67.0
+  - @akinon/pz-otp@1.67.0
+  - @akinon/pz-pay-on-delivery@1.67.0
+  - @akinon/pz-saved-card@1.67.0
+  - @akinon/pz-tabby-extension@1.67.0
+
+## 1.66.0
+
+### Minor Changes
+
+- 572d2e8: ZERO-2667: Add iframe support for redirection payment methods
+- 2e6104d: ZERO-2888:Edit the numbering in the pagination and the visibility of the prev and next buttons
+
+### Patch Changes
+
+- Updated dependencies [572d2e8]
+- Updated dependencies [2e6104d]
+- Updated dependencies [7b05522]
+- Updated dependencies [29ead87]
+- Updated dependencies [12a873e]
+- Updated dependencies [f2c325c]
+  - @akinon/next@1.66.0
+  - @akinon/pz-otp@1.66.0
+  - @akinon/pz-akifast@1.66.0
+  - @akinon/pz-b2b@1.66.0
+  - @akinon/pz-basket-gift-pack@1.66.0
+  - @akinon/pz-bkm@1.66.0
+  - @akinon/pz-checkout-gift-pack@1.66.0
+  - @akinon/pz-click-collect@1.66.0
+  - @akinon/pz-credit-payment@1.66.0
+  - @akinon/pz-gpay@1.66.0
+  - @akinon/pz-masterpass@1.66.0
+  - @akinon/pz-one-click-checkout@1.66.0
+  - @akinon/pz-pay-on-delivery@1.66.0
+  - @akinon/pz-saved-card@1.66.0
+  - @akinon/pz-tabby-extension@1.66.0
+
 ## 1.65.0
 
 ### Minor Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,21 +22,21 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.65.0",
-    "@akinon/pz-akifast": "1.65.0",
-    "@akinon/pz-b2b": "1.65.0",
-    "@akinon/pz-basket-gift-pack": "1.65.0",
-    "@akinon/pz-bkm": "1.65.0",
-    "@akinon/pz-checkout-gift-pack": "1.65.0",
-    "@akinon/pz-click-collect": "1.65.0",
-    "@akinon/pz-credit-payment": "1.65.0",
-    "@akinon/pz-gpay": "1.65.0",
-    "@akinon/pz-masterpass": "1.65.0",
-    "@akinon/pz-one-click-checkout": "1.65.0",
-    "@akinon/pz-otp": "1.65.0",
-    "@akinon/pz-pay-on-delivery": "1.65.0",
-    "@akinon/pz-saved-card": "1.65.0",
-    "@akinon/pz-tabby-extension": "1.65.0",
+    "@akinon/next": "1.67.0",
+    "@akinon/pz-akifast": "1.67.0",
+    "@akinon/pz-b2b": "1.67.0",
+    "@akinon/pz-basket-gift-pack": "1.67.0",
+    "@akinon/pz-bkm": "1.67.0",
+    "@akinon/pz-checkout-gift-pack": "1.67.0",
+    "@akinon/pz-click-collect": "1.67.0",
+    "@akinon/pz-credit-payment": "1.67.0",
+    "@akinon/pz-gpay": "1.67.0",
+    "@akinon/pz-masterpass": "1.67.0",
+    "@akinon/pz-one-click-checkout": "1.67.0",
+    "@akinon/pz-otp": "1.67.0",
+    "@akinon/pz-pay-on-delivery": "1.67.0",
+    "@akinon/pz-saved-card": "1.67.0",
+    "@akinon/pz-tabby-extension": "1.67.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -60,7 +60,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.65.0",
+    "@akinon/eslint-plugin-projectzero": "1.67.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/src/app/[commerce]/[locale]/[currency]/category/[pk]/page.tsx

@@ -4,11 +4,14 @@ import { PageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
 
 async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
-  const { data } = await getCategoryData({ pk: params.pk, searchParams });
+  const { data, breadcrumbData } = await getCategoryData({
+    pk: params.pk,
+    searchParams
+  });
 
   return (
     <>
-      <CategoryLayout data={data} />
+      <CategoryLayout data={data} breadcrumbData={breadcrumbData} />
     </>
   );
 }

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

@@ -1,8 +1,8 @@
-import { MouseEvent, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { PaginationProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
-import { Link, Button } from '@theme/components';
+import { Button } from '@theme/components';
 import usePagination from '@akinon/next/hooks/use-pagination';
 import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';
@@ -92,9 +92,7 @@ export const Pagination = (props: PaginationProps) => {
     }
   }, [numberOfPages, page, pageList, threshold]);
 
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
-    e.preventDefault();
-
+  const handleClick = (url: string) => {
     const newUrl = new URL(url, window.location.origin);
     const page = newUrl.searchParams.get('page');
 
@@ -129,7 +127,7 @@ export const Pagination = (props: PaginationProps) => {
     if (type === 'list') {
       createListItems();
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [createListItems, type]);
 
   useEffect(() => {
     if (total && total !== paginationTotal) {
@@ -200,9 +198,8 @@ export const Pagination = (props: PaginationProps) => {
         >
           {prev && currentPage !== 1 && (
             <li>
-              <Link
-                onClick={(e) => handleClick(e, prev)}
-                href={prev}
+              <button
+                onClick={() => handleClick(prev)}
                 className={twMerge(
                   'flex cursor-pointer text-sm px-2',
                   prevClassName
@@ -212,16 +209,15 @@ export const Pagination = (props: PaginationProps) => {
                 <span className="hidden lg:inline-block ms-4">
                   {t('category.pagination.previous')}
                 </span>
-              </Link>
+              </button>
             </li>
           )}
 
           {paginationItems.map((item, i) => (
             <li key={i}>
               {item?.url != '#' ? (
-                <Link
-                  onClick={(e) => handleClick(e, item.url)}
-                  href={item.url}
+                <button
+                  onClick={() => handleClick(item.url)}
                   className={twMerge(
                     clsx(
                       'text-xs px-2 cursor-pointer',
@@ -234,7 +230,7 @@ export const Pagination = (props: PaginationProps) => {
                   )}
                 >
                   {item?.page}
-                </Link>
+                </button>
               ) : (
                 <span className="cursor-default text-xs flex items-center justify-center">
                   {item?.page}
@@ -245,9 +241,8 @@ export const Pagination = (props: PaginationProps) => {
 
           {showNext && (
             <li>
-              <Link
-                onClick={(e) => handleClick(e, next)}
-                href={next}
+              <button
+                onClick={() => handleClick(next)}
                 className={twMerge(
                   'flex cursor-pointer text-xs px-2',
                   nextClassName
@@ -257,7 +252,7 @@ export const Pagination = (props: PaginationProps) => {
                   {t('category.pagination.next')}
                 </span>
                 <span>&gt;</span>
-              </Link>
+              </button>
             </li>
           )}
         </ul>

package/app-template/src/views/breadcrumb.tsx

@@ -5,6 +5,7 @@ import { Icon, Link } from '@theme/components';
 import { ROUTES } from '@theme/routes';
 import { useLocalization } from '@akinon/next/hooks';
 import { BreadcrumbResultType } from '@akinon/next/types';
+import { capitalize } from '@akinon/next/utils';
 
 export interface BreadcrumbProps {
   breadcrumbList?: BreadcrumbResultType[];
@@ -26,7 +27,9 @@ export default function Breadcrumb(props: BreadcrumbProps) {
     <div className="flex items-center gap-3 text-xs leading-4 text-gray-950">
       {list.map((item, index) => (
         <Fragment key={index}>
-          <Link href={item.url}>{item.text}</Link>
+          <Link href={item.url}>
+            {capitalize(item.text.toLocaleLowerCase())}
+          </Link>
           {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
         </Fragment>
       ))}

package/app-template/src/views/category/category-active-filters.tsx

@@ -22,17 +22,28 @@ const CategoryActiveFilters = () => {
   const handleRemoveFilter = ({ facet, choice }) => {
     if (facet.widget_type === WIDGET_TYPE.category) {
       dispatch(removeCategoryFacet({ facet, choice }));
-      return;
+    } else {
+      dispatch(toggleFacet({ facet, choice }));
     }
 
-    dispatch(toggleFacet({ facet, choice }));
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.delete(facet.search_key);
+    router.replace(pathname + '?' + urlSearchParams.toString());
   };
 
   const url = useMemo(() => {
-    const facetSearchParams =
-      convertFacetSearchParams(selectedFacets).toString();
+    const facetSearchParams = convertFacetSearchParams(selectedFacets);
+    const urlSearchParams = new URLSearchParams(searchParams.toString());
 
-    const urlSearchParams = new URLSearchParams(facetSearchParams);
+    for (const key of Array.from(urlSearchParams.keys())) {
+      if (facetSearchParams.has(key)) {
+        urlSearchParams.delete(key);
+      }
+    }
+
+    for (const [key, value] of Array.from(facetSearchParams.entries())) {
+      urlSearchParams.append(key, value);
+    }
 
     const searchText = searchParams.get('search_text');
     const page = searchParams.get('page');
@@ -53,7 +64,6 @@ const CategoryActiveFilters = () => {
 
   useEffect(() => {
     router.push(url);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url]);
 

package/app-template/src/views/category/filters/filter-item.tsx

@@ -1,12 +1,14 @@
 import clsx from 'clsx';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { Facet, FacetChoice } from '@akinon/next/types';
-import { Accordion, Radio, Checkbox } from '../../../components';
+import { Accordion, Radio, Checkbox, LoaderSpinner } from '../../../components';
 import { WIDGET_TYPE } from '../../../types';
 import { SizeFilter } from './size-filter';
 import { toggleFacet } from '@theme/redux/reducers/category';
 import { commonProductAttributes } from '@theme/settings';
 import { useRouter } from '@akinon/next/hooks';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
 
 const COMPONENT_TYPES = {
   [WIDGET_TYPE.category]: Radio,
@@ -19,6 +21,8 @@ const sizeKey = commonProductAttributes.find(
 
 interface Props {
   facet: Facet;
+  isPending: boolean;
+  startTransition: (callback: () => void) => void;
 }
 
 const sortByPredefinedOrder = (
@@ -78,16 +82,33 @@ const getComponentByWidgetType = (widgetType: string, facetKey: string) => {
   return COMPONENT_TYPES[widgetType] || COMPONENT_TYPES[WIDGET_TYPE.category];
 };
 
-export const FilterItem = ({ facet }: Props) => {
+export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
   const dispatch = useAppDispatch();
   const router = useRouter();
-
-  const handleSelectFilter = (choice: FacetChoice) => {
-    if (facet.key === 'category_ids') {
-      router.push(choice.url);
-    } else {
-      dispatch(toggleFacet({ facet, choice }));
-    }
+  const pathname = usePathname();
+
+  const [pendingChoice, setPendingChoice] = useState<string | null>(null);
+
+  const handleSelectFilter = ({
+    facet,
+    choice
+  }: {
+    facet: Facet;
+    choice: FacetChoice;
+  }) => {
+    setPendingChoice(choice.label);
+    startTransition(() => {
+      if (facet.key === 'category_ids') {
+        router.push(choice.url);
+      } else {
+        dispatch(toggleFacet({ facet, choice }));
+      }
+      setPendingChoice(null);
+
+      const urlSearchParams = new URLSearchParams(window.location.search);
+      urlSearchParams.delete(facet.search_key);
+      router.replace(pathname + '?' + urlSearchParams.toString());
+    });
   };
 
   const Component = getComponentByWidgetType(facet.widget_type, facet.key);
@@ -107,23 +128,34 @@ export const FilterItem = ({ facet }: Props) => {
         })}
       >
         {choices.map((choice, index) => (
-          <Component
-            key={choice.label}
-            data={choice}
-            name={facet.key}
-            onChange={() => facet.key !== sizeKey && handleSelectFilter(choice)}
-            onClick={() => facet.key === sizeKey && handleSelectFilter(choice)}
-            checked={choice.is_selected}
-            data-testid={`${choice.label.trim()}`}
-          >
-            {choice.label} (
-            <span
-              data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
+          <div key={choice.label} className="relative">
+            <Component
+              key={choice.label}
+              data={choice}
+              name={facet.key}
+              onChange={() => handleSelectFilter({ facet, choice })}
+              onClick={() =>
+                facet.key === sizeKey && handleSelectFilter({ facet, choice })
+              }
+              checked={choice.is_selected}
+              data-testid={`${choice.label.trim()}`}
+              disabled={isPending}
             >
-              {choice.quantity}
-            </span>
-            )
-          </Component>
+              {choice.label} (
+              <span
+                data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
+              >
+                {choice.quantity}
+              </span>
+              )
+            </Component>
+
+            {isPending && pendingChoice === choice.label && (
+              <div className="absolute inset-0 flex items-center justify-center z-50">
+                <LoaderSpinner />
+              </div>
+            )}
+          </div>
         ))}
       </div>
     </Accordion>

package/app-template/src/views/category/filters/index.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import clsx from 'clsx';
-
 import { Button, Icon } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { resetSelectedFacets } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo } from 'react';
+import { useMemo, useState, useTransition } from 'react';
 import { FilterItem } from './filter-item';
 
 interface Props {
@@ -21,12 +20,11 @@ export const Filters = (props: Props) => {
   const { t } = useLocalization();
   const { isMenuOpen, setIsMenuOpen } = props;
 
+  const [isPending, startTransition] = useTransition();
+
   const haveFilter = useMemo(() => {
-    return (
-      facets.filter(
-        (facet) =>
-          facet.data.choices.filter((choice) => choice.is_selected).length > 0
-      ).length > 0
+    return facets.some((facet) =>
+      facet.data.choices.some((choice) => choice.is_selected)
     );
   }, [facets]);
 
@@ -51,12 +49,22 @@ export const Filters = (props: Props) => {
         <span className="text-sm">1 {t('category.filters.results')}</span>
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
+
       {facets.map((facet) => {
-        return <FilterItem key={facet.key} facet={facet} />;
+        return (
+          <FilterItem
+            key={facet.key}
+            facet={facet}
+            isPending={isPending}
+            startTransition={startTransition}
+          />
+        );
       })}
+
       <div className="lg:hidden">
         <CategoryActiveFilters />
       </div>
+
       {haveFilter && (
         <div className="lg:hidden">
           <Button

package/app-template/src/views/category/layout.tsx

@@ -1,15 +1,17 @@
 import clsx from 'clsx';
-import { GetCategoryResponse } from '@akinon/next/types';
+import { BreadcrumbResultType, GetCategoryResponse } from '@akinon/next/types';
 import Breadcrumb from '@theme/views/breadcrumb';
 import { CategoryBanner } from '@theme/views/category/category-banner';
 import ListPage from '@theme/views/category/category-info';
 
 export default async function Layout({
   data,
-  children
+  children,
+  breadcrumbData
 }: {
   data: GetCategoryResponse;
   children?: React.ReactNode;
+  breadcrumbData?: BreadcrumbResultType[];
 }) {
   return (
     <>
@@ -28,7 +30,7 @@ export default async function Layout({
               'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
           )}
         >
-          <Breadcrumb />
+          <Breadcrumb breadcrumbList={breadcrumbData} />
         </div>
         <CategoryBanner {...data.category?.attributes?.category_banner} />
       </div>

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

@@ -9,6 +9,7 @@ import { twMerge } from 'tailwind-merge';
 import * as yup from 'yup';
 import { useEffect, useState } from 'react';
 import { getPosError } from '@akinon/next/utils';
+import { useMessageListener } from '@akinon/next/hooks';
 
 interface FormValues {
   agreement: boolean;
@@ -25,7 +26,6 @@ const formSchema = () =>
 export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
-
   const {
     register,
     handleSubmit,
@@ -34,11 +34,12 @@ export default function RedirectionPayment() {
     resolver: yupResolver(formSchema())
   });
   const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
-
   const onSubmit = async () => {
     completeRedirectionPayment();
   };
 
+  useMessageListener();
+
   useEffect(() => {
     const posErrors = getPosError();
 
@@ -48,44 +49,49 @@ export default function RedirectionPayment() {
   }, []);
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="lg-5 space-y-5 lg:p-10">
-      <h1 className="text-2xl font-bold px-4 md:px-0">
-        Pay With {payment_option.name}
-      </h1>
-
-      <p className="px-4 md:px-0">
-        You can quickly and easily pay and complete your order with{' '}
-        {payment_option.name}.
-      </p>
-
-      <Checkbox
-        className="px-4 md:px-0"
-        {...register('agreement')}
-        error={errors.agreement}
+    <div className="checkout-redirection-payment-wrapper">
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="lg-5 space-y-5 lg:p-10"
       >
-        Check here to indicate that you have read and agree to the all terms.
-      </Checkbox>
+        <h1 className="text-2xl font-bold px-4 md:px-0">
+          Pay With {payment_option.name}
+        </h1>
 
-      {formError?.non_field_errors && (
-        <div
-          className="w-full text-xs text-start px-1 mt-3 text-error"
-          data-testid="checkout-form-error"
-        >
-          {formError.non_field_errors}
-        </div>
-      )}
-      {formError?.status && (
-        <div
-          className="w-full text-xs text-start px-1 mt-3 text-error"
-          data-testid="checkout-form-error"
+        <p className="px-4 md:px-0">
+          You can quickly and easily pay and complete your order with{' '}
+          {payment_option.name}.
+        </p>
+
+        <Checkbox
+          className="px-4 md:px-0"
+          {...register('agreement')}
+          error={errors.agreement}
         >
-          {formError.status}
-        </div>
-      )}
+          Check here to indicate that you have read and agree to the all terms.
+        </Checkbox>
+
+        {formError?.non_field_errors && (
+          <div
+            className="w-full text-xs text-start px-1 mt-3 text-error"
+            data-testid="checkout-form-error"
+          >
+            {formError.non_field_errors}
+          </div>
+        )}
+        {formError?.status && (
+          <div
+            className="w-full text-xs text-start px-1 mt-3 text-error"
+            data-testid="checkout-form-error"
+          >
+            {formError.status}
+          </div>
+        )}
 
-      <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
-        {payment_option.name}
-      </Button>
-    </form>
+        <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
+          {payment_option.name}
+        </Button>
+      </form>
+    </div>
   );
 }

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

@@ -5,9 +5,12 @@ import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
 import { Radio } from '@theme/components';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
+import { useMemo } from 'react';
 
 const PaymentOptionButtons = () => {
-  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
+  const { preOrder, attributeBasedShippingOptions } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
   const [setPaymentOption] = useSetPaymentOptionMutation();
   const { filteredPaymentOptions } = usePaymentOptions();
 
@@ -22,10 +25,23 @@ const PaymentOptionButtons = () => {
     });
   };
 
+  const displayedPaymentOptions = useMemo(() => {
+    if (
+      attributeBasedShippingOptions &&
+      Object.keys(attributeBasedShippingOptions).length > 0
+    ) {
+      return filteredPaymentOptions.filter(
+        (option) => option.slug.toLowerCase() !== 'pay-on-delivery'
+      );
+    }
+
+    return filteredPaymentOptions;
+  }, [filteredPaymentOptions, attributeBasedShippingOptions]);
+
   return (
     <>
       <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
-        {filteredPaymentOptions.map((option) => (
+        {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
             className="border px-4 py-3 mt-3 flex h-12"
@@ -47,7 +63,7 @@ const PaymentOptionButtons = () => {
       </div>
 
       <div className="hidden md:flex">
-        {filteredPaymentOptions.map((option) => (
+        {displayedPaymentOptions.map((option) => (
           <button
             key={`payment-option-${option.pk}`}
             onClick={() => onClickHandler(option)}

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

@@ -1,36 +1,84 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import {
+  setCurrentStep,
+  setSelectedShippingOptions
+} from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
 import {
   useSetShippingOptionMutation,
+  useSetAttributeBasedShippingOptionsMutation,
   useSetDataSourceShippingOptionsMutation
 } from '@akinon/next/data/client/checkout';
 import { Price, Button, Radio } from '@theme/components';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
-import { useEffect, useState } from 'react';
 
-const ShippingOptions = () => {
+const ShippingOptions: React.FC = () => {
   const { t } = useLocalization();
+  const dispatch = useAppDispatch();
   const {
     steps,
     shippingOptions,
+    attributeBasedShippingOptions,
     dataSourceShippingOptions,
     preOrder,
-    addressList
+    addressList,
+    selectedShippingOptions
   } = useAppSelector((state: RootState) => state.checkout);
-  const { shipping_option, shipping_address, data_source_shipping_options } =
-    preOrder ?? {};
+  const {
+    shipping_option,
+    shipping_address,
+    attribute_based_shipping_options,
+    data_source_shipping_options
+  } = preOrder ?? {};
+
+  const [setShippingOption] = useSetShippingOptionMutation();
+  const [setAttributeBasedShippingOptions] =
+    useSetAttributeBasedShippingOptionsMutation();
+  const [setDataSourceShippingOption] =
+    useSetDataSourceShippingOptionsMutation();
+
+  const prevAttributeBasedOptionsRef = useRef(attributeBasedShippingOptions);
 
   const [selectedPks, setSelectedPks] = useState<
     { dataSourcePk: number; optionPk: number }[] | null
   >(null);
 
-  const [setShippingOption] = useSetShippingOptionMutation();
-  const [setDataSourceShippingOption] =
-    useSetDataSourceShippingOptionsMutation();
+  const initializeSelectedOptions = useCallback(() => {
+    if (attribute_based_shipping_options) {
+      const newSelected = { ...selectedShippingOptions };
+      let hasChanges = false;
 
-  const dispatch = useAppDispatch();
+      Object.entries(attributeBasedShippingOptions).forEach(
+        ([color, options]) => {
+          if (
+            !newSelected[color] ||
+            !options.some((opt) => opt.pk === newSelected[color])
+          ) {
+            newSelected[color] = options[0].pk;
+            hasChanges = true;
+          }
+        }
+      );
+
+      if (hasChanges) {
+        dispatch(setSelectedShippingOptions(newSelected));
+        setAttributeBasedShippingOptions(newSelected);
+      }
+    } else if (shippingOptions.length > 0 && !shipping_option) {
+      setShippingOption(shippingOptions[0].pk);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    attributeBasedShippingOptions,
+    selectedShippingOptions,
+    setAttributeBasedShippingOptions,
+    attribute_based_shipping_options,
+    shippingOptions,
+    shipping_option,
+    setShippingOption
+  ]);
 
   useEffect(() => {
     if (!data_source_shipping_options) return;
@@ -43,6 +91,49 @@ const ShippingOptions = () => {
     setSelectedPks(initialSelectedPks);
   }, [data_source_shipping_options]);
 
+  useEffect(() => {
+    if (
+      JSON.stringify(prevAttributeBasedOptionsRef.current) !==
+        JSON.stringify(attributeBasedShippingOptions) ||
+      Object.keys(selectedShippingOptions).length === 0 ||
+      (!shipping_option && shippingOptions.length > 0)
+    ) {
+      initializeSelectedOptions();
+      prevAttributeBasedOptionsRef.current = attributeBasedShippingOptions;
+    }
+  }, [
+    attributeBasedShippingOptions,
+    selectedShippingOptions,
+    initializeSelectedOptions,
+    shipping_option,
+    shippingOptions
+  ]);
+
+  const handleAttributeBasedOptionChange = useCallback(
+    (color: string, newPk: number) => {
+      const updatedOptions = { ...selectedShippingOptions, [color]: newPk };
+      dispatch(setSelectedShippingOptions(updatedOptions));
+      setAttributeBasedShippingOptions(updatedOptions);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedShippingOptions, setAttributeBasedShippingOptions]
+  );
+
+  if (addressList.length < 1) {
+    return (
+      <div className="w-full lg:w-2/5">
+        <div className="border-b border-gray-400 px-8 py-4">
+          <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
+        </div>
+        <div className="py-4 px-8">
+          <p className="text-xs">
+            {t('checkout.address.shipping.select_address_to_continue')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   const updateData = (dataSourcePk: number, newPk: number) => {
     const updatedSelectedPks = selectedPks?.map((item) =>
       item.dataSourcePk === dataSourcePk ? { ...item, optionPk: newPk } : item
@@ -106,58 +197,79 @@ const ShippingOptions = () => {
                   </span>
                 </div>
               ))}
-              <Button
-                className="mt-2 w-full"
-                disabled={!steps.shipping.completed}
-                onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
-                data-testid="checkout-shipping-save"
-              >
-                {t('checkout.address.shipping.button')}
-              </Button>
             </>
           )}
-          {dataSourceShippingOptions && dataSourceShippingOptions.length > 0 && (
-            <>
-              {dataSourceShippingOptions.map((option) => (
-                <div key={option.pk}>
-                  <h3 className="text-lg font-bold">{option?.name}</h3>
-                  {option.data_source_shipping_options.map((opt) => (
+
+          {attributeBasedShippingOptions &&
+            Object.keys(attributeBasedShippingOptions).length > 0 &&
+            Object.entries(attributeBasedShippingOptions).map(
+              ([color, options]) => (
+                <div key={color}>
+                  <h3 className="text-lg font-bold">{color}</h3>
+                  {options.map((option) => (
                     <div
-                      key={opt.pk}
+                      key={option.pk}
                       className="py-4 border-t border-gray-400 flex justify-between"
                     >
                       <Radio
-                        name={`data-source-shipping-${option.pk}`}
-                        checked={
-                          selectedPks?.some(
-                            (item) => item.optionPk === opt.pk
-                          ) || false
-                        }
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          handleRadioChange(e, option.pk)
+                        name={`attribute-based-shipping-${color}`}
+                        checked={selectedShippingOptions[color] === option.pk}
+                        onChange={() =>
+                          handleAttributeBasedOptionChange(color, option.pk)
                         }
-                        value={opt.pk}
-                        data-testid={`checkout-data-source-shipping-${opt.pk}`}
+                        data-testid={`checkout-attribute-based-shipping-${option.pk}`}
                       >
-                        {opt?.shipping_option_name}
+                        {`${option.shipping_option_name}`}
                       </Radio>
                       <span className="text-xs">
-                        <Price value={opt?.shipping_amount} />
+                        <Price value={option.shipping_amount} />
                       </span>
                     </div>
                   ))}
                 </div>
-              ))}
-              <Button
-                className="mt-2 w-full"
-                disabled={!steps.shipping.completed}
-                onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
-                data-testid="checkout-shipping-save"
-              >
-                {t('checkout.address.shipping.button')}
-              </Button>
-            </>
-          )}
+              )
+            )}
+
+          {dataSourceShippingOptions &&
+            dataSourceShippingOptions.length > 0 &&
+            dataSourceShippingOptions.map((option) => (
+              <div key={option.pk}>
+                <h3 className="text-lg font-bold">{option?.name}</h3>
+                {option.data_source_shipping_options.map((opt) => (
+                  <div
+                    key={opt.pk}
+                    className="py-4 border-t border-gray-400 flex justify-between"
+                  >
+                    <Radio
+                      name={`data-source-shipping-${option.pk}`}
+                      checked={
+                        selectedPks?.some((item) => item.optionPk === opt.pk) ||
+                        false
+                      }
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleRadioChange(e, option.pk)
+                      }
+                      value={opt.pk}
+                      data-testid={`checkout-data-source-shipping-${opt.pk}`}
+                    >
+                      {opt?.shipping_option_name}
+                    </Radio>
+                    <span className="text-xs">
+                      <Price value={opt?.shipping_amount} />
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ))}
+
+          <Button
+            className="mt-2 w-full"
+            disabled={!steps.shipping.completed}
+            onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
+            data-testid="checkout-shipping-save"
+          >
+            {t('checkout.address.shipping.button')}
+          </Button>
         </div>
       )}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {