migrate changes from other branch

package.json

@@ -18,6 +18,7 @@
     "next-auth": "^4.22.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "scroll-shadow-element": "^2.0.5",
     "react-icons": "^4.10.1",
     "typescript": "^5.1.6"
   },

src/app/direct-debit/page.tsx

@@ -0,0 +1,58 @@
+/**
+ * @author David Zhu <dzhu292@aucklanduni.ac.nz>
+ */
+
+"use client";
+
+import Heading from "@/components/Heading/Heading";
+import PaymentInfoCard from "@/components/PaymentInfoCard/PaymentInfoCard";
+import DebitDetailsCard from "@/components/DebitDetailsCard/DebitDetailsCard";
+import Button from "@/components/Button/Button";
+import ScrollShadow from "@/components/ScrollShadow";
+
+export default function DirectDebitPage() {
+  const firstName: string = "John";
+  const lastName: string = "Smith";
+  const sessionId: string = "rn3498";
+  const accountNumber: string = "xx-xxxx-xxxx-xxx";
+
+  return (
+    // TODO: Add functionality for DONE button
+    // TODO: Link name, payment components to backend
+    <div className="h-[100dvh] flex flex-col p-10">
+      <div className="pb-10 -translate-x-3">
+        <Heading>Payment</Heading>
+      </div>
+      <PaymentInfoCard amount={15} />
+      <p className="mt-auto font-medium text-center flex flex-col-reverse grow p-3">
+        Direct Debit
+      </p>
+      <ScrollShadow>
+        <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}
+            onClick={() => {
+              navigator.clipboard.writeText(accountNumber);
+            }}
+          />
+
+          <DebitDetailsCard
+            title="Reference:"
+            text={[firstName + " " + lastName]}
+            sessionId={sessionId}
+            copy={true}
+            onClick={() => {
+              navigator.clipboard.writeText(sessionId);
+            }}
+          />
+        </div>
+      </ScrollShadow>
+
+      <div className="flex justify-center mt-8">
+        <Button label="done" widthFull={true} onClick={() => alert("DONE")} />
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+scroll-shadow {
+  display: inline-block;
+  --scroll-shadow-size: 18;
+  --scroll-shadow-top: linear-gradient(to top, transparent 0%, white 18px);
+  --scroll-shadow-bottom: linear-gradient(to bottom, transparent 0%, white 18px);
+}

src/components/Button/Button.tsx

@@ -6,13 +6,16 @@ import React from "react";
  * @returns styled html button component
  * @author Lia Arroyo <liayzabel@gmail.com>
  */
-const Button = ({ label, onClick }: ButtonInputProps) => {
+const Button = (props: ButtonInputProps) => {
   return (
+    //TODO: colours
     <button
-      className="w-72 h-14 bg-blue-600 rounded text-white font-semibold"
-      onClick={onClick}
+      className={`h-14 rounded text-white font-semibold text-sm bg-[#3767af] active:bg-[#264a7f] disabled:bg-[#BFBFBF]
+        ${props.widthFull ? "w-full" : "w-72"}`}
+      onClick={props.onClick}
+      disabled={props.disabled}
     >
-      {label.toUpperCase()}
+      {props.label.toUpperCase()}
     </button>
   );
 };

src/components/Button/ButtonInputProps.ts

@@ -3,6 +3,9 @@
  * @author Lia Arroyo <liayzabel@gmail.com>
  */
 type ButtonInputProps = {
+  className?: string;
   label: string;
+  disabled?: boolean;
+  widthFull?: boolean;
   onClick: () => void;
 };

src/components/Card/Card.tsx

@@ -7,10 +7,7 @@ import CardProps from "./CardProps";
 
 const Card = (props: PropsWithChildren<CardProps>) => {
   return (
-    <div
-      onClick={props.onClick}
-      className={`rounded-md drop-shadow-2xl ` + props.className}
-    >
+    <div onClick={props.onClick} className={`rounded-md ` + props.className}>
       {props.children}
     </div>
   );

src/components/DebitDetailsCard/DebitDetailsCard.tsx

@@ -0,0 +1,42 @@
+/**
+ * @author David Zhu <dzhu292@aucklanduni.ac.nz>
+ */
+
+import Card from "../Card/Card";
+import DebitDetailsCardProps from "./DebitDetailsCardProps";
+import { MdContentCopy } from "react-icons/md";
+
+const DebitDetailsCard = (props: DebitDetailsCardProps) => {
+  return (
+    <Card className="bg-gray-200 p-5 mt-0 pt-50 relative">
+      <p className="font-medium text-xl top-5">{props.title}</p>
+
+      {props.text.map((text, index) => {
+        return (
+          <p className="font-normal text-gray-500" key={index}>
+            {text}
+          </p>
+        );
+      })}
+
+      {props.sessionId && (
+        <>
+          <br />
+          <p className="font-normal blueGray-200 inline">SessionID: </p>
+          <p className="font-bold blueGray-200 inline">{props.sessionId}</p>
+        </>
+      )}
+
+      {props.copy && (
+        <button
+          onPointerDown={props.onClick}
+          className="absolute right-4 top-1/2 translate-y-[-50%] p-2 rounded-lg"
+        >
+          <MdContentCopy className="text-3xl" />
+        </button>
+      )}
+    </Card>
+  );
+};
+
+export default DebitDetailsCard;

src/components/DebitDetailsCard/DebitDetailsCardProps.tsx

@@ -0,0 +1,13 @@
+/**
+ * @author David Zhu <dzhu292@aucklanduni.ac.nz>
+ */
+
+type DebitDetailsCardProps = {
+  title: string;
+  text: string[];
+  sessionId?: string;
+  copy?: boolean; // TODO: redundant
+  onClick?: () => void;
+};
+
+export default DebitDetailsCardProps;

src/components/Heading/Heading.tsx

@@ -5,7 +5,7 @@
 import HeadingProps from "./HeadingProps";
 
 const Heading = (props: HeadingProps) => {
-  return <div className="font-bold text-3xl m-5 mt-10">{props.children}</div>;
+  return <div className="font-bold text-3xl">{props.children}</div>;
 };
 
 export default Heading;

src/components/PaymentInfoCard/PaymentInfoCard.tsx

@@ -7,10 +7,11 @@ import PaymentInfoCardProps from "./PaymentInfoCardProps";
 
 const PaymentInfoCard = (props: PaymentInfoCardProps) => {
   const dollarAmount = "$" + (Math.round(props.amount * 100) / 100).toFixed(2);
-
+  
   return (
-    <Card className="text-center p-8 pt-12 bg-blue-600 text-white">
-      <p className="text-blue-100 text-xs">Your total for this session:</p>
+    //TODO: colours
+    <Card className="text-center p-8 pt-12 bg-[#3767af] text-white shadow-xl">
+      <p className="text-[#AFCFFF] text-xs">Your total for this session:</p>
       <p className="text-3xl font-bold mb-5">{dollarAmount}</p>
       <p className="text-xs">Casual Badminton Session</p>
     </Card>

src/components/ScrollShadow.tsx

@@ -0,0 +1,12 @@
+import React, { useEffect } from "react";
+
+export default function ScrollShadow({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    import("scroll-shadow-element");
+  });
+  return <scroll-shadow>{children}</scroll-shadow>;
+}