@akinon/next 1.59.0 → 1.60.0-rc.7

package/api/client.ts

@@ -4,6 +4,7 @@ import settings from 'settings';
 import logger from '../utils/log';
 import formatCookieString from '../utils/format-cookie-string';
 import cookieParser from 'set-cookie-parser';
+import { cookies } from 'next/headers';
 
 interface RouteParams {
   params: {
@@ -80,11 +81,27 @@ async function proxyRequest(...args) {
     }
   } as RequestInit;
 
+  const nextCookies = cookies();
+  const segment = nextCookies.get('pz-segment')?.value;
+  const currency = nextCookies.get('pz-external-currency')?.value;
+
+  if (segment) {
+    fetchOptions.headers['X-Segment-Id'] = segment;
+  }
+
+  if (currency) {
+    fetchOptions.headers = Object.assign({}, fetchOptions.headers, {
+      'x-currency': currency
+    });
+  }
+
   if (options.contentType) {
     fetchOptions.headers['Content-Type'] = options.contentType;
   }
 
-  const isMultipartFormData = req.headers.get('content-type')?.includes('multipart/form-data;');
+  const isMultipartFormData = req.headers
+    .get('content-type')
+    ?.includes('multipart/form-data;');
 
   if (req.method !== 'GET') {
     let body: Record<string, any> | FormData = {};
@@ -108,7 +125,11 @@ async function proxyRequest(...args) {
 
       Object.keys(body ?? {}).forEach((key) => {
         if (body[key]) {
-          formData.append(key, body[key]);
+          if (typeof body[key] === 'object' && body[key] !== null) {
+            formData.append(key, JSON.stringify(body[key]));
+          } else {
+            formData.append(key, body[key]);
+          }
         }
       });
 

package/assets/styles/index.css

@@ -0,0 +1,49 @@
+.checkout-payment-iframe-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1000;
+  background-color: white;
+}
+.checkout-payment-iframe-wrapper iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}
+.checkout-payment-iframe-wrapper .close-button {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+}
+
+.checkout-payment-redirection-iframe-wrapper {
+  width: 100%;
+  position: relative;
+}
+.checkout-payment-redirection-iframe-wrapper iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}
+.checkout-payment-redirection-iframe-wrapper .close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+}/*# sourceMappingURL=index.css.map */

package/assets/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACE,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACCF;ADCE;EACE,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACCJ;ADEE;EACE,eAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ACAJ;;ADIA;EACE,WAAA;EACA,kBAAA;ACDF;ADGE;EACE,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACDJ;ADIE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ACFJ","file":"index.css"}

package/assets/styles/index.scss

@@ -1,29 +1,53 @@
 .checkout-payment-iframe-wrapper {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border: none;
-	z-index: 1000;
-	background-color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1000;
+  background-color: white;
 
-	iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-		background-color: white;
-	}
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: white;
+  }
 
-	.close-button {
-		position: fixed;
-		top: 16px;
-		right: 16px;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1001;
-	}
-}
+  .close-button {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+  }
+}
+
+.checkout-payment-redirection-iframe-wrapper {
+  width: 100%;
+  position: relative;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: white;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+  }
+}

package/bin/pz-generate-translations.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const localesPath = path.resolve(`public/locales/`);
+
+async function generateTranslationIndex(locale_) {
+  let translations = {};
+
+  try {
+    const localeDirPath = path.resolve(`public/locales/${locale_}`);
+    const fileNames = fs.readdirSync(localeDirPath);
+
+    for await (const fileName of fileNames) {
+      if (fileName === 'index.json') {
+        continue;
+      }
+
+      const data = fs.readFileSync(
+        path.join(localeDirPath, `/${fileName}`),
+        'utf-8'
+      );
+
+      translations[fileName.substring(0, fileName.lastIndexOf('.'))] =
+        JSON.parse(data);
+    }
+
+    fs.writeFileSync(
+      path.resolve(`public/locales/${locale_}/index.json`),
+      JSON.stringify(translations)
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+const localePaths = fs.readdirSync(localesPath);
+
+localePaths.forEach((localePath) => {
+  generateTranslationIndex(localePath);
+});

package/bin/pz-prebuild.js

@@ -4,3 +4,4 @@ const runScript = require('./run-script');
 
 runScript('pz-install-theme.js');
 runScript('pz-pre-check-dist.js');
+runScript('pz-generate-translations.js');

package/bin/pz-predev.js

@@ -5,3 +5,4 @@ const runScript = require('./run-script');
 runScript('pz-install-extensions.js');
 runScript('pz-check-env.js');
 runScript('pz-install-theme.js');
+runScript('pz-generate-translations.js');

package/components/file-input.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+import { FileInputProps } from '../types/index';
+
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
+  function fileInput(props, ref) {
+    return <input type="file" {...props} ref={ref} />;
+  }
+);

package/components/index.ts

@@ -19,3 +19,4 @@ export * from './trans';
 export * from './link';
 export * from './pagination';
 export * from './live-commerce';
+export * from './file-input';

package/components/input.tsx

@@ -1,17 +1,30 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState } from 'react';
+import { forwardRef, FocusEvent, useState, Ref } from 'react';
 import { Controller } from 'react-hook-form';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+
+// @ts-ignore
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
 import { InputProps } from '../types';
 import { twMerge } from 'tailwind-merge';
 
+const PatternFormatWithRef = forwardRef(
+  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
+    return <PatternFormat {...props} getInputRef={ref} />;
+  }
+);
+PatternFormatWithRef.displayName = 'PatternFormatWithRef';
+
 export const Input = forwardRef<
   HTMLInputElement,
   InputProps &
     Pick<
-      NumberFormatProps,
-      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    >
+      PatternFormatProps,
+      'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    > & {
+      format?: string;
+      defaultValue?: string;
+      type?: string;
+    }
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -36,6 +49,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -78,14 +92,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
-              defaultValue={false}
               render={({ field }) => (
-                <NumberFormat
+                <PatternFormatWithRef
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
+                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/components/link.tsx

@@ -10,28 +10,32 @@ type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
-  NextLinkProps;
+  NextLinkProps & {
+    href: string;
+  };
 
 export const Link = ({ children, href, ...rest }: LinkProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
   const formattedHref = useMemo(() => {
-    if (typeof href !== 'string' || href.startsWith('http')) {
-      return href;
+    if (!href) {
+      return '#';
     }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+    if (typeof href === 'string' && !href.startsWith('http')) {
+      const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
     }
 
-    return href || '#';
+    return href;
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (

package/components/plugin-module.tsx

@@ -19,7 +19,8 @@ enum Plugin {
   Masterpass = 'pz-masterpass',
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
-  MultiBasket = 'pz-multi-basket'
+  MultiBasket = 'pz-multi-basket',
+  SavedCard = 'pz-saved-card'
 }
 
 export enum Component {
@@ -43,7 +44,8 @@ export enum Component {
   BasketB2B = 'BasketB2b',
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
-  MultiBasket = 'MultiBasket'
+  MultiBasket = 'MultiBasket',
+  SavedCard = 'SavedCardOption'
 }
 
 const PluginComponents = new Map([
@@ -75,7 +77,8 @@ const PluginComponents = new Map([
     Plugin.Akifast,
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
-  [Plugin.MultiBasket, [Component.MultiBasket]]
+  [Plugin.MultiBasket, [Component.MultiBasket]],
+  [Plugin.SavedCard, [Component.SavedCard]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -138,6 +141,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-akifast'}`);
             } else if (plugin === Plugin.MultiBasket) {
               promise = import(`${'@akinon/pz-multi-basket'}`);
+            } else if (plugin === Plugin.SavedCard) {
+              promise = import(`${'@akinon/pz-saved-card'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/price.tsx

@@ -1,11 +1,14 @@
 import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+
+// @ts-ignore
+import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 
 import { useLocalization } from '@akinon/next/hooks';
 import { PriceProps } from '../types';
+import Settings from 'settings';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -27,6 +30,10 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   // TODO: This is very bad practice. It broke decimalScale.
   const _value = value?.toString().replace('.', ',');
 
+  const currentCurrencyDecimalScale = Settings.localization.currencies.find(
+    (currency) => currency.code === currencyCode_
+  ).decimalScale;
+
   const currency = useMemo(
     () =>
       getCurrency({
@@ -39,14 +46,14 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={decimalScale}
+      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

package/components/pz-root.tsx

@@ -3,17 +3,29 @@ import ClientRoot from './client-root';
 import { cookies } from 'next/headers';
 import PzProviders from './pz-providers';
 import { WebVitals } from './web-vitals';
+import settings from 'settings';
 
-export default function PzRoot({
+export default async function PzRoot({
   translations,
-  children
+  children,
+  locale
 }: {
-  translations: any;
+  translations?: any;
   children: React.ReactNode;
+  locale?: string;
 }) {
   const nextCookies = cookies();
   const sessionid = nextCookies.get('osessionid')?.value;
 
+  if (!translations) {
+    const { getTranslations } =
+      settings.useOptimizedTranslations && locale
+        ? require('translations')
+        : require('../utils/server-translation');
+
+    translations = await getTranslations(locale);
+  }
+
   return (
     <PzProviders translations={translations}>
       <WebVitals />

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

@@ -17,7 +17,8 @@ const paymentTypeToView = {
   loyalty_money: 'loyalty',
   masterpass: 'credit-card',
   pay_on_delivery: 'pay-on-delivery',
-  redirection: 'redirection'
+  redirection: 'redirection',
+  saved_card: 'saved-card'
   // Add other mappings as needed
 };
 

package/data/client/api.ts

@@ -67,7 +67,7 @@ export const api = createApi({
   baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
-    'AllBaskets',
+    'MultiBasket',
     'BasketB2b',
     'DraftsB2b',
     'Product',

package/data/client/b2b.ts

@@ -12,7 +12,9 @@ import {
   SaveBasketParams,
   UpdateProductParams,
   DeleteProductParams,
-  CreateQuotationParams
+  CreateQuotationParams,
+  BasketStatusResponse,
+  ExportBasketResponse
 } from '../../types';
 
 const b2bApi = api.injectEndpoints({
@@ -89,6 +91,34 @@ const b2bApi = api.injectEndpoints({
       }),
       invalidatesTags: ['BasketB2b', 'DraftsB2b']
     }),
+    exportBasket: build.mutation<ExportBasketResponse, string>({
+      query: (queryString) => {
+        return {
+          url: buildClientRequestUrl(b2b.basketExport(queryString)),
+          method: 'GET'
+        };
+      }
+    }),
+    getBasketStatus: build.mutation<BasketStatusResponse, string>({
+      query: (cacheKey) => {
+        return {
+          url: buildClientRequestUrl(b2b.statusBasket(cacheKey)),
+          method: 'GET'
+        };
+      }
+    }),
+    uploadFile: build.mutation<void, FormData>({
+      query: (body) => {
+        return {
+          url: buildClientRequestUrl(b2b.basketImport, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body
+        };
+      },
+      invalidatesTags: ['BasketB2b']
+    })
   }),
   overrideExisting: true
 });
@@ -102,5 +132,8 @@ export const {
   useLoadBasketMutation,
   useUpdateProductMutation,
   useDeleteProductMutation,
-  useCreateQuotationMutation
+  useCreateQuotationMutation,
+  useGetBasketStatusMutation,
+  useExportBasketMutation,
+  useUploadFileMutation
 } = b2bApi;

package/data/client/basket.ts

@@ -28,7 +28,7 @@ export const basketApi = api.injectEndpoints({
       query: ({ namespace }) =>
         buildClientRequestUrl(basket.getBasketDetail(namespace)),
       transformResponse: (response: { basket: Basket }) => response.basket,
-      providesTags: ['AllBaskets']
+      providesTags: ['MultiBasket']
     }),
     getAllBaskets: build.query<Basket[], void>({
       query: () =>
@@ -36,7 +36,7 @@ export const basketApi = api.injectEndpoints({
           contentType: 'application/json'
         }),
       transformResponse: (response: { baskets: Basket[] }) => response.baskets,
-      providesTags: ['AllBaskets']
+      providesTags: ['MultiBasket']
     }),
     removeBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -46,7 +46,7 @@ export const basketApi = api.injectEndpoints({
         method: 'DELETE',
         body: { pk }
       }),
-      invalidatesTags: ['AllBaskets', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     selectMainBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -57,7 +57,7 @@ export const basketApi = api.injectEndpoints({
         body: { pk }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['AllBaskets', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
@@ -69,7 +69,8 @@ export const basketApi = api.injectEndpoints({
         }),
         method: 'PUT',
         body
-      })
+      }),
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     clearBasket: build.mutation<Basket, void>({
       query: (body) => ({