@akinon/next 2.0.0-beta.0 → 2.0.0-beta.10

package/data/client/user.ts

@@ -1,7 +1,7 @@
 import { api } from './api';
 import { user } from '../urls';
 import { ForgotPasswordFormType, Order } from '../../types';
-import { buildClientRequestUrl } from '../../utils';
+import { buildClientRequestUrl, getCookie } from '../../utils';
 
 interface GetCaptchaResponse {
   siteKey: string;
@@ -64,13 +64,21 @@ const userApi = api.injectEndpoints({
       })
     }),
     forgotPassword: build.mutation<void, ForgotPasswordFormType>({
-      query: (body) => ({
-        url: buildClientRequestUrl(user.forgotPassword, {
-          contentType: 'application/json'
-        }),
-        method: 'POST',
-        body
-      })
+      query: (body) => {
+        const frontendId = getCookie('pz-frontend-id');
+        const headers = frontendId
+          ? { 'x-frontend-id': frontendId }
+          : undefined;
+
+        return {
+          url: buildClientRequestUrl(user.forgotPassword, {
+            contentType: 'application/json'
+          }),
+          method: 'POST',
+          body,
+          headers
+        };
+      }
     }),
     otpLogin: build.mutation<void, { phone: string }>({
       query: ({ phone }) => ({

package/data/server/flatpage.ts

@@ -7,7 +7,8 @@ import { ServerVariables } from '../../utils/server-variables';
 const getFlatPageDataHandler = (
   pk: number,
   locale: string,
-  currency: string
+  currency: string,
+  headers?: Record<string, string>
 ) => {
   return async function () {
     const data = await appFetch<FlatPage>({
@@ -17,7 +18,8 @@ const getFlatPageDataHandler = (
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -29,15 +31,17 @@ const getFlatPageDataHandler = (
 export const getFlatPageData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.FlatPage(pk),
     locale,
-    getFlatPageDataHandler(pk, locale, currency)
+    getFlatPageDataHandler(pk, locale, currency, headers)
   );
 };

package/data/server/form.ts

@@ -5,7 +5,12 @@ import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
 import { form } from '../urls';
 
-const getFormDataHandler = (pk: number, locale: string, currency: string) => {
+const getFormDataHandler = (
+  pk: number,
+  locale: string,
+  currency: string,
+  headers?: Record<string, string>
+) => {
   return async function () {
     const data = await appFetch<FormType>({
       url: form.getForm(pk),
@@ -14,7 +19,8 @@ const getFormDataHandler = (pk: number, locale: string, currency: string) => {
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -26,15 +32,17 @@ const getFormDataHandler = (pk: number, locale: string, currency: string) => {
 export const getFormData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.Form(pk),
     locale,
-    getFormDataHandler(pk, locale, currency)
+    getFormDataHandler(pk, locale, currency, headers)
   );
 };

package/data/server/landingpage.ts

@@ -7,7 +7,8 @@ import { ServerVariables } from '../../utils/server-variables';
 const getLandingPageHandler = (
   pk: number,
   locale: string,
-  currency: string
+  currency: string,
+  headers?: Record<string, string>
 ) => {
   return async function () {
     const data = await appFetch<LandingPage>({
@@ -17,7 +18,8 @@ const getLandingPageHandler = (
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -29,15 +31,17 @@ const getLandingPageHandler = (
 export const getLandingPageData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.LandingPage(pk),
     locale,
-    getLandingPageHandler(pk, locale, currency)
+    getLandingPageHandler(pk, locale, currency, headers)
   );
 };

package/data/server/menu.ts

@@ -13,6 +13,7 @@ interface MenuHandlerParams {
   currency?: string;
   depth?: number;
   parent?: string;
+  headers?: Record<string, string>;
 }
 
 const DEFAULT_DEPTH = 3;
@@ -22,13 +23,17 @@ const getMenuHandler =
     locale = ServerVariables.locale,
     currency = ServerVariables.currency,
     depth,
-    parent
+    parent,
+    headers
   }: MenuHandlerParams = {}) =>
   async () => {
     const response = await appFetch<MenuResponse>({
       url: misc.menus(depth ?? DEFAULT_DEPTH, parent),
       locale,
-      currency
+      currency,
+      init: {
+        headers
+      }
     });
 
     return response?.menu;

package/data/server/product.ts

@@ -11,6 +11,7 @@ type GetProduct = {
   currency?: string;
   searchParams?: URLSearchParams;
   groupProduct?: boolean;
+  headers?: Record<string, string>;
 };
 
 const getProductDataHandler = ({
@@ -18,7 +19,8 @@ const getProductDataHandler = ({
   locale,
   currency,
   searchParams,
-  groupProduct
+  groupProduct,
+  headers
 }: GetProduct) => {
   return async function () {
     let url = groupProduct
@@ -29,7 +31,7 @@ const getProductDataHandler = ({
       url +=
         '?' +
         Object.keys(searchParams)
-          .map((key) => `${key}=${searchParams[key]}`)
+          .map((key) => `${key}=${encodeURIComponent(searchParams[key])}`)
           .join('&');
     }
 
@@ -40,7 +42,8 @@ const getProductDataHandler = ({
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -95,7 +98,8 @@ export const getProductData = async ({
   locale = ServerVariables.locale,
   currency = ServerVariables.currency,
   searchParams,
-  groupProduct
+  groupProduct,
+  headers
 }: GetProduct) => {
   return Cache.wrap(
     CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
@@ -103,7 +107,14 @@ export const getProductData = async ({
       searchParams ?? new URLSearchParams()
     ),
     locale,
-    getProductDataHandler({ pk, locale, currency, searchParams, groupProduct }),
+    getProductDataHandler({
+      pk,
+      locale,
+      currency,
+      searchParams,
+      groupProduct,
+      headers
+    }),
     {
       expire: 300
     }

package/data/server/seo.ts

@@ -7,9 +7,10 @@ interface SeoDataParams {
   url: string;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }
 
-function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
+function getSeoDataHandler({ url, locale, currency, headers }: SeoDataParams) {
   return async function () {
     let data = {} as {
       title: string;
@@ -19,7 +20,12 @@ function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
     };
 
     try {
-      data = await appFetch({ url: misc.cmsSeo(url), locale, currency });
+      data = await appFetch({
+        url: misc.cmsSeo(url),
+        locale,
+        currency,
+        init: { headers }
+      });
     } catch (error) {
       // logger.error('Error while fetching seo data', { url, error });
     }
@@ -31,11 +37,12 @@ function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
 export const getSeoData = async (
   url,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers?: Record<string, string>
 ) => {
   return Cache.wrap(
     CacheKey.Seo(url),
     locale,
-    getSeoDataHandler({ url, locale, currency })
+    getSeoDataHandler({ url, locale, currency, headers })
   );
 };

package/data/server/widget.ts

@@ -6,29 +6,44 @@ import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
 
 const getWidgetDataHandler =
-  (slug: string, locale: string, currency: string) => async () => {
+  (
+    slug: string,
+    locale: string,
+    currency: string,
+    headers?: Record<string, string>
+  ) =>
+  async () => {
     if (!slug) {
       return null;
     }
 
-    return await appFetch({ url: widgets.getWidget(slug), locale, currency });
+    return await appFetch({
+      url: widgets.getWidget(slug),
+      locale,
+      currency,
+      init: {
+        headers
+      }
+    });
   };
 
 export const getWidgetData = async <T>({
   slug,
   locale = ServerVariables.locale,
   currency = ServerVariables.currency,
-  cacheOptions
+  cacheOptions,
+  headers
 }: {
   slug: string;
   locale?: string;
   currency?: string;
   cacheOptions?: CacheOptions;
+  headers?: Record<string, string>;
 }): Promise<WidgetResultType<T>> => {
   return Cache.wrap(
     CacheKey.Widget(slug),
     locale,
-    getWidgetDataHandler(slug, locale, currency),
+    getWidgetDataHandler(slug, locale, currency, headers),
     cacheOptions
   );
 };

package/data/urls.ts

@@ -74,7 +74,10 @@ export const address = {
 
 export const basket = {
   getBasket: '/baskets/basket/',
+  getMiniBasket: '/baskets/basket/mini/',
   getBasketDetail: (namespace: string) => `/baskets/basket/${namespace}/`,
+  getMiniBasketDetail: (namespace: string) =>
+    `/baskets/basket/${namespace}/mini/`,
   getAllBaskets: '/baskets/basket-list/',
   removeBasket: (pk: number) => `/baskets/basket-list/${pk}/`,
   selectMainBasket: (pk: number) => `/baskets/basket-list/id/${pk}/main/`,
@@ -137,7 +140,9 @@ export const checkout = {
     '/orders/checkout/?page=AttributeBasedShippingOptionSelectionPage',
   deliveryBagsPage: '/orders/checkout/?page=DeliveryBagsPage',
   setOrderSelectionPage: '/orders/checkout/?page=OrderSelectionPage',
-  loyaltyCardPage: '/orders/checkout/?page=LoyaltyCardPage'
+  loyaltyCardPage: '/orders/checkout/?page=LoyaltyCardPage',
+  sendSmsPage: '/orders/checkout/?page=SendSmsPage',
+  verifySmsPage: '/orders/checkout/?page=VerifySmsPage'
 };
 
 export const flatpage = {
@@ -160,7 +165,8 @@ export const misc = {
       parent ? `&parent=${parent}` : ''
     }`,
   cmsSeo: (slug: string | string[]) => `/cms/seo/?url=${slug ? slug : '/'}`,
-  setCurrency: '/users/activate-currency/'
+  setCurrency: '/users/activate-currency/',
+  bukalemunImageUrl: (params: string) => `/bukalemun/?${params}`
 };
 
 export const product = {
@@ -174,7 +180,9 @@ export const product = {
   slug: (slug: string) => `/${slug}/`,
   categoryUrl: (pk: number) => `/products/${pk}/category_nodes/?limit=1`,
   breadcrumbUrl: (menuitemmodel: string) =>
-    `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`
+    `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
+  bundleProduct: (productPk: string, queryString: string) =>
+    `/bundle-product/${productPk}/?${queryString}`
 };
 
 export const wishlist = {

package/hocs/client/with-segment-defaults.tsx

@@ -1,5 +1,5 @@
 import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
-import React from 'react';
+import React, { JSX } from 'react';
 
 type SegmentType = 'client-root' | 'layout' | 'page';
 

package/hocs/server/with-segment-defaults.tsx

@@ -1,4 +1,5 @@
 import settings from 'settings';
+import { JSX } from 'react';
 import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
 import { redirect } from 'next/navigation';
 import { ServerVariables } from '../../utils/server-variables';
@@ -21,6 +22,8 @@ export const withSegmentDefaults =
   async (props: T) => {
     let componentProps = { ...props };
 
+    const { locale, currency } = await props.params;
+
     if (options.segmentType === 'root-layout') {
       componentProps = (await addRootLayoutProps(
         componentProps as RootLayoutProps
@@ -29,8 +32,8 @@ export const withSegmentDefaults =
       checkRedisVariables();
     }
 
-    ServerVariables.locale = props.params.locale;
-    ServerVariables.currency = props.params.currency;
+    ServerVariables.locale = await locale;
+    ServerVariables.currency = await currency;
 
     return await (
       <>
@@ -40,7 +43,7 @@ export const withSegmentDefaults =
   };
 
 const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
-  const params = componentProps.params;
+  const params = await componentProps.params;
 
   if (
     params.commerce !== encodeURIComponent(decodeURI(settings.commerceUrl)) ||

package/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
 export * from './use-pagination';
 export * from './use-message-listener';
+export * from './use-sentry-uncaught-errors';

package/hooks/use-router.ts

@@ -27,8 +27,11 @@ export const useRouter = () => {
     );
 
     url.pathname = `${
-      locale === defaultLocale?.value &&
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale
+      localeUrlStrategy === LocaleUrlStrategy.Subdomain ||
+      (locale === defaultLocale?.value &&
+        [LocaleUrlStrategy.HideDefaultLocale].includes(
+          localeUrlStrategy as LocaleUrlStrategy
+        ))
         ? ''
         : `/${locale}`
     }${pathnameWithoutLocale}`;

package/hooks/use-sentry-uncaught-errors.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/nextjs';
+import { ClientLogType } from '@akinon/next/sentry';
+
+export const useSentryUncaughtErrors = (error: Error & { digest?: string }) => {
+  useEffect(() => {
+    Sentry.withScope(function (scope) {
+      scope.setLevel('fatal');
+      scope.setTags({
+        APP_TYPE: 'ProjectZeroNext',
+        TYPE: 'Client',
+        LOG_TYPE: ClientLogType.UNCAUGHT_ERROR_PAGE
+      });
+      scope.setExtra('error', error);
+
+      const error_ = new Error('FATAL: Uncaught client error');
+      error_.name = 'UNCAUGHT_ERROR_PAGE';
+
+      Sentry.captureException(error_, {
+        fingerprint: ['UNCAUGHT_ERROR_PAGE', error.digest]
+      });
+    });
+  }, [error]);
+};

package/instrumentation/index.ts

@@ -1,5 +1,15 @@
+import { initSentry } from '../sentry';
+import * as Sentry from '@sentry/nextjs';
+
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     await import('./node');
+    initSentry('Server');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    initSentry('Edge');
   }
 }
+
+export const onRequestError = Sentry.captureRequestError;

package/lib/cache-handler.mjs

@@ -23,10 +23,10 @@ CacheHandler.onCreation(async () => {
     timeoutMs: 5000
   });
 
-  const localHandler = createLruHandler();
+  // const localHandler = createLruHandler();
 
   return {
-    handlers: [redisHandler, localHandler]
+    handlers: [redisHandler]
   };
 });
 

package/lib/cache.ts

@@ -156,10 +156,6 @@ export class Cache {
     handler: () => Promise<T>,
     options?: CacheOptions
   ): Promise<T> {
-    if (Settings.usePrettyUrlRoute) {
-      return await handler();
-    }
-
     const requiredVariables = [
       process.env.CACHE_HOST,
       process.env.CACHE_PORT,
@@ -178,6 +174,10 @@ export class Cache {
     const _options = Object.assign(defaultOptions, options);
     const formattedKey = Cache.formatKey(key, locale);
 
+    if (Settings.usePrettyUrlRoute) {
+      _options.expire = 120;
+    }
+
     logger.debug('Cache wrap', { key, formattedKey, _options });
 
     if (_options.cache) {

package/localization/index.ts

@@ -1,5 +1,6 @@
 export enum LocaleUrlStrategy {
   HideAllLocales = 'hide-all-locales',
   HideDefaultLocale = 'hide-default-locale',
-  ShowAllLocales = 'show-all-locales'
+  ShowAllLocales = 'show-all-locales',
+  Subdomain = 'subdomain'
 }

package/middlewares/default.ts

@@ -95,7 +95,9 @@ const withPzDefault =
 
     if (
       req.nextUrl.pathname.includes('/orders/hooks/') ||
-      req.nextUrl.pathname.includes('/orders/checkout-with-token/')
+      req.nextUrl.pathname.includes('/orders/checkout-with-token/') ||
+      req.nextUrl.pathname.includes('/hooks/cash_register/complete/') ||
+      req.nextUrl.pathname.includes('/hooks/cash_register/pre_order/')
     ) {
       const queryString = searchParams.toString();
       const currency = searchParams.get('currency')?.toLowerCase();
@@ -285,20 +287,9 @@ const withPzDefault =
                                 url.pathname =
                                   url.pathname +
                                   (/\/$/.test(url.pathname) ? '' : '/') +
-                                  `searchparams|${url.searchParams.toString()}`;
-                              }
-
-                              if (
-                                !req.middlewareParams.found &&
-                                Settings.customNotFoundEnabled
-                              ) {
-                                let pathname = url.pathname
-                                  .replace(/\/+$/, '')
-                                  .split('/');
-                                url.pathname = url.pathname.replace(
-                                  pathname.pop(),
-                                  'pz-not-found'
-                                );
+                                  `searchparams|${encodeURIComponent(
+                                    url.searchParams.toString()
+                                  )}`;
                               }
 
                               Settings.rewrites.forEach((rewrite) => {

package/middlewares/locale.ts

@@ -4,17 +4,32 @@ import { PzNextRequest } from '.';
 import { LocaleUrlStrategy } from '../localization';
 import { urlLocaleMatcherRegex } from '../utils';
 import logger from '../utils/log';
+import { getUrlPathWithLocale } from '../utils/localization';
 
-const getMatchedLocale = (pathname: string) => {
+const getMatchedLocale = (pathname: string, req: PzNextRequest) => {
   let matchedLocale = pathname.match(urlLocaleMatcherRegex)?.[0] ?? '';
   matchedLocale = matchedLocale.replace('/', '');
 
+  const { localeUrlStrategy, defaultLocaleValue } = settings.localization;
+
+  if (localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
+    const host = req.headers.get('x-forwarded-host');
+
+    if (host) {
+      const subDomain = host.split('.')[0] || '';
+      const subDomainLocaleMatched = `/${subDomain}`.match(
+        urlLocaleMatcherRegex
+      );
+
+      if (subDomainLocaleMatched && subDomainLocaleMatched[0]) {
+        matchedLocale = subDomainLocaleMatched[0].slice(1);
+      }
+    }
+  }
+
   if (!matchedLocale.length) {
-    if (
-      settings.localization.localeUrlStrategy !==
-      LocaleUrlStrategy.ShowAllLocales
-    ) {
-      matchedLocale = settings.localization.defaultLocaleValue;
+    if (localeUrlStrategy !== LocaleUrlStrategy.ShowAllLocales) {
+      matchedLocale = defaultLocaleValue;
     }
   }
 
@@ -28,7 +43,7 @@ const withLocale =
 
     try {
       const url = req.nextUrl.clone();
-      const matchedLocale = getMatchedLocale(url.pathname);
+      const matchedLocale = getMatchedLocale(url.pathname, req);
       let { localeUrlStrategy, defaultLocaleValue, redirectToDefaultLocale } =
         settings.localization;
 
@@ -50,8 +65,15 @@ const withLocale =
         redirectToDefaultLocale &&
         req.method === 'GET'
       ) {
-        url.pathname = `/${defaultLocaleValue}${url.pathname}`;
-        return NextResponse.redirect(url);
+        // Redirect to existing or default locale
+
+        url.pathname = getUrlPathWithLocale(
+          url.pathname,
+          req.cookies.get('pz-locale')?.value
+        );
+
+        // Use 303 for POST requests
+        return NextResponse.redirect(url, 303);
       }
 
       req.middlewareParams.rewrites.locale = matchedLocale;
@@ -61,7 +83,6 @@ const withLocale =
         ip
       });
     }
-
     return middleware(req, event);
   };
 

package/middlewares/url-redirection.ts

@@ -60,6 +60,22 @@ const withUrlRedirection =
 
         const setCookies = request.headers.getSetCookie();
 
+        if (settings.commerceRedirectionIgnoreList) {
+          const shouldIgnoreRedirect =
+            settings.commerceRedirectionIgnoreList.some((ignorePath) =>
+              redirectUrl.pathname.startsWith(
+                getUrlPathWithLocale(
+                  ignorePath,
+                  req.middlewareParams.rewrites.locale
+                )
+              )
+            );
+
+          if (shouldIgnoreRedirect) {
+            return middleware(req, event);
+          }
+        }
+
         const response = NextResponse.redirect(redirectUrl.toString(), {
           status: request.status
         });