From e2b3978ab6f1322ccb9dbf3f8d114daea51f252d Mon Sep 17 00:00:00 2001
From: chukwumdiebube ojinta <ebube.ojinta@chiefsoft.com>
Date: Sat, 23 Mar 2024 06:23:50 +0100
Subject: [PATCH] Added Applicants Attestation Page

---
 .../GetStarted/ApplicantsAttestation.tsx      | 30 +++++++++
 src/components/GetStarted/CreditAccount.tsx   | 27 ++++++++
 src/components/GetStarted/DebitAccount.tsx    | 67 +++++++++++++++++++
 src/components/GetStarted/GetStarted.tsx      |  4 +-
 src/components/GetStarted/LoanAmountComp.tsx  | 55 ++++++++-------
 5 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 src/components/GetStarted/ApplicantsAttestation.tsx
 create mode 100644 src/components/GetStarted/CreditAccount.tsx
 create mode 100644 src/components/GetStarted/DebitAccount.tsx

diff --git a/src/components/GetStarted/ApplicantsAttestation.tsx b/src/components/GetStarted/ApplicantsAttestation.tsx
new file mode 100644
index 0000000..38c42dd
--- /dev/null
+++ b/src/components/GetStarted/ApplicantsAttestation.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import CreditAccount from "./CreditAccount";
+import DebitAccount from "./DebitAccount";
+
+const ApplicantsAttestation: React.FC = () => {
+  return (
+    <>
+      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
+        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem] max-w-[34rem]">
+          Applicant’s Attestation and Debit Instruction
+        </h1>
+        <div className="flex flex-col gap-[.4375rem]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      </div>
+      <CreditAccount />
+      <DebitAccount />
+    </>
+  );
+};
+
+export default ApplicantsAttestation;
diff --git a/src/components/GetStarted/CreditAccount.tsx b/src/components/GetStarted/CreditAccount.tsx
new file mode 100644
index 0000000..cb0e80a
--- /dev/null
+++ b/src/components/GetStarted/CreditAccount.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const CreditAccount: React.FC = () => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          CREDIT ACCOUNT ( Your account to receive your loan )
+        </p>
+      </div>
+      <InputCompOne
+        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+        label="Disbursement Account Number "
+        name="disbursementAccountNumber"
+        labelSpan="( Your FCMB Account )"
+        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+        parentInputClass="w-full"
+        labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+        input
+        inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+      />
+    </>
+  );
+};
+
+export default CreditAccount;
diff --git a/src/components/GetStarted/DebitAccount.tsx b/src/components/GetStarted/DebitAccount.tsx
new file mode 100644
index 0000000..739b69d
--- /dev/null
+++ b/src/components/GetStarted/DebitAccount.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, InputCompOne } from "..";
+
+const DebitAccount: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-9">
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          DEBIT ACCOUNT ( Your salary account for monthly repayment )
+        </p>
+      </div>
+      <InputCompOne
+        parentClass="max-w-[471px] w-full ml-5"
+        label="Bank Name"
+        name="bankName"
+        parentInputClass="w-full"
+        labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+        input
+        inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+      />
+
+      <div className="flex items-center gap-[59px]">
+        <InputCompOne
+          parentClass="max-w-[471px] w-full ml-5"
+          label="Account Number"
+          name="accountNumber"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          input
+          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+        />
+        <InputCompOne
+          parentClass="max-w-[471px] w-full ml-5"
+          label="Account Name"
+          name="accountName"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          input
+          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+        />
+      </div>
+
+      <div className="max-w-[578px] flex items-center">
+        <input
+          type="checkbox"
+          checked={true}
+        //   onChange={onChange}
+          className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
+          style={{ backgroundColor: "#5C2684" }}
+        />
+        <label className="ml-2 text-gray-700">
+          I have read, understood and accept the{" "}
+          <span className="text-[#4545CB]">applicant's attestation</span> and
+          all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
+          for FCMB premium salary loan.
+        </label>
+      </div>
+      <Button
+        className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
+        text="Apply"
+        type="button"
+      />
+    </div>
+  );
+};
+
+export default DebitAccount;
diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx
index 782366d..e0eb8ec 100644
--- a/src/components/GetStarted/GetStarted.tsx
+++ b/src/components/GetStarted/GetStarted.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import BasicInfo from "./BasicInfo";
 import YourAreAlmostThere from "./YourAreAlmostThere";
 import LoanAmountComp from "./LoanAmountComp";
+import ApplicantsAttestation from "./ApplicantsAttestation";
 
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
@@ -41,7 +42,8 @@ const GetStarted = () => {
             />
           )}
           {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
-          {step === 3 && <LoanAmountComp />}
+          {step === 3 && <LoanAmountComp handleNextStep={handleNextStep} />}
+          {step === 4 && <ApplicantsAttestation />}
         </main>
       </div>
     </div>
diff --git a/src/components/GetStarted/LoanAmountComp.tsx b/src/components/GetStarted/LoanAmountComp.tsx
index 6ee210f..1e7e386 100644
--- a/src/components/GetStarted/LoanAmountComp.tsx
+++ b/src/components/GetStarted/LoanAmountComp.tsx
@@ -1,12 +1,16 @@
 import React from "react";
-import { InputCompOne } from "..";
+import { Button, InputCompOne } from "..";
 
 interface SliderProps {
-    handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    value: number;
-  }
+  handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: number;
+}
 
-const LoanAmountComp: React.FC = () => {
+interface LoanAmountProps {
+  handleNextStep: any;
+}
+
+const LoanAmountComp: React.FC<LoanAmountProps> = ({ handleNextStep }) => {
   const [value, setValue] = React.useState(6);
 
   const handleSliderChange = (e: any) => {
@@ -15,11 +19,11 @@ const LoanAmountComp: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
-        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+      <div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
+        <h1 className="font-semibold text-[38px] text-[#5C2684] my-[8px]">
           Loan Amount
         </h1>
-        <div className="flex flex-col gap-[.4375rem]">
+        <div className="flex flex-col gap-[7px]">
           <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
             For more enquiries and support
           </p>
@@ -31,44 +35,44 @@ const LoanAmountComp: React.FC = () => {
           </p>
         </div>
       </div>
-      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem] mb-[2.5rem]">
+      <div className="flex flex-col gap-[45px] justify-center ml-[40px] mb-[40px]">
         <InputCompOne
-          parentClass="max-w-[471px] w-full"
+          parentClass="max-w-[29.4375rem] w-full"
           label="Your Monthly Salary*"
           name="salary"
           parentInputClass="w-full"
-          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
           input
-          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
+          inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-4"
           placeholder="150,000"
         />
 
-        <div className="w-full border-[3px] rounded-xl border-black min-h-[55.25rem] py-4 px-8 max-w-[49rem]">
-          <p className="leading-[1.375rem] tracking-[3%] text-[#5C2684] w-[45.5625rem] mb-[42px]">
+        <div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
+          <p className="leading-[22px] tracking-[3%] text-[#5C2684] w-[729px] mb-[2.625rem]">
             The maximum amount you can apply for on this offer is based on the
             information you shared with us in your loan application. We have
             made this offer to suit your monthly remuneration and to enable you
             pay your loan on-time
           </p>
           <InputCompOne
-            parentClass="max-w-[733px] w-full mb-3"
+            parentClass="max-w-[45.8125rem] w-full mb-3"
             label="How much do you want to apply for?"
             name="loan"
             parentInputClass="w-full"
-            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
             input
-            inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-9"
+            inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-9"
             placeholder="350,000"
           />
           <div className="flex items-center justify-between w-full">
-            <div className=" h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
+            <div className=" h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
               <span>Minimum Offer:</span>
               <p>
                 <b>N</b>100,000
               </p>
             </div>
 
-            <div className="h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
+            <div className="h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
               <span>Maximum Offer:</span>
               <p>
                 <b>N</b>500,000
@@ -79,13 +83,16 @@ const LoanAmountComp: React.FC = () => {
           <Slider handleSliderChange={handleSliderChange} value={value} />
 
           <div className="w-full flex items-center justify-center flex-col">
-            <div className="w-[17.4375rem] h-[8.125rem] mb-[4.75rem] flex items-center justify-center flex-col">
+            <div className="w-[279px] h-[130px] mb-[76px] flex items-center justify-center flex-col">
               <p className="text-[#FBB700]">Your Monthly Repayment</p>
               <p>N</p>
             </div>
-            <button className="max-w-[28.875rem] w-full bg-[#5C2684] rounded text-white h-11">
-              Submit
-            </button>
+            <Button
+              className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
+              text="Submit"
+              type="button"
+              onClick={handleNextStep}
+            />
           </div>
         </div>
       </div>
@@ -95,7 +102,7 @@ const LoanAmountComp: React.FC = () => {
 
 export default LoanAmountComp;
 
-const Slider: React.FC<SliderProps>  = ({ handleSliderChange, value }) => {
+const Slider: React.FC<SliderProps> = ({ handleSliderChange, value }) => {
   return (
     <div className="flex flex-col items-start mt-11 mb-16">
       <p className="text-lg font-semibold">For how many months?</p>