Transaksi

# feat:
- proses transfer
- metode pembayaran
### issue:
- data nama bank dan rekenening belum masuk

src/app_modules/investasi/transfer/layout.tsx

@@ -44,24 +44,11 @@ export default function LayoutTransferInvestasi({
             </Group>
           </Header>
         }
-        footer={
-          <Footer height={70} sx={{ borderStyle: "none" }}>
-            <Center>
-              <Button
-                radius={50}
-                w={300}
-                bg={Warna.biru}
-                onClick={() => {
-                  router.push(RouterInvestasi.dialog_transaksi);
-                  setHotMenu(1);
-                  // router.push(RouterInvestasi.status_transaksi);
-                }}
-              >
-                Sudah Transfer
-              </Button>
-            </Center>
-          </Footer>
-        }
+        // footer={
+        //   <Footer height={70} sx={{ borderStyle: "none" }}>
+            
+        //   </Footer>
+        // }
       >
         {children}
       </AppShell>

src/app_modules/investasi/transfer/view.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Button,
   Center,
+  CopyButton,
   Divider,
   FileButton,
   Flex,
@@ -25,44 +26,85 @@ import { useRouter } from "next/navigation";
 
 import { useState } from "react";
 import Countdown from "react-countdown";
+import {
+  MODEL_Investasi,
+  MODEL_Transaksi_Investasi,
+} from "../model/model_investasi";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { useAtom } from "jotai";
+import { gs_investasiFooter } from "../g_state";
 
-export default function TransferInvestasi() {
+export default function TransferInvestasi({
+  dataTransaksi,
+}: {
+  dataTransaksi: MODEL_Transaksi_Investasi;
+}) {
   const router = useRouter();
-  const [fl, setFl] = useState<File | null>(null);
-  const [img, setImg] = useState<any | null>(null);
-  const [total, setTotal] = useState<any | null>(null);
-  const [bank, setBank] = useState<any | null>(null);
+  const [transaksi, setTransaksi] = useState(dataTransaksi);
+  const [hotMenu, setHotMenu] = useAtom(gs_investasiFooter);
+  const [countDown, setCountDown] = useState({
+    jam: "",
+    menit: "",
+    detik: "",
+  });
+
+  const PopupCD = () => (
+    <Text fz={"xs"} c={"white"}>
+      Gagal
+    </Text>
+  );
+
+  // useShallowEffect(() => {
+  //   const inter = apa_kabar("2023-11-18");
+
+  //   return () => clearInterval(inter);
+  // }, []);
+
+  // function apa_kabar(date: string) {
+  //   let d = moment.duration(moment(date).diff(new Date()));
+  //   const inter = setInterval(() => {
+  //     d = moment.duration(+d - 1000, "milliseconds");
+
+  //     console.log(d.days(), "=", d.hours(), ":", d.minutes(), ":", d.seconds());
+  //   }, 1000);
+
+  //   return inter;
+  // }
 
   useShallowEffect(() => {
-    if (typeof window !== undefined) {
-      const totalHarga = localStorage.getItem("total_harga");
-      const pilihBank = localStorage.getItem("bank");
-      setTotal(totalHarga);
-      setBank(pilihBank);
-    }
+    const mulai = moment(transaksi.createdAt).format();
+    const selesai = moment(transaksi.createdAt).add(1, "days").format();
+    const inter = funCountDown(mulai as any, selesai as any);
+
+    return () => clearInterval(inter);
   }, []);
 
-  const PopupCD = () => <Text fz={"xs"} c={"white"}>Gagal</Text>;
-  const countD = ({ hours, minutes, seconds, completed }: any) => {
-    if (completed) {
-      return PopupCD();
-    } else {
-      return (
-        <>
-          {hours}:{minutes}:{seconds}
-        </>
-      );
-    }
-  };
+  function funCountDown(mulai: Date, selesai: Date) {
+    // console.log(selesai)
+    let d = moment.duration(moment(selesai).diff(new Date()));
+    const inter = setInterval(() => {
+      d = moment.duration(+d - 1000, "milliseconds");
+      // console.log(d.hours(),":", d.minutes(),":", d.seconds())
+
+      setCountDown({
+        ...countDown,
+        jam: "" + d.hours(),
+        menit: "" + d.minutes(),
+        detik: "" + d.seconds(),
+      });
+    }, 1000);
+
+    return inter;
+  }
 
   return (
     <>
+      {/* <pre>{JSON.stringify(moment(transaksi.createdAt).format("LTS"))}</pre> */}
       <Stack spacing={"lg"}>
         <Stack spacing={0} mb={"xs"}>
-          <Title order={5}>Mohon transfer ke Xendit</Title>
+          <Text fz={12}>Mohon transfer untuk diteruskan ke :</Text>
           <Group align="center">
-            <Text>untuk diteruskan ke </Text>
-            <Title order={5}>Nama Pemilik Proyek</Title>
+            <Title order={5}>{transaksi.Investasi.title}</Title>
           </Group>
           <Divider my={"md"} />
           <Grid>
@@ -70,14 +112,16 @@ export default function TransferInvestasi() {
               <Text fz={"xs"}>Transfer sebelum</Text>
             </Grid.Col>
             <Grid.Col span={5}>
-              <Text fz={"xs"} fw={"bold"}>{moment().local().add(1, "day").calendar()}</Text>
+              <Text fz={"xs"} fw={"bold"}>
+                {moment.locale()}
+              </Text>
             </Grid.Col>
-            <Grid.Col span={3} fz={"xs"} >
-             <Paper bg={"red"} px={"md"}>
-             <Center>
-             <Countdown date={Date.now() + 86400000} renderer={countD} />
-             </Center>
-             </Paper>
+            <Grid.Col span={3} fz={"xs"}>
+              <Paper bg={"red"} px={"md"}>
+                <Center>
+                  {countDown.jam}:{countDown.menit}:{countDown.detik}
+                </Center>
+              </Paper>
             </Grid.Col>
           </Grid>
         </Stack>
@@ -88,25 +132,35 @@ export default function TransferInvestasi() {
             <Group>
               <Avatar size={"md"} variant="filled" />
               <Stack spacing={0}>
-                <Text>Nama Bank</Text>
+                <Text>Bank {transaksi.namaBank}</Text>
                 <Text>PT. Xendit Jakarta</Text>
               </Stack>
             </Group>
             <Paper
-              bg={"gray"}
+              bg={"gray.3"}
               sx={{ alignContent: "center" }}
               p={"sm"}
               radius={10}
             >
               <Grid align="center">
                 <Grid.Col span={8}>
-                  <Text fw={"bold"}>{bank}</Text>
+                  <Text fw={"bold"}>{transaksi.nomorRekening}</Text>
                 </Grid.Col>
                 <Grid.Col span={4}>
                   <Center>
-                    <Button compact variant="outline" color="dark" radius={50}>
-                      Salin
-                    </Button>
+                    <CopyButton value={transaksi.nomorRekening}>
+                      {({ copied, copy }) => (
+                        <Button
+                          variant="filled"
+                          radius={50}
+                          compact
+                          bg={copied ? "teal" : "gray"}
+                          onClick={copy}
+                        >
+                          {copied ? "Tersalin" : "Salin"}
+                        </Button>
+                      )}
+                    </CopyButton>
                   </Center>
                 </Grid.Col>
               </Grid>
@@ -115,22 +169,32 @@ export default function TransferInvestasi() {
 
           {/* Nomor rekening */}
           <Stack spacing={5}>
-            <Text>Jumlah Transfer</Text>
+            <Text>Total Transfer</Text>
             <Paper
-              bg={"gray"}
+              bg={"gray.3"}
               sx={{ alignContent: "center" }}
               p={"sm"}
               radius={10}
             >
               <Grid align="center">
                 <Grid.Col span={8}>
-                  <Text fw={"bold"}>Rp. {total}</Text>
+                  <Text fw={"bold"}>Rp. {transaksi.totalTransfer}</Text>
                 </Grid.Col>
                 <Grid.Col span={4}>
                   <Center>
-                    <Button compact variant="outline" color="dark" radius={50}>
-                      Salin
-                    </Button>
+                    <CopyButton value={transaksi.totalTransfer}>
+                      {({ copied, copy }) => (
+                        <Button
+                          variant="filled"
+                          radius={50}
+                          compact
+                          bg={copied ? "teal" : "gray"}
+                          onClick={copy}
+                        >
+                          {copied ? "Tersalin" : "Salin"}
+                        </Button>
+                      )}
+                    </CopyButton>
                   </Center>
                 </Grid.Col>
               </Grid>
@@ -142,6 +206,22 @@ export default function TransferInvestasi() {
           </Stack>
         </Stack>
       </Stack>
+
+      {/* Tombol Sudah Transfer */}
+      <Center mt={100}>
+        <Button
+          radius={50}
+          w={300}
+          bg={Warna.biru}
+          onClick={() => {
+            router.push(RouterInvestasi.dialog_transaksi);
+            setHotMenu(1);
+            // router.push(RouterInvestasi.status_transaksi);
+          }}
+        >
+          Sudah Transfer
+        </Button>
+      </Center>
     </>
   );
 }