@akinon/projectzero 2.0.0-beta.9 → 2.0.1

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-info.tsx

@@ -19,7 +19,7 @@ export default async function FooterInfo() {
   const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
 
   return (
-    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b border-gray-200 md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
       <div className="flex items-center mb-8">
         <div className="mr-3">
           <svg

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,10 +48,11 @@ type FooterMenuType = {
 
 export default async function FooterMenu() {
   const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+  const { locale } = ServerVariables;
 
   return (
     <div className="flex-1">
-      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l md:border-gray-200">
+      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
         <div>
           <div className="mb-4 font-medium" data-testid="footer-categories">
             {data?.attributes?.first_column_title?.value}
@@ -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>
   );
 }

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

@@ -19,7 +19,7 @@ export default async function FooterSubscription() {
   });
 
   return (
-    <div className="py-4 border-t border-gray-200 md:border-t-0 lg:pl-7">
+    <div className="py-4 border-t md:border-t-0 lg:pl-7">
       <h3 className="mb-1 text-xs font-medium">
         {data?.attributes?.title?.value}
       </h3>

package/app-template/src/widgets/home-stories-eng.tsx

@@ -6,6 +6,41 @@ import { getWidgetData } from '@akinon/next/data/server';
 import { Link } from '@theme/components';
 import { Image } from '@akinon/next/components/image';
 
+function TitleSection({
+  mobileTitle,
+  mobileSubtitle
+}: {
+  mobileTitle?: { value: string };
+  mobileSubtitle?: { value: string };
+}) {
+  return (
+    <>
+      {mobileTitle ? (
+        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
+          {mobileTitle.value}
+        </h2>
+      ) : null}
+      {mobileSubtitle ? (
+        <p className="text-sm text-center mb-2 lg:hidden">
+          {mobileSubtitle.value}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+function MobileLinks({ mobileLinks }: { mobileLinks?: MobileLink[] }) {
+  return (
+    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
+      {mobileLinks?.map((item, index) => (
+        <li className="mr-4 first:ml-4" key={`${item?.value?.text}__${index}`}>
+          <Link href={item?.value?.url}>{item?.value?.text}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
 type StoryData = {
   value: {
     url: string;
@@ -20,7 +55,7 @@ type StoryData = {
   };
 };
 
-type MobileLinks = {
+type MobileLink = {
   value: {
     url: string;
     text: string;
@@ -35,7 +70,7 @@ type HomeStoriesEngType = {
     value: string;
   };
   stories: StoryData[];
-  mobileLinks: MobileLinks[];
+  mobileLinks: MobileLink[];
 };
 
 export default async function HomeStoriesEng() {
@@ -43,46 +78,19 @@ export default async function HomeStoriesEng() {
     slug: 'home-storieseng'
   });
 
-  const TitleSection = () => (
-    <>
-      {data?.attributes?.mobileTitle ? (
-        <h2 className="text-5xl text-center font-light px-11 mb-2 lg:hidden">
-          {data?.attributes?.mobileTitle?.value}
-        </h2>
-      ) : null}
-      {data?.attributes?.mobileSubtitle ? (
-        <p className="text-sm text-center mb-2 lg:hidden">
-          {data?.attributes?.mobileSubtitle?.value}
-        </p>
-      ) : null}
-    </>
-  );
-
-  const MobileLinks = () => (
-    <ul className="flex justify-center text-sm font-medium underline mb-4 lg:hidden">
-      {data?.attributes?.mobileLinks?.map((item, index) => {
-        return (
-          <li
-            className="mr-4 first:ml-4"
-            key={`${item?.value?.text}__${index}`}
-          >
-            <Link href={item?.value?.url}>{item?.value?.text}</Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-
   return (
     <section className="my-8">
-      <TitleSection />
-      <MobileLinks />
+      <TitleSection
+        mobileTitle={data?.attributes?.mobileTitle}
+        mobileSubtitle={data?.attributes?.mobileSubtitle}
+      />
+      <MobileLinks mobileLinks={data?.attributes?.mobileLinks} />
 
       <div className="flex items-center overflow-x-auto pb-4 md:justify-center">
         {data?.attributes?.stories?.map((story, index) => {
           return (
             <div
-              className="mr-4 shrink-0 first:ms-4 w-32 md:w-32"
+              className="mr-4 flex-shrink-0 first:ms-4 w-32 md:w-32"
               key={`story__${index}`}
             >
               <Link href={story?.value?.url} aria-label={story?.value?.alt}>

package/app-template/src/widgets/index.ts

@@ -23,3 +23,10 @@ export const HOME_WIDGETS: {
     async () => import('@theme/widgets/home-stories-eng')
   )
 };
+
+export const FLATPAGE_COMPONENT: {
+  [key: string]: ComponentType<WidgetResultType<unknown>>;
+} = {
+  'about-us': dynamic(async () => import('@theme/widgets/flatpages/about-us')),
+  'blog-list': dynamic(async () => import('@theme/widgets/flatpages/blog-list'))
+};

package/app-template/src/widgets/schemas/about-us.json

@@ -0,0 +1,46 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text",
+    "is_localizable": true
+  },
+  "content": {
+    "key": "content",
+    "label": "Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "image_1": {
+    "key": "image_1",
+    "label": "Banner Image 1* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_2": {
+    "key": "image_2",
+    "label": "Banner Image 2* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "image_3": {
+    "key": "image_3",
+    "label": "Banner Image 3* (Ex: 350x330px)",
+    "data_type": "image",
+    "is_localizable": true
+  },
+  "highlight_section": {
+    "key": "highlight_section",
+    "label": "Highlight Section Content",
+    "display": "html-editor",
+    "data_type": "area",
+    "is_localizable": true
+  },
+  "highlight_section_title": {
+    "key": "highlight_section_title",
+    "label": "Highlight Section Title",
+    "data_type": "text",
+    "is_localizable": true
+  }
+}

package/app-template/src/widgets/schemas/blog-list.json

@@ -0,0 +1,37 @@
+{
+  "blogs": {
+    "key": "blogs",
+    "label": "Blogs",
+    "is_localizable": true,
+    "multi": true,
+    "data_type": "nested",
+    "schema": {
+      "title": {
+        "key": "title",
+        "label": "Title",
+        "data_type": "text"
+      },
+      "description": {
+        "key": "description",
+        "label": "Description",
+        "data_type": "text"
+      },
+      "date": {
+        "key": "date",
+        "display": "date_picker",
+        "label": "Date",
+        "data_type": "text"
+      },
+      "image": {
+        "key": "image",
+        "label": "Image* (Ex: 370x250px)",
+        "data_type": "image"
+      },
+      "link": {
+        "key": "link",
+        "label": "Link",
+        "data_type": "text"
+      }
+    }
+  }
+}

package/app-template/src/widgets/schemas/blog.json

@@ -0,0 +1,29 @@
+{
+  "title": {
+    "key": "title",
+    "label": "Title",
+    "data_type": "text"
+  },
+  "description": {
+    "key": "description",
+    "label": "Description",
+    "display": "html-editor",
+    "data_type": "area"
+  },
+  "date": {
+    "key": "date",
+    "display": "date_picker",
+    "label": "Date",
+    "data_type": "text"
+  },
+  "image": {
+    "key": "image",
+    "label": "Image* (Ex: 1072x923px)",
+    "data_type": "image"
+  },
+  "link": {
+    "key": "link",
+    "label": "Product Link",
+    "data_type": "text"
+  }
+}