@akinon/next 2.0.0-beta.5 → 2.0.0-beta.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/next
 
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
 ## 2.0.0-beta.5
 
 ### Minor Changes

package/api/auth.ts

@@ -92,6 +92,8 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
             req.headers['x-app-device']?.toString() ?? ''
           );
 
+          headers.set('x-frontend-id', req.cookies['pz-frontend-id'] || '');
+
           logger.debug('Trying to login/register', {
             formType: credentials.formType,
             userIp

package/components/accordion.tsx

@@ -22,7 +22,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
         className
       )}
     >

package/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
-import { ButtonProps } from '../types/index';
+import { ButtonProps } from '../types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Link } from './link';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/components/input.tsx

@@ -40,7 +40,7 @@ export const Input = forwardRef<
   const inputClass = twMerge(
     clsx(
       'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-none', // disable outline on focus
+      'focus-visible:outline-hidden', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'

package/components/modal.tsx

@@ -38,7 +38,7 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',

package/components/select.tsx

@@ -41,7 +41,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ref={ref}
         className={twMerge(
           clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
+            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-hidden',
             !borderless &&
               'border border-gray-200 transition-all duration-150 hover:border-primary'
           ),

package/data/client/api.ts

@@ -72,6 +72,7 @@ export const api = createApi({
     'DraftsB2b',
     'Product',
     'Checkout',
+    'PaymentOptions',
     'Favorite',
     'Addresses',
     'Profile',

package/data/client/checkout.ts

@@ -2,6 +2,7 @@ import {
   setBankAccounts,
   setCardType,
   setInstallmentOptions,
+  setPaymentOptions,
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
@@ -182,6 +183,11 @@ export const checkoutApi = api.injectEndpoints({
       }),
       providesTags: ['Checkout']
     }),
+    resetCheckoutState: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.guestLogin, {})
+      })
+    }),
     fetchCheckoutResult: build.query<{ order: Order }, string>({
       query: (token: string) =>
         buildClientRequestUrl(checkout.fetchCheckoutResult(token))
@@ -419,6 +425,12 @@ export const checkoutApi = api.injectEndpoints({
         }
       })
     }),
+    fetchPaymentOptions: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.setPaymentOption)
+      }),
+      providesTags: ['PaymentOptions']
+    }),
     setPaymentOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
         url: buildClientRequestUrl(checkout.setPaymentOption, {
@@ -467,16 +479,15 @@ export const checkoutApi = api.injectEndpoints({
       CheckoutResponse,
       {
         payment_token?: string;
+        [key: string]: any;
       }
     >({
-      query: ({ payment_token }) => ({
+      query: (requestBody) => ({
         url: buildClientRequestUrl(checkout.setWalletPaymentPage, {
           useFormData: true
         }),
         method: 'POST',
-        body: {
-          payment_token
-        }
+        body: requestBody
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -732,7 +743,27 @@ export const checkoutApi = api.injectEndpoints({
         body: {
           loyalty_amount_to_use: amount
         }
-      })
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        dispatch(setPaymentOptions([]));
+        await queryFulfilled;
+
+        const paymentOptionsData = await dispatch(
+          checkoutApi.endpoints.fetchPaymentOptions.initiate()
+        ).unwrap();
+
+        const paymentOptions = paymentOptionsData?.context_list?.find(
+          (context) => context?.page_name === 'PaymentOptionSelectionPage'
+        )?.page_context?.payment_options;
+
+        if (paymentOptions) {
+          dispatch(setPaymentOptions(paymentOptions));
+        }
+
+        dispatch(setPaymentStepBusy(false));
+      },
+      invalidatesTags: ['PaymentOptions']
     }),
     setOrderNote: build.mutation<CheckoutResponse, string>({
       query: (notes) => ({
@@ -835,6 +866,7 @@ export const {
   useSetAddressesMutation,
   useSetShippingOptionMutation,
   useSetDataSourceShippingOptionsMutation,
+  useFetchPaymentOptionsQuery,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,
@@ -859,5 +891,6 @@ export const {
   useSetLoyaltyDataMutation,
   useSetWalletSelectionPageMutation,
   useSetWalletPaymentPageMutation,
-  useSetWalletCompletePageMutation
+  useSetWalletCompletePageMutation,
+  useResetCheckoutStateQuery
 } = checkoutApi;

package/data/client/user.ts

@@ -1,7 +1,7 @@
 import { api } from './api';
 import { user } from '../urls';
 import { ForgotPasswordFormType, Order } from '../../types';
-import { buildClientRequestUrl } from '../../utils';
+import { buildClientRequestUrl, getCookie } from '../../utils';
 
 interface GetCaptchaResponse {
   siteKey: string;
@@ -64,13 +64,21 @@ const userApi = api.injectEndpoints({
       })
     }),
     forgotPassword: build.mutation<void, ForgotPasswordFormType>({
-      query: (body) => ({
-        url: buildClientRequestUrl(user.forgotPassword, {
-          contentType: 'application/json'
-        }),
-        method: 'POST',
-        body
-      })
+      query: (body) => {
+        const frontendId = getCookie('pz-frontend-id');
+        const headers = frontendId
+          ? { 'x-frontend-id': frontendId }
+          : undefined;
+
+        return {
+          url: buildClientRequestUrl(user.forgotPassword, {
+            contentType: 'application/json'
+          }),
+          method: 'POST',
+          body,
+          headers
+        };
+      }
     }),
     otpLogin: build.mutation<void, { phone: string }>({
       query: ({ phone }) => ({

package/data/server/product.ts

@@ -31,7 +31,7 @@ const getProductDataHandler = ({
       url +=
         '?' +
         Object.keys(searchParams)
-          .map((key) => `${key}=${searchParams[key]}`)
+          .map((key) => `${key}=${encodeURIComponent(searchParams[key])}`)
           .join('&');
     }
 

package/middlewares/url-redirection.ts

@@ -60,6 +60,22 @@ const withUrlRedirection =
 
         const setCookies = request.headers.getSetCookie();
 
+        if (settings.commerceRedirectionIgnoreList) {
+          const shouldIgnoreRedirect =
+            settings.commerceRedirectionIgnoreList.some((ignorePath) =>
+              redirectUrl.pathname.startsWith(
+                getUrlPathWithLocale(
+                  ignorePath,
+                  req.middlewareParams.rewrites.locale
+                )
+              )
+            );
+
+          if (shouldIgnoreRedirect) {
+            return middleware(req, event);
+          }
+        }
+
         const response = NextResponse.redirect(redirectUrl.toString(), {
           status: request.status
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.7",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.5",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.7",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "8.18.2",

package/plugins.js

@@ -14,5 +14,6 @@ module.exports = [
   'pz-multi-basket',
   'pz-saved-card',
   'pz-tabby-extension',
-  'pz-apple-pay'
+  'pz-apple-pay',
+  'pz-tamara-extension'
 ];

package/redux/middlewares/pre-order/address.ts

@@ -1,7 +1,6 @@
 import { Middleware } from '@reduxjs/toolkit';
 import { CheckoutResult, MiddlewareParams } from '../../../types';
 import { checkoutApi } from '../../../data/client/checkout';
-import { setPreOrder } from '../../../redux/reducers/checkout';
 
 export const setAddressMiddleware: Middleware = ({
   getState,
@@ -43,3 +42,7 @@ export const setAddressMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(setAddressMiddleware, 'name', {
+  value: 'setAddressMiddleware'
+});

package/redux/middlewares/pre-order/attribute-based-shipping-option.ts

@@ -38,3 +38,7 @@ export const attributeBasedShippingOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(attributeBasedShippingOptionMiddleware, 'name', {
+  value: 'attributeBasedShippingOptionMiddleware'
+});

package/redux/middlewares/pre-order/data-source-shipping-option.ts

@@ -35,3 +35,7 @@ export const dataSourceShippingOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(dataSourceShippingOptionMiddleware, 'name', {
+  value: 'dataSourceShippingOptionMiddleware'
+});

package/redux/middlewares/pre-order/delivery-option.ts

@@ -32,3 +32,7 @@ export const deliveryOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(deliveryOptionMiddleware, 'name', {
+  value: 'deliveryOptionMiddleware'
+});

package/redux/middlewares/pre-order/installment-option.ts

@@ -34,3 +34,7 @@ export const installmentOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(installmentOptionMiddleware, 'name', {
+  value: 'installmentOptionMiddleware'
+});

package/redux/middlewares/pre-order/payment-option.ts

@@ -26,3 +26,7 @@ export const paymentOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(paymentOptionMiddleware, 'name', {
+  value: 'paymentOptionMiddleware'
+});

package/redux/middlewares/pre-order/pre-order-validation.ts

@@ -18,3 +18,7 @@ export const preOrderValidationMiddleware: Middleware = () => {
     return result;
   };
 };
+
+Object.defineProperty(preOrderValidationMiddleware, 'name', {
+  value: 'preOrderValidationMiddleware'
+});

package/redux/middlewares/pre-order/redirection.ts

@@ -32,3 +32,7 @@ export const redirectionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(redirectionMiddleware, 'name', {
+  value: 'redirectionMiddleware'
+});

package/redux/middlewares/pre-order/set-pre-order.ts

@@ -16,3 +16,7 @@ export const setPreOrderMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(setPreOrderMiddleware, 'name', {
+  value: 'setPreOrderMiddleware'
+});

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

@@ -36,3 +36,7 @@ export const shippingOptionMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(shippingOptionMiddleware, 'name', {
+  value: 'shippingOptionMiddleware'
+});

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

@@ -32,3 +32,7 @@ export const shippingStepMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(shippingStepMiddleware, 'name', {
+  value: 'shippingStepMiddleware'
+});

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/index.ts

@@ -202,11 +202,13 @@ export interface Settings {
   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 {
@@ -274,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/override-middleware.ts

@@ -15,17 +15,11 @@ export enum MiddlewareNames {
 }
 
 export const overrideMiddleware = (
-  middlewares: Middleware[],
-  updates: { name: MiddlewareNames; middleware: Middleware }[]
-): void => {
-  const updatesMap = new Map(
-    updates.map(({ name, middleware }) => [name, middleware])
-  );
-
-  middlewares.forEach((mw, index) => {
-    const updatedMiddleware = updatesMap.get(mw.name as MiddlewareNames);
-    if (updatedMiddleware) {
-      middlewares[index] = updatedMiddleware;
-    }
+  originalMiddlewares: Middleware[],
+  overrides: Record<string, Middleware>
+): Middleware[] => {
+  return originalMiddlewares.map((middleware) => {
+    const middlewareKey = middleware.name || middleware.toString();
+    return overrides[middlewareKey] || middleware;
   });
 };

package/with-pz-config.js

@@ -44,8 +44,8 @@ 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"
           }
         ]
       }