@akinon/projectzero 1.55.0 → 1.56.0-rc.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import { useSearchParams } from 'next/navigation';
 import { CategoryHeader } from './category-header';
@@ -8,13 +8,14 @@ import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
 import { GetCategoryResponse } from '@akinon/next/types';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { setFacets } from '@theme/redux/reducers/category';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
 import { useLocalization } from '@akinon/next/hooks';
 import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
 import { useRouter } from '@akinon/next/hooks';
+import { RootState } from '@theme/redux/store';
 
 interface ListPageProps {
   data: GetCategoryResponse;
@@ -22,13 +23,16 @@ interface ListPageProps {
 
 export default function ListPage(props: ListPageProps) {
   const { data } = props;
-  const [isMenuOpen, setIsMenuOpen] = useState(false); // TODO: Move to redux
+  const dispatch = useAppDispatch();
+  const isMenuOpen = useAppSelector(
+    (state: RootState) => state.category.isMenuOpen
+  );
 
   const searchParams = useSearchParams();
   const router = useRouter();
 
   const layoutSize = useMemo(
-    () => searchParams.get('layout') ?? 3,
+    () => Number(searchParams.get('layout') ?? 3),
     [searchParams]
   );
 
@@ -37,16 +41,24 @@ export default function ListPage(props: ListPageProps) {
     [searchParams]
   );
 
+  const itemDimensions = useMemo(() => {
+    switch (layoutSize) {
+      case 2:
+        return { width: 510, height: 765 };
+      case 3:
+      default:
+        return { width: 340, height: 510 };
+    }
+  }, [layoutSize]);
+
   useEffect(() => {
     if (page > 1 && data.products?.length === 0) {
       const newUrl = new URL(window.location.href);
-
       newUrl.searchParams.delete('page');
       router.push(newUrl.pathname + newUrl.search, undefined);
     }
-  }, [searchParams, data.products, page]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [searchParams, data.products, page]);
 
-  const dispatch = useAppDispatch();
   const { t } = useLocalization();
 
   useEffect(() => {
@@ -58,9 +70,12 @@ export default function ListPage(props: ListPageProps) {
     <>
       <div className="container px-4 mx-auto lg:px-0 lg:my-4">
         <div className="grid grid-cols-[19rem_1fr]">
-          <Filters isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
+          <Filters
+            isMenuOpen={isMenuOpen}
+            setIsMenuOpen={(open) => dispatch(setMenuOpen(open))}
+          />
           <div
-            onClick={() => setIsMenuOpen(false)}
+            onClick={() => dispatch(setMenuOpen(false))}
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
@@ -71,7 +86,7 @@ export default function ListPage(props: ListPageProps) {
           <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
             <CategoryHeader
               totalCount={data.pagination?.total_count}
-              setMenuStatus={() => setIsMenuOpen(true)}
+              setMenuStatus={() => dispatch(setMenuOpen(true))}
               sortOptions={data.sorters}
             />
             <div className="hidden lg:block">
@@ -91,18 +106,17 @@ export default function ListPage(props: ListPageProps) {
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                'md:grid-cols-3': Number(layoutSize) === 3,
-                'lg:grid-cols-2': Number(layoutSize) === 2,
-                'lg:grid-cols-3': Number(layoutSize) === 3
+                'md:grid-cols-3': layoutSize === 3,
+                'lg:grid-cols-2': layoutSize === 2,
+                'lg:grid-cols-3': layoutSize === 3
               })}
             >
               {data.products.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
-                  // TODO: Find a better way to handle layout size
-                  width={340}
-                  height={510}
+                  width={itemDimensions.width}
+                  height={itemDimensions.height}
                   index={index}
                 />
               ))}

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

@@ -0,0 +1,163 @@
+import clsx from 'clsx';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { Facet, FacetChoice } from '@akinon/next/types';
+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,
+  [WIDGET_TYPE.multiselect]: Checkbox
+};
+
+const sizeKey = commonProductAttributes.find(
+  (item) => item.translationKey === 'size'
+).key;
+
+interface Props {
+  facet: Facet;
+  isPending: boolean;
+  startTransition: (callback: () => void) => void;
+}
+
+const sortByPredefinedOrder = (
+  aLabel: string,
+  bLabel: string,
+  order: string[]
+) => {
+  const aIndex = order.indexOf(aLabel);
+  const bIndex = order.indexOf(bLabel);
+
+  if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+  if (aIndex !== -1) return -1;
+  if (bIndex !== -1) return 1;
+
+  return null;
+};
+
+const sortByNumericValue = (aLabel: string, bLabel: string) => {
+  const aNum = parseInt(aLabel, 10);
+  const bNum = parseInt(bLabel, 10);
+
+  if (!isNaN(aNum) && !isNaN(bNum)) return aNum - bNum;
+  if (!isNaN(aNum)) return -1;
+  if (!isNaN(bNum)) return 1;
+
+  return null;
+};
+
+const sortChoices = (
+  facetKey: string,
+  choices: FacetChoice[]
+): FacetChoice[] => {
+  if (facetKey === sizeKey) {
+    const order = ['xs', 's', 'm', 'l', 'xl'];
+
+    return choices.sort((a, b) => {
+      const aLabel = a.label.toLowerCase();
+      const bLabel = b.label.toLowerCase();
+
+      const orderComparison = sortByPredefinedOrder(aLabel, bLabel, order);
+      if (orderComparison !== null) return orderComparison;
+
+      const numericComparison = sortByNumericValue(aLabel, bLabel);
+      if (numericComparison !== null) return numericComparison;
+
+      return aLabel.localeCompare(bLabel);
+    });
+  }
+
+  return choices;
+};
+
+const getComponentByWidgetType = (widgetType: string, facetKey: string) => {
+  if (facetKey === sizeKey) {
+    return SizeFilter;
+  }
+  return COMPONENT_TYPES[widgetType] || COMPONENT_TYPES[WIDGET_TYPE.category];
+};
+
+export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  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);
+  const choices = sortChoices(facet.key, [...facet.data.choices]);
+
+  return (
+    <Accordion
+      key={facet.key}
+      title={facet.name}
+      isCollapse={choices.some((choice) => choice.is_selected)}
+      dataTestId={`filter-${facet.name}`}
+    >
+      <div
+        className={clsx('flex gap-4', {
+          'flex-wrap flex-row': facet.key === sizeKey,
+          'flex-col': facet.key !== sizeKey
+        })}
+      >
+        {choices.map((choice, 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.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,26 +1,13 @@
 'use client';
 
-import { WIDGET_TYPE } from '@theme/types';
 import clsx from 'clsx';
-
-import { Accordion, Button, Checkbox, Icon, Radio } from '@theme/components';
-import { SizeFilter } from './size-filter';
-
-import { useLocalization, useRouter } from '@akinon/next/hooks';
-import { Facet, FacetChoice } from '@akinon/next/types';
+import { Button, Icon } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  resetSelectedFacets,
-  toggleFacet
-} from '@theme/redux/reducers/category';
+import { resetSelectedFacets } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo } from 'react';
-import { commonProductAttributes } from '@theme/settings';
-
-const COMPONENT_TYPES = {
-  [WIDGET_TYPE.category]: Radio,
-  [WIDGET_TYPE.multiselect]: Checkbox
-};
+import { useMemo, useState, useTransition } from 'react';
+import { FilterItem } from './filter-item';
 
 interface Props {
   isMenuOpen: boolean;
@@ -28,37 +15,16 @@ interface Props {
 }
 
 export const Filters = (props: Props) => {
-  const router = useRouter();
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
   const { isMenuOpen, setIsMenuOpen } = props;
 
-  const handleSelectFilter = ({
-    facet,
-    choice
-  }: {
-    facet: Facet;
-    choice: FacetChoice;
-  }) => {
-    if (facet.key === 'category_ids') {
-      router.push(choice.url);
-    } else {
-      dispatch(
-        toggleFacet({
-          facet,
-          choice
-        })
-      );
-    }
-  };
+  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]);
 
@@ -66,10 +32,6 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
-  const sizeKey = commonProductAttributes.find(
-    (item) => item.translationKey === 'size'
-  ).key;
-
   return (
     <div
       className={clsx(
@@ -87,76 +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) => {
-        let Component = null;
-        const choices = [...facet.data.choices];
-
-        if (facet.key === sizeKey) {
-          // If it's a size facet, use the custom size filter component
-          Component = SizeFilter;
-
-          const order = ['xs', 's', 'm', 'l', 'xl'];
-          choices.sort((a, b) => {
-            return (
-              order.indexOf(a.label.toLowerCase()) -
-              order.indexOf(b.label.toLowerCase())
-            );
-          });
-        } else {
-          Component =
-            COMPONENT_TYPES[facet.widget_type] ||
-            COMPONENT_TYPES[WIDGET_TYPE.category];
-        }
 
+      {facets.map((facet) => {
         return (
-          <Accordion
+          <FilterItem
             key={facet.key}
-            title={facet.name}
-            isCollapse={choices.some((choice) => choice.is_selected)}
-            dataTestId={`filter-${facet.name}`}
-          >
-            <div
-              className={clsx(
-                'flex gap-4 flex-wrap',
-                facet.key === sizeKey ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
-              )}
-            >
-              {choices.map((choice, index) => (
-                <Component // TODO: This dynamic component can be a hook or higher order component so it props can be standardized
-                  key={choice.label}
-                  data={choice}
-                  name={facet.key}
-                  onChange={() => {
-                    if (facet.key !== sizeKey) {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  onClick={() => {
-                    if (facet.key === sizeKey) {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  checked={choice.is_selected}
-                  data-testid={`${choice.label.trim()}`}
-                >
-                  {choice.label} (
-                  <span
-                    data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
-                  >
-                    {choice.quantity}
-                  </span>
-                  )
-                </Component>
-              ))}
-            </div>
-          </Accordion>
+            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)}