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

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 shadow p-4 min-h-[8rem]',
+        'cursor-pointer relative w-full border border-gray-200 shadow-sm 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 shadow p-4',
+                    'relative cursor-pointer w-full min-h-[8rem] border border-gray-200 shadow-sm 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

@@ -149,7 +149,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 overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"
                 components={{
@@ -162,7 +162,7 @@ export const Summary = () => {
                 }}
               />
             </div>
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               {preOrder.shipping_address?.line}{' '}
               {preOrder.shipping_address?.postcode}{' '}
               {preOrder.shipping_address?.district && (

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode, useMemo, useRef, useCallback } from 'react';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
   closeMiniBasket,
@@ -29,8 +29,11 @@ interface MenuItem {
 export default function ActionMenu() {
   const dispatch = useAppDispatch();
 
-  const { data } = useGetBasketQuery();
-  const totalQuantity = useMemo(() => data?.total_quantity ?? 0, [data]);
+  const { data: miniBasket } = useGetMiniBasketQuery();
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
 
   const { open: miniBasketOpen } = useAppSelector(
     (state) => state.root.miniBasket
@@ -89,7 +92,11 @@ export default function ActionMenu() {
           ref={menu.miniBasket ? miniBasketRef : null}
         >
           {menu.action ? (
-            <button onClick={menu.action} data-testid={menu.dataTestId}>
+            <button
+              onClick={menu.action}
+              data-testid={menu.dataTestId}
+              className="cursor-pointer"
+            >
               <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 overflow-ellipsis line-clamp-2 h-full flex items-center justify-center">
+        <div className="text-center text-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">
+        <div className="flex items-center justify-end h-full gap-10">
           <UserMenu isMobile={false} />
           <ActionMenu />
         </div>

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

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import {
   basketApi,
   useGetBasketQuery,
+  useGetMiniBasketQuery,
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
@@ -150,13 +151,23 @@ export default function MiniBasket() {
     (state) => state.root.miniBasket
   );
   const dispatch = useAppDispatch();
-  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const {
+    data: basket,
+    isLoading,
+    isSuccess
+  } = useGetBasketQuery(undefined, {
+    skip: !miniBasketOpen
+  });
+  const { data: miniBasket } = useGetMiniBasketQuery();
   const { t } = useLocalization();
   const { highlightedItem } = useAppSelector((state) => state.root.miniBasket);
   const [highlightedItemPk, setHighlightedItemPk] = useState(0);
   const [sortedBasket, setSortedBasket] = useState([]);
 
-  const totalQuantity = useMemo(() => basket?.total_quantity ?? 0, [basket]);
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
   const miniBasketList = useRef(null);
 
   useEffect(() => {
@@ -192,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 bg-opacity-80 transition-all duration-300'
+          'fixed top-0 left-0 z-50 w-screen h-screen bg-black/80 transition-all duration-300'
         )}
         onClick={() => {
           dispatch(closeMiniBasket());
@@ -206,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">
+        <header className="flex items-center gap-2 pb-3 border-b border-gray-200">
           <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 bg-opacity-80 transition duration-500',
+          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black/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 h-[61px] py-4 mb-4">
+            <header className="flex items-center justify-between border-b border-gray-200 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 flex-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 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

@@ -22,19 +22,31 @@ export default function Search() {
     if (isSearchOpen) {
       inputRef.current?.focus();
       document.body.style.overflow = 'hidden';
+
+      const handleEscKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          dispatch(closeSearch());
+        }
+      };
+
+      document.addEventListener('keydown', handleEscKey);
+      return () => {
+        document.removeEventListener('keydown', handleEscKey);
+        document.body.style.overflow = 'auto';
+      };
     }
 
     return () => {
       document.body.style.overflow = 'auto';
     };
-  }, [isSearchOpen]);
+  }, [isSearchOpen, dispatch]);
 
   return (
     <>
       <div
         className={clsx(
           // 177px is the height of the header
-          'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
+          'absolute bg-black/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'
@@ -48,7 +60,7 @@ export default function Search() {
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
+        <div className="max-w-(--breakpoint-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')}
@@ -62,7 +74,7 @@ export default function Search() {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
                   }
                 }}
-                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
+                className="border-0 text-2xl outline-hidden text-secondary placeholder:text-xl lg:placeholder:text-2xl"
                 placeholder={t('common.search.placeholder')}
                 ref={inputRef}
               />

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

package/app-template/src/views/installment-options/index.tsx

@@ -22,7 +22,7 @@ const InstallmentOptions = (props: InstallmentProps) => {
 
   useEffect(() => {
     if (isSuccess && data) {
-      setActiveCardSlug(data.results[0].slug);
+      setActiveCardSlug(data.results?.[0]?.slug);
     }
   }, [isSuccess, data]);
 

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

@@ -103,10 +103,34 @@ export const Login = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof LoginFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof LoginFormType, {
+            type: 'custom',
+            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(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {
@@ -195,7 +219,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 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">
+        <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">
           {t('auth.login.form.or')}
         </p>
 
@@ -224,7 +248,7 @@ export const Login = () => {
                 alt={provider.label}
                 width={provider.label === 'Facebook' ? 10 : 18}
                 height={18}
-                className="flex-shrink-0"
+                className="shrink-0"
               />
             )}
 

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

@@ -10,9 +10,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
 import { useOtpLoginMutation } from '@akinon/next/data/client/user';
-import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { AuthError } from '@akinon/next/types';
+import { showPopup } from '@akinon/pz-otp/src/redux/reducer';
 
 const loginFormSchema = (t) =>
   yup.object().shape({
@@ -25,9 +26,9 @@ const loginFormSchema = (t) =>
   });
 
 export const OtpLogin = () => {
+  const dispatch = useAppDispatch();
   const { user_phone_format } = useAppSelector((state) => state.config);
   const { t, locale } = useLocalization();
-  const [showOtpModal, setShowOtpModal] = useState(false);
   const [otpLoginMutation] = useOtpLoginMutation();
 
   const {
@@ -79,7 +80,7 @@ export const OtpLogin = () => {
     })
       .unwrap()
       .then(() => {
-        setShowOtpModal(true);
+        dispatch(showPopup());
       })
       .catch((error) => {
         if (error.status === 429) {
@@ -136,17 +137,14 @@ export const OtpLogin = () => {
         </Button>
       </form>
 
-      {showOtpModal && (
-        <PluginModule
-          component={Component.Otp}
-          props={{
-            setShowPopup: setShowOtpModal,
-            data: getValues(),
-            submitAction: loginHandler,
-            error: formError
-          }}
-        />
-      )}
+      <PluginModule
+        component={Component.Otp}
+        props={{
+          data: getValues(),
+          submitAction: loginHandler,
+          error: formError
+        }}
+      />
     </section>
   );
 };

package/app-template/src/views/product/price-wrapper.tsx

@@ -13,7 +13,8 @@ export interface PriceProps {
 export default function PriceWrapper(props: PriceProps) {
   const { t } = useLocalization();
   const { price, retailPrice } = props;
-  const hasRetailPrice = parseFloat(retailPrice) > parseFloat(price);
+  const hasRetailPrice =
+    parseFloat(retailPrice || '0') > parseFloat(price || '0');
 
   return (
     <div className="flex items-center gap-3 justify-center h-full">
@@ -31,7 +32,11 @@ export default function PriceWrapper(props: PriceProps) {
       {hasRetailPrice && (
         <div className="flex flex-col items-center w-9 py-0.5 text-xs text-white bg-secondary">
           <span className="font-bold">
-            {Math.round(100 - (parseInt(price) / parseInt(retailPrice)) * 100)}%
+            {Math.round(
+              100 -
+                (parseInt(price || '0') / parseInt(retailPrice || '1')) * 100
+            )}
+            %
           </span>
           <span>{t('product.off')}</span>
         </div>

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

@@ -23,6 +23,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [stockAlertResponseMessage, setStockAlertResponseMessage] =
     useState(null);
+  const [isVariantLoading, setIsVariantLoading] = useState(false);
 
   const [addProduct, { isLoading: isAddToCartLoading }] =
     useAddProductToBasket();
@@ -30,6 +31,18 @@ export default function ProductInfo({ data }: ProductPageProps) {
     useAddStockAlertMutation();
   const inStock = data.selected_variant !== null || data.product.in_stock;
 
+  useEffect(() => {
+    isVariantSelectionComplete() && setIsVariantLoading(false);
+
+    !inStock && setIsVariantLoading(false);
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (isVariantLoading) {
+      setProductError(null);
+    }
+  }, [isVariantLoading]);
+
   useEffect(() => {
     setCurrentUrl(window.location.href);
   }, [currentUrl]);
@@ -82,6 +95,12 @@ export default function ProductInfo({ data }: ProductPageProps) {
     return true;
   };
 
+  const isVariantSelectionComplete = () => {
+    return data?.variants.every((variant) =>
+      variant?.options.some((opt) => opt.is_selected)
+    );
+  };
+
   const addProductToStockAlertList = async () => {
     try {
       await addStockAlert({
@@ -159,7 +178,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
     <>
       <div
         className={clsx(
-          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
+          'fixed bottom-0 left-0 w-1/2 h-14 z-20 bg-white mt-0 border-t border-gray-500 items-center justify-center',
           'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
         )}
       >
@@ -174,7 +193,10 @@ export default function ProductInfo({ data }: ProductPageProps) {
             key={variant.attribute_key}
             {...variant}
             className="items-center mt-8"
-            onChange={() => setProductError(null)}
+            onChange={() => {
+              setProductError(null);
+              setIsVariantLoading(true);
+            }}
           />
         ))}
       </div>
@@ -186,9 +208,11 @@ export default function ProductInfo({ data }: ProductPageProps) {
       )}
 
       <Button
-        disabled={isAddToCartLoading || isAddToStockAlertLoading}
+        disabled={
+          isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading
+        }
         className={clsx(
-          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground',
+          'fixed bottom-0 right-0 w-1/2 h-14 z-20 flex items-center justify-center fill-primary-foreground',
           'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
         )}
         onClick={() => {
@@ -202,7 +226,13 @@ export default function ProductInfo({ data }: ProductPageProps) {
         }}
         data-testid="product-add-to-cart"
       >
-        {inStock ? (
+        {isVariantLoading ? (
+          <Icon
+            name="spinner"
+            size={20}
+            className="animate-spin mr-4 fill-primary"
+          />
+        ) : inStock ? (
           <span>{t('product.add_to_cart')}</span>
         ) : (
           <>

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

@@ -86,7 +86,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
       </div>
 
       <div className="relative lg:col-span-5">
-        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+        <FavButton className="absolute right-8 top-6 z-20 sm:hidden" />
 
         <CarouselCore
           responsive={{

package/app-template/src/views/product-pointer-banner-item.tsx

@@ -109,7 +109,7 @@ const ProductPointerWidget = (props: ProductPointerWidgetProps) => {
             hidden: buttonStatus
           })}
         >
-          <div className="w-full h-full flex items-center gap-2 flex-shrink-0">
+          <div className="w-full h-full flex items-center gap-2 shrink-0">
             <Image
               src={productItem?.kwargs?.value?.card_image?.url}
               alt={productItem?.value?.alt}

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

@@ -143,6 +143,7 @@ export const Register = () => {
     if (registerResponse.error) {
       const errors: AuthError[] = JSON.parse(registerResponse.error);
 
+
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
           onSubmit(data);
@@ -164,10 +165,34 @@ export const Register = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof RegisterFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof RegisterFormType, {
+            type: 'custom',
+            message: parsedValue.join(', '),
+          });
+        } else {
+          Object.keys(parsedValue).forEach((key) => {
+            const fieldName = key as keyof RegisterFormType;
+            const errorMessages = parsedValue[key] as string[];
+    
+            setError(fieldName, {
+              type: 'custom',
+              message: errorMessages.join(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {