From 32f2a358b27c64329ef2b6e7a033a02e141c885e Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 20 Mar 2024 13:12:08 +0100 Subject: [PATCH 1/3] Added social links to env and added hero text to the pages --- .env | 5 + .env.development | 5 + .env.production | 5 + src/components/Footer/Footer.tsx | 8 +- src/components/GetStarted/BasicInfo.tsx | 214 +++++++++++++----- src/components/Home/Hero/PersonalHero.tsx | 12 +- .../Home/Requirements/FeatureText.tsx | 2 +- .../LetsGetStated/LetsGetStarted.tsx | 2 +- src/components/shared/InputCompOne.tsx | 2 +- src/pages/BusinessBankingPage.tsx | 7 +- src/pages/CooperateBankingPage.tsx | 19 +- src/pages/GetStartedPage.tsx | 14 +- src/pages/PersonalBankingPage.tsx | 19 +- src/utils/data.tsx | 8 +- 14 files changed, 230 insertions(+), 92 deletions(-) diff --git a/.env b/.env index 450318b..c0c1b21 100644 --- a/.env +++ b/.env @@ -1 +1,6 @@ DIGIFI_PORT=5173 + +# Social Links +FACEBOOK_URL=https://www.facebook.com +TWITTER_URL=https://twitter.com +INSTAGRAM_URL=https://www.instagram.com \ No newline at end of file diff --git a/.env.development b/.env.development index 450318b..90d9e86 100644 --- a/.env.development +++ b/.env.development @@ -1 +1,6 @@ DIGIFI_PORT=5173 + +# Social Links +VITE_FACEBOOK_URL=https://www.facebook.com +VITE_TWITTER_URL=https://twitter.com +VITE_INSTAGRAM_URL=https://www.instagram.com \ No newline at end of file diff --git a/.env.production b/.env.production index 450318b..c0c1b21 100644 --- a/.env.production +++ b/.env.production @@ -1 +1,6 @@ DIGIFI_PORT=5173 + +# Social Links +FACEBOOK_URL=https://www.facebook.com +TWITTER_URL=https://twitter.com +INSTAGRAM_URL=https://www.instagram.com \ No newline at end of file diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 3973536..7e1152f 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -4,14 +4,18 @@ import { socialsIcons } from "../../utils/data"; export default function Footer() { const date = new Date().getFullYear(); return ( -
+

{date} @ First City Monument Bank Limited

{socialsIcons.map((icon, index) => ( - + {icon.name} ))} diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index 4d6c5db..42e4a9e 100644 --- a/src/components/GetStarted/BasicInfo.tsx +++ b/src/components/GetStarted/BasicInfo.tsx @@ -7,6 +7,7 @@ interface Option { } const BasicInfo: React.FC = () => { + const [hideOTPComponent, setHideOTPComponent] = React.useState(true); const inputRef = useRef(null); // Array for marital status options @@ -33,69 +34,164 @@ const BasicInfo: React.FC = () => { }; const handleInput = (e: React.FormEvent) => { - // Handle input events - console.log(e); + if (name === "bvn") { + const regex = /^[0-9]+$/; + + if (regex.test(value)) { + if (value?.length == 10) { + setHideOTPComponent(false); + // secondInputRef.current?.focus(); + } else setHideOTPComponent(true); + } else { + console.log("object not found"); + } + } }; return ( -
-
- - - - + <> +
+
+ + + + +
-
+ {!hideOTPComponent ? ( +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ ) : null} + ); }; diff --git a/src/components/Home/Hero/PersonalHero.tsx b/src/components/Home/Hero/PersonalHero.tsx index e4b62c7..939eb40 100644 --- a/src/components/Home/Hero/PersonalHero.tsx +++ b/src/components/Home/Hero/PersonalHero.tsx @@ -7,7 +7,7 @@ interface PersonalHeroProps { body?: string; buttonLink?: string; buttonText?: string; -}; +} const PersonalHero: React.FC = ({ heading, body, @@ -16,15 +16,17 @@ const PersonalHero: React.FC = ({ }) => { return (
-
+

{heading}

-

{body}

+

{body}

- +
diff --git a/src/components/Home/Requirements/FeatureText.tsx b/src/components/Home/Requirements/FeatureText.tsx index 094cebc..0eaf8ae 100644 --- a/src/components/Home/Requirements/FeatureText.tsx +++ b/src/components/Home/Requirements/FeatureText.tsx @@ -27,7 +27,7 @@ const FeatureText = () => {
*** Click here to apply diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx index 0861078..4f774b2 100644 --- a/src/components/LetsGetStated/LetsGetStarted.tsx +++ b/src/components/LetsGetStated/LetsGetStarted.tsx @@ -26,7 +26,7 @@ const LetsGetStarted: React.FC = () => { if (regex.test(value)) { if (value?.length == 10) { setHideOTPComponent(false); - secondInputRef.current?.focus(); + // secondInputRef.current?.focus(); } else setHideOTPComponent(true); } else { console.log("object not found"); diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx index 6c79eb5..a547c63 100644 --- a/src/components/shared/InputCompOne.tsx +++ b/src/components/shared/InputCompOne.tsx @@ -39,7 +39,7 @@ const InputCompOne = forwardRef( name, tabIndex, selectValue, - input = true, + input = false, select = false, selectOptions = [], inputType = "text", diff --git a/src/pages/BusinessBankingPage.tsx b/src/pages/BusinessBankingPage.tsx index dafc39b..75592f7 100644 --- a/src/pages/BusinessBankingPage.tsx +++ b/src/pages/BusinessBankingPage.tsx @@ -5,7 +5,12 @@ import { PersonalHero } from "../components"; const BusinessBankingPage: React.FC = () => { return ( - + Business Banking ); diff --git a/src/pages/CooperateBankingPage.tsx b/src/pages/CooperateBankingPage.tsx index 9c483ab..7b35519 100644 --- a/src/pages/CooperateBankingPage.tsx +++ b/src/pages/CooperateBankingPage.tsx @@ -1,14 +1,19 @@ -import React from 'react' -import { HomeLayout } from '../layouts' -import { PersonalHero } from '../components' +import React from "react"; +import { HomeLayout } from "../layouts"; +import { PersonalHero } from "../components"; const CooperateBankingPage: React.FC = () => { return ( - + Cooperate Banking - ) -} + ); +}; -export default CooperateBankingPage +export default CooperateBankingPage; diff --git a/src/pages/GetStartedPage.tsx b/src/pages/GetStartedPage.tsx index 02f157c..71df150 100644 --- a/src/pages/GetStartedPage.tsx +++ b/src/pages/GetStartedPage.tsx @@ -1,13 +1,17 @@ import React from "react"; import { GetStarted as Main, Header, Footer } from "../components"; -const GetStartedPage :React.FC = () => { +const GetStartedPage: React.FC = () => { return ( - <> +
-
-
- +
+
+
+
+
+
+
); }; diff --git a/src/pages/PersonalBankingPage.tsx b/src/pages/PersonalBankingPage.tsx index dde2412..97679bf 100644 --- a/src/pages/PersonalBankingPage.tsx +++ b/src/pages/PersonalBankingPage.tsx @@ -1,14 +1,19 @@ -import React from 'react' -import { HomeLayout } from '../layouts' -import { PersonalHero } from '../components' +import React from "react"; +import { HomeLayout } from "../layouts"; +import { PersonalHero } from "../components"; const PersonalBankingPage: React.FC = () => { return ( - + Personal Banking - ) -} + ); +}; -export default PersonalBankingPage +export default PersonalBankingPage; diff --git a/src/utils/data.tsx b/src/utils/data.tsx index 4c122b6..5876770 100644 --- a/src/utils/data.tsx +++ b/src/utils/data.tsx @@ -9,6 +9,8 @@ import YoutubeWhite from "../assets/images/socials/youtube.svg"; import InstagramWhite from "../assets/images/socials/instagram.svg"; import { RouteHandler } from "../router/routes"; +let process = import.meta.env; + export const top_header_data = [ { id: 1, name: "HOME", href: RouteHandler.homepage }, { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking }, @@ -398,9 +400,9 @@ export const _lowerMenuItems = [ ]; export const socialsIcons = [ - { name: "facebook", image: FBook }, - { name: "twitter", image: Twitter }, - { name: "instagram", image: Instagram }, + { name: "facebook", image: FBook, link: import.meta.env.VITE_FACEBOOK_URL }, + { name: "twitter", image: Twitter, link: import.meta.env.VITE_TWITTER_URL }, + { name: "instagram", image: Instagram, link: import.meta.env.VITE_INSTAGRAM_URL }, ]; export const footerItems = [ From 1bd523c4932c89b249ce912488a380567f8cfd34 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 20 Mar 2024 13:37:49 +0100 Subject: [PATCH 2/3] added valid types --- src/components/GetStarted/BasicInfo.tsx | 58 ++++++++++++++++--------- src/components/shared/InputCompOne.tsx | 4 +- src/utils/data.tsx | 6 +-- 3 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index 42e4a9e..c05b2cb 100644 --- a/src/components/GetStarted/BasicInfo.tsx +++ b/src/components/GetStarted/BasicInfo.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import React, { useRef, useState } from "react"; import InputCompOne from "../shared/InputCompOne"; interface Option { @@ -7,7 +7,19 @@ interface Option { } const BasicInfo: React.FC = () => { - const [hideOTPComponent, setHideOTPComponent] = React.useState(true); + const [hideOTPComponent, setHideOTPComponent] = useState(true); + const [inputValues, setInputValues] = useState({ + title: "", + marital: "", + agentId: "", + bvn: "", + firstName: "", + phone: "", + email: "", + surname: "", + dob: "", + secondName: "", + }); const inputRef = useRef(null); // Array for marital status options @@ -29,16 +41,19 @@ const BasicInfo: React.FC = () => { ]; const handleChange = (e: React.ChangeEvent) => { - // Handle input value changes - console.log(e.target.value); + const { name, value } = e.target; + + setInputValues((prev) => ({ ...prev, [name]: value })); }; const handleInput = (e: React.FormEvent) => { + const { name, value } = e.currentTarget; + if (name === "bvn") { const regex = /^[0-9]+$/; if (regex.test(value)) { - if (value?.length == 10) { + if (value?.length === 10) { setHideOTPComponent(false); // secondInputRef.current?.focus(); } else setHideOTPComponent(true); @@ -60,7 +75,7 @@ const BasicInfo: React.FC = () => { select selectClass="w-full h-[36px] rounded-[12px]" selectOptions={titleOptions} - value="" + value={inputValues.title} onChange={handleChange} ref={inputRef} /> @@ -72,7 +87,7 @@ const BasicInfo: React.FC = () => { select selectClass="w-full h-[36px] rounded-[12px]" selectOptions={maritalStatusOptions} - value="" + value={inputValues.marital} onChange={handleChange} onInput={handleInput} ref={inputRef} @@ -85,7 +100,7 @@ const BasicInfo: React.FC = () => { select selectClass="w-full h-[36px] rounded-[12px]" selectOptions={[{ value: "", label: "Select" }]} - value="" + value={inputValues.agentId} onChange={handleChange} onInput={handleInput} ref={inputRef} @@ -100,10 +115,11 @@ const BasicInfo: React.FC = () => { labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]" input inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" - value="" + value={inputValues.bvn} onChange={handleChange} onInput={handleInput} ref={inputRef} + maxLength={10} />
@@ -113,36 +129,36 @@ const BasicInfo: React.FC = () => {
{
) => void; - onInput: (e: React.FormEvent) => void; + onChange?: (e: React.ChangeEvent) => void; + onInput?: (e: React.FormEvent) => void; name: string; tabIndex?: number; ref?: React.RefObject; diff --git a/src/utils/data.tsx b/src/utils/data.tsx index 5876770..eebfefd 100644 --- a/src/utils/data.tsx +++ b/src/utils/data.tsx @@ -400,9 +400,9 @@ export const _lowerMenuItems = [ ]; export const socialsIcons = [ - { name: "facebook", image: FBook, link: import.meta.env.VITE_FACEBOOK_URL }, - { name: "twitter", image: Twitter, link: import.meta.env.VITE_TWITTER_URL }, - { name: "instagram", image: Instagram, link: import.meta.env.VITE_INSTAGRAM_URL }, + { name: "facebook", image: FBook, link: process.VITE_FACEBOOK_URL }, + { name: "twitter", image: Twitter, link: process.VITE_TWITTER_URL }, + { name: "instagram", image: Instagram, link: process.VITE_INSTAGRAM_URL }, ]; export const footerItems = [ From 97e6951685b1189efb235ca0437d3f73503acf3c Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 20 Mar 2024 14:00:17 +0100 Subject: [PATCH 3/3] added Enter Btn --- src/components/GetStarted/BasicInfo.tsx | 171 ++++++++++++------------ 1 file changed, 89 insertions(+), 82 deletions(-) diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index c05b2cb..e2ced5f 100644 --- a/src/components/GetStarted/BasicInfo.tsx +++ b/src/components/GetStarted/BasicInfo.tsx @@ -73,7 +73,7 @@ const BasicInfo: React.FC = () => { parentInputClass="max-w-[224px] w-full" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" select - selectClass="w-full h-[36px] rounded-[12px]" + selectClass="w-full h-[36px] rounded-[6px]" selectOptions={titleOptions} value={inputValues.title} onChange={handleChange} @@ -85,7 +85,7 @@ const BasicInfo: React.FC = () => { parentInputClass="max-w-[224px] w-full" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" select - selectClass="w-full h-[36px] rounded-[12px]" + selectClass="w-full h-[36px] rounded-[6px]" selectOptions={maritalStatusOptions} value={inputValues.marital} onChange={handleChange} @@ -98,7 +98,7 @@ const BasicInfo: React.FC = () => { parentInputClass="max-w-[224px] w-full" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" select - selectClass="w-full h-[36px] rounded-[12px]" + selectClass="w-full h-[36px] rounded-[6px]" selectOptions={[{ value: "", label: "Select" }]} value={inputValues.agentId} onChange={handleChange} @@ -114,7 +114,7 @@ const BasicInfo: React.FC = () => { placeholder="Enter your BVN" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]" input - inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" + inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]" value={inputValues.bvn} onChange={handleChange} onInput={handleInput} @@ -124,86 +124,93 @@ const BasicInfo: React.FC = () => {
{!hideOTPComponent ? ( -
-
-
- - - +
+
+
+
+ + + +
+
+
+
+ + + +
-
-
- - - -
+
+
) : null}