From 4154985804be5d8fe5ac8f52f006e85e90bd5930 Mon Sep 17 00:00:00 2001
From: Siddharth Tiwari <siddharth@Siddharths-MacBook-Pro.local>
Date: Wed, 3 Jan 2024 13:05:26 +0530
Subject: [PATCH] feat: added sample template

---
 .../components/batch-payments/index.tsx       |  8 +-
 .../batch-payments/sample-table.tsx           | 93 +++++++++++++++++++
 2 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 apps/dashboard/components/batch-payments/sample-table.tsx

diff --git a/apps/dashboard/components/batch-payments/index.tsx b/apps/dashboard/components/batch-payments/index.tsx
index deecb468ad3..7aa6a796c4a 100644
--- a/apps/dashboard/components/batch-payments/index.tsx
+++ b/apps/dashboard/components/batch-payments/index.tsx
@@ -9,6 +9,8 @@ import Details from "../details-card/derails"
 
 import BatchPaymentsList from "./list"
 
+import SampleCSVTable from "./sample-table"
+
 import {
   displayCurrencyBatchPayments,
   displayWalletBalanceBatchPayments,
@@ -21,6 +23,7 @@ import {
   processRecords,
 } from "@/app/batch-payments/server-actions"
 import { WalletCurrency } from "@/services/graphql/generated"
+
 import { centsToDollars } from "@/app/utils"
 
 type paymentDetails = {
@@ -262,13 +265,14 @@ export default function BatchPayments() {
             }}
           >
             {`Please upload a CSV file containing the following columns: "username" (the
-            recipient of the bitcoin), "cents/sats" (this column will indicate the amount;
+            recipient of the bitcoin), "dollars/sats" (this column will indicate the amount;
             the header of this column will determine which wallet to use. If the header is
-            "cents," your USD wallet will be utilized, and the amount will be in cents. If
+            "dollars," your USD wallet will be utilized, and the amount will be in US dollars. If
             "sats" is used, your BTC wallet will be employed, and the amount will be in
             sats), and "memo" (optional)`}
             .
           </Card>
+          <SampleCSVTable />
         </>
       )}
     </div>
diff --git a/apps/dashboard/components/batch-payments/sample-table.tsx b/apps/dashboard/components/batch-payments/sample-table.tsx
new file mode 100644
index 00000000000..4c2f2f4ae87
--- /dev/null
+++ b/apps/dashboard/components/batch-payments/sample-table.tsx
@@ -0,0 +1,93 @@
+import React from "react"
+import Table from "@mui/joy/Table"
+import { Box, Button } from "@mui/joy"
+import DownloadIcon from "@mui/icons-material/Download"
+
+const SampleCSVTable = () => {
+  const createCsvContent = () => {
+    const csvRows = [["username", "dollars", "memo"]]
+    return csvRows.map((e) => e.join(",")).join("\n")
+  }
+
+  const handleDownload = () => {
+    const csvContent = createCsvContent()
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+    const link = document.createElement("a")
+    const url = URL.createObjectURL(blob)
+    link.setAttribute("href", url)
+    link.setAttribute("download", "template.csv")
+    link.style.visibility = "hidden"
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          maxWidth: "35em",
+          margin: "0 auto",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "right",
+            marginBottom: "0.2em",
+          }}
+        >
+          <Button
+            sx={{
+              display: "flex",
+              gap: "0.5em",
+            }}
+            variant="plain"
+            onClick={handleDownload}
+          >
+            <DownloadIcon /> Download Template
+          </Button>
+        </Box>
+        <Table
+          sx={{
+            "width": "100%",
+            "border": "1px solid #ccc",
+            "borderCollapse": "collapse",
+            "& th, & td": {
+              border: "1px solid #ccc",
+              padding: "0.5em",
+            },
+          }}
+          aria-label={`payments`}
+        >
+          <thead>
+            <tr>
+              <th>username</th>
+              <th>dollars/sats</th>
+              <th>memo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>user a</td>
+              <td>12</td>
+              <td>sample memo</td>
+            </tr>
+            <tr>
+              <td>user b</td>
+              <td>20</td>
+              <td>sample memo</td>
+            </tr>
+            <tr>
+              <td>user a</td>
+              <td>30</td>
+              <td>sample memo</td>
+            </tr>
+          </tbody>
+        </Table>
+      </Box>
+    </>
+  )
+}
+
+export default SampleCSVTable