@akinon/next 1.93.0 → 1.95.0-rc.54

package/middlewares/wallet-complete-redirection.ts

@@ -0,0 +1,203 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import Settings from 'settings';
+import { Buffer } from 'buffer';
+import logger from '../utils/log';
+import { getUrlPathWithLocale } from '../utils/localization';
+import { PzNextRequest } from '.';
+
+const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
+  if (stream) {
+    const chunks = [];
+    let result = '';
+
+    try {
+      for await (const chunk of stream as any) {
+        chunks.push(Buffer.from(chunk));
+      }
+
+      result = Buffer.concat(chunks).toString('utf-8');
+    } catch (error) {
+      logger.error('Error while reading body stream', {
+        middleware: 'wallet-complete-redirection',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withWalletCompleteRedirection =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
+
+    if (url.search.indexOf('WalletCompletePage') === -1) {
+      return middleware(req, event);
+    }
+
+    const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: req.headers.get('cookie') ?? '',
+      'x-currency': req.cookies.get('pz-currency')?.value ?? '',
+      'x-forwarded-for': ip
+    };
+
+    try {
+      const existingBody = await streamToString(req.body);
+      const queryParams = new URLSearchParams(url.search);
+      const bodyParams = new URLSearchParams();
+
+      if (existingBody) {
+        try {
+          const existingParams = new URLSearchParams(existingBody);
+
+          existingParams.forEach((value, key) => {
+            bodyParams.append(key, value);
+          });
+        } catch {
+          logger.error('Error parsing existing body as URL-encoded data', {
+            middleware: 'wallet-complete-redirection',
+            existingBody,
+            ip
+          });
+        }
+      }
+
+      queryParams.forEach((value, key) => {
+        bodyParams.append(key, value);
+      });
+
+      const body = bodyParams.toString();
+
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'wallet-complete-redirection',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete wallet payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList, errors } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
+
+      if (errors && Object.keys(errors).length) {
+        logger.error('Error while completing wallet payment', {
+          middleware: 'wallet-complete-redirection',
+          errors,
+          requestHeaders,
+          ip
+        });
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          {
+            status: 303,
+            headers: {
+              'Set-Cookie': `pz-pos-error=${JSON.stringify(errors)}; path=/;`
+            }
+          }
+        );
+      }
+
+      logger.info('Order success page context list', {
+        middleware: 'wallet-complete-redirection',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'wallet-complete-redirection',
+            requestHeaders,
+            response: JSON.stringify(response),
+            ip
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
+
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      logger.info('Redirecting to order success page', {
+        middleware: 'wallet-complete-redirection',
+        redirectUrlWithLocale,
+        ip
+      });
+
+      // Using POST method while redirecting causes an error,
+      // So we use 303 status code to change the method to GET
+      const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
+
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
+      );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing wallet payment', {
+        middleware: 'wallet-complete-redirection',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withWalletCompleteRedirection;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.93.0",
+  "version": "1.95.0-rc.54",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -17,13 +17,13 @@
     "test": "jest"
   },
   "dependencies": {
-    "@neshca/cache-handler": "1.5.1",
     "@opentelemetry/exporter-trace-otlp-http": "0.46.0",
     "@opentelemetry/resources": "1.19.0",
     "@opentelemetry/sdk-node": "0.46.0",
     "@opentelemetry/sdk-trace-node": "1.19.0",
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
+    "@neshca/cache-handler": "1.9.0",
     "@sentry/nextjs": "9.5.0",
     "cross-spawn": "7.0.3",
     "generic-pool": "3.9.0",
@@ -34,7 +34,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.93.0",
+    "@akinon/eslint-plugin-projectzero": "1.95.0-rc.54",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/plugins.d.ts

@@ -36,3 +36,13 @@ declare module '@akinon/pz-iyzico-saved-card' {
 }
 
 declare module '@akinon/pz-apple-pay' {}
+
+declare module '@akinon/pz-flow-payment' {}
+
+declare module '@akinon/pz-similar-products' {
+  export const SimilarProductsModal: any;
+  export const SimilarProductsFilterSidebar: any;
+  export const SimilarProductsResultsGrid: any;
+  export const SimilarProductsPlugin: any;
+  export const SimilarProductsButtonPlugin: any;
+}

package/plugins.js

@@ -15,5 +15,8 @@ module.exports = [
   'pz-saved-card',
   'pz-tabby-extension',
   'pz-apple-pay',
-  'pz-tamara-extension'
+  'pz-tamara-extension',
+  'pz-hepsipay',
+  'pz-flow-payment',
+  'pz-similar-products'
 ];

package/redux/middlewares/checkout.ts

@@ -20,7 +20,8 @@ import {
   setShippingOptions,
   setHepsipayAvailability,
   setWalletPaymentData,
-  setPayOnDeliveryOtpModalActive
+  setPayOnDeliveryOtpModalActive,
+  setUnavailablePaymentOptions
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
@@ -50,7 +51,11 @@ export const errorMiddleware: Middleware = ({ dispatch }: MiddlewareParams) => {
     const result: CheckoutResult = next(action);
     const errors = result?.payload?.errors;
 
-    if (errors) {
+    if (
+      !!errors &&
+      ((typeof errors === 'object' && Object.keys(errors).length > 0) ||
+        (Array.isArray(errors) && errors.length > 0))
+    ) {
       dispatch(setErrors(errors));
     }
 
@@ -176,6 +181,14 @@ export const contextListMiddleware: Middleware = ({
           dispatch(setPaymentOptions(context.page_context.payment_options));
         }
 
+        if (context.page_context.unavailable_options) {
+          dispatch(
+            setUnavailablePaymentOptions(
+              context.page_context.unavailable_options
+            )
+          );
+        }
+
         if (context.page_context.credit_payment_options) {
           dispatch(
             setCreditPaymentOptions(context.page_context.credit_payment_options)

package/redux/reducers/checkout.ts

@@ -40,6 +40,7 @@ export interface CheckoutState {
   shippingOptions: ShippingOption[];
   dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
+  unavailablePaymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
   paymentChoices: PaymentChoice[];
@@ -60,6 +61,8 @@ export interface CheckoutState {
       countryCode: string;
       currencyCode: string;
       version: string;
+      public_key: string;
+      [key: string]: any;
     };
     detail: {
       label: string;
@@ -94,6 +97,7 @@ const initialState: CheckoutState = {
   shippingOptions: [],
   dataSourceShippingOptions: [],
   paymentOptions: [],
+  unavailablePaymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
   paymentChoices: [],
@@ -157,6 +161,9 @@ const checkoutSlice = createSlice({
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
+    setUnavailablePaymentOptions(state, { payload }) {
+      state.unavailablePaymentOptions = payload;
+    },
     setPaymentChoices(state, { payload }) {
       state.paymentChoices = payload;
     },
@@ -218,9 +225,10 @@ export const {
   setShippingOptions,
   setDataSourceShippingOptions,
   setPaymentOptions,
+  setUnavailablePaymentOptions,
+  setPaymentChoices,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,
-  setPaymentChoices,
   setCardType,
   setInstallmentOptions,
   setBankAccounts,

package/sentry/index.ts

@@ -13,36 +13,73 @@ const ALLOWED_CLIENT_LOG_TYPES: ClientLogType[] = [
   ClientLogType.CHECKOUT
 ];
 
+const isNetworkError = (exception: unknown): boolean => {
+  if (!(exception instanceof Error)) return false;
+
+  const networkErrorPatterns = [
+    'networkerror',
+    'failed to fetch',
+    'network request failed',
+    'network error',
+    'loading chunk',
+    'chunk load failed'
+  ];
+
+  if (exception.name === 'NetworkError') return true;
+
+  if (exception.name === 'TypeError') {
+    return networkErrorPatterns.some((pattern) =>
+      exception.message.toLowerCase().includes(pattern)
+    );
+  }
+
+  return networkErrorPatterns.some((pattern) =>
+    exception.message.toLowerCase().includes(pattern)
+  );
+};
+
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
   options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
 ) => {
-  // TODO: Handle options with ESLint rules
+  // TODO: Remove Zero Project DSN
 
-  Sentry.init({
+  const baseConfig = {
     dsn:
-      options.dsn ||
       SENTRY_DSN ||
+      options.dsn ||
       'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
     initialScope: {
       tags: {
         APP_TYPE: 'ProjectZeroNext',
-        TYPE: type
+        TYPE: type,
+        ...((options.initialScope as any)?.tags || {})
       }
     },
     tracesSampleRate: 0,
-    integrations: [],
-    beforeSend: (event, hint) => {
-      if (
-        type === 'Client' &&
-        !ALLOWED_CLIENT_LOG_TYPES.includes(
-          event.tags?.LOG_TYPE as ClientLogType
-        )
-      ) {
-        return null;
-      }
+    integrations: []
+  };
 
-      return event;
-    }
-  });
+  if (type === 'Server' || type === 'Edge') {
+    Sentry.init(baseConfig);
+  } else if (type === 'Client') {
+    Sentry.init({
+      ...baseConfig,
+      beforeSend: (event, hint) => {
+        if (
+          !ALLOWED_CLIENT_LOG_TYPES.includes(
+            event.tags?.LOG_TYPE as ClientLogType
+          )
+        ) {
+          return null;
+        }
+
+        if (isNetworkError(hint?.originalException)) {
+          return null;
+        }
+
+        return event;
+      }
+    });
+  }
 };

package/types/commerce/order.ts

@@ -114,6 +114,7 @@ export interface Order {
     pk: number;
     name: string;
     slug: string;
+    logo: string;
     [key: string]: any;
   };
 }

package/types/index.ts

@@ -83,6 +83,12 @@ export interface Settings {
   };
   usePrettyUrlRoute?: boolean;
   commerceUrl: string;
+  /**
+   * This option allows you to track Sentry events on the client side, in addition to server and edge environments.
+   *
+   * It overrides process.env.NEXT_PUBLIC_SENTRY_DSN and process.env.SENTRY_DSN.
+   */
+  sentryDsn?: string;
   redis: {
     defaultExpirationTime: number;
   };
@@ -218,6 +224,14 @@ export interface CacheOptions {
   useProxy?: boolean;
 }
 
+export interface SetCookieOptions {
+  expires?: number; // days
+  path?: string;
+  domain?: string;
+  secure?: boolean;
+  sameSite?: 'strict' | 'lax' | 'none';
+}
+
 export interface ClientRequestOptions {
   useTrailingSlash?: boolean;
   useFormData?: boolean;
@@ -283,7 +297,13 @@ export interface ButtonProps
   target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
-export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export interface PriceProps {
   currencyCode?: string;
@@ -304,15 +324,19 @@ export interface InputProps extends React.HTMLProps<HTMLInputElement> {
 
 export interface AccordionProps {
   isCollapse?: boolean;
+  collapseClassName?: string;
   title?: string;
   subTitle?: string;
   icons?: string[];
   iconSize?: number;
   iconColor?: string;
   children?: ReactNode;
+  headerClassName?: string;
   className?: string;
   titleClassName?: string;
+  subTitleClassName?: string;
   dataTestId?: string;
+  contentClassName?: string;
 }
 
 export interface PluginModuleComponentProps {
@@ -337,3 +361,20 @@ export interface PaginationProps {
   direction?: 'next' | 'prev';
   isLoading?: boolean;
 }
+
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  headerWrapperClassName?: string;
+  titleClassName?: string;
+  closeButtonClassName?: string;
+  iconName?: string;
+  iconSize?: number;
+  iconClassName?: string;
+}

package/utils/app-fetch.ts

@@ -43,12 +43,12 @@ const appFetch = async <T>({
     const requestURL = `${decodeURIComponent(commerceUrl)}${url}`;
 
     init.headers = {
+      cookie: nextCookies.toString(),
       ...(init.headers ?? {}),
       ...(ServerVariables.globalHeaders ?? {}),
       'Accept-Language': currentLocale.apiValue,
       'x-currency': currency,
-      'x-forwarded-for': ip,
-      cookie: nextCookies.toString()
+      'x-forwarded-for': ip
     };
 
     init.next = {
@@ -60,6 +60,11 @@ const appFetch = async <T>({
     status = req.status;
     logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
+    if (!req.ok) {
+      const errorMessage = `HTTP ${req.status}: ${req.statusText}`;
+      throw new Error(errorMessage);
+    }
+
     if (responseType === FetchResponseType.JSON) {
       response = (await req.json()) as T;
     } else {

package/utils/index.ts

@@ -1,6 +1,7 @@
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../localization';
-import { CDNOptions, ClientRequestOptions } from '../types';
+import { CDNOptions, ClientRequestOptions, SetCookieOptions } from '../types';
+import getRootHostname from './get-root-hostname';
 
 export * from './get-currency';
 export * from './menu-generator';
@@ -20,14 +21,40 @@ export function getCookie(name: string) {
   }
 }
 
-export function setCookie(name: string, val: string) {
-  const date = new Date();
-  const value = val;
+export function setCookie(
+  name: string,
+  value: string,
+  options: SetCookieOptions = {}
+) {
+  const cookieParts = [`${name}=${value}`];
+
+  if (options.expires) {
+    const date = new Date();
+    date.setTime(date.getTime() + options.expires * 24 * 60 * 60 * 1000);
+    cookieParts.push(`expires=${date.toUTCString()}`);
+  }
 
-  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+  cookieParts.push(`path=${options.path ?? '/'}`);
 
-  document.cookie =
-    name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
+  if (options.secure) {
+    cookieParts.push('secure');
+  }
+
+  if (options.sameSite) {
+    cookieParts.push(`sameSite=${options.sameSite}`);
+  }
+
+  const domain =
+    options.domain ??
+    (settings.localization.localeUrlStrategy === LocaleUrlStrategy.Subdomain
+      ? getRootHostname(document.location.href)
+      : null);
+
+  if (domain) {
+    cookieParts.push(`domain=${domain}`);
+  }
+
+  document.cookie = cookieParts.join('; ');
 }
 
 export function removeCookie(name: string) {
@@ -152,9 +179,6 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
   return `${rootWithoutOptions}${options}${fileExtension}`;
 }
 
-const { locales, localeUrlStrategy, defaultLocaleValue } =
-  settings.localization;
-
 export const urlLocaleMatcherRegex = new RegExp(
   `^/(${settings.localization.locales
     .filter((l) =>

package/utils/redirect-ignore.ts

@@ -0,0 +1,35 @@
+import settings from 'settings';
+import { getUrlPathWithLocale } from './localization';
+
+type IgnorePath = string | RegExp;
+
+const defaultIgnoreList: string[] = [];
+
+const extraIgnores: IgnorePath[] = Array.isArray(
+  settings.commerceRedirectionIgnoreList
+)
+  ? settings.commerceRedirectionIgnoreList.map((path) => {
+      if (path === '/users/reset') {
+        return /^\/users\/reset\/[^/]+\/[^/]+\/$/;
+      }
+      return path;
+    })
+  : [];
+
+export function shouldIgnoreRedirect(
+  pathname: string,
+  locale: string
+): boolean {
+  if (!pathname) return false;
+
+  const rawIgnoreList: IgnorePath[] = [...defaultIgnoreList, ...extraIgnores];
+
+  return rawIgnoreList.some((ignorePath) => {
+    if (ignorePath instanceof RegExp) {
+      return ignorePath.test(pathname);
+    }
+
+    const localized = getUrlPathWithLocale(ignorePath, locale);
+    return localized === pathname;
+  });
+}