@akinon/projectzero 1.55.0-rc.0 → 1.55.0

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.55.0-rc.0",
+  "version": "1.55.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,24 +22,25 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.55.0-rc.0",
-    "@akinon/pz-akifast": "1.55.0-rc.0",
-    "@akinon/pz-b2b": "1.55.0-rc.0",
-    "@akinon/pz-basket-gift-pack": "1.55.0-rc.0",
-    "@akinon/pz-bkm": "1.55.0-rc.0",
-    "@akinon/pz-checkout-gift-pack": "1.55.0-rc.0",
-    "@akinon/pz-click-collect": "1.55.0-rc.0",
-    "@akinon/pz-credit-payment": "1.55.0-rc.0",
-    "@akinon/pz-gpay": "1.55.0-rc.0",
-    "@akinon/pz-masterpass": "1.55.0-rc.0",
-    "@akinon/pz-one-click-checkout": "1.55.0-rc.0",
-    "@akinon/pz-otp": "1.55.0-rc.0",
-    "@akinon/pz-pay-on-delivery": "1.55.0-rc.0",
+    "@akinon/next": "1.55.0",
+    "@akinon/pz-akifast": "1.55.0",
+    "@akinon/pz-b2b": "1.55.0",
+    "@akinon/pz-basket-gift-pack": "1.55.0",
+    "@akinon/pz-bkm": "1.55.0",
+    "@akinon/pz-checkout-gift-pack": "1.55.0",
+    "@akinon/pz-click-collect": "1.55.0",
+    "@akinon/pz-credit-payment": "1.55.0",
+    "@akinon/pz-gpay": "1.55.0",
+    "@akinon/pz-masterpass": "1.55.0",
+    "@akinon/pz-one-click-checkout": "1.55.0",
+    "@akinon/pz-otp": "1.55.0",
+    "@akinon/pz-pay-on-delivery": "1.55.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
     "@sentry/nextjs": "7.116.0",
     "dayjs": "1.11.5",
+    "eslint-config-next": "14.2.2",
     "lossless-json": "2.0.5",
     "next": "14.2.5",
     "next-auth": "4.24.5",
@@ -58,7 +59,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.55.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.55.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -78,14 +79,14 @@
     "clsx": "1.1.1",
     "currency-symbol-map": "5.1.0",
     "eslint": "8.14.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "14.0.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": "5.3.4",
+    "react-number-format": "4.9.3",
     "sass": "1.49.9",
     "semantic-release": "19.0.5",
     "server-only": "0.0.1",

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

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

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

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

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.campaigns.active')}
+              mainTitle={t('account.my_vouchers.title.campaings.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.campaigns.to_be_active')}
+              mainTitle={t('account.my_vouchers.title.campaings.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.campaigns.expired')}
+              mainTitle={t('account.my_vouchers.title.campaings.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.campaigns.used')}
+              mainTitle={t('account.my_vouchers.title.campaings.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,7 +247,6 @@ 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,14 +4,11 @@ import { PageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
 
 async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
-  const { data, breadcrumbData } = await getCategoryData({
-    pk: params.pk,
-    searchParams
-  });
+  const { data } = await getCategoryData({ pk: params.pk, searchParams });
 
   return (
     <>
-      <CategoryLayout data={data} breadcrumbData={breadcrumbData} />
+      <CategoryLayout data={data} />
     </>
   );
 }

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

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
+import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { PaginationProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
-import { Button } from '@theme/components';
+import { Link, Button } from '@theme/components';
 import usePagination from '@akinon/next/hooks/use-pagination';
 import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';
@@ -92,7 +92,9 @@ export const Pagination = (props: PaginationProps) => {
     }
   }, [numberOfPages, page, pageList, threshold]);
 
-  const handleClick = (url: string) => {
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
+    e.preventDefault();
+
     const newUrl = new URL(url, window.location.origin);
     const page = newUrl.searchParams.get('page');
 
@@ -127,7 +129,7 @@ export const Pagination = (props: PaginationProps) => {
     if (type === 'list') {
       createListItems();
     }
-  }, [createListItems, type]);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (total && total !== paginationTotal) {
@@ -198,8 +200,9 @@ export const Pagination = (props: PaginationProps) => {
         >
           {prev && currentPage !== 1 && (
             <li>
-              <button
-                onClick={() => handleClick(prev)}
+              <Link
+                onClick={(e) => handleClick(e, prev)}
+                href={prev}
                 className={twMerge(
                   'flex cursor-pointer text-sm px-2',
                   prevClassName
@@ -209,15 +212,16 @@ export const Pagination = (props: PaginationProps) => {
                 <span className="hidden lg:inline-block ms-4">
                   {t('category.pagination.previous')}
                 </span>
-              </button>
+              </Link>
             </li>
           )}
 
           {paginationItems.map((item, i) => (
             <li key={i}>
               {item?.url != '#' ? (
-                <button
-                  onClick={() => handleClick(item.url)}
+                <Link
+                  onClick={(e) => handleClick(e, item.url)}
+                  href={item.url}
                   className={twMerge(
                     clsx(
                       'text-xs px-2 cursor-pointer',
@@ -230,7 +234,7 @@ export const Pagination = (props: PaginationProps) => {
                   )}
                 >
                   {item?.page}
-                </button>
+                </Link>
               ) : (
                 <span className="cursor-default text-xs flex items-center justify-center">
                   {item?.page}
@@ -241,8 +245,9 @@ export const Pagination = (props: PaginationProps) => {
 
           {showNext && (
             <li>
-              <button
-                onClick={() => handleClick(next)}
+              <Link
+                onClick={(e) => handleClick(e, next)}
+                href={next}
                 className={twMerge(
                   'flex cursor-pointer text-xs px-2',
                   nextClassName
@@ -252,7 +257,7 @@ export const Pagination = (props: PaginationProps) => {
                   {t('category.pagination.next')}
                 </span>
                 <span>&gt;</span>
-              </button>
+              </Link>
             </li>
           )}
         </ul>

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

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

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

@@ -7,13 +7,11 @@ import { WIDGET_TYPE } from '@theme/types';
 export interface CategoryState {
   facets: Facet[];
   selectedFacets: Facet[];
-  isMenuOpen: boolean;
 }
 
 const initialState: CategoryState = {
   facets: [],
-  selectedFacets: [],
-  isMenuOpen: false
+  selectedFacets: []
 };
 
 const categorySlice = createSlice({
@@ -26,9 +24,6 @@ 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));
 
@@ -86,7 +81,6 @@ const categorySlice = createSlice({
 export const {
   setFacets,
   setSelectedFacets,
-  setMenuOpen,
   toggleFacet,
   removeCategoryFacet,
   resetSelectedFacets

package/app-template/src/settings.js

@@ -1,10 +1,6 @@
 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} */
@@ -15,7 +11,6 @@ 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',
@@ -43,7 +38,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    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.
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
     redirectToDefaultLocale: true,
     defaultCurrencyCode: 'usd'
   },

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

@@ -183,22 +183,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)}

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/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]);