diff --git a/src/pages/store-page/ui/cart/index.tsx b/src/pages/store-page/ui/cart/index.tsx index 5bca10e..c315328 100755 --- a/src/pages/store-page/ui/cart/index.tsx +++ b/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 (
- {sdkIsInit && } + {sdkIsInit && tokenIsSet && }
); } diff --git a/src/pages/store-page/ui/payment-methods/index.tsx b/src/pages/store-page/ui/payment-methods/index.tsx index fd1a2de..7031249 100755 --- a/src/pages/store-page/ui/payment-methods/index.tsx +++ b/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,6 +16,7 @@ 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; @@ -19,6 +24,7 @@ export const PaymentMethods = () => { 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) { diff --git a/src/redux/cart/update-cart.middleware.ts b/src/redux/cart/update-cart.middleware.ts index bf207c8..effdca1 100755 --- a/src/redux/cart/update-cart.middleware.ts +++ b/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()); }, }); diff --git a/src/redux/paystation-sdk-set-token/index.ts b/src/redux/paystation-sdk-set-token/index.ts index bc72c98..3316521 100755 --- a/src/redux/paystation-sdk-set-token/index.ts +++ b/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) => { + 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; diff --git a/src/redux/sdk-configuration/set-token.middleware.ts b/src/redux/sdk-configuration/set-token.middleware.ts index f3ba75f..dd126cc 100755 --- a/src/redux/sdk-configuration/set-token.middleware.ts +++ b/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({