@akinon/projectzero 2.0.0-beta.9 → 2.0.0

package/app-template/src/app/[pz]/blog/[slug]/page.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { Image } from '@akinon/next/components';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useLocalization } from '@akinon/next/hooks/use-localization';
+import { WidgetResultType } from '@akinon/next/types';
+import { Icon, Link, LoaderSpinner } from '@theme/components';
+import { formatDateToMonthYear } from '@theme/utils/formatDate';
+import { useParams } from 'next/navigation';
+
+interface BlogItemKwargs {
+  url: string;
+  data_type: string;
+  value: string;
+}
+
+type blogItem = {
+  value: string;
+  kwargs: BlogItemKwargs;
+};
+
+type BlogType = {
+  title: blogItem;
+  link: blogItem;
+  description: blogItem;
+  image: blogItem;
+  date: blogItem;
+};
+
+export default function Page() {
+  const params = useParams<{ slug: string }>();
+  const { locale, t } = useLocalization();
+  const slug = params.slug;
+  const { data, isLoading } = useGetWidgetQuery(slug) as ReturnType<
+    typeof useGetWidgetQuery
+  >;
+  const blogData = data as WidgetResultType<BlogType> | undefined;
+
+  if (isLoading) {
+    return (
+      <div className="py-20">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!blogData) {
+    return (
+      <div className="container mx-auto py-10">
+        <p className="text-center py-20">{t('blog.blog_not_found')}</p>
+        <Link
+          className="text-sm text-[#121212] mt-20 mb-20 lg:mb-10 flex items-center justify-center"
+          href="/blog"
+        >
+          <Icon name="arrow-left" size={16} className="mr-2" />
+          <span className="hover:underline">{t('blog.back_to_blogs')}</span>
+        </Link>
+      </div>
+    );
+  }
+
+  const formattedDate = formatDateToMonthYear(
+    blogData?.attributes?.date?.value,
+    locale as any
+  );
+
+  return (
+    <div>
+      <div className="container mx-auto py-1 lg:py-10 lg:px-4">
+        <Image
+          src={blogData?.attributes?.image?.kwargs?.url}
+          alt={blogData?.attributes?.title?.value || 'Blog Image'}
+          aspectRatio={1072 / 923}
+          fill
+          sizes="100vw"
+          className="w-full h-auto mb-6 rounded-lg object-cover"
+        />
+        <div className="lg:max-w-[699px] lg:mx-auto px-3 lg:px-0">
+          <h1 className="text-[40px] mb-2 lg:mb-4 text-[#121212]">
+            {blogData?.attributes?.title?.value || 'Blog Title'}
+          </h1>
+          <span className="text-[13px] mb-5 lg:mb-12 block">
+            {formattedDate}
+          </span>
+
+          <Link className=" mb-12 inline-flex items-center" href={'#'}>
+            <Icon name="share" size={16} className="mr-2" />
+            <span className="text-sm text-[#121212] hover:underline">
+              {t('blog.share')}
+            </span>
+          </Link>
+
+          <div
+            className="prose max-w-none prose-headings:text-primary"
+            dangerouslySetInnerHTML={{
+              __html: blogData?.attributes?.description?.value || 'Blog Content'
+            }}
+          />
+
+          {blogData?.attributes?.link?.value && (
+            <Link
+              className="text-sm text-[#121212] underline mt-6 inline-block"
+              href={blogData?.attributes?.link?.value}
+            >
+              {t('blog.view_product')}
+            </Link>
+          )}
+        </div>
+
+        <Link
+          className="text-sm text-[#121212] mt-20 mb-20 lg:mb-10 flex items-center justify-center"
+          href="/blog"
+        >
+          <Icon name="arrow-left" size={16} className="mr-2" />
+          <span className="hover:underline">{t('blog.back_to_blogs')}</span>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[pz]/category/[pk]/page.tsx

@@ -0,0 +1,37 @@
+import { getCategoryData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+import { buildListingPageContext } from '@theme/utils/theme-page-context';
+import { notFound } from 'next/navigation';
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  try {
+    const { data, breadcrumbData } = await getCategoryData({
+      pk: params.pk,
+      searchParams
+    });
+
+    return (
+      <>
+        <CategoryLayout
+          data={data}
+          breadcrumbData={breadcrumbData}
+          pageContext={buildListingPageContext({
+            data,
+            breadcrumbData,
+            pageType: 'category',
+            path: data.category?.absolute_url
+          })}
+        />
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/flat-page/[pk]/page.tsx

@@ -0,0 +1,23 @@
+import { getFlatPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } from '@akinon/next/types';
+import { notFound } from 'next/navigation';
+
+async function Page({ params }: ResolvedPageProps<{ pk: number }>) {
+  try {
+    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>
+    );
+  } catch (error) {
+    notFound();
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -4,7 +4,6 @@ import { GenerateFormFields } from '@theme/components/generate-form-fields';
 
 export default async function Page(props) {
   const params = await props.params;
-
   const data = await getFormData({ pk: params.pk });
   const { schema, is_active, name, pk } = data;
 
@@ -21,7 +20,7 @@ export default async function Page(props) {
         schema={schema}
         allFieldClasses={{
           className:
-            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-hidden focus:border-black',
+            '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'
         }}
@@ -41,7 +40,7 @@ export default async function Page(props) {
         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'
+            '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')}
       />

package/app-template/src/app/[pz]/group-product/[pk]/page.tsx

@@ -0,0 +1,93 @@
+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 { AsyncPageProps, ResolvedPageProps, Metadata } from '@akinon/next/types';
+import { generateJsonLd } from '@theme/utils/generate-jsonld';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata(
+  props: AsyncPageProps<{ pk: number }>
+) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+  let result: Metadata = {};
+
+  try {
+    const { data } = await getProductData({
+      pk: params.pk,
+      searchParams,
+      groupProduct: true
+    });
+
+    const product = data?.product;
+
+    if (!product) {
+      return {};
+    }
+
+    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
+        }))
+      }
+    };
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+
+  return result;
+}
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  if (params.pk === undefined || isNaN(Number(params.pk))) {
+    notFound();
+  }
+
+  try {
+    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) }}
+        />
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

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

@@ -1,10 +1,8 @@
 import { getLandingPageData } from '@akinon/next/data/server';
 import { withSegmentDefaults } from '@akinon/next/hocs/server';
-import { PageProps } from '@akinon/next/types';
-
-async function Page(props: PageProps<{ pk: number }>) {
-  const params = await props.params;
+import { ResolvedPageProps } from '@akinon/next/types';
 
+async function Page({ params }: ResolvedPageProps<{ pk: number }>) {
   const data = await getLandingPageData({ pk: params.pk });
 
   const content = data.landing_page;

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/layout.tsx

@@ -6,13 +6,14 @@ 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 { ResolvedRootLayoutProps, 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';
+import RouteHandler from '@theme/components/route-handler';
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -42,26 +43,20 @@ export async function generateMetadata() {
   return result;
 }
 
-async function RootLayout({
-  params,
-  locale,
-  translations,
-  children
-}: RootLayoutProps) {
-  const layoutParams = await params;
-
+async function RootLayout({ locale, translations, children }: ResolvedRootLayoutProps) {
   return (
     <html lang={locale.isoCode} {...(locale.rtl ? { dir: 'rtl' } : {})}>
       <head />
       <body className="overflow-x-hidden">
-        <PzRoot translations={translations} {...layoutParams}>
+        <PzRoot translations={translations} locale={locale.value}>
           <ClientRoot>
-            <div className="overflow-x-hidden">
+            <div className="overflow-x-clip">
               <MobileAppToggler>
                 <Header />
               </MobileAppToggler>
               <main>
                 {children}
+                <RouteHandler />
                 <RootModal />
               </main>
               <MobileAppToggler>

package/app-template/src/app/[pz]/list/page.tsx

@@ -0,0 +1,26 @@
+import { getListData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+import { ROUTES } from '@theme/routes';
+import { buildListingPageContext } from '@theme/utils/theme-page-context';
+
+async function Page({ searchParams }: ResolvedPageProps) {
+  const data = await getListData({ searchParams });
+  const pageType = data.search_text ? 'search' : 'plp';
+
+  return (
+    <>
+      <CategoryLayout
+        data={data}
+        pageContext={buildListingPageContext({
+          data,
+          pageType,
+          path: ROUTES.LIST
+        })}
+      />
+    </>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/not-found.tsx

@@ -4,14 +4,14 @@ import React from 'react';
 import { Button, Link } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 
-const NotFound = () => {
+export default function NotFound() {
   const { t } = useLocalization();
 
   return (
-    <div className="py-10 lg:py-8 flex flex-col items-center justify-center px-4 lg:px-0">
-      <div className="text-8xl font-bold">404</div>
+    <div className="py-10 flex flex-col items-center justify-center">
+      <div className="text-8xl font-bold text-gray-400">404</div>
       <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
-      <p className="text-lg mb-6 text-center">{t('not_found.sub_title')}</p>
+      <p className="text-lg mb-6 text-gray-600">{t('not_found.sub_title')}</p>
       <Link href={'/'}>
         <Button className="h-auto mt-4 text-base py-3 px-6">
           {t('not_found.button')}
@@ -19,6 +19,4 @@ const NotFound = () => {
       </Link>
     </div>
   );
-};
-
-export default NotFound;
+}

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

@@ -1,11 +1,12 @@
 'use client';
 
-import { useEffect, useRef, use } from 'react';
+import { useEffect, useRef } from 'react';
+import { useParams } from 'next/navigation';
 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 { CheckoutStep } 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';
@@ -14,10 +15,11 @@ import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 import { pushPurchaseEvent } from '@theme/utils/gtm';
 
-const CheckoutCompleted = (props) => {
+const CheckoutCompleted = () => {
+  const params = useParams<{ token: string }>();
   const { t } = useLocalization();
   const dispatch = useAppDispatch();
-  const params = use(props.params) as { token: string };
+
   const { data, isLoading } = useFetchCheckoutResultQuery(String(params.token));
 
   const carouselRef = useRef(null);

package/app-template/src/app/[pz]/page.tsx

@@ -0,0 +1,28 @@
+import 'server-only';
+
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
+import { buildHomepagePageContext } from '@theme/utils/theme-page-context';
+
+export const dynamic = 'force-static';
+export const revalidate = 600;
+
+const getPlaceholderSlug = (baseSlug: string) => {
+  const isDevelopment = process.env.NODE_ENV === 'development';
+  return isDevelopment ? `${baseSlug}-dev` : baseSlug;
+};
+
+async function Page() {
+  return (
+    <ThemePlaceholder
+      slug={getPlaceholderSlug('homepage-body-new')}
+      pageContext={buildHomepagePageContext()}
+    />
+  );
+}
+
+export async function generateStaticParams() {
+  return [];
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/pages/[slug]/page.tsx

@@ -0,0 +1,19 @@
+import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } from '@akinon/next/types';
+import { buildCustomPageContext } from '@theme/utils/theme-page-context';
+
+export const dynamic = 'force-dynamic';
+
+async function Page({ params }: ResolvedPageProps<{ slug: string }>) {
+  return (
+    <div className="min-h-screen">
+      <ThemePlaceholder
+        slug={`page-${params.slug}`}
+        pageContext={buildCustomPageContext(params.slug)}
+      />
+    </div>
+  );
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/product/[pk]/page.tsx

@@ -0,0 +1,102 @@
+import { getProductData, getWidgetData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { AsyncPageProps, ResolvedPageProps, 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';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata(
+  props: AsyncPageProps<{ pk: number }>
+) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+  let result: Metadata = {};
+
+  try {
+    const { data } = await getProductData({
+      pk: params.pk,
+      searchParams
+    });
+
+    const product = data?.product;
+
+    if (!product) {
+      return {};
+    }
+
+    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
+        }))
+      }
+    };
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+
+  return result;
+}
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  if (params.pk === undefined || isNaN(Number(params.pk))) {
+    notFound();
+  }
+
+  try {
+    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) }}
+        />
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/[pz]/special-page/[pk]/page.tsx

@@ -0,0 +1,35 @@
+import { getSpecialPageData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import { ResolvedPageProps } from '@akinon/next/types';
+import CategoryLayout from '@theme/views/category/layout';
+import SpecialPageBanner from '@theme/widgets/special-page-banner';
+import SpecialPageCarousel from '@theme/widgets/special-page-carousel';
+import { notFound } from 'next/navigation';
+
+async function Page({ params, searchParams }: ResolvedPageProps<{ pk: number }>) {
+  try {
+    const data = await getSpecialPageData({ pk: params.pk, searchParams });
+
+    return (
+      <>
+        <CategoryLayout data={data}>
+          {data.special_page && (
+            <>
+              <SpecialPageBanner data={data.special_page} />
+              <SpecialPageCarousel
+                slug={data.special_page.video_embedded_code}
+              />
+            </>
+          )}
+        </CategoryLayout>
+      </>
+    );
+  } catch (error: unknown) {
+    if ((error as Error & { status?: number })?.status === 404) {
+      notFound();
+    }
+    throw error;
+  }
+}
+
+export default withSegmentDefaults(Page, { segmentType: 'page' });

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/users/email-set-primary/[[...id]]/page.tsx

@@ -2,11 +2,10 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useChangeEmailVerificationQuery } from '@akinon/next/data/client/user';
-import { use } from 'react';
-
-export default function Page(props) {
-  const { id } = use(props.params) as { id: string[] };
+import { useParams } from 'next/navigation';
 
+export default function Page() {
+  const { id } = useParams<{ id: string[] }>();
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useChangeEmailVerificationQuery(
     id.join('/')

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/users/registration/account-confirm-email/[[...id]]/page.tsx

@@ -2,10 +2,10 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useConfirmEmailVerificationQuery } from '@akinon/next/data/client/user';
-import { use } from 'react';
+import { useParams } from 'next/navigation';
 
-export default function Page(props) {
-  const { id } = use(props.params) as { id: string[] };
+export default function Page() {
+  const { id } = useParams<{ id: string[] }>();
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useConfirmEmailVerificationQuery(
     id.join('/')