@akinon/projectzero 1.59.0 → 1.60.0-rc.6

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.59.0",
+  "version": "1.60.0-rc.6",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,26 +22,25 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.59.0",
-    "@akinon/pz-akifast": "1.59.0",
-    "@akinon/pz-b2b": "1.59.0",
-    "@akinon/pz-basket-gift-pack": "1.59.0",
-    "@akinon/pz-bkm": "1.59.0",
-    "@akinon/pz-checkout-gift-pack": "1.59.0",
-    "@akinon/pz-click-collect": "1.59.0",
-    "@akinon/pz-credit-payment": "1.59.0",
-    "@akinon/pz-gpay": "1.59.0",
-    "@akinon/pz-masterpass": "1.59.0",
-    "@akinon/pz-one-click-checkout": "1.59.0",
-    "@akinon/pz-otp": "1.59.0",
-    "@akinon/pz-pay-on-delivery": "1.59.0",
-    "@akinon/pz-tabby-extension": "1.59.0",
+    "@akinon/next": "1.60.0-rc.6",
+    "@akinon/pz-akifast": "1.60.0-rc.6",
+    "@akinon/pz-b2b": "1.60.0-rc.6",
+    "@akinon/pz-basket-gift-pack": "1.60.0-rc.6",
+    "@akinon/pz-bkm": "1.60.0-rc.6",
+    "@akinon/pz-checkout-gift-pack": "1.60.0-rc.6",
+    "@akinon/pz-click-collect": "1.60.0-rc.6",
+    "@akinon/pz-credit-payment": "1.60.0-rc.6",
+    "@akinon/pz-gpay": "1.60.0-rc.6",
+    "@akinon/pz-masterpass": "1.60.0-rc.6",
+    "@akinon/pz-one-click-checkout": "1.60.0-rc.6",
+    "@akinon/pz-otp": "1.60.0-rc.6",
+    "@akinon/pz-pay-on-delivery": "1.60.0-rc.6",
+    "@akinon/pz-tabby-extension": "1.60.0-rc.6",
     "@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",
@@ -60,7 +59,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.59.0",
+    "@akinon/eslint-plugin-projectzero": "1.60.0-rc.6",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -80,14 +79,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",

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/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);
@@ -36,6 +47,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -78,14 +90,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/pagination.tsx

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

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/plugins.js

@@ -12,5 +12,6 @@ module.exports = [
   'pz-masterpass',
   'pz-b2b',
   'pz-akifast',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-saved-card'
 ];

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/types/index.ts

@@ -41,6 +41,7 @@ export interface CreditCardForm {
   card_cvv: string;
   installment: number;
   agreement: boolean;
+  save?: boolean;
 }
 
 export interface PriceProps {

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

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

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>
       ))}

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

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