diff --git a/src/api/resources/Payment.ts b/src/api/resources/Payment.ts index 0de0ef2..7255453 100644 --- a/src/api/resources/Payment.ts +++ b/src/api/resources/Payment.ts @@ -7,6 +7,8 @@ interface Payload { export interface PayloadPost extends Payload { productId: string; + placementId: string; + paywallId: string; } interface ResponsePostSuccess { @@ -37,10 +39,12 @@ interface ResponsePostError { export type ResponsePost = ResponsePostSuccess | ResponsePostError; -export const createRequestPost = ({ token, productId }: PayloadPost): Request => { +export const createRequestPost = ({ token, productId, placementId, paywallId }: PayloadPost): Request => { const url = new URL(routes.server.makePayment()); const body = JSON.stringify({ - productId + productId, + placementId, + paywallId }); return new Request(url, { method: "POST", headers: getAuthHeaders(token), body }); }; diff --git a/src/api/resources/Paywall.ts b/src/api/resources/Paywall.ts index 7f5030e..9e0a5ba 100644 --- a/src/api/resources/Paywall.ts +++ b/src/api/resources/Paywall.ts @@ -17,7 +17,9 @@ export enum EPlacementKeys { "aura.placement.palmistry.main" = "aura.placement.palmistry.main" } -interface ResponseGetSuccess { +export interface ResponseGetSuccess { + placementId: string, + paywallId: string, paywall: IPaywall; } diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx index cdb78ad..5f14274 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx @@ -40,6 +40,8 @@ function PaymentModal({ const activeProductFromStore = useSelector(selectors.selectActiveProduct); const _activeProduct = activeProduct ? activeProduct : activeProductFromStore; + const { products, paywallId, placementId } = usePaywall({ placementKey }); + const { paymentIntentId, clientSecret, @@ -50,8 +52,9 @@ function PaymentModal({ error, } = useMakePayment({ productId: _activeProduct?._id || "", - returnPaidUrl: - returnUrl + paywallId, + placementId, + returnPaidUrl: returnUrl, }); if (checkoutUrl?.length) { @@ -66,8 +69,6 @@ function PaymentModal({ EPaymentMethod.PAYMENT_BUTTONS ); - const { products } = usePaywall({ placementKey }); - const onSelectPaymentMethod = (method: EPaymentMethod) => { setSelectedPaymentMethod(method); }; diff --git a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx index 22f4a66..a6f9908 100644 --- a/src/components/pages/TrialPayment/components/PaymentModal/index.tsx +++ b/src/components/pages/TrialPayment/components/PaymentModal/index.tsx @@ -38,7 +38,7 @@ function PaymentModal({ const [stripePromise, setStripePromise] = useState | null>(null); - const { products } = usePaywall({ + const { products, placementId, paywallId } = usePaywall({ placementKey, }); const activeProductFromStore = useSelector(selectors.selectActiveProduct); @@ -54,6 +54,8 @@ function PaymentModal({ error, } = useMakePayment({ productId: _activeProduct?._id || "", + placementId, + paywallId, returnPaidUrl: returnUrl, }); diff --git a/src/hooks/payment/useMakePayment.ts b/src/hooks/payment/useMakePayment.ts index f1a0469..7aa5091 100644 --- a/src/hooks/payment/useMakePayment.ts +++ b/src/hooks/payment/useMakePayment.ts @@ -5,10 +5,17 @@ import { useSelector } from "react-redux"; interface IUseMakePaymentProps { productId: string; + placementId: string; + paywallId: string; returnPaidUrl?: string; } -export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.location.host}/payment/result/` }: IUseMakePaymentProps) => { +export const useMakePayment = ({ + productId, + placementId, + paywallId, + returnPaidUrl = `https://${window.location.host}/payment/result/` +}: IUseMakePaymentProps) => { const api = useApi(); const token = useSelector(selectors.selectToken); const [paymentIntentId, setPaymentIntentId] = useState(); @@ -20,14 +27,16 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo const [isLoading, setIsLoading] = useState(false); const makePayment = useCallback(async () => { - if (!productId?.length) { + if (!productId?.length || !placementId?.length || !paywallId?.length) { return; } try { setIsLoading(true); const res = await api.makePayment({ token, - productId + productId, + placementId, + paywallId }); if (res.status === "paid") { @@ -52,7 +61,7 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo } finally { setIsLoading(false); } - }, [api, productId, returnPaidUrl, token]) + }, [api, paywallId, placementId, productId, returnPaidUrl, token]) useEffect(() => { makePayment() diff --git a/src/hooks/paywall/usePaywall.tsx b/src/hooks/paywall/usePaywall.tsx index 1bdc2fc..6bf739b 100644 --- a/src/hooks/paywall/usePaywall.tsx +++ b/src/hooks/paywall/usePaywall.tsx @@ -33,6 +33,8 @@ export function usePaywall({ placementKey }: IUsePaywallProps) { ); const isMustUpdate = useSelector(selectors.selectPaywallsIsMustUpdate); const paywalls = useSelector(selectors.selectPaywalls); + const [placementId, setPlacementId] = useState(""); + const [paywallId, setPaywallId] = useState(""); const getPaywallByPlacementKey = useCallback( async (placementKey: EPlacementKeys) => { @@ -45,9 +47,11 @@ export function usePaywall({ placementKey }: IUsePaywallProps) { }); if ("paywall" in paywall && paywall.paywall) { setPaywall(paywall.paywall); + setPaywallId(paywall.paywallId || ""); + setPlacementId(paywall.placementId || ""); dispatch( actions.paywalls.updatePaywall({ - [placementKey]: paywall.paywall, + [placementKey]: paywall, }) ); dispatch( @@ -68,11 +72,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) { ); useEffect(() => { - if (isMustUpdate[placementKey] || !paywalls[placementKey]) { + if (isMustUpdate[placementKey] || !paywalls[placementKey]?.paywall) { getPaywallByPlacementKey(placementKey); } else { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - setPaywall(paywalls[placementKey]!); + setPaywall(paywalls[placementKey]?.paywall); + setPaywallId(paywalls[placementKey]?.paywallId || ""); + setPlacementId(paywalls[placementKey]?.placementId || ""); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [getPaywallByPlacementKey, placementKey, isMustUpdate]); @@ -117,8 +122,19 @@ export function usePaywall({ placementKey }: IUsePaywallProps) { error, products, properties, + placementId, + paywallId, getText, }), - [error, isLoading, paywall, products, properties, getText] + [ + paywall, + isLoading, + error, + products, + properties, + placementId, + paywallId, + getText, + ] ); } diff --git a/src/store/paywalls.ts b/src/store/paywalls.ts index d273f8b..ab99bdf 100644 --- a/src/store/paywalls.ts +++ b/src/store/paywalls.ts @@ -1,4 +1,4 @@ -import { EPlacementKeys, IPaywall } from '@/api/resources/Paywall' +import { EPlacementKeys, ResponseGetSuccess } from '@/api/resources/Paywall' import { createSlice, createSelector } from '@reduxjs/toolkit' import type { PayloadAction } from '@reduxjs/toolkit' @@ -9,11 +9,11 @@ type TAdditionalParameters = { } type TPaywalls = { - [key in EPlacementKeys]: IPaywall | null; + [key in EPlacementKeys]: ResponseGetSuccess | null; } & TAdditionalParameters type IPayloadUpdatePaywall = { - [key in EPlacementKeys]: IPaywall + [key in EPlacementKeys]: ResponseGetSuccess } const initialState: TPaywalls = {