@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { CheckoutStepList, Summary } from '@theme/views/checkout';
+import PaymentStep from '@theme/views/checkout/steps/payment';
+import ShippingStep from '@theme/views/checkout/steps/shipping';
+import { useEffect, useMemo, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  resetCheckoutState,
+  setCurrentStep
+} from '@akinon/next/redux/reducers/checkout';
+import { RootState } from '@theme/redux/store';
+import { ROUTES } from '@theme/routes';
+import { useFetchCheckoutQuery } from '@akinon/next/data/client/checkout';
+import { Button, LoaderSpinner } from '@theme/components';
+import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
+import { CheckoutStep } from '@akinon/next/types';
+import { useRouter, useLocalization } from '@akinon/next/hooks';
+import dynamic from 'next/dynamic';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+const Checkout = () => {
+  const { t } = useLocalization();
+  const { steps, preOrder } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const {
+    data: checkoutData,
+    isFetching,
+    isError,
+    isSuccess,
+    refetch: refetchCheckout
+  } = useFetchCheckoutQuery(null, {
+    refetchOnMountOrArgChange: true
+  });
+  const initialStepChanged = useRef<boolean>(false);
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const CheckoutAuth = useMemo(
+    () =>
+      dynamic(() => {
+        return import('@theme/views/checkout/auth');
+      }),
+    []
+  );
+
+  useEffect(() => {
+    if (steps.shipping.completed && !initialStepChanged.current) {
+      dispatch(setCurrentStep(CheckoutStep.Payment));
+      initialStepChanged.current = true;
+    }
+  }, [steps.shipping.completed]);
+
+  useEffect(() => {
+    if (preOrder && !preOrder.shipping_option) {
+      initialStepChanged.current = true;
+    }
+  }, [preOrder]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(resetCheckoutState());
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isSuccess) {
+      const products = checkoutData?.pre_order?.basket?.basketitem_set.map(
+        (basketItem) => ({
+          ...basketItem.product
+        })
+      );
+      if (steps.current === 'shipping') {
+        pushAddShippingInfo(products);
+      }
+      if (steps.current === 'payment') {
+        pushAddPaymentInfo(products, String(preOrder?.payment_option?.name));
+      }
+    }
+  }, [isSuccess, steps, checkoutData, preOrder?.payment_option?.name]);
+
+  if (checkoutData?.redirect_url?.includes('basket')) {
+    router.push(ROUTES.BASKET);
+    return null;
+  }
+
+  if (checkoutData?.template_name === 'orders/index.html') {
+    return (
+      <section className="container px-4 my-7 md:mt-20 lg:px-0 lg:mx-auto">
+        <CheckoutAuth />
+      </section>
+    );
+  }
+
+  if (isFetching || isError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-80">
+        {isFetching ? (
+          <LoaderSpinner />
+        ) : (
+          <>
+            <div>{t('checkout.error.title')}</div>
+            <div className="mt-5">
+              <Button onClick={refetchCheckout}>
+                {t('checkout.error.button')}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <PluginModule component={Component.MasterpassProvider}>
+      <PluginModule component={Component.MasterpassDeleteConfirmationModal} />
+      <PluginModule component={Component.MasterpassOtpModal} />
+      <PluginModule component={Component.MasterpassLinkModal} />
+
+      <div className="container flex flex-col flex-wrap w-full px-4 md:px-0">
+        <CheckoutStepList />
+
+        <div className="w-full flex flex-wrap">
+          <div className="w-full h-fit-content lg:w-2/3">
+            {steps.current === CheckoutStep.Shipping && <ShippingStep />}
+            {steps.current === CheckoutStep.Payment && <PaymentStep />}
+          </div>
+
+          <div className="w-full h-fit-content mt-6 lg:w-1/3 lg:pl-8 lg:mt-0">
+            <Summary />
+          </div>
+        </div>
+      </div>
+    </PluginModule>
+  );
+};
+
+export default Checkout;

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/completed/[token]/layout.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/completed/[token]/page.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import { ROUTES } from '@theme/routes';
+import { useFetchCheckoutResultQuery } from '@akinon/next/data/client/checkout';
+import { CheckoutStep, PageProps } from '@akinon/next/types';
+import { CarouselCore } from '@theme/components/carousel-core';
+import { Price, Button, Icon, LoaderSpinner, Link } from '@theme/components';
+import { CheckoutStepList } from '@theme/views/checkout';
+import { useLocalization } from '@akinon/next/hooks';
+import { Image } from '@akinon/next/components/image';
+import { Trans } from '@akinon/next/components/trans';
+import { pushPurchaseEvent } from '@theme/utils/gtm';
+
+const CheckoutCompleted = ({
+  params
+}: PageProps<{
+  token: string;
+}>) => {
+  const { t } = useLocalization();
+  const dispatch = useAppDispatch();
+
+  const { data, isLoading } = useFetchCheckoutResultQuery(String(params.token));
+
+  const carouselRef = useRef(null);
+
+  const goToPrev = () => {
+    carouselRef.current?.previous();
+  };
+
+  const goToNext = () => {
+    carouselRef.current?.next();
+  };
+
+  useEffect(() => {
+    dispatch(setCurrentStep(CheckoutStep.Confirmation));
+
+    return () => {
+      dispatch(setCurrentStep(CheckoutStep.Shipping));
+    };
+  }, []);
+
+  useEffect(() => {
+    if (data?.order) {
+      pushPurchaseEvent(data?.order);
+    }
+  }, [data]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[300px]">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!data || !data?.order) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        {t('checkout.completed.not_found')}
+      </div>
+    );
+  }
+
+  const LinkText = ({ orderNumber, href }) => {
+    return (
+      <Link
+        href={href || '#'}
+        className="underline cursor-pointer transition-all hover:text-secondary"
+        passHref
+      >
+        <span data-testid="order-number">{orderNumber}</span>
+      </Link>
+    );
+  };
+
+  return (
+    <div className="container pb-16 px-4 lg:px-0">
+      <CheckoutStepList />
+
+      <div className="flex flex-wrap">
+        <div className="w-full lg:w-6/10 2xl:w-2/3 mb-6 lg:mb-0">
+          <div className="p-6 w-full h-full border border-solid border-gray-400 md:px-20 md:py-14">
+            <div className="mb-4 text-black-800 text-xl font-light sm:text-2xl md:mb-8">
+              {t('checkout.completed.title')}
+            </div>
+            <div className="text-xs leading-6 text-black-400 mb-6">
+              <p>{t('checkout.completed.thank_you')}</p>
+              <p>
+                <Trans
+                  i18nKey="checkout.completed.confirmation_message"
+                  components={{
+                    OrderNumber: (
+                      <LinkText
+                        href={`${ROUTES.ACCOUNT_ORDERS}/${data.order.id}`}
+                        orderNumber={data.order.number}
+                      />
+                    )
+                  }}
+                />
+              </p>
+              <p>{t('checkout.completed.purchase_info')}</p>
+            </div>
+            <div>
+              <div className="mb-4">
+                <div className="text-xs text-gray-950 uppercase tracking-wider mb-1">
+                  {t('checkout.completed.your_email')}
+                </div>
+                <div className="text-xs text-black-400">
+                  {data.order.user_email}
+                </div>
+              </div>
+              <div className="mb-4">
+                <div className="text-xs text-gray-950 uppercase tracking-wider mb-1">
+                  {t('checkout.completed.order_total')}
+                </div>
+                <div className="text-xs text-black-400">
+                  <Price
+                    value={data.order.amount}
+                    data-testid="order-total-price"
+                  />
+                </div>
+              </div>
+              <div className="mb-8">
+                <div className="text-xs text-gray-950 uppercase tracking-wider mb-1">
+                  {t('checkout.completed.payment_type')}
+                </div>
+                <div
+                  className="text-xs text-black-400"
+                  data-testid="order-payment-type"
+                >
+                  {data.order.payment_option.name}
+                </div>
+              </div>
+            </div>
+            <div>
+              <div className="flex items-center justify-center border-t border-solid border-gray-400 py-6">
+                <span className="text-black-800 text-lg font-light">
+                  {t('checkout.completed.order_summary')}
+                </span>
+                <span className="text-gray-950 text-sm ml-4">
+                  <span data-testid="order-item-count">
+                    {data.order.orderitem_set.length}
+                  </span>{' '}
+                  {t('checkout.completed.items')}
+                </span>
+              </div>
+              <div className="flex gap-6">
+                <div
+                  onClick={goToPrev}
+                  className="items-center justify-center hidden sm:flex"
+                >
+                  <div className="flex justify-center p-2 border border-gray-100 rounded-full cursor-pointer">
+                    <Icon
+                      name="chevron-start"
+                      size={15}
+                      className="fill-[#000000]"
+                    />
+                  </div>
+                </div>
+                <div className="w-full overflow-hidden">
+                  <CarouselCore
+                    ref={carouselRef}
+                    responsive={{
+                      large: {
+                        breakpoint: { max: 5000, min: 1370 },
+                        items: 2
+                      },
+                      default: {
+                        breakpoint: { max: 1369, min: 0 },
+                        items: 1
+                      }
+                    }}
+                    swipeable={true}
+                    arrows={false}
+                    itemClass="pr-[50px]"
+                    containerAspectRatio={{
+                      mobile: 460 / 88,
+                      desktop: 637 / 88
+                    }}
+                  >
+                    {data.order.orderitem_set.map((item) => (
+                      <div key={`order-item-${item.id}`} className="flex">
+                        <Link href={item.product.absolute_url} passHref>
+                          <Image
+                            src={item.product.image}
+                            alt={item.product.name}
+                            width={64}
+                            height={96}
+                          />
+                        </Link>
+                        <div className="flex justify-between flex-1 items-center ml-4">
+                          <>
+                            <div className="text-xs text-black-800 transition-all w-full hover:text-secondary">
+                              {item.product.name}
+                            </div>
+                          </>
+                          <div>
+                            {item.retail_price !== item.price && (
+                              <div className="text-black-800 line-through text-xs min-w-max sm:text-sm">
+                                <Price value={item.retail_price} />
+                              </div>
+                            )}
+                            <div className="text-xs text-secondary min-w-max sm:text-sm">
+                              <Price value={item.price} />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </CarouselCore>
+                </div>
+                <div
+                  onClick={goToNext}
+                  className="items-center justify-center hidden sm:flex"
+                >
+                  <div className="flex justify-center p-2 border border-gray-100 rounded-full cursor-pointer">
+                    <Icon
+                      name="chevron-end"
+                      size={15}
+                      className="fill-[#000000]"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="w-full lg:pl-8 lg:w-4/10 2xl:w-1/3">
+          <div className="p-6 w-full h-full border border-solid border-gray-400 md:px-20 md:py-14">
+            <div className="mb-4 text-black-800 text-xl font-light sm:text-2xl md:mb-8">
+              {t('checkout.completed.side.whats_next')}
+            </div>
+            <div className="text-xs leading-6 text-black-400 mb-6">
+              <p>{t('checkout.completed.side.description_first')}</p>
+            </div>
+            <div className="text-xs leading-6 text-black-400 mb-6">
+              <p>{t('checkout.completed.side.description_second')}:</p>
+              <ul>
+                <li>
+                  <Link
+                    href={ROUTES.ACCOUNT_CONTACT}
+                    className="underline cursor-pointer transition-all hover:text-secondary"
+                  >
+                    {t('checkout.completed.side.help_contact')}
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href={ROUTES.ACCOUNT}
+                    className="underline cursor-pointer transition-all hover:text-secondary"
+                    data-testid="order-my-account"
+                  >
+                    {t('checkout.completed.side.my_account')}
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href={ROUTES.ACCOUNT_FAQ}
+                    className="underline cursor-pointer transition-all hover:text-secondary"
+                  >
+                    {t('checkout.completed.side.faq')}
+                  </Link>
+                </li>
+              </ul>
+              <Button
+                appearance="outlined"
+                type="submit"
+                className="w-full mt-8 font-bold"
+                data-testid="order-new-items"
+              >
+                {t('checkout.completed.side.discover_new_items')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CheckoutCompleted;

package/app-template/src/app/[commerce]/[locale]/[currency]/page.tsx

@@ -0,0 +1,50 @@
+import 'server-only';
+
+import { HOME_WIDGETS } from '@theme/widgets';
+import { getWidgetData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import LazyComponent from '@akinon/next/components/lazy-component';
+
+type HomeWidgetOrderType = {
+  widget_order: Array<{
+    value: { item_slug: string };
+    kwargs: { value: object; data_type: string };
+  }>;
+};
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
+
+async function Page() {
+  const data = await getWidgetData<HomeWidgetOrderType>({
+    slug: 'home-widget-order'
+  });
+
+  if (!data?.attributes?.widget_order) {
+    return null;
+  }
+
+  return data.attributes.widget_order.map((widget, index) => {
+    const Widget = HOME_WIDGETS[widget.value.item_slug];
+
+    if (Widget) {
+      if (index > 2) {
+        return (
+          <LazyComponent key={widget.value.item_slug} className="min-h-[150px]">
+            <Widget />
+          </LazyComponent>
+        );
+      }
+
+      return <Widget key={widget.value.item_slug} />;
+    }
+
+    return null;
+  });
+}
+
+export async function generateStaticParams() {
+  return [];
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[commerce]/[locale]/[currency]/product/[pk]/loading.tsx

@@ -0,0 +1,67 @@
+import { Skeleton, SkeletonWrapper } from 'components';
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto">
+      <div className="max-w-5xl mx-auto my-5 px-7">
+        <SkeletonWrapper className="md:mb-7">
+          <Skeleton className="w-[17.25rem] h-4 lg:w-64" />
+        </SkeletonWrapper>
+      </div>
+      <div className="grid max-w-5xl grid-cols-2 lg:gap-8 mx-auto px-7">
+        <div className="col-span-2 mb-7 md:mb-0 lg:col-span-1">
+          <div className="flex gap-1">
+            <SkeletonWrapper className="hidden md:block md:mb-7">
+              {Array(5)
+                .fill(null)
+                .map((_, index) => (
+                  <Skeleton key={index} className="w-20	h-24 mb-2" />
+                ))}
+            </SkeletonWrapper>
+
+            <div className="flex-1">
+              <SkeletonWrapper className="md:mb-7">
+                <Skeleton className="w-full h-[30.375rem] md:h-[36.375rem]" />
+              </SkeletonWrapper>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col items-center col-span-2 lg:col-span-1">
+          <div className="w-full">
+            <SkeletonWrapper className="w-full md:mb-7 flex justify-center items-center">
+              <Skeleton className="w-96 h-16 mb-9" />
+              <Skeleton className="hidden w-36	h-14 mb-9 md:block" />
+
+              <div className="flex flex-col justify-center items-center mb-9">
+                <Skeleton className="w-36 h-4 mb-2" />
+                <div className="flex items-center gap-2">
+                  {Array(3)
+                    .fill(null)
+                    .map((_, index) => (
+                      <Skeleton key={index} className="w-24	h-10" />
+                    ))}
+                </div>
+              </div>
+
+              <div className="flex flex-col justify-center items-center mb-4">
+                <Skeleton className="w-36 h-4 mb-2" />
+                <div className="flex items-center gap-2">
+                  {Array(5)
+                    .fill(null)
+                    .map((_, index) => (
+                      <Skeleton key={index} className="w-11 h-11" />
+                    ))}
+                </div>
+              </div>
+
+              <Skeleton className="hidden w-full h-14 mb-6 md:block" />
+              <Skeleton className="w-40 h-10 mb-9 md:w-72" />
+              <Skeleton className="w-24 h-10 mb-7" />
+              <Skeleton className="w-full h-36" />
+            </SkeletonWrapper>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/product/[pk]/page.tsx

@@ -0,0 +1,81 @@
+import { getProductData, getWidgetData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps, Metadata } from '@akinon/next/types';
+import { generateJsonLd } from '@theme/utils/generate-jsonld';
+import { AccordionWrapper, ProductInfo } from '@theme/views/product';
+import ProductLayout from '@theme/views/product/layout';
+
+export async function generateMetadata({
+  params,
+  searchParams
+}: PageProps<{ pk: number }>) {
+  let result: Metadata = {};
+
+  try {
+    const {
+      data: { product }
+    } = await getProductData({
+      pk: params.pk,
+      searchParams
+    });
+
+    result = {
+      title: product.name,
+      description: String(product.attributes.description),
+      twitter: {
+        title: product.name,
+        description: String(product.attributes.description)
+      },
+      openGraph: {
+        title: product.name,
+        description: String(product.attributes.description),
+        images: product.productimage_set?.map((item) => ({
+          url: item.image
+        }))
+      }
+    };
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+
+async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
+  const [{ data, breadcrumbData }, deliveryReturn] = await Promise.all([
+    getProductData({
+      pk: params.pk,
+      searchParams
+    }),
+    getWidgetData({ slug: 'product-delivery-returns' })
+  ]);
+
+  const jsonLd = generateJsonLd(data.product);
+
+  return (
+    <>
+      <ProductLayout data={data} breadcrumbData={breadcrumbData}>
+        <div className="flex flex-col items-center">
+          <h1
+            className="mt-4 text-2xl text-center md:mt-0"
+            data-testid="product-name"
+          >
+            {data.product.name}
+          </h1>
+
+          <ProductInfo data={data} />
+
+          <AccordionWrapper
+            data={data}
+            deliveryReturn={deliveryReturn?.attributes}
+          />
+        </div>
+      </ProductLayout>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+    </>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[commerce]/[locale]/[currency]/special-page/[pk]/loading.tsx

@@ -0,0 +1,53 @@
+import { Skeleton, SkeletonWrapper } from 'components';
+
+export default function Loading() {
+  return (
+    <div className="container p-4 mx-auto lg:px-0 lg:my-4">
+      <SkeletonWrapper className="md:mb-7">
+        <Skeleton className="w-[17.25rem] h-4 lg:w-64" />
+      </SkeletonWrapper>
+
+      <div className="w-full flex gap-8">
+        <div className="hidden lg:block">
+          <SkeletonWrapper className="w-[17.25rem] h-[650px] shrink-0">
+            <Skeleton className="w-full h-full" />
+          </SkeletonWrapper>
+        </div>
+
+        <div className="flex-1">
+          <div className="lg:hidden">
+            <SkeletonWrapper className="w-full flex-row items-center py-4 justify-center">
+              <div className="w-full flex gap-4 justify-center">
+                <Skeleton className="w-full h-9 md:w-40" />
+                <Skeleton className="w-full h-9 md:w-40" />
+              </div>
+            </SkeletonWrapper>
+          </div>
+
+          <div className="hidden lg:block">
+            <SkeletonWrapper className="w-full flex-row items-center justify-between mb-4">
+              <div className="flex flex-row gap-5">
+                <Skeleton className="w-20 h-5" />
+              </div>
+              <div className="flex items-center gap-7">
+                <Skeleton className="w-[21.25rem] h-[38px]" />
+                <Skeleton className="w-40 h-[38px]" />
+              </div>
+            </SkeletonWrapper>
+          </div>
+
+          <div className="grid gap-x-4 gap-y-7 grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
+            {Array(6)
+              .fill(null)
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  className="w-full h-80 md:h-[26.813rem] lg::h-[35.875rem]"
+                />
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}