@akinon/projectzero 1.48.0-rc.5 → 1.48.0

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

@@ -3,9 +3,9 @@ import {
   Button,
   FileInput,
   Input,
-  Link,
   LoaderSpinner,
-  Select
+  Select,
+  Link
 } from '@theme/components';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
@@ -45,8 +45,7 @@ const contactFormSchema = (t) =>
       .when('subject', {
         is: (value) => value === '2',
         then: yup.string().required(t('account.contact.form.error.required'))
-      }),
-    file: yup.mixed()
+      })
   });
 
 const ContactForm = () => {
@@ -111,18 +110,8 @@ const ContactForm = () => {
     resolver: yupResolver(contactFormSchema(t))
   });
 
-  const onSubmit: SubmitHandler<ContactFormType> = (data, event) => {
-    const formData = new FormData();
-
-    Object.keys(data ?? {}).forEach((key) => {
-      if (key === 'file' && data[key]) {
-        formData.append(key, data[key][0]);
-      } else if (data[key]) {
-        formData.append(key, data[key]);
-      }
-    });
-
-    sendContact(formData);
+  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
+    sendContact(data);
   };
 
   const handleChange = (e) => {
@@ -245,7 +234,6 @@ const ContactForm = () => {
               className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-none focus:border-black hover:border-black"
               rows={7}
               name="message"
-              // @ts-expect-error -- awaiting fix:
               {...register('message')}
             />
             {errors.message && (
@@ -254,12 +242,7 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
+            <FileInput className="w-full mb-5" title="test" />
             <Button type="submit" className="w-full font-medium">
               {t('account.contact.form.submit_button')}
             </Button>

package/app-template/src/views/account/favorite-item.tsx

@@ -93,8 +93,8 @@ export const FavoriteItem = (props: Props) => {
           className={clsx(
             'absolute top-4 right-4 cursor-pointer',
             isRemoveFavoriteLoading
-              ? 'hover:cursor-wait'
-              : 'hover:cursor-pointer'
+              ? 'pointer-events-none hover:cursor-wait' // TODO: Cursors not working fix!
+              : 'hove:cursor-pointer'
           )}
           data-testid="favorites-remove"
         />

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

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

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

@@ -5,7 +5,6 @@ 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[];
@@ -27,9 +26,7 @@ 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}>
-            {capitalize(item.text.toLocaleLowerCase())}
-          </Link>
+          <Link href={item.url}>{item.text}</Link>
           {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
         </Fragment>
       ))}

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

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

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useSearchParams } from 'next/navigation';
 import { CategoryHeader } from './category-header';
@@ -8,14 +8,13 @@ import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
 import { GetCategoryResponse } from '@akinon/next/types';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { setFacets } 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;
@@ -23,16 +22,13 @@ interface ListPageProps {
 
 export default function ListPage(props: ListPageProps) {
   const { data } = props;
-  const dispatch = useAppDispatch();
-  const isMenuOpen = useAppSelector(
-    (state: RootState) => state.category.isMenuOpen
-  );
+  const [isMenuOpen, setIsMenuOpen] = useState(false); // TODO: Move to redux
 
   const searchParams = useSearchParams();
   const router = useRouter();
 
   const layoutSize = useMemo(
-    () => Number(searchParams.get('layout') ?? 3),
+    () => searchParams.get('layout') ?? 3,
     [searchParams]
   );
 
@@ -41,24 +37,16 @@ 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]);
+  }, [searchParams, data.products, page]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const dispatch = useAppDispatch();
   const { t } = useLocalization();
 
   useEffect(() => {
@@ -70,12 +58,9 @@ 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={(open) => dispatch(setMenuOpen(open))}
-          />
+          <Filters isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
           <div
-            onClick={() => dispatch(setMenuOpen(false))}
+            onClick={() => setIsMenuOpen(false)}
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
@@ -86,7 +71,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={() => dispatch(setMenuOpen(true))}
+              setMenuStatus={() => setIsMenuOpen(true)}
               sortOptions={data.sorters}
             />
             <div className="hidden lg:block">
@@ -106,17 +91,18 @@ export default function ListPage(props: ListPageProps) {
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                'md:grid-cols-3': layoutSize === 3,
-                'lg:grid-cols-2': layoutSize === 2,
-                'lg:grid-cols-3': layoutSize === 3
+                'md:grid-cols-3': Number(layoutSize) === 3,
+                'lg:grid-cols-2': Number(layoutSize) === 2,
+                'lg:grid-cols-3': Number(layoutSize) === 3
               })}
             >
               {data.products.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
-                  width={itemDimensions.width}
-                  height={itemDimensions.height}
+                  // TODO: Find a better way to handle layout size
+                  width={340}
+                  height={510}
                   index={index}
                 />
               ))}

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

@@ -1,13 +1,26 @@
 'use client';
 
+import { WIDGET_TYPE } from '@theme/types';
 import clsx from 'clsx';
-import { Button, Icon } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
+
+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 { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { resetSelectedFacets } from '@theme/redux/reducers/category';
+import {
+  resetSelectedFacets,
+  toggleFacet
+} from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo, useState, useTransition } from 'react';
-import { FilterItem } from './filter-item';
+import { useMemo } from 'react';
+import { commonProductAttributes } from '@theme/settings';
+
+const COMPONENT_TYPES = {
+  [WIDGET_TYPE.category]: Radio,
+  [WIDGET_TYPE.multiselect]: Checkbox
+};
 
 interface Props {
   isMenuOpen: boolean;
@@ -15,16 +28,37 @@ 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 [isPending, startTransition] = useTransition();
+  const handleSelectFilter = ({
+    facet,
+    choice
+  }: {
+    facet: Facet;
+    choice: FacetChoice;
+  }) => {
+    if (facet.key === 'category_ids') {
+      router.push(choice.url);
+    } else {
+      dispatch(
+        toggleFacet({
+          facet,
+          choice
+        })
+      );
+    }
+  };
 
   const haveFilter = useMemo(() => {
-    return facets.some((facet) =>
-      facet.data.choices.some((choice) => choice.is_selected)
+    return (
+      facets.filter(
+        (facet) =>
+          facet.data.choices.filter((choice) => choice.is_selected).length > 0
+      ).length > 0
     );
   }, [facets]);
 
@@ -32,6 +66,10 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
+  const sizeKey = commonProductAttributes.find(
+    (item) => item.translationKey === 'size'
+  ).key;
+
   return (
     <div
       className={clsx(
@@ -49,22 +87,76 @@ 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];
+        }
+
         return (
-          <FilterItem
+          <Accordion
             key={facet.key}
-            facet={facet}
-            isPending={isPending}
-            startTransition={startTransition}
-          />
+            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>
         );
       })}
-
       <div className="lg:hidden">
         <CategoryActiveFilters />
       </div>
-
       {haveFilter && (
         <div className="lg:hidden">
           <Button

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

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

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

@@ -23,29 +23,13 @@ import { PaymentOption } from '@akinon/next/types';
 const creditCardFormSchema = (
   t,
   payment_option: PaymentOption,
-  isMasterpassDirectPurchase?: boolean,
-  isMasterpassCvcRequired?: boolean
+  isMasterpassDirectPurchase?: boolean
 ) => {
   if (
     payment_option?.payment_type === 'masterpass' &&
     isMasterpassDirectPurchase === false
   ) {
     return yup.object().shape({
-      card_cvv: yup
-        .string()
-        .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-        .when('*', (_, schema) => {
-          if (isMasterpassCvcRequired) {
-            return schema
-              .length(
-                3,
-                t('checkout.payment.credit_card.form.error.cvv_length')
-              )
-              .required(t('checkout.payment.credit_card.form.error.required'));
-          }
-
-          return schema;
-        }),
       agreement: yup
         .boolean()
         .oneOf([true], t('checkout.payment.credit_card.form.error.required'))
@@ -103,16 +87,10 @@ const CheckoutCreditCard = () => {
     control,
     formState: { errors },
     setError,
-    getValues,
-    clearErrors
+    getValues
   } = useForm<CreditCardForm>({
     resolver: yupResolver(
-      creditCardFormSchema(
-        t,
-        payment_option,
-        masterpass?.isDirectPurchase,
-        masterpass?.cvcRequired
-      )
+      creditCardFormSchema(t, payment_option, masterpass?.isDirectPurchase)
     )
   });
   const [months, setMonths] = useState([]);
@@ -339,14 +317,7 @@ const CheckoutCreditCard = () => {
         <PluginModule
           component={Component.MasterpassCardList}
           props={{
-            className: 'p-10',
-            form: {
-              control,
-              register,
-              errors,
-              setFormValue,
-              clearErrors
-            }
+            className: 'p-10'
           }}
         />
 

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

@@ -9,7 +9,6 @@ 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;
@@ -26,6 +25,7 @@ const formSchema = () =>
 export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
+
   const {
     register,
     handleSubmit,
@@ -34,12 +34,11 @@ export default function RedirectionPayment() {
     resolver: yupResolver(formSchema())
   });
   const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
+
   const onSubmit = async () => {
     completeRedirectionPayment();
   };
 
-  useMessageListener();
-
   useEffect(() => {
     const posErrors = getPosError();
 
@@ -49,49 +48,44 @@ export default function RedirectionPayment() {
   }, []);
 
   return (
-    <div className="checkout-redirection-payment-wrapper">
-      <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>
+    <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>
+      <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}
-        >
-          Check here to indicate that you have read and agree to the all terms.
-        </Checkbox>
+      <Checkbox
+        className="px-4 md:px-0"
+        {...register('agreement')}
+        error={errors.agreement}
+      >
+        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>
-        )}
+      {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>
-    </div>
+      <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
+        {payment_option.name}
+      </Button>
+    </form>
   );
 }