Merge pull request Blazity#5 from MyBeaconLabs/feature/myb-1315-trans…

…action-flow-2

Flow Transaction 2

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>
+
+  )
+}

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>
 )
 }

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>

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;

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>
+
+    </>
+  )
+}