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

package/redux/middlewares/pre-order/shipping-step.ts

@@ -0,0 +1,38 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { setShippingStepCompleted } from '../../reducers/checkout';
+
+export const shippingStepMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { addressList: addresses } = getState().checkout;
+
+    if (preOrder) {
+      const stepCompleted = [
+        preOrder.delivery_option?.delivery_option_type === 'retail_store'
+          ? true
+          : preOrder.shipping_address?.pk,
+        preOrder.billing_address?.pk,
+        preOrder.shipping_option?.pk,
+        addresses.length > 0
+      ].every(Boolean);
+
+      dispatch(setShippingStepCompleted(stepCompleted));
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(shippingStepMiddleware, 'name', {
+  value: 'shippingStepMiddleware'
+});

package/redux/reducers/checkout.ts

@@ -70,6 +70,7 @@ export interface CheckoutState {
     };
     supportedMethods: string;
   };
+  payOnDeliveryOtpModalActive: boolean;
 }
 
 const initialState: CheckoutState = {
@@ -103,7 +104,8 @@ const initialState: CheckoutState = {
   retailStores: [],
   attributeBasedShippingOptions: [],
   selectedShippingOptions: {},
-  hepsipayAvailability: false
+  hepsipayAvailability: false,
+  payOnDeliveryOtpModalActive: false
 };
 
 const checkoutSlice = createSlice({
@@ -193,6 +195,9 @@ const checkoutSlice = createSlice({
     },
     setWalletPaymentData(state, { payload }) {
       state.walletPaymentData = payload;
+    },
+    setPayOnDeliveryOtpModalActive(state, { payload }) {
+      state.payOnDeliveryOtpModalActive = payload;
     }
   }
 });
@@ -225,7 +230,8 @@ export const {
   setAttributeBasedShippingOptions,
   setSelectedShippingOptions,
   setHepsipayAvailability,
-  setWalletPaymentData
+  setWalletPaymentData,
+  setPayOnDeliveryOtpModalActive
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/redux/reducers/index.ts

@@ -9,15 +9,17 @@ import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
 import { savedCardReducer } from '@akinon/pz-saved-card';
 
+const fallbackReducer = (state = {}) => state;
+
 const reducers = {
   [api.reducerPath]: api.reducer,
   root: rootReducer,
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
-  masterpass: masterpassReducer,
-  otp: otpReducer,
-  savedCard: savedCardReducer
+  masterpass: masterpassReducer || fallbackReducer,
+  otp: otpReducer || fallbackReducer,
+  savedCard: savedCardReducer || fallbackReducer
 };
 
 export default reducers;

package/redux/reducers/root.ts

@@ -14,7 +14,8 @@ const initialState = {
     open: false,
     title: null,
     content: null
-  }
+  },
+  userPhoneNumber: null
 };
 
 const rootSlice = createSlice({
@@ -45,6 +46,9 @@ const rootSlice = createSlice({
       state.rootModal.open = false;
       state.rootModal.title = null;
       state.rootModal.content = null;
+    },
+    setUserPhoneNumber(state, { payload }) {
+      state.userPhoneNumber = payload;
     }
   }
 });
@@ -55,7 +59,8 @@ export const {
   toggleMiniBasket,
   setHighlightedItem,
   openRootModal,
-  closeRootModal
+  closeRootModal,
+  setUserPhoneNumber
 } = rootSlice.actions;
 
 export default rootSlice.reducer;

package/sentry/index.ts

@@ -1,29 +1,48 @@
 import * as Sentry from '@sentry/nextjs';
 
-const SENTRY_DSN: string =
+const SENTRY_DSN: string | undefined =
   process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
 
+export enum ClientLogType {
+  UNCAUGHT_ERROR_PAGE = 'UNCAUGHT_ERROR_PAGE',
+  CHECKOUT = 'CHECKOUT'
+}
+
+const ALLOWED_CLIENT_LOG_TYPES: ClientLogType[] = [
+  ClientLogType.UNCAUGHT_ERROR_PAGE,
+  ClientLogType.CHECKOUT
+];
+
 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({
+    dsn:
+      options.dsn ||
+      SENTRY_DSN ||
+      'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
+    initialScope: {
+      tags: {
+        APP_TYPE: 'ProjectZeroNext',
+        TYPE: type
+      }
+    },
+    tracesSampleRate: 0,
+    integrations: [],
+    beforeSend: (event, hint) => {
+      if (
+        type === 'Client' &&
+        !ALLOWED_CLIENT_LOG_TYPES.includes(
+          event.tags?.LOG_TYPE as ClientLogType
+        )
+      ) {
+        return null;
+      }
 
-  if (type === 'Server' || type === 'Edge') {
-    Sentry.init({
-      dsn:
-        SENTRY_DSN ||
-        'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
-      initialScope: {
-        tags: {
-          APP_TYPE: 'ProjectZeroNext',
-          TYPE: type
-        }
-      },
-      tracesSampleRate: 1.0,
-      integrations: []
-    });
-  }
+      return event;
+    }
+  });
 };

package/types/commerce/account.ts

@@ -19,6 +19,10 @@ export type AccountOrderCancellation = {
     description: string;
     order_item: string;
     reason: string;
+    cancellation_request_image_set?: Array<{
+      image: string;
+      description: string;
+    }>;
   }>;
 };
 
@@ -61,5 +65,5 @@ export type ContactFormType = {
   order?: string;
   country_code?: string;
   order_needed?: boolean;
-  file?: FileList
+  file?: FileList;
 };

package/types/commerce/checkout.ts

@@ -3,6 +3,8 @@ import { Basket } from './basket';
 import { RetailStore } from './misc';
 import { PaymentOption } from './order';
 import { Product } from './product';
+import { JSX } from 'react';
+import { RootState, TypedDispatch } from 'redux/store';
 
 export enum CheckoutStep {
   Shipping = 'shipping',
@@ -106,6 +108,7 @@ export interface PreOrder {
   context_extras?: ExtraField;
   token?: string;
   agreement_confirmed?: boolean;
+  phone_number?: string;
 }
 
 export type ExtraField = Record<string, any>;
@@ -185,3 +188,24 @@ export interface AttributeBasedShippingOption {
   attribute_key: string;
   [key: string]: any;
 }
+
+export interface CheckoutResult {
+  payload: {
+    errors?: Record<string, string[]>;
+    pre_order?: PreOrder;
+    context_list?: CheckoutContext[];
+  };
+}
+
+export interface MiddlewareParams {
+  getState: () => RootState;
+  dispatch: TypedDispatch;
+}
+
+export type SendSmsType = {
+  phone_number: string;
+};
+
+export type VerifySmsType = {
+  verify_code: string;
+};

package/types/index.ts

@@ -199,15 +199,16 @@ export interface Settings {
     extraPaymentTypes?: string[];
     masterpassJsUrl?: string;
   };
-  customNotFoundEnabled: boolean;
   useOptimizedTranslations?: boolean;
   plugins?: Record<string, Record<string, any>>;
   includedProxyHeaders?: string[];
+  commerceRedirectionIgnoreList?: string[];
   /**
    * By default, the currency will be reset when the currency is changed.
    * If you want to keep the basket when the currency is changed, you can set this option to `false`.
    */
   resetBasketOnCurrencyChange?: boolean;
+  frontendIds?: Record<string, number>;
 }
 
 export interface CacheOptions {
@@ -239,8 +240,8 @@ export type ImageOptions = CDNOptions & {
 export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
-  params: T & { locale: string; currency: string };
-  searchParams: URLSearchParams;
+  params: Promise<T & { locale: string; currency: string }>;
+  searchParams: Promise<URLSearchParams>;
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {
@@ -275,7 +276,10 @@ export interface IconProps extends React.ComponentPropsWithRef<'i'> {
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export type FileInputProps = React.HTMLProps<HTMLInputElement>;

package/utils/app-fetch.ts

@@ -26,8 +26,8 @@ const appFetch = async <T>({
   let ip = '';
 
   try {
-    const nextHeaders = headers();
-    const nextCookies = cookies();
+    const nextHeaders = await headers();
+    const nextCookies = await cookies();
     ip = nextHeaders.get('x-forwarded-for') ?? '';
 
     const commerceUrl = Settings.commerceUrl;

package/utils/index.ts

@@ -1,6 +1,6 @@
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../localization';
-import { CDNOptions, ClientRequestOptions } from '../types';
+import { CDNOptions, ClientRequestOptions, Locale } from '../types';
 
 export * from './get-currency';
 export * from './menu-generator';
@@ -152,14 +152,17 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
   return `${rootWithoutOptions}${options}${fileExtension}`;
 }
 
+const { locales, localeUrlStrategy, defaultLocaleValue } =
+  settings.localization;
+
+const isLocaleExcluded = (locale: Locale) =>
+  ![LocaleUrlStrategy.ShowAllLocales, LocaleUrlStrategy.Subdomain].includes(
+    localeUrlStrategy
+  ) && locale.value !== defaultLocaleValue;
+
 export const urlLocaleMatcherRegex = new RegExp(
-  `^/(${settings.localization.locales
-    .filter((l) =>
-      settings.localization.localeUrlStrategy !==
-      LocaleUrlStrategy.ShowAllLocales
-        ? l.value !== settings.localization.defaultLocaleValue
-        : l
-    )
+  `^/(${locales
+    .filter((l) => !isLocaleExcluded(l))
     .map((l) => l.value)
     .join('|')})(?=/|$)`
 );

package/utils/localization.ts

@@ -11,6 +11,10 @@ export const getUrlPathWithLocale = (
     currentLocale = defaultLocaleValue;
   }
 
+  if (localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
+    return pathname;
+  }
+
   if (localeUrlStrategy === LocaleUrlStrategy.HideAllLocales) {
     return pathname;
   }

package/utils/override-middleware.ts

@@ -0,0 +1,25 @@
+import { Middleware } from '@reduxjs/toolkit';
+
+export enum MiddlewareNames {
+  PreOrderValidationMiddleware = 'preOrderValidationMiddleware',
+  RedirectionMiddleware = 'redirectionMiddleware',
+  SetPreOrderMiddleware = 'setPreOrderMiddleware',
+  DeliveryOptionMiddleware = 'deliveryOptionMiddleware',
+  SetAddressMiddleware = 'setAddressMiddleware',
+  ShippingOptionMiddleware = 'shippingOptionMiddleware',
+  DataSourceShippingOptionMiddleware = 'dataSourceShippingOptionMiddleware',
+  AttributeBasedShippingOptionMiddleware = 'attributeBasedShippingOptionMiddleware',
+  PaymentOptionMiddleware = 'paymentOptionMiddleware',
+  InstallmentOptionMiddleware = 'installmentOptionMiddleware',
+  ShippingStepMiddleware = 'shippingStepMiddleware'
+}
+
+export const overrideMiddleware = (
+  originalMiddlewares: Middleware[],
+  overrides: Record<string, Middleware>
+): Middleware[] => {
+  return originalMiddlewares.map((middleware) => {
+    const middlewareKey = middleware.name || middleware.toString();
+    return overrides[middlewareKey] || middleware;
+  });
+};

package/utils/redirect.ts

@@ -4,8 +4,8 @@ import { headers } from 'next/headers';
 import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
 
-export const redirect = (path: string, type?: RedirectType) => {
-  const nextHeaders = headers();
+export const redirect = async (path: string, type?: RedirectType) => {
+  const nextHeaders = await headers();
   const pageUrl = new URL(
     nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
   );

package/views/error-page.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useLocalization } from '../hooks';
+import { Button, Link } from '../components';
+import { ROUTES } from 'routes';
+
+export default function PzErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  const [isServerError, setIsServerError] = useState(false);
+
+  useEffect(() => {
+    if ('isServerError' in error) {
+      setIsServerError(true);
+      return;
+    }
+
+    setIsServerError(!!error.digest);
+  }, [error]);
+
+  return isServerError ? (
+    <ServerErrorUI />
+  ) : (
+    <ClientErrorUI error={error} reset={reset} />
+  );
+}
+
+function ClientErrorUI({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const { t } = useLocalization();
+
+  const errorMessage = error?.message || 'Unknown error';
+
+  return (
+    <section className="text-center px-6 py-6 my-14 md:px-0 md:m-14">
+      <div className="text-4xl font-bold md:text-6xl text-red-500">500</div>
+      <h1 className="text-lg md:text-xl mt-4">
+        {t('common.client_error.title')}
+      </h1>
+      <p className="text-lg md:text-xl mt-2">
+        {t('common.client_error.description')}
+      </p>
+
+      <div className="mt-4 mx-auto max-w-lg">
+        <p className="text-xs text-gray-600 font-mono bg-gray-100 p-3 rounded overflow-auto text-left">
+          <span className="font-semibold">Error:</span> {errorMessage}
+        </p>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.client_error.link_text')}
+        </Link>
+        <Button onClick={reset} className="text-lg">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+function ServerErrorUI() {
+  const { t } = useLocalization();
+
+  const reloadPage = () => {
+    window.location.reload();
+  };
+
+  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>
+
+      <div className="mt-6 flex flex-col gap-4 items-center justify-center">
+        <Link href={ROUTES.HOME} className="text-lg underline">
+          {t('common.page_500.link_text')}
+        </Link>
+        <Button onClick={reloadPage} className="text-lg">
+          {t('common.try_again')}
+        </Button>
+      </div>
+    </section>
+  );
+}

package/with-pz-config.js

@@ -44,8 +44,9 @@ const defaultConfig = {
             value: 'max-age=63072000; includeSubDomains; preload'
           },
           {
-            key: 'X-Frame-Options',
-            value: 'SAMEORIGIN'
+            key: 'Content-Security-Policy',
+            value:
+              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com"
           }
         ]
       }
@@ -64,7 +65,7 @@ const defaultConfig = {
   },
   sentry: {
     hideSourceMaps: true
-  }
+  } // TODO: This section will be reviewed again in the Sentry 8 update.
 };
 
 const withPzConfig = (