@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,258 @@
+import 'server-only';
+
+import { Link, Accordion } from '@theme/components';
+import { getWidgetData } from '@akinon/next/data/server';
+
+type SideItem = {
+  value: string;
+  data_type: 'dropdown';
+};
+
+type TargetBlank = {
+  value: string;
+  data_type: 'dropdown';
+};
+
+type FooterMenuItem = [
+  {
+    // TODO: Refactor this from commerce_proxy
+    kwargs: {
+      data_type: 'nested';
+      value: {
+        is_side_column_item?: SideItem;
+        is_target_blank: TargetBlank;
+      };
+    };
+    value: {
+      is_side_column_item?: string;
+      is_target_blank: string;
+      name: string;
+      redirect_url: string;
+    };
+  }
+];
+
+type FooterMenuTitle = {
+  value: string;
+};
+
+type FooterMenuType = {
+  first_column_title: FooterMenuTitle;
+  first_column_items: FooterMenuItem;
+  second_column_title: FooterMenuTitle;
+  second_column_items: FooterMenuItem;
+  third_column_title: FooterMenuTitle;
+  third_column_items: FooterMenuItem;
+};
+
+export default async function FooterMenu() {
+  const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+
+  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">
+        <div>
+          <div className="mb-4 font-medium" data-testid="footer-categories">
+            {data?.attributes?.first_column_title?.value}
+          </div>
+
+          <div className="flex">
+            <ul className="mr-10 lg:mr-8 xl:mr-16">
+              {data?.attributes?.first_column_items
+                ?.filter(
+                  (category) => category?.value?.is_side_column_item === 'False'
+                )
+                .map((item, i) => (
+                  <li className="mb-2" key={i}>
+                    <Link
+                      href={item?.value?.redirect_url}
+                      target={
+                        item?.value?.is_target_blank === 'true'
+                          ? '_blank'
+                          : '_self'
+                      }
+                      data-testid={`footer-categories-${item?.value?.name
+                        ?.toLocaleLowerCase()
+                        .split(' ')
+                        .join('')}`}
+                    >
+                      {item?.value?.name}
+                    </Link>
+                  </li>
+                ))}
+            </ul>
+
+            <ul className="lg:mr-8">
+              {data?.attributes?.first_column_items
+                ?.filter(
+                  (category) => category?.value?.is_side_column_item === 'True'
+                )
+                .map((item, i) => (
+                  <li className="mb-2" key={i}>
+                    <Link
+                      href={item?.value?.redirect_url}
+                      target={
+                        item?.value?.is_target_blank === 'true'
+                          ? '_blank'
+                          : '_self'
+                      }
+                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase()}`}
+                    >
+                      {item?.value?.name}
+                    </Link>
+                  </li>
+                ))}
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-4 font-medium" data-testid="footer-my-account">
+            {data?.attributes?.second_column_title?.value}
+          </div>
+
+          <div>
+            <ul className="mr-8">
+              {data?.attributes?.second_column_items?.map((item, i) => (
+                <li className="mb-2" key={i}>
+                  <Link
+                    href={item?.value?.redirect_url}
+                    target={
+                      item?.value?.is_target_blank === 'true'
+                        ? '_blank'
+                        : '_self'
+                    }
+                  >
+                    {item?.value?.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-4 font-medium" data-testid="footer-customer-care">
+            {data?.attributes?.third_column_title?.value}
+          </div>
+
+          <div>
+            <ul className="lg:mr-8 xl:mr-16">
+              {data?.attributes?.third_column_items?.map((item, i) => (
+                <li className="mb-2" key={i}>
+                  <Link
+                    href={item?.value?.redirect_url}
+                    target={
+                      item?.value?.is_target_blank === 'true'
+                        ? '_blank'
+                        : '_self'
+                    }
+                  >
+                    {item?.value?.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="block md:hidden">
+        <Accordion
+          title={data?.attributes?.first_column_title?.value}
+          titleClassName="text-xs font-medium"
+        >
+          <div>
+            <ul className="text-xs px-4">
+              {data?.attributes?.first_column_items
+                ?.filter(
+                  (category) => category?.value?.is_side_column_item === 'False'
+                )
+                .map((item, i) => (
+                  <li className="mb-2" key={i}>
+                    <Link
+                      href={item?.value?.redirect_url}
+                      target={
+                        item?.value?.is_target_blank === 'true'
+                          ? '_blank'
+                          : '_self'
+                      }
+                    >
+                      {item?.value?.name}
+                    </Link>
+                  </li>
+                ))}
+            </ul>
+
+            <ul className="text-xs px-4">
+              {data?.attributes?.first_column_items
+                ?.filter(
+                  (category) => category?.value?.is_side_column_item === 'True'
+                )
+                .map((item, i) => (
+                  <li className="mb-2" key={i}>
+                    <Link
+                      href={item?.value?.redirect_url}
+                      target={
+                        item?.value?.is_target_blank === 'true'
+                          ? '_blank'
+                          : '_self'
+                      }
+                    >
+                      {item?.value?.name}
+                    </Link>
+                  </li>
+                ))}
+            </ul>
+          </div>
+        </Accordion>
+
+        <Accordion
+          title={data?.attributes?.second_column_title?.value}
+          titleClassName="text-xs font-medium"
+        >
+          <div>
+            <ul className="text-xs px-4">
+              {data?.attributes?.second_column_items?.map((item, i) => (
+                <li className="mb-2" key={i}>
+                  <Link
+                    href={item?.value?.redirect_url}
+                    target={
+                      item?.value?.is_target_blank === 'true'
+                        ? '_blank'
+                        : '_self'
+                    }
+                  >
+                    {item?.value?.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Accordion>
+
+        <Accordion
+          className="last:mb-0"
+          title={data?.attributes?.third_column_title?.value}
+          titleClassName="text-xs font-medium"
+        >
+          <div>
+            <ul className="text-xs px-4">
+              {data?.attributes?.third_column_items?.map((item, i) => (
+                <li className="mb-2" key={i}>
+                  <Link
+                    href={item.value.redirect_url}
+                    target={
+                      item.value.is_target_blank === 'true' ? '_blank' : '_self'
+                    }
+                  >
+                    {item.value.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import 'server-only';
+
+import { Link, Icon } from '@theme/components';
+import { getWidgetData } from '@akinon/next/data/server';
+
+type TargetBlank = {
+  value: string;
+  data_type: 'dropdown';
+};
+
+type FooterSocialItem = [
+  {
+    // TODO: Refactor this from commerce_proxy
+    kwargs: {
+      data_type: 'nested';
+      value: {
+        is_target_blank: TargetBlank;
+      };
+    };
+    value: {
+      icon_class?: string;
+      site_name: string;
+      redirect_url: string;
+      is_target_blank: string;
+    };
+  }
+];
+
+type FooterSocialType = {
+  social_items: FooterSocialItem;
+};
+
+export default async function FooterSocial() {
+  const data = await getWidgetData<FooterSocialType>({ slug: 'footer-social' });
+
+  return (
+    <div className="flex flex-wrap items-center justify-around py-4 border-t border-gray md:justify-center">
+      {data?.attributes?.social_items?.map((item, i) => (
+        <Link
+          key={i}
+          href={item?.value?.redirect_url}
+          className="p-2 border rounded-full border-gray md:mr-1 md:last:mr-0"
+          target={item?.value?.is_target_blank === 'true' ? '_blank' : '_self'}
+        >
+          <Icon
+            size={18}
+            name={item?.value?.icon_class?.replace('pz-icon-', '')}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { FooterSubscriptionFormType } from '@theme/types';
+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';
+
+const subscriptionFormSchema = (t: any) =>
+  yup.object().shape({
+    email: yup
+      .string()
+      .email(t('common.newsletter_signup.required_email'))
+      .required(t('common.newsletter_signup.required')),
+    subscribe_contract: yup
+      .boolean()
+      .oneOf([true], t('common.newsletter_signup.required'))
+  });
+
+export default function FooterSubscriptionForm() {
+  const { t } = useLocalization();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [emailSubscription] = useEmailSubscriptionMutation();
+  const { data: privacyPolicy } = useGetWidgetQuery('privacy-policy');
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FooterSubscriptionFormType>({
+    resolver: yupResolver(subscriptionFormSchema(t))
+  });
+
+  const onSubmit: SubmitHandler<FooterSubscriptionFormType> = (data) => {
+    emailSubscription(data)
+      .unwrap()
+      .then(() => setIsModalOpen(true));
+  };
+
+  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"
+        />
+
+        <Button
+          type="submit"
+          appearance="outlined"
+          className="text-xs font-semibold h-7"
+          data-testid="newsletter-submit"
+          onClick={handleSubmit(onSubmit)}
+        >
+          {t('common.newsletter_signup.submit')}
+        </Button>
+      </div>
+
+      <Checkbox
+        {...register('subscribe_contract')}
+        error={errors.subscribe_contract}
+        data-testid="newsletter-agreement-checkbox"
+      >
+        {t('common.newsletter_signup.accept')}{' '}
+        <button
+          type="button"
+          className="underline"
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+          data-testid="newsletter-agreement"
+        >
+          {t('common.newsletter_signup.privacy_policy')}
+        </button>
+        <Modal
+          className="h-4/5 w-4/5 p-4 flex flex-col justify-between items-center md:p-12 lg:h-1/2 lg:w-1/2"
+          portalId="footer-subscription-privacy-policy-modal"
+          open={isModalOpen}
+          setOpen={setIsModalOpen}
+          showCloseButton={false}
+        >
+          <div
+            className="mb-3 overflow-hidden overflow-y-auto"
+            dangerouslySetInnerHTML={{
+              __html: privacyPolicy?.attributes?.privacy_policy?.value
+            }}
+          />
+
+          <Button
+            onClick={() => setIsModalOpen(false)}
+            appearance="outlined"
+            className="font-medium px-10 py-2"
+            data-testid="newsletter-modal-close-button"
+          >
+            {t('common.newsletter_signup.close')}
+          </Button>
+        </Modal>
+      </Checkbox>
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+
+import FooterSubscriptionForm from './footer-subscription-form';
+
+type FooterSubscriptionType = {
+  description: {
+    value: string;
+  };
+  title: {
+    value: string;
+  };
+};
+
+export default async function FooterSubscription() {
+  const data = await getWidgetData<FooterSubscriptionType>({
+    slug: 'footer-subscription'
+  });
+
+  return (
+    <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>
+      <p className="mb-2 text-xs">{data?.attributes?.description?.value}</p>
+      <FooterSubscriptionForm />
+    </div>
+  );
+}

package/app-template/src/widgets/header-band-text.tsx

@@ -0,0 +1,21 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+
+type HeaderBandText = {
+  header_band_text?: {
+    value?: string;
+  };
+};
+
+export default async function HeaderBandText() {
+  const data = await getWidgetData<HeaderBandText>({
+    slug: 'header-band-text'
+  });
+
+  return (
+    <span className="text-xs text-black">
+      {data?.attributes?.header_band_text?.value}
+    </span>
+  );
+}

package/app-template/src/widgets/home-discovery.tsx

@@ -0,0 +1,191 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+import { ImageType } from '@akinon/next/types';
+
+import { Link } from '@theme/components';
+import { Image } from '@akinon/next/components/image';
+
+type DiscoveryItem = {
+  // TODO: Refactor this from commerce_proxy
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      mobile_image: ImageType;
+      image: ImageType;
+    };
+  };
+  value: {
+    mobile_image?: string;
+    link_url: string;
+    link_name: string;
+    image: string;
+    text_desc: string;
+    alt: string;
+  };
+};
+
+type HomeDiscoveryType = {
+  discovery_left: DiscoveryItem;
+  discovery_top_right: DiscoveryItem;
+  discovery_bottom_right: DiscoveryItem;
+};
+
+export default async function HomeDiscovery() {
+  const data = await getWidgetData<HomeDiscoveryType>({
+    slug: 'home-discovery'
+  });
+
+  return (
+    <div className="container flex flex-col justify-center mx-auto md:flex-row my-8">
+      <div className="mb-8 lg:w-7/12 sm:mr-4 md:mb-0 lg:mr-8">
+        <div className="w-full h-full">
+          <div className="relative">
+            {data?.attributes?.discovery_left?.value && (
+              <Link href={data?.attributes?.discovery_left?.value?.link_url}>
+                <Image
+                  src={
+                    data?.attributes?.discovery_left?.kwargs?.value
+                      ?.mobile_image?.url
+                  }
+                  alt={data?.attributes?.discovery_left?.value?.alt}
+                  aspectRatio={670 / 765}
+                  sizes="670px"
+                  className="block md:hidden"
+                  fill
+                />
+                <Image
+                  src={
+                    data?.attributes?.discovery_left?.kwargs?.value?.image?.url
+                  }
+                  alt={data?.attributes?.discovery_left?.value?.alt}
+                  aspectRatio={670 / 765}
+                  sizes="670px"
+                  className="hidden md:block"
+                  fill
+                />
+              </Link>
+            )}
+
+            <div className="absolute flex justify-center w-full py-2 text-white capitalize bg-black bottom-16">
+              <span>Summer Sale</span>
+
+              <span className="px-4 mx-4 text-red-500 border-l border-r border-white">
+                70% Off
+              </span>
+
+              <span>3 Weeks Only</span>
+            </div>
+          </div>
+
+          <p className="block px-4 pt-2 text-sm md:inline md:mr-2 md:p-0">
+            {data?.attributes?.discovery_left?.value?.text_desc}
+          </p>
+
+          <Link
+            href={data?.attributes?.discovery_left?.value?.link_url}
+            className="block px-4 text-sm font-medium underline md:inline md:px-0"
+          >
+            {data?.attributes?.discovery_left?.value?.link_name}
+          </Link>
+        </div>
+      </div>
+
+      <div className="lg:w-5/12 md:flex md:flex-col md:justify-between">
+        <div className="mb-8 md:mb-0">
+          <div>
+            {data?.attributes?.discovery_top_right?.value && (
+              <Link
+                href={data?.attributes?.discovery_top_right?.value?.link_url}
+              >
+                <Image
+                  src={
+                    data?.attributes?.discovery_top_right?.kwargs?.value
+                      ?.mobile_image?.url
+                  }
+                  alt={data?.attributes?.discovery_top_right?.value?.alt}
+                  aspectRatio={470 / 345}
+                  sizes="470px"
+                  className="block md:hidden"
+                  fill
+                />
+
+                <Image
+                  src={
+                    data?.attributes?.discovery_top_right?.kwargs?.value?.image
+                      ?.url
+                  }
+                  alt={data?.attributes?.discovery_top_right?.value?.alt}
+                  aspectRatio={470 / 345}
+                  sizes="100vw"
+                  className="hidden md:block"
+                  fill
+                />
+              </Link>
+            )}
+          </div>
+
+          <p className="block px-4 pt-2 text-sm md:inline md:mr-2 md:p-0">
+            {data?.attributes?.discovery_top_right?.value?.text_desc}
+          </p>
+
+          {data?.attributes?.discovery_top_right?.value && (
+            <Link
+              href={data?.attributes?.discovery_top_right?.value?.link_url}
+              className="block px-4 text-sm font-medium underline md:inline md:px-0"
+            >
+              {data?.attributes?.discovery_top_right?.value?.link_name}
+            </Link>
+          )}
+        </div>
+
+        <div>
+          <div>
+            {data?.attributes?.discovery_bottom_right?.value && (
+              <Link
+                href={data?.attributes?.discovery_bottom_right?.value?.link_url}
+              >
+                <Image
+                  src={
+                    data?.attributes?.discovery_bottom_right?.kwargs?.value
+                      ?.mobile_image?.url
+                  }
+                  alt={data?.attributes?.discovery_bottom_right?.value?.alt}
+                  aspectRatio={470 / 345}
+                  sizes="470px"
+                  className="block md:hidden"
+                  fill
+                />
+
+                <Image
+                  src={
+                    data?.attributes?.discovery_bottom_right?.kwargs?.value
+                      ?.image?.url
+                  }
+                  alt={data?.attributes?.discovery_bottom_right?.value?.alt}
+                  aspectRatio={470 / 345}
+                  sizes="100vw"
+                  className="hidden md:block"
+                  fill
+                />
+              </Link>
+            )}
+          </div>
+
+          <p className="block px-4 pt-2 text-sm md:inline md:mr-2 md:p-0">
+            {data?.attributes?.discovery_bottom_right?.value?.text_desc}
+          </p>
+
+          {data?.attributes?.discovery_bottom_right?.value && (
+            <Link
+              href={data?.attributes?.discovery_bottom_right?.value?.link_url}
+              className="block px-4 text-sm font-medium underline md:px-0 md:inline"
+            >
+              {data?.attributes?.discovery_bottom_right?.value?.link_name}
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+import { ImageType } from '@akinon/next/types';
+import HomeHeroSliderContent from '@theme/views/widgets/home-hero-slider-content';
+
+type HeroSliderItem = [
+  {
+    // TODO: Refactor this from commerce_proxy
+    kwargs: {
+      data_type: 'nested';
+      value: {
+        mobile_image: ImageType;
+        image: ImageType;
+      };
+    };
+    value: {
+      url: string;
+      mobile_image: string;
+      alt: string;
+      image: string;
+    };
+  }
+];
+
+type HomeHeroSliderType = {
+  hero_slider: HeroSliderItem;
+};
+
+export default async function HomeHeroSlider() {
+  const data = await getWidgetData<HomeHeroSliderType>({
+    slug: 'home-hero-slider'
+  });
+
+  return <HomeHeroSliderContent data={data} />;
+}