@akinon/projectzero 2.0.0-beta.1 → 2.0.0-beta.10

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/cancellation/page.tsx

@@ -15,7 +15,8 @@ import {
   Select,
   Modal,
   LoaderSpinner,
-  Link
+  Link,
+  FileInput
 } from '@theme/components';
 import { useState, use } from 'react';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
@@ -41,6 +42,7 @@ const AccountOrderCancellation = ({ params }) => {
   } = useForm<AccountOrderCancellation>({
     resolver: yupResolver(accountOrderCancellationSchema)
   });
+
   const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
     useGetCancellationReasonsQuery();
 
@@ -58,6 +60,9 @@ const AccountOrderCancellation = ({ params }) => {
   const watchAllFields = watch();
   const cancelItemsLength = watchAllFields?.cancel_order_items?.length;
   const [cancelOrder] = useCancelOrderMutation();
+  const [files, setFiles] = useState<
+    { itemId: string; image: string; description: string }[]
+  >([]);
 
   const modalHandleClick = () => {
     setIsModalOpen(false);
@@ -114,8 +119,68 @@ const AccountOrderCancellation = ({ params }) => {
     ]);
   };
 
+  const handleFileChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+    itemId: string,
+    description: string
+  ) => {
+    const selectedFiles = Array.from(e.target.files || []);
+
+    const base64Files = await Promise.all(
+      selectedFiles.map((file) => {
+        return new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      })
+    );
+
+    const validFiles = base64Files.filter((file) =>
+      /^data:image\/(jpeg|png|jpg);base64,.+/.test(file)
+    );
+
+    const formattedFiles = validFiles.map((file) => ({
+      itemId,
+      image: file,
+      description
+    }));
+
+    setFiles((prevFiles) => [
+      ...prevFiles.filter((f) => f.itemId !== itemId),
+      ...formattedFiles
+    ]);
+  };
+
+  const fileInputCondition = (item, description: string) => {
+    if (item.is_refundable && !item.active_cancellation_request) {
+      return (
+        <FileInput
+          name="files"
+          title="files"
+          multiple
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleFileChange(e, item.id, description)
+          }
+        />
+      );
+    }
+  };
+
   const onSubmit: SubmitHandler<AccountOrderCancellation> = (orderItems) => {
-    cancelOrder({ id: order.number, ...orderItems })
+    const mergedData = {
+      ...orderItems,
+      cancel_order_items: orderItems.cancel_order_items.map((orderItem) => ({
+        ...orderItem,
+        ...(files.length > 0 && {
+          cancellation_request_image_set: files.filter(
+            (file) => file.itemId === orderItem.order_item
+          )
+        })
+      }))
+    };
+    cancelOrder({ id: order.number, ...mergedData })
       .unwrap()
       .then(() => {
         setResponseMessage({
@@ -124,10 +189,33 @@ const AccountOrderCancellation = ({ params }) => {
         });
         setIsModalOpen(true);
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error('Err', err);
+
+        const errorMessages = new Set();
+
+        if (err?.data?.cancel_order_items) {
+          err.data.cancel_order_items.forEach((item) => {
+            if (item.cancellation_request_image_set) {
+              item.cancellation_request_image_set.forEach((error) => {
+                if (typeof error === 'string') {
+                  errorMessages.add(error);
+                } else if (typeof error === 'object' && error?.image) {
+                  error.image.forEach((msg) => errorMessages.add(msg));
+                }
+              });
+            }
+          });
+        }
+
+        const errorContent =
+          errorMessages.size > 0
+            ? Array.from(errorMessages).join('\n')
+            : t('account.my_orders.return.error.description').toString();
+
         setResponseMessage({
           title: t('account.my_orders.return.error.title').toString(),
-          content: t('account.my_orders.return.error.description').toString()
+          content: errorContent
         });
         setIsModalOpen(true);
       });
@@ -182,6 +270,7 @@ const AccountOrderCancellation = ({ params }) => {
                         onChange={onChange}
                         value={value}
                         selectOption={selectOption}
+                        fileInput={fileInputCondition(item, item.product.name)}
                       />
                     );
                   }}

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

@@ -144,7 +144,7 @@ const AccountOrderDetail = ({ params }) => {
                       key={index}
                     >
                       <div className="flex gap-3 mb-5 lg:mb-0">
-                        <div className="flex-shrink-0">
+                        <div className="shrink-0">
                           <Link
                             className="block"
                             href={item.product.absolute_url}
@@ -208,8 +208,7 @@ const AccountOrderDetail = ({ params }) => {
                           </div>
 
                           {(item.is_cancellable || item.is_refundable) &&
-                            order.is_cancellable &&
-                            item.status.value == '400' && (
+                            order.is_cancellable && (
                               <div className="lg:ml-24">
                                 <Link
                                   href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
@@ -227,7 +226,6 @@ 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) && (
@@ -251,6 +249,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>
           );
         })}

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

@@ -53,7 +53,7 @@ export default function Page() {
     <div className="hidden lg:block">
       <div className="bg-gray-150">
         {orderLoading && (
-          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center !flex-row xl:h-[5.5rem]">
+          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center flex-row! xl:h-[5.5rem]">
             <Skeleton className="w-[11.375rem] h-16 mr-4 xl:w-[16rem] xl:h-10" />
             <Skeleton className="w-56 h-10 mr-4" />
             <Skeleton className="w-[12.75rem] h-10 xl:w-56" />

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

@@ -122,7 +122,7 @@ export default function Stores() {
 
       <div className="flex gap-6 mt-4 flex-col md:flex-row">
         {city && (
-          <div className="w-full flex-shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
+          <div className="w-full shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
             {cityLoading && (
               <SkeletonWrapper>
                 <Skeleton className="w-full h-20" />
@@ -174,7 +174,7 @@ export default function Stores() {
                           title={store.name}
                           titleClassName="text-xs font-bold"
                           iconSize={12}
-                          className="relative py-3 border-b justify-center mb-0"
+                          className="relative py-3 border-b border-gray-200 justify-center mb-0"
                         >
                           <div className="text-xs">
                             {store.address && (

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

@@ -51,7 +51,7 @@ export default function Auth() {
           {t('auth.register.mobile_title')}
         </Button>
       </div>
-      <div className="w-full flex flex-wrap border md:border-0">
+      <div className="w-full flex flex-wrap border border-gray-200 md:border-0">
         <div
           className={twMerge(
             clsx('w-full md:block md:w-1/2', {

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

@@ -25,7 +25,7 @@ export default function Page() {
   }, [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">
+    <div className="max-w-(--breakpoint-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 />
@@ -62,7 +62,7 @@ export default function Page() {
             <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">
+          <div className="flex flex-col items-center container max-w-(--breakpoint-sm) py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-(--breakpoint-xl)">
             <h1
               className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
               data-testid="basket-empty"

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

@@ -1,20 +1,17 @@
 'use client';
 
-import { useLocalization } from '@akinon/next/hooks';
-import { Link } from '@theme/components';
-import { ROUTES } from '@theme/routes';
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+import PzErrorPage from '@akinon/next/views/error-page';
 
-export default function Error() {
-  const { t } = useLocalization();
+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 (
-    <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>
-  );
+  return <PzErrorPage error={error} reset={reset} />;
 }

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

@@ -21,7 +21,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-none focus:border-black',
+            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-hidden focus:border-black',
           labelClassName: 'text-[#4a4f54] text-xs',
           wrapperClassName: 'flex flex-col mb-6'
         }}

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

@@ -8,10 +8,10 @@ const NotFound = () => {
   const { t } = useLocalization();
 
   return (
-    <div className="py-6 flex flex-col items-center justify-center">
+    <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>
       <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-center">{t('not_found.sub_title')}</p>
       <Link href={'/'}>
         <Button className="h-auto mt-4 text-base py-3 px-6">
           {t('not_found.button')}

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

@@ -11,7 +11,7 @@ import {
 } 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 { useFetchCheckoutQuery, useResetCheckoutStateQuery } 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';
@@ -25,6 +25,8 @@ const Checkout = () => {
     (state: RootState) => state.checkout
   );
 
+  const { data: indexData, isLoading: isResetStateLoading } = useResetCheckoutStateQuery(null);
+
   const {
     data: checkoutData,
     isFetching,
@@ -32,7 +34,8 @@ const Checkout = () => {
     isSuccess,
     refetch: refetchCheckout
   } = useFetchCheckoutQuery(null, {
-    refetchOnMountOrArgChange: true
+    refetchOnMountOrArgChange: true,
+    skip: isResetStateLoading || !indexData
   });
   const initialStepChanged = useRef<boolean>(false);
   const router = useRouter();
@@ -94,10 +97,10 @@ const Checkout = () => {
     );
   }
 
-  if (isFetching || isError) {
+  if (isResetStateLoading || isFetching || isError) {
     return (
       <div className="flex flex-col items-center justify-center h-80">
-        {isFetching ? (
+        {isResetStateLoading || isFetching ? (
           <LoaderSpinner />
         ) : (
           <>

package/app-template/src/app/[commerce]/[locale]/[currency]/xml-sitemap/[node]/route.ts

@@ -1,5 +1,18 @@
 import { urlLocaleMatcherRegex } from '@akinon/next/utils';
 
+/**
+ * XML Sitemap Route
+ *
+ * This route serves XML sitemaps from an S3 bucket.
+ *
+ * Required environment variables:
+ * - SITEMAP_S3_BUCKET_NAME: The name of the S3 bucket containing the sitemaps
+ *   Example: "0fb534"
+ *
+ * If the environment variable is not set, the route will return a 503 Service Unavailable
+ * response with a JSON error message.
+ */
+
 export const dynamic = 'force-dynamic';
 
 export async function GET(request: Request, context: { params }) {
@@ -7,9 +20,42 @@ export async function GET(request: Request, context: { params }) {
   const url = new URL(request.url);
   const matchedLocale = url.pathname.match(urlLocaleMatcherRegex);
 
+  const s3BucketName = process.env.SITEMAP_S3_BUCKET_NAME;
+
+  if (!s3BucketName) {
+    return new Response(
+      JSON.stringify({
+        error: 'Configuration error',
+        message: 'Please set the SITEMAP_S3_BUCKET_NAME environment variable'
+      }),
+      {
+        status: 503,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+
   const sitemap = await fetch(
-    `https://s3.eu-central-1.amazonaws.com/0fb534/sitemaps/sitemaps/sitemap-${node}.xml.gz`
+    `https://s3.eu-central-1.amazonaws.com/${s3BucketName}/sitemaps/sitemaps/sitemap-${node}.xml.gz`
   );
+
+  if (!sitemap.ok) {
+    return new Response(
+      JSON.stringify({
+        error: 'Sitemap not found',
+        message: `Failed to fetch sitemap for node: ${node}`
+      }),
+      {
+        status: 503,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+
   let sitemapContent = await sitemap.text();
 
   sitemapContent = sitemapContent.replace(

package/app-template/src/assets/globals.scss

@@ -2,48 +2,176 @@
 @use './fonts/index.scss' as fonts;
 @use './fonts/pz-icon.css' as icons;
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .header-grid-template-areas {
-    grid-template-areas:
-      'band-l band-m band-r'
-      'main-l main-m main-r'
-      'nav nav nav';
-  }
+@import 'tailwindcss';
 
-  .header-grid-area-band-l {
-    grid-area: band-l;
-  }
+@plugin '@tailwindcss/typography';
 
-  .header-grid-area-band-m {
-    grid-area: band-m;
-  }
+@config '../../tailwind.config.js';
 
-  .header-grid-area-band-r {
-    grid-area: band-r;
-  }
+@source '../app/**/*.{js,ts,jsx,tsx}';
+@source '../pages/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../views/**/*.{js,ts,jsx,tsx}';
+@source '../widgets/**/*.{js,ts,jsx,tsx}';
+@source '../hooks/**/*.{js,ts,jsx,tsx}';
+@source '../utils/**/*.{js,ts,jsx,tsx}';
 
-  .header-grid-area-main-l {
-    grid-area: main-l;
-  }
+@theme {
+  --font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-size-2xs: 0.5rem;
+  --outline-off: none;
 
-  .header-grid-area-main-m {
-    grid-area: main-m;
-  }
+  --width-1-10: 10%;
+  --width-2-10: 20%;
+  --width-3-10: 30%;
+  --width-4-10: 40%;
+  --width-5-10: 50%;
+  --width-6-10: 60%;
+  --width-7-10: 70%;
+  --width-8-10: 80%;
+  --width-9-10: 90%;
 
-  .header-grid-area-main-r {
-    grid-area: main-r;
-  }
+  --transition-property-max-width: max-width;
+
+  --background-image-skeleton-shimmer: linear-gradient(
+    90deg,
+    #d7d7d7 0%,
+    #ebebeb 40%,
+    #eeeeee 60%,
+    #d7d7d7
+  );
 
-  .header-grid-area-nav {
-    grid-area: nav;
+  --animate-skeleton-shimmer: skeleton-shimmer 2s linear infinite;
+
+  @keyframes skeleton-shimmer {
+    to {
+      transform: translateX(100%);
+    }
   }
 
-  .header-m-template-cols {
-    grid-template-columns: auto 1fr 1fr;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-primary: #000000;
+  --color-primary-hover: #181818;
+  --color-primary-foreground: #ffffff;
+  --color-primary-100: #525252;
+  --color-primary-200: #404040;
+  --color-primary-300: #3d3d3d;
+  --color-primary-400: #333333;
+  --color-primary-500: #2d2d2d;
+  --color-primary-600: #292929;
+  --color-primary-700: #2b2b2b;
+  --color-primary-800: #181818;
+  --color-primary-900: #000000;
+
+  --color-secondary: #e95151;
+  --color-secondary-hover: #d03838;
+  --color-secondary-foreground: #ffffff;
+  --color-secondary-100: #ffb7b7;
+  --color-secondary-200: #ff9e9e;
+  --color-secondary-300: #ff8484;
+  --color-secondary-400: #ff6b6b;
+  --color-secondary-500: #e95151;
+  --color-secondary-600: #d72b01;
+  --color-secondary-700: #b61e1e;
+  --color-secondary-800: #9d0505;
+  --color-secondary-900: #830000;
+
+  --color-black: #000000;
+  --color-black-100: #525252;
+  --color-black-200: #404040;
+  --color-black-300: #3d3d3d;
+  --color-black-400: #333333;
+  --color-black-500: #2d2d2d;
+  --color-black-600: #292929;
+  --color-black-700: #2b2b2b;
+  --color-black-800: #181818;
+  --color-black-900: #000000;
+
+  --color-gray: #ebebeb;
+  --color-gray-25: #fdfdfd;
+  --color-gray-50: #f7f7f7;
+  --color-gray-100: #f5f5f5;
+  --color-gray-150: #f4f4f4;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #ebebeb;
+  --color-gray-400: #d7d7d7;
+  --color-gray-450: #d4d4d4;
+  --color-gray-500: #c9c9c9;
+  --color-gray-600: #9d9d9d;
+  --color-gray-700: #686868;
+  --color-gray-800: #615f62;
+  --color-gray-850: #58585a;
+  --color-gray-900: #4a4f54;
+  --color-gray-950: #424242;
+
+  --color-error: #d72b01;
+  --color-error-100: #e20008;
+
+  --color-success: #7b9d76;
+  --color-success-100: #7b9d76;
+
+  --container-center: true;
+  --container-padding: 0rem;
+  --container-padding-sm: 2rem;
+  --container-padding-2xl: 0rem;
+
+  --breakpoint-xs: 575px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1170px;
+  --breakpoint-2xl: 1370px;
+}
+
+@utility header-grid-template-areas {
+  grid-template-areas:
+    'band-l band-m band-r'
+    'main-l main-m main-r'
+    'nav nav nav';
+}
+
+@utility header-grid-area-band-l {
+  grid-area: band-l;
+}
+
+@utility header-grid-area-band-m {
+  grid-area: band-m;
+}
+
+@utility header-grid-area-band-r {
+  grid-area: band-r;
+}
+
+@utility header-grid-area-main-l {
+  grid-area: main-l;
+}
+
+@utility header-grid-area-main-m {
+  grid-area: main-m;
+}
+
+@utility header-grid-area-main-r {
+  grid-area: main-r;
+}
+
+@utility header-grid-area-nav {
+  grid-area: nav;
+}
+
+@utility header-m-template-cols {
+  grid-template-columns: auto 1fr 1fr;
+}
+
+@utility container {
+  margin-inline: auto;
+}
+
+@layer base {
+  input::placeholder,
+  textarea::placeholder {
+    color: theme(--color-gray-400);
   }
 
   input {
@@ -51,7 +179,7 @@
     &:not(:placeholder-shown),
     &:autofill {
       & + label {
-        @apply top-1/3;
+        top: calc(1 / 3 * 100%);
       }
     }
   }