@akinon/projectzero 1.44.0 → 1.45.0-rc.1

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.44.0",
+  "version": "1.45.0-rc.1",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,27 +22,26 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.44.0",
-    "@akinon/pz-akifast": "1.44.0",
-    "@akinon/pz-b2b": "1.44.0",
-    "@akinon/pz-basket-gift-pack": "1.44.0",
-    "@akinon/pz-bkm": "1.44.0",
-    "@akinon/pz-checkout-gift-pack": "1.44.0",
-    "@akinon/pz-click-collect": "1.44.0",
-    "@akinon/pz-credit-payment": "1.44.0",
-    "@akinon/pz-gpay": "1.44.0",
-    "@akinon/pz-masterpass": "1.44.0",
-    "@akinon/pz-one-click-checkout": "1.44.0",
-    "@akinon/pz-otp": "1.44.0",
-    "@akinon/pz-pay-on-delivery": "1.44.0",
+    "@akinon/next": "1.45.0-rc.1",
+    "@akinon/pz-akifast": "1.45.0-rc.1",
+    "@akinon/pz-b2b": "1.45.0-rc.1",
+    "@akinon/pz-basket-gift-pack": "1.45.0-rc.1",
+    "@akinon/pz-bkm": "1.45.0-rc.1",
+    "@akinon/pz-checkout-gift-pack": "1.45.0-rc.1",
+    "@akinon/pz-click-collect": "1.45.0-rc.1",
+    "@akinon/pz-credit-payment": "1.45.0-rc.1",
+    "@akinon/pz-gpay": "1.45.0-rc.1",
+    "@akinon/pz-masterpass": "1.45.0-rc.1",
+    "@akinon/pz-one-click-checkout": "1.45.0-rc.1",
+    "@akinon/pz-otp": "1.45.0-rc.1",
+    "@akinon/pz-pay-on-delivery": "1.45.0-rc.1",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "7.105.0",
+    "@sentry/nextjs": "7.116.0",
     "dayjs": "1.11.5",
-    "eslint-config-next": "14.2.2",
     "lossless-json": "2.0.5",
-    "next": "14.2.2",
+    "next": "14.2.5",
     "next-auth": "4.24.5",
     "next-pwa": "5.6.0",
     "pino": "8.11.0",
@@ -59,7 +58,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.44.0",
+    "@akinon/eslint-plugin-projectzero": "1.45.0-rc.1",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -79,14 +78,14 @@
     "clsx": "1.1.1",
     "currency-symbol-map": "5.1.0",
     "eslint": "8.14.0",
-    "eslint-config-next": "14.0.3",
+    "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "8.5.0",
     "husky": "8.0.0",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.3.0",
     "lint-staged": "13.1.0",
     "prettier": "2.6.2",
-    "react-number-format": "4.9.3",
+    "react-number-format": "5.3.4",
     "sass": "1.49.9",
     "semantic-release": "19.0.5",
     "server-only": "0.0.1",
@@ -95,10 +94,13 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "3.4.0",
+    "tailwindcss": "3.4.5",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.2.2"
   },
+  "resolutions": {
+    "**/postcss": "8.4.31"
+  },
   "packageManager": "yarn@1.22.17"
 }

package/app-template/public/locales/en/account.json

@@ -286,11 +286,11 @@
       "empty_coupon": "You don't have any coupons"
     },
     "title": {
-      "campaings": {
+      "campaigns": {
         "active": "Active Campaigns",
-        "to_be_active": "Campaings to be Active",
-        "expired": "Expired Campaings",
-        "used": "Used Campaings"
+        "to_be_active": "Campaigns to be Active",
+        "expired": "Expired Campaigns",
+        "used": "Used Campaigns"
       },
       "coupons": {
         "active": "Active Coupons",

package/app-template/public/locales/tr/account.json

@@ -286,7 +286,7 @@
       "empty_coupon": "Herhangi bir kuponunuz yok"
     },
     "title": {
-      "campaings": {
+      "campaigns": {
         "active": "Aktif Kampanyalar",
         "to_be_active": "Aktif Olacak Kampanyalar",
         "expired": "Süresi Dolmuş Kampanyalar",

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

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

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

@@ -17,7 +17,7 @@ export default function Page() {
   const [addAddress] = useAddAddressMutation();
 
   const onSubmit = async (data) => {
-    await addAddress(data);
+    await addAddress({ ...data, invalidateTag: 'Addresses' });
     setIsNewAddressModalOpen(false);
   };
 

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

@@ -51,7 +51,7 @@ export default function Page() {
           {basketOffersLoading && <LoaderSpinner className="mb-8" />}
           {basketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaings.active')}
+              mainTitle={t('account.my_vouchers.title.campaigns.active')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -68,7 +68,7 @@ export default function Page() {
           {futureBasketOffersLoading && <LoaderSpinner className="mb-8" />}
           {futureBasketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaings.to_be_active')}
+              mainTitle={t('account.my_vouchers.title.campaigns.to_be_active')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -85,7 +85,7 @@ export default function Page() {
           {expiredBasketOffersLoading && <LoaderSpinner className="mb-8" />}
           {expiredBasketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaings.expired')}
+              mainTitle={t('account.my_vouchers.title.campaigns.expired')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -102,7 +102,7 @@ export default function Page() {
           {discountItemsLoading && <LoaderSpinner className="mb-8" />}
           {discountItemsSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaings.used')}
+              mainTitle={t('account.my_vouchers.title.campaigns.used')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),

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

@@ -247,6 +247,7 @@ export default function Page() {
             className="mb-5"
             required
           />
+
           <div className="mb-5">
             <Input
               label={t('account.my_profile.form.phone.placeholder')}

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

@@ -4,11 +4,14 @@ import { PageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
 
 async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
-  const { data } = await getCategoryData({ pk: params.pk, searchParams });
+  const { data, breadcrumbData } = await getCategoryData({
+    pk: params.pk,
+    searchParams
+  });
 
   return (
     <>
-      <CategoryLayout data={data} />
+      <CategoryLayout data={data} breadcrumbData={breadcrumbData} />
     </>
   );
 }

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

@@ -182,21 +182,25 @@ const CheckoutCompleted = ({
                     }}
                   >
                     {data.order.orderitem_set.map((item) => (
-                      <div key={`order-item-${item.id}`} className="flex">
-                        <Link href={item.product.absolute_url} passHref>
+                      <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
+                        >
                           <Image
                             src={item.product.image}
                             alt={item.product.name}
                             width={64}
                             height={96}
                           />
+
+                          <span>{item.product.name}</span>
                         </Link>
-                        <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 className="flex justify-end items-center">
                           <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, 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/price.tsx

@@ -1,10 +1,11 @@
 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';
+import Settings from '@theme/settings';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -37,15 +38,19 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
     [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
   );
 
+  const currentCurrencyDecimalScale = Settings.localization.currencies.find(
+    (currency) => currency.code === currencyCode_
+  ).decimalScale;
+
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={decimalScale}
+      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

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

@@ -7,11 +7,13 @@ import { WIDGET_TYPE } from '@theme/types';
 export interface CategoryState {
   facets: Facet[];
   selectedFacets: Facet[];
+  isMenuOpen: boolean;
 }
 
 const initialState: CategoryState = {
   facets: [],
-  selectedFacets: []
+  selectedFacets: [],
+  isMenuOpen: false
 };
 
 const categorySlice = createSlice({
@@ -24,6 +26,9 @@ const categorySlice = createSlice({
     setSelectedFacets(state, action) {
       state.selectedFacets = action.payload;
     },
+    setMenuOpen(state, action) {
+      state.isMenuOpen = action.payload;
+    },
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
@@ -81,6 +86,7 @@ const categorySlice = createSlice({
 export const {
   setFacets,
   setSelectedFacets,
+  setMenuOpen,
   toggleFacet,
   removeCategoryFacet,
   resetSelectedFacets

package/app-template/src/settings.js

@@ -1,6 +1,10 @@
 const { LocaleUrlStrategy } = require('@akinon/next/localization');
 const { ROUTES } = require('@theme/routes');
 
+/* IMPORTANT *
+ * In order to use one locale in the locales array and hide the default locale in the URL, you need to set the localeUrlStrategy to LocaleUrlStrategy.ShowAllLocales.
+ */
+
 const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
 
 /** @type {import('@akinon/next/types').Settings} */
@@ -11,6 +15,7 @@ module.exports = {
     { translationKey: 'size', key: 'size' }
   ],
   localization: {
+    // If there is one locale in the locales array, the default locale will be hidden in the URL.
     locales: [
       {
         label: 'EN',
@@ -38,7 +43,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale, // If there is one locale in the locales array, the default locale will be hidden in the URL and localeUrlStrategy should be set to LocaleUrlStrategy.ShowAllLocales.
     redirectToDefaultLocale: true,
     defaultCurrencyCode: 'usd'
   },

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

@@ -27,13 +27,13 @@ export const AddressCard = (props: Props) => {
   const [isRemoveAddressModalOpen, setRemoveAddressModalOpen] = useState(false);
 
   const onSubmit = async (data) => {
-    await editAddress(data);
+    await editAddress({ ...data, invalidateTag: 'Addresses' });
     setIsEditAddressModalOpen(false);
   };
 
   const handleRemoveAddress = async (pk: number) => {
     try {
-      await removeAddress(pk)
+      await removeAddress({ id: pk, invalidateTag: 'Addresses' })
         .unwrap()
         .then(() => setRemoveAddressModalOpen(false))
         .catch((err) => console.error(err));

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

@@ -31,7 +31,7 @@ interface Props {
   onSubmit: (data: any) => void;
 }
 
-const makeAddressFormSchema = (t, { phoneNumberLength }) =>
+const makeAddressFormSchema = (t, { phoneNumberLength, postCodeLength }) =>
   yup.object().shape({
     title: yup.string().required(t('account.address_book.form.error.required')),
     first_name: yup
@@ -65,8 +65,9 @@ const makeAddressFormSchema = (t, { phoneNumberLength }) =>
       .max(255, t('account.address_book.form.error.line_max')),
     postcode: yup
       .string()
-      .min(5, t('account.address_book.form.error.postcode_min'))
-      .max(5, t('account.address_book.form.error.postcode_max'))
+      .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'))
       .required(t('account.address_book.form.error.required')),
     company_name: yup.string().nullable(),
     tax_no: yup.string().nullable(),
@@ -80,7 +81,8 @@ 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
+    phoneNumberLength: config.user_phone_format.length,
+    postCodeLength: config.user_post_code_format.length
   });
   const {
     register,
@@ -181,12 +183,22 @@ export const AddressForm = (props: Props) => {
     if (data && country) {
       reset({
         ...data,
-        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
+        is_corporate: String(data.is_corporate)
       });
     }
   }, [data, country, reset]);
 
+  useEffect(() => {
+    if (selectedFormType !== AddressType.company) {
+      reset({
+        ...watch(),
+        company_name: '',
+        tax_office: '',
+        tax_no: ''
+      });
+    }
+  }, [selectedFormType, reset, watch]);
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -322,12 +334,15 @@ 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,
-  Link
+  Select
 } from '@theme/components';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
@@ -45,7 +45,8 @@ const contactFormSchema = (t) =>
       .when('subject', {
         is: (value) => value === '2',
         then: yup.string().required(t('account.contact.form.error.required'))
-      })
+      }),
+    file: yup.mixed()
   });
 
 const ContactForm = () => {
@@ -110,8 +111,18 @@ const ContactForm = () => {
     resolver: yupResolver(contactFormSchema(t))
   });
 
-  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
-    sendContact(data);
+  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 handleChange = (e) => {
@@ -234,6 +245,7 @@ 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 && (
@@ -242,7 +254,12 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput className="w-full mb-5" title="test" />
+            <FileInput
+              name="file"
+              title="file"
+              className="w-full mb-5"
+              {...register('file')}
+            />
             <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
-              ? 'pointer-events-none hover:cursor-wait' // TODO: Cursors not working fix!
-              : 'hove:cursor-pointer'
+              ? 'hover:cursor-wait'
+              : 'hover:cursor-pointer'
           )}
           data-testid="favorites-remove"
         />

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/breadcrumb.tsx

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