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

package/app-template/public/locales/tr/account.json

@@ -254,6 +254,10 @@
       "cancelled": "İptal edildi",
       "cancellation_request_recieved": "İptal talebi alındı",
       "close_button": "Kapat",
+      "return_status": "İade Durumu",
+      "rejected": "İade reddedildi",
+      "completed": "İade tamamlandı",
+      "explanation": "Açıklama",
       "success": {
         "title": "Başarılı",
         "description": "Talebiniz alınmış olup en kısa sürede değerlendirilecektir."

package/app-template/public/locales/tr/common.json

@@ -38,6 +38,12 @@
     "description": "Lütfen daha sonra tekrar deneyiniz.",
     "link_text": "Ana sayfaya dön"
   },
+  "client_error": {
+    "title": "Sayfada bir sorunla karşılaştık.",
+    "description": "Bu bir tarayıcı hatası gibi görünüyor. Lütfen sayfayı yenileyin veya tarayıcı önbelleğinizi temizleyin.",
+    "link_text": "Ana sayfaya dön"
+  },
+  "try_again": "Tekrar Dene",
   "breadcrumb": {
     "homepage": "Anasayfa"
   },
@@ -61,5 +67,9 @@
     "description": "Döviz kuru değiştiği için sepetinizdeki ürünler silinecektir.",
     "close": "Kapat",
     "continue": "Devam Et"
+  },
+  "file_input": {
+    "select_file": "Dosya Seç",
+    "no_file": "Dosya seçilmedi"
   }
 }

package/app-template/src/__tests__/middleware-matcher.test.ts

@@ -0,0 +1,135 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('Middleware matcher regex tests', () => {
+  const middlewareFilePath = path.resolve(__dirname, '../middleware.ts');
+  const middlewareContent = fs.readFileSync(middlewareFilePath, 'utf8');
+
+  let actualMatcherStrings: string[] = [];
+  let matcherPatterns: RegExp[] = [];
+
+  const matcherBlockRegex = middlewareContent.match(/matcher:\s*\[([\s\S]*?)\](?=\s*[,}])/);
+
+  if (matcherBlockRegex && matcherBlockRegex[1]) {
+    const matcherContentInsideBrackets = matcherBlockRegex[1];
+
+    actualMatcherStrings = matcherContentInsideBrackets
+      .split(',')
+      .map(line => {
+        const uncommentedLine = line.replace(/\/\/.*$/, '').trim();
+        const quoteMatch = uncommentedLine.match(/^(['"])(.*)\1$/);
+        return quoteMatch ? quoteMatch[2] : null;
+      })
+      .filter((pattern): pattern is string => pattern !== null && pattern !== '');
+
+    matcherPatterns = matcherContentInsideBrackets
+      .split(',')
+      .map((pattern) => pattern.trim())
+      .filter(Boolean)
+      .map((pattern) => {
+        let cleanPattern = pattern
+          .replace(/^['"]|['"]$/g, '');
+
+        try {
+          if (cleanPattern.includes('(?!') && cleanPattern.includes('api') && cleanPattern.includes('_next')) {
+            cleanPattern = '^(?!/(?:api|_next)/)(?!.*\\.\\w+$).*$';
+          }
+
+          return new RegExp(cleanPattern);
+        } catch (error) {
+          console.error(`Invalid simplified regex: ${cleanPattern}`, error);
+          return null;
+        }
+      })
+      .filter(Boolean) as RegExp[];
+  }
+
+  const testPath = (path: string): boolean => {
+    return matcherPatterns.some((pattern) => {
+      try {
+        const result = pattern.test(path);
+        return result;
+      } catch (error) {
+        console.error(
+          `Error testing path: ${path} | Pattern: ${pattern.toString()}`,
+          error
+        );
+        return false;
+      }
+    });
+  };
+
+  it('should NOT match api routes', () => {
+    const apiPaths = ['/api/products', '/api/auth/login', '/api/v1/users'];
+    apiPaths.forEach((path) => {
+      expect(testPath(path)).toBe(false);
+    });
+  });
+
+  it('should NOT match _next routes', () => {
+    const nextPaths = [
+      '/_next/static/chunks/main.js',
+      '/_next/image',
+      '/_next/data/build-id/products.json'
+    ];
+    nextPaths.forEach((path) => {
+      expect(testPath(path)).toBe(false);
+    });
+  });
+
+  it('should NOT match static files with extensions', () => {
+    const staticFiles = [
+      '/images/logo.png',
+      '/styles/main.css',
+      '/fonts/roboto.woff2',
+      '/favicon.ico',
+      '/manifest.json'
+    ];
+    staticFiles.forEach((path) => {
+      expect(testPath(path)).toBe(false);
+    });
+  });
+
+  it('should match dynamic routes and specific patterns', () => {
+    const validPaths = [
+      '/profile/settings',
+      '/dashboard/stats',
+      '/products/123'
+    ];
+    validPaths.forEach((path) => {
+      expect(testPath(path)).toBe(true);
+    });
+  });
+
+  it('should match checkout-with-token routes', () => {
+    const expectedRegexString = '\'/(.*orders\\\\/checkout-with-token.*)\'';
+    expect(middlewareContent.includes(expectedRegexString)).toBe(true);
+
+    const checkoutPaths = [
+      '/orders/checkout-with-token/123',
+      '/orders/checkout-with-token/abc-xyz',
+      '/orders/checkout-with-token'
+    ];
+    checkoutPaths.forEach((path) => {
+      expect(testPath(path)).toBe(true);
+    });
+  });
+
+  it('should contain the exact specific extensions regex string in the file content', () => {
+    const expectedRegexString = '\'/(.+\\\\.)(html|htm|aspx|asp|php)\'';
+    expect(middlewareContent.includes(expectedRegexString)).toBe(true);
+  });
+
+  it('should include the sitemap pattern specifically within the matcher array', () => {
+    const sitemapPattern = '/(.*sitemap\\\\.xml)';
+    expect(actualMatcherStrings).toContain(sitemapPattern);
+  });
+
+  it('should verify that api pattern is excluded in the matcher configuration', () => {
+    expect(/api/.test(middlewareContent)).toBe(true);
+  });
+
+  it('should verify that _next pattern is excluded in the matcher configuration', () => {
+    expect(/_next/.test(middlewareContent)).toBe(true);
+  });
+});

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);
       });
@@ -149,13 +237,13 @@ const AccountOrderCancellation = ({ params }) => {
           <div>
             <div className="pb-2 mb-3 text-lg border-gray border-b">
               <span data-testid="account-orders-return-order-count">
-                {order.orderitem_set.length}
+                {order?.orderitem_set?.length}
               </span>{' '}
               <span>{t('account.my_orders.detail.products')}</span>
             </div>
 
             <form onSubmit={handleSubmit(onSubmit)}>
-              {order.orderitem_set.map((item, index: number) => (
+              {order?.orderitem_set?.map((item, index: number) => (
                 <Controller
                   defaultValue={[]}
                   control={control}
@@ -166,7 +254,7 @@ const AccountOrderCancellation = ({ params }) => {
                       return cancelItem.order_item === item.id;
                     });
 
-                    const cancellationType = item.is_refundable
+                    const cancellationType = item?.is_refundable
                       ? 'refund'
                       : 'cancel';
 
@@ -182,6 +270,10 @@ 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

@@ -33,14 +33,15 @@ const AccountOrderDetail = ({ params }) => {
   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);
 
@@ -77,8 +78,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 +89,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 +123,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 +136,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
                   );
 
@@ -144,18 +146,18 @@ 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}
+                            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 +166,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 +209,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 +228,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 +251,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 +327,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 +362,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]/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 && (