@akinon/projectzero 1.44.0 → 1.45.0-rc.0

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

@@ -1,38 +1,174 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import {
+  setCurrentStep,
+  setSelectedShippingOptions
+} from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
-import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
+import {
+  useSetShippingOptionMutation,
+  useSetAttributeBasedShippingOptionsMutation,
+  useSetDataSourceShippingOptionsMutation
+} 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 = () => {
+const ShippingOptions: React.FC = () => {
   const { t } = useLocalization();
-  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
-  const { shipping_option, shipping_address } = preOrder ?? {};
-  const [setShippingOption] = useSetShippingOptionMutation();
   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 ?? {};
 
-  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>
-      {addressList.length < 1 ? (
+  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]
+  );
+
+  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 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>
+    );
+  }
+
+  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);
+  };
+
+  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) => (
             <div
               key={option.pk}
               className="py-4 border-t border-gray-400 flex justify-between"
@@ -40,12 +176,7 @@ const ShippingOptions = () => {
               <Radio
                 name="shipping"
                 checked={option.pk === shipping_option?.pk}
-                onChange={() => {
-                  setShippingOption(option.pk);
-                }}
-                onClick={() => {
-                  setShippingOption(option?.pk);
-                }}
+                onChange={() => setShippingOption(option.pk)}
                 data-testid={`checkout-shipping-option-${option.pk}`}
               >
                 {option.name}
@@ -55,16 +186,78 @@ const ShippingOptions = () => {
               </span>
             </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>
-      )}
+
+        {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>
     </div>
   );
 };

package/app-template/src/views/find-in-store/index.tsx

@@ -162,10 +162,9 @@ export const FindInStore = ({ productPk, productName, variants }) => {
                   </div>
                   <Link
                     href={`https://maps.google.com/?q=${store.latitude},${store.longitude}`}
+                    target="_blank"
                   >
-                    <a target="_blank">
-                      <Button>{t('product.find_in_store.directions')}</Button>
-                    </a>
+                    <Button>{t('product.find_in_store.directions')}</Button>
                   </Link>
                 </div>
               </Accordion>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } 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,9 +32,30 @@ 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',
@@ -42,14 +63,10 @@ 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,7 +3,19 @@
   "display": "Default",
   "compilerOptions": {
     "baseUrl": "./src",
-    "paths": { "@theme/*": ["./*"] },
+    "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/*"]
+    },
     "allowSyntheticDefaultImports": true,
     "composite": false,
     "declaration": true,
@@ -40,7 +52,5 @@
     ".next/types/**/*.ts",
     "../../packages/**/*"
   ],
-  "exclude": ["node_modules",
-    "../../packages/projectzero/app-template"
-  ]
+  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
 }