@akinon/projectzero 1.33.0-rc.0 → 1.33.1

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # @akinon/projectzero
 
-## 1.33.0-rc.0
+## 1.33.1
+
+### Patch Changes
+
+- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+
+## 1.33.0
 
 ### Minor Changes
 
-- 495d155: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
+- 53ada1e: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
 
 ## 1.32.0
 

package/app-template/.eslintrc.js

@@ -0,0 +1,31 @@
+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'
+  }
+};

package/app-template/CHANGELOG.md

@@ -1,43 +1,34 @@
 # projectzeronext
 
-## 1.33.0-rc.0
+## 1.33.1
+
+### Patch 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
+
+## 1.33.0
 
 ### Minor Changes
 
-- 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
-- 495d155: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
-- 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.33.0-rc.0
-  - @akinon/pz-masterpass@1.33.0-rc.0
-  - @akinon/pz-one-click-checkout@1.33.0-rc.0
-  - @akinon/pz-b2b@1.33.0-rc.0
-  - @akinon/pz-gpay@1.33.0-rc.0
-  - @akinon/pz-otp@1.33.0-rc.0
-  - @akinon/pz-pay-on-delivery@1.33.0-rc.0
+- 53ada1e: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
+
+### Patch Changes
+
+- @akinon/next@1.33.0
+- @akinon/pz-b2b@1.33.0
+- @akinon/pz-gpay@1.33.0
+- @akinon/pz-masterpass@1.33.0
+- @akinon/pz-one-click-checkout@1.33.0
+- @akinon/pz-otp@1.33.0
+- @akinon/pz-pay-on-delivery@1.33.0
 
 ## 1.32.0
 

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.33.0-rc.0",
+  "version": "1.33.1",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,13 +22,13 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.33.0-rc.0",
-    "@akinon/pz-b2b": "1.33.0-rc.0",
-    "@akinon/pz-gpay": "1.33.0-rc.0",
-    "@akinon/pz-masterpass": "1.33.0-rc.0",
-    "@akinon/pz-one-click-checkout": "1.33.0-rc.0",
-    "@akinon/pz-otp": "1.33.0-rc.0",
-    "@akinon/pz-pay-on-delivery": "1.33.0-rc.0",
+    "@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",
     "@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.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.33.1",
     "@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": "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/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/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, error, ...rest } = props;
 
   return (
     <label className={twMerge('flex flex-col text-xs', props.className)}>
@@ -12,7 +12,6 @@ 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,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

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

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

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

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

@@ -31,10 +31,7 @@ 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 &&
-                choice.is_selected
-              ) {
+              if (action.payload.facet.widget_type === WIDGET_TYPE.category) {
                 choice.is_selected = false;
               }
               return choice;
@@ -51,24 +48,6 @@ 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,
@@ -82,7 +61,6 @@ export const {
   setFacets,
   setSelectedFacets,
   toggleFacet,
-  removeCategoryFacet,
   resetSelectedFacets
 } = categorySlice.actions;
 

package/app-template/src/settings.js

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

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

@@ -1,15 +1,11 @@
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import React, { useEffect, useMemo } from 'react';
-import {
-  removeCategoryFacet,
-  toggleFacet
-} from '@theme/redux/reducers/category';
+import { 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();
@@ -20,11 +16,6 @@ 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 }));
   };
 
@@ -62,23 +53,43 @@ const CategoryActiveFilters = () => {
       {facets.map((facet) =>
         facet.data.choices
           .filter((choice) => choice.is_selected)
-          .map(
-            (choice) =>
-              Number(choice.real_depth) !== 2 && (
+          .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 && (
                 <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}`}
+                  className="cursor-pointer ml-4"
+                  onClick={() => handleRemoveFilter({ facet, choice })}
                 >
-                  <span>{choice.label}</span>
-                  <Icon
-                    className="cursor-pointer"
-                    name="close"
-                    size={12}
-                    onClick={() => handleRemoveFilter({ facet, choice })}
-                  />
+                  <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>
                 </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, useRouter } from '@akinon/next/hooks';
+import { useLocalization } from '@akinon/next/hooks';
 import { Facet, FacetChoice } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
@@ -14,8 +14,7 @@ import {
   toggleFacet
 } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useEffect, useMemo } from 'react';
-import { commonProductAttributes } from '@theme/settings';
+import { useMemo } from 'react';
 
 const COMPONENT_TYPES = {
   [WIDGET_TYPE.category]: Radio,
@@ -28,7 +27,6 @@ interface Props {
 }
 
 export const Filters = (props: Props) => {
-  const router = useRouter();
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
@@ -41,16 +39,12 @@ export const Filters = (props: Props) => {
     facet: Facet;
     choice: FacetChoice;
   }) => {
-    if (facet.key === 'category_ids') {
-      router.push(choice.url);
-    } else {
-      dispatch(
-        toggleFacet({
-          facet,
-          choice
-        })
-      );
-    }
+    dispatch(
+      toggleFacet({
+        facet,
+        choice
+      })
+    );
   };
 
   const haveFilter = useMemo(() => {
@@ -66,19 +60,6 @@ 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(
@@ -100,7 +81,7 @@ export const Filters = (props: Props) => {
         let Component = null;
         const choices = [...facet.data.choices];
 
-        if (facet.key === sizeKey) {
+        if (facet.key === 'integration_SizeId') {
           // If it's a size facet, use the custom size filter component
           Component = SizeFilter;
 
@@ -126,8 +107,8 @@ export const Filters = (props: Props) => {
           >
             <div
               className={clsx(
-                'flex gap-4 flex-wrap',
-                facet.key === sizeKey ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
+                'flex gap-4',
+                facet.key === 'integration_SizeId' ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
               )}
             >
               {choices.map((choice, index) => (
@@ -136,13 +117,13 @@ export const Filters = (props: Props) => {
                   data={choice}
                   name={facet.key}
                   onChange={() => {
-                    if (facet.key !== sizeKey) {
+                    if (facet.key !== 'integration_SizeId') {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }
                   }}
                   onClick={() => {
-                    if (facet.key === sizeKey) {
+                    if (facet.key === 'integration_SizeId') {
                       // TODO: This condition must be refactor to a better way
                       handleSelectFilter({ facet, choice });
                     }

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

@@ -206,14 +206,7 @@ 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,5 +40,7 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero-cli/app-template"]
+  "exclude": ["node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }

package/commands/create.ts

@@ -132,7 +132,7 @@ export default async (): Promise<void> => {
 
   const templatesDir = path.resolve(
     __dirname,
-    '../../../projectzero-cli/app-template'
+    '../../../projectzero/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-cli/app-template');
+    const templatesDir = path_1.default.resolve(__dirname, '../../../projectzero/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.0-rc.0",
+  "version": "1.33.1",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {

package/app-template/eslint.config.js

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

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

@@ -1,5 +0,0 @@
-{
-  "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

@@ -1,5 +0,0 @@
-{
-  "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]/pz-not-found/page.tsx

@@ -1,24 +0,0 @@
-'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;