@akinon/projectzero 1.29.0-rc.2 → 1.29.0

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

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

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

@@ -1,285 +0,0 @@
-'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 = (props) => {
-    return (
-      <Link
-        {...props}
-        href={props.href || '#'}
-        className="underline cursor-pointer transition-all hover:text-secondary"
-        passHref
-      >
-        <span data-testid="order-number">{props.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

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

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

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

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