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

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={{

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { signIn, SignInOptions } from 'next-auth/react';
+import { signIn } from 'next-auth/react';
 import { useState } from 'react';
-import { OtpLoginFormType } from '@theme/types';
+import { OtpLoginFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Input } from '@theme/components';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -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 {
@@ -46,11 +47,12 @@ export const OtpLogin = () => {
     const loginResponse = await signIn('default', {
       redirect: false,
       callbackUrl: '/',
-      ...data
-    } as SignInOptions);
+      ...data,
+      formType: FormType.otpLogin
+    } as PzSignInOptions & { redirect: false });
 
     if (loginResponse.error) {
-      const errors: AuthError[] = JSON.parse(loginResponse.error);
+      const errors: AuthError[] = JSON.parse(loginResponse.code);
 
       const fieldErrors = errors.find((error) => error.type === 'field_errors')
         ?.data as { name: string; value: string[] }[];
@@ -79,7 +81,7 @@ export const OtpLogin = () => {
     })
       .unwrap()
       .then(() => {
-        setShowOtpModal(true);
+        dispatch(showPopup());
       })
       .catch((error) => {
         if (error.status === 429) {
@@ -99,7 +101,11 @@ export const OtpLogin = () => {
         {t('auth.login.title_gsm')}
       </h2>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <input type="hidden" value="otpLogin" {...register('formType')} />
+        <input
+          type="hidden"
+          value={FormType.otpLogin}
+          {...register('formType')}
+        />
         <input type="hidden" value={locale} {...register('locale')} />
 
         <div className="mb-4">
@@ -136,17 +142,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/accordion-section.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+/**
+ * Accordion Section Wrapper
+ *
+ * Wraps accordion components with Theme Editor styling support.
+ * Applies CSS variables for customization via Theme Editor.
+ */
+
+import { PropsWithChildren, CSSProperties, useMemo } from 'react';
+import clsx from 'clsx';
+import {
+  useProductDetail,
+  ACCORDION_SECTION_ID
+} from '@theme/views/product-detail';
+
+export default function AccordionSection({ children }: PropsWithChildren) {
+  const { isDesigner, selectedSectionId, accordionStyles } = useProductDetail();
+
+  const isSelected = isDesigner && selectedSectionId === ACCORDION_SECTION_ID;
+
+  const cssVariables = useMemo((): CSSProperties => {
+    if (!accordionStyles) return {};
+
+    const vars: Record<string, string> = {};
+    Object.entries(accordionStyles).forEach(([key, value]) => {
+      if (value) {
+        vars[`--accordion-${key}`] = value;
+      }
+    });
+    return vars as CSSProperties;
+  }, [accordionStyles]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      e.stopPropagation();
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: ACCORDION_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  return (
+    <div
+      className={clsx('accordion-section-wrapper', {
+        'ring-2 ring-blue-500 ring-offset-2': isSelected
+      })}
+      style={cssVariables}
+      onClick={handleClick}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -1,59 +1,151 @@
 'use client';
 
 import { useLocalization } from '@akinon/next/hooks';
-import React from 'react';
+import React, { useMemo, CSSProperties } from 'react';
 import { Accordion } from '@theme/components';
 import InstallmentOptions from '@theme/views/installment-options';
+import AccordionSection from './accordion-section';
+import { useProductDetail } from '@theme/views/product-detail';
 
 export default function AccordionWrapper({ data, deliveryReturn }) {
   const { t } = useLocalization();
+  const { accordionStyles } = useProductDetail();
+
+  const iconSize = useMemo(() => {
+    const size = accordionStyles['icon-size'];
+    const parsed = parseInt(size);
+    return !isNaN(parsed) ? parsed : 15;
+  }, [accordionStyles]);
+
+  const iconColor = useMemo(
+    () => accordionStyles['icon-color'] || '#6b7280',
+    [accordionStyles]
+  );
+
+  const containerStyle = useMemo(
+    (): CSSProperties => ({
+      width: '100%',
+      marginTop: accordionStyles['container-spacing'] || '1rem',
+      borderColor: accordionStyles['container-border-color'] || 'transparent',
+      borderWidth: accordionStyles['container-border-width'] || '0',
+      borderRadius: accordionStyles['container-border-radius'] || '0',
+      borderStyle: 'solid'
+    }),
+    [accordionStyles]
+  );
+
+  const headerStyle = useMemo(
+    (): CSSProperties => ({
+      fontSize: accordionStyles['title-font-size'] || '1rem',
+      fontWeight: accordionStyles['title-font-weight'] || '600',
+      color: accordionStyles['title-color'] || '#111827',
+      backgroundColor:
+        accordionStyles['title-background-color'] || 'transparent',
+      paddingLeft: accordionStyles['title-padding-x'] || '1rem',
+      paddingRight: accordionStyles['title-padding-x'] || '1rem',
+      paddingTop: accordionStyles['title-padding-y'] || '0.75rem',
+      paddingBottom: accordionStyles['title-padding-y'] || '0.75rem',
+      borderBottom: `1px solid ${
+        accordionStyles['container-border-color'] || '#e5e7eb'
+      }`
+    }),
+    [accordionStyles]
+  );
+
+  const contentStyle = useMemo(
+    (): CSSProperties => ({
+      fontSize: accordionStyles['content-font-size'] || '0.875rem',
+      fontWeight: accordionStyles['content-font-weight'] || '400',
+      color: accordionStyles['content-color'] || '#6b7280',
+      backgroundColor:
+        accordionStyles['content-background-color'] || 'transparent',
+      paddingLeft: accordionStyles['content-padding-x'] || '1rem',
+      paddingRight: accordionStyles['content-padding-x'] || '1rem',
+      paddingTop: accordionStyles['content-padding-y'] || '0.75rem',
+      paddingBottom: accordionStyles['content-padding-y'] || '0.75rem'
+    }),
+    [accordionStyles]
+  );
 
   const generateHtml = (data: string) => {
     return { __html: data };
   };
 
   return (
-    <div className="w-full">
-      <Accordion
-        title={t('product.details_care')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        {t('product.product_code')}: {data.product.sku} -{' '}
-        {data.product.base_code}
-        {data.product.attributes.integration_ProductAtt03Desc &&
-          data.product.attributes.integration_ProductAtt03Desc}
-        {data.product.attributes.integration_kumas_icerik &&
-          data.product.attributes.integration_kumas_icerik}
-        {data.product.attributes.model_olculeri &&
-          data.product.attributes.model_olculeri}
-        {data.product.attributes.aciklama && (
-          <div
-            dangerouslySetInnerHTML={generateHtml(
-              data.product.attributes.aciklama
-            )}
-          />
-        )}
-      </Accordion>
-      <Accordion
-        title={t('product.delivery_collections')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        <div
-          dangerouslySetInnerHTML={generateHtml(
-            deliveryReturn?.product_delivery_returns?.value
-          )}
-        />
-      </Accordion>
-
-      <Accordion
-        title={t('product.installment_options')}
-        icons={['minus', 'plus']}
-        iconSize={15}
-      >
-        <InstallmentOptions productPk={data.product.pk} />
-      </Accordion>
-    </div>
+    <AccordionSection>
+      <div style={containerStyle}>
+        <div style={headerStyle} className="accordion-header">
+          <Accordion
+            title={t('product.details_care')}
+            icons={['minus', 'plus']}
+            iconSize={iconSize}
+            iconColor={iconColor}
+            isCollapse={false}
+            className="border-none"
+          >
+            <div style={contentStyle}>
+              {t('product.product_code')}: {data.product.sku} -{' '}
+              {data.product.base_code}
+              {data.product.attributes.integration_ProductAtt03Desc &&
+                data.product.attributes.integration_ProductAtt03Desc}
+              {data.product.attributes.integration_kumas_icerik &&
+                data.product.attributes.integration_kumas_icerik}
+              {data.product.attributes.model_olculeri &&
+                data.product.attributes.model_olculeri}
+              {data.product.attributes.aciklama && (
+                <div
+                  dangerouslySetInnerHTML={generateHtml(
+                    data.product.attributes.aciklama
+                  )}
+                />
+              )}
+            </div>
+          </Accordion>
+        </div>
+
+        <div style={headerStyle} className="accordion-header">
+          <Accordion
+            title={t('product.delivery_collections')}
+            icons={['minus', 'plus']}
+            iconSize={iconSize}
+            iconColor={iconColor}
+            isCollapse={false}
+            className="border-none"
+          >
+            <div style={contentStyle}>
+              <div
+                dangerouslySetInnerHTML={generateHtml(
+                  deliveryReturn?.product_delivery_returns?.value
+                )}
+              />
+            </div>
+          </Accordion>
+        </div>
+
+        <div style={headerStyle} className="accordion-header">
+          <Accordion
+            title={t('product.installment_options')}
+            icons={['minus', 'plus']}
+            iconSize={iconSize}
+            iconColor={iconColor}
+            isCollapse={false}
+            className="border-none"
+          >
+            <div style={contentStyle}>
+              <InstallmentOptions productPk={data.product.pk} />
+            </div>
+          </Accordion>
+        </div>
+      </div>
+      <style jsx global>{`
+        .accordion-header:hover {
+          background-color: ${accordionStyles['hover-background-color'] ||
+          '#f9fafb'};
+          color: ${accordionStyles['hover-title-color'] ||
+          accordionStyles['title-color'] ||
+          '#111827'};
+        }
+      `}</style>
+    </AccordionSection>
   );
 }