@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.20

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

@@ -5,7 +5,8 @@ import { Image } from '@akinon/next/components/image';
 import clsx from 'clsx';
 import { SalesContractModal } from '@theme/views/sales-contract-modal';
 import { useGetOrderQuery } from '@akinon/next/data/client/account';
-import { useEffect, useState, use } from 'react';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
 
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
 import { ROUTES } from '@theme/routes';
@@ -13,9 +14,8 @@ import { useLocalization } from '@akinon/next/hooks';
 import settings from 'settings';
 import { getOrderStatus } from 'utils';
 
-const AccountOrderDetail = ({ params }) => {
-  const pageParams = use(params) as { id: string };
-
+const AccountOrderDetail = () => {
+  const { id } = useParams<{ id: string }>();
   const { locale, t } = useLocalization();
 
   const localeValue = settings.localization.locales.find(
@@ -27,20 +27,21 @@ const AccountOrderDetail = ({ params }) => {
     isLoading,
     isSuccess,
     isFetching
-  } = useGetOrderQuery(pageParams.id);
+  } = useGetOrderQuery(id);
   const [orderDate, setOrderDate] = useState('');
 
   const groupedOrder = [];
 
   if (order) {
-    const groupedData = order.orderitem_set.reduce((groups, item) => {
-      const { tracking_number } = item;
-      if (!groups[tracking_number]) {
-        groups[tracking_number] = [];
-      }
-      groups[tracking_number].push(item);
-      return groups;
-    }, {});
+    const groupedData =
+      order?.orderitem_set?.reduce((groups, item) => {
+        const { tracking_number } = item;
+        if (!groups[tracking_number]) {
+          groups[tracking_number] = [];
+        }
+        groups[tracking_number].push(item);
+        return groups;
+      }, {}) || {};
 
     const result = Object.values(groupedData);
 
@@ -62,7 +63,26 @@ const AccountOrderDetail = ({ params }) => {
   }, [order, isSuccess, localeValue]);
 
   if (isLoading && isFetching) {
-    return <LoaderSpinner />;
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!order) {
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <p className="mt-5 text-start text-lg mb-4">
+          {t('account.my_orders.detail.no_orders_found')}
+        </p>
+        <Link href={`/account/orders/`}>
+          <Button className="px-4" appearance="filled">
+            {t('account.my_orders.detail.back_to_orders')}
+          </Button>
+        </Link>
+      </div>
+    );
   }
 
   return (
@@ -77,8 +97,8 @@ const AccountOrderDetail = ({ params }) => {
 
         <div>
           <span className="text-base font-bold">
-            {order?.orderitem_set.length}{' '}
-            {t('account.my_orders.detail.products')} {groupedOrder.length}{' '}
+            {order?.orderitem_set?.length}{' '}
+            {t('account.my_orders.detail.products')} {groupedOrder?.length}{' '}
             {t('account.my_orders.detail.packages')}
           </span>
         </div>
@@ -88,16 +108,17 @@ const AccountOrderDetail = ({ params }) => {
           className="break-words"
         >
           <span>{t('account.my_orders.detail.delivery_address')}</span>:{' '}
-          {order.shipping_address.line} {order.shipping_address.district.name}{' '}
-          {order.shipping_address.township.name}{' '}
-          {order.shipping_address.city.name}
+          {order?.shipping_address?.line}{' '}
+          {order?.shipping_address?.district?.name}{' '}
+          {order?.shipping_address?.township?.name}{' '}
+          {order?.shipping_address?.city?.name}
         </div>
       </OrderDetailHeader>
 
       <div>
         {groupedOrder.map((group, i) => {
           const orderStatus = getOrderStatus(
-            group[0].status.value.toString(),
+            group[0]?.status?.value?.toString(),
             t
           );
 
@@ -121,8 +142,8 @@ const AccountOrderDetail = ({ params }) => {
                 <div className="flex justify-between items-center lg:gap-x-12">
                   <div className="text-base">{orderStatus.label}</div>
 
-                  {group[0].tracking_number && group[0].tracking_url && (
-                    <Link href={group[0].tracking_url}>
+                  {group[0]?.tracking_number && group[0]?.tracking_url && (
+                    <Link href={group[0]?.tracking_url}>
                       <Button className="px-7" appearance="filled">
                         {t('account.my_orders.detail.track_shipment')}
                       </Button>
@@ -134,7 +155,7 @@ const AccountOrderDetail = ({ params }) => {
               <div className="px-4 lg:px-7">
                 {group.map((item, index) => {
                   const itemStatus = getOrderStatus(
-                    item.status.value.toString(),
+                    item?.status?.value?.toString(),
                     t
                   );
 
@@ -147,15 +168,15 @@ const AccountOrderDetail = ({ params }) => {
                         <div className="flex-shrink-0">
                           <Link
                             className="block"
-                            href={item.product.absolute_url}
+                            href={item?.product?.absolute_url}
                           >
                             <Image
                               src={
-                                item.product.image
+                                item?.product?.image
                                   ? item.product.image
                                   : '/noimage.jpg'
                               }
-                              alt={item.product.name}
+                              alt={item?.product?.name}
                               width={112}
                               height={150}
                             />
@@ -164,33 +185,33 @@ const AccountOrderDetail = ({ params }) => {
 
                         <div className="flex flex-col justify-between lg:max-w-48">
                           <div className="text-sm">
-                            <Link href={item.product.absolute_url}>
-                              {item.product.name}
+                            <Link href={item?.product?.absolute_url}>
+                              {item?.product?.name}
                             </Link>
                           </div>
 
                           <div className="text-gray-900 text-xs">
-                            {item.product.attributes.filterable_color && (
+                            {item?.product?.attributes?.filterable_color && (
                               <div>
                                 <span>
                                   {t('account.my_orders.detail.color')}
                                 </span>
-                                : {item.product.attributes.filterable_color}
+                                : {item?.product?.attributes?.filterable_color}
                               </div>
                             )}
 
-                            {item.product.attributes.size && (
+                            {item?.product?.attributes?.size && (
                               <div>
                                 <span>
                                   {t('account.my_orders.detail.size')}
                                 </span>
-                                :{item.product.attributes.size}
+                                :{item?.product?.attributes?.size}
                               </div>
                             )}
 
                             <div>
                               <span>{t('account.my_orders.detail.code')}</span>:{' '}
-                              {item.product.base_code}
+                              {item?.product?.base_code}
                             </div>
                           </div>
                         </div>
@@ -207,12 +228,11 @@ const AccountOrderDetail = ({ params }) => {
                             {itemStatus.label}
                           </div>
 
-                          {(item.is_cancellable || item.is_refundable) &&
-                            order.is_cancellable &&
-                            item.status.value == '400' && (
+                          {(item?.is_cancellable || item?.is_refundable) &&
+                            order?.is_cancellable && (
                               <div className="lg:ml-24">
                                 <Link
-                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
+                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order?.id}/cancellation`}
                                 >
                                   <Button
                                     className="px-4 uppercase font-bold h-7"
@@ -227,23 +247,22 @@ const AccountOrderDetail = ({ params }) => {
                               </div>
                             )}
                         </div>
-
                         <div className="flex flex-col justify-center items-end lg:ml-6 lg:min-w-[7rem]">
-                          {parseFloat(item.retail_price) >
-                            parseFloat(item.price) && (
+                          {parseFloat(item?.retail_price || '0') >
+                            parseFloat(item?.price || '0') && (
                             <Price
                               className="font-normal line-through"
-                              value={item.retail_price}
+                              value={item?.retail_price}
                             />
                           )}
 
                           <Price
                             className={clsx('font-normal', {
                               'text-secondary-600':
-                                parseFloat(item.retail_price) >
-                                parseFloat(item.price)
+                                parseFloat(item?.retail_price || '0') >
+                                parseFloat(item?.price || '0')
                             })}
-                            value={item.price}
+                            value={item?.price}
                           />
                         </div>
                       </div>
@@ -251,6 +270,70 @@ const AccountOrderDetail = ({ params }) => {
                   );
                 })}
               </div>
+
+              {group.map((item) =>
+                item.cancellationrequest_set?.map((cancellationItem) => {
+                  const status = cancellationItem.status?.value;
+                  const isRejected = status === 'rejected';
+                  const isCompleted = status === 'completed';
+
+                  const filteredImages =
+                    cancellationItem.cancellation_request_image_set?.filter(
+                      (img) =>
+                        isRejected
+                          ? !img.is_uploaded_by_user
+                          : isCompleted
+                          ? img.is_uploaded_by_user
+                          : false
+                    ) || [];
+
+                  const statusText = isRejected
+                    ? t('account.my_orders.return.rejected')
+                    : isCompleted
+                    ? t('account.my_orders.return.completed')
+                    : null;
+
+                  if (!statusText || filteredImages.length === 0) return null;
+
+                  return (
+                    <div
+                      className="w-full px-4 lg:px-7"
+                      key={cancellationItem.id}
+                    >
+                      <div className="flex flex-col py-2 gap-4 border-t border-gray">
+                        <div className="flex flex-col">
+                          <div className="text-sm font-semibold">
+                            {t('account.my_orders.return.return_status')}
+                            <span className="font-normal"> {statusText}</span>
+                          </div>
+
+                          <div className="flex gap-2 mt-2 flex-wrap">
+                            {filteredImages.map((img) => (
+                              <div className="flex flex-col gap-2" key={img.id}>
+                                <Link href={img.image} target="_blank">
+                                  <Image
+                                    src={img.image}
+                                    width={112}
+                                    height={150}
+                                    alt={img.description}
+                                  />
+                                </Link>
+
+                                {img.description && (
+                                  <p className="text-xs">
+                                    {t('account.my_orders.return.explanation')}:
+                                    {img.description}
+                                  </p>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              )}
             </div>
           );
         })}
@@ -263,29 +346,29 @@ const AccountOrderDetail = ({ params }) => {
           <div className="flex justify-between text-sm text-black-700 mb-2">
             <p>
               <span>{t('account.my_orders.detail.subtotal')}</span> (
-              {order.orderitem_set.length}{' '}
+              {order?.orderitem_set?.length}{' '}
               <span>{t('account.my_orders.detail.items')}</span>)
             </p>
 
             <Price
               className="font-normal min-w-max"
               value={
-                parseFloat(order.amount_without_discount) -
-                parseFloat(order.shipping_amount)
+                parseFloat(order?.amount_without_discount || '0') -
+                parseFloat(order?.shipping_amount || '0')
               }
             />
           </div>
 
-          {order.discountitem_set &&
-            order.discountitem_set.map((item, index) => (
+          {order?.discountitem_set &&
+            order?.discountitem_set?.map((item, index) => (
               <div
                 className="flex justify-between text-sm text-black-700 mb-2"
                 key={index}
               >
-                <p>{item.name}</p>
+                <p>{item?.name}</p>
                 <Price
                   className="font-normal min-w-max"
-                  value={item.amount}
+                  value={item?.amount}
                   useNegative
                 />
               </div>
@@ -298,7 +381,8 @@ const AccountOrderDetail = ({ params }) => {
               className="font-normal min-w-max"
               data-testid="account-orders-detail-total"
               value={
-                parseFloat(order.amount) - parseFloat(order.shipping_amount)
+                parseFloat(order?.amount || '0') -
+                parseFloat(order?.shipping_amount || '0')
               }
             />
           </div>

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

@@ -288,9 +288,9 @@ export default function Page() {
                 />
               </div>
             </div>
-            {errors && (
+            {errors?.birthdate?.message && (
               <div className="mt-1 text-sm text-error">
-                {errors.birthdate?.message}
+                {String(errors.birthdate.message)}
               </div>
             )}
           </div>

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

@@ -0,0 +1,27 @@
+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 { 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} />
+      </>
+    );
+  } 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]/error.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+import PzErrorPage from '@akinon/next/views/error-page';
+
+export default function ErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
+  useSentryUncaughtErrors(error);
+
+  return <PzErrorPage error={error} reset={reset} />;
+}

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;
 
@@ -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 { PageProps, ResolvedPageProps, Metadata } from '@akinon/next/types';
+import { generateJsonLd } from '@theme/utils/generate-jsonld';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata(
+  props: PageProps<{ 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,7 +6,7 @@ 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';
@@ -42,19 +42,12 @@ 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">
               <MobileAppToggler>

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

@@ -1,11 +1,9 @@
 import { getListData } from '@akinon/next/data/server';
 import { withSegmentDefaults } from '@akinon/next/hocs/server';
-import { PageProps } from '@akinon/next/types';
+import { ResolvedPageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
 
-async function Page(props: PageProps) {
-  const searchParams = await props.searchParams;
-
+async function Page({ searchParams }: ResolvedPageProps) {
   const data = await getListData({ searchParams });
 
   return (

package/app-template/src/app/{[commerce]/[locale]/[currency]/pz-not-found/page.tsx → [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-6 flex flex-col items-center justify-center">
-      <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">{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;
+}