@akinon/projectzero 1.48.0-rc.4 → 1.48.0

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -5,12 +5,9 @@ import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
 import { Radio } from '@theme/components';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
-import { useMemo } from 'react';
 
 const PaymentOptionButtons = () => {
-  const { preOrder, attributeBasedShippingOptions } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const [setPaymentOption] = useSetPaymentOptionMutation();
   const { filteredPaymentOptions } = usePaymentOptions();
 
@@ -25,23 +22,10 @@ const PaymentOptionButtons = () => {
     });
   };
 
-  const displayedPaymentOptions = useMemo(() => {
-    if (
-      attributeBasedShippingOptions &&
-      Object.keys(attributeBasedShippingOptions).length > 0
-    ) {
-      return filteredPaymentOptions.filter(
-        (option) => option.slug.toLowerCase() !== 'pay-on-delivery'
-      );
-    }
-
-    return filteredPaymentOptions;
-  }, [filteredPaymentOptions, attributeBasedShippingOptions]);
-
   return (
     <>
       <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
-        {displayedPaymentOptions.map((option) => (
+        {filteredPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
             className="border px-4 py-3 mt-3 flex h-12"
@@ -63,7 +47,7 @@ const PaymentOptionButtons = () => {
       </div>
 
       <div className="hidden md:flex">
-        {displayedPaymentOptions.map((option) => (
+        {filteredPaymentOptions.map((option) => (
           <button
             key={`payment-option-${option.pk}`}
             onClick={() => onClickHandler(option)}

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

@@ -85,7 +85,7 @@ const AddressBox = ({
   };
 
   const onSubmit = (data) => {
-    editAddress({ ...data, invalidateTag: 'Addresses' })
+    editAddress(data)
       .unwrap()
       .then((editAddressResponse) => {
         handleAddressClick(addressType, editAddressResponse);
@@ -96,7 +96,7 @@ const AddressBox = ({
   };
 
   const handleRemoveAddress = async (addressPk: number) => {
-    await removeAddress({ id: addressPk, invalidateTag: 'Addresses' });
+    await removeAddress(addressPk);
     setRemoveAddressModalOpen(false);
     dispatch(resetCheckoutState());
 

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

@@ -77,7 +77,7 @@ const Addresses = () => {
   }, [billing_and_shipping_same]);
 
   const onSubmit = (data) => {
-    addAddress({ ...data, invalidateTag: 'Addresses' })
+    addAddress(data)
       .unwrap()
       .then((addAddressResponse) => {
         if (addressList.length === 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,12 @@ const ShippingOptions: React.FC = () => {
               <Radio
                 name="shipping"
                 checked={option.pk === shipping_option?.pk}
-                onChange={() => setShippingOption(option.pk)}
+                onChange={() => {
+                  setShippingOption(option.pk);
+                }}
+                onClick={() => {
+                  setShippingOption(option?.pk);
+                }}
                 data-testid={`checkout-shipping-option-${option.pk}`}
               >
                 {option.name}
@@ -186,78 +55,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/find-in-store/index.tsx

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

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/src/views/product/product-info.tsx

@@ -91,6 +91,8 @@ export default function ProductInfo({ data }: ProductPageProps) {
         .unwrap()
         .then(handleSuccess)
         .catch((err) => handleError(err));
+
+      // TODO: handle success response
     } catch (error) {
       setProductError(error?.data?.non_field_errors || null);
     }

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"
+  ]
 }