@akinon/projectzero 1.33.1 → 1.34.0-rc.0

package/CHANGELOG.md

@@ -1,10 +1,6 @@
 # @akinon/projectzero
 
-## 1.33.1
-
-### Patch Changes
-
-- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+## 1.34.0-rc.0
 
 ## 1.33.0
 

package/app-template/CHANGELOG.md

@@ -1,18 +1,42 @@
 # projectzeronext
 
-## 1.33.1
+## 1.34.0-rc.0
 
-### Patch Changes
+### Minor Changes
 
-- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
-- Updated dependencies [10123f9]
-  - @akinon/next@1.33.1
-  - @akinon/pz-b2b@1.33.1
-  - @akinon/pz-gpay@1.33.1
-  - @akinon/pz-masterpass@1.33.1
-  - @akinon/pz-one-click-checkout@1.33.1
-  - @akinon/pz-otp@1.33.1
-  - @akinon/pz-pay-on-delivery@1.33.1
+- 567e4c1: ZERO-2580:Add checked attribute from props to checkbox
+- d09b677: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
+- ebb63ce: ZERO-2525: Fix category facet removal bug and add close icon to active filters
+- f0c23bc: ZERO-2135: add custom not found page
+- 3420416: ZERO-2533: extend eslint config from @akinon/next
+- 6c18543: ZERO-2542:Refactor and show error in OneClickCheckoutButtons
+- 202f84e: ZERO-2569: Fix static keys
+- f046f8e: ZERO-2575: update version for react-number-format
+- 12c10a4: ZERO-2570: Category filters routes to absolute url
+
+### Patch Changes
+
+- Updated dependencies [d09b677]
+- Updated dependencies [6d4aadb]
+- Updated dependencies [ebb63ce]
+- Updated dependencies [7cebe87]
+- Updated dependencies [f3b595e]
+- Updated dependencies [f0c23bc]
+- Updated dependencies [3420416]
+- Updated dependencies [495d155]
+- Updated dependencies [6c18543]
+- Updated dependencies [40ad73e]
+- Updated dependencies [495d155]
+- Updated dependencies [f046f8e]
+- Updated dependencies [6b2972b]
+- Updated dependencies [3e68768]
+  - @akinon/next@1.34.0-rc.0
+  - @akinon/pz-masterpass@1.34.0-rc.0
+  - @akinon/pz-one-click-checkout@1.34.0-rc.0
+  - @akinon/pz-b2b@1.34.0-rc.0
+  - @akinon/pz-gpay@1.34.0-rc.0
+  - @akinon/pz-otp@1.34.0-rc.0
+  - @akinon/pz-pay-on-delivery@1.34.0-rc.0
 
 ## 1.33.0
 

package/app-template/eslint.config.js

@@ -0,0 +1,10 @@
+const baseConfig = require('@akinon/next/eslint.config')
+
+module.exports = {
+  ...baseConfig,
+  settings: {
+    next: {
+      rootDir: ['src/*/']
+    }
+  },
+};

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.33.1",
+  "version": "1.34.0-rc.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,13 +22,13 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.33.1",
-    "@akinon/pz-b2b": "1.33.1",
-    "@akinon/pz-gpay": "1.33.1",
-    "@akinon/pz-masterpass": "1.33.1",
-    "@akinon/pz-one-click-checkout": "1.33.1",
-    "@akinon/pz-otp": "1.33.1",
-    "@akinon/pz-pay-on-delivery": "1.33.1",
+    "@akinon/next": "1.34.0-rc.0",
+    "@akinon/pz-b2b": "1.34.0-rc.0",
+    "@akinon/pz-gpay": "1.34.0-rc.0",
+    "@akinon/pz-masterpass": "1.34.0-rc.0",
+    "@akinon/pz-one-click-checkout": "1.34.0-rc.0",
+    "@akinon/pz-otp": "1.34.0-rc.0",
+    "@akinon/pz-pay-on-delivery": "1.34.0-rc.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -52,7 +52,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.33.1",
+    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -79,7 +79,7 @@
     "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/not_found.json

@@ -0,0 +1,5 @@
+{
+  "title": "Page Not Found",
+  "sub_title": "It looks like the page you're looking for doesn't exist.",
+  "button": "Return to Home Page"
+}

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

@@ -0,0 +1,5 @@
+{
+  "title": "Sayfa Bulunamadı",
+  "sub_title": "Aradığınız sayfa bulunamadı gibi görünüyor.",
+  "button": "Ana Sayfaya Dön"
+}

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]/pz-not-found/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+import { Button, Link } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+const NotFound = () => {
+  const { t } = useLocalization();
+
+  return (
+    <div className="py-6 flex flex-col items-center justify-center">
+      <div className="text-8xl font-bold">404</div>
+      <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
+      <p className="text-lg mb-6">{t('not_found.sub_title')}</p>
+      <Link href={'/'}>
+        <Button className="h-auto mt-4 text-base py-3 px-6">
+          {t('not_found.button')}
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;

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, error, ...rest } = props;
+  const { children, checked, error, ...rest } = props;
 
   return (
     <label className={twMerge('flex flex-col text-xs', props.className)}>
@@ -12,6 +12,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           type="checkbox"
           {...rest}
           ref={ref}
+          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,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/pagination.tsx

@@ -198,7 +198,7 @@ export const Pagination = (props: PaginationProps) => {
             containerClassName
           )}
         >
-          {prev && (
+          {prev && currentPage !== 1 && (
             <li>
               <Link
                 onClick={(e) => handleClick(e, prev)}

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

@@ -1,10 +1,10 @@
 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';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -38,7 +38,7 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency

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

@@ -31,7 +31,10 @@ const categorySlice = createSlice({
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {
-              if (action.payload.facet.widget_type === WIDGET_TYPE.category) {
+              if (
+                action.payload.facet.widget_type === WIDGET_TYPE.category &&
+                choice.is_selected
+              ) {
                 choice.is_selected = false;
               }
               return choice;
@@ -48,6 +51,24 @@ const categorySlice = createSlice({
         return facet;
       });
     },
+    removeCategoryFacet(state, action) {
+      state.selectedFacets = state.selectedFacets.map((facet) => {
+        if (facet.key === action.payload.facet.key) {
+          facet.data.choices = facet.data.choices.map((choice) => {
+            if (choice.value === action.payload.choice.value) {
+              choice.is_selected = false;
+            }
+            return choice;
+          });
+        }
+
+        return facet;
+      });
+
+      state.selectedFacets = state.selectedFacets.filter(
+        (facet) => facet.key !== action.payload.facet.key
+      );
+    },
     resetSelectedFacets(state) {
       return {
         ...state,
@@ -61,6 +82,7 @@ export const {
   setFacets,
   setSelectedFacets,
   toggleFacet,
+  removeCategoryFacet,
   resetSelectedFacets
 } = categorySlice.actions;
 

package/app-template/src/settings.js

@@ -58,5 +58,6 @@ module.exports = {
   ],
   redis: {
     defaultExpirationTime: 900 // 15 min
-  }
+  },
+  customNotFoundEnabled: false
 };

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

@@ -1,11 +1,15 @@
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import React, { useEffect, useMemo } from 'react';
-import { toggleFacet } from '@theme/redux/reducers/category';
+import {
+  removeCategoryFacet,
+  toggleFacet
+} from '@theme/redux/reducers/category';
 import { useRouter } from '@akinon/next/hooks';
 import convertFacetSearchParams from '@theme/utils/convert-facet-search-params';
 import { usePathname } from 'next/navigation';
 import { WIDGET_TYPE } from '@theme/types';
 import { useSearchParams } from 'next/dist/client/components/navigation';
+import { Icon } from '@theme/components';
 
 const CategoryActiveFilters = () => {
   const dispatch = useAppDispatch();
@@ -16,6 +20,11 @@ const CategoryActiveFilters = () => {
   const { facets, selectedFacets } = useAppSelector((state) => state.category);
 
   const handleRemoveFilter = ({ facet, choice }) => {
+    if (facet.widget_type === WIDGET_TYPE.category) {
+      dispatch(removeCategoryFacet({ facet, choice }));
+      return;
+    }
+
     dispatch(toggleFacet({ facet, choice }));
   };
 
@@ -53,43 +62,23 @@ const CategoryActiveFilters = () => {
       {facets.map((facet) =>
         facet.data.choices
           .filter((choice) => choice.is_selected)
-          .map((choice) => (
-            <div
-              className="flex justify-between text-xs text-black-800 py-3.5 px-4 border border-gray-400 hover:bg-gray-300 cursor-default items-center"
-              key={`${facet.key}-${choice.label}`}
-            >
-              <div>
-                {facet.widget_type !== WIDGET_TYPE.category && (
-                  <span>{facet.name}: </span>
-                )}
-                <span>{choice.label}</span>
-              </div>
-              {facet.widget_type !== WIDGET_TYPE.category && (
+          .map(
+            (choice) =>
+              Number(choice.real_depth) !== 2 && (
                 <div
-                  className="cursor-pointer ml-4"
-                  onClick={() => handleRemoveFilter({ facet, choice })}
+                  className="flex justify-between text-xs text-black-800 py-3.5 px-4 border border-gray-400 hover:bg-gray-300 cursor-default items-center"
+                  key={`${facet.key}-${choice.label}`}
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 13.5 13.5"
-                    width="1em"
-                    height="1em"
-                  >
-                    <path
-                      d="m.75 12.75 12-12m-12 0 12 12"
-                      style={{
-                        fill: 'none',
-                        stroke: '#000',
-                        strokeLinecap: 'round',
-                        strokeLinejoin: 'round',
-                        strokeWidth: '1.5px'
-                      }}
-                    />
-                  </svg>
+                  <span>{choice.label}</span>
+                  <Icon
+                    className="cursor-pointer"
+                    name="close"
+                    size={12}
+                    onClick={() => handleRemoveFilter({ facet, choice })}
+                  />
                 </div>
-              )}
-            </div>
-          ))
+              )
+          )
       )}
     </div>
   );

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

@@ -70,7 +70,7 @@ export default function ListPage(props: ListPageProps) {
           ></div>
           <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
             <CategoryHeader
-              totalCount={data.pagination.total_count}
+              totalCount={data.pagination?.total_count}
               setMenuStatus={() => setIsMenuOpen(true)}
               sortOptions={data.sorters}
             />
@@ -78,7 +78,7 @@ export default function ListPage(props: ListPageProps) {
               <CategoryActiveFilters />
             </div>
 
-            {data.products.length === 0 && page === 1 && (
+            {data.products?.length === 0 && page === 1 && (
               <div className="text-center bg-gray-200 px-5 py-20">
                 <p className="pb-4">{t('category.search.not_found')}</p>
                 <Link className="underline" href={ROUTES.HOME}>

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { Accordion, Button, Checkbox, Icon, Radio } from '@theme/components';
 import { SizeFilter } from './size-filter';
 
-import { useLocalization } from '@akinon/next/hooks';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 import { Facet, FacetChoice } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
@@ -14,7 +14,8 @@ import {
   toggleFacet
 } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import { commonProductAttributes } from '@theme/settings';
 
 const COMPONENT_TYPES = {
   [WIDGET_TYPE.category]: Radio,
@@ -27,6 +28,7 @@ interface Props {
 }
 
 export const Filters = (props: Props) => {
+  const router = useRouter();
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
@@ -39,12 +41,16 @@ export const Filters = (props: Props) => {
     facet: Facet;
     choice: FacetChoice;
   }) => {
-    dispatch(
-      toggleFacet({
-        facet,
-        choice
-      })
-    );
+    if (facet.key === 'category_ids') {
+      router.push(choice.url);
+    } else {
+      dispatch(
+        toggleFacet({
+          facet,
+          choice
+        })
+      );
+    }
   };
 
   const haveFilter = useMemo(() => {
@@ -60,6 +66,19 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (url.searchParams.has('category_ids')) {
+      url.searchParams.delete('category_ids');
+      const newHref = url.pathname + url.search;
+      window.history.replaceState({}, '', newHref);
+    }
+  }, [router]);
+
+  const sizeKey = commonProductAttributes.find(
+    (item) => item.translationKey === 'size'
+  ).key;
+
   return (
     <div
       className={clsx(
@@ -81,7 +100,7 @@ export const Filters = (props: Props) => {
         let Component = null;
         const choices = [...facet.data.choices];
 
-        if (facet.key === 'integration_SizeId') {
+        if (facet.key === sizeKey) {
           // If it's a size facet, use the custom size filter component
           Component = SizeFilter;
 
@@ -107,8 +126,8 @@ export const Filters = (props: Props) => {
           >
             <div
               className={clsx(
-                'flex gap-4',
-                facet.key === 'integration_SizeId' ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
+                'flex gap-4 flex-wrap',
+                facet.key === sizeKey ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
               )}
             >
               {choices.map((choice, index) => (
@@ -117,13 +136,13 @@ export const Filters = (props: Props) => {
                   data={choice}
                   name={facet.key}
                   onChange={() => {
-                    if (facet.key !== 'integration_SizeId') {
+                    if (facet.key !== sizeKey) {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }
                   }}
                   onClick={() => {
-                    if (facet.key === 'integration_SizeId') {
+                    if (facet.key === sizeKey) {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }

package/app-template/src/views/product/product-info.tsx

@@ -206,7 +206,14 @@ export default function ProductInfo({ data }: ProductPageProps) {
             'after:bg-[#d02c2f]',
             'after:rounded-xl',
             'after:left-1'
-          ])
+          ]),
+          onError: (error) =>
+            setProductError(
+              error?.data?.non_field_errors ||
+                Object.keys(error?.data).map(
+                  (key) => `${key}: ${error?.data[key].join(', ')}`
+                )
+            )
         }}
       />
 

package/app-template/tsconfig.json

@@ -40,7 +40,5 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules",
-    "../../packages/projectzero/app-template"
-  ]
+  "exclude": ["node_modules", "../../packages/projectzero-cli/app-template"]
 }

package/commands/create.ts

@@ -132,7 +132,7 @@ export default async (): Promise<void> => {
 
   const templatesDir = path.resolve(
     __dirname,
-    '../../../projectzero/app-template'
+    '../../../projectzero-cli/app-template'
   );
 
   fs.cpSync(templatesDir, projectDir, { recursive: true });

package/dist/commands/create.js

@@ -122,7 +122,7 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!fs.existsSync(projectDir)) {
         fs.mkdirSync(projectDir, { recursive: true });
     }
-    const templatesDir = path_1.default.resolve(__dirname, '../../../projectzero/app-template');
+    const templatesDir = path_1.default.resolve(__dirname, '../../../projectzero-cli/app-template');
     fs.cpSync(templatesDir, projectDir, { recursive: true });
     updatePluginsFile(projectDir);
     if (answers.projectDescription) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.33.1",
+  "version": "1.34.0-rc.0",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {

package/app-template/.eslintrc.js

@@ -1,31 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-    jest: true
-  },
-  extends: [
-    'next/core-web-vitals',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:@akinon/projectzero/core', // DO NOT remove this config for stability
-    'plugin:@akinon/projectzero/recommended' // Optional
-  ],
-  plugins: ['@typescript-eslint', '@akinon/projectzero'],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2021,
-    sourceType: 'module'
-  },
-  settings: {
-    next: {
-      rootDir: ['src/*/']
-    }
-  },
-  rules: {
-    '@typescript-eslint/no-unused-vars': 'warn',
-    '@typescript-eslint/no-explicit-any': 'warn'
-  }
-};