@akinon/next 1.59.0-rc.4 → 1.59.0

package/api/client.ts

@@ -4,7 +4,6 @@ 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: {
@@ -81,27 +80,11 @@ 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 = {};
@@ -125,11 +108,7 @@ async function proxyRequest(...args) {
 
       Object.keys(body ?? {}).forEach((key) => {
         if (body[key]) {
-          if (typeof body[key] === 'object' && body[key] !== null) {
-            formData.append(key, JSON.stringify(body[key]));
-          } else {
-            formData.append(key, body[key]);
-          }
+          formData.append(key, body[key]);
         }
       });
 

package/assets/styles/index.scss

@@ -1,53 +1,29 @@
 .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;
-  }
-}
-
-.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;
-  }
-}
+	.close-button {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+	}
+}

package/bin/pz-prebuild.js

@@ -4,4 +4,3 @@ 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,4 +5,3 @@ 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/index.ts

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

package/components/input.tsx

@@ -1,30 +1,17 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState, Ref } from 'react';
+import { forwardRef, FocusEvent, useState } from 'react';
 import { Controller } from 'react-hook-form';
-
-// @ts-ignore
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } 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<
-      PatternFormatProps,
-      'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    > & {
-      format?: string;
-      defaultValue?: string;
-      type?: string;
-    }
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -41,16 +28,14 @@ export const Input = forwardRef<
   const hasFloatingLabel = label && labelStyle === 'floating';
   const inputClass = twMerge(
     clsx(
-      'text-xs border px-2.5 h-10 placeholder:text-gray-600',
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
       'focus-visible:outline-none', // disable outline on focus
-      { 'pt-3': hasFloatingLabel },
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
     ),
     props.className
   );
-
   const inputProps: any = {
     id,
     ref,
@@ -68,15 +53,15 @@ export const Input = forwardRef<
     return (
       <label
         htmlFor={id}
-        className={clsx(
-          'text-xs text-gray-800',
-          {
-            'absolute left-2.5 pointer-events-none transition-all transform -translate-y-1/2':
-              hasFloatingLabel
-          },
-          { 'mb-2': !hasFloatingLabel },
-          { 'top-1/3': hasFloatingLabel && (focused || hasValue) },
-          { 'top-1/2': !(hasFloatingLabel && (focused || hasValue)) }
+        className={twMerge(
+          'text-xs text-gray-800 transition-all',
+          clsx({
+            'absolute left-2.5 pointer-events-none transform flex items-center h-full !top-0  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
+              hasFloatingLabel,
+            'mb-2': !hasFloatingLabel,
+            '-translate-y-2 bg-white inline-flex h-auto':
+              hasFloatingLabel && (focused || hasValue)
+          })
         )}
       >
         {label} {required && <span className="text-secondary">*</span>}
@@ -93,14 +78,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
+              defaultValue={false}
               render={({ field }) => (
-                <PatternFormatWithRef
+                <NumberFormat
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
-                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/components/link.tsx

@@ -10,32 +10,28 @@ type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
-  NextLinkProps & {
-    href: string;
-  };
+  NextLinkProps;
 
 export const Link = ({ children, href, ...rest }: LinkProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
   const formattedHref = useMemo(() => {
-    if (!href) {
-      return '#';
+    if (typeof href !== 'string' || href.startsWith('http')) {
+      return href;
     }
 
-    if (typeof href === 'string' && !href.startsWith('http')) {
-      const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+    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,8 +19,7 @@ enum Plugin {
   Masterpass = 'pz-masterpass',
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
-  MultiBasket = 'pz-multi-basket',
-  SavedCard = 'pz-saved-card'
+  MultiBasket = 'pz-multi-basket'
 }
 
 export enum Component {
@@ -44,8 +43,7 @@ export enum Component {
   BasketB2B = 'BasketB2b',
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
-  MultiBasket = 'MultiBasket',
-  SavedCard = 'SavedCardOption'
+  MultiBasket = 'MultiBasket'
 }
 
 const PluginComponents = new Map([
@@ -77,8 +75,7 @@ const PluginComponents = new Map([
     Plugin.Akifast,
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
-  [Plugin.MultiBasket, [Component.MultiBasket]],
-  [Plugin.SavedCard, [Component.SavedCard]]
+  [Plugin.MultiBasket, [Component.MultiBasket]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -141,8 +138,6 @@ 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,14 +1,11 @@
 import { useMemo } from 'react';
-
-// @ts-ignore
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } 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: NumericFormatProps & PriceProps) => {
+export const Price = (props: NumberFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -30,10 +27,6 @@ export const Price = (props: NumericFormatProps & 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({
@@ -46,14 +39,14 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
   );
 
   return (
-    <NumericFormat
+    <NumberFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
+      decimalScale={decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

package/components/pz-root.tsx

@@ -3,29 +3,17 @@ 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 async function PzRoot({
+export default function PzRoot({
   translations,
-  children,
-  locale
+  children
 }: {
-  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,8 +17,7 @@ const paymentTypeToView = {
   loyalty_money: 'loyalty',
   masterpass: 'credit-card',
   pay_on_delivery: 'pay-on-delivery',
-  redirection: 'redirection',
-  saved_card: 'saved-card'
+  redirection: 'redirection'
   // Add other mappings as needed
 };
 

package/data/client/api.ts

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

package/data/client/b2b.ts

@@ -12,9 +12,7 @@ import {
   SaveBasketParams,
   UpdateProductParams,
   DeleteProductParams,
-  CreateQuotationParams,
-  BasketStatusResponse,
-  ExportBasketResponse
+  CreateQuotationParams
 } from '../../types';
 
 const b2bApi = api.injectEndpoints({
@@ -91,34 +89,6 @@ 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
 });
@@ -132,8 +102,5 @@ export const {
   useLoadBasketMutation,
   useUpdateProductMutation,
   useDeleteProductMutation,
-  useCreateQuotationMutation,
-  useGetBasketStatusMutation,
-  useExportBasketMutation,
-  useUploadFileMutation
+  useCreateQuotationMutation
 } = 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: ['MultiBasket']
+      providesTags: ['AllBaskets']
     }),
     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: ['MultiBasket']
+      providesTags: ['AllBaskets']
     }),
     removeBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -46,7 +46,7 @@ export const basketApi = api.injectEndpoints({
         method: 'DELETE',
         body: { pk }
       }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['AllBaskets', '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: ['MultiBasket', 'Basket']
+      invalidatesTags: ['AllBaskets', 'Basket']
     }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
@@ -69,8 +69,7 @@ export const basketApi = api.injectEndpoints({
         }),
         method: 'PUT',
         body
-      }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      })
     }),
     clearBasket: build.mutation<Basket, void>({
       query: (body) => ({

package/data/client/checkout.ts

@@ -57,7 +57,6 @@ export interface CompleteCreditCardParams {
   card_month: string;
   card_year: string;
   use_three_d?: boolean;
-  save?: boolean;
 }
 
 interface GetContractResponse {
@@ -229,8 +228,7 @@ export const checkoutApi = api.injectEndpoints({
         card_number,
         card_month,
         card_year,
-        use_three_d = true,
-        save = undefined
+        use_three_d = true
       }) => {
         const paymentOption =
           store.getState().checkout?.preOrder?.payment_option;
@@ -244,26 +242,20 @@ export const checkoutApi = api.injectEndpoints({
           };
         }
 
-        const body: Record<string, string> = {
-          agreement: '1',
-          use_three_d: use_three_d ? '1' : '0',
-          card_cvv,
-          card_holder,
-          card_month,
-          card_number,
-          card_year
-        };
-
-        if (save !== undefined) {
-          body.save = save ? '1' : '0';
-        }
-
         return {
           url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
             useFormData: true
           }),
           method: 'POST',
-          body
+          body: {
+            agreement: '1',
+            use_three_d: use_three_d ? '1' : '0',
+            card_cvv,
+            card_holder,
+            card_month,
+            card_number,
+            card_year
+          }
         };
       },
       async onQueryStarted(args, { dispatch, queryFulfilled }) {
@@ -388,22 +380,6 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setShippingStepBusy(false));
       }
     }),
-    setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
-      query: (pks) => ({
-        url: buildClientRequestUrl(checkout.setDataSourceShippingOption, {
-          useFormData: true
-        }),
-        method: 'POST',
-        body: {
-          data_source_shipping_options: JSON.stringify(pks)
-        }
-      }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
-        dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
-      }
-    }),
     setRetailStore: build.mutation<CheckoutResponse, SetRetailStoreParams>({
       query: ({ retailStorePk, billingAddressPk }) => ({
         url: buildClientRequestUrl(
@@ -705,25 +681,6 @@ export const checkoutApi = api.injectEndpoints({
         };
       }
     }),
-    setAttributeBasedShippingOptions: build.mutation<
-      CheckoutResponse,
-      Record<string, number>
-    >({
-      query: (options) => ({
-        url: buildClientRequestUrl(checkout.setAttributeBasedShippingOption, {
-          useFormData: true
-        }),
-        method: 'POST',
-        body: {
-          attribute_based_shipping_options: JSON.stringify(options)
-        }
-      }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
-        dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
-      }
-    }),
     setOrderSelectionPage: build.mutation<
       CheckoutResponse,
       { extra_field: ExtraField }
@@ -755,7 +712,6 @@ export const {
   useSetDeliveryOptionMutation,
   useSetAddressesMutation,
   useSetShippingOptionMutation,
-  useSetDataSourceShippingOptionsMutation,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,
@@ -774,6 +730,5 @@ export const {
   usePayWithLoyaltyBalanceMutation,
   useSetOrderNoteMutation,
   useSetDeliveryBagsMutation,
-  useSetAttributeBasedShippingOptionsMutation,
   useSetOrderSelectionPageMutation
 } = checkoutApi;

package/data/client/user.ts

@@ -22,12 +22,11 @@ const userApi = api.injectEndpoints({
     getCaptcha: build.query<GetCaptchaResponse, void>({
       query: () => buildClientRequestUrl(user.captcha),
       transformResponse: (response: { html: string }) => {
-        const siteKey = response.html.match(/data-sitekey="([^"]+)"/i)[1];
-
+        const siteKeyMatch = response.html.match(/sitekey=["|'][^"']+/gi);
         const csrfTokenMatch = response.html.match(
           /name=['|"]csrfmiddlewaretoken['|"] value=['|"][^'"]+/gi
         );
-
+        const siteKey = siteKeyMatch?.[0].replace(/sitekey=["|']/, '') || '';
         const csrfToken =
           csrfTokenMatch?.[0].replace(
             /name=['|"]csrfmiddlewaretoken['|"] value=['|"]/gi,