@akinon/projectzero 1.63.0 → 1.64.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @akinon/projectzero
 
+## 1.64.0
+
 ## 1.63.0
 
 ### Minor Changes

package/app-template/CHANGELOG.md

@@ -1,5 +1,36 @@
 # projectzeronext
 
+## 1.64.0
+
+### Minor Changes
+
+- c53ea3e: ZERO-2609: Reset additional form fields when selectedFormType is not company
+- 27a5296: ZERO-2631:Fix Checkbox Click
+- e665a0a: ZERO-2625: Add click outside functionality to close mobile menu
+- d3474c6: ZERO-2655: Add data source shipping option
+- 7a4bb76: ZERO-2610:Refactor FilterItem component for better readability and efficiency
+- fac2e5b: ZERO-2622: Add isMenuOpen state to Category reducer and update CategoryInfo component
+
+### Patch Changes
+
+- Updated dependencies [c53ea3e]
+- Updated dependencies [d3474c6]
+  - @akinon/next@1.64.0
+  - @akinon/pz-akifast@1.64.0
+  - @akinon/pz-b2b@1.64.0
+  - @akinon/pz-basket-gift-pack@1.64.0
+  - @akinon/pz-bkm@1.64.0
+  - @akinon/pz-checkout-gift-pack@1.64.0
+  - @akinon/pz-click-collect@1.64.0
+  - @akinon/pz-credit-payment@1.64.0
+  - @akinon/pz-gpay@1.64.0
+  - @akinon/pz-masterpass@1.64.0
+  - @akinon/pz-one-click-checkout@1.64.0
+  - @akinon/pz-otp@1.64.0
+  - @akinon/pz-pay-on-delivery@1.64.0
+  - @akinon/pz-saved-card@1.64.0
+  - @akinon/pz-tabby-extension@1.64.0
+
 ## 1.63.0
 
 ### Minor Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,21 +22,21 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.63.0",
-    "@akinon/pz-akifast": "1.63.0",
-    "@akinon/pz-b2b": "1.63.0",
-    "@akinon/pz-basket-gift-pack": "1.63.0",
-    "@akinon/pz-bkm": "1.63.0",
-    "@akinon/pz-checkout-gift-pack": "1.63.0",
-    "@akinon/pz-click-collect": "1.63.0",
-    "@akinon/pz-credit-payment": "1.63.0",
-    "@akinon/pz-gpay": "1.63.0",
-    "@akinon/pz-masterpass": "1.63.0",
-    "@akinon/pz-one-click-checkout": "1.63.0",
-    "@akinon/pz-otp": "1.63.0",
-    "@akinon/pz-pay-on-delivery": "1.63.0",
-    "@akinon/pz-saved-card": "1.63.0",
-    "@akinon/pz-tabby-extension": "1.63.0",
+    "@akinon/next": "1.64.0",
+    "@akinon/pz-akifast": "1.64.0",
+    "@akinon/pz-b2b": "1.64.0",
+    "@akinon/pz-basket-gift-pack": "1.64.0",
+    "@akinon/pz-bkm": "1.64.0",
+    "@akinon/pz-checkout-gift-pack": "1.64.0",
+    "@akinon/pz-click-collect": "1.64.0",
+    "@akinon/pz-credit-payment": "1.64.0",
+    "@akinon/pz-gpay": "1.64.0",
+    "@akinon/pz-masterpass": "1.64.0",
+    "@akinon/pz-one-click-checkout": "1.64.0",
+    "@akinon/pz-otp": "1.64.0",
+    "@akinon/pz-pay-on-delivery": "1.64.0",
+    "@akinon/pz-saved-card": "1.64.0",
+    "@akinon/pz-tabby-extension": "1.64.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -61,7 +61,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.63.0",
+    "@akinon/eslint-plugin-projectzero": "1.64.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/src/components/checkbox.tsx

@@ -3,7 +3,7 @@ import { CheckboxProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, checked, error, ...rest } = props;
+  const { children, checked = false, error, ...rest } = props;
 
   return (
     <label className={twMerge('flex flex-col text-xs', props.className)}>
@@ -12,7 +12,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           type="checkbox"
           {...rest}
           ref={ref}
-          checked={checked ?? false}
+          defaultChecked={checked}
           className="w-4 h-4 shrink-0"
         />
         {children && <span className="ml-2">{children}</span>}

package/app-template/src/redux/reducers/category.ts

@@ -7,11 +7,13 @@ import { WIDGET_TYPE } from '@theme/types';
 export interface CategoryState {
   facets: Facet[];
   selectedFacets: Facet[];
+  isMenuOpen: boolean;
 }
 
 const initialState: CategoryState = {
   facets: [],
-  selectedFacets: []
+  selectedFacets: [],
+  isMenuOpen: false
 };
 
 const categorySlice = createSlice({
@@ -24,6 +26,9 @@ const categorySlice = createSlice({
     setSelectedFacets(state, action) {
       state.selectedFacets = action.payload;
     },
+    setMenuOpen(state, action) {
+      state.isMenuOpen = action.payload;
+    },
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
@@ -81,6 +86,7 @@ const categorySlice = createSlice({
 export const {
   setFacets,
   setSelectedFacets,
+  setMenuOpen,
   toggleFacet,
   removeCategoryFacet,
   resetSelectedFacets

package/app-template/src/views/account/address-form.tsx

@@ -183,12 +183,22 @@ export const AddressForm = (props: Props) => {
     if (data && country) {
       reset({
         ...data,
-        is_corporate:
-          String(data.is_corporate) === AddressType.company ? 'true' : 'false' // TODO: Fix this! This hack for radio buttons can't be set to boolean value
+        is_corporate: String(data.is_corporate)
       });
     }
   }, [data, country, reset]);
 
+  useEffect(() => {
+    if (selectedFormType !== AddressType.company) {
+      reset({
+        ...watch(),
+        company_name: '',
+        tax_office: '',
+        tax_no: ''
+      });
+    }
+  }, [selectedFormType, reset, watch]);
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}

package/app-template/src/views/category/category-info.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import { useSearchParams } from 'next/navigation';
 import { CategoryHeader } from './category-header';
@@ -8,13 +8,14 @@ import { Filters } from './filters';
 import { Pagination } from '@theme/components';
 import { ProductItem } from '@theme/views/product-item';
 import { GetCategoryResponse } from '@akinon/next/types';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { setFacets } from '@theme/redux/reducers/category';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
 import { useLocalization } from '@akinon/next/hooks';
 import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
 import { useRouter } from '@akinon/next/hooks';
+import { RootState } from '@theme/redux/store';
 
 interface ListPageProps {
   data: GetCategoryResponse;
@@ -22,13 +23,16 @@ interface ListPageProps {
 
 export default function ListPage(props: ListPageProps) {
   const { data } = props;
-  const [isMenuOpen, setIsMenuOpen] = useState(false); // TODO: Move to redux
+  const dispatch = useAppDispatch();
+  const isMenuOpen = useAppSelector(
+    (state: RootState) => state.category.isMenuOpen
+  );
 
   const searchParams = useSearchParams();
   const router = useRouter();
 
   const layoutSize = useMemo(
-    () => searchParams.get('layout') ?? 3,
+    () => Number(searchParams.get('layout') ?? 3),
     [searchParams]
   );
 
@@ -37,16 +41,24 @@ export default function ListPage(props: ListPageProps) {
     [searchParams]
   );
 
+  const itemDimensions = useMemo(() => {
+    switch (layoutSize) {
+      case 2:
+        return { width: 510, height: 765 };
+      case 3:
+      default:
+        return { width: 340, height: 510 };
+    }
+  }, [layoutSize]);
+
   useEffect(() => {
     if (page > 1 && data.products?.length === 0) {
       const newUrl = new URL(window.location.href);
-
       newUrl.searchParams.delete('page');
       router.push(newUrl.pathname + newUrl.search, undefined);
     }
-  }, [searchParams, data.products, page]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [searchParams, data.products, page]);
 
-  const dispatch = useAppDispatch();
   const { t } = useLocalization();
 
   useEffect(() => {
@@ -58,9 +70,12 @@ export default function ListPage(props: ListPageProps) {
     <>
       <div className="container px-4 mx-auto lg:px-0 lg:my-4">
         <div className="grid grid-cols-[19rem_1fr]">
-          <Filters isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
+          <Filters
+            isMenuOpen={isMenuOpen}
+            setIsMenuOpen={(open) => dispatch(setMenuOpen(open))}
+          />
           <div
-            onClick={() => setIsMenuOpen(false)}
+            onClick={() => dispatch(setMenuOpen(false))}
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
@@ -71,7 +86,7 @@ export default function ListPage(props: ListPageProps) {
           <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
             <CategoryHeader
               totalCount={data.pagination?.total_count}
-              setMenuStatus={() => setIsMenuOpen(true)}
+              setMenuStatus={() => dispatch(setMenuOpen(true))}
               sortOptions={data.sorters}
             />
             <div className="hidden lg:block">
@@ -91,18 +106,17 @@ export default function ListPage(props: ListPageProps) {
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                'md:grid-cols-3': Number(layoutSize) === 3,
-                'lg:grid-cols-2': Number(layoutSize) === 2,
-                'lg:grid-cols-3': Number(layoutSize) === 3
+                'md:grid-cols-3': layoutSize === 3,
+                'lg:grid-cols-2': layoutSize === 2,
+                'lg:grid-cols-3': layoutSize === 3
               })}
             >
               {data.products.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
-                  // TODO: Find a better way to handle layout size
-                  width={340}
-                  height={510}
+                  width={itemDimensions.width}
+                  height={itemDimensions.height}
                   index={index}
                 />
               ))}

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/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,34 +81,83 @@ 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);
-                }}
-                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);
+                    }}
+                    onClick={() => {
+                      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/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/package.json

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