@akinon/projectzero 1.37.0-rc.6 → 1.37.0-rc.7

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @akinon/projectzero
 
+## 1.37.0-rc.7
+
 ## 1.37.0-rc.6
 
 ## 1.37.0-rc.5

package/app-template/CHANGELOG.md

@@ -1,5 +1,21 @@
 # projectzeronext
 
+## 1.37.0-rc.7
+
+### Minor Changes
+
+- 7a4bb76: ZERO-2610:Refactor FilterItem component for better readability and efficiency
+
+### Patch Changes
+
+- @akinon/next@1.37.0-rc.7
+- @akinon/pz-b2b@1.37.0-rc.7
+- @akinon/pz-gpay@1.37.0-rc.7
+- @akinon/pz-masterpass@1.37.0-rc.7
+- @akinon/pz-one-click-checkout@1.37.0-rc.7
+- @akinon/pz-otp@1.37.0-rc.7
+- @akinon/pz-pay-on-delivery@1.37.0-rc.7
+
 ## 1.37.0-rc.6
 
 ### Patch Changes

package/app-template/package.json

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

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

@@ -0,0 +1,131 @@
+import clsx from 'clsx';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { Facet, FacetChoice } from '@akinon/next/types';
+import { Accordion, Radio, Checkbox } from '../../../components';
+import { WIDGET_TYPE } from '../../../types';
+import { SizeFilter } from './size-filter';
+import { toggleFacet } from '@theme/redux/reducers/category';
+import { commonProductAttributes } from '@theme/settings';
+import { useRouter } from '@akinon/next/hooks';
+
+const COMPONENT_TYPES = {
+  [WIDGET_TYPE.category]: Radio,
+  [WIDGET_TYPE.multiselect]: Checkbox
+};
+
+const sizeKey = commonProductAttributes.find(
+  (item) => item.translationKey === 'size'
+).key;
+
+interface Props {
+  facet: Facet;
+}
+
+const sortByPredefinedOrder = (
+  aLabel: string,
+  bLabel: string,
+  order: string[]
+) => {
+  const aIndex = order.indexOf(aLabel);
+  const bIndex = order.indexOf(bLabel);
+
+  if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+  if (aIndex !== -1) return -1;
+  if (bIndex !== -1) return 1;
+
+  return null;
+};
+
+const sortByNumericValue = (aLabel: string, bLabel: string) => {
+  const aNum = parseInt(aLabel, 10);
+  const bNum = parseInt(bLabel, 10);
+
+  if (!isNaN(aNum) && !isNaN(bNum)) return aNum - bNum;
+  if (!isNaN(aNum)) return -1;
+  if (!isNaN(bNum)) return 1;
+
+  return null;
+};
+
+const sortChoices = (
+  facetKey: string,
+  choices: FacetChoice[]
+): FacetChoice[] => {
+  if (facetKey === sizeKey) {
+    const order = ['xs', 's', 'm', 'l', 'xl'];
+
+    return choices.sort((a, b) => {
+      const aLabel = a.label.toLowerCase();
+      const bLabel = b.label.toLowerCase();
+
+      const orderComparison = sortByPredefinedOrder(aLabel, bLabel, order);
+      if (orderComparison !== null) return orderComparison;
+
+      const numericComparison = sortByNumericValue(aLabel, bLabel);
+      if (numericComparison !== null) return numericComparison;
+
+      return aLabel.localeCompare(bLabel);
+    });
+  }
+
+  return choices;
+};
+
+const getComponentByWidgetType = (widgetType: string, facetKey: string) => {
+  if (facetKey === sizeKey) {
+    return SizeFilter;
+  }
+  return COMPONENT_TYPES[widgetType] || COMPONENT_TYPES[WIDGET_TYPE.category];
+};
+
+export const FilterItem = ({ facet }: Props) => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+
+  const handleSelectFilter = (choice: FacetChoice) => {
+    if (facet.key === 'category_ids') {
+      router.push(choice.url);
+    } else {
+      dispatch(toggleFacet({ facet, choice }));
+    }
+  };
+
+  const Component = getComponentByWidgetType(facet.widget_type, facet.key);
+  const choices = sortChoices(facet.key, [...facet.data.choices]);
+
+  return (
+    <Accordion
+      key={facet.key}
+      title={facet.name}
+      isCollapse={choices.some((choice) => choice.is_selected)}
+      dataTestId={`filter-${facet.name}`}
+    >
+      <div
+        className={clsx('flex gap-4', {
+          'flex-wrap flex-row': facet.key === sizeKey,
+          'flex-col': facet.key !== sizeKey
+        })}
+      >
+        {choices.map((choice, index) => (
+          <Component
+            key={choice.label}
+            data={choice}
+            name={facet.key}
+            onChange={() => facet.key !== sizeKey && handleSelectFilter(choice)}
+            onClick={() => facet.key === sizeKey && handleSelectFilter(choice)}
+            checked={choice.is_selected}
+            data-testid={`${choice.label.trim()}`}
+          >
+            {choice.label} (
+            <span
+              data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
+            >
+              {choice.quantity}
+            </span>
+            )
+          </Component>
+        ))}
+      </div>
+    </Accordion>
+  );
+};

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

@@ -1,26 +1,14 @@
 'use client';
 
-import { WIDGET_TYPE } from '@theme/types';
 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 { Facet, FacetChoice } from '@akinon/next/types';
+import { Button, Icon } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  resetSelectedFacets,
-  toggleFacet
-} from '@theme/redux/reducers/category';
+import { resetSelectedFacets } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
 import { useMemo } from 'react';
-import { commonProductAttributes } from '@theme/settings';
-
-const COMPONENT_TYPES = {
-  [WIDGET_TYPE.category]: Radio,
-  [WIDGET_TYPE.multiselect]: Checkbox
-};
+import { FilterItem } from './filter-item';
 
 interface Props {
   isMenuOpen: boolean;
@@ -28,31 +16,11 @@ interface Props {
 }
 
 export const Filters = (props: Props) => {
-  const router = useRouter();
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
   const { isMenuOpen, setIsMenuOpen } = props;
 
-  const handleSelectFilter = ({
-    facet,
-    choice
-  }: {
-    facet: Facet;
-    choice: FacetChoice;
-  }) => {
-    if (facet.key === 'category_ids') {
-      router.push(choice.url);
-    } else {
-      dispatch(
-        toggleFacet({
-          facet,
-          choice
-        })
-      );
-    }
-  };
-
   const haveFilter = useMemo(() => {
     return (
       facets.filter(
@@ -66,10 +34,6 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
-  const sizeKey = commonProductAttributes.find(
-    (item) => item.translationKey === 'size'
-  ).key;
-
   return (
     <div
       className={clsx(
@@ -88,71 +52,7 @@ export const Filters = (props: Props) => {
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
       {facets.map((facet) => {
-        let Component = null;
-        const choices = [...facet.data.choices];
-
-        if (facet.key === sizeKey) {
-          // If it's a size facet, use the custom size filter component
-          Component = SizeFilter;
-
-          const order = ['xs', 's', 'm', 'l', 'xl'];
-          choices.sort((a, b) => {
-            return (
-              order.indexOf(a.label.toLowerCase()) -
-              order.indexOf(b.label.toLowerCase())
-            );
-          });
-        } else {
-          Component =
-            COMPONENT_TYPES[facet.widget_type] ||
-            COMPONENT_TYPES[WIDGET_TYPE.category];
-        }
-
-        return (
-          <Accordion
-            key={facet.key}
-            title={facet.name}
-            isCollapse={choices.some((choice) => choice.is_selected)}
-            dataTestId={`filter-${facet.name}`}
-          >
-            <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
-              )}
-            >
-              {choices.map((choice, index) => (
-                <Component // TODO: This dynamic component can be a hook or higher order component so it props can be standardized
-                  key={choice.label}
-                  data={choice}
-                  name={facet.key}
-                  onChange={() => {
-                    if (facet.key !== sizeKey) {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  onClick={() => {
-                    if (facet.key === sizeKey) {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  checked={choice.is_selected}
-                  data-testid={`${choice.label.trim()}`}
-                >
-                  {choice.label} (
-                  <span
-                    data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
-                  >
-                    {choice.quantity}
-                  </span>
-                  )
-                </Component>
-              ))}
-            </div>
-          </Accordion>
-        );
+        return <FilterItem key={facet.key} facet={facet} />;
       })}
       <div className="lg:hidden">
         <CategoryActiveFilters />

package/package.json

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