From 36b3f211a892fc99a25b3db4eb0597594e163abf Mon Sep 17 00:00:00 2001
From: dyzhuu <119282717+dyzhuu@users.noreply.github.com>
Date: Tue, 15 Aug 2023 12:33:19 +1200
Subject: [PATCH] clean

---
 src/app/direct-debit/page.tsx                 |  6 +--
 .../DebitDetailsCard/DebitDetailsCard.tsx     | 42 ++++++++-----------
 .../DebitDetailsCardProps.tsx                 |  3 +-
 3 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/app/direct-debit/page.tsx b/src/app/direct-debit/page.tsx
index b79ccce2..c56c21c4 100644
--- a/src/app/direct-debit/page.tsx
+++ b/src/app/direct-debit/page.tsx
@@ -31,8 +31,7 @@ export default function DirectDebitPage() {
         <div className="flex flex-col overflow-y-auto w-full gap-4 bg-bottom h-[calc(100dvh-460px)] max-h-[248px]">
           <DebitDetailsCard
             title="Account Number:"
-            text={[accountNumber]}
-            copy={true}
+            subtitle={accountNumber}
             onClick={() => {
               navigator.clipboard.writeText(accountNumber);
             }}
@@ -40,9 +39,8 @@ export default function DirectDebitPage() {
 
           <DebitDetailsCard
             title="Reference:"
-            text={[firstName + " " + lastName]}
+            subtitle={`${firstName} ${lastName}`}
             sessionId={sessionId}
-            copy={true}
             onClick={() => {
               navigator.clipboard.writeText(sessionId);
             }}
diff --git a/src/components/DebitDetailsCard/DebitDetailsCard.tsx b/src/components/DebitDetailsCard/DebitDetailsCard.tsx
index c00af38e..f4ee8fd7 100644
--- a/src/components/DebitDetailsCard/DebitDetailsCard.tsx
+++ b/src/components/DebitDetailsCard/DebitDetailsCard.tsx
@@ -6,35 +6,29 @@ import Card from "../Card/Card";
 import DebitDetailsCardProps from "./DebitDetailsCardProps";
 import { MdContentCopy } from "react-icons/md";
 
-const DebitDetailsCard = ({title, text, sessionId, onClick, copy}: DebitDetailsCardProps) => {
+const DebitDetailsCard = ({
+  title,
+  subtitle,
+  sessionId,
+  onClick,
+}: DebitDetailsCardProps) => {
   return (
-    <Card className="bg-gray-200 p-5 mt-0 pt-50 relative">
+    <Card className="bg-gray-200 font-normal p-5 mt-0 pt-50 relative">
       <p className="font-medium text-xl top-5">{title}</p>
-
-      {text.map((text, index) => {
-        return (
-          <p className="font-normal text-gray-500" key={index}>
-            {text}
-          </p>
-        );
-      })}
+      <p className="text-gray-500">{subtitle}</p>
 
       {sessionId && (
-        <>
-          <br />
-          <p className="font-normal blueGray-200 inline">SessionID: </p>
-          <p className="font-bold blueGray-200 inline">{sessionId}</p>
-        </>
-      )}
-
-      {copy && (
-        <button
-          onPointerDown={onClick}
-          className="absolute right-4 top-1/2 translate-y-[-50%] p-2 rounded-lg"
-        >
-          <MdContentCopy className="text-3xl" />
-        </button>
+        <p className="pt-5 blueGray-200">
+          SessionID: <span className="font-bold">{sessionId}</span>
+        </p>
       )}
+      {/* Clipboard button is positioned absolute relative to the parent card container */}
+      <button
+        onPointerDown={onClick}
+        className="absolute right-4 top-1/2 translate-y-[-50%] p-2 rounded-lg"
+      >
+        <MdContentCopy className="text-3xl" />
+      </button>
     </Card>
   );
 };
diff --git a/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx b/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx
index b63cbf6d..9cfdda63 100644
--- a/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx
+++ b/src/components/DebitDetailsCard/DebitDetailsCardProps.tsx
@@ -4,9 +4,8 @@
 
 type DebitDetailsCardProps = {
   title: string;
-  text: string[];
+  subtitle: string;
   sessionId?: string;
-  copy?: boolean; // TODO: redundant
   onClick?: () => void;
 };