feat(PAYMENTS-19299): reinit sdk logic

src/pages/store-page/ui/cart/index.tsx

@@ -4,16 +4,18 @@ import { StyledCartContainer } from './styled/cart.styled.ts';
 import { FinanceDetails } from './ui/FinanceDetails.tsx';
 import { useAppSelector } from '../../../../redux/hooks.ts';
 import { selectSdkInitStatus } from '../../../../redux/paystation-sdk-initialization';
+import { selectTokenIsSet } from '../../../../redux/paystation-sdk-set-token';
 
 export function Cart() {
   const sdkIsInit = useAppSelector(selectSdkInitStatus);
+  const tokenIsSet = useAppSelector(selectTokenIsSet);
 
   return (
     <StyledCartContainer>
       <div className='cart-items'>
         <CartItems />
       </div>
-      {sdkIsInit && <FinanceDetails />}
+      {sdkIsInit && tokenIsSet && <FinanceDetails />}
     </StyledCartContainer>
   );
 }

src/pages/store-page/ui/payment-methods/index.tsx

@@ -2,7 +2,11 @@ import { PaymentMethodsSkeleton } from './payment-method-skeleton';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../redux/hooks.ts';
 import { selectTokenIsSet } from '../../../../redux/paystation-sdk-set-token';
-import { getPaymentMethods, selectPaymentMethods } from '../../../../redux/payment-methods';
+import {
+  getPaymentMethods,
+  selectPaymentMethods,
+  setPaymentMethods,
+} from '../../../../redux/payment-methods';
 import { PaymentMethod } from './payment-method';
 import { PaymentMethod as PaymentMethodInterface } from '@xsolla/pay-station-sdk/dist/core/payment-method.interface';
 import { MoreMethodsButton } from '../buttons/more-methods';
@@ -12,13 +16,15 @@ import {
   setPid,
 } from '../../../../redux/payment-form';
 import { StyledPaymentMethodsContainer } from '../../styled/payment-methods.styles.ts';
+import { selectToken } from '../../../../redux/sdk-configuration';
 
 export const PaymentMethods = () => {
   const defaultMethodsCount = 4;
 
   const dispatch = useAppDispatch();
 
   const tokenIsSetInSdk = useAppSelector(selectTokenIsSet);
+  const token = useAppSelector(selectToken);
   const paymentMethods = useAppSelector(selectPaymentMethods);
   const { isSecondStep } = useAppSelector(selectPaymentFormSettings);
 
@@ -45,10 +51,16 @@ export const PaymentMethods = () => {
   const needShowMoreButton = displayCount === defaultMethodsCount && !isSecondStep;
 
   useEffect(() => {
+    dispatch(setPaymentMethods({ paymentMethods: [] }));
+
     if (tokenIsSetInSdk) {
       dispatch(getPaymentMethods());
     }
-  }, [tokenIsSetInSdk]);
+
+    if (idExpandedMethod) {
+      dispatch(setPid({ pid: idExpandedMethod }));
+    }
+  }, [tokenIsSetInSdk, token]);
 
   const showMoreMethodsHandler = useCallback(() => {
     if (paymentMethods) {

src/redux/cart/update-cart.middleware.ts

@@ -1,12 +1,14 @@
 import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import { addItem, removeItem } from './index';
 import { createToken } from '../sdk-configuration';
+import { setSdkTokenIsSet } from '../paystation-sdk-set-token';
 
 const updateCartMiddleware = createListenerMiddleware();
 
 updateCartMiddleware.startListening({
   matcher: isAnyOf(addItem, removeItem),
   effect: async (_, listenerApi) => {
+    listenerApi.dispatch(setSdkTokenIsSet(false));
     await listenerApi.dispatch(createToken());
   },
 });

src/redux/paystation-sdk-set-token/index.ts

@@ -1,4 +1,4 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { RootState } from '../store.ts';
 import { setTokenHeadlessCheckoutLib } from '../../sdk/initialization';
 import { getErrorMessage } from '../../shared/get-error-message.function.ts';
@@ -9,7 +9,7 @@ export const setTokenPayStationSdk = createAsyncThunk(
   async (parameters: { token: string }, thunkAPI) => {
     try {
       await setTokenHeadlessCheckoutLib(parameters.token);
-      thunkAPI.dispatch(sdkSetToken());
+      thunkAPI.dispatch(setSdkTokenIsSet(true));
     } catch (error: unknown) {
       const message = getErrorMessage(error);
 
@@ -26,8 +26,8 @@ const sdkSetTokenSlice = createSlice({
   name: 'sdk-set-token',
   initialState,
   reducers: {
-    sdkSetToken: (state) => {
-      state.tokenIsSet = true;
+    setSdkTokenIsSet: (state, action: PayloadAction<boolean>) => {
+      state.tokenIsSet = action.payload;
     },
   },
   extraReducers: (builder) => {
@@ -44,7 +44,7 @@ const sdkSetTokenSlice = createSlice({
   },
 });
 
-export const { sdkSetToken } = sdkSetTokenSlice.actions;
+export const { setSdkTokenIsSet } = sdkSetTokenSlice.actions;
 
 export const selectTokenIsSet = (state: RootState) => state.sdkSetTokenSlice.tokenIsSet;
 

src/redux/sdk-configuration/set-token.middleware.ts

@@ -3,6 +3,7 @@ import { selectCurrentLanguage, selectToken, setToken } from './index.ts';
 import { RootState } from '../store.ts';
 import { initPayStationSdk, selectSdkInitStatus } from '../paystation-sdk-initialization';
 import { setTokenPayStationSdk } from '../paystation-sdk-set-token';
+import { resetPaymentForm } from '../payment-form';
 
 const setTokenMiddleware = createListenerMiddleware();
 
@@ -14,6 +15,8 @@ setTokenMiddleware.startListening({
     const language = selectCurrentLanguage(state);
     const sdkIsInitialized = selectSdkInitStatus(state);
 
+    listenerApi.dispatch(resetPaymentForm());
+
     if (!sdkIsInitialized) {
       await listenerApi.dispatch(
         initPayStationSdk({