@akinon/projectzero 2.0.0-beta.12 → 2.0.0-beta.14

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

@@ -16,7 +16,7 @@ import PaymentHeader from '../../payment-header';
 import CreditCardInstallments from './installments';
 import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { PaymentOption } from '@akinon/next/types';
 
@@ -101,7 +101,7 @@ const CheckoutCreditCard = () => {
     setValue: setFormValue,
     trigger: validateInput,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setError,
     getValues,
     clearErrors
@@ -119,8 +119,12 @@ const CheckoutCreditCard = () => {
   const [years, setYears] = useState([]);
   const [formError, setFormError] = useState(null);
   const [cardBinNumber, setCardBinNumber] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const [setBinNumber] = useSetBinNumberMutation();
-  const [completeCreditCardPayment] = useCompleteCreditCardPaymentMutation();
+  const [completeCreditCardPayment, { isLoading: isCompletingPayment }] =
+    useCompleteCreditCardPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
   const handleCardNumberChange = (value) => {
     const binNumber = value.replace(/\D/g, '').substring(0, 6);
@@ -136,9 +140,20 @@ const CheckoutCreditCard = () => {
   };
 
   const onSubmit: SubmitHandler<CreditCardForm> = async (data) => {
-    const response = await completeCreditCardPayment(data).unwrap();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeCreditCardPayment(data).unwrap();
+      setFormError(response?.errors);
 
-    setFormError(response?.errors);
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -319,7 +334,7 @@ const CheckoutCreditCard = () => {
                         size={16}
                         className="leading-none ml-2"
                       />
-                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2 border-gray-200">
+                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
                         {/* TODO: Fix this */}
                         <Image
                           src="/cvv.jpg"
@@ -392,6 +407,7 @@ const CheckoutCreditCard = () => {
             <Button
               className="group uppercase mt-4 inline-flex items-center justify-center"
               type="submit"
+              disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"
             >
               <span>{t('checkout.payment.credit_card.form.button')}</span>

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -12,6 +12,7 @@ import * as yup from 'yup';
 import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
 import { useLocalization } from '@akinon/next/hooks';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 
@@ -25,21 +26,39 @@ const CheckoutFundsTransfer = () => {
   const {
     handleSubmit,
     control,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm({
     resolver: yupResolver(fundsTransferFormSchema())
   });
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const { bankAccounts, selectedBankAccountPk, preOrder } = useAppSelector(
     (state: RootState) => state.checkout
   );
   const [setFundsTransferOption] = useSetFundsTransferOptionMutation();
-  const [completeFundsTransfer] = useCompleteFundsTransferMutation();
+  const [completeFundsTransfer, { isLoading: isCompletingPayment }] =
+    useCompleteFundsTransferMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
-    const response = await completeFundsTransfer().unwrap();
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
-    setFormError(response?.errors?.non_field_errors);
+  const onSubmit: SubmitHandler<null> = async () => {
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeFundsTransfer().unwrap();
+      setFormError(response?.errors?.non_field_errors);
+
+      if (
+        response?.errors?.non_field_errors ||
+        !checkPaymentWillRedirect(response)
+      ) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -155,6 +174,7 @@ const CheckoutFundsTransfer = () => {
           <Button
             className="group uppercase mt-4 inline-flex items-center justify-center w-full"
             type="submit"
+            disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
           >
             <span> {t('checkout.payment.fund_transfer.button')}</span>

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

@@ -1,16 +1,35 @@
 'use client';
 
+import { useState } from 'react';
 import { useCompleteLoyaltyPaymentMutation } from '@akinon/next/data/client/checkout';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useForm } from 'react-hook-form';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 
 export default function LoyaltyPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const { handleSubmit } = useForm();
-  const [completeLoyaltyPayment] = useCompleteLoyaltyPaymentMutation();
+  const [completeLoyaltyPayment, { isLoading: isCompletingPayment }] =
+    useCompleteLoyaltyPaymentMutation();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const isButtonDisabled = isCompletingPayment || isProcessing;
 
   const onSubmit = async () => {
-    completeLoyaltyPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeLoyaltyPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      console.error('Error completing loyalty payment:', error);
+      setIsProcessing(false);
+    }
   };
 
   return (

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

@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import * as yup from 'yup';
 import { useEffect, useState } from 'react';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import { useMessageListener } from '@akinon/next/hooks';
 
 interface FormValues {
@@ -26,16 +26,33 @@ const formSchema = () =>
 export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm<FormValues>({
     resolver: yupResolver(formSchema())
   });
-  const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
+  const [completeRedirectionPayment, { isLoading: isCompletingPayment }] =
+    useCompleteRedirectionPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
+
   const onSubmit = async () => {
-    completeRedirectionPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeRedirectionPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useMessageListener();
@@ -91,6 +108,7 @@ export default function RedirectionPayment() {
 
         <Button
           data-testid="checkout-submit-button"
+          disabled={isButtonDisabled}
           className={twMerge('w-full md:w-36 px-4 md:px-0')}
         >
           {payment_option.name}

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}