@akinon/next 1.66.0 → 1.67.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @akinon/next
 
+## 1.67.0
+
+### Minor Changes
+
+- bc2b411: ZERO-2825: Add attribute-based shipping options to checkout page
+- 3d2212a: ZERO-2745: Add multi basket support
+- 8f47cca: ZERO-2829: fix and add nested JSON support for useFormData in api/client route
+- 9e25a64: ZERO-2835: Update category page layout with breadcrumb
+
 ## 1.66.0
 
 ### Minor Changes

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/data/client/api.ts

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

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) => ({

package/data/client/checkout.ts

@@ -57,6 +57,7 @@ export interface CompleteCreditCardParams {
   card_month: string;
   card_year: string;
   use_three_d?: boolean;
+  save?: boolean;
 }
 
 interface GetContractResponse {
@@ -228,7 +229,8 @@ export const checkoutApi = api.injectEndpoints({
         card_number,
         card_month,
         card_year,
-        use_three_d = true
+        use_three_d = true,
+        save = undefined
       }) => {
         const paymentOption =
           store.getState().checkout?.preOrder?.payment_option;
@@ -242,20 +244,26 @@ 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: {
-            agreement: '1',
-            use_three_d: use_three_d ? '1' : '0',
-            card_cvv,
-            card_holder,
-            card_month,
-            card_number,
-            card_year
-          }
+          body
         };
       },
       async onQueryStarted(args, { dispatch, queryFulfilled }) {
@@ -697,6 +705,25 @@ 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 }
@@ -747,5 +774,6 @@ export const {
   usePayWithLoyaltyBalanceMutation,
   useSetOrderNoteMutation,
   useSetDeliveryBagsMutation,
+  useSetAttributeBasedShippingOptionsMutation,
   useSetOrderSelectionPageMutation
 } = checkoutApi;

package/data/urls.ts

@@ -17,16 +17,22 @@ export const account = {
     page,
     limit,
     createdDate,
-    endDate
+    endDate,
+    shipping_option_slug
   }: {
     page?: number;
     limit?: number;
     createdDate?: string;
     endDate?: string;
+    shipping_option_slug?: string;
   }) =>
-    `/users/orders/?page=${page || 1}&limit=${limit || 12} ${
+    `/users/orders/?page=${page || 1}&limit=${limit || 12}${
       createdDate ? `&created_date__gte=${createdDate}` : ''
-    } ${endDate ? `&created_date__lte=${endDate}` : ''}`,
+    }${endDate ? `&created_date__lte=${endDate}` : ''}${
+      shipping_option_slug
+        ? `&shipping_option_slug=${shipping_option_slug}`
+        : ''
+    }`,
   getQuotations: (page?: number, status?: string, limit?: number) =>
     `/b2b/my-quotations/?page=${page || 1}` +
     (status ? `&status=${status}` : '') +
@@ -111,6 +117,8 @@ export const checkout = {
   loyaltyMoneyUsage: '/orders/checkout/?page=LoyaltyMoneyUsagePage',
   setOrderNote: '/orders/checkout/?page=OrderNotePage',
   couponSelectionPage: '/orders/checkout/?page=CouponSelectionPage',
+  setAttributeBasedShippingOption:
+    '/orders/checkout/?page=AttributeBasedShippingOptionSelectionPage',
   deliveryBagsPage: '/orders/checkout/?page=DeliveryBagsPage',
   setOrderSelectionPage: '/orders/checkout/?page=OrderSelectionPage'
 };

package/package.json

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

package/redux/middlewares/checkout.ts

@@ -3,9 +3,12 @@
 import { Middleware } from '@reduxjs/toolkit';
 import {
   setAddressList,
+  setAttributeBasedShippingOptions,
   setBankAccounts,
   setCanGuestPurchase,
   setCardType,
+  setCreditPaymentOptions,
+  setDataSourceShippingOptions,
   setDeliveryOptions,
   setErrors,
   setHasGiftBox,
@@ -16,9 +19,7 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
-  setDataSourceShippingOptions,
-  setShippingStepCompleted,
-  setCreditPaymentOptions
+  setShippingStepCompleted
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
@@ -77,7 +78,8 @@ export const preOrderMiddleware: Middleware = ({
       shippingOptions,
       dataSourceShippingOptions,
       paymentOptions,
-      installmentOptions
+      installmentOptions,
+      attributeBasedShippingOptions
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
@@ -145,11 +147,33 @@ export const preOrderMiddleware: Middleware = ({
       );
     }
 
+    if (
+      Object.keys(attributeBasedShippingOptions).length > 0 &&
+      !preOrder.attribute_based_shipping_options
+    ) {
+      const initialSelectedOptions: Record<string, number> = Object.fromEntries(
+        Object.entries(attributeBasedShippingOptions).map(([key, options]) => [
+          key,
+          options.attribute_based_shipping_options[0].pk
+        ])
+      );
+
+      dispatch(
+        apiEndpoints.setAttributeBasedShippingOptions.initiate(
+          initialSelectedOptions
+        )
+      );
+    }
+
     if (!preOrder.payment_option && paymentOptions.length > 0) {
       dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
     }
 
-    if (!preOrder.installment && installmentOptions.length > 0) {
+    if (
+      !preOrder.installment &&
+      preOrder.payment_option?.payment_type !== 'saved_card' &&
+      installmentOptions.length > 0
+    ) {
       dispatch(
         apiEndpoints.setInstallmentOption.initiate(installmentOptions[0].pk)
       );
@@ -250,6 +274,14 @@ export const contextListMiddleware: Middleware = ({
           );
         }
 
+        if (context.page_context.attribute_based_shipping_options) {
+          dispatch(
+            setAttributeBasedShippingOptions(
+              context.page_context.attribute_based_shipping_options
+            )
+          );
+        }
+
         if (context.page_context.payment_options) {
           dispatch(setPaymentOptions(context.page_context.payment_options));
         }

package/redux/reducers/checkout.ts

@@ -15,7 +15,8 @@ import {
   PreOrder,
   RetailStore,
   ShippingOption,
-  DataSource
+  DataSource,
+  AttributeBasedShippingOption
 } from '../../types';
 
 export interface CheckoutState {
@@ -48,6 +49,8 @@ export interface CheckoutState {
   selectedBankAccountPk: number;
   loyaltyBalance?: string;
   retailStores: RetailStore[];
+  attributeBasedShippingOptions: AttributeBasedShippingOption[];
+  selectedShippingOptions: Record<string, number>;
 }
 
 const initialState: CheckoutState = {
@@ -78,7 +81,9 @@ const initialState: CheckoutState = {
   installmentOptions: [],
   bankAccounts: [],
   selectedBankAccountPk: null,
-  retailStores: []
+  retailStores: [],
+  attributeBasedShippingOptions: [],
+  selectedShippingOptions: {}
 };
 
 const checkoutSlice = createSlice({
@@ -156,6 +161,12 @@ const checkoutSlice = createSlice({
     },
     setRetailStores(state, { payload }) {
       state.retailStores = payload;
+    },
+    setAttributeBasedShippingOptions(state, { payload }) {
+      state.attributeBasedShippingOptions = payload;
+    },
+    setSelectedShippingOptions: (state, { payload }) => {
+      state.selectedShippingOptions = payload;
     }
   }
 });
@@ -184,7 +195,9 @@ export const {
   setBankAccounts,
   setSelectedBankAccountPk,
   setLoyaltyBalance,
-  setRetailStores
+  setRetailStores,
+  setAttributeBasedShippingOptions,
+  setSelectedShippingOptions
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/types/commerce/checkout.ts

@@ -86,6 +86,7 @@ export interface PreOrder {
   total_amount?: string;
   total_amount_with_interest?: string;
   unpaid_amount?: string;
+  notes?: string;
   user_phone_number?: string;
   loyalty_money?: string;
   currency_type_label?: string;
@@ -97,6 +98,7 @@ export interface PreOrder {
   gift_box?: GiftBox;
   credit_payment_option?: CheckoutCreditPaymentOption;
   data_source_shipping_options: any;
+  attribute_based_shipping_options: any;
   bags?: Product[];
   bags_fee?: string;
   extra_field?: ExtraField;
@@ -141,6 +143,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    attribute_based_shipping_options?: AttributeBasedShippingOption[];
     [key: string]: any;
   };
 }
@@ -166,3 +169,13 @@ export interface BankAccount {
   pk: number;
   sort_order: number;
 }
+
+export interface AttributeBasedShippingOption {
+  pk: number;
+  shipping_amount: string | null;
+  shipping_option_name: string | null;
+  shipping_option_logo: string | null;
+  attribute_value: string | null;
+  attribute_key: string;
+  [key: string]: any;
+}