@akinon/projectzero 1.37.0-rc.8 → 1.37.0

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/completed/[token]/page.tsx

@@ -182,25 +182,21 @@ const CheckoutCompleted = ({
                     }}
                   >
                     {data.order.orderitem_set.map((item) => (
-                      <div
-                        key={`order-item-${item.id}`}
-                        className="flex justify-between gap-x-4 w-full"
-                      >
-                        <Link
-                          className="flex justify-between gap-x-4 flex-1 items-center transition-all text-xs text-black-800 hover:text-secondary"
-                          href={item.product.absolute_url}
-                          passHref
-                        >
+                      <div key={`order-item-${item.id}`} className="flex">
+                        <Link href={item.product.absolute_url} passHref>
                           <Image
                             src={item.product.image}
                             alt={item.product.name}
                             width={64}
                             height={96}
                           />
-
-                          <span>{item.product.name}</span>
                         </Link>
-                        <div className="flex justify-end items-center">
+                        <div className="flex justify-between flex-1 items-center ml-4">
+                          <>
+                            <div className="text-xs text-black-800 transition-all w-full hover:text-secondary">
+                              {item.product.name}
+                            </div>
+                          </>
                           <div>
                             {item.retail_price !== item.price && (
                               <div className="text-black-800 line-through text-xs min-w-max sm:text-sm">

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 = false, error, ...rest } = props;
+  const { children, checked, 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}
-          defaultChecked={checked}
+          checked={checked ?? false}
           className="w-4 h-4 shrink-0"
         />
         {children && <span className="ml-2">{children}</span>}

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

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

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/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/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/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');
 };

package/dist/commands/create.js

@@ -39,7 +39,6 @@ const path_1 = __importDefault(require("path"));
 const fs = __importStar(require("fs"));
 const readline = __importStar(require("readline"));
 const utils_1 = require("../utils");
-const { execSync } = require('child_process');
 const loadingSpinner = require('loading-spinner');
 const workingDir = path_1.default.resolve(process.cwd());
 const rl = readline.createInterface({
@@ -132,8 +131,7 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
     }
     const answers = yield getAnswers();
     const brandName = answers.brandName === '.' ? path_1.default.basename(workingDir) : answers.brandName;
-    const projectDir = answers.brandName === '.' ? workingDir : path_1.default.resolve(workingDir, (0, utils_1.slugify)(brandName));
-    const relativeProjectDir = answers.brandName === '.' ? '.' : (0, utils_1.slugify)(brandName);
+    const projectDir = path_1.default.resolve(workingDir, (0, utils_1.slugify)(brandName));
     if (!fs.existsSync(projectDir)) {
         fs.mkdirSync(projectDir, { recursive: true });
     }
@@ -155,28 +153,7 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
     updateFileContents(path_1.default.join(projectDir, 'package.json'), {
         name: (0, utils_1.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', successMessage);
-    console.log('\x1b[36m%s\x1b[0m', getStartedMessage);
-    console.log('\x1b[33m%s\x1b[0m', 'Project setup is complete\n');
+    console.log('\x1b[32m%s\x1b[0m', `\n ✓ ${answers.brandName} project is ready.\n`);
     console.log('\x1b[33m%s\x1b[0m', 'Project Zero - Akinon\n');
 });

package/package.json

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

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

@@ -1,8 +0,0 @@
-import Page, {
-  dynamic,
-  revalidate,
-  generateMetadata
-} from '@akinon/next/routes/pretty-url';
-
-export { dynamic, revalidate, generateMetadata };
-export default Page;