@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -62,68 +62,72 @@ const GuestLogin = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className={clsx(errors.user_email ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.email.placeholder')}
-          name="email"
-          className="h-14"
-          {...register('user_email')}
-          error={errors.user_email}
-          data-testid="guest-email"
-          required
-        />
-      </div>
+    <section className="w-full mt-6 lg:mt-8">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <Input
+            labelStyle="floating"
+            label={t('checkout.auth.form.login.email.placeholder')}
+            name="email"
+            className="h-12"
+            {...register('user_email')}
+            error={errors.user_email}
+            data-testid="guest-email"
+            required
+          />
+        </div>
 
-      <div className={clsx(errors.phone_number ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.phone.placeholder')}
-          className="h-14"
-          name="phone_number"
-          type="tel"
-          format={user_phone_format.replace(/9/g, '#')}
-          mask="_"
-          control={control}
-          {...register('phone_number')}
-          error={errors.phone_number}
-          data-testid="guest-phone"
-          required
-        />
-      </div>
+        <div className="mt-4">
+          <Input
+            labelStyle="floating"
+            label={t('checkout.auth.form.login.phone.placeholder')}
+            className="h-12"
+            name="phone_number"
+            type="tel"
+            format={user_phone_format.replace(/9/g, '#')}
+            mask="_"
+            control={control}
+            {...register('phone_number')}
+            error={errors.phone_number}
+            data-testid="guest-phone"
+            required
+          />
+        </div>
 
-      <Button
-        type="submit"
-        className="w-full h-12 uppercase text-xs font-semibold mb-4"
-        data-testid="guest-submit"
-      >
-        {t('checkout.auth.form.login.button')}
-      </Button>
-
-      <div className="text-sm text-black-400 md:text-xs">
-        <p className="mb-4">{t('checkout.auth.form.login.agreement.label')}</p>
-        <Checkbox
-          name="sms_allowed"
-          className={clsx('underline', errors.sms_allowed ? 'mb-8' : 'mb-4')}
-          {...register('sms_allowed')}
-          error={errors.sms_allowed}
-          data-testid="guest-sms"
+        <Button
+          type="submit"
+          className="w-full h-12 uppercase text-xs font-semibold mt-[38px]"
+          data-testid="guest-submit"
         >
-          {t('checkout.auth.form.login.agreement.terms_conditions')}
-        </Checkbox>
+          {t('checkout.auth.form.login.button')}
+        </Button>
 
-        <Checkbox
-          name="confirm"
-          className={clsx('underline', errors.kvkk_confirm ? 'mb-8' : 'mb-4')}
-          {...register('kvkk_confirm')}
-          error={errors.kvkk_confirm}
-          data-testid="guest-kvkk"
-        >
-          {t('checkout.auth.form.login.agreement.privacy_policy')}
-        </Checkbox>
-      </div>
-    </form>
+        <div className="mt-[38px] text-sm text-black-400 md:text-xs">
+          <p className="mb-4">
+            {t('checkout.auth.form.login.agreement.label')}
+          </p>
+          <Checkbox
+            name="sms_allowed"
+            className="underline"
+            {...register('sms_allowed')}
+            error={errors.sms_allowed}
+            data-testid="guest-sms"
+          >
+            {t('checkout.auth.form.login.agreement.terms_conditions')}
+          </Checkbox>
+
+          <Checkbox
+            name="confirm"
+            className="underline mt-4"
+            {...register('kvkk_confirm')}
+            error={errors.kvkk_confirm}
+            data-testid="guest-kvkk"
+          >
+            {t('checkout.auth.form.login.agreement.privacy_policy')}
+          </Checkbox>
+        </div>
+      </form>
+    </section>
   );
 };
 

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
@@ -73,7 +76,7 @@ export default function ActionMenu() {
               : 'bg-secondary-500 text-white'
           )}
         >
-          {totalQuantity}
+          <span data-testid="header-basket-count">{totalQuantity}</span>
         </Badge>
       ),
       miniBasket: <MiniBasket />

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

@@ -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,14 +151,24 @@ 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 miniBasketList = useRef(null);
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
+  const miniBasketList = useRef<HTMLUListElement | null>(null);
 
   useEffect(() => {
     if (highlightedItem > 0) {

package/app-template/src/views/header/mobile-hamburger-button.tsx

@@ -11,24 +11,21 @@ export default function MobileHamburgerButton() {
   const dispatch = useAppDispatch();
 
   return (
-    <div className="flex row-start-2 sm:hidden ">
+    <div className="flex sm:hidden">
       <PwaBackButton />
       <Button
         className={clsx([
-          'w-12',
-          'h-12',
-          'bg-secondary',
-          'text-white',
+          'h-auto',
+          'bg-transparent',
           'flex',
           'items-center',
           'justify-center',
           'px-0',
-          'border-none',
-          'hover:bg-secondary-hover'
+          'border-none'
         ])}
         onClick={() => dispatch(toggleMobileMenu())}
       >
-        <Icon name="hamburger" size={18} className="fill-white" />
+        <Icon name="hamburger" size={18} className="text-black" />
       </Button>
     </div>
   );

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

@@ -90,10 +90,22 @@ export default function MobileMenu(props: MobileMenuProps) {
                       onClick={(e) => {
                         if (item.children.length > 0) {
                           e.preventDefault();
+                          e.stopPropagation();
                           setSelectedSubMenu(item);
+
+                          window?.parent?.postMessage(
+                            {
+                              type: 'MENU_TOGGLE',
+                              isMenuAction: true
+                            },
+                            '*'
+                          );
                         }
                       }}
                       className="flex items-center justify-between"
+                      data-is-menu-toggle={
+                        item.children.length > 0 ? 'true' : undefined
+                      }
                     >
                       <span>{item.label}</span>
                       <Icon name="chevron-end" size={14} />

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();
@@ -22,12 +23,24 @@ 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 (
     <>
@@ -66,6 +79,15 @@ export default function Search() {
                 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/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

@@ -1,10 +1,10 @@
 'use client';
 
-import { signIn, SignInOptions } from 'next-auth/react';
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, 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';
@@ -15,6 +15,7 @@ import { useCaptcha, useLocalization } from '@akinon/next/hooks';
 import { AuthError } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { twMerge } from 'tailwind-merge';
 
 const oauthProviders: Array<{
   key: string;
@@ -24,18 +25,15 @@ const oauthProviders: Array<{
 }> = [
   {
     key: 'google',
-    label: 'Google',
-    image: '/google.svg'
+    label: 'Google'
   },
   {
     key: 'facebook',
-    label: 'Facebook',
-    image: '/facebook.svg'
+    label: 'Facebook'
   },
   {
     key: 'apple',
-    label: 'Apple',
-    image: '/apple.svg'
+    label: 'Apple'
   }
 ];
 
@@ -48,7 +46,11 @@ const loginFormSchema = (t) =>
     password: yup.string().required(t('auth.login.form.error.required'))
   });
 
-export const Login = () => {
+export const Login = ({
+  setActiveTab
+}: {
+  setActiveTab?: (tab: string) => void;
+}) => {
   const { t, locale } = useLocalization();
 
   const { refetch: refetchBasketData } = useGetBasketQuery();
@@ -62,8 +64,10 @@ export const Login = () => {
     resolver: yupResolver(loginFormSchema(t))
   });
 
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const [formError, setFormError] = useState(null);
+  const [isCheckout, setIsCheckout] = useState<boolean>(false);
 
   const {
     CaptchaView,
@@ -79,11 +83,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()) {
@@ -103,10 +108,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) {
@@ -122,29 +151,27 @@ export const Login = () => {
     }
   };
 
-  return (
-    <section
-      className={clsx([
-        'w-full py-10 px-5 md:py-0 md:px-8 md:mx-auto lg:px-16'
-      ])}
-    >
-      <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-        {t('auth.login.title')}
-      </h2>
+  useEffect(() => {
+    if (pathname.includes('/orders/checkout')) {
+      setIsCheckout(true);
+    }
+  }, [pathname]);
 
+  return (
+    <section className="w-full mt-6 lg:mt-8">
       <form
         action="/api/auth/signin/credentials"
         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')}>
+        <div>
           <Input
             labelStyle="floating"
             label={t('auth.login.form.email.placeholder')}
-            className="h-14"
+            className="h-12"
             {...register('email')}
             error={errors.email}
             data-testid="login-email"
@@ -152,11 +179,11 @@ export const Login = () => {
           />
         </div>
 
-        <div className={clsx(errors.password ? 'mb-8' : 'mb-4')}>
+        <div className="mt-4">
           <Input
             labelStyle="floating"
             label={t('auth.login.form.password.placeholder')}
-            className="h-14"
+            className="h-12"
             type="password"
             {...register('password')}
             error={errors.password}
@@ -167,7 +194,7 @@ export const Login = () => {
 
         <Link
           href={ROUTES.FORGOT_PASSWORD}
-          className="block text-sm underline mb-8"
+          className="block text-black-750/75 text-sm underline mt-4"
           data-testid="login-forgot-password"
         >
           {t('auth.login.form.forgot_password')}
@@ -175,7 +202,7 @@ export const Login = () => {
 
         {formError && (
           <p
-            className="text-error text-xs my-5"
+            className="text-error text-xs my-2"
             data-testid="login-error-field"
           >
             {formError}
@@ -183,11 +210,11 @@ export const Login = () => {
         )}
 
         <div className="flex justify-center">
-          <CaptchaView className="mb-5" data-testid="login-captcha" />
+          <CaptchaView className="mt-8" data-testid="login-captcha" />
         </div>
 
         <Button
-          className="w-full h-12 uppercase text-xs font-semibold"
+          className="w-full h-12 text-sm font-normal mt-6 lg:mt-8"
           type="submit"
           disabled={isCaptchaVisible && !captchaValidated}
           data-testid="login-submit"
@@ -195,22 +222,23 @@ 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">
-          {t('auth.login.form.or')}
+        <p
+          className={clsx(
+            twMerge(
+              'relative block text-center mt-3 lg:mt-8 text-black-750 text-sm',
+              'before:absolute before:left-0 before:top-1/2 before:w-full before:h-px before:bg-[#d2d2d2] before:-z-10'
+            )
+          )}
+        >
+          <span className="bg-white px-4">{t('auth.login.form.or')}</span>
         </p>
-
-        <div className="social-login">
-          <p className="mb-3 text-lg text-start font-light md:mb-9 md:text-2xl">
-            {t('auth.login.form.sign_in_with')}
-          </p>
-        </div>
       </form>
 
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
+      <div className="grid gap-4 mt-2">
         {oauthProviders.map((provider) => (
           <Button
             key={provider.key}
-            className="w-full h-14 uppercase text-xs font-semibold flex items-center justify-center gap-2 hover:bg-transparent hover:border hover:border-primary-800 hover:text-primary"
+            className="text-base text-black-750 h-auto py-4 border border-gray-650 leading-[0.94]"
             type="submit"
             appearance="outlined"
             disabled={isCaptchaVisible && !captchaValidated}
@@ -218,19 +246,24 @@ export const Login = () => {
               location.href = `/${provider.key}/login/`;
             }}
           >
-            {provider.image && (
-              <Image
-                src={provider.image}
-                alt={provider.label}
-                width={provider.label === 'Facebook' ? 10 : 18}
-                height={18}
-                className="flex-shrink-0"
-              />
+            {t('auth.login.form.continue_with_provider').replace(
+              '{provider}',
+              provider.localeKey ? t(provider.localeKey) : provider.label
             )}
-
-            {provider.localeKey ? t(provider.localeKey) : provider.label}
           </Button>
         ))}
+        {isCheckout && (
+          <Button
+            className="text-base text-black-750 h-auto py-4 border border-gray-650 leading-[0.94]"
+            type="submit"
+            appearance="outlined"
+            onClick={() => {
+              setActiveTab?.('guest');
+            }}
+          >
+            {t('checkout.auth.continue_as_guest_checkout')}
+          </Button>
+        )}
         <PluginModule
           component={Component.AkifastQuickLoginButton}
           props={{