@akinon/next 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @akinon/next
 
+## 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/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/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/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/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,27 @@
 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,
+  updateProduct,
+  CreateQuotation
+} 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 +35,60 @@ 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, updateProduct>({
+      query: (body) => ({
+        url: buildClientRequestUrl(b2b.basket, {
+          contentType: 'application/json'
+        }),
+        method: 'PUT',
+        body
+      }),
+      invalidatesTags: ['BasketB2b']
+    }),
+    createQuotation: build.mutation<BasketResponse, CreateQuotation>({
+      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,
+  useCreateQuotationMutation
+} = b2bApi;

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.11.0",
   "private": false,
   "license": "MIT",
   "bin": {

package/types/commerce/b2b.ts

@@ -23,6 +23,10 @@ export type Division = {
 };
 
 interface ProductB2b extends Product {
+  sku: string;
+  name: string;
+  price: string;
+  base_code: string;
   asorti: string;
   category: string;
   currency: string;
@@ -41,21 +45,69 @@ 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 CreateQuotation = {
+  name: string;
+};
+
+export type updateProduct = {
+  product_remote_id: number;
+  division: number;
+  quantity: 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;
+};