Merge branch 'AW-98-parameters-new-payment' into 'develop'

AW-98-parameters-new-payment

See merge request witapp/aura-webapp!162

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 });
 };

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;
 }
 

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);
   };

src/components/pages/TrialPayment/components/PaymentModal/index.tsx

@@ -38,7 +38,7 @@ function PaymentModal({
   const [stripePromise, setStripePromise] =
     useState<Promise<Stripe | null> | 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,
   });
 

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<string>();
@@ -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()

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<string>("");
+  const [paywallId, setPaywallId] = useState<string>("");
 
   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,
+    ]
   );
 }

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