@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,258 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,110 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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} />;
-}