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

package/app-template/public/shop-pay.svg

@@ -0,0 +1,12 @@
+<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#2mu4dnqfla)">
+        <path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000"/>
+        <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#5A31F4"/>
+        <path d="M21.382 9.713c0 1.668-1.177 2.858-2.82 2.858h-1.55a.132.132 0 0 0-.13.13v2.191a.13.13 0 0 1-.08.12.13.13 0 0 1-.05.01h-1.084a.13.13 0 0 1-.13-.13V6.985a.127.127 0 0 1 .08-.12.129.129 0 0 1 .05-.01h2.9c1.637 0 2.814 1.19 2.814 2.858zm-1.352 0c0-.958-.658-1.658-1.55-1.658h-1.468a.13.13 0 0 0-.12.08.13.13 0 0 0-.01.05v3.05a.127.127 0 0 0 .038.092.13.13 0 0 0 .092.038h1.468c.892.005 1.55-.695 1.55-1.652zm1.674 3.791a1.528 1.528 0 0 1 .647-1.317c.423-.316 1.084-.48 2.055-.514l1.033-.036v-.303c0-.607-.41-.863-1.068-.863-.658 0-1.075.231-1.17.61a.127.127 0 0 1-.125.09h-1.022a.13.13 0 0 1-.126-.092.125.125 0 0 1-.004-.055c.152-.898.904-1.58 2.494-1.58 1.692 0 2.303.783 2.303 2.276v3.172a.13.13 0 0 1-.132.13h-1.03a.13.13 0 0 1-.13-.13v-.237a.096.096 0 0 0-.118-.096.1.1 0 0 0-.05.027c-.31.334-.808.575-1.607.575-1.175 0-1.95-.607-1.95-1.657zm3.735-.687v-.246l-1.339.07c-.705.036-1.115.326-1.115.816 0 .444.376.69 1.034.69.893 0 1.42-.48 1.42-1.33zm2.316 4.6v-.919a.13.13 0 0 1 .1-.125.13.13 0 0 1 .057-.002c.158.03.318.044.48.044a1.23 1.23 0 0 0 1.244-.876l.067-.21a.133.133 0 0 0 0-.089L27.558 9.77a.13.13 0 0 1 .122-.18h1.04a.132.132 0 0 1 .123.085l1.456 3.86a.131.131 0 0 0 .125.087.133.133 0 0 0 .125-.088l1.265-3.848a.13.13 0 0 1 .126-.09h1.076a.134.134 0 0 1 .132.116.134.134 0 0 1-.008.063l-2.295 6.076c-.528 1.413-1.433 1.773-2.43 1.773a1.963 1.963 0 0 1-.56-.066.132.132 0 0 1-.1-.14zM8.57 6.4a5.363 5.363 0 0 0-3.683 1.427.231.231 0 0 0-.029.31l.618.84a.236.236 0 0 0 .362.027 3.823 3.823 0 0 1 2.738-1.11c2.12 0 3.227 1.584 3.227 3.15 0 1.7-1.163 2.898-2.835 2.921-1.292 0-2.266-.85-2.266-1.974a1.908 1.908 0 0 1 .713-1.48.231.231 0 0 0 .033-.324l-.65-.815a.236.236 0 0 0-.339-.034 3.43 3.43 0 0 0-.942 1.183 3.39 3.39 0 0 0-.337 1.47c0 1.935 1.655 3.452 3.775 3.464h.03c2.517-.032 4.337-1.884 4.337-4.415 0-2.247-1.667-4.64-4.752-4.64z" fill="#fff"/>
+    </g>
+    <defs>
+        <clipPath id="2mu4dnqfla">
+            <path fill="#fff" d="M0 0h38v24H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/app-template/public/visa.svg

@@ -0,0 +1,12 @@
+<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#ezvyrlvp0a)">
+        <path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000"/>
+        <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#fff"/>
+        <path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2l-1.7.1zM5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/>
+    </g>
+    <defs>
+        <clipPath id="ezvyrlvp0a">
+            <path fill="#fff" d="M0 0h38v24H0z"/>
+        </clipPath>
+    </defs>
+</svg>

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]/blog/[slug]/page.tsx

@@ -0,0 +1,118 @@
+'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 { PageProps, WidgetResultType } from '@akinon/next/types';
+import { Icon, Link, LoaderSpinner } from '@theme/components';
+import { formatDateToMonthYear } from '@theme/utils/formatDate';
+
+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({ params }: PageProps<{ 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/[commerce]/[locale]/[currency]/pages/[slug]/page.tsx

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

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

@@ -78,41 +78,41 @@ export async function generateMetadata(props: PageProps) {
   }
 
   const commonProps = {
-    params: {
+    params: Promise.resolve({
       ...params,
       pk: prettyUrlResult.pk
-    },
+    }),
     searchParams: Promise.resolve(searchParams)
   };
 
   try {
     if (prettyUrlResult.path.startsWith('/product/')) {
       await import('@product/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/group-product/')) {
       await import('@group-product/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/category/')) {
       await import('@category/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/special-page/')) {
       await import('@special-page/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/flat-page/')) {
       await import('@flat-page/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
     // eslint-disable-next-line no-empty
@@ -161,8 +161,8 @@ export default async function Page(props) {
       ...params,
       pk: result.pk
     },
-    searchParams: Promise.resolve(urlSearchParams)
-  };
+    searchParams: urlSearchParams
+  } as any;
 
   if (result.path.startsWith('/category/')) {
     const CategoryPage = (await import('@category/[pk]/page')).default;

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

@@ -1,6 +1,6 @@
 import AccountBackButton from '@theme/views/account/back-button';
 import AccountMenu from '@theme/views/account/account-menu';
-import { getServerSession } from 'next-auth/next';
+import { auth } from 'auth';
 import { ROUTES } from 'routes';
 import { redirect } from '@akinon/next/utils/redirect';
 
@@ -9,7 +9,7 @@ export default async function AccountLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const session = await getServerSession();
+  const session = await auth();
 
   if (!session?.user) {
     return redirect(ROUTES.AUTH);

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

@@ -15,9 +15,11 @@ import {
   Select,
   Modal,
   LoaderSpinner,
-  Link
+  Link,
+  FileInput
 } from '@theme/components';
-import { useState, use } from 'react';
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
 import { OrderCancellationItem } from '@theme/views/account/orders/order-cancellation-item';
 import { useLocalization } from '@akinon/next/hooks';
@@ -26,9 +28,8 @@ const accountOrderCancellationSchema = yup.object().shape({
   return_policy: yup.boolean().oneOf([true], 'This field is required.')
 });
 
-const AccountOrderCancellation = ({ params }) => {
-  const pageParams = use(params) as { id: string };
-
+const AccountOrderCancellation = () => {
+  const params = useParams<{ id: string }>();
   const { t } = useLocalization();
   const {
     register,
@@ -41,6 +42,7 @@ const AccountOrderCancellation = ({ params }) => {
   } = useForm<AccountOrderCancellation>({
     resolver: yupResolver(accountOrderCancellationSchema)
   });
+
   const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
     useGetCancellationReasonsQuery();
 
@@ -48,7 +50,7 @@ const AccountOrderCancellation = ({ params }) => {
     data: order,
     isLoading,
     isSuccess: orderSuccess
-  } = useGetOrderQuery(pageParams.id);
+  } = useGetOrderQuery(params.id);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [responseMessage, setResponseMessage] = useState({
@@ -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
+                        )}
                       />
                     );
                   }}
@@ -208,7 +300,7 @@ const AccountOrderCancellation = ({ params }) => {
                     </label>
                     {errors.return_policy && (
                       <div className="text-sm text-error">
-                        {errors.return_policy.message}
+                        {String(errors.return_policy.message)}
                       </div>
                     )}
                   </div>