@akinon/projectzero 2.0.0-beta.9 → 2.0.1

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

@@ -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 />

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

@@ -168,7 +168,7 @@ export default function MiniBasket() {
     () => miniBasket?.total_quantity ?? 0,
     [miniBasket]
   );
-  const miniBasketList = useRef(null);
+  const miniBasketList = useRef<HTMLUListElement | null>(null);
 
   useEffect(() => {
     if (highlightedItem > 0) {
@@ -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-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

@@ -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
           }
         )}
       >
@@ -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} />
@@ -106,15 +118,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 { 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()) {
@@ -109,25 +114,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(', ')
             });
           });
         }
@@ -146,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"
@@ -176,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}
@@ -191,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')}
@@ -199,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}
@@ -207,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"
@@ -219,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/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
+          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}
@@ -242,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="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={{