From 5d7d5178b595ca486cd6037d006dc1a587c1f2bc Mon Sep 17 00:00:00 2001
From: Juan Rozo <rozoacwow@gmail.com>
Date: Wed, 7 Aug 2024 19:43:54 -0500
Subject: [PATCH] feat: Add beneficiary info page and remitter details
 component

This commit adds a new beneficiary info page and a remitter details component. The beneficiary info page allows users to enter personal information for a beneficiary, while the remitter details component displays the details of the remitter. These changes are part of the ongoing development of the add remitter feature.
---
 .../remit-declaration/page.tsx                | 30 +++++++++++++++++++
 .../DocumentstoUpload/DocumentstoUpload.tsx   | 29 ++++++++++++++++--
 components/Button/Button.tsx                  | 13 ++++----
 components/Switch/Switch.tsx                  | 22 ++++++++++++++
 components/UploadFile/UploadFile.tsx          | 24 +++++++++++++++
 public/images/infoIcon.svg                    |  3 ++
 6 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 app/transaction-details/remit-declaration/page.tsx
 create mode 100644 components/Switch/Switch.tsx
 create mode 100644 components/UploadFile/UploadFile.tsx
 create mode 100644 public/images/infoIcon.svg

diff --git a/app/transaction-details/remit-declaration/page.tsx b/app/transaction-details/remit-declaration/page.tsx
new file mode 100644
index 000000000..a42385792
--- /dev/null
+++ b/app/transaction-details/remit-declaration/page.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { Button } from "components/Button/Button";
+import { Input } from "components/Input/Input";
+import Select from "components/Select/Select";
+import Switch from "components/Switch/Switch";
+import { useRouter } from "next/navigation";
+
+export default function RemitDeclaration() {
+    const router = useRouter()
+  return (
+    <section className="h-[80vh] flex justify-between flex-col">
+        <div>
+            <h3 className='font-tiempos text-[28px] font-normal leading-9'>Remit declaration </h3>
+            <p className='text-xs text-secondary mt-2 mb-6'>This is required by RBI for remittance regulation purpose Know more about yearly limitation  </p>
+            <p className="font-semibold text-sm mb-3">Total remittance processed by you with “MyBeacon Services Inc” this financial year (Apr 2024 - Mar 2025) ?</p>
+            <Input label="₹ 0.00"/>
+            <div className="flex items-center space-x-4 mt-6 mb-6">
+            <p className="text-xs font-medium">Have you processed any remittance this year through other financial institutions (Apr 2024 - Mar 2025)</p>
+            <Switch/>
+            </div>
+            <Input label="Amount"/>
+            <div className="w-full border-t border-gray-300 mt-5 mb-6"></div>
+            <Select options={["No","Yes"]} label='Have you availed any student education loan?'/>
+        </div>
+        <Button style='mt-10' onClick={()=>{router.push("confirm-details")}} >Continue</Button>
+    </section>
+
+  )
+}
\ No newline at end of file
diff --git a/app/transaction-details/upload-documents/components/DocumentstoUpload/DocumentstoUpload.tsx b/app/transaction-details/upload-documents/components/DocumentstoUpload/DocumentstoUpload.tsx
index 15387181a..4f39ec77f 100644
--- a/app/transaction-details/upload-documents/components/DocumentstoUpload/DocumentstoUpload.tsx
+++ b/app/transaction-details/upload-documents/components/DocumentstoUpload/DocumentstoUpload.tsx
@@ -1,9 +1,32 @@
+'use client'
+
 import React from 'react'
+import Image from 'next/image';
+import InfoIcon from '../../../../../public/images/infoIcon.svg';
+import { UploadFile } from 'components/UploadFile/UploadFile';
+import { Button } from 'components/Button/Button';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 export const DocumentstoUpload = () => {
+    const router = useRouter()
   return (
-    <div className="border mt-6 border-gray-300 rounded-lg p-4 bg-white max-w-sm">
-        asd
-    </div>  
+    <section className='flex flex-col items-between'>
+        <div className="border mt-6 border-gray-300 rounded-lg p-4 bg-white">
+            <div className='flex justify-between'>
+                <h3 className='font-bold'>Document required for student</h3>
+                <Image src={InfoIcon} alt='Info Icon'/>    
+            </div>
+            <p className='text-xs text-secondary mt-2 mb-6'>All documents must be in PDF, JPEG, JPG, or PNG format with a maximum size of 5MB. </p>
+            <UploadFile title='Student Admission Letter*' subtitle='(Approved University signed letter)'/>
+            <UploadFile title='Student Passport' subtitle='(Front and Back)'/>
+            <UploadFile title='Student Visa ' subtitle='Upload a photo from your passport'/>
+            <Link href="/add-beneficiary" className="text-green font-semibold text-center underline">
+                View document samples
+            </Link>
+        </div>  
+
+    <Button style='mt-10' onClick={()=>{router.push("remit-declaration")}} >Continue</Button>
+    </section>
 )
 }
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 47e0264e4..096ba9c38 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -10,19 +10,19 @@ const button = cva(
     "rounded-xl",
     "text-center",
     "border",
-    "border-blue-400",
+    "font-semibold",
     "transition-colors",
     "delay-50",
   ],
   {
     variants: {
       intent: {
-        primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
-        secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
+        primary: ["bg-[#154D54]", "text-white", "hover:enabled:bg-[#123c42]"],
+        secondary: ["bg-transparent", "text-green", "hover:enabled:bg-green", "hover:enabled:text-white border-green"],
       },
       size: {
         sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
-        lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
+        lg: ["min-w-full", "h-full", "min-h-12", "max-h-5", "text-lg", "py-2.5", "px-6"],
       },
       underline: { true: ["underline"], false: [] },
     },
@@ -39,11 +39,12 @@ export interface ButtonProps extends VariantProps<typeof button> {
    style?: string;
 }
 
-export function Button({ children, onClick, style }: ButtonProps) {
+export function Button({ children, onClick, style, intent, size, underline }: ButtonProps) {
+  const classes = button({ intent, size, underline });
   return (
     <button
       onClick={onClick}
-      className={`${style} bg-[#154D54] font-normal text-base text-white py-3 px-4 rounded-xl text-center w-full hover:bg-[#123c42]`}
+      className={twMerge(classes, style)}
     >
       {children}
     </button>
diff --git a/components/Switch/Switch.tsx b/components/Switch/Switch.tsx
new file mode 100644
index 000000000..5557e2cd2
--- /dev/null
+++ b/components/Switch/Switch.tsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const Switch = () => {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <button
+      onClick={() => setEnabled(!enabled)}
+      className={`${
+        enabled ? 'bg-green' : 'bg-gray-200'
+      } relative inline-flex h-6 min-w-11 items-center rounded-full transition-colors focus:outline-none`}
+    >
+      <span
+        className={`${
+          enabled ? 'translate-x-6' : 'translate-x-1'
+        } inline-block h-4 w-4 transform bg-white rounded-full transition-transform`}
+      />
+    </button>
+  );
+};
+
+export default Switch;
diff --git a/components/UploadFile/UploadFile.tsx b/components/UploadFile/UploadFile.tsx
new file mode 100644
index 000000000..0cd653238
--- /dev/null
+++ b/components/UploadFile/UploadFile.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { Button } from 'components/Button/Button'
+import React from 'react'
+
+interface UploadFileProps {
+  title: string;
+  subtitle: string;
+}
+export const UploadFile: React.FC<UploadFileProps> = ({ title, subtitle }) => {
+  return (
+    <>
+      <div className='flex justify-between'>
+          <div>
+              <h3 className='font-semibold text-sm'>{title}</h3>
+              <p className='text-xs text-secondary'>{subtitle}</p>
+          </div>
+          <Button intent={'secondary'} size={'sm'} onClick={()=> {}}>Upload</Button>
+      </div>
+       <div className="w-full border-t border-gray-300 mt-4 mb-6"></div>
+      
+    </>
+  )
+}
diff --git a/public/images/infoIcon.svg b/public/images/infoIcon.svg
new file mode 100644
index 000000000..8cac2f455
--- /dev/null
+++ b/public/images/infoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 16.5078C7.88542 16.5078 6.83594 16.2943 5.85156 15.8672C4.86719 15.4453 4 14.8594 3.25 14.1094C2.5 13.3594 1.91146 12.4948 1.48438 11.5156C1.0625 10.5312 0.851562 9.47917 0.851562 8.35938C0.851562 7.24479 1.0625 6.19792 1.48438 5.21875C1.91146 4.23438 2.4974 3.36719 3.24219 2.61719C3.99219 1.86719 4.85938 1.28125 5.84375 0.859375C6.82812 0.432292 7.8776 0.21875 8.99219 0.21875C10.1068 0.21875 11.1562 0.432292 12.1406 0.859375C13.1302 1.28125 13.9974 1.86719 14.7422 2.61719C15.4922 3.36719 16.0807 4.23438 16.5078 5.21875C16.9349 6.19792 17.1484 7.24479 17.1484 8.35938C17.1484 9.47917 16.9349 10.5312 16.5078 11.5156C16.0807 12.4948 15.4922 13.3594 14.7422 14.1094C13.9974 14.8594 13.1328 15.4453 12.1484 15.8672C11.1641 16.2943 10.1146 16.5078 9 16.5078ZM9 14.7188C9.88021 14.7188 10.7031 14.5547 11.4688 14.2266C12.2396 13.8984 12.9167 13.4453 13.5 12.8672C14.0833 12.2839 14.5391 11.6094 14.8672 10.8438C15.1953 10.0729 15.3594 9.24479 15.3594 8.35938C15.3594 7.47917 15.1927 6.65625 14.8594 5.89062C14.5312 5.11979 14.0755 4.44271 13.4922 3.85938C12.9141 3.27604 12.2396 2.82031 11.4688 2.49219C10.7031 2.16406 9.8776 2 8.99219 2C8.11198 2 7.28646 2.16406 6.51562 2.49219C5.75 2.82031 5.07552 3.27604 4.49219 3.85938C3.91406 4.44271 3.46094 5.11979 3.13281 5.89062C2.8099 6.65625 2.64844 7.47917 2.64844 8.35938C2.64844 9.24479 2.8099 10.0729 3.13281 10.8438C3.46094 11.6094 3.91667 12.2839 4.5 12.8672C5.08333 13.4453 5.75781 13.8984 6.52344 14.2266C7.29427 14.5547 8.11979 14.7188 9 14.7188ZM7.63281 12.5938C7.45052 12.5938 7.29688 12.5365 7.17188 12.4219C7.04688 12.3021 6.98438 12.1484 6.98438 11.9609C6.98438 11.7839 7.04688 11.6354 7.17188 11.5156C7.29688 11.3958 7.45052 11.3359 7.63281 11.3359H8.53125V8.30469H7.77344C7.59115 8.30469 7.4375 8.2474 7.3125 8.13281C7.1875 8.01302 7.125 7.85938 7.125 7.67188C7.125 7.49479 7.1875 7.34635 7.3125 7.22656C7.4375 7.10677 7.59115 7.04688 7.77344 7.04688H9.25C9.47917 7.04688 9.65365 7.1224 9.77344 7.27344C9.89323 7.41927 9.95312 7.61458 9.95312 7.85938V11.3359H10.7578C10.9401 11.3359 11.0938 11.3958 11.2188 11.5156C11.3438 11.6354 11.4062 11.7839 11.4062 11.9609C11.4062 12.1484 11.3438 12.3021 11.2188 12.4219C11.0938 12.5365 10.9401 12.5938 10.7578 12.5938H7.63281ZM8.96875 5.89844C8.67188 5.89844 8.41667 5.79427 8.20312 5.58594C7.98958 5.3724 7.88281 5.11719 7.88281 4.82031C7.88281 4.51302 7.98958 4.25521 8.20312 4.04688C8.41667 3.83333 8.67188 3.72656 8.96875 3.72656C9.27083 3.72656 9.52604 3.83333 9.73438 4.04688C9.94271 4.25521 10.0469 4.51302 10.0469 4.82031C10.0469 5.11719 9.94271 5.3724 9.73438 5.58594C9.52604 5.79427 9.27083 5.89844 8.96875 5.89844Z" fill="#212721"/>
+</svg>