fix: cart payment

src/api/wallet.ts

@@ -15,10 +15,12 @@ interface PaymentBody {
 }
 
 export async function sendPayment({
+  userId,
   body,
   fromSquiz,
   paymentPurpose,
 }: {
+  userId: string;
   body: PaymentBody;
   fromSquiz: boolean;
   paymentPurpose: "paycart" | "replenishwallet";
@@ -44,9 +46,11 @@ export async function sendPayment({
         },
         phoneNumber: "79000000000",
         login: "login_test",
-        returnUrl: `https://${isStaging}hub.pena.digital/afterpay?from=${fromSquiz ? "quiz" : "hub"}&purpose=${paymentPurpose}`,
-        ...body
-      }
+        returnUrl: `https://${isStaging}hub.pena.digital/afterpay?from=${
+          fromSquiz ? "quiz" : "hub"
+        }&purpose=${paymentPurpose}&userid=${userId}`,
+        ...body,
+      },
     });
 
     return [sendPaymentResponse];

src/pages/AfterPay/index.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import {
   Box,
   Button,
@@ -8,7 +9,7 @@ import {
 import { payCart } from "@root/api/cart";
 import { useUserStore } from "@root/stores/user";
 import wallet_icon from "@root/assets/Icons/ColorWallet.svg";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 
 const MINUTE = 1000 * 60;
 
@@ -54,12 +55,60 @@ const { domain, pathname } = (() => {
 })();
 
 export default () => {
+  const [redirectUrl, setRedirectUrl] = useState<string>("/");
   const theme = useTheme();
   const phone = useMediaQuery(theme.breakpoints.down(375));
   const userId = useUserStore((state) => state.user?._id);
-  const redirectUrl = new URL(`https://${domain}.pena.digital${pathname}`);
-  redirectUrl.searchParams.append("afterpay", "true");
-  redirectUrl.searchParams.append("userid", userId ?? "");
+  const [searchParams] = useSearchParams();
+  const paymentUserId = searchParams.get("userid");
+
+  useEffect(() => {
+    const from = searchParams.get("from") || "hub";
+    const purpose = searchParams.get("purpose");
+
+    if (purpose === "paycart" || from === "quiz") {
+      let tryCount = 0;
+
+      if (userId !== paymentUserId) {
+        return;
+      }
+
+      const payCartPendingRequestDeadline = localStorage.getItem(
+        "payCartPendingRequestDeadline"
+      );
+      const deadline = payCartPendingRequestDeadline
+        ? Number(payCartPendingRequestDeadline)
+        : Date.now() + 20 * MINUTE;
+
+      localStorage.setItem(
+        "payCartPendingRequestDeadline",
+        deadline.toString()
+      );
+
+      tryPayCart();
+
+      async function tryPayCart() {
+        tryCount += 1;
+
+        const [, payCartError] = await payCart();
+
+        if (!payCartError || Date.now() > deadline) {
+          localStorage.removeItem("payCartPendingRequestDeadline");
+          return;
+        }
+
+        setTimeout(tryPayCart, tryCount > 10 ? MINUTE / 60 : MINUTE / 6);
+      }
+    }
+
+    const host = window.location.hostname;
+    const domain = (host.includes("s") ? "s" : "") + from;
+    const pathname = from === "hub" ? "/tariffs" : "/list";
+
+    setRedirectUrl(
+      `https://${domain}.pena.digital${pathname}?afterpay=${true}&userid=${userId}`
+    );
+  }, []);
 
   return (
     <Box

src/pages/Payment/Payment.tsx

@@ -6,7 +6,7 @@ import {
   IconButton,
   Typography,
   useMediaQuery,
-    useTheme
+  useTheme,
 } from "@mui/material";
 import { activatePromocode } from "@root/api/promocode";
 import { sendPayment, sendRSPayment } from "@root/api/wallet";
@@ -65,16 +65,18 @@ export default function Payment() {
   const [fromSquiz, setIsFromSquiz] = useState<boolean>(false);
   const location = useLocation();
   const verificationStatus = useUserStore((state) => state.verificationStatus);
+  const userId = useUserStore((state) => state.userId);
   const navigate = useNavigate();
   const handleCustomBackNavigation = useHistoryTracker();
 
-    const notEnoughMoneyAmount = (location.state?.notEnoughMoneyAmount as number) ?? 0;
+  const notEnoughMoneyAmount =
+    (location.state?.notEnoughMoneyAmount as number) ?? 0;
 
-    console.log("notEnoughMoneyAmount ", paymentValueField)
+  console.log("notEnoughMoneyAmount ", paymentValueField);
   const paymentValue = parseFloat(paymentValueField) * 100;
 
   useLayoutEffect(() => {
-        console.log("notEnoughMoneyAmount ", notEnoughMoneyAmount)
+    console.log("notEnoughMoneyAmount ", notEnoughMoneyAmount);
     setPaymentValueField((notEnoughMoneyAmount / 100).toString());
     const params = new URLSearchParams(window.location.search);
     const fromSquiz = params.get("action");
@@ -99,6 +101,7 @@ export default function Payment() {
 
     if (selectedPaymentMethod !== "rspay") {
       const [sendPaymentResponse, sendPaymentError] = await sendPayment({
+        userId: userId ?? "",
         fromSquiz,
         body: {
           type: selectedPaymentMethod,
@@ -140,18 +143,18 @@ export default function Payment() {
       );
 
       navigate("/settings");
-
     }
-
   }
 
   function handleApplyPromocode() {
     if (!promocodeField) return;
 
-        activatePromocode(promocodeField).then(response => {
+    activatePromocode(promocodeField)
+      .then((response) => {
         enqueueSnackbar(response);
         mutate("discounts");
-        }).catch(error => {
+      })
+      .catch((error) => {
         enqueueSnackbar(error.message);
       });
   }
@@ -291,7 +294,9 @@ export default function Payment() {
                   type: "number",
                 }}
                 onChange={(e) => {
-                                    const value = parseFloat(e.target.value.replace(/^0+(?=\d\.)/, ""));
+                  const value = parseFloat(
+                    e.target.value.replace(/^0+(?=\d\.)/, "")
+                  );
                   setPaymentValueField(isNaN(value) ? "" : value.toString());
                 }}
                 id="payment-amount"