@akinon/projectzero 1.73.0-rc.8 → 1.73.0

package/app-template/next.config.mjs

@@ -26,8 +26,7 @@ const withPwaConfig = withPWA({
 
 const sentryConfig = {
   silent: true,
-  dryRun: !process.env.SENTRY_DSN,
-  hideSourceMaps: true
+  dryRun: !process.env.SENTRY_DSN
 };
 
 const enhancedConfig = withPzConfig(nextConfig);

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.73.0-rc.8",
+  "version": "1.73.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,25 +22,25 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.73.0-rc.8",
-    "@akinon/pz-akifast": "1.73.0-rc.8",
-    "@akinon/pz-b2b": "1.73.0-rc.8",
-    "@akinon/pz-basket-gift-pack": "1.73.0-rc.8",
-    "@akinon/pz-bkm": "1.73.0-rc.8",
-    "@akinon/pz-checkout-gift-pack": "1.73.0-rc.8",
-    "@akinon/pz-click-collect": "1.73.0-rc.8",
-    "@akinon/pz-credit-payment": "1.73.0-rc.8",
-    "@akinon/pz-gpay": "1.73.0-rc.8",
-    "@akinon/pz-masterpass": "1.73.0-rc.8",
-    "@akinon/pz-one-click-checkout": "1.73.0-rc.8",
-    "@akinon/pz-otp": "1.73.0-rc.8",
-    "@akinon/pz-pay-on-delivery": "1.73.0-rc.8",
-    "@akinon/pz-saved-card": "1.73.0-rc.8",
-    "@akinon/pz-tabby-extension": "1.73.0-rc.8",
+    "@akinon/next": "1.73.0",
+    "@akinon/pz-akifast": "1.73.0",
+    "@akinon/pz-b2b": "1.73.0",
+    "@akinon/pz-basket-gift-pack": "1.73.0",
+    "@akinon/pz-bkm": "1.73.0",
+    "@akinon/pz-checkout-gift-pack": "1.73.0",
+    "@akinon/pz-click-collect": "1.73.0",
+    "@akinon/pz-credit-payment": "1.73.0",
+    "@akinon/pz-gpay": "1.73.0",
+    "@akinon/pz-masterpass": "1.73.0",
+    "@akinon/pz-one-click-checkout": "1.73.0",
+    "@akinon/pz-otp": "1.73.0",
+    "@akinon/pz-pay-on-delivery": "1.73.0",
+    "@akinon/pz-saved-card": "1.73.0",
+    "@akinon/pz-tabby-extension": "1.73.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "8.35.0",
+    "@sentry/nextjs": "7.116.0",
     "dayjs": "1.11.5",
     "lossless-json": "2.0.5",
     "next": "14.2.5",
@@ -60,7 +60,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.73.0-rc.8",
+    "@akinon/eslint-plugin-projectzero": "1.73.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -75,7 +75,7 @@
     "@types/react-dom": "18.2.12",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.13",
     "client-only": "0.0.1",
     "clsx": "1.1.1",
     "currency-symbol-map": "5.1.0",
@@ -96,7 +96,7 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "3.4.14",
+    "tailwindcss": "3.4.12",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.2.2"

package/app-template/sentry.edge.config.ts

@@ -0,0 +1,3 @@
+import { initSentry } from '@akinon/next/sentry';
+
+initSentry('Edge');

package/app-template/sentry.server.config.ts

@@ -0,0 +1,3 @@
+import { initSentry } from '@akinon/next/sentry';
+
+initSentry('Server');

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

@@ -1,14 +1,87 @@
-import { BasketContent } from '@theme/views/basket/basket-content';
-import { getBasketData } from '@akinon/next/data/server/basket';
+'use client';
+
+import { useEffect } from 'react';
+import { ROUTES } from '@theme/routes';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { pushCartView } from '@theme/utils/gtm';
+import { Button, LoaderSpinner, Link } from '@theme/components';
+import { BasketItem, Summary } from '@theme/views/basket';
+import { useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import settings from '@theme/settings';
 
-export default async function Page() {
-  const { basket } = await getBasketData();
+export default function Page() {
+  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const { t } = useLocalization();
+  const multiBasket = settings.plugins?.multiBasket ?? false;
+
+  useEffect(() => {
+    if (isSuccess) {
+      const products = basket.basketitem_set.map((basketItem) => ({
+        ...basketItem.product
+      }));
+      pushCartView(products);
+    }
+  }, [basket, isSuccess]);
+
+  return (
+    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
+      {isLoading && (
+        <div className="flex justify-center w-full">
+          <LoaderSpinner />
+        </div>
+      )}
+      {isSuccess &&
+        (basket && basket.basketitem_set && basket.basketitem_set.length > 0 ? (
+          <>
+            <div className="flex-1 xl:mr-16">
+              <div className="flex items-center justify-between py-2 border-b border-gray-200 lg:py-3">
+                <h2 className="text-xl lg:text-2xl font-light">
+                  {t('basket.my_cart')}
+                </h2>
+                <Link
+                  href={ROUTES.HOME}
+                  className="text-xs hover:text-secondary-500"
+                >
+                  {t('basket.back_to_shopping')}
+                </Link>
+              </div>
+              <ul>
+                {multiBasket ? (
+                  <PluginModule
+                    component={Component.MultiBasket}
+                    props={{ BasketItem }}
+                  />
+                ) : (
+                  basket.basketitem_set.map((basketItem, index) => (
+                    <BasketItem basketItem={basketItem} key={index} />
+                  ))
+                )}
+              </ul>
+            </div>
+            <Summary basket={basket} />
+          </>
+        ) : (
+          <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
+            <h1
+              className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
+              data-testid="basket-empty"
+            >
+              {t('basket.empty.title')}
+            </h1>
 
-  const multiBasket: boolean =
-    typeof settings.plugins?.multiBasket === 'boolean'
-      ? settings.plugins.multiBasket
-      : false;
+            <div className="w-full text-sm text-black-800 text-center my-4 mb-2 sm:text-base">
+              <p>{t('basket.empty.content_first')}</p>
+              <p>{t('basket.empty.content_second')}.</p>
+            </div>
 
-  return <BasketContent initialBasket={basket} multiBasket={multiBasket} />;
+            <Link href={ROUTES.HOME} passHref>
+              <Button className="px-10 mt-2" appearance="filled">
+                {t('basket.empty.button')}
+              </Button>
+            </Link>
+          </div>
+        ))}
+    </div>
+  );
 }

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, LoaderSpinner } 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';
@@ -25,8 +25,7 @@ export const Pagination = (props: PaginationProps) => {
     type = 'list',
     onPageChange,
     direction,
-    render,
-    isLoading
+    render
   } = props;
 
   const pagination = usePagination(total, limit, currentPage, numberOfPages);
@@ -93,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');
 
@@ -120,13 +117,6 @@ export const Pagination = (props: PaginationProps) => {
     onPageChange(changingPage);
   };
 
-  useEffect(() => {
-    if (type === 'infinite' && page === 1) {
-      setPrevPage(1);
-      setNextPage(1);
-    }
-  }, [page]);
-
   useEffect(() => {
     if (inView) {
       handlePageChange();
@@ -137,7 +127,7 @@ export const Pagination = (props: PaginationProps) => {
     if (type === 'list') {
       createListItems();
     }
-  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [createListItems, type]);
 
   useEffect(() => {
     if (total && total !== paginationTotal) {
@@ -157,23 +147,21 @@ export const Pagination = (props: PaginationProps) => {
 
   return direction === 'prev' && type !== 'list' ? (
     <>
-      <div className="flex items-center justify-center">
-        <Button
-          className={twMerge('px-5', moreButtonClassName)}
-          onClick={() => handlePageChange()}
-        >
-          {isLoading ? (
-            <LoaderSpinner className="h-4 w-4" />
-          ) : (
-            t('category.pagination.load_previous_page')
-          )}
-        </Button>
-      </div>
+      {Number(prevPage) !== 1 && (
+        <div className="flex justify-center items-center">
+          <Button
+            className={twMerge('px-5', moreButtonClassName)}
+            onClick={() => handlePageChange()}
+          >
+            {t('category.pagination.load_previous_page')}
+          </Button>
+        </div>
+      )}
     </>
   ) : (
     <>
       {type === 'more' && (
-        <div className="flex items-center justify-center">
+        <div className="flex justify-center items-center">
           <Button
             className={twMerge(
               'px-5',
@@ -185,11 +173,7 @@ export const Pagination = (props: PaginationProps) => {
             onClick={() => handlePageChange()}
             disabled={Number(nextPage) === Number(last)}
           >
-            {isLoading ? (
-              <LoaderSpinner className="h-4 w-4" />
-            ) : (
-              t('category.pagination.more')
-            )}
+            {t('category.pagination.more')}
           </Button>
         </div>
       )}
@@ -199,9 +183,8 @@ export const Pagination = (props: PaginationProps) => {
       )}
 
       {(type === 'infinite' || type === 'more') &&
-        Number(nextPage) === last &&
-        !isLoading && (
-          <p className="mt-8 text-center">
+        Number(nextPage) === last && (
+          <p className="text-center mt-8">
             {t('category.pagination.shown_items')}
           </p>
         )}
@@ -209,37 +192,35 @@ export const Pagination = (props: PaginationProps) => {
       {type === 'list' && (
         <ul
           className={twMerge(
-            'mb-4 mt-8 flex items-center justify-center',
+            'flex mt-8 mb-4 justify-center items-center',
             containerClassName
           )}
         >
           {prev && currentPage !== 1 && (
             <li>
-              <Link
-                onClick={(e) => handleClick(e, prev)}
-                href={prev}
+              <button
+                onClick={() => handleClick(prev)}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-sm items-center',
+                  'flex cursor-pointer text-sm px-2',
                   prevClassName
                 )}
               >
                 <span>&lt;</span>
-                <span className="ms-4 hidden lg:inline-block">
+                <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(
-                      'cursor-pointer px-2 text-xs items-center',
+                      'text-xs px-2 cursor-pointer',
                       { 'pointer-events-none': item.url === null },
                       Number(page) === Number(item?.page)
                         ? 'font-semibold text-black-800'
@@ -249,9 +230,9 @@ export const Pagination = (props: PaginationProps) => {
                   )}
                 >
                   {item?.page}
-                </Link>
+                </button>
               ) : (
-                <span className="flex cursor-default items-center justify-center text-xs">
+                <span className="cursor-default text-xs flex items-center justify-center">
                   {item?.page}
                 </span>
               )}
@@ -260,19 +241,18 @@ export const Pagination = (props: PaginationProps) => {
 
           {showNext && (
             <li>
-              <Link
-                onClick={(e) => handleClick(e, next)}
-                href={next}
+              <button
+                onClick={() => handleClick(next)}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-xs items-center',
+                  'flex cursor-pointer text-xs px-2',
                   nextClassName
                 )}
               >
-                <span className="me-4 hidden lg:inline-block">
+                <span className="hidden lg:inline-block me-4">
                   {t('category.pagination.next')}
                 </span>
                 <span>&gt;</span>
-              </Link>
+              </button>
             </li>
           )}
         </ul>

package/app-template/src/components/types/index.ts

@@ -23,7 +23,6 @@ export interface PaginationProps {
   type?: 'infinite' | 'list' | 'more';
   onPageChange?: (page: number) => void;
   direction?: 'next' | 'prev';
-  isLoading?: boolean;
 }
 
 export type FileInputProps = React.HTMLProps<HTMLInputElement>;

package/app-template/src/settings.js

@@ -1,24 +1,16 @@
 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} */
 module.exports = {
-  webVitals: {
-    enabled: true
-  },
   commerceUrl,
   commonProductAttributes: [
     { translationKey: 'color', key: 'color' },
     { 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',
@@ -46,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/basket/basket-item.tsx

@@ -3,7 +3,7 @@ import {
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { Basket, BasketItem as BasketItemType } from '@akinon/next/types';
+import { BasketItem as BasketItemType } from '@akinon/next/types';
 import { Price, Button, Icon, Modal, Select, Link } from '@theme/components';
 import { useState } from 'react';
 import { useAddFavoriteMutation } from '@akinon/next/data/client/wishlist';
@@ -19,12 +19,11 @@ import { pushRemoveFromCart } from '@theme/utils/gtm';
 interface Props {
   basketItem?: BasketItemType;
   namespace?: string;
-  onBasketUpdate?: (basket: Basket) => void;
 }
 
 export const BasketItem = (props: Props) => {
   const { t } = useLocalization();
-  const { basketItem, namespace, onBasketUpdate } = props;
+  const { basketItem, namespace } = props;
   const [updateQuantityMutation] = useUpdateQuantityMutation();
   const dispatch = useAppDispatch();
   const [isRemoveBasketModalOpen, setRemoveBasketModalOpen] = useState(false);
@@ -50,21 +49,19 @@ export const BasketItem = (props: Props) => {
       requestParams.namespace = namespace;
     }
 
-    try {
-      const response = await updateQuantityMutation(requestParams).unwrap();
-      dispatch(
-        basketApi.util.updateQueryData(
-          'getBasket',
-          undefined,
-          (draftBasket) => {
-            Object.assign(draftBasket, response.basket);
-          }
+    await updateQuantityMutation(requestParams)
+      .unwrap()
+      .then((data) =>
+        dispatch(
+          basketApi.util.updateQueryData(
+            'getBasket',
+            undefined,
+            (draftBasket) => {
+              Object.assign(draftBasket, data.basket);
+            }
+          )
         )
       );
-      onBasketUpdate?.(response.basket);
-    } catch (error) {
-      console.error('Error updating quantity:', error);
-    }
   };
 
   const deleteProduct = async (productPk?: number) => {

package/app-template/src/views/basket/summary.tsx

@@ -18,7 +18,6 @@ import clsx from 'clsx';
 
 interface Props {
   basket: Basket;
-  onBasketUpdate?: (basket: Basket) => void;
 }
 
 const voucherCodeFormSchema = (t) =>
@@ -28,7 +27,7 @@ const voucherCodeFormSchema = (t) =>
 
 export const Summary = (props: Props) => {
   const { t } = useLocalization();
-  const { basket, onBasketUpdate } = props;
+  const { basket } = props;
   const router = useRouter();
   const {
     register,
@@ -54,7 +53,7 @@ export const Summary = (props: Props) => {
   const removeVoucherCode = () => {
     removeVoucherCodeMutation()
       .unwrap()
-      .then((basket) => {
+      .then((basket) =>
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -63,9 +62,8 @@ export const Summary = (props: Props) => {
               Object.assign(draftBasket, basket);
             }
           )
-        );
-        onBasketUpdate?.(basket);
-      })
+        )
+      )
       .catch((error: Error) => {
         setError('voucherCode', { message: error.data.non_field_errors });
       });
@@ -76,7 +74,7 @@ export const Summary = (props: Props) => {
       voucher_code: data.voucherCode
     })
       .unwrap()
-      .then((basket) => {
+      .then((basket) =>
         dispatch(
           basketApi.util.updateQueryData(
             'getBasket',
@@ -85,9 +83,8 @@ export const Summary = (props: Props) => {
               Object.assign(draftBasket, basket);
             }
           )
-        );
-        onBasketUpdate?.(basket);
-      })
+        )
+      )
       .catch((error: Error) => {
         setError('voucherCode', { message: error.data.non_field_errors });
       });

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

@@ -70,9 +70,9 @@ const CategoryActiveFilters = () => {
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
       {facets.map((facet) =>
-        facet?.data?.choices
-          ?.filter((choice) => choice.is_selected)
-          ?.map(
+        facet.data.choices
+          .filter((choice) => choice.is_selected)
+          .map(
             (choice) =>
               Number(choice.real_depth) !== 2 && (
                 <div

package/app-template/src/views/category/filters/filter-item.tsx

@@ -112,7 +112,7 @@ export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
   };
 
   const Component = getComponentByWidgetType(facet.widget_type, facet.key);
-  const choices = sortChoices(facet?.key, [...(facet?.data?.choices || [])]);
+  const choices = sortChoices(facet.key, [...facet.data.choices]);
 
   return (
     <Accordion

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

@@ -24,7 +24,7 @@ export const Filters = (props: Props) => {
 
   const haveFilter = useMemo(() => {
     return facets.some((facet) =>
-      facet?.data?.choices?.some((choice) => choice.is_selected)
+      facet.data.choices.some((choice) => choice.is_selected)
     );
   }, [facets]);
 

package/app-template/src/views/category/layout.tsx

@@ -17,7 +17,7 @@ export default async function Layout({
     <>
       <div
         className={clsx(
-          data?.category?.attributes?.category_banner
+          data.category?.attributes?.category_banner
             ? 'relative w-full'
             : 'container px-4 mx-auto lg:px-0 lg:my-4'
         )}
@@ -26,13 +26,13 @@ export default async function Layout({
         <div
           className={clsx(
             'my-4 lg:mt-7',
-            data?.category?.attributes?.category_banner &&
+            data.category?.attributes?.category_banner &&
               'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
           )}
         >
           <Breadcrumb breadcrumbList={breadcrumbData} />
         </div>
-        <CategoryBanner {...data?.category?.attributes?.category_banner} />
+        <CategoryBanner {...data.category?.attributes?.category_banner} />
       </div>
       <ListPage data={data} />
     </>