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

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { signIn } from 'next-auth/react';
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { ROUTES } from '@theme/routes';
 import { LoginFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Input, Link } from '@theme/components';
@@ -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,
@@ -147,16 +151,14 @@ 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"
@@ -165,11 +167,11 @@ export const Login = () => {
         <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"
@@ -177,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}
@@ -192,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')}
@@ -200,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}
@@ -208,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"
@@ -220,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}
@@ -243,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/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>
   );
 }

package/app-template/src/views/product/custom-button-group.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Icon, Button } from '@theme/components';
+
+type CustomButtonGroupProps = {
+  carouselState?: {
+    currentSlide: number;
+    totalItems: number;
+  };
+  previous?: () => void;
+  next?: () => void;
+  goToSlide?: (slide: number) => void;
+};
+
+export default function CustomButtonGroup({
+  carouselState,
+  previous,
+  next
+}: CustomButtonGroupProps) {
+  const currentSlide = carouselState?.currentSlide ?? 0;
+  const totalItems = carouselState?.totalItems ?? 0;
+
+  if (!totalItems) return null;
+
+  const isFirstSlide = currentSlide === 0;
+  const isLastSlide = currentSlide >= totalItems - 1;
+
+  const handlePrevClick = () => {
+    if (isFirstSlide) return;
+    previous?.();
+  };
+
+  const handleNextClick = () => {
+    if (isLastSlide) return;
+    next?.();
+  };
+
+  return (
+    <div className="relative mt-3 w-full">
+      <div className="flex items-center justify-center gap-2 text-[13px] font-medium text-gray-650">
+        <Button
+          type="button"
+          aria-label="Previous image"
+          aria-disabled={isFirstSlide}
+          disabled={isFirstSlide}
+          onClick={handlePrevClick}
+          className="bg-transparent text-primary border-none"
+        >
+          <Icon name="chevron-start" size={12} />
+        </Button>
+
+        <span>
+          {currentSlide + 1}/{totalItems}
+        </span>
+
+        <Button
+          type="button"
+          aria-label="Next image"
+          aria-disabled={isLastSlide}
+          disabled={isLastSlide}
+          onClick={handleNextClick}
+          className="bg-transparent text-primary border-none"
+        >
+          <Icon name="chevron-end" size={12} className="text-gray-900" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/app-template/src/views/product/favorites-button-section.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * Favorites Button Section Wrapper
+ *
+ * Wraps favorites button 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,
+  FAVORITES_BUTTON_SECTION_ID
+} from '@theme/views/product-detail';
+
+export default function FavoritesButtonSection({
+  children
+}: PropsWithChildren) {
+  const { isDesigner, selectedSectionId, favoritesButtonStyles } =
+    useProductDetail();
+
+  // Check if this section is selected in designer mode
+  const isSelected =
+    isDesigner && selectedSectionId === FAVORITES_BUTTON_SECTION_ID;
+
+  // Build CSS variables from favoritesButtonStyles
+  const cssVariables = useMemo((): CSSProperties => {
+    if (!favoritesButtonStyles) return {};
+
+    const vars: Record<string, string> = {};
+    Object.entries(favoritesButtonStyles).forEach(([key, value]) => {
+      if (value) {
+        vars[`--favorites-button-${key}`] = value;
+      }
+    });
+    return vars as CSSProperties;
+  }, [favoritesButtonStyles]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      e.stopPropagation();
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: FAVORITES_BUTTON_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  return (
+    <div
+      className={clsx(
+        'favorites-button-section',
+        isDesigner && 'cursor-pointer',
+        isSelected && 'ring-2 ring-blue-500 ring-offset-2'
+      )}
+      style={cssVariables}
+      onClick={handleClick}
+    >
+      {children}
+    </div>
+  );
+}

package/app-template/src/views/product/find-in-store-section.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React, { CSSProperties, useMemo } from 'react';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useProductDetail,
+  PRODUCT_DETAIL_PLACEHOLDER_ID,
+  FIND_IN_STORE_SECTION_ID
+} from '@theme/views/product-detail';
+
+interface FindInStoreSectionProps {
+  children: React.ReactNode;
+}
+
+export default function FindInStoreSection({
+  children
+}: FindInStoreSectionProps) {
+  const { isDesigner, selectedSectionId, findInStoreStyles } =
+    useProductDetail();
+
+  const { handleClick } = useDesignerFeatures({
+    sectionId: FIND_IN_STORE_SECTION_ID,
+    placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+    blockId: '',
+    isDesigner
+  });
+
+  const isSelected = selectedSectionId === FIND_IN_STORE_SECTION_ID;
+
+  const cssVariables = useMemo((): CSSProperties => {
+    if (!findInStoreStyles) return {};
+
+    const vars: Record<string, string> = {};
+    Object.entries(findInStoreStyles).forEach(([key, value]) => {
+      if (value) {
+        vars[`--find-in-store-${key}`] = value;
+      }
+    });
+    return vars as CSSProperties;
+  }, [findInStoreStyles]);
+
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      style={{
+        ...cssVariables,
+        cursor: 'pointer',
+        outline: isSelected ? '2px solid #3b82f6' : 'none',
+        outlineOffset: '2px'
+      }}
+      data-section-id={FIND_IN_STORE_SECTION_ID}
+    >
+      {children}
+    </div>
+  );
+}

package/app-template/src/views/product/index.ts

@@ -1,6 +1,7 @@
 export { default as PriceWrapper } from './price-wrapper';
 export { default as Variant } from './variant';
 export { default as ProductInfo } from './product-info';
+export { default as ProductShare } from './product-share';
 export { default as ProductGroupInfo } from './product-group-info';
 export { default as MiscButtons } from './misc-buttons';
 export { default as ProductInfoSlider } from './slider';