@akinon/next 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @akinon/next
 
+## 1.12.0
+
+### Minor Changes
+
+- ZERO-2314: Add endpoints for B2B Basket
+- ZERO-2340: Add LazyComponent
+- ZERO-2366: Add email parameter to addStockAlert query
+- ZERO-2361: Add BKM Express to plugin module system
+- ZERO-2365: Add dependency control script
+- ZERO-2341: Add ReactPortal component
+
+## 1.11.0
+
+### Minor Changes
+
+- ZERO-2355: Add LoaderSpinner component
+- ZERO-2305: Add endpoints for B2B Basket
+- ZERO-2319: Show 3D & redirection payment errors
+- ZERO-2353: Add Icon component
+- ZERO-2357: Add Radio component
+- ZERO-2307: Prevent multiple mutation calls
+- ZERO-2240: Add endpoints and types for dynamic forms
+
 ## 1.10.0
 
 ### Minor Changes

package/bin/pz-check-dependencies.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const semver = require('semver');
+
+function checkDir() {
+  let currentDir = __dirname;
+
+  while (currentDir !== path.resolve(currentDir, '..')) {
+    if (
+      fs.existsSync(
+        path.join(currentDir, 'node_modules/@akinon/next/package.json')
+      )
+    ) {
+      return currentDir;
+    }
+    currentDir = path.resolve(currentDir, '..');
+  }
+
+  return path.resolve(__dirname, '../../../../');
+}
+
+const BASE_DIR = checkDir();
+
+try {
+  const akinonNextPackagePath = fs.existsSync(
+    path.join(BASE_DIR, 'packages/akinon-next/package.json')
+  )
+    ? path.join(BASE_DIR, 'packages/akinon-next/package.json')
+    : path.join(BASE_DIR, 'node_modules/@akinon/next/package.json');
+
+  let akinonNextPackage = JSON.parse(
+    fs.readFileSync(akinonNextPackagePath, 'utf8')
+  );
+
+  const projectZeroPwaPackagePath = path.join(BASE_DIR, 'package.json');
+
+  const projectZeroPwaPackage = JSON.parse(
+    fs.readFileSync(projectZeroPwaPackagePath, 'utf8')
+  );
+
+  const { peerDependencies } = akinonNextPackage;
+
+  let hasErrors = false;
+
+  let errorMessages = [];
+
+  for (const dependency in peerDependencies) {
+    const requiredVersion = peerDependencies[dependency];
+
+    const installedVersion =
+      projectZeroPwaPackage.dependencies[dependency] ||
+      projectZeroPwaPackage.devDependencies[dependency];
+
+    if (!installedVersion) {
+      errorMessages.push(
+        `Dependency ${dependency} is missing in projectzeropwa.`
+      );
+      hasErrors = true;
+    } else {
+      const requiredSemver = semver.coerce(requiredVersion);
+
+      const installedSemver = semver.coerce(installedVersion);
+
+      if (!requiredSemver || !installedSemver) {
+        errorMessages.push(
+          `Invalid semver for ${dependency}: required ${requiredVersion}, found ${installedVersion}`
+        );
+        hasErrors = true;
+      } else if (
+        requiredSemver.major !== installedSemver.major ||
+        requiredSemver.minor !== installedSemver.minor
+      ) {
+        errorMessages.push(
+          `Version mismatch for ${dependency}: expected ${requiredVersion} or higher but found ${installedVersion}`
+        );
+        hasErrors = true;
+      }
+    }
+  }
+
+  if (hasErrors) {
+    console.error(
+      '\x1b[31mDependency errors found:\n' +
+        errorMessages.join('\n') +
+        '\x1b[0m'
+    );
+    process.exit(1);
+  }
+
+  console.log(
+    'All dependencies are installed and compatible in projectzeropwa.'
+  );
+} catch (error) {
+  console.error('\x1b[31mError:', error.message + '\x1b[0m');
+  process.exit(1);
+}

package/bin/pz-install-plugins.js

@@ -15,7 +15,7 @@ try {
 let installCmd = [];
 
 availablePlugins
-  .filter((p) => plugins.includes(p))
+  .filter((p) => plugins?.includes(p))
   .forEach((name) => {
     installCmd.push(`git+https://bitbucket.org/akinonteam/${name}`);
   });

package/bin/pz-install-theme.js

@@ -2,15 +2,31 @@
 
 const fs = require('fs');
 const path = require('path');
+const spawn = require('cross-spawn');
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+
+  if (insideNodeModules) {
+    return path.resolve(__dirname, '../../../../');
+  } else {
+    return path.resolve(__dirname, '../../../apps/projectzeropwa');
+  }
+}
+
+const BASE_DIR = findBaseDir();
 
-const BASE_DIR =
-  path.resolve(__dirname, '../../../apps/projectzeropwa') || process.cwd();
 const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
 
-const theme = require(getFullPath('src/theme.js'));
+let theme;
+try {
+  theme = require(getFullPath('src/theme.js'));
+} catch (error) {
+  console.error('Error loading theme.js:', error.message);
+  process.exit(1);
+}
 
 try {
-  const spawn = require('cross-spawn');
   const tsConfigPath = getFullPath('tsconfig.json');
 
   if (!fs.existsSync(tsConfigPath)) {
@@ -31,11 +47,12 @@ try {
 
   fs.writeFileSync(tsConfigPath, newContent);
 
-  if (fs.existsSync(getFullPath('../../turbo.json'))) {
+  if (fs.existsSync(getFullPath('turbo.json'))) {
     spawn.sync('turbo', ['clean'], {
       stdio: 'inherit'
     });
   }
 } catch (error) {
-  console.error('Error:', error.message);
+  console.error('Error modifying tsconfig.json:', error.message);
+  process.exit(1);
 }

package/bin/pz-postinstall.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
+const runScript = require('./run-script');
 
-spawn.sync('pz-install-plugins', [], { stdio: 'inherit' });
+runScript('pz-check-dependencies.js');
+runScript('pz-install-plugins.js');

package/bin/pz-prebuild.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
-
-spawn.sync('pz-install-theme', [], { stdio: 'inherit' });
+const runScript = require('./run-script');
+runScript('pz-install-theme.js');

package/bin/pz-predev.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
 
-const spawn = require('cross-spawn');
-
-spawn.sync('pz-install-theme', [], { stdio: 'inherit' });
+const runScript = require('./run-script');
+runScript('pz-install-theme.js');

package/bin/run-script.js

@@ -0,0 +1,44 @@
+const spawn = require('cross-spawn');
+const path = require('path');
+const fs = require('fs');
+
+function runScript(scriptName) {
+  let currentPath;
+
+  const monorepoPath = path.join(
+    process.cwd(),
+    '../../packages/akinon-next/bin',
+    scriptName
+  );
+
+  const standardRepoPath = path.join(
+    process.cwd(),
+    'node_modules/@akinon/next/bin',
+    scriptName
+  );
+
+  if (fs.existsSync(monorepoPath)) {
+    currentPath = monorepoPath;
+  } else if (fs.existsSync(standardRepoPath)) {
+    currentPath = standardRepoPath;
+  } else {
+    console.error(`Unable to find the ${scriptName} file`);
+    return;
+  }
+
+  const result = spawn.sync('node', [currentPath], { stdio: 'inherit' });
+
+  if (result.error) {
+    console.error(`Error executing ${scriptName}:`, result.error);
+    process.exit(1);
+  }
+
+  if (result.status !== 0) {
+    console.error(
+      `Script ${scriptName} failed with exit code ${result.status}`
+    );
+    process.exit(result.status);
+  }
+}
+
+module.exports = runScript;

package/components/icon.tsx

@@ -0,0 +1,18 @@
+import { IconProps } from '../types/index';
+import clsx from 'clsx';
+
+export const Icon = (props: IconProps) => {
+  const { name, size, className, ...rest } = props;
+
+  return (
+    <i
+      className={clsx(`flex pz-icon-${name}`, className)}
+      {...rest}
+      style={
+        size && {
+          fontSize: `${size}px`
+        }
+      }
+    />
+  );
+};

package/components/index.ts

@@ -0,0 +1 @@
+export * from './react-portal';

package/components/lazy-component.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+interface LazyComponentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function LazyComponent({
+  children,
+  className
+}: LazyComponentProps) {
+  const [isInView, setIsInView] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0
+  });
+
+  useEffect(() => {
+    if (inView) {
+      setIsInView(true);
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref} className={clsx(className)}>
+      {isInView ? <>{children}</> : null}
+    </div>
+  );
+}

package/components/loader-spinner.tsx

@@ -0,0 +1,23 @@
+import { twMerge } from 'tailwind-merge';
+
+type LoaderSpinnerProps = {
+  className?: string;
+  borderType?: 'solid' | 'dotted' | 'dashed';
+};
+
+export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
+  borderType = 'solid',
+  className
+}) => {
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <div
+        className={twMerge(
+          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
+          `border-${borderType}`,
+          className
+        )}
+      />
+    </div>
+  );
+};

package/components/plugin-module.tsx

@@ -10,7 +10,8 @@ enum Plugin {
   PayOnDelivery = 'pz-pay-on-delivery',
   CheckoutGiftPack = 'pz-checkout-gift-pack',
   GPay = 'pz-gpay',
-  Otp = 'pz-otp'
+  Otp = 'pz-otp',
+  BKMExpress = 'pz-bkm'
 }
 
 export enum Component {
@@ -20,7 +21,8 @@ export enum Component {
   PayOnDelivery = 'PayOnDelivery',
   CheckoutGiftPack = 'CheckoutGiftPack',
   GPay = 'GPayOption',
-  Otp = 'Otp'
+  Otp = 'Otp',
+  BKMExpress = 'BKMOption'
 }
 
 const PluginComponents = new Map([
@@ -30,7 +32,8 @@ const PluginComponents = new Map([
   [Plugin.PayOnDelivery, [Component.PayOnDelivery]],
   [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
   [Plugin.GPay, [Component.GPay]],
-  [Plugin.Otp, [Component.Otp]]
+  [Plugin.Otp, [Component.Otp]],
+  [Plugin.BKMExpress, [Component.BKMExpress]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -75,6 +78,8 @@ export default function PluginModule({
               promise = import(`${'pz-gpay'}`);
             } else if (plugin === Plugin.Otp) {
               promise = import(`${'pz-otp'}`);
+            } else if (plugin === Plugin.BKMExpress) {
+              promise = import(`${'pz-bkm'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/radio.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import { RadioProps } from '../types/index';
+import { twMerge } from 'tailwind-merge';
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <label className={twMerge('flex items-center text-xs', props.className)}>
+      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
+      {children && <span className="text-xs ml-2">{children}</span>}
+    </label>
+  );
+});
+
+Radio.displayName = 'Radio';
+
+export { Radio };

package/components/react-portal.tsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}
+
+type Props = {
+  children: React.ReactNode;
+  wrapperId: string;
+};
+
+export const ReactPortal: React.FC<Props> = ({
+  children,
+  wrapperId = 'react-portal-wrapper'
+}) => {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  useEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let modalCreated = false;
+
+    if (!element) {
+      modalCreated = true;
+      element = createWrapperAndAppendToBody(wrapperId);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      // delete the programatically created element if it was created
+      if (modalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  if (wrapperElement === null) return null;
+
+  return createPortal(children, wrapperElement);
+};

package/components/selected-payment-option-view.tsx

@@ -54,6 +54,9 @@ export default function SelectedPaymentOptionView() {
             // else if (payment_option.payment_type === 'gpay') {
             //   promise = import(`views/checkout/steps/payment/options/gpay`);
             // }
+            // else if (payment_option.payment_type === 'bkm_express') {
+            //   promise = import(`views/checkout/steps/payment/options/bkm`);
+            // }
           } catch (error) {}
 
           return promise

package/data/client/api.ts

@@ -1,10 +1,42 @@
-import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react';
+import {
+  createApi,
+  fetchBaseQuery,
+  retry,
+  BaseQueryFn,
+  FetchBaseQueryError,
+  FetchBaseQueryMeta,
+  FetchArgs,
+  BaseQueryApi
+} from '@reduxjs/toolkit/query/react';
 import settings from 'settings';
 import { getCookie } from '../../utils';
+import { RootState } from '@theme/redux/store';
 
-export const api = createApi({
-  reducerPath: 'api',
-  baseQuery: retry(fetchBaseQuery({
+interface CustomBaseQueryApi extends BaseQueryApi {
+  getState: () => RootState;
+}
+
+const customBaseQuery: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError,
+  {},
+  FetchBaseQueryMeta
+> = async (args, api: CustomBaseQueryApi, extraOptions) => {
+  const mutations = Object.entries(api.getState()?.api?.mutations ?? {}).map(
+    (x) => x[1]
+  );
+
+  if (
+    api.type === 'mutation' &&
+    mutations.filter(
+      (m) => m.status === 'pending' && m.endpointName === api.endpoint
+    ).length > 1
+  ) {
+    api.abort('Mutation already in progress.');
+  }
+
+  const baseQuery = fetchBaseQuery({
     prepareHeaders: async (headers) => {
       const csrfCookie = getCookie('csrftoken');
       const activeLocale = getCookie('pz-locale');
@@ -19,22 +51,32 @@ export const api = createApi({
       if (csrfCookie) {
         headers.set('x-csrftoken', `${csrfCookie}`);
       }
-
       return headers;
     },
     credentials: 'include'
-  }), {
-    maxRetries: 3
-  }),
+  });
+  try {
+    const result = await baseQuery(args, api, extraOptions);
+    return result;
+  } catch (error) {
+    return { error };
+  }
+};
+
+export const api = createApi({
+  reducerPath: 'api',
+  baseQuery: retry(customBaseQuery, { maxRetries: 3 }),
   tagTypes: [
     'Basket',
+    'BasketB2b',
+    'DraftsB2b',
     'Product',
     'Checkout',
     'Favorite',
     'Addresses',
     'Profile'
   ],
-  endpoints: () => ({}) // it must be a function to be able to use `injectEndpoints`
+  endpoints: () => ({})
 });
 
 export const {

package/data/client/b2b.ts

@@ -1,17 +1,28 @@
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
 import { b2b } from '../urls';
-import { Basket, BasketParams, BasketResponse, Division, GetResponse } from '../../types';
+import {
+  Basket,
+  BasketParams,
+  BasketResponse,
+  Division,
+  DraftResponse,
+  GetResponse,
+  LoadBasketParams,
+  SaveBasketParams,
+  UpdateProductParams,
+  DeleteProductParams,
+  CreateQuotationParams
+} from '../../types';
 
 const b2bApi = api.injectEndpoints({
   endpoints: (build) => ({
-    getBasket: build.query<Basket, void>({
+    getBasketB2b: build.query<BasketResponse, void>({
       query: () =>
         buildClientRequestUrl(b2b.basket, {
           contentType: 'application/json'
         }),
-      transformResponse: (response: { basket: Basket }) => response.basket,
-      providesTags: ['Basket']
+      providesTags: ['BasketB2b']
     }),
     getDivisions: build.query<GetResponse<Division>, void>({
       query: () => buildClientRequestUrl(b2b.divisions)
@@ -25,8 +36,71 @@ const b2bApi = api.injectEndpoints({
         body
       })
     }),
+    saveBasket: build.mutation<BasketResponse, SaveBasketParams>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.saveBasket, {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body
+      }),
+      invalidatesTags: ['BasketB2b', 'DraftsB2b']
+    }),
+    getDrafts: build.query<DraftResponse[], void>({
+      query: () => buildClientRequestUrl(b2b.draftBaskets),
+      providesTags: ['DraftsB2b']
+    }),
+    loadBasket: build.mutation<string, number>({
+      query: (id) => ({
+        url: buildClientRequestUrl(b2b.loadBasket(id), {
+          contentType: 'application/json'
+        }),
+        method: 'POST'
+      }),
+      invalidatesTags: ['BasketB2b']
+    }),
+    updateProduct: build.mutation<Basket, UpdateProductParams>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.basket, {
+          contentType: 'application/json'
+        }),
+        method: 'PUT',
+        body
+      }),
+      invalidatesTags: ['BasketB2b']
+    }),
+    deleteProduct: build.mutation<Basket, DeleteProductParams>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.basket, {
+          contentType: 'application/json'
+        }),
+        method: 'DELETE',
+        body
+      }),
+      invalidatesTags: ['BasketB2b']
+    }),
+    createQuotation: build.mutation<BasketResponse, CreateQuotationParams>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.myQuotations, {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body
+      }),
+      invalidatesTags: ['BasketB2b', 'DraftsB2b']
+    }),
   }),
   overrideExisting: true
 });
 
-export const { useGetBasketQuery, useLazyGetDivisionsQuery, useAddToBasketMutation } = b2bApi;
+export const {
+  useGetBasketB2bQuery,
+  useLazyGetDivisionsQuery,
+  useAddToBasketMutation,
+  useSaveBasketMutation,
+  useGetDraftsQuery,
+  useLoadBasketMutation,
+  useUpdateProductMutation,
+  useDeleteProductMutation,
+  useCreateQuotationMutation
+} = b2bApi;

package/data/client/wishlist.ts

@@ -1,7 +1,7 @@
 import { FavoriteItem } from '../../types';
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
-import { URLS, wishlist } from '../urls';
+import { wishlist } from '../urls';
 
 export type AddProductRequest = {
   product: number;
@@ -28,6 +28,16 @@ interface RemoteFavoriteResponse {
   success: boolean;
 }
 
+interface AddStockAlertRequest {
+  productPk: number;
+  email?: string;
+}
+
+interface AddStockAlertResponse {
+  pk: number;
+  product: number;
+}
+
 export const wishlistApi = api.injectEndpoints({
   endpoints: (build) => ({
     getFavorites: build.query<GetFavoritesResponse, GetFavoritesParams>({
@@ -54,16 +64,15 @@ export const wishlistApi = api.injectEndpoints({
       }),
       invalidatesTags: ['Favorite']
     }),
-    // TODO: Add stock alert response type
-    addStockAlert: build.mutation<any, number>({
-      query: (productPk: number) => ({
+    addStockAlert: build.mutation<AddStockAlertResponse, AddStockAlertRequest>({
+      query: ({ productPk, email }) => ({
         url: buildClientRequestUrl(wishlist.addStockAlert, {
-          useFormData: true,
-          contentType: 'application/json'
+          useFormData: true
         }),
         method: 'POST',
         body: {
-          product: productPk
+          product: productPk,
+          ...(email ? { email } : {})
         }
       })
     })

package/data/server/form.ts

@@ -0,0 +1,22 @@
+import { Cache, CacheKey } from "../../lib/cache";
+import { FormType } from "../../types/commerce/form";
+
+import appFetch from "../../utils/app-fetch";
+import { form } from "../urls";
+
+const getFormDataHandler = (pk: number) => {
+  return async function () {
+    const data = await appFetch<FormType>(form.getForm(pk), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      }
+    });
+
+    return data;
+  };
+};
+
+export const getFormData = ({ pk }: { pk: number }) => {
+  return Cache.wrap(CacheKey.Form(pk), getFormDataHandler(pk));
+};

package/data/server/index.ts

@@ -7,3 +7,4 @@ export * from './widget';
 export * from './seo';
 export * from './menu';
 export * from './landingpage';
+export * from './form';

package/data/urls.ts

@@ -169,6 +169,10 @@ export const widgets = {
   getWidget: (slug: string) => `/widgets/${slug}/`
 };
 
+export const form = {
+  getForm: (pk: number) => `/forms/${pk}/generate/`,
+};
+
 const URLS = {
   account,
   address,
@@ -180,7 +184,8 @@ const URLS = {
   product,
   wishlist,
   user,
-  widgets
+  widgets,
+  form
 };
 
 const UrlProxyHandler = {

package/lib/cache.ts

@@ -51,7 +51,8 @@ export const CacheKey = {
   Menu: (depth: number, parent?: string) =>
     `menu_${depth}${parent ? `_${parent}` : ''}`,
   Seo: (url: string) => `seo_${url}`,
-  RootSeo: 'root_seo'
+  RootSeo: 'root_seo',
+  Form: (pk: number) => `form_${pk}`
 };
 
 export class Cache {

package/middlewares/redirection-payment.ts

@@ -4,7 +4,6 @@ import Settings from 'settings';
 import logger from '../utils/log';
 import { PzNextRequest } from '.';
 import { getUrlPathWithLocale } from '../utils/localization';
-import { urlLocaleMatcherRegex } from '../utils';
 
 const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
   if (stream) {
@@ -33,10 +32,6 @@ const withRedirectionPayment =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
-    const pathnameWithoutLocale = url.pathname.replace(
-      urlLocaleMatcherRegex,
-      ''
-    );
     const searchParams = new URLSearchParams(url.search);
     const ip = req.headers.get('x-forwarded-for') ?? '';
 
@@ -70,12 +65,34 @@ const withRedirectionPayment =
 
       const response = await request.json();
 
-      const { context_list: contextList } = response;
+      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 redirection payment', {
+          middleware: 'redirection-payment',
+          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: 'redirection-payment',
         contextList,

package/middlewares/three-d-redirection.ts

@@ -64,12 +64,34 @@ const withThreeDRedirection =
 
       const response = await request.json();
 
-      const { context_list: contextList } = response;
+      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 3D payment', {
+          middleware: 'three-d-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: 'three-d-redirection',
         contextList,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -18,7 +18,8 @@
     "cross-spawn": "7.0.3",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
-    "redis": "4.5.1"
+    "redis": "4.5.1",
+    "semver": "7.5.4"
   },
   "devDependencies": {
     "@types/react-redux": "7.1.30"

package/types/commerce/b2b.ts

@@ -22,7 +22,11 @@ export type Division = {
   extra_data: object;
 };
 
-interface ProductB2b extends Product {
+export interface ProductB2b extends Product {
+  sku: string;
+  name: string;
+  price: string;
+  base_code: string;
   asorti: string;
   category: string;
   currency: string;
@@ -41,21 +45,73 @@ export type BasketResponse = {
       total_amount: string;
       price: string;
       quantity: number;
-      divisions: Division[];
+      divisions: BasketItemDivision[];
       product: ProductB2b;
+      product_remote_id: number;
     }
   ];
 };
 
+export interface QuotationErrorType {
+  data: {
+    non_field_errors: string[];
+  };
+}
+
+export interface BasketItemDivision {
+  id: number;
+  name: string;
+  erp_code: string;
+  quantity: number;
+}
+
+export type BasketItemType = {
+  total_amount: string;
+  price: string;
+  quantity: number;
+  divisions: BasketItemDivision[];
+  product: ProductB2b;
+  product_remote_id: number;
+}
+
 export type BasketParams = {
   division: string;
   product_remote_id: string;
   quantity: string;
 };
 
+export type SaveBasketParams = {
+  name: string;
+};
+
+export type CreateQuotationParams = {
+  name: string;
+};
+
+export type UpdateProductParams = {
+  product_remote_id: number;
+  division: number;
+  quantity: number
+};
+
+export type DeleteProductParams = {
+  product_remote_id: number;
+};
+
+export type LoadBasketParams = {
+  id: number;
+};
+
 export interface GetResponse<T> {
   count: number;
   next: null;
   previous: null;
   results: T[];
 }
+
+export type DraftResponse = {
+  id: number;
+  name: string;
+  total_amount: number;
+  total_quantity: number;
+};

package/types/commerce/form.ts

@@ -0,0 +1,66 @@
+import { InputHTMLAttributes, HTMLAttributes } from 'react';
+
+export type Validator = {
+  regex: {
+    regex: string;
+    message: string;
+    inverse_match: boolean;
+  };
+  max_length: number;
+  required: boolean;
+  min_length: number;
+  max_value: number;
+  min_value: number;
+};
+
+export type FormField = {
+  chosen: boolean;
+  input_type: string;
+  id: string;
+  key: string;
+  validators: Validator;
+  label: string;
+  order: number;
+  class?: string;
+  attributes?: object | null;
+  labelClass?: string;
+  wrapperClass?: string;
+  placeholder?: string;
+  choices?: string[];
+  [key: string]: any;
+};
+
+export type Schema = FormField[];
+
+export type FormType = {
+  pk: number;
+  schema: Schema;
+  template: string;
+  is_active: boolean;
+  url: string;
+  name: string;
+  pretty_url: any;
+  created_date: string;
+  modified_date: string;
+  formprettyurl_set: any[];
+  translations: null | any;
+};
+
+export type FieldPropertiesType = {
+  key?: string;
+  className?: string | Record<string, boolean>;
+  attributes?: InputHTMLAttributes<object> | HTMLAttributes<object>;
+  labelClassName?: string;
+  wrapperClassName?: string;
+};
+
+export type AllFieldClassesType = {
+  className?: string | undefined;
+  labelClassName?: string | undefined;
+  wrapperClassName?: string | undefined;
+};
+
+export type FormPropertiesType = {
+  actionUrl: string;
+  className?: string;
+};

package/types/commerce/index.ts

@@ -9,3 +9,4 @@ export * from './widget';
 export * from './flatpage';
 export * from './order';
 export * from './b2b';
+export * from './form';

package/types/index.ts

@@ -222,7 +222,15 @@ export interface RootLayoutProps<
   };
 }
 
+export type RadioProps = React.HTMLProps<HTMLInputElement>;
+
 export interface AuthError {
   type: string;
   data?: any;
 }
+
+export interface IconProps extends React.ComponentPropsWithRef<'i'> {
+  name: string;
+  size?: number;
+  className?: string;
+}

package/utils/index.ts

@@ -32,7 +32,7 @@ export function setCookie(name: string, val: string) {
 export function removeCookie(name: string) {
   const date = 'Thu, 01 Jan 1970 00:00:00 UTC';
 
-  document.cookie = name + '=' + '; expires=' + date + '; path=/';
+  document.cookie = `${name}=; expires=${date}; path=/;`;
 }
 
 /**
@@ -137,3 +137,14 @@ export const urlLocaleMatcherRegex = new RegExp(
     .map((l) => l.value)
     .join('|')})`
 );
+
+export const getPosError = () => {
+  const error = JSON.parse(getCookie('pz-pos-error') ?? '{}');
+
+  // delete 'pz-pos-error' cookie when refreshing or closing page
+  window.addEventListener('beforeunload', () => {
+    removeCookie('pz-pos-error');
+  });
+
+  return error;
+};