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

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

@@ -2,11 +2,11 @@
 
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
-import { signIn, SignInOptions } from 'next-auth/react';
+import { signIn } from 'next-auth/react';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { RegisterFormType } from '@theme/types';
+import { RegisterFormType, FormType, PzSignInOptions } from '@theme/types';
 import { Button, Checkbox, Icon, Input, Modal } from '@theme/components';
 import * as yup from 'yup';
 import { useCaptcha, useLocalization, useRouter } from '@akinon/next/hooks';
@@ -120,28 +120,21 @@ export const Register = () => {
   const [showPassword, setShowPassword] = useState(false);
   const { user_phone_format } = useAppSelector((state) => state.config);
 
-  const registerHandler: SubmitHandler<RegisterFormType> = async (data) => {
+  const registerHandler = async (data: RegisterFormType) => {
     return await signIn('default', {
       redirect: false,
       callbackUrl: '/',
       captchaValidated,
-      ...data
-    } as SignInOptions);
+      ...data,
+      formType: FormType.register
+    } as PzSignInOptions & { redirect: false });
   };
 
   const onSubmit: SubmitHandler<RegisterFormType> = async (data) => {
     const registerResponse = await registerHandler(data);
 
-    if (registerResponse.error === 'Captcha') {
-      if (await validateCaptcha()) {
-        onSubmit(data);
-      }
-
-      return;
-    }
-
     if (registerResponse.error) {
-      const errors: AuthError[] = JSON.parse(registerResponse.error);
+      const errors: AuthError[] = JSON.parse(registerResponse.code);
 
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
@@ -164,10 +157,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) {
@@ -192,7 +209,7 @@ export const Register = () => {
   };
 
   return (
-    <section className="w-full py-10 px-5 md:py-0 md:block md:px-8 md:mx-auto lg:px-16">
+    <section className="w-full mt-6 lg:mt-8">
       <Modal
         title={contentModal.title}
         portalId="portal-modal-container"
@@ -213,23 +230,19 @@ export const Register = () => {
           }}
         />
       )}
-      <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-        {t('auth.register.title')}
-      </h2>
-
-      <p className="mb-3 text-xs leading-4 text-primary-400">
-        {t('auth.register.subtitle')}
-      </p>
-
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
-        <input type="hidden" value="register" {...register('formType')} />
+        <input
+          type="hidden"
+          value={FormType.register}
+          {...register('formType')}
+        />
         <input type="hidden" value={locale} {...register('locale')} />
 
-        <div className={clsx({ 'mb-4': errors.email })}>
+        <div>
           <Input
             labelStyle="floating"
             label={t('auth.register.form.email.placeholder')}
-            className="h-14"
+            className="h-12"
             {...register('email')}
             error={errors.email}
             data-testid="register-email"
@@ -238,15 +251,13 @@ export const Register = () => {
         </div>
 
         <div
-          className={clsx('lg:flex', {
-            'mb-4': errors.first_name || errors.last_name
-          })}
+          className="lg:flex"
         >
           <div className="w-full lg:pr-2">
             <Input
               labelStyle="floating"
               label={t('auth.register.form.name.placeholder')}
-              className="block h-14"
+              className="block h-12"
               {...register('first_name')}
               error={errors.first_name}
               data-testid="register-name"
@@ -258,7 +269,7 @@ export const Register = () => {
             <Input
               labelStyle="floating"
               label={t('auth.register.form.surname.placeholder')}
-              className="block h-14"
+              className="block h-12"
               {...register('last_name')}
               error={errors.last_name}
               data-testid="register-surname"
@@ -267,12 +278,12 @@ export const Register = () => {
           </div>
         </div>
 
-        <div className={clsx('relative', { 'mb-4': errors.password })}>
+        <div className="relative">
           <div className="relative">
             <Input
               labelStyle="floating"
               label={t('auth.register.form.password.placeholder')}
-              className="h-14 pr-16"
+              className="h-12 pr-16"
               type={showPassword ? 'text' : 'password'}
               {...register('password')}
               data-testid="register-password"
@@ -298,11 +309,11 @@ export const Register = () => {
           />
         </div>
 
-        <div className={clsx({ 'mb-4': errors.phone })}>
+        <div>
           <Input
             labelStyle="floating"
             label={t('auth.register.form.phone.placeholder')}
-            className="h-14"
+            className="h-12"
             format={user_phone_format.replace(/9/g, '#')}
             allowEmptyFormatting
             mask="_"
@@ -318,7 +329,6 @@ export const Register = () => {
           <p className="mb-4">{t('auth.register.form.agreements.title')}:</p>
 
           <Checkbox
-            className={clsx(errors.confirm ? 'mb-8' : 'mb-4')}
             {...register('confirm')}
             error={errors.confirm}
             data-testid="register-agreement-1"
@@ -337,7 +347,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className={clsx(errors.kvkk_confirm ? 'mb-8' : 'mb-4')}
+            className="mt-4"
             {...register('kvkk_confirm')}
             error={errors.kvkk_confirm}
             data-testid="register-agreement-2"
@@ -356,7 +366,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className="mb-4"
+            className="mt-4"
             {...register('email_allowed')}
             data-testid="register-agreement-3"
           >
@@ -374,7 +384,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className="mb-4"
+            className="mt-4"
             {...register('sms_allowed')}
             data-testid="register-agreement-4"
           >
@@ -400,7 +410,7 @@ export const Register = () => {
         </div>
 
         <Button
-          className="text-xs font-semibold uppercase w-full h-14"
+          className="w-full h-12 text-sm font-normal"
           type="submit"
           disabled={isCaptchaVisible && !captchaValidated}
           data-testid="register-submit"

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Button, Icon } from '@theme/components';
 // eslint-disable-next-line @akinon/projectzero/link-import
 import Link from 'next/link';
-import { ShareProps } from '@theme/components/types';
+import { ShareProps } from '@theme/components/types/index';
 import clsx from 'clsx';
 
 const Share = ({
@@ -13,18 +13,21 @@ const Share = ({
   buttonAppearance = 'ghost',
   className,
   buttonIconName = 'share',
-  buttonIconSize = 16,
+  buttonIconSize = 24,
   buttonIconProps = {},
   items
 }: ShareProps) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className={clsx('flex items-center', className)}>
+    <div className={clsx('flex items-center gap-4 border-t', className)}>
       <Button
         onClick={() => setOpen(!open)}
         appearance={buttonAppearance}
-        className={clsx('text-base', buttonClassName)}
+        className={clsx(
+          'text-base p-0 bg-transparent hover:bg-transparent hover:text-primary',
+          buttonClassName
+        )}
         aria-label="Share"
       >
         <div className="flex items-center gap-2">
@@ -53,12 +56,12 @@ const Share = ({
               className={
                 item.className
                   ? item.className
-                  : 'px-6 py-2 h-10 flex items-center hover:bg-gray-100'
+                  : 'p-4 h-auto flex items-center hover:bg-gray-100'
               }
             >
               <Icon
                 name={item.iconName}
-                size={item.iconSize ? item.iconSize : 16}
+                size={item.iconSize ? item.iconSize : 12}
               />
             </Link>
           </div>

package/app-template/src/views/widgets/home-hero-slider-content.tsx

@@ -11,44 +11,46 @@ export default function HomeHeroSliderContent({ data }) {
   };
 
   return (
-    <CarouselCore
-      responsive={{
-        all: {
-          breakpoint: { max: 5000, min: 0 },
-          items: 1
-        }
-      }}
-      arrows={false}
-      swipeable={true}
-      containerAspectRatio={{
-        mobile: imageRatio.mobile,
-        desktop: imageRatio.desktop
-      }}
-    >
-      {data?.attributes?.hero_slider?.map((item, i) => (
-        <div key={i}>
-          <Link href={item.value.url}>
-            <Image
-              src={item.kwargs.value.mobile_image.url}
-              alt={item.value.alt}
-              aspectRatio={imageRatio.mobile}
-              draggable={false}
-              sizes="375px"
-              fill
-              className="block md:hidden"
-            />
-            <Image
-              src={item.kwargs.value.image.url}
-              alt={item.value.alt}
-              aspectRatio={imageRatio.desktop}
-              draggable={false}
-              sizes="1540px"
-              fill
-              className="hidden md:block"
-            />
-          </Link>
-        </div>
-      ))}
-    </CarouselCore>
+    <>
+      <CarouselCore
+        responsive={{
+          all: {
+            breakpoint: { max: 5000, min: 0 },
+            items: 1
+          }
+        }}
+        arrows={false}
+        swipeable={true}
+        containerAspectRatio={{
+          mobile: imageRatio.mobile,
+          desktop: imageRatio.desktop
+        }}
+      >
+        {data?.attributes?.hero_slider?.map((item, i) => (
+          <div key={i}>
+            <Link href={item.value.url}>
+              <Image
+                src={item.kwargs.value.mobile_image.url}
+                alt={item.value.alt}
+                aspectRatio={imageRatio.mobile}
+                draggable={false}
+                sizes="375px"
+                fill
+                className="block md:hidden"
+              />
+              <Image
+                src={item.kwargs.value.image.url}
+                alt={item.value.alt}
+                aspectRatio={imageRatio.desktop}
+                draggable={false}
+                sizes="1540px"
+                fill
+                className="hidden md:block"
+              />
+            </Link>
+          </div>
+        ))}
+      </CarouselCore>
+    </>
   );
 }

package/app-template/src/widgets/flatpages/about-us/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+import { Image } from '@akinon/next/components';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { LoaderSpinner } from '@theme/components';
+
+export default function AboutUs() {
+  const { data, isLoading } = useGetWidgetQuery('about-us');
+
+  if (isLoading) {
+    return (
+      <div className="py-20">
+        <LoaderSpinner />;
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className="container px-3 lg:px-0 py-4 lg:py-10">
+        <div className="flex gap-2.5 flex-col lg:flex-row">
+          <Image
+            src={data?.attributes?.image_1?.kwargs?.url}
+            alt={data?.attributes?.image_1?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+
+          <Image
+            src={data?.attributes?.image_2?.kwargs?.url}
+            alt={data?.attributes?.image_2?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+
+          <Image
+            src={data?.attributes?.image_3?.kwargs?.url}
+            alt={data?.attributes?.image_3?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+        </div>
+
+        <div className="my-10 lg:my-16 max-w-[495px] mx-auto">
+          <h1 className="text-[30px] lg:text-[40px] mb-8">
+            {data?.attributes?.title?.value}
+          </h1>
+          <div
+            className="text-[#121212] leading-[1.72] tracking-[0.64px]"
+            dangerouslySetInnerHTML={{
+              __html: data?.attributes?.content?.value || ''
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="bg-[#fafafa] lg:bg-black text-[#121212] lg:text-white py-10 lg:py-16">
+        <div className="container">
+          <h2 className="text-center text-xl lg:text-2xl mb-8">
+            {data?.attributes?.highlight_section_title?.value}
+          </h2>
+          <div
+            className="text-center max-w-[295px] lg:max-w-[700px] mx-auto leading-[1.72] tracking-[0.64px]"
+            dangerouslySetInnerHTML={{
+              __html: data?.attributes?.highlight_section?.value || ''
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/widgets/flatpages/blog-list/index.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Image } from '@akinon/next/components';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useLocalization } from '@akinon/next/hooks';
+import { WidgetResultType } from '@akinon/next/types';
+import { LoaderSpinner } from '@theme/components';
+import { formatDateToMonthYear } from '@theme/utils/formatDate';
+
+interface BlogImageData {
+  value: string;
+  data_type: 'image';
+  url: string;
+}
+
+interface BlogItemValue {
+  link: string;
+  image: string;
+  title: string;
+  description: string;
+  date: string;
+}
+
+interface BlogItemKwargs {
+  value: {
+    image: BlogImageData;
+  };
+  data_type: 'nested';
+}
+
+interface BlogItem {
+  value: BlogItemValue;
+  kwargs: BlogItemKwargs;
+}
+
+interface BlogListAttributes {
+  blogs: BlogItem[];
+}
+
+export default function BlogList() {
+  const { locale, t } = useLocalization();
+  const { data, isLoading } = useGetWidgetQuery('blog-list') as ReturnType<
+    typeof useGetWidgetQuery
+  >;
+  const blogData = data as WidgetResultType<BlogListAttributes> | undefined;
+
+  if (isLoading) {
+    return (
+      <div className="py-20">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!blogData) {
+    return (
+      <div className="container mx-auto py-10">
+        <p className="text-center py-20">{t('blog.no_blog_posts')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="container px-3 lg:px-0 py-4 lg:py-10">
+        {blogData.attributes?.blogs?.length ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5 ">
+            {blogData.attributes.blogs.map((blogItem, index) => (
+              <div
+                key={index}
+                className={
+                  `bg-[#fafafa]` + (index === 0 ? ' lg:col-span-2' : '')
+                }
+              >
+                <a
+                  key={index}
+                  href={blogItem.value.link}
+                  className="block group"
+                >
+                  <div className="w-full relative mb-4 overflow-hidden">
+                    <Image
+                      src={blogItem.kwargs.value.image.url}
+                      alt={blogItem.value.title}
+                      aspectRatio={index === 0 ? 1072 / 481 : 530 / 440}
+                      fill
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                      className="w-full h-full object-cover  transition-transform duration-300 hidden lg:block"
+                    />
+                    <Image
+                      src={blogItem.kwargs.value.image.url}
+                      alt={blogItem.value.title}
+                      aspectRatio={350 / 278}
+                      fill
+                      sizes="100vw"
+                      className="w-full h-full object-fill  transition-transform duration-300 lg:hidden"
+                    />
+                  </div>
+                  <div
+                    className={
+                      `p-6 ` +
+                      (index === 0
+                        ? 'lg:p-0 lg:pb-10 lg:max-w-[700px] lg:mx-auto lg:text-center'
+                        : '')
+                    }
+                  >
+                    <h3 className="text-2xl mb-1 text-[#121212] leading-[1.72] tracking-[0.64px]">
+                      {blogItem.value.title}
+                    </h3>
+                    <p className="mb-4 lg:mb-1">
+                      {formatDateToMonthYear(
+                        blogItem.value.date,
+                        locale as any
+                      )}
+                    </p>
+                    <p className="text-[#121212] leading-[1.72] tracking-[0.64px]">
+                      {blogItem.value.description}
+                    </p>
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>{t('blog.no_blog_posts')}</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/app-template/src/widgets/footer-menu.tsx

@@ -2,6 +2,7 @@ import 'server-only';
 
 import { Link, Accordion } from '@theme/components';
 import { getWidgetData } from '@akinon/next/data/server';
+import { ServerVariables } from '@akinon/next/utils/server-variables';
 
 type SideItem = {
   value: string;
@@ -47,6 +48,7 @@ type FooterMenuType = {
 
 export default async function FooterMenu() {
   const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+  const { locale } = ServerVariables;
 
   return (
     <div className="flex-1">
@@ -72,7 +74,7 @@ export default async function FooterMenu() {
                           : '_self'
                       }
                       data-testid={`footer-categories-${item?.value?.name
-                        ?.toLocaleLowerCase()
+                        ?.toLocaleLowerCase(locale)
                         .split(' ')
                         .join('')}`}
                     >
@@ -96,7 +98,9 @@ export default async function FooterMenu() {
                           ? '_blank'
                           : '_self'
                       }
-                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase()}`}
+                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase(
+                        locale
+                      )}`}
                     >
                       {item?.value?.name}
                     </Link>

package/app-template/src/widgets/footer-subscription/footer-subscription-form.tsx

@@ -9,6 +9,7 @@ import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
 import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
 import { Input, Button, Checkbox, Modal } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
+import { Icon } from '@akinon/next/components';
 
 const subscriptionFormSchema = (t: (key: string) => string) =>
   yup.object().shape({
@@ -43,29 +44,31 @@ export default function FooterSubscriptionForm() {
 
   return (
     <div>
-      <div className="flex mb-5">
-        <Input
-          id="footer-subscription-email"
-          type="email"
-          placeholder={t('common.newsletter_signup.email_address')}
-          className="text-sm h-7 w-44"
-          {...register('email')}
-          error={errors.email}
-          data-testid="newsletter-input"
-        />
+      <div className="flex items-center justify-between border border-[#7d7d7d] px-4 py-[14px] gap-4 w-[331px]">
+        <div className="flex-1">
+          <Input
+            id="footer-subscription-email"
+            type="email"
+            placeholder={t('common.newsletter_signup.email_address')}
+            className="border-0 h-auto p-0 flex-1"
+            {...register('email')}
+            error={errors.email}
+            data-testid="newsletter-input"
+          />
+        </div>
 
         <Button
           type="submit"
           appearance="outlined"
-          className="text-xs font-semibold h-7"
+          className="bg-transparent hover:bg-transparent p-0 h-auto"
           data-testid="newsletter-submit"
           onClick={handleSubmit(onSubmit)}
         >
-          {t('common.newsletter_signup.submit')}
+          <Icon name="arrow-right" size={16} className="text-black" />
         </Button>
       </div>
 
-      <Checkbox
+      {/* <Checkbox
         {...register('subscribe_contract')}
         error={errors.subscribe_contract}
         data-testid="newsletter-agreement-checkbox"
@@ -104,7 +107,7 @@ export default function FooterSubscriptionForm() {
             {t('common.newsletter_signup.close')}
           </Button>
         </Modal>
-      </Checkbox>
+      </Checkbox> */}
     </div>
   );
 }