@akinon/projectzero 1.55.0-rc.0 → 1.55.0

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -1,174 +1,38 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  setCurrentStep,
-  setSelectedShippingOptions
-} from '@akinon/next/redux/reducers/checkout';
+import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
-import {
-  useSetShippingOptionMutation,
-  useSetAttributeBasedShippingOptionsMutation,
-  useSetDataSourceShippingOptionsMutation
-} from '@akinon/next/data/client/checkout';
+import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
 import { Price, Button, Radio } from '@theme/components';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 
-const ShippingOptions: React.FC = () => {
+const ShippingOptions = () => {
   const { t } = useLocalization();
-  const dispatch = useAppDispatch();
-  const {
-    steps,
-    shippingOptions,
-    attributeBasedShippingOptions,
-    dataSourceShippingOptions,
-    preOrder,
-    addressList,
-    selectedShippingOptions
-  } = useAppSelector((state: RootState) => state.checkout);
-  const {
-    shipping_option,
-    shipping_address,
-    attribute_based_shipping_options,
-    data_source_shipping_options
-  } = preOrder ?? {};
-
-  const [setShippingOption] = useSetShippingOptionMutation();
-  const [setAttributeBasedShippingOptions] =
-    useSetAttributeBasedShippingOptionsMutation();
-  const [setDataSourceShippingOption] =
-    useSetDataSourceShippingOptionsMutation();
-
-  const prevAttributeBasedOptionsRef = useRef(attributeBasedShippingOptions);
-
-  const [selectedPks, setSelectedPks] = useState<
-    { dataSourcePk: number; optionPk: number }[] | null
-  >(null);
-
-  const initializeSelectedOptions = useCallback(() => {
-    if (attribute_based_shipping_options) {
-      const newSelected = { ...selectedShippingOptions };
-      let hasChanges = false;
-
-      Object.entries(attributeBasedShippingOptions).forEach(
-        ([color, options]) => {
-          if (
-            !newSelected[color] ||
-            !options.some((opt) => opt.pk === newSelected[color])
-          ) {
-            newSelected[color] = options[0].pk;
-            hasChanges = true;
-          }
-        }
-      );
-
-      if (hasChanges) {
-        dispatch(setSelectedShippingOptions(newSelected));
-        setAttributeBasedShippingOptions(newSelected);
-      }
-    } else if (shippingOptions.length > 0 && !shipping_option) {
-      setShippingOption(shippingOptions[0].pk);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    attributeBasedShippingOptions,
-    selectedShippingOptions,
-    setAttributeBasedShippingOptions,
-    attribute_based_shipping_options,
-    shippingOptions,
-    shipping_option,
-    setShippingOption
-  ]);
-
-  useEffect(() => {
-    if (!data_source_shipping_options) return;
-
-    const initialSelectedPks = data_source_shipping_options.map((option) => ({
-      dataSourcePk: option.data_source.pk,
-      optionPk: option.pk
-    }));
-
-    setSelectedPks(initialSelectedPks);
-  }, [data_source_shipping_options]);
-
-  useEffect(() => {
-    if (
-      JSON.stringify(prevAttributeBasedOptionsRef.current) !==
-        JSON.stringify(attributeBasedShippingOptions) ||
-      Object.keys(selectedShippingOptions).length === 0 ||
-      (!shipping_option && shippingOptions.length > 0)
-    ) {
-      initializeSelectedOptions();
-      prevAttributeBasedOptionsRef.current = attributeBasedShippingOptions;
-    }
-  }, [
-    attributeBasedShippingOptions,
-    selectedShippingOptions,
-  initializeSelectedOptions,
-    shipping_option,
-    shippingOptions
-  ]);
-
-  const handleAttributeBasedOptionChange = useCallback(
-    (color: string, newPk: number) => {
-      const updatedOptions = { ...selectedShippingOptions, [color]: newPk };
-      dispatch(setSelectedShippingOptions(updatedOptions));
-      setAttributeBasedShippingOptions(updatedOptions);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedShippingOptions, setAttributeBasedShippingOptions]
+  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
+    (state: RootState) => state.checkout
   );
-
-  if (addressList.length < 1) {
-    return (
-      <div className="w-full lg:w-2/5">
-        <div className="border-b border-gray-400 px-8 py-4">
-          <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
-        </div>
-        <div className="py-4 px-8">
-          <p className="text-xs">
-            {t('checkout.address.shipping.select_address_to_continue')}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  const updateData = (dataSourcePk: number, newPk: number) => {
-    const updatedSelectedPks = selectedPks?.map((item) =>
-      item.dataSourcePk === dataSourcePk ? { ...item, optionPk: newPk } : item
-    );
-
-    if (!updatedSelectedPks) return;
-
-    setSelectedPks(updatedSelectedPks);
-
-    const pks = updatedSelectedPks.map((item) => item.optionPk);
-    setDataSourceShippingOption(pks);
-  };
-
-  const handleRadioChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    dataSourcePk: number
-  ) => {
-    const newPk = parseInt(e.currentTarget.value);
-    updateData(dataSourcePk, newPk);
-  };
+  const { shipping_option, shipping_address } = preOrder ?? {};
+  const [setShippingOption] = useSetShippingOptionMutation();
+  const dispatch = useAppDispatch();
 
   return (
     <div className="w-full lg:w-2/5">
       <div className="border-b border-gray-400 px-8 py-4">
         <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
       </div>
-      <div className="py-4 px-6">
-        <p className="text-xs border-gray-400 pb-4">
-          {t('checkout.address.shipping.chosen_address')}:{' '}
-          {shipping_address?.city.name}
-        </p>
-
-        {shippingOptions &&
-          shippingOptions.length > 0 &&
-          shippingOptions.map((option) => (
+      {addressList.length < 1 ? (
+        <div className="py-4 px-8">
+          <p className="text-xs">
+            {t('checkout.address.shipping.select_address_to_continue')}
+          </p>
+        </div>
+      ) : (
+        <div className="py-4 px-6">
+          <p className="text-xs border-gray-400 pb-4">
+            {t('checkout.address.shipping.chosen_address')}:{' '}
+            {shipping_address?.city.name}
+          </p>
+          {shippingOptions.map((option) => (
             <div
               key={option.pk}
               className="py-4 border-t border-gray-400 flex justify-between"
@@ -176,7 +40,9 @@ const ShippingOptions: React.FC = () => {
               <Radio
                 name="shipping"
                 checked={option.pk === shipping_option?.pk}
-                onChange={() => setShippingOption(option.pk)}
+                onChange={() => {
+                  setShippingOption(option.pk);
+                }}
                 data-testid={`checkout-shipping-option-${option.pk}`}
               >
                 {option.name}
@@ -186,78 +52,16 @@ const ShippingOptions: React.FC = () => {
               </span>
             </div>
           ))}
-
-        {attributeBasedShippingOptions &&
-          Object.keys(attributeBasedShippingOptions).length > 0 &&
-          Object.entries(attributeBasedShippingOptions).map(
-            ([color, options]) => (
-              <div key={color}>
-                <h3 className="text-lg font-bold">{color}</h3>
-                {options.map((option) => (
-                  <div
-                    key={option.pk}
-                    className="py-4 border-t border-gray-400 flex justify-between"
-                  >
-                    <Radio
-                      name={`attribute-based-shipping-${color}`}
-                      checked={selectedShippingOptions[color] === option.pk}
-                      onChange={() =>
-                        handleAttributeBasedOptionChange(color, option.pk)
-                      }
-                      data-testid={`checkout-attribute-based-shipping-${option.pk}`}
-                    >
-                      {`${option.shipping_option_name}`}
-                    </Radio>
-                    <span className="text-xs">
-                      <Price value={option.shipping_amount} />
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )
-          )}
-
-        {dataSourceShippingOptions &&
-          dataSourceShippingOptions.length > 0 &&
-          dataSourceShippingOptions.map((option) => (
-            <div key={option.pk}>
-              <h3 className="text-lg font-bold">{option?.name}</h3>
-              {option.data_source_shipping_options.map((opt) => (
-                <div
-                  key={opt.pk}
-                  className="py-4 border-t border-gray-400 flex justify-between"
-                >
-                  <Radio
-                    name={`data-source-shipping-${option.pk}`}
-                    checked={
-                      selectedPks?.some((item) => item.optionPk === opt.pk) ||
-                      false
-                    }
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleRadioChange(e, option.pk)
-                    }
-                    value={opt.pk}
-                    data-testid={`checkout-data-source-shipping-${opt.pk}`}
-                  >
-                    {opt?.shipping_option_name}
-                  </Radio>
-                  <span className="text-xs">
-                    <Price value={opt?.shipping_amount} />
-                  </span>
-                </div>
-              ))}
-            </div>
-          ))}
-
-        <Button
-          className="mt-2 w-full"
-          disabled={!steps.shipping.completed}
-          onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
-          data-testid="checkout-shipping-save"
-        >
-          {t('checkout.address.shipping.button')}
-        </Button>
-      </div>
+          <Button
+            className="mt-2 w-full"
+            disabled={!steps.shipping.completed}
+            onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
+            data-testid="checkout-shipping-save"
+          >
+            {t('checkout.address.shipping.button')}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

package/app-template/src/views/header/mobile-menu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import { MenuItemType } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeMobileMenu } from '@akinon/next/redux/reducers/header';
@@ -32,30 +32,9 @@ export default function MobileMenu(props: MobileMenuProps) {
     (state) => state.header.isMobileMenuOpen
   );
 
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        isMobileMenuOpen &&
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node)
-      ) {
-        dispatch(closeMobileMenu());
-        setSelectedSubMenu(null);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMobileMenuOpen]);
-
   return (
     <>
+      {/* MENU OVERLAY */}
       <div
         className={clsx(
           'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black bg-opacity-80 transition duration-500',
@@ -63,10 +42,14 @@ export default function MobileMenu(props: MobileMenuProps) {
             '!visible !opacity-100 scroll-lock': isMobileMenuOpen
           }
         )}
+        // TODO: Remove this after we have a better solution for clicking outside of the menu
+        onClick={() => {
+          dispatch(closeMobileMenu());
+          setSelectedSubMenu(null);
+        }}
       />
-
+      {/* TODO: Add a way to close the menu when clicking outside of it */}
       <div
-        ref={menuRef}
         className={clsx(
           'fixed top-0 left-0 z-50 flex flex-col bg-white w-72 pt-4 h-screen invisible opacity-0 transition duration-500 transform -translate-x-72',
           {

package/app-template/tsconfig.json

@@ -3,19 +3,7 @@
   "display": "Default",
   "compilerOptions": {
     "baseUrl": "./src",
-    "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
-      "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
-      ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
-      "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
-      ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
-    },
+    "paths": { "@theme/*": ["./*"] },
     "allowSyntheticDefaultImports": true,
     "composite": false,
     "declaration": true,
@@ -52,5 +40,7 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": ["node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.55.0-rc.0",
+  "version": "1.55.0",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {
@@ -19,7 +19,7 @@
     "@types/temp": "0.9.4"
   },
   "dependencies": {
-    "loading-spinner": "^1.2.1",
+    "loading-spinner": "1.2.1",
     "prompt-checkbox": "2.2.0",
     "semver": "7.6.2",
     "temp": "0.9.4",

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

@@ -1,8 +0,0 @@
-import Page, {
-  dynamic,
-  revalidate,
-  generateMetadata
-} from '@akinon/next/routes/pretty-url';
-
-export { dynamic, revalidate, generateMetadata };
-export default Page;

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

@@ -1,163 +0,0 @@
-import clsx from 'clsx';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { Facet, FacetChoice } from '@akinon/next/types';
-import { Accordion, Radio, Checkbox, LoaderSpinner } 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';
-import { usePathname } from 'next/navigation';
-import { useState } from 'react';
-
-const COMPONENT_TYPES = {
-  [WIDGET_TYPE.category]: Radio,
-  [WIDGET_TYPE.multiselect]: Checkbox
-};
-
-const sizeKey = commonProductAttributes.find(
-  (item) => item.translationKey === 'size'
-).key;
-
-interface Props {
-  facet: Facet;
-  isPending: boolean;
-  startTransition: (callback: () => void) => void;
-}
-
-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, isPending, startTransition }: Props) => {
-  const dispatch = useAppDispatch();
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const [pendingChoice, setPendingChoice] = useState<string | null>(null);
-
-  const handleSelectFilter = ({
-    facet,
-    choice
-  }: {
-    facet: Facet;
-    choice: FacetChoice;
-  }) => {
-    setPendingChoice(choice.label);
-    startTransition(() => {
-      if (facet.key === 'category_ids') {
-        router.push(choice.url);
-      } else {
-        dispatch(toggleFacet({ facet, choice }));
-      }
-      setPendingChoice(null);
-
-      const urlSearchParams = new URLSearchParams(window.location.search);
-      urlSearchParams.delete(facet.search_key);
-      router.replace(pathname + '?' + urlSearchParams.toString());
-    });
-  };
-
-  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) => (
-          <div key={choice.label} className="relative">
-            <Component
-              key={choice.label}
-              data={choice}
-              name={facet.key}
-              onChange={() => handleSelectFilter({ facet, choice })}
-              onClick={() =>
-                facet.key === sizeKey && handleSelectFilter({ facet, choice })
-              }
-              checked={choice.is_selected}
-              data-testid={`${choice.label.trim()}`}
-              disabled={isPending}
-            >
-              {choice.label} (
-              <span
-                data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
-              >
-                {choice.quantity}
-              </span>
-              )
-            </Component>
-
-            {isPending && pendingChoice === choice.label && (
-              <div className="absolute inset-0 flex items-center justify-center z-50">
-                <LoaderSpinner />
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </Accordion>
-  );
-};