@akinon/projectzero 1.41.0-rc.0 → 1.41.0

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

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } 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: NumericFormatProps & PriceProps) => {
+export const Price = (props: NumberFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -38,7 +38,7 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
   );
 
   return (
-    <NumericFormat
+    <NumberFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency

package/app-template/src/plugins.js

@@ -10,5 +10,6 @@ module.exports = [
   'pz-bkm',
   'pz-credit-payment',
   'pz-masterpass',
-  'pz-b2b'
+  'pz-b2b',
+  'pz-akifast'
 ];

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

@@ -31,7 +31,7 @@ interface Props {
   onSubmit: (data: any) => void;
 }
 
-const makeAddressFormSchema = (t, { phoneNumberLength, postCodeLength }) =>
+const makeAddressFormSchema = (t, { phoneNumberLength }) =>
   yup.object().shape({
     title: yup.string().required(t('account.address_book.form.error.required')),
     first_name: yup
@@ -65,9 +65,8 @@ const makeAddressFormSchema = (t, { phoneNumberLength, postCodeLength }) =>
       .max(255, t('account.address_book.form.error.line_max')),
     postcode: yup
       .string()
-      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-      .min(postCodeLength, t('account.address_book.form.error.postcode_min'))
-      .max(postCodeLength, t('account.address_book.form.error.postcode_max'))
+      .min(5, t('account.address_book.form.error.postcode_min'))
+      .max(5, t('account.address_book.form.error.postcode_max'))
       .required(t('account.address_book.form.error.required')),
     company_name: yup.string().nullable(),
     tax_no: yup.string().nullable(),
@@ -81,8 +80,7 @@ export const AddressForm = (props: Props) => {
   const { data, onSubmit } = props;
   const config = useAppSelector((state) => state.config);
   const addressFormSchema = makeAddressFormSchema(t, {
-    phoneNumberLength: config.user_phone_format.length,
-    postCodeLength: config.user_post_code_format.length
+    phoneNumberLength: config.user_phone_format.length
   });
   const {
     register,
@@ -183,22 +181,12 @@ export const AddressForm = (props: Props) => {
     if (data && country) {
       reset({
         ...data,
-        is_corporate: String(data.is_corporate)
+        is_corporate:
+          String(data.is_corporate) === AddressType.company ? 'true' : 'false' // TODO: Fix this! This hack for radio buttons can't be set to boolean value
       });
     }
   }, [data, country, reset]);
 
-  useEffect(() => {
-    if (selectedFormType !== AddressType.company) {
-      reset({
-        ...watch(),
-        company_name: '',
-        tax_office: '',
-        tax_no: ''
-      });
-    }
-  }, [selectedFormType, reset, watch]);
-
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -334,15 +322,12 @@ export const AddressForm = (props: Props) => {
         )}
       </label>
       <Input
+        type="number"
         label={t('account.address_book.form.post_code.placeholder')}
         {...register('postcode')}
         error={errors.postcode}
         data-testid="address-form-post-code"
         required
-        format={config.user_post_code_format.replaceAll(/\9/g, '#')}
-        control={control}
-        mask="_"
-        allowEmptyFormatting
       />
       {selectedFormType === AddressType.company && (
         <>

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) => {
@@ -253,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/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/basket/summary.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -9,10 +9,10 @@ import {
   useRemoveVoucherCodeMutation
 } from '@akinon/next/data/client/basket';
 import { Basket, Error } from '@akinon/next/types';
-import { Price, Button, Input } from '@theme/components';
+import { Button, Input, Price } from '@theme/components';
 import { pushBeginCheckout } from '@theme/utils/gtm';
 import { ROUTES } from '@theme/routes';
-import { useRouter, useLocalization } from '@akinon/next/hooks';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import clsx from 'clsx';
 
@@ -35,7 +35,9 @@ export const Summary = (props: Props) => {
     setError,
     reset,
     formState: { errors }
-  } = useForm<{ voucherCode: string }>({
+  } = useForm<{
+    voucherCode: string;
+  }>({
     resolver: yupResolver(voucherCodeFormSchema(t))
   });
   const dispatch = useAppDispatch();
@@ -88,6 +90,29 @@ export const Summary = (props: Props) => {
       });
   };
 
+  const checkoutProviderProps = {
+    className: clsx([
+      'py-2.5',
+      'bg-black',
+      'relative',
+      'hover:bg-black',
+      'before:content-[""]',
+      'before:w-6',
+      'before:h-6',
+      'before:bg-white',
+      'before:absolute',
+      'before:rounded-r-[18px]',
+      'before:left-0',
+      'after:content-[""]',
+      'after:absolute',
+      'after:w-3',
+      'after:h-3',
+      'after:bg-[#d02c2f]',
+      'after:rounded-xl',
+      'after:left-1'
+    ])
+  };
+
   useEffect(() => {
     const products = basket.basketitem_set.map((basketItem) => ({
       ...basketItem.product
@@ -189,30 +214,14 @@ export const Summary = (props: Props) => {
           {t('basket.summary.proceed_to_checkout')}
         </Button>
 
+        <PluginModule
+          component={Component.AkifastCheckoutButton}
+          props={checkoutProviderProps}
+        />
+
         <PluginModule
           component={Component.OneClickCheckoutButtons}
-          props={{
-            className: clsx([
-              'py-2.5',
-              'bg-black',
-              'relative',
-              'hover:bg-black',
-              'before:content-[""]',
-              'before:w-6',
-              'before:h-6',
-              'before:bg-white',
-              'before:absolute',
-              'before:rounded-r-[18px]',
-              'before:left-0',
-              'after:content-[""]',
-              'after:absolute',
-              'after:w-3',
-              'after:h-3',
-              'after:bg-[#d02c2f]',
-              'after:rounded-xl',
-              'after:left-1'
-            ])
-          }}
+          props={checkoutProviderProps}
         />
       </div>
     </div>

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

@@ -1,14 +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 } from 'react';
-import { FilterItem } from './filter-item';
+import { commonProductAttributes } from '@theme/settings';
+
+const COMPONENT_TYPES = {
+  [WIDGET_TYPE.category]: Radio,
+  [WIDGET_TYPE.multiselect]: Checkbox
+};
 
 interface Props {
   isMenuOpen: boolean;
@@ -16,11 +28,31 @@ 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 haveFilter = useMemo(() => {
     return (
       facets.filter(
@@ -34,6 +66,10 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
+  const sizeKey = commonProductAttributes.find(
+    (item) => item.translationKey === 'size'
+  ).key;
+
   return (
     <div
       className={clsx(
@@ -52,7 +88,71 @@ export const Filters = (props: Props) => {
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
       {facets.map((facet) => {
-        return <FilterItem key={facet.key} facet={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 (
+          <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',
+                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 />

package/app-template/src/views/login/index.tsx

@@ -11,12 +11,17 @@ import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
 import { useGetBasketQuery } from '@akinon/next/data/client/basket';
-import { useCaptcha } from '@akinon/next/hooks';
+import { useCaptcha, useLocalization } from '@akinon/next/hooks';
 import { AuthError } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-
-const oauthProviders = [
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+const oauthProviders: Array<{
+  key: string;
+  label?: string;
+  image?: string;
+  localeKey?: string;
+}> = [
   {
     key: 'google',
     label: 'Google',
@@ -31,10 +36,6 @@ const oauthProviders = [
     key: 'apple',
     label: 'Apple',
     image: '/apple.svg'
-  },
-  {
-    key: 'akifast',
-    localeKey: 'auth.login.form.quick_login'
   }
 ];
 
@@ -93,7 +94,10 @@ export const Login = () => {
       }
 
       const fieldErrors = errors.find((error) => error.type === 'field_errors')
-        ?.data as { name: string; value: string[] }[];
+        ?.data as {
+        name: string;
+        value: string[];
+      }[];
       const nonFieldErrors = errors.find(
         (error) => error.type === 'non_field_errors'
       )?.data as string[];
@@ -227,6 +231,13 @@ export const Login = () => {
             {provider.localeKey ? t(provider.localeKey) : provider.label}
           </Button>
         ))}
+        <PluginModule
+          component={Component.AkifastQuickLoginButton}
+          props={{
+            isCaptchaVisible,
+            captchaValidated
+          }}
+        />
       </div>
     </section>
   );

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

@@ -123,6 +123,40 @@ export default function ProductInfo({ data }: ProductPageProps) {
     }
   };
 
+  const checkoutProviderProps = {
+    product: data.product,
+    clearBasket: true,
+    addBeforeClick: variantsSelectionCheck,
+    openMiniBasket: false,
+    className: clsx([
+      'py-2.5',
+      'bg-black',
+      'relative',
+      'hover:bg-black',
+      'before:content-[""]',
+      'before:w-6',
+      'before:h-6',
+      'before:bg-white',
+      'before:absolute',
+      'before:rounded-r-[18px]',
+      'before:left-0',
+      'after:content-[""]',
+      'after:absolute',
+      'after:w-3',
+      'after:h-3',
+      '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(', ')}`
+          )
+      )
+  };
+
   return (
     <>
       <div
@@ -181,42 +215,18 @@ export default function ProductInfo({ data }: ProductPageProps) {
       </Button>
 
       <PluginModule
-        component={Component.OneClickCheckoutButtons}
+        component={Component.AkifastCheckoutButton}
         props={{
-          product: data.product,
-          clearBasket: true,
-          addBeforeClick: variantsSelectionCheck,
-          openMiniBasket: false,
-          className: clsx([
-            'py-2.5',
-            'bg-black',
-            'relative',
-            'hover:bg-black',
-            'before:content-[""]',
-            'before:w-6',
-            'before:h-6',
-            'before:bg-white',
-            'before:absolute',
-            'before:rounded-r-[18px]',
-            'before:left-0',
-            'after:content-[""]',
-            'after:absolute',
-            'after:w-3',
-            'after:h-3',
-            '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(', ')}`
-                )
-            )
+          ...checkoutProviderProps,
+          isPdp: true
         }}
       />
 
+      <PluginModule
+        component={Component.OneClickCheckoutButtons}
+        props={checkoutProviderProps}
+      />
+
       <MiscButtons
         productName={data.product.name}
         productPk={data.product.pk}

package/app-template/tsconfig.json

@@ -3,19 +3,7 @@
   "display": "Default",
   "compilerOptions": {
     "baseUrl": "./src",
-    "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
-      "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
-      ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
-      "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
-      ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
-    },
+    "paths": { "@theme/*": ["./*"] },
     "allowSyntheticDefaultImports": true,
     "composite": false,
     "declaration": true,
@@ -52,5 +40,7 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": ["node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }

package/commands/create.ts

@@ -3,7 +3,6 @@ import * as fs from 'fs';
 import * as readline from 'readline';
 import { slugify } from '../utils';
 
-const { execSync } = require('child_process');
 const loadingSpinner = require('loading-spinner');
 
 interface Question {
@@ -140,8 +139,7 @@ export default async (): Promise<void> => {
   const answers = await getAnswers();
   const brandName =
     answers.brandName === '.' ? path.basename(workingDir) : answers.brandName;
-  const projectDir = answers.brandName === '.' ? workingDir : path.resolve(workingDir, slugify(brandName));
-  const relativeProjectDir = answers.brandName === '.' ? '.' : slugify(brandName);
+  const projectDir = path.resolve(workingDir, slugify(brandName));
 
   if (!fs.existsSync(projectDir)) {
     fs.mkdirSync(projectDir, { recursive: true });
@@ -174,34 +172,12 @@ export default async (): Promise<void> => {
     name: slugify(brandName)
   });
 
-
-  console.log('\x1b[34m%s\x1b[0m', '\n🚀 Installing packages...\n');
-
-  execSync(`cd ${relativeProjectDir} && yarn install`, { stdio: 'ignore' });
-
   loadingSpinner.stop();
 
-  const successMessage = `
-✨ ${brandName} project is ready at \x1b[4m${projectDir}\x1b[0m
-
-Within the directory, the following commands are available:
-
-  \x1b[35m$ yarn dev\x1b[0m
-    \x1b[32mLaunches the development server.\x1b[0m
-
-  \x1b[35m$ yarn build\x1b[0m
-    \x1b[32mCompiles the app into static files for production.\x1b[0m
-
-  \x1b[35m$ yarn start\x1b[0m
-    \x1b[32mRuns the production server.\x1b[0m
-`;
-
-  const getStartedMessage = answers.brandName === '.'
-    ? 'To get started, you can type:\n\n  \x1b[35m$ yarn dev\x1b[0m\n'
-    : `To get started, you can type:\n\n  \x1b[35m$ cd ${relativeProjectDir}\x1b[0m\n  \x1b[35m$ yarn dev\x1b[0m\n`;
+  console.log(
+    '\x1b[32m%s\x1b[0m',
+    `\n ✓ ${answers.brandName} project is ready.\n`
+  );
 
-  console.log('\x1b[32m%s\x1b[0m', successMessage);
-  console.log('\x1b[36m%s\x1b[0m', getStartedMessage);
-  console.log('\x1b[33m%s\x1b[0m', 'Project setup is complete\n');
   console.log('\x1b[33m%s\x1b[0m', 'Project Zero - Akinon\n');
 };