@akinon/projectzero 1.35.0 → 1.36.0-rc.1

package/app-template/src/app/api/form/[...id]/route.ts

@@ -1,7 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
-export async function POST(req: NextRequest) {
+export async function POST() {
   // TODO: Handle Form Data
 
-  return NextResponse.json({message: 'ok'});
+  return NextResponse.json({ message: 'ok' });
 }

package/app-template/src/components/carousel-core.tsx

@@ -28,7 +28,7 @@ const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
     } else {
       setAspectRatio(containerAspectRatio.mobile);
     }
-  }, [matches]);
+  }, [matches, containerAspectRatio]);
 
   return (
     <div className="w-full" style={{ aspectRatio }}>

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

@@ -3,7 +3,7 @@ import { CheckboxProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, checked, error, ...rest } = props;
+  const { children, checked = false, error, ...rest } = props;
 
   return (
     <label className={twMerge('flex flex-col text-xs', props.className)}>
@@ -12,7 +12,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           type="checkbox"
           {...rest}
           ref={ref}
-          checked={checked ?? false}
+          defaultChecked={checked}
           className="w-4 h-4 shrink-0"
         />
         {children && <span className="ml-2">{children}</span>}

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

@@ -1,17 +1,28 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState } from 'react';
+import { forwardRef, FocusEvent, useState, Ref } from 'react';
 import { Controller } from 'react-hook-form';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
 import { InputProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
+const PatternFormatWithRef = forwardRef(
+  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
+    return <PatternFormat {...props} getInputRef={ref} />;
+  }
+);
+PatternFormatWithRef.displayName = 'PatternFormatWithRef';
+
 export const Input = forwardRef<
   HTMLInputElement,
   InputProps &
     Pick<
-      NumberFormatProps,
-      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    >
+      PatternFormatProps,
+      'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    > & {
+      format?: string;
+      defaultValue?: string;
+      type?: string;
+    }
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -37,6 +48,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -79,14 +91,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
-              defaultValue={false}
               render={({ field }) => (
-                <NumberFormat
+                <PatternFormatWithRef
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
+                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

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

@@ -123,13 +123,13 @@ export const Pagination = (props: PaginationProps) => {
     if (inView) {
       handlePageChange();
     }
-  }, [inView]);
+  }, [inView]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (type === 'list') {
       createListItems();
     }
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (total && total !== paginationTotal) {

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

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 import { PriceProps } from '@theme/types';
 import { useLocalization } from '@akinon/next/hooks';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -38,7 +38,7 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency

package/app-template/src/middleware.ts

@@ -1,5 +1,5 @@
-import { PzNextRequest, withPzDefault } from '@akinon/next/middlewares';
-import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import { withPzDefault } from '@akinon/next/middlewares';
+import { NextMiddleware, NextResponse } from 'next/server';
 
 /**
  * !IMPORTANT
@@ -16,18 +16,18 @@ export const config = {
   ]
 };
 
-const middleware: NextMiddleware = (
-  req: PzNextRequest,
-  event: NextFetchEvent
-) => {
-  // If you use a custom response such as NextResponse.json(),
-  // you should set pz-override-response header to true as shown below.
-  // Otherwise, you'll get a 404 error.
+const middleware: NextMiddleware = () =>
+  // req: PzNextRequest,
+  // event: NextFetchEvent
+  {
+    // If you use a custom response such as NextResponse.json(),
+    // you should set pz-override-response header to true as shown below.
+    // Otherwise, you'll get a 404 error.
 
-  // Example:
-  // return NextResponse.json({ status: 'ok' }, { headers: { 'pz-override-response': 'true' } });
+    // Example:
+    // return NextResponse.json({ status: 'ok' }, { headers: { 'pz-override-response': 'true' } });
 
-  return NextResponse.next();
-};
+    return NextResponse.next();
+  };
 
 export default withPzDefault(middleware);

package/app-template/src/redux/reducers/category.ts

@@ -31,7 +31,10 @@ const categorySlice = createSlice({
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {
-              if (action.payload.facet.widget_type === WIDGET_TYPE.category) {
+              if (
+                action.payload.facet.widget_type === WIDGET_TYPE.category &&
+                choice.is_selected
+              ) {
                 choice.is_selected = false;
               }
               return choice;
@@ -48,6 +51,24 @@ const categorySlice = createSlice({
         return facet;
       });
     },
+    removeCategoryFacet(state, action) {
+      state.selectedFacets = state.selectedFacets.map((facet) => {
+        if (facet.key === action.payload.facet.key) {
+          facet.data.choices = facet.data.choices.map((choice) => {
+            if (choice.value === action.payload.choice.value) {
+              choice.is_selected = false;
+            }
+            return choice;
+          });
+        }
+
+        return facet;
+      });
+
+      state.selectedFacets = state.selectedFacets.filter(
+        (facet) => facet.key !== action.payload.facet.key
+      );
+    },
     resetSelectedFacets(state) {
       return {
         ...state,
@@ -61,6 +82,7 @@ export const {
   setFacets,
   setSelectedFacets,
   toggleFacet,
+  removeCategoryFacet,
   resetSelectedFacets
 } = categorySlice.actions;
 

package/app-template/src/redux/store.ts

@@ -33,7 +33,7 @@ export type AppStore = ReturnType<typeof makeStore>;
 
 export type RootState = ReturnType<AppStore['getState']>;
 
-export type TypedDispatch = ThunkDispatch<RootState, any, AnyAction>;
+export type TypedDispatch = ThunkDispatch<RootState, void, AnyAction>;
 
 export type AppDispatch = AppStore['dispatch'];
 

package/app-template/src/types/next-auth.d.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import NextAuth from 'next-auth';
 
 declare module 'next-auth' {

package/app-template/src/views/account/account-menu.tsx

@@ -63,7 +63,6 @@ export default function AccountMenu() {
   const [logout] = useLogoutMutation();
   const pathname = usePathname();
   const accountMenuRegex = new RegExp(`^${ROUTES.ACCOUNT}/?$`).test(pathname);
-
   const handleLogout = async () => {
     logout()
       .unwrap()

package/app-template/src/views/account/address-form.tsx

@@ -121,7 +121,7 @@ export const AddressForm = (props: Props) => {
       return options;
     }
     return [];
-  }, [country]);
+  }, [country]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const cityOptions = useMemo(() => {
     if (city) {
@@ -137,7 +137,7 @@ export const AddressForm = (props: Props) => {
       return options;
     }
     return [];
-  }, [city]);
+  }, [city]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const townshipOptions = useMemo(() => {
     if (township) {
@@ -156,7 +156,7 @@ export const AddressForm = (props: Props) => {
       return options;
     }
     return [];
-  }, [township]);
+  }, [township]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const districtOptions = useMemo(() => {
     if (district) {
@@ -175,7 +175,7 @@ export const AddressForm = (props: Props) => {
       return options;
     }
     return [];
-  }, [district]);
+  }, [district]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (data && country) {

package/app-template/src/views/account/favourite-products/favourite-products-list.tsx

@@ -30,7 +30,11 @@ const FavoriteProductsList = () => {
   }
 
   if (isLoading || isFetching) {
-    return <LoaderSpinner />; // TODO: Fix loader spinner position
+    return (
+      <div className="flex items-center justify-center h-80">
+        <LoaderSpinner />
+      </div>
+    );
   }
 
   return (

package/app-template/src/views/account/orders/order-detail-header.tsx

@@ -14,13 +14,6 @@ export interface Props {
 export const OrderDetailHeader = ({ title, order, children }: Props) => {
   const { t } = useLocalization();
 
-  const orderDate = new Date(order.created_date)
-    .toJSON()
-    .slice(0, 10)
-    .split('-')
-    .reverse()
-    .join(' ');
-
   return (
     <div className="bg-gray-150 flex flex-col items-center justify-center p-6 w-full mb-8 md:flex-row">
       <div className="flex flex-col items-center text-center gap-2">

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

@@ -1,11 +1,15 @@
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import React, { useEffect, useMemo } from 'react';
-import { toggleFacet } from '@theme/redux/reducers/category';
+import {
+  removeCategoryFacet,
+  toggleFacet
+} from '@theme/redux/reducers/category';
 import { useRouter } from '@akinon/next/hooks';
 import convertFacetSearchParams from '@theme/utils/convert-facet-search-params';
 import { usePathname } from 'next/navigation';
 import { WIDGET_TYPE } from '@theme/types';
 import { useSearchParams } from 'next/dist/client/components/navigation';
+import { Icon } from '@theme/components';
 
 const CategoryActiveFilters = () => {
   const dispatch = useAppDispatch();
@@ -16,6 +20,11 @@ const CategoryActiveFilters = () => {
   const { facets, selectedFacets } = useAppSelector((state) => state.category);
 
   const handleRemoveFilter = ({ facet, choice }) => {
+    if (facet.widget_type === WIDGET_TYPE.category) {
+      dispatch(removeCategoryFacet({ facet, choice }));
+      return;
+    }
+
     dispatch(toggleFacet({ facet, choice }));
   };
 
@@ -53,43 +62,23 @@ const CategoryActiveFilters = () => {
       {facets.map((facet) =>
         facet.data.choices
           .filter((choice) => choice.is_selected)
-          .map((choice) => (
-            <div
-              className="flex justify-between text-xs text-black-800 py-3.5 px-4 border border-gray-400 hover:bg-gray-300 cursor-default items-center"
-              key={`${facet.key}-${choice.label}`}
-            >
-              <div>
-                {facet.widget_type !== WIDGET_TYPE.category && (
-                  <span>{facet.name}: </span>
-                )}
-                <span>{choice.label}</span>
-              </div>
-              {facet.widget_type !== WIDGET_TYPE.category && (
+          .map(
+            (choice) =>
+              Number(choice.real_depth) !== 2 && (
                 <div
-                  className="cursor-pointer ml-4"
-                  onClick={() => handleRemoveFilter({ facet, choice })}
+                  className="flex justify-between text-xs text-black-800 py-3.5 px-4 border border-gray-400 hover:bg-gray-300 cursor-default items-center"
+                  key={`${facet.key}-${choice.label}`}
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 13.5 13.5"
-                    width="1em"
-                    height="1em"
-                  >
-                    <path
-                      d="m.75 12.75 12-12m-12 0 12 12"
-                      style={{
-                        fill: 'none',
-                        stroke: '#000',
-                        strokeLinecap: 'round',
-                        strokeLinejoin: 'round',
-                        strokeWidth: '1.5px'
-                      }}
-                    />
-                  </svg>
+                  <span>{choice.label}</span>
+                  <Icon
+                    className="cursor-pointer"
+                    name="close"
+                    size={12}
+                    onClick={() => handleRemoveFilter({ facet, choice })}
+                  />
                 </div>
-              )}
-            </div>
-          ))
+              )
+          )
       )}
     </div>
   );

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

@@ -44,7 +44,7 @@ export default function ListPage(props: ListPageProps) {
       newUrl.searchParams.delete('page');
       router.push(newUrl.pathname + newUrl.search, undefined);
     }
-  }, [searchParams, data.products, page]);
+  }, [searchParams, data.products, page]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
@@ -70,7 +70,7 @@ export default function ListPage(props: ListPageProps) {
           ></div>
           <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
             <CategoryHeader
-              totalCount={data.pagination.total_count}
+              totalCount={data.pagination?.total_count}
               setMenuStatus={() => setIsMenuOpen(true)}
               sortOptions={data.sorters}
             />
@@ -78,7 +78,7 @@ export default function ListPage(props: ListPageProps) {
               <CategoryActiveFilters />
             </div>
 
-            {data.products.length === 0 && page === 1 && (
+            {data.products?.length === 0 && page === 1 && (
               <div className="text-center bg-gray-200 px-5 py-20">
                 <p className="pb-4">{t('category.search.not_found')}</p>
                 <Link className="underline" href={ROUTES.HOME}>

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { Accordion, Button, Checkbox, Icon, Radio } from '@theme/components';
 import { SizeFilter } from './size-filter';
 
-import { useLocalization } from '@akinon/next/hooks';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 import { Facet, FacetChoice } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
@@ -14,7 +14,8 @@ import {
   toggleFacet
 } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import { commonProductAttributes } from '@theme/settings';
 
 const COMPONENT_TYPES = {
   [WIDGET_TYPE.category]: Radio,
@@ -27,6 +28,7 @@ interface Props {
 }
 
 export const Filters = (props: Props) => {
+  const router = useRouter();
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
@@ -39,12 +41,16 @@ export const Filters = (props: Props) => {
     facet: Facet;
     choice: FacetChoice;
   }) => {
-    dispatch(
-      toggleFacet({
-        facet,
-        choice
-      })
-    );
+    if (facet.key === 'category_ids') {
+      router.push(choice.url);
+    } else {
+      dispatch(
+        toggleFacet({
+          facet,
+          choice
+        })
+      );
+    }
   };
 
   const haveFilter = useMemo(() => {
@@ -60,6 +66,10 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
+  const sizeKey = commonProductAttributes.find(
+    (item) => item.translationKey === 'size'
+  ).key;
+
   return (
     <div
       className={clsx(
@@ -81,7 +91,7 @@ export const Filters = (props: Props) => {
         let Component = null;
         const choices = [...facet.data.choices];
 
-        if (facet.key === 'integration_SizeId') {
+        if (facet.key === sizeKey) {
           // If it's a size facet, use the custom size filter component
           Component = SizeFilter;
 
@@ -107,8 +117,8 @@ export const Filters = (props: Props) => {
           >
             <div
               className={clsx(
-                'flex gap-4',
-                facet.key === 'integration_SizeId' ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
+                '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) => (
@@ -117,13 +127,13 @@ export const Filters = (props: Props) => {
                   data={choice}
                   name={facet.key}
                   onChange={() => {
-                    if (facet.key !== 'integration_SizeId') {
+                    if (facet.key !== sizeKey) {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }
                   }}
                   onClick={() => {
-                    if (facet.key === 'integration_SizeId') {
+                    if (facet.key === sizeKey) {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }

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

@@ -20,7 +20,7 @@ const CheckoutAuth = () => {
     } else if (status === 'unauthenticated') {
       router.replace(ROUTES.CHECKOUT + `?callbackUrl=${ROUTES.CHECKOUT}`);
     }
-  }, [status]);
+  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="flex flex-col w-full my-5 lg:flex-row">

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

@@ -151,7 +151,7 @@ const CheckoutCreditCard = () => {
 
     setMonths(months);
     setYears(years);
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (installment?.pk) {

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

@@ -13,10 +13,9 @@ import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
 import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import PaymentOptionButtons from '../payment-option-buttons';
 import { Trans } from '@akinon/next/components/trans';
 
-const fundsTransferFormSchema = (t) =>
+const fundsTransferFormSchema = () =>
   yup.object().shape({
     agreement: yup.boolean().oneOf([true], 'This field is required.')
   });
@@ -28,7 +27,7 @@ const CheckoutFundsTransfer = () => {
     control,
     formState: { errors }
   } = useForm({
-    resolver: yupResolver(fundsTransferFormSchema(t))
+    resolver: yupResolver(fundsTransferFormSchema())
   });
   const [formError, setFormError] = useState(null);
   const { bankAccounts, selectedBankAccountPk, preOrder } = useAppSelector(

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

@@ -1,14 +1,12 @@
 'use client';
 
 import { useCompleteRedirectionPaymentMutation } from '@akinon/next/data/client/checkout';
-import { useLocalization } from '@akinon/next/hooks';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Button, Checkbox } from '@theme/components';
 import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import * as yup from 'yup';
-import PaymentOptionButtons from '../payment-option-buttons';
 import { useEffect, useState } from 'react';
 import { getPosError } from '@akinon/next/utils';
 
@@ -16,7 +14,7 @@ interface FormValues {
   agreement: boolean;
 }
 
-const formSchema = (t) =>
+const formSchema = () =>
   yup.object().shape({
     agreement: yup
       .boolean()
@@ -28,13 +26,12 @@ export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
 
-  const { t } = useLocalization();
   const {
     register,
     handleSubmit,
     formState: { errors }
   } = useForm<FormValues>({
-    resolver: yupResolver(formSchema(t))
+    resolver: yupResolver(formSchema())
   });
   const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
 

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

@@ -63,7 +63,7 @@ export const FindInStore = ({ productPk, productName, variants }) => {
       return options;
     }
     return [];
-  }, [retailStore]);
+  }, [retailStore]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const sizeOptions = useMemo(() => {
     if (variants) {
@@ -80,7 +80,7 @@ export const FindInStore = ({ productPk, productName, variants }) => {
       return options;
     }
     return [];
-  }, [variants]);
+  }, [variants, sizeKey]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const createStockStatus = (stock) => {
     const status = {

package/app-template/src/views/header/mini-basket.tsx

@@ -46,7 +46,7 @@ function MiniBasketItem(props: MiniBasketItemProps) {
         miniBasketList.scrollTop = 0;
       }
     }
-  }, [highlightedItem, basketItem.product.pk]);
+  }, [highlightedItem, basketItem.product.pk, miniBasketListRef]);
 
   const removeItem = () => {
     updateQuantityMutation({
@@ -183,7 +183,7 @@ export default function MiniBasket() {
         setSortedBasket(basket.basketitem_set);
       }
     }
-  }, [isSuccess, highlightedItem, basket]);
+  }, [isSuccess, highlightedItem, basket, highlightedItemPk]);
 
   return (
     <>

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

@@ -36,7 +36,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
 
   useEffect(() => {
     pushProductViewed(data?.product);
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const addProductToCart = async () => {
     if (!variantsSelectionCheck()) {
@@ -206,7 +206,14 @@ export default function ProductInfo({ data }: ProductPageProps) {
             'after:bg-[#d02c2f]',
             'after:rounded-xl',
             'after:left-1'
-          ])
+          ]),
+          onError: (error) =>
+            setProductError(
+              error?.data?.non_field_errors ||
+                Object.keys(error?.data).map(
+                  (key) => `${key}: ${error?.data[key].join(', ')}`
+                )
+            )
         }}
       />