@akinon/projectzero 1.42.0 → 1.43.0-rc.1

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

@@ -1,20 +1,69 @@
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
-import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
+import {
+  useSetShippingOptionMutation,
+  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';
+import { useEffect, useState } from 'react';
 
 const ShippingOptions = () => {
   const { t } = useLocalization();
-  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
-  const { shipping_option, shipping_address } = preOrder ?? {};
+  const {
+    steps,
+    shippingOptions,
+    dataSourceShippingOptions,
+    preOrder,
+    addressList
+  } = useAppSelector((state: RootState) => state.checkout);
+  const { shipping_option, shipping_address, data_source_shipping_options } =
+    preOrder ?? {};
+
+  const [selectedPks, setSelectedPks] = useState<
+    { dataSourcePk: number; optionPk: number }[] | null
+  >(null);
+
   const [setShippingOption] = useSetShippingOptionMutation();
+  const [setDataSourceShippingOption] =
+    useSetDataSourceShippingOptionsMutation();
+
   const dispatch = useAppDispatch();
 
+  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]);
+
+  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">
@@ -32,37 +81,81 @@ const ShippingOptions = () => {
             {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"
-            >
-              <Radio
-                name="shipping"
-                checked={option.pk === shipping_option?.pk}
-                onChange={() => {
-                  setShippingOption(option.pk);
-                }}
-                onClick={() => {
-                  setShippingOption(option?.pk);
-                }}
-                data-testid={`checkout-shipping-option-${option.pk}`}
+          {}
+          {shippingOptions && shippingOptions.length > 0 && (
+            <>
+              {shippingOptions.map((option) => (
+                <div
+                  key={option.pk}
+                  className="py-4 border-t border-gray-400 flex justify-between"
+                >
+                  <Radio
+                    name="shipping"
+                    checked={option.pk === shipping_option?.pk}
+                    onChange={() => {
+                      setShippingOption(option.pk);
+                    }}
+                    data-testid={`checkout-shipping-option-${option.pk}`}
+                  >
+                    {option.name}
+                  </Radio>
+                  <span className="text-xs">
+                    <Price value={option.shipping_amount} />
+                  </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>
+            </>
+          )}
+          {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"
               >
-                {option.name}
-              </Radio>
-              <span className="text-xs">
-                <Price value={option.shipping_amount} />
-              </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>
+                {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"]
 }