@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,76 @@
+'use client';
+
+import { Login } from '@theme/views/login';
+import { Register } from '@theme/views/register';
+import { useSession } from 'next-auth/react';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '@theme/components';
+
+export default function Auth() {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { t } = useLocalization();
+  const [activeTab, setActiveTab] = useState('login');
+
+  const tabClass = (tabName) => {
+    return twMerge(
+      clsx(
+        'text-base font-normal text-primary-800 px-7 py-4 border border-b-0 border-gray-100 bg-gray-100 h-auto relative',
+        {
+          'bg-white before:w-full before:bg-white before:h-2 before:-bottom-1 before:left-0 before:absolute':
+            activeTab === tabName
+        }
+      )
+    );
+  };
+
+  useEffect(() => {
+    if (session?.user) {
+      router.push(searchParams.get('callbackUrl') ?? '/');
+    }
+  }, [session?.user]);
+
+  return (
+    <section className="container px-4 my-7 md:mt-20 lg:px-0 lg:mx-auto">
+      <div className="w-full flex justify-center gap-3 md:hidden">
+        <Button
+          className={tabClass('login')}
+          onClick={() => setActiveTab('login')}
+        >
+          {t('auth.login.mobile_title')}
+        </Button>
+        <Button
+          className={tabClass('register')}
+          onClick={() => setActiveTab('register')}
+        >
+          {t('auth.register.mobile_title')}
+        </Button>
+      </div>
+      <div className="w-full flex flex-wrap border md:border-0">
+        <div
+          className={twMerge(
+            clsx('w-full md:block md:w-1/2', {
+              hidden: activeTab !== 'register'
+            })
+          )}
+        >
+          <Register />
+        </div>
+        <div
+          className={twMerge(
+            clsx('w-full md:block md:w-1/2', {
+              hidden: activeTab !== 'login'
+            })
+          )}
+        >
+          <Login />
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { useEffect } from 'react';
+import { ROUTES } from '@theme/routes';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { pushCartView } from '@theme/utils/gtm';
+import { Button, LoaderSpinner, Link } from '@theme/components';
+import { BasketItem, Summary } from '@theme/views/basket';
+import { useLocalization } from '@akinon/next/hooks';
+
+export default function Page() {
+  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const { t } = useLocalization();
+
+  useEffect(() => {
+    if (isSuccess) {
+      const products = basket.basketitem_set.map((basketItem) => ({
+        ...basketItem.product
+      }));
+      pushCartView(products);
+    }
+  }, [basket, isSuccess]);
+
+  return (
+    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
+      {isLoading && (
+        <div className="flex justify-center w-full">
+          <LoaderSpinner />
+        </div>
+      )}
+      {isSuccess &&
+        (basket && basket.basketitem_set && basket.basketitem_set.length > 0 ? (
+          <>
+            <div className="flex-1 xl:mr-16">
+              <div className="flex items-center justify-between py-2 border-b border-gray-200 lg:py-3">
+                <h2 className="text-xl lg:text-2xl font-light">
+                  {t('basket.my_cart')}
+                </h2>
+                <Link
+                  href={ROUTES.HOME}
+                  className="text-xs hover:text-secondary-500"
+                >
+                  {t('basket.back_to_shopping')}
+                </Link>
+              </div>
+              <ul>
+                {basket.basketitem_set.map((basketItem, index) => (
+                  <BasketItem basketItem={basketItem} key={index} />
+                ))}
+              </ul>
+            </div>
+            <Summary basket={basket} />
+          </>
+        ) : (
+          <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
+            <h1
+              className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
+              data-testid="basket-empty"
+            >
+              {t('basket.empty.title')}
+            </h1>
+
+            <div className="w-full text-sm text-black-800 text-center my-4 mb-2 sm:text-base">
+              <p>{t('basket.empty.content_first')}</p>
+              <p>{t('basket.empty.content_second')}.</p>
+            </div>
+
+            <Link href={ROUTES.HOME} passHref>
+              <Button className="px-10 mt-2" appearance="filled">
+                {t('basket.empty.button')}
+              </Button>
+            </Link>
+          </div>
+        ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+'use client';
+
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+export default function BasketB2B() {
+  return <PluginModule component={Component.BasketB2B} />;
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/category/[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>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { getCategoryData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+
+async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
+  const { data } = await getCategoryData({ pk: params.pk, searchParams });
+
+  return (
+    <>
+      <CategoryLayout data={data} />
+    </>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -0,0 +1,9 @@
+'use client';
+
+export default function ClientRoot({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

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

@@ -0,0 +1,11 @@
+'use client';
+
+import ContactForm from '@theme/views/account/contact-form';
+
+export default function ContactPage() {
+  return (
+    <div className="container mx-auto py-6">
+      <ContactForm />
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+
+export default function Error() {
+  const { t } = useLocalization();
+
+  return (
+    <section className="text-center px-6 my-14 md:px-0 md:m-14">
+      <div className="text-7xl font-bold md:text-8xl">500</div>
+      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
+      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>
+      <Link href={ROUTES.HOME} className="text-lg underline">
+        {t('common.page_500.link_text')}
+      </Link>
+    </section>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { PageLoaderSpinner } from '@theme/views/page-loader-spinner';
+
+export default function Loading() {
+  return <PageLoaderSpinner />;
+}

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

@@ -0,0 +1,18 @@
+import { getFlatPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps } from '@akinon/next/types';
+
+async function Page({ params }: PageProps<{ pk: number }>) {
+  const data = await getFlatPageData({ pk: params.pk });
+
+  return (
+    <div className="container mx-auto py-6">
+      <div
+        className="mx-auto prose prose-headings:text-primary"
+        dangerouslySetInnerHTML={{ __html: data.flat_page.content }}
+      />
+    </div>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -0,0 +1,48 @@
+import { getFormData } from '@akinon/next/data/server';
+import { t } from '@akinon/next/utils/server-translation';
+import { GenerateFormFields } from '@theme/components/generate-form-fields';
+
+export default async function Page({ params }) {
+  const data = await getFormData({ pk: params.pk });
+  const { schema, is_active, name, pk } = data;
+
+  if (!is_active) {
+    return null;
+  }
+
+  return (
+    <div className="relative">
+      <div className="bg-[#f7f7f7] h-[245px] w-full">
+        <h1 className="text-[30px] text-center pt-14">{name}</h1>
+      </div>
+      <GenerateFormFields
+        schema={schema}
+        allFieldClasses={{
+          className:
+            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-none focus:border-black',
+          labelClassName: 'text-[#4a4f54] text-xs',
+          wrapperClassName: 'flex flex-col mb-6'
+        }}
+        fieldProperties={[
+          {
+            key: 'address',
+            className: 'h-[58px]'
+          },
+          {
+            key: 'dropdown',
+            className: 'w-full',
+            attributes: {
+              placeholder: 'Please select'
+            }
+          }
+        ]}
+        formProperties={{
+          actionUrl: `/api/form/${pk}/`,
+          className:
+            'w-[calc(100%-36px)] md:w-[570px] px-[18px] py-[60px] md:p-[100px] border border-[#cbc8c8] border-t-[3px] border-t-[#e95151] mx-auto -mt-[100px] bg-white mb-14',
+        }}
+        submitButtonText={t('form.form_page.submit_button_text')}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { PageLoaderSpinner } from '@theme/views/page-loader-spinner';
+
+export default function Loading() {
+  return <PageLoaderSpinner />;
+}

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

@@ -0,0 +1,72 @@
+import ProductLayout from '@theme/views/product/layout';
+import { ProductGroupInfo } from '@theme/views/product';
+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';
+
+export async function generateMetadata({
+  params,
+  searchParams
+}: PageProps<{ pk: number }>) {
+  let result: Metadata = {};
+
+  try {
+    const {
+      data: { product }
+    } = await getProductData({
+      pk: params.pk,
+      searchParams,
+      groupProduct: true
+    });
+
+    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,
+      groupProduct: true
+    }),
+    getWidgetData({ slug: 'product-delivery-returns' })
+  ]);
+
+  const jsonLd = generateJsonLd(data.product);
+
+  return (
+    <>
+      <ProductLayout data={data} breadcrumbData={breadcrumbData}>
+        <ProductGroupInfo
+          data={data}
+          deliveryReturn={deliveryReturn?.attributes}
+        />
+      </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]/landing-page/[pk]/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoaderSpinner } from '@theme/views/page-loader-spinner';
+
+export default function Loading() {
+  return <PageLoaderSpinner />;
+}

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

@@ -0,0 +1,23 @@
+import { getLandingPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps } from '@akinon/next/types';
+import logger from '@akinon/next/utils/log';
+import * as console from 'console';
+
+async function Page({ params }: PageProps<{ pk: number }>) {
+  const data = await getLandingPageData({ pk: params.pk });
+
+  const content = data.landing_page;
+
+  return (
+    <div className="container mx-auto py-6">
+      <div className="mx-auto prose prose-headings:text-primary">
+        Landing page {JSON.stringify(content)}
+      </div>
+    </div>
+  );
+}
+
+export default withSegmentDefaults(Page, {
+  segmentType: 'page'
+});

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

@@ -0,0 +1,78 @@
+import 'server-only';
+import '@theme/assets/globals.scss';
+
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import Footer from '@theme/views/footer';
+import Header from '@theme/views/header';
+import RootModal from '@theme/views/root-modal';
+import ClientRoot from './client-root';
+import { RootLayoutProps, Metadata } from '@akinon/next/types';
+import { getSeoData } from '@akinon/next/data/server';
+import PzRoot from '@akinon/next/components/pz-root';
+import MobileAppToggler from '@akinon/next/components/mobile-app-toggler';
+import pwaTags from '@theme/components/pwa-tags';
+import type { Viewport } from 'next';
+import settings from '@theme/settings';
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  height: 'device-height',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false
+};
+
+export async function generateMetadata() {
+  const { locales } = settings.localization;
+
+  const languages = locales.map(({ localePath }) => ({
+    [localePath]: `/${localePath}`
+  }));
+
+  let result: Metadata = {
+    alternates: {
+      languages: languages.reduce((acc, cur) => ({ ...acc, ...cur }), {})
+    }
+  };
+
+  const response = await getSeoData('/');
+
+  result = { ...result, ...pwaTags, ...response };
+
+  return result;
+}
+
+async function RootLayout({
+  params,
+  locale,
+  translations,
+  children
+}: RootLayoutProps) {
+  return (
+    <html lang={locale.isoCode} {...(locale.rtl ? { dir: 'rtl' } : {})}>
+      <head />
+      <body className="overflow-x-hidden">
+        <PzRoot translations={translations} {...params}>
+          <ClientRoot>
+            <div className="overflow-x-hidden">
+              <MobileAppToggler>
+                <Header />
+              </MobileAppToggler>
+              <main>
+                {children}
+                <RootModal />
+              </main>
+              <MobileAppToggler>
+                <Footer />
+              </MobileAppToggler>
+            </div>
+          </ClientRoot>
+        </PzRoot>
+      </body>
+    </html>
+  );
+}
+
+export default withSegmentDefaults(RootLayout, {
+  segmentType: 'root-layout'
+});

package/app-template/src/app/[commerce]/[locale]/[currency]/list/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>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { getListData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { PageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+
+async function Page({ searchParams }: PageProps) {
+  const data = await getListData({ searchParams });
+
+  return (
+    <>
+      <CategoryLayout data={data} />
+    </>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });