@akinon/projectzero 2.0.0-beta.11 → 2.0.0-beta.13

package/app-template/src/views/checkout/steps/payment/options/store-credit.tsx

@@ -0,0 +1,121 @@
+import clsx from 'clsx';
+import {
+  useGetCheckoutLoyaltyBalanceQuery,
+  usePayWithLoyaltyBalanceMutation
+} from '@akinon/next/data/client/checkout';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useMemo, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { Icon, Price } from '@theme/components';
+import { Trans } from '@akinon/next/components';
+import { LoaderSpinner } from '@theme/components';
+
+export const StoreCredits = () => {
+  const { t } = useLocalization();
+
+  const [payWithLoyaltyBalance, { isLoading: isPayWithLoyaltyBalanceLoading }] =
+    usePayWithLoyaltyBalanceMutation();
+
+  const { loyaltyBalance, preOrder } = useAppSelector(
+    (state) => state.checkout
+  );
+
+  const { isLoading: isLoyaltyBalanceLoading } =
+    useGetCheckoutLoyaltyBalanceQuery(undefined, {
+      refetchOnMountOrArgChange: true,
+      skip: !preOrder?.payment_option
+    });
+
+  const isLoyaltyBalanceUsed = useMemo(() => {
+    return parseFloat(preOrder?.loyalty_money ?? '0') > 0;
+  }, [preOrder?.loyalty_money]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      await payWithLoyaltyBalance(isLoyaltyBalanceUsed ? '0' : loyaltyBalance);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (preOrder?.is_guest) {
+    return null;
+  }
+
+  if (isLoyaltyBalanceLoading) {
+    return (
+      <div className="mb-3 px-4 py-3 xs:px-0">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (parseFloat(loyaltyBalance) <= 0) {
+    return null;
+  }
+  return (
+    <div
+      className={twMerge(
+        'hidden  flex-col w-full mb-4 border border-solid border-gray-400 px-0 md:p-4',
+        isPayWithLoyaltyBalanceLoading && 'pointer-events-none opacity-30',
+        parseFloat(loyaltyBalance) > 0 && 'block'
+      )}
+    >
+      <div className="flex w-full items-center">
+        <button onClick={handleClick}>
+          <span
+            className={clsx(
+              'flex h-5 w-5 items-center justify-center rounded border border-solid border-primary',
+              isLoyaltyBalanceUsed ? 'bg-primary' : 'bg-white'
+            )}
+          >
+            <Icon
+              name={isLoyaltyBalanceUsed ? 'check' : ''}
+              size={10}
+              className={clsx({ 'text-white': isLoyaltyBalanceUsed })}
+            />
+          </span>
+        </button>
+
+        <div className="w-full pl-4">
+          <p className="cursor-pointer text-sm" onClick={handleClick}>
+            {t('checkout.payment.store_credit.use_my_store_credits')}
+          </p>
+          <p className="flex text-sm text-[#606060]">
+            {t('checkout.payment.store_credit.available_balance')}:
+            <Price
+              value={loyaltyBalance}
+              currencyCode={preOrder?.currency_type_label}
+              className="pe-1 font-bold"
+            />
+          </p>
+        </div>
+      </div>
+
+      {isLoyaltyBalanceUsed && parseFloat(preOrder?.unpaid_amount) > 0 && (
+        <p className="my-4 text-[15px] font-light italic text-[#707070] max-xs:text-xs">
+          <Trans
+            i18nKey="checkout.payment.store_credit.insufficient_balance"
+            components={{
+              Amount: (
+                <div className="inline-flex">
+                  <Price
+                    value={preOrder?.unpaid_amount}
+                    currencyCode={preOrder?.currency_type_label}
+                    className="text-primary"
+                  />
+                </div>
+              )
+            }}
+          />
+        </p>
+      )}
+    </div>
+  );
+};

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

@@ -44,7 +44,7 @@ const PaymentOptionButtons = () => {
         {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
-            className="border border-gray-200 px-4 py-3 mt-3 flex h-12"
+            className="border px-4 py-3 mt-3 flex h-12"
             onClick={scrollToTop}
           >
             <Radio
@@ -69,10 +69,10 @@ const PaymentOptionButtons = () => {
             onClick={() => onClickHandler(option)}
             className={clsx(
               'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800/60 font-medium',
-              'bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              'border-gray-400 text-xs uppercase text-black-800 font-medium',
+              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
               {
-                'text-black-800/100 border-b-transparent':
+                'text-opacity-100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
               }
             )}

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

@@ -130,7 +130,7 @@ const AddressBox = ({
       onClick={() => handleAddressClick(addressType, address)}
       key={address.pk}
       className={clsx(
-        'cursor-pointer relative w-full border border-gray-200 shadow-sm p-4 min-h-[8rem]',
+        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
         "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
         'after:border-secondary-400 after:absolute after:inset-0 after:duration-150 after:-z-10',
         {
@@ -167,7 +167,7 @@ const AddressBox = ({
       <div className="text-xs flex justify-between">
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
           onClick={() => setIsEditAddressModalOpen(true)}
           data-testid="checkout-address-edit"
         >
@@ -193,7 +193,7 @@ const AddressBox = ({
         </Modal>
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
           onClick={() => setRemoveAddressModalOpen(true)}
           data-testid="checkout-address-remove"
         >

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

@@ -153,7 +153,7 @@ const Addresses = () => {
                   role="button"
                   onClick={() => setIsModalOpen(true)}
                   className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border border-gray-200 shadow-sm p-4',
+                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
                     "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
                     'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
                     {

package/app-template/src/views/checkout/summary.tsx

@@ -8,6 +8,7 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { twMerge } from 'tailwind-merge';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
+import { StoreCredits } from './steps/payment/options/store-credit';
 
 export const Summary = () => {
   const { t } = useLocalization();
@@ -38,6 +39,7 @@ export const Summary = () => {
             'flex flex-col w-full mb-4 border border-solid border-gray-400'
         }}
       />
+      <StoreCredits />
       <div className="flex flex-col w-full border border-solid border-gray-400">
         <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
           <span className="text-black-800 text-xl font-light sm:text-2xl">
@@ -118,6 +120,14 @@ export const Summary = () => {
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
+          {parseFloat(preOrder?.loyalty_money) > 0 && (
+            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+              <span>{t('checkout.summary.loyalty_money_total')}</span>
+              <span>
+                <Price value={preOrder?.loyalty_money} />
+              </span>
+            </div>
+          )}
           <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
             <span>{t('checkout.summary.discounts_total')}</span>
             <span>
@@ -149,7 +159,7 @@ export const Summary = () => {
             </div>
           </div>
           <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
-            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"
                 components={{
@@ -162,7 +172,7 @@ export const Summary = () => {
                 }}
               />
             </div>
-            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               {preOrder.shipping_address?.line}{' '}
               {preOrder.shipping_address?.postcode}{' '}
               {preOrder.shipping_address?.district && (

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

@@ -123,14 +123,14 @@ export const FindInStore = ({ productPk, productName, variants }) => {
               className="w-full"
               options={retailStoreOptions}
               {...register('city_id')}
-              error={errors.city_id}
+              error={errors.city_id as any}
             />
             {sizeOptions.length > 1 && (
               <Select
                 className="w-full"
                 options={sizeOptions}
                 {...register('size')}
-                error={errors.size}
+                error={errors.size as any}
               />
             )}
           </div>

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

@@ -76,7 +76,7 @@ export default function ActionMenu() {
               : 'bg-secondary-500 text-white'
           )}
         >
-          {totalQuantity}
+          <span data-testid="header-basket-count">{totalQuantity}</span>
         </Badge>
       ),
       miniBasket: <MiniBasket />
@@ -92,11 +92,7 @@ export default function ActionMenu() {
           ref={menu.miniBasket ? miniBasketRef : null}
         >
           {menu.action ? (
-            <button
-              onClick={menu.action}
-              data-testid={menu.dataTestId}
-              className="cursor-pointer"
-            >
+            <button onClick={menu.action} data-testid={menu.dataTestId}>
               <Icon name={menu.icon} size={24} />
               {menu.badge}
             </button>

package/app-template/src/views/header/band.tsx

@@ -16,13 +16,13 @@ export default function HeaderBand() {
       </div>
 
       <div className="header-grid-area-nav bg-gray-100 h-auto p-3 sm:header-grid-area-band-m sm:h-9 sm:py-0">
-        <div className="text-center text-ellipsis line-clamp-2 h-full flex items-center justify-center">
+        <div className="text-center overflow-ellipsis line-clamp-2 h-full flex items-center justify-center">
           <HeaderBandText />
         </div>
       </div>
 
       <div className="header-grid-area-main-r h-full pr-4 sm:header-grid-area-band-r sm:pr-0">
-        <div className="flex items-center justify-end h-full gap-10">
+        <div className="flex items-center justify-end h-full">
           <UserMenu isMobile={false} />
           <ActionMenu />
         </div>

package/app-template/src/views/header/index.tsx

@@ -13,7 +13,7 @@ import { getMenu } from '@akinon/next/data/server';
 import { Image } from '@akinon/next/components/image';
 
 export default async function Header() {
-  const response = await getMenu();
+  const response = await getMenu({ depth: 3 });
   const menu = menuGenerator(response);
 
   return (

package/app-template/src/views/header/mini-basket.tsx

@@ -203,7 +203,7 @@ export default function MiniBasket() {
           miniBasketOpen
             ? 'opacity-100 visible lg:invisible'
             : 'opacity-0 invisible',
-          'fixed top-0 left-0 z-50 w-screen h-screen bg-black/80 transition-all duration-300'
+          'fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-80 transition-all duration-300'
         )}
         onClick={() => {
           dispatch(closeMiniBasket());
@@ -217,7 +217,7 @@ export default function MiniBasket() {
           'fixed lg:absolute bottom-0 lg:-bottom-1 right-0 w-80 h-screen lg:h-auto bg-white lg:border-l lg:border-t lg:border-r-2 lg:border-b-2 lg:border-gray-500 p-5 z-50 transition-all duration-300'
         )}
       >
-        <header className="flex items-center gap-2 pb-3 border-b border-gray-200">
+        <header className="flex items-center gap-2 pb-3 border-b">
           <h3 className="text-xl font-bold">
             {t('basket.mini_basket.my_bag')}
           </h3>

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

@@ -58,9 +58,9 @@ export default function MobileMenu(props: MobileMenuProps) {
     <>
       <div
         className={clsx(
-          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black/80 transition duration-500',
+          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black bg-opacity-80 transition duration-500',
           {
-            'visible! opacity-100! scroll-lock': isMobileMenuOpen
+            '!visible !opacity-100 scroll-lock': isMobileMenuOpen
           }
         )}
       />
@@ -70,7 +70,7 @@ export default function MobileMenu(props: MobileMenuProps) {
         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',
           {
-            'visible! opacity-100! translate-x-0': isMobileMenuOpen
+            '!visible !opacity-100 translate-x-0': isMobileMenuOpen
           }
         )}
       >
@@ -106,15 +106,15 @@ export default function MobileMenu(props: MobileMenuProps) {
             className={clsx(
               'absolute top-0 left-0 right-0 px-8 bg-white invisible opacity-0 transition duration-500 transform translate-x-full',
               {
-                'visible! opacity-100! translate-x-0!': selectedSubMenu
+                '!visible !opacity-100 !translate-x-0': selectedSubMenu
               }
             )}
           >
-            <header className="flex items-center justify-between border-b border-gray-200 h-[61px] py-4 mb-4">
+            <header className="flex items-center justify-between border-b h-[61px] py-4 mb-4">
               <Button
                 appearance="ghost"
                 onClick={() => setSelectedSubMenu(null)}
-                className="underline text-xs font-semibold flex items-center gap-2 p-0!"
+                className="underline text-xs font-semibold flex items-center gap-2 !p-0"
               >
                 <Icon name="chevron-start" size={12} className="shrink-0" />
                 {t('common.mobile_menu.back')}

package/app-template/src/views/header/navbar.tsx

@@ -102,7 +102,7 @@ export default function Navbar(props: NavbarProps) {
                           'after:bg-gray'
                         ],
                         {
-                          'visible! opacity-100! delay-500':
+                          '!visible !opacity-100 delay-500':
                             openedMenu === item.pk
                         }
                       )}

package/app-template/src/views/header/pwa-back-button.tsx

@@ -34,7 +34,7 @@ export const PwaBackButton = () => {
   return (
     <div className="relative z-10 md:top-0 md:left-0 md:fixed">
       <button
-        className="bg-secondary-600 text-white flex items-center justify-center shrink-0 w-12 h-12 md:w-10 md:h-9 active:bg-secondary-700"
+        className="bg-secondary-600 text-white flex items-center justify-center flex-shrink-0 w-12 h-12 md:w-10 md:h-9 active:bg-secondary-700"
         onClick={() => router.back()}
       >
         <svg

package/app-template/src/views/header/search/index.tsx

@@ -9,6 +9,7 @@ import { Icon } from '@theme/components';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
 import { useLocalization, useRouter } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 export default function Search() {
   const { t } = useLocalization();
@@ -46,7 +47,7 @@ export default function Search() {
       <div
         className={clsx(
           // 177px is the height of the header
-          'absolute bg-black/75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
+          'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
           isSearchOpen && searchText
             ? 'visible opacity-100'
             : 'invisible opacity-0'
@@ -60,7 +61,7 @@ export default function Search() {
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <div className="max-w-(--breakpoint-2xl) mx-auto flex flex-col gap-12">
+        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
           <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
             <span className="text-xl lg:text-2xl">
               {t('common.search.results_for')}
@@ -74,10 +75,19 @@ export default function Search() {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
                   }
                 }}
-                className="border-0 text-2xl outline-hidden text-secondary placeholder:text-xl lg:placeholder:text-2xl"
+                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
                 placeholder={t('common.search.placeholder')}
                 ref={inputRef}
               />
+
+              <PluginModule
+                component={Component.HeaderImageSearchFeature}
+                props={{
+                  enableTextSearch: true,
+                  isEnabled: true
+                }}
+              />
+
               <Icon
                 name="close"
                 size={14}

package/app-template/src/views/header/search/results.tsx

@@ -80,7 +80,7 @@ export default function Results(props: ResultsProps) {
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
           {products.map((product, index) => (
             <Link href={product?.url} key={index} className="flex flex-col">
-              <div className="relative aspect-315/448">
+              <div className="relative aspect-[315/448]">
                 {product.extra.image ? (
                   <Image
                     src={product.extra.image}

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

@@ -36,9 +36,7 @@ export const UserMenu = (props: UserMenuProps) => {
     <ul
       className={clsx(
         'items-center divide-x divide-black',
-        isMobile
-          ? 'flex pt-2 text-sm pb-6 border-b border-gray-200 mx-8'
-          : 'hidden sm:flex'
+        isMobile ? 'flex pt-2 text-sm pb-6 border-b mx-8' : 'hidden sm:flex'
       )}
       id="user-menu"
     >

package/app-template/src/views/login/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { signIn, SignInOptions } from 'next-auth/react';
+import { signIn } from 'next-auth/react';
 import { useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 import { ROUTES } from '@theme/routes';
-import { LoginFormType } from '@theme/types';
+import { LoginFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Input, Link } from '@theme/components';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -79,11 +79,12 @@ export const Login = () => {
       redirect: false,
       callbackUrl: searchParams.get('callbackUrl') ?? '/',
       captchaValidated,
-      ...data
-    } as SignInOptions);
+      ...data,
+      formType: FormType.login
+    } as PzSignInOptions & { redirect: false });
 
     if (loginResponse.error) {
-      const errors: AuthError[] = JSON.parse(loginResponse.error);
+      const errors: AuthError[] = JSON.parse(loginResponse.code);
 
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
@@ -109,25 +110,25 @@ export const Login = () => {
           try {
             parsedValue = JSON.parse(item.value);
           } catch {
-            parsedValue = [item.value]; 
+            parsedValue = [item.value];
           }
         } else {
-          parsedValue = item.value; 
+          parsedValue = item.value;
         }
 
         if (Array.isArray(parsedValue)) {
           setError(item.name as keyof LoginFormType, {
             type: 'custom',
-            message: parsedValue.join(', '),
+            message: parsedValue.join(', ')
           });
         } else {
           Object.keys(parsedValue).forEach((key) => {
             const fieldName = key as keyof LoginFormType;
             const errorMessages = parsedValue[key] as string[];
-    
+
             setError(fieldName, {
               type: 'custom',
-              message: errorMessages.join(', '),
+              message: errorMessages.join(', ')
             });
           });
         }
@@ -161,7 +162,7 @@ export const Login = () => {
         method="post"
         onSubmit={handleSubmit(onSubmit)}
       >
-        <input type="hidden" value="login" {...register('formType')} />
+        <input type="hidden" value={FormType.login} {...register('formType')} />
         <input type="hidden" value={locale} {...register('locale')} />
 
         <div className={clsx(errors.email ? 'mb-8' : 'mb-4')}>
@@ -219,7 +220,7 @@ export const Login = () => {
           {t('auth.login.form.submit')}
         </Button>
 
-        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600/25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600/25 after:top-1/2 after:right-0">
+        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600 before:bg-opacity-25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600 after:bg-opacity-25 after:top-1/2 after:right-0">
           {t('auth.login.form.or')}
         </p>
 
@@ -248,7 +249,7 @@ export const Login = () => {
                 alt={provider.label}
                 width={provider.label === 'Facebook' ? 10 : 18}
                 height={18}
-                className="shrink-0"
+                className="flex-shrink-0"
               />
             )}
 

package/app-template/src/views/otp-login/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { signIn, SignInOptions } from 'next-auth/react';
+import { signIn } from 'next-auth/react';
 import { useState } from 'react';
-import { OtpLoginFormType } from '@theme/types';
+import { OtpLoginFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Input } from '@theme/components';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -47,11 +47,12 @@ export const OtpLogin = () => {
     const loginResponse = await signIn('default', {
       redirect: false,
       callbackUrl: '/',
-      ...data
-    } as SignInOptions);
+      ...data,
+      formType: FormType.otpLogin
+    } as PzSignInOptions & { redirect: false });
 
     if (loginResponse.error) {
-      const errors: AuthError[] = JSON.parse(loginResponse.error);
+      const errors: AuthError[] = JSON.parse(loginResponse.code);
 
       const fieldErrors = errors.find((error) => error.type === 'field_errors')
         ?.data as { name: string; value: string[] }[];
@@ -100,7 +101,11 @@ export const OtpLogin = () => {
         {t('auth.login.title_gsm')}
       </h2>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <input type="hidden" value="otpLogin" {...register('formType')} />
+        <input
+          type="hidden"
+          value={FormType.otpLogin}
+          {...register('formType')}
+        />
         <input type="hidden" value={locale} {...register('locale')} />
 
         <div className="mb-4">

package/app-template/src/views/product/layout.tsx

@@ -22,6 +22,16 @@ export default async function ProductLayout({
   breadcrumbData,
   children
 }: ProductPageProps) {
+  const categoryIds = breadcrumbData
+    ?.map((item) => item.extra_context?.attributes?.category_id)
+    .filter(Boolean)
+    .join(',');
+
+  const categoryPaths = breadcrumbData
+    ?.map((item) => item.path)
+    .filter(Boolean)
+    .join(',');
+
   return (
     <div className="container mx-auto">
       <div className="max-w-5xl mx-auto my-5 px-7">
@@ -31,7 +41,11 @@ export default async function ProductLayout({
         <div className="col-span-5 lg:col-span-3">
           <ProductInfoSlider product={data.product} />
         </div>
-        <div className="flex flex-col items-center col-span-5 lg:col-span-2">
+        <div
+          className="flex flex-col items-center col-span-5 lg:col-span-2"
+          data-category-ids={categoryIds}
+          data-category-paths={categoryPaths}
+        >
           <div className="w-full">{children}</div>
         </div>
       </div>