Payment gateaway

# fix
- Alur setelah pembayaran
### Issue:
- Payment notif akan di perbaharui

src/app_modules/investasi/proses_transaksi/view.jsx

@@ -9,6 +9,8 @@ import {
   Center,
   Button,
   Text,
+  Container,
+  Flex,
 } from "@mantine/core";
 import { useFocusTrap } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -34,6 +36,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
   const [total, setTotal] = useState(0);
   const [jumlah, setJumlah] = useState(0);
   const [hotmenu, setHotmenu] = useAtom(gs_investasiFooter);
+  const [snapShow, setSnapShow] = useState(false);
 
   // console.log(userLogin.id);
   // console.log(investasi);
@@ -58,13 +61,17 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
     await getTokenTransaksi(body).then(async (res) => {
       if (res.token.status === 200) {
         // console.log(res.token.value.token)
-        snap.pay(res.token.value.token, {
+        setSnapShow(true);
+        snap.embed(res.token.value.token, {
+          embedId: "embedId",
           onSuccess: async function (result) {
             console.log(result);
             // console.log("success");
+            setSnapShow(false);
+
             await funUpdatePaymentInvestasi(result, res.dataTransaksi.id).then(
-              async (resUp) => {
-                if (resUp.status === 200) {
+              async (resUpdate) => {
+                if (resUpdate.status === 200) {
                   const hasil =
                     investasi.sisaLembar - res.dataTransaksi.quantity;
 
@@ -85,7 +92,8 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
           },
           onPending: async function (result) {
             await funUpdatePaymentInvestasi(result, res.dataTransaksi.id);
-            router.push(RouterInvestasi.main_transaksi);
+            router.push(RouterInvestasi.proses_transaksi + `${investasi.id}`);
+            setSnapShow(false);
 
             console.log("pending");
             console.log(result);
@@ -93,6 +101,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
           onError: async function (result) {
             await funUpdatePaymentInvestasi(result, res.dataTransaksi.id);
             router.push(RouterInvestasi.main_transaksi);
+            setSnapShow(false);
 
             console.log("error");
             console.log(result);
@@ -104,7 +113,7 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
               };
               await funUpdatePaymentInvestasi(data, res.dataTransaksi.id);
               router.push(RouterInvestasi.main_transaksi);
-
+              setSnapShow(false);
               // router.push(RouterPay.home);
               console.log(data);
             }
@@ -134,85 +143,89 @@ export default function ProsesTransaksiInvestasi({ dataInvestasi, userLogin }) {
 
   return (
     <>
-      <Box px={"md"}>
-        {/* Sisa Lembar Saham */}
-        <Group position="apart" mb={"md"}>
-          <Text>Sisa Lembar Saham</Text>
-          <Text fz={23}>
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(+investasi.sisaLembar)}{" "}
-          </Text>
-        </Group>
-
-        {/* Harga perlembar saham */}
-        <Group position="apart" mb={"md"}>
-          <Text>Harga Perlembar</Text>
-          <Text fz={23}>
-            Rp.{" "}
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(+investasi.hargaLembar)}{" "}
-          </Text>
-        </Group>
-
-        {/* Lembar saham */}
-        <Group position="apart" mb={"md"}>
-          <Box>
-            <Text>Jumlah Pembelian</Text>
-            <Text c={"blue"} fs={"italic"} fz={10}>
-              minimal pembelian 10 lembar
+      {!snapShow && (
+        <Box px={"md"}>
+          {/* Sisa Lembar Saham */}
+          <Group position="apart" mb={"md"}>
+            <Text>Sisa Lembar Saham</Text>
+            <Text fz={23}>
+              {new Intl.NumberFormat("id-ID", {
+                maximumFractionDigits: 10,
+              }).format(+investasi.sisaLembar)}{" "}
             </Text>
-            {/* <Text c={"red"} fs={"italic"} fz={10}>
-                maximal pembelian {maxPembelian} lembar
-              </Text> */}
-          </Box>
-          <NumberInput
-            type="number"
-            ref={focusTrapRef}
-            w={100}
-            max={maxPembelian}
-            onChange={(val) => {
-              setTotal(val * +investasi.hargaLembar);
-              setJumlah(val);
-              // console.log(val);
-            }}
-          />
-        </Group>
+          </Group>
 
-        <Divider my={"lg"} />
+          {/* Harga perlembar saham */}
+          <Group position="apart" mb={"md"}>
+            <Text>Harga Perlembar</Text>
+            <Text fz={23}>
+              Rp.{" "}
+              {new Intl.NumberFormat("id-ID", {
+                maximumFractionDigits: 10,
+              }).format(+investasi.hargaLembar)}{" "}
+            </Text>
+          </Group>
 
-        <Group position="apart" mb={"md"}>
-          <Box>
-            <Text>Total Harga</Text>
-          </Box>
-          <Text fz={25}>
-            Rp.{" "}
-            {new Intl.NumberFormat("id-ID", {
-              maximumFractionDigits: 10,
-            }).format(total)}
-          </Text>
-        </Group>
-
-        <Center>
-          {jumlah < 10 ? (
-            <Button w={350} radius={50} bg={"gray"} disabled>
-              Beli Saham
-            </Button>
-          ) : (
-            <Button
-              w={350}
-              radius={50}
-              bg={Warna.biru}
-              onClick={() => {
-                onProses();
+          {/* Lembar saham */}
+          <Group position="apart" mb={"md"}>
+            <Box>
+              <Text>Jumlah Pembelian</Text>
+              <Text c={"blue"} fs={"italic"} fz={10}>
+                minimal pembelian 10 lembar
+              </Text>
+              {/* <Text c={"red"} fs={"italic"} fz={10}>
+               maximal pembelian {maxPembelian} lembar
+             </Text> */}
+            </Box>
+            <NumberInput
+              type="number"
+              ref={focusTrapRef}
+              w={100}
+              max={maxPembelian}
+              onChange={(val) => {
+                setTotal(val * +investasi.hargaLembar);
+                setJumlah(val);
+                // console.log(val);
               }}
-            >
-              Beli Saham
-            </Button>
-          )}
-        </Center>
-      </Box>
+            />
+          </Group>
+
+          <Divider my={"lg"} />
+
+          <Group position="apart" mb={"md"}>
+            <Box>
+              <Text>Total Harga</Text>
+            </Box>
+            <Text fz={25}>
+              Rp.{" "}
+              {new Intl.NumberFormat("id-ID", {
+                maximumFractionDigits: 10,
+              }).format(total)}
+            </Text>
+          </Group>
+
+          <Center>
+            {jumlah < 10 ? (
+              <Button w={350} radius={50} bg={"gray"} disabled>
+                Beli Saham
+              </Button>
+            ) : (
+              <Button
+                w={350}
+                radius={50}
+                bg={Warna.biru}
+                onClick={() => {
+                  onProses();
+                }}
+              >
+                Beli Saham
+              </Button>
+            )}
+          </Center>
+        </Box>
+      )}
+
+      <Flex align={"center"} justify={"center"} id="embedId" />
     </>
   );
 }