@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/data/client/checkout.ts

@@ -2,6 +2,7 @@ import {
   setBankAccounts,
   setCardType,
   setInstallmentOptions,
+  setPaymentOptions,
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
@@ -9,15 +10,18 @@ import {
 } from '../../redux/reducers/checkout';
 import {
   CheckoutContext,
+  AccountUsage,
   ExtraField,
   GuestLoginFormParams,
   Order,
-  PreOrder
+  PreOrder,
+  SendSmsType,
+  VerifySmsType
 } from '../../types';
-import { buildClientRequestUrl } from '../../utils';
+import { buildClientRequestUrl, getCookie } from '../../utils';
 import { api } from './api';
 import { checkout } from '../urls';
-import { AppDispatch, AppStore, store } from 'redux/store';
+import type { AppDispatch, AppStore } from 'redux/store';
 import settings from 'settings';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
 import {
@@ -29,6 +33,21 @@ import {
   buildDirectPurchaseForm,
   buildPurchaseForm
 } from '@akinon/pz-masterpass/src/utils';
+import { devLogger } from '@akinon/next/hooks/use-logger-context';
+import { LogLevel } from '@akinon/next/hooks/use-logger';
+
+const getLatestState = async (getState: () => any): Promise<any> => {
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  return getState();
+};
+
+const recentLogMessages = new Map<string, number>();
+
+const getStore = async (): Promise<AppStore> => {
+  const { store } = await import('redux/store');
+  return store;
+};
 
 interface CheckoutResponse {
   pre_order?: PreOrder;
@@ -40,6 +59,53 @@ interface CheckoutResponse {
   redirect_url?: string;
 }
 
+const validateCheckoutState = (
+  state: any,
+  validations: Array<{
+    condition: (state: any) => boolean;
+    errorMessage: string;
+    severity?: LogLevel;
+    data?: any;
+    action?: () => void;
+  }>
+) => {
+  validations.forEach(
+    ({
+      condition,
+      errorMessage,
+      severity = 'error',
+      data: logData,
+      action
+    }) => {
+      if (condition(state)) {
+        const now = Date.now();
+        const lastLogged = recentLogMessages.get(errorMessage) || 0;
+
+        if (now - lastLogged > 2000) {
+          recentLogMessages.set(errorMessage, now);
+
+          switch (severity) {
+            case 'error':
+              devLogger.error(
+                errorMessage,
+                logData || state.checkout?.preOrder
+              );
+              action?.();
+              break;
+            case 'warn':
+              devLogger.warn(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+              break;
+            default:
+              devLogger.info(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+          }
+        }
+      }
+    }
+  );
+};
+
 interface SetAddressesParams {
   shippingAddressPk: number;
   billingAddressPk: number;
@@ -79,6 +145,18 @@ export interface PayOnDeliveryParams {
   paymentType: string;
 }
 
+const buildCheckoutRequestUrl = (
+  path: string,
+  options?: Parameters<typeof buildClientRequestUrl>[1]
+) => {
+  const effectivePath =
+    getCookie('pz-post-checkout-flow') === 'true' &&
+    /^\/orders\/checkout(\/|\?|$)/.test(path)
+      ? path.replace('/orders/checkout', '/orders/post-checkout')
+      : path;
+  return buildClientRequestUrl(effectivePath, options);
+};
+
 const completeMasterpassPayment = async (
   params: CompleteCreditCardParams,
   dispatch: AppDispatch,
@@ -174,40 +252,59 @@ const completeMasterpassPayment = async (
   });
 };
 
+let checkoutAbortController = new AbortController();
+
+export const getCheckoutAbortSignal = () => {
+  if (checkoutAbortController.signal.aborted) {
+    checkoutAbortController = new AbortController();
+  }
+  return checkoutAbortController.signal;
+};
+
+const abortCheckout = () => {
+  checkoutAbortController.abort();
+  checkoutAbortController = new AbortController();
+};
+
 export const checkoutApi = api.injectEndpoints({
   endpoints: (build) => ({
     fetchCheckout: build.query<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.fetchCheckout, {})
+        url: buildCheckoutRequestUrl(checkout.fetchCheckout, {})
       }),
       providesTags: ['Checkout']
     }),
+    resetCheckoutState: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildCheckoutRequestUrl(checkout.guestLogin, {})
+      })
+    }),
     fetchCheckoutResult: build.query<{ order: Order }, string>({
       query: (token: string) =>
-        buildClientRequestUrl(checkout.fetchCheckoutResult(token))
+        buildCheckoutRequestUrl(checkout.fetchCheckoutResult(token))
     }),
     get3dRedirectForm: build.query<{ result: string }, void>({
       query: () =>
-        buildClientRequestUrl(checkout.get3dRedirectForm, {
+        buildCheckoutRequestUrl(checkout.get3dRedirectForm, {
           responseType: 'text'
         })
     }),
     getContract: build.query<GetContractResponse, string>({
       query: (slug: string) =>
-        buildClientRequestUrl(checkout.getContract(slug), {
+        buildCheckoutRequestUrl(checkout.getContract(slug), {
           responseType: 'text'
         })
     }),
     getCoupons: build.query<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.couponSelectionPage)
+        url: buildCheckoutRequestUrl(checkout.couponSelectionPage)
       })
     }),
 
     setCoupon: build.mutation<CheckoutResponse, { pk: number; action: string }>(
       {
         query: ({ pk, action }) => ({
-          url: buildClientRequestUrl(checkout.couponSelectionPage, {
+          url: buildCheckoutRequestUrl(checkout.couponSelectionPage, {
             useFormData: true
           }),
           method: 'POST',
@@ -223,25 +320,32 @@ export const checkoutApi = api.injectEndpoints({
       CheckoutResponse,
       CompleteCreditCardParams
     >({
-      query: ({
-        card_holder,
-        card_cvv,
-        card_number,
-        card_month,
-        card_year,
-        use_three_d = true,
-        save = undefined
-      }) => {
+      async queryFn(
+        {
+          card_holder,
+          card_cvv,
+          card_number,
+          card_month,
+          card_year,
+          use_three_d = true,
+          save = undefined
+        },
+        _queryApi,
+        _extraOptions,
+        baseQuery
+      ) {
+        const reduxStore = await getStore();
         const paymentOption =
-          store.getState().checkout?.preOrder?.payment_option;
+          reduxStore.getState().checkout?.preOrder?.payment_option;
 
         if (paymentOption?.payment_type === 'masterpass') {
-          return {
-            url: buildClientRequestUrl(checkout.getMasterpassOrderNo, {
+          const result = await baseQuery({
+            url: buildCheckoutRequestUrl(checkout.getMasterpassOrderNo, {
               useFormData: true
             }),
             method: 'POST'
-          };
+          });
+          return result as { data: CheckoutResponse } | { error: any };
         }
 
         const body: Record<string, string> = {
@@ -258,18 +362,19 @@ export const checkoutApi = api.injectEndpoints({
           body.save = save ? '1' : '0';
         }
 
-        return {
-          url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
+        const result = await baseQuery({
+          url: buildCheckoutRequestUrl(checkout.completeCreditCardPayment, {
             useFormData: true
           }),
           method: 'POST',
           body
-        };
+        });
+        return result as { data: CheckoutResponse } | { error: any };
       },
       async onQueryStarted(args, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
         const { data } = await queryFulfilled;
-        const reduxStore = (await import('redux/store')).store;
+        const reduxStore = await getStore();
         const completePaymentContext = data?.context_list?.find(
           (context) => context?.page_name === 'MasterpassCompletePage'
         );
@@ -294,7 +399,7 @@ export const checkoutApi = api.injectEndpoints({
       }
     >({
       query: ({ token }) => ({
-        url: buildClientRequestUrl(checkout.completeMasterpassPayment, {
+        url: buildCheckoutRequestUrl(checkout.completeMasterpassPayment, {
           useFormData: true
         }),
         method: 'POST',
@@ -311,7 +416,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     completeFundsTransfer: build.mutation<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.completeFundsTransfer, {
+        url: buildCheckoutRequestUrl(checkout.completeFundsTransfer, {
           useFormData: true
         }),
         method: 'POST',
@@ -328,7 +433,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     guestLogin: build.mutation<CheckoutResponse, GuestLoginFormParams>({
       query: ({ user_email, phone_number }) => ({
-        url: buildClientRequestUrl(checkout.guestLogin, {
+        url: buildCheckoutRequestUrl(checkout.guestLogin, {
           useFormData: true
         }),
         method: 'POST',
@@ -341,56 +446,132 @@ export const checkoutApi = api.injectEndpoints({
     }),
     setDeliveryOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
-        url: buildClientRequestUrl(checkout.setDeliveryOption, {
+        url: buildCheckoutRequestUrl(checkout.setDeliveryOption, {
           useFormData: true
         }),
         method: 'POST',
         body: {
           delivery_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return preOrder?.basket?.basketitem_set?.length === 0;
+            },
+            errorMessage:
+              'Your shopping basket is empty. Please add items to your basket before selecting a delivery option.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setAddresses: build.mutation<CheckoutResponse, SetAddressesParams>({
       query: ({ shippingAddressPk, billingAddressPk }) => ({
-        url: buildClientRequestUrl(checkout.setAddresses, {
+        url: buildCheckoutRequestUrl(checkout.setAddresses, {
           useFormData: true
         }),
         method: 'POST',
         body: {
           shipping_address: String(shippingAddressPk),
           billing_address: String(billingAddressPk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const deliveryOptions = state.checkout?.deliveryOptions;
+              const preOrder = state.checkout?.preOrder;
+
+              return deliveryOptions?.length > 0
+                ? preOrder && !preOrder.delivery_option?.pk
+                : false;
+            },
+            errorMessage:
+              'You need to select a delivery option before setting your addresses. Dispatch setAddresses action after delivery option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setShippingOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
-        url: buildClientRequestUrl(checkout.setShippingOption, {
+        url: buildCheckoutRequestUrl(checkout.setShippingOption, {
           useFormData: true
         }),
         method: 'POST',
         body: {
           shipping_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.billing_address;
+            },
+            errorMessage:
+              'You need to provide a billing address before selecting a shipping option. Dispatch setShippingOption action after billing address selection.',
+            action: () => abortCheckout()
+          },
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_address;
+            },
+            errorMessage:
+              'You need to provide a shipping address before selecting a shipping option. Dispatch setShippingOption action after shipping address selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
       query: (pks) => ({
-        url: buildClientRequestUrl(checkout.setDataSourceShippingOption, {
+        url: buildCheckoutRequestUrl(checkout.setDataSourceShippingOption, {
           useFormData: true
         }),
         method: 'POST',
@@ -406,7 +587,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     setRetailStore: build.mutation<CheckoutResponse, SetRetailStoreParams>({
       query: ({ retailStorePk, billingAddressPk }) => ({
-        url: buildClientRequestUrl(
+        url: buildCheckoutRequestUrl(
           '/orders/checkout?page=RetailStoreSelectionPage',
           {
             useFormData: true
@@ -419,24 +600,51 @@ export const checkoutApi = api.injectEndpoints({
         }
       })
     }),
+    fetchPaymentOptions: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildCheckoutRequestUrl(checkout.setPaymentOption)
+      }),
+      providesTags: ['PaymentOptions']
+    }),
     setPaymentOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
-        url: buildClientRequestUrl(checkout.setPaymentOption, {
+        url: buildCheckoutRequestUrl(checkout.setPaymentOption, {
           useFormData: true
         }),
         method: 'POST',
         body: {
           payment_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setPaymentStepBusy(true));
         dispatch(setInstallmentOptions([]));
         dispatch(setBankAccounts([]));
         dispatch(setSelectedBankAccountPk(null));
         dispatch(setCardType(null));
-        await queryFulfilled;
-        dispatch(setPaymentStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_option?.pk;
+            },
+            errorMessage:
+              'You need to select a shipping option before choosing a payment method. Dispatch setPaymentOption action after shipping option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setPaymentStepBusy(false));
+        } catch (error) {
+          dispatch(setPaymentStepBusy(false));
+        }
       }
     }),
     setWalletSelectionPage: build.mutation<
@@ -447,7 +655,7 @@ export const checkoutApi = api.injectEndpoints({
       }
     >({
       query: ({ payment_option: pk, validationURL }) => ({
-        url: buildClientRequestUrl(checkout.setWalletSelectionPage, {
+        url: buildCheckoutRequestUrl(checkout.setWalletSelectionPage, {
           useFormData: true
         }),
         method: 'POST',
@@ -467,16 +675,15 @@ export const checkoutApi = api.injectEndpoints({
       CheckoutResponse,
       {
         payment_token?: string;
+        [key: string]: any;
       }
     >({
-      query: ({ payment_token }) => ({
-        url: buildClientRequestUrl(checkout.setWalletPaymentPage, {
+      query: (requestBody) => ({
+        url: buildCheckoutRequestUrl(checkout.setWalletPaymentPage, {
           useFormData: true
         }),
         method: 'POST',
-        body: {
-          payment_token
-        }
+        body: requestBody
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -484,12 +691,22 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setPaymentStepBusy(false));
       }
     }),
-    setWalletCompletePage: build.mutation<CheckoutResponse, boolean>({
-      query: (success: boolean) => ({
-        url: buildClientRequestUrl(checkout.setWalletCompletePage),
+    setWalletCompletePage: build.mutation<
+      CheckoutResponse,
+      {
+        success: boolean;
+        cko_payment_id?: string;
+        [key: string]: any;
+      }
+    >({
+      query: ({ success, ...additionalParams }) => ({
+        url: buildCheckoutRequestUrl(checkout.setWalletCompletePage, {
+          useFormData: true
+        }),
         method: 'POST',
         body: {
-          success
+          success,
+          ...additionalParams
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
@@ -499,23 +716,25 @@ export const checkoutApi = api.injectEndpoints({
       }
     }),
     setBinNumber: build.mutation<CheckoutResponse, string>({
-      query: (binNumber: string) => {
+      async queryFn(binNumber, _queryApi, _extraOptions, baseQuery) {
+        const reduxStore = await getStore();
         const paymentOption =
-          store.getState().checkout?.preOrder?.payment_option;
+          reduxStore.getState().checkout?.preOrder?.payment_option;
         const binNumberUrl =
           paymentOption?.payment_type === 'masterpass'
             ? checkout.setMasterpassBinNumber
             : checkout.setBinNumber;
 
-        return {
-          url: buildClientRequestUrl(binNumberUrl, {
+        const result = await baseQuery({
+          url: buildCheckoutRequestUrl(binNumberUrl, {
             useFormData: true
           }),
           method: 'POST',
           body: {
             bin_number: binNumber
           }
-        };
+        });
+        return result as { data: CheckoutResponse } | { error: any };
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -525,22 +744,25 @@ export const checkoutApi = api.injectEndpoints({
       }
     }),
     setInstallmentOption: build.mutation<CheckoutResponse, number>({
-      query: (pk: number) => {
+      async queryFn(pk, _queryApi, _extraOptions, baseQuery) {
+        const reduxStore = await getStore();
         const paymentOption =
-          store.getState().checkout?.preOrder?.payment_option;
+          reduxStore.getState().checkout?.preOrder?.payment_option;
         const installmentOption =
           paymentOption?.payment_type === 'masterpass'
             ? checkout.setMasterPassInstallmentOption
             : checkout.setInstallmentOption;
-        return {
-          url: buildClientRequestUrl(installmentOption, {
+
+        const result = await baseQuery({
+          url: buildCheckoutRequestUrl(installmentOption, {
             useFormData: true
           }),
           method: 'POST',
           body: {
             installment: String(pk)
           }
-        };
+        });
+        return result as { data: CheckoutResponse } | { error: any };
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -550,7 +772,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     setFundsTransferOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
-        url: buildClientRequestUrl(checkout.setFundsTransferOption, {
+        url: buildCheckoutRequestUrl(checkout.setFundsTransferOption, {
           useFormData: true
         }),
         method: 'POST',
@@ -567,7 +789,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     setCreditPaymentOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
-        url: buildClientRequestUrl(checkout.setCreditPaymentOption, {
+        url: buildCheckoutRequestUrl(checkout.setCreditPaymentOption, {
           useFormData: true
         }),
         method: 'POST',
@@ -584,7 +806,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     confirmationCreditPayment: build.mutation<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.confirmationCreditPayment, {
+        url: buildCheckoutRequestUrl(checkout.confirmationCreditPayment, {
           useFormData: true
         }),
         method: 'POST',
@@ -600,7 +822,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     completeRedirectionPayment: build.mutation<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.completeRedirectionPayment, {
+        url: buildCheckoutRequestUrl(checkout.completeRedirectionPayment, {
           useFormData: true
         }),
         method: 'POST',
@@ -616,7 +838,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     applePaymentSelect: build.mutation<CheckoutResponse, ApplePaySelectParams>({
       query: ({ agreement, validationURL }) => ({
-        url: buildClientRequestUrl(checkout.confirmationPaymentSelect, {
+        url: buildCheckoutRequestUrl(checkout.confirmationPaymentSelect, {
           useFormData: true
         }),
         method: 'POST',
@@ -633,7 +855,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     appleQuery: build.mutation<CheckoutResponse, ApplePayQueryParams>({
       query: ({ agreement, paymentToken }) => ({
-        url: buildClientRequestUrl(checkout.confirmationQuery, {
+        url: buildCheckoutRequestUrl(checkout.confirmationQuery, {
           useFormData: true
         }),
         method: 'POST',
@@ -650,7 +872,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     completeConfirmation: build.mutation<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.confirmationComplete, {
+        url: buildCheckoutRequestUrl(checkout.confirmationComplete, {
           useFormData: true
         }),
         method: 'POST',
@@ -669,7 +891,7 @@ export const checkoutApi = api.injectEndpoints({
       PayOnDeliveryParams
     >({
       query: ({ paymentType }) => ({
-        url: buildClientRequestUrl(
+        url: buildCheckoutRequestUrl(
           `${checkout.fetchCheckout}?page=PayOnDeliveryPage`,
           { useFormData: true }
         ),
@@ -687,7 +909,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     setPayOnDeliveryChoice: build.mutation<CheckoutResponse, string>({
       query: (body) => ({
-        url: buildClientRequestUrl(
+        url: buildCheckoutRequestUrl(
           `${checkout.fetchCheckout}?page=PayOnDeliveryPaymentChoicePage`,
           { useFormData: true }
         ),
@@ -704,7 +926,7 @@ export const checkoutApi = api.injectEndpoints({
     }),
     completeLoyaltyPayment: build.mutation<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.completeLoyaltyPayment, {
+        url: buildCheckoutRequestUrl(checkout.completeLoyaltyPayment, {
           useFormData: true
         }),
         method: 'POST',
@@ -720,23 +942,55 @@ export const checkoutApi = api.injectEndpoints({
     }),
     getCheckoutLoyaltyBalance: build.query<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.loyaltyMoneyUsage)
+        url: buildCheckoutRequestUrl(checkout.loyaltyMoneyUsage)
       })
     }),
-    payWithLoyaltyBalance: build.mutation<any, string>({
-      query: (amount) => ({
-        url: buildClientRequestUrl(checkout.loyaltyMoneyUsage, {
-          useFormData: true
-        }),
-        method: 'POST',
-        body: {
-          loyalty_amount_to_use: amount
+    payWithLoyaltyBalance: build.mutation<
+      any,
+      string | { account_usages: AccountUsage[] }
+    >({
+      query: (params) => {
+        const isAccountUsages =
+          typeof params === 'object' && 'account_usages' in params;
+
+        return {
+          url: buildCheckoutRequestUrl(checkout.loyaltyMoneyUsage, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body: isAccountUsages
+            ? {
+                account_usages: JSON.stringify(params.account_usages)
+              }
+            : {
+                loyalty_amount_to_use: params
+              }
+        };
+      },
+      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) => ({
-        url: buildClientRequestUrl(checkout.setOrderNote, {
+        url: buildCheckoutRequestUrl(checkout.setOrderNote, {
           useFormData: true
         }),
         method: 'POST',
@@ -756,7 +1010,7 @@ export const checkoutApi = api.injectEndpoints({
         };
 
         return {
-          url: buildClientRequestUrl(checkout.deliveryBagsPage, {
+          url: buildCheckoutRequestUrl(checkout.deliveryBagsPage, {
             useFormData: true
           }),
           method: 'POST',
@@ -769,7 +1023,7 @@ export const checkoutApi = api.injectEndpoints({
       Record<string, number>
     >({
       query: (options) => ({
-        url: buildClientRequestUrl(checkout.setAttributeBasedShippingOption, {
+        url: buildCheckoutRequestUrl(checkout.setAttributeBasedShippingOption, {
           useFormData: true
         }),
         method: 'POST',
@@ -788,7 +1042,7 @@ export const checkoutApi = api.injectEndpoints({
       { extra_field: ExtraField }
     >({
       query: ({ extra_field }) => ({
-        url: buildClientRequestUrl(checkout.setOrderSelectionPage, {
+        url: buildCheckoutRequestUrl(checkout.setOrderSelectionPage, {
           useFormData: true
         }),
         method: 'POST',
@@ -799,16 +1053,16 @@ export const checkoutApi = api.injectEndpoints({
     }),
     fetchLoyaltyData: build.query<CheckoutResponse, void>({
       query: () => ({
-        url: buildClientRequestUrl(checkout.loyaltyCardPage, {
+        url: buildCheckoutRequestUrl(checkout.loyaltyCardPage, {
           accept: 'application/json',
           contentType: 'application/json'
         }),
         method: 'GET'
       })
     }),
-    setLoyaltyData: build.mutation<CheckoutResponse, number>({
+    setLoyaltyData: build.mutation<CheckoutResponse, number | string>({
       query: (amount) => ({
-        url: buildClientRequestUrl(checkout.loyaltyCardPage, {
+        url: buildCheckoutRequestUrl(checkout.loyaltyCardPage, {
           useFormData: true
         }),
         method: 'POST',
@@ -816,6 +1070,39 @@ export const checkoutApi = api.injectEndpoints({
           selected_loyalty_amount: amount
         }
       })
+    }),
+    sendSms: build.mutation<CheckoutResponse, SendSmsType>({
+      query: (body) => ({
+        url: buildCheckoutRequestUrl(checkout.sendSmsPage, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    verifySms: build.mutation<CheckoutResponse, VerifySmsType>({
+      query: (body) => ({
+        url: buildCheckoutRequestUrl(checkout.verifySmsPage, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    saveSampleProducts: build.mutation<CheckoutResponse, number[] | undefined>({
+      query: (products = []) => {
+        const formData = new FormData();
+
+        products.forEach((product) => {
+          formData.append('sample_products', String(product));
+        });
+
+        return {
+          url: buildCheckoutRequestUrl(checkout.saveSampleProducts),
+          method: 'POST',
+          body: formData
+        };
+      }
     })
   }),
   overrideExisting: false
@@ -835,6 +1122,7 @@ export const {
   useSetAddressesMutation,
   useSetShippingOptionMutation,
   useSetDataSourceShippingOptionsMutation,
+  useFetchPaymentOptionsQuery,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,
@@ -859,5 +1147,9 @@ export const {
   useSetLoyaltyDataMutation,
   useSetWalletSelectionPageMutation,
   useSetWalletPaymentPageMutation,
-  useSetWalletCompletePageMutation
+  useSetWalletCompletePageMutation,
+  useSendSmsMutation,
+  useVerifySmsMutation,
+  useResetCheckoutStateQuery,
+  useSaveSampleProductsMutation
 } = checkoutApi;