@akinon/projectzero 2.0.0-beta.6 → 2.0.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @akinon/projectzero
 
+## 2.0.0-beta.8
+
+## 2.0.0-beta.7
+
 ## 2.0.0-beta.6
 
 ### Minor Changes

package/app-template/.env.example

@@ -1,9 +1,11 @@
 NEXTAUTH_SECRET=PDpBb/aSJESgBbPLHw1+jveHXqyvkC7GC1Z82jvE04s=
+# When using dev-ssl command, NEXTAUTH_URL should be updated to https://localhost:3000
 NEXTAUTH_URL=http://localhost:3000
 NEXT_PUBLIC_MAP_API_KEY=YOUR_MAP_API_KEY
 NEXT_PUBLIC_GTM_KEY=GTM_KEY
 NEXT_PUBLIC_URL=http://localhost:3000
 SERVICE_BACKEND_URL=https://02fde10fee4440269e695aa10707dfaf.lb.akinoncloud.com
+SITEMAP_S3_BUCKET_NAME=0fb534
 
 # LOG_LEVEL_DEV=debug # For more details, please refer to the Logging documentation.
 

package/app-template/.gitignore

@@ -65,3 +65,5 @@ next.config.wizardcopy.js
 
 certificates
 public/locales/*/index.json
+
+certificates

package/app-template/CHANGELOG.md

@@ -1,5 +1,56 @@
 # projectzeronext
 
+## 2.0.0-beta.8
+
+### Minor Changes
+
+- 071d0f5: ZERO-3352: Resolve Single item size exceeds maxSize error and upgrade dependencies
+
+### Patch Changes
+
+- Updated dependencies [071d0f5]
+  - @akinon/next@2.0.0-beta.8
+  - @akinon/pz-akifast@2.0.0-beta.8
+  - @akinon/pz-b2b@2.0.0-beta.8
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.8
+  - @akinon/pz-bkm@2.0.0-beta.8
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.8
+  - @akinon/pz-click-collect@2.0.0-beta.8
+  - @akinon/pz-credit-payment@2.0.0-beta.8
+  - @akinon/pz-gpay@2.0.0-beta.8
+  - @akinon/pz-masterpass@2.0.0-beta.8
+  - @akinon/pz-one-click-checkout@2.0.0-beta.8
+  - @akinon/pz-otp@2.0.0-beta.8
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.8
+  - @akinon/pz-saved-card@2.0.0-beta.8
+  - @akinon/pz-tabby-extension@2.0.0-beta.8
+  - @akinon/pz-tamara-extension@2.0.0-beta.8
+
+## 2.0.0-beta.7
+
+### Minor Changes
+
+- 1bbba84: ZERO-3291: Update next.js and related dependencies to version 15.2.3
+
+### Patch Changes
+
+- @akinon/next@2.0.0-beta.7
+- @akinon/pz-akifast@2.0.0-beta.7
+- @akinon/pz-b2b@2.0.0-beta.7
+- @akinon/pz-basket-gift-pack@2.0.0-beta.7
+- @akinon/pz-bkm@2.0.0-beta.7
+- @akinon/pz-checkout-gift-pack@2.0.0-beta.7
+- @akinon/pz-click-collect@2.0.0-beta.7
+- @akinon/pz-credit-payment@2.0.0-beta.7
+- @akinon/pz-gpay@2.0.0-beta.7
+- @akinon/pz-masterpass@2.0.0-beta.7
+- @akinon/pz-one-click-checkout@2.0.0-beta.7
+- @akinon/pz-otp@2.0.0-beta.7
+- @akinon/pz-pay-on-delivery@2.0.0-beta.7
+- @akinon/pz-saved-card@2.0.0-beta.7
+- @akinon/pz-tabby-extension@2.0.0-beta.7
+- @akinon/pz-tamara-extension@2.0.0-beta.7
+
 ## 2.0.0-beta.6
 
 ### Minor Changes

package/app-template/README.md

@@ -6,6 +6,12 @@ Headless Akinon Commerce Cloud Storefront.
 
 Run `cp .env.example .env && yarn` command at project root and all dependencies should be installed.
 
+## Environment Variables
+
+### Required Environment Variables
+
+- `SITEMAP_S3_BUCKET_NAME`: S3 bucket name for XML sitemaps (e.g., "0fb534"). This is required for the sitemap route to function correctly.
+
 ### Build
 
 To build the app, run the following command:

package/app-template/config/prebuild-tests.json

@@ -0,0 +1,5 @@
+{
+  "tests": [
+    "test:middleware"
+  ]
+}

package/app-template/next.config.ts

@@ -26,7 +26,10 @@ const withPwaConfig = withPWA({
 
 const sentryConfig = {
   silent: true,
-  dryRun: !process.env.SENTRY_DSN
+  dryRun: !process.env.SENTRY_DSN,
+  org: 'akinon'
+  // project: 'enter_your_project_name_here',
+  // authToken: 'enter_your_auth_token_here'
 };
 
 const enhancedConfig = withPzConfig(nextConfig);

package/app-template/package.json

@@ -1,11 +1,12 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "private": true,
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf node_modules && rm -rf .next",
     "dev": "next dev",
+    "dev-ssl": "next dev --experimental-https",
     "build": "next build",
     "start": "next start -p 8008",
     "type-check": "tsc",
@@ -19,32 +20,33 @@
     "prebuild": "pz-prebuild",
     "postbuild": "pz-postbuild",
     "poststart": "pz-poststart",
-    "prestart": "pz-prestart"
+    "prestart": "pz-prestart",
+    "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.6",
-    "@akinon/pz-akifast": "2.0.0-beta.6",
-    "@akinon/pz-b2b": "2.0.0-beta.6",
-    "@akinon/pz-basket-gift-pack": "2.0.0-beta.6",
-    "@akinon/pz-bkm": "2.0.0-beta.6",
-    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.6",
-    "@akinon/pz-click-collect": "2.0.0-beta.6",
-    "@akinon/pz-credit-payment": "2.0.0-beta.6",
-    "@akinon/pz-gpay": "2.0.0-beta.6",
-    "@akinon/pz-masterpass": "2.0.0-beta.6",
-    "@akinon/pz-one-click-checkout": "2.0.0-beta.6",
-    "@akinon/pz-otp": "2.0.0-beta.6",
-    "@akinon/pz-pay-on-delivery": "2.0.0-beta.6",
-    "@akinon/pz-saved-card": "2.0.0-beta.6",
-    "@akinon/pz-tabby-extension": "2.0.0-beta.6",
+    "@akinon/next": "2.0.0-beta.8",
+    "@akinon/pz-akifast": "2.0.0-beta.8",
+    "@akinon/pz-b2b": "2.0.0-beta.8",
+    "@akinon/pz-basket-gift-pack": "2.0.0-beta.8",
+    "@akinon/pz-bkm": "2.0.0-beta.8",
+    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.8",
+    "@akinon/pz-click-collect": "2.0.0-beta.8",
+    "@akinon/pz-credit-payment": "2.0.0-beta.8",
+    "@akinon/pz-gpay": "2.0.0-beta.8",
+    "@akinon/pz-masterpass": "2.0.0-beta.8",
+    "@akinon/pz-one-click-checkout": "2.0.0-beta.8",
+    "@akinon/pz-otp": "2.0.0-beta.8",
+    "@akinon/pz-pay-on-delivery": "2.0.0-beta.8",
+    "@akinon/pz-saved-card": "2.0.0-beta.8",
+    "@akinon/pz-tabby-extension": "2.0.0-beta.8",
+    "@akinon/pz-tamara-extension": "2.0.0-beta.8",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "7.116.0",
     "@tailwindcss/postcss": "4.0.0",
     "dayjs": "1.11.5",
     "lossless-json": "2.0.5",
-    "next": "15.1.3",
+    "next": "15.3.1",
     "next-auth": "4.24.11",
     "next-pwa": "5.6.0",
     "pino": "8.11.0",
@@ -58,11 +60,10 @@
     "react-string-replace": "1.1.0",
     "start-server-and-test": "2.0.3",
     "tailwind-merge": "1.8.0",
-    "tailwindcss": "4.0.0",
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.6",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.8",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -87,6 +88,7 @@
     "husky": "8.0.0",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.3.0",
+    "jest-environment-jsdom": "29.7.0",
     "lint-staged": "13.1.0",
     "prettier": "3.4.2",
     "react-number-format": "5.4.2",
@@ -98,7 +100,7 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "4.0.0",
+    "tailwindcss": "4.1.3",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.7.2"

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

@@ -254,6 +254,10 @@
       "cancelled": "Cancelled",
       "cancellation_request_recieved": "Cancellation Request Recieved",
       "close_button": "Close",
+      "return_status": "Return Status",
+      "rejected": "Return Rejected",
+      "completed": "Return Completed",
+      "explanation": "Explanation",
       "success": {
         "title": "Success",
         "description": "Your request have been recieved and will be evaluated as soon as possible."

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

@@ -38,6 +38,12 @@
     "description": "Please try again later.",
     "link_text": "Return to home page"
   },
+  "client_error": {
+    "title": "We encountered a problem with the page.",
+    "description": "This appears to be a client-side issue. Please try refreshing the page or clearing your browser cache.",
+    "link_text": "Return to home page"
+  },
+  "try_again": "Try Again",
   "breadcrumb": {
     "homepage": "Homepage"
   },

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"
   },

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

@@ -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]/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]/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/components/select.tsx

@@ -48,7 +48,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
           className
         )}
       >
-        {options.map((option) => (
+        {options?.map((option) => (
           <option
             key={option.value}
             value={option.value}

package/app-template/src/components/tabs.tsx

@@ -39,7 +39,7 @@ export const Tabs = (props: Props) => {
             tabBarPosition === 'left' || tabBarPosition === 'right'
         })}
       >
-        {children.map((item, index) => (
+        {children?.map((item, index) => (
           <Tab
             key={item.props.title}
             title={item.props.title}
@@ -52,7 +52,7 @@ export const Tabs = (props: Props) => {
         ))}
       </ul>
 
-      <div className="w-full">{children[selectedTabIndex]}</div>
+      <div className="w-full">{children?.[selectedTabIndex]}</div>
     </div>
   );
 };

package/app-template/src/redux/middlewares/category.ts

@@ -4,7 +4,7 @@ import { setSelectedFacets } from '@theme/redux/reducers/category';
 
 const getSelectedFacets = (facets: Array<Facet>) => {
   return facets
-    .map((facet) => {
+    ?.map((facet) => {
       return {
         ...facet,
         data: {

package/app-template/src/redux/reducers/category.ts

@@ -32,7 +32,7 @@ const categorySlice = createSlice({
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
-      state.selectedFacets = facets.map((facet) => {
+      state.selectedFacets = facets?.map((facet) => {
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {

package/app-template/src/utils/convert-facet-search-params.ts

@@ -1,7 +1,7 @@
 import { Facet } from '@akinon/next/types';
 
 const convertFacetSearchParams = (facets: Facet[]) => {
-  const _facets: string[][] = facets.flatMap((facet) => {
+  const _facets: string[][] = facets?.flatMap((facet) => {
     return [
       ...facet.data.choices.map((choice) => {
         return [facet.search_key, choice.value as string];

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -94,25 +94,6 @@ export const OrderCancellationItem = ({
           {selectOption}
         </div>
         <div>{fileInput}</div>
-        {item.active_cancellation_request?.cancellation_request_image_set && (
-          <div className="flex flex-wrap gap-2">
-            {item.active_cancellation_request?.cancellation_request_image_set?.map(
-              (item) => {
-                return (
-                  <div className="relative w-16 h-16" key={item.id}>
-                    <Image
-                      src={item.image}
-                      alt={item.description}
-                      aspectRatio={1}
-                      sizes="64px"
-                      fill
-                    />
-                  </div>
-                );
-              }
-            )}
-          </div>
-        )}
       </div>
     </div>
   );

package/app-template/src/views/basket/basket-item.tsx

@@ -87,6 +87,7 @@ export const BasketItem = (props: Props) => {
       <li
         key={basketItem.id}
         className="flex border-b border-gray-200 py-3 relative"
+        data-testid="basket-item"
       >
         <div className="w-20 lg:w-[105px] mr-4 shrink-0">
           <Link href={basketItem.product.absolute_url} passHref>

package/app-template/src/views/category/category-active-filters.tsx

@@ -69,7 +69,7 @@ const CategoryActiveFilters = () => {
 
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
-      {facets.map((facet) =>
+      {facets?.map((facet) =>
         facet?.data?.choices
           ?.filter((choice) => choice.is_selected)
           ?.map(

package/app-template/src/views/category/category-header.tsx

@@ -121,7 +121,7 @@ export const CategoryHeader = (props: Props) => {
         </Button>
         <Select
           options={sortOptions}
-          value={sortOptions.find(({ is_selected }) => is_selected).value}
+          value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
           data-testid="list-sorter"
           onChange={(e) => {
             handleSelectFilter({

package/app-template/src/views/category/category-info.tsx

@@ -102,7 +102,7 @@ export default function ListPage(props: ListPageProps) {
               </div>
             )}
 
-            {data.products.length === 0 && page > 1 && <LoaderSpinner />}
+            {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
@@ -111,7 +111,7 @@ export default function ListPage(props: ListPageProps) {
                 'lg:grid-cols-3': layoutSize === 3
               })}
             >
-              {data.products.map((product, index) => (
+              {data?.products?.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
@@ -121,7 +121,7 @@ export default function ListPage(props: ListPageProps) {
                 />
               ))}
             </div>
-            {data.products.length > 0 && (
+            {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}
                 limit={data.pagination.page_size}

package/app-template/src/views/category/filters/index.tsx

@@ -23,7 +23,7 @@ export const Filters = (props: Props) => {
   const [isPending, startTransition] = useTransition();
 
   const haveFilter = useMemo(() => {
-    return facets.some((facet) =>
+    return facets?.some((facet) =>
       facet?.data?.choices?.some((choice) => choice.is_selected)
     );
   }, [facets]);
@@ -50,7 +50,7 @@ export const Filters = (props: Props) => {
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
 
-      {facets.map((facet) => {
+      {facets?.map((facet) => {
         return (
           <FilterItem
             key={facet.key}

package/app-template/src/views/checkout/steps/payment/index.tsx

@@ -18,7 +18,7 @@ const PaymentStep = () => {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
     >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none">
+      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
         <PaymentOptionButtons />
       </div>
       <div className="w-full border border-solid border-gray-400 bg-white">

package/app-template/src/views/header/action-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode, useMemo, useRef, useCallback } from 'react';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
   closeMiniBasket,
@@ -29,8 +29,11 @@ interface MenuItem {
 export default function ActionMenu() {
   const dispatch = useAppDispatch();
 
-  const { data } = useGetBasketQuery();
-  const totalQuantity = useMemo(() => data?.total_quantity ?? 0, [data]);
+  const { data: miniBasket } = useGetMiniBasketQuery();
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
 
   const { open: miniBasketOpen } = useAppSelector(
     (state) => state.root.miniBasket

package/app-template/src/views/header/mini-basket.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import {
   basketApi,
   useGetBasketQuery,
+  useGetMiniBasketQuery,
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
@@ -150,13 +151,23 @@ export default function MiniBasket() {
     (state) => state.root.miniBasket
   );
   const dispatch = useAppDispatch();
-  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const {
+    data: basket,
+    isLoading,
+    isSuccess
+  } = useGetBasketQuery(undefined, {
+    skip: !miniBasketOpen
+  });
+  const { data: miniBasket } = useGetMiniBasketQuery();
   const { t } = useLocalization();
   const { highlightedItem } = useAppSelector((state) => state.root.miniBasket);
   const [highlightedItemPk, setHighlightedItemPk] = useState(0);
   const [sortedBasket, setSortedBasket] = useState([]);
 
-  const totalQuantity = useMemo(() => basket?.total_quantity ?? 0, [basket]);
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
   const miniBasketList = useRef(null);
 
   useEffect(() => {

package/app-template/src/views/installment-options/index.tsx

@@ -22,7 +22,7 @@ const InstallmentOptions = (props: InstallmentProps) => {
 
   useEffect(() => {
     if (isSuccess && data) {
-      setActiveCardSlug(data.results[0].slug);
+      setActiveCardSlug(data.results?.[0]?.slug);
     }
   }, [isSuccess, data]);
 

package/app-template/src/views/otp-login/index.tsx

@@ -10,9 +10,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
 import { useOtpLoginMutation } from '@akinon/next/data/client/user';
-import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { AuthError } from '@akinon/next/types';
+import { showPopup } from '@akinon/pz-otp/src/redux/reducer';
 
 const loginFormSchema = (t) =>
   yup.object().shape({
@@ -25,9 +26,9 @@ const loginFormSchema = (t) =>
   });
 
 export const OtpLogin = () => {
+  const dispatch = useAppDispatch();
   const { user_phone_format } = useAppSelector((state) => state.config);
   const { t, locale } = useLocalization();
-  const [showOtpModal, setShowOtpModal] = useState(false);
   const [otpLoginMutation] = useOtpLoginMutation();
 
   const {
@@ -79,7 +80,7 @@ export const OtpLogin = () => {
     })
       .unwrap()
       .then(() => {
-        setShowOtpModal(true);
+        dispatch(showPopup());
       })
       .catch((error) => {
         if (error.status === 429) {
@@ -136,17 +137,14 @@ export const OtpLogin = () => {
         </Button>
       </form>
 
-      {showOtpModal && (
-        <PluginModule
-          component={Component.Otp}
-          props={{
-            setShowPopup: setShowOtpModal,
-            data: getValues(),
-            submitAction: loginHandler,
-            error: formError
-          }}
-        />
-      )}
+      <PluginModule
+        component={Component.Otp}
+        props={{
+          data: getValues(),
+          submitAction: loginHandler,
+          error: formError
+        }}
+      />
     </section>
   );
 };

package/codemods/sentry-9/index.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const { execSync } = require('child_process');
+
+const codemodScripts = [
+  path.resolve(__dirname, 'remove-sentry-dependency.js'),
+  path.resolve(__dirname, 'remove-sentry-configs.js'),
+  path.resolve(__dirname, 'replace-error-page.js')
+];
+
+const transform = () => {
+  const workingDir = path.resolve(process.cwd());
+
+  codemodScripts.forEach((script) => {
+    try {
+      execSync(
+        `jscodeshift --ignore-pattern="**/node_modules/**" -t ${script} ${workingDir} --extensions=json,ts,tsx,js,jsx,properties,md`,
+        {
+          cwd: workingDir,
+          stdio: 'inherit'
+        }
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  });
+};
+
+module.exports = {
+  transform
+};

package/codemods/sentry-9/remove-sentry-configs.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+
+const transform = (fileInfo, api, options) => {
+  const filePath = fileInfo.path;
+  const regex = /sentry\.\w+\.config\.(ts|js)$|sentry\.properties$/i;
+
+  if (regex.test(filePath) && fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath);
+  }
+
+  return fileInfo.source;
+};
+
+module.exports = transform;

package/codemods/sentry-9/remove-sentry-dependency.js

@@ -0,0 +1,25 @@
+const transform = (fileInfo, api, options) => {
+  if (fileInfo.path.endsWith('package.json')) {
+    const packageJson = JSON.parse(fileInfo.source);
+
+    if (
+      packageJson.dependencies &&
+      packageJson.dependencies['@sentry/nextjs']
+    ) {
+      delete packageJson.dependencies['@sentry/nextjs'];
+    }
+
+    if (
+      packageJson.devDependencies &&
+      packageJson.devDependencies['@sentry/nextjs']
+    ) {
+      delete packageJson.devDependencies['@sentry/nextjs'];
+    }
+
+    return JSON.stringify(packageJson, null, 2);
+  }
+
+  return fileInfo.source;
+};
+
+module.exports = transform;

package/codemods/sentry-9/replace-error-page.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+
+const template = `
+'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} />;
+}
+
+`;
+
+const transform = (fileInfo, api, options) => {
+  const filePath = fileInfo.path;
+
+  if (filePath.endsWith('error.tsx')) {
+    fs.writeFileSync(filePath, template, { encoding: 'utf8' });
+  }
+};
+
+module.exports = transform;

package/commands/codemod.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const args = yargs(hideBin(process.argv)).argv;
+
+export default () => {
+  const workingDir = path.resolve(process.cwd());
+  const codemodName = args.codemod;
+  const codemodPath = path.resolve(
+    __dirname,
+    `../../codemods/${codemodName}/index.js`
+  );
+
+  const codemod = require(codemodPath);
+
+  codemod.transform();
+};

package/commands/index.ts

@@ -4,6 +4,7 @@ import addLanguage from './add-language';
 import removeLanguage from './remove-language';
 import defaultLanguage from './default-language';
 import plugins from './plugins';
+import codemod from './codemod';
 
 export default {
   commerceUrl,
@@ -11,5 +12,6 @@ export default {
   addLanguage,
   removeLanguage,
   defaultLanguage,
-  plugins
+  plugins,
+  codemod
 };

package/dist/codemods/sentry-9/templates/error.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const hooks_1 = require("@akinon/next/hooks");
+const error_page_1 = __importDefault(require("@akinon/next/views/error-page"));
+function ErrorPage({ error, reset }) {
+    // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
+    (0, hooks_1.useSentryUncaughtErrors)(error);
+    return React.createElement(error_page_1.default, { error: error, reset: reset });
+}
+exports.default = ErrorPage;

package/dist/commands/codemod.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const args = yargs(hideBin(process.argv)).argv;
+exports.default = () => {
+    const workingDir = path_1.default.resolve(process.cwd());
+    const codemodName = args.codemod;
+    const codemodPath = path_1.default.resolve(__dirname, `../../codemods/${codemodName}/index.js`);
+    const codemod = require(codemodPath);
+    codemod.transform();
+};

package/dist/commands/index.js

@@ -9,11 +9,13 @@ const add_language_1 = __importDefault(require("./add-language"));
 const remove_language_1 = __importDefault(require("./remove-language"));
 const default_language_1 = __importDefault(require("./default-language"));
 const plugins_1 = __importDefault(require("./plugins"));
+const codemod_1 = __importDefault(require("./codemod"));
 exports.default = {
     commerceUrl: commerce_url_1.default,
     create: create_1.default,
     addLanguage: add_language_1.default,
     removeLanguage: remove_language_1.default,
     defaultLanguage: default_language_1.default,
-    plugins: plugins_1.default
+    plugins: plugins_1.default,
+    codemod: codemod_1.default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {

package/app-template/sentry.client.config.ts

@@ -1,16 +0,0 @@
-import { initSentry } from '@akinon/next/sentry';
-
-async function initializeSentry() {
-  const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
-  const data = await response.json();
-
-  const options = {
-    dsn: data.dsn,
-    integrations: [],
-    tracesSampleRate: 1.0
-  };
-
-  initSentry('Client', options);
-}
-
-initializeSentry();

package/app-template/sentry.edge.config.ts

@@ -1,3 +0,0 @@
-import { initSentry } from '@akinon/next/sentry';
-
-initSentry('Edge');

package/app-template/sentry.properties

@@ -1,4 +0,0 @@
-defaults.url=https://sentry.io/
-defaults.org=akinon
-defaults.project=console--zero-pwa
-cli.executable=node_modules/@sentry/cli/bin/sentry-cli

package/app-template/sentry.server.config.ts

@@ -1,3 +0,0 @@
-import { initSentry } from '@akinon/next/sentry';
-
-initSentry('Server');

package/app-template/src/app/[commerce]/[locale]/[currency]/product/[pk]/loading.tsx

@@ -1,67 +0,0 @@
-import { Skeleton, SkeletonWrapper } from 'components';
-
-export default function Loading() {
-  return (
-    <div className="container mx-auto">
-      <div className="max-w-5xl mx-auto my-5 px-7">
-        <SkeletonWrapper className="md:mb-7">
-          <Skeleton className="w-[17.25rem] h-4 lg:w-64" />
-        </SkeletonWrapper>
-      </div>
-      <div className="grid max-w-5xl grid-cols-2 lg:gap-8 mx-auto px-7">
-        <div className="col-span-2 mb-7 md:mb-0 lg:col-span-1">
-          <div className="flex gap-1">
-            <SkeletonWrapper className="hidden md:block md:mb-7">
-              {Array(5)
-                .fill(null)
-                .map((_, index) => (
-                  <Skeleton key={index} className="w-20	h-24 mb-2" />
-                ))}
-            </SkeletonWrapper>
-
-            <div className="flex-1">
-              <SkeletonWrapper className="md:mb-7">
-                <Skeleton className="w-full h-[30.375rem] md:h-[36.375rem]" />
-              </SkeletonWrapper>
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col items-center col-span-2 lg:col-span-1">
-          <div className="w-full">
-            <SkeletonWrapper className="w-full md:mb-7 flex justify-center items-center">
-              <Skeleton className="w-96 h-16 mb-9" />
-              <Skeleton className="hidden w-36	h-14 mb-9 md:block" />
-
-              <div className="flex flex-col justify-center items-center mb-9">
-                <Skeleton className="w-36 h-4 mb-2" />
-                <div className="flex items-center gap-2">
-                  {Array(3)
-                    .fill(null)
-                    .map((_, index) => (
-                      <Skeleton key={index} className="w-24	h-10" />
-                    ))}
-                </div>
-              </div>
-
-              <div className="flex flex-col justify-center items-center mb-4">
-                <Skeleton className="w-36 h-4 mb-2" />
-                <div className="flex items-center gap-2">
-                  {Array(5)
-                    .fill(null)
-                    .map((_, index) => (
-                      <Skeleton key={index} className="w-11 h-11" />
-                    ))}
-                </div>
-              </div>
-
-              <Skeleton className="hidden w-full h-14 mb-6 md:block" />
-              <Skeleton className="w-40 h-10 mb-9 md:w-72" />
-              <Skeleton className="w-24 h-10 mb-7" />
-              <Skeleton className="w-full h-36" />
-            </SkeletonWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}