@akinon/projectzero 1.74.0 → 1.75.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/projectzero
 
+## 1.75.0
+
+### Minor Changes
+
+- 1ebe1da: ZERO-3016:move pagination fixes and add optional chaining
+
 ## 1.74.0
 
 ## 1.73.0

package/app-template/CHANGELOG.md

@@ -1,5 +1,42 @@
 # projectzeronext
 
+## 1.75.0
+
+### Minor Changes
+
+- f268c94: ZERO-3107: Upgrade version for tailwindcss
+- 1ebe1da: ZERO-3016:move pagination fixes and add optional chaining
+- 7d2d66e: ZERO-3012: Upgrade version for tailwindcss
+- 3344bca: ZERO-3013: Enable web vitals tracking in settings.js
+
+### Patch Changes
+
+- Updated dependencies [81248a1]
+- Updated dependencies [cc538c6]
+- Updated dependencies [663bda9]
+- Updated dependencies [94eb825]
+- Updated dependencies [0ab91e5]
+- Updated dependencies [3010514]
+- Updated dependencies [37547c0]
+- Updated dependencies [5a333a5]
+- Updated dependencies [ca774b3]
+- Updated dependencies [3344bca]
+  - @akinon/next@1.75.0
+  - @akinon/pz-akifast@1.75.0
+  - @akinon/pz-b2b@1.75.0
+  - @akinon/pz-basket-gift-pack@1.75.0
+  - @akinon/pz-bkm@1.75.0
+  - @akinon/pz-checkout-gift-pack@1.75.0
+  - @akinon/pz-click-collect@1.75.0
+  - @akinon/pz-credit-payment@1.75.0
+  - @akinon/pz-gpay@1.75.0
+  - @akinon/pz-masterpass@1.75.0
+  - @akinon/pz-one-click-checkout@1.75.0
+  - @akinon/pz-otp@1.75.0
+  - @akinon/pz-pay-on-delivery@1.75.0
+  - @akinon/pz-saved-card@1.75.0
+  - @akinon/pz-tabby-extension@1.75.0
+
 ## 1.74.0
 
 ### Patch Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,21 +22,21 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.74.0",
-    "@akinon/pz-akifast": "1.74.0",
-    "@akinon/pz-b2b": "1.74.0",
-    "@akinon/pz-basket-gift-pack": "1.74.0",
-    "@akinon/pz-bkm": "1.74.0",
-    "@akinon/pz-checkout-gift-pack": "1.74.0",
-    "@akinon/pz-click-collect": "1.74.0",
-    "@akinon/pz-credit-payment": "1.74.0",
-    "@akinon/pz-gpay": "1.74.0",
-    "@akinon/pz-masterpass": "1.74.0",
-    "@akinon/pz-one-click-checkout": "1.74.0",
-    "@akinon/pz-otp": "1.74.0",
-    "@akinon/pz-pay-on-delivery": "1.74.0",
-    "@akinon/pz-saved-card": "1.74.0",
-    "@akinon/pz-tabby-extension": "1.74.0",
+    "@akinon/next": "1.75.0",
+    "@akinon/pz-akifast": "1.75.0",
+    "@akinon/pz-b2b": "1.75.0",
+    "@akinon/pz-basket-gift-pack": "1.75.0",
+    "@akinon/pz-bkm": "1.75.0",
+    "@akinon/pz-checkout-gift-pack": "1.75.0",
+    "@akinon/pz-click-collect": "1.75.0",
+    "@akinon/pz-credit-payment": "1.75.0",
+    "@akinon/pz-gpay": "1.75.0",
+    "@akinon/pz-masterpass": "1.75.0",
+    "@akinon/pz-one-click-checkout": "1.75.0",
+    "@akinon/pz-otp": "1.75.0",
+    "@akinon/pz-pay-on-delivery": "1.75.0",
+    "@akinon/pz-saved-card": "1.75.0",
+    "@akinon/pz-tabby-extension": "1.75.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -47,7 +47,7 @@
     "next-auth": "4.24.5",
     "next-pwa": "5.6.0",
     "pino": "8.11.0",
-    "postcss": "8.4.31",
+    "postcss": "8.4.49",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "2.1.0",
@@ -57,10 +57,11 @@
     "react-string-replace": "1.1.0",
     "start-server-and-test": "2.0.3",
     "tailwind-merge": "1.8.0",
+    "tailwindcss": "3.4.17",
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.74.0",
+    "@akinon/eslint-plugin-projectzero": "1.75.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -75,7 +76,7 @@
     "@types/react-dom": "18.2.12",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
-    "autoprefixer": "10.4.13",
+    "autoprefixer": "10.4.20",
     "client-only": "0.0.1",
     "clsx": "1.1.1",
     "currency-symbol-map": "5.1.0",
@@ -96,7 +97,7 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "3.4.12",
+    "tailwindcss": "3.4.14",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.2.2"

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

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

@@ -23,6 +23,7 @@ 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

@@ -5,6 +5,9 @@ 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' },

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

package/package.json

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