Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix credit score on Urbanscape form. #47

Merged
merged 1 commit into from
Nov 11, 2024
Merged

Fix credit score on Urbanscape form. #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions components/org/quotient/bank-credentials.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ const credentials = {
},
};

const CredentialCards = ({ onlyCreditScore = false, required = false }) => {
const CredentialCards = ({ onlyCreditScore = false, required = false, filteredCredentials }) => {
const verified = qrCodeStore((state) => state.verified);
const filteredCredentialsEntries = filteredCredentials ?
Object.entries(credentials).filter(([key]) => filteredCredentials.includes(key)) :
Object.entries(credentials);

return (
<>
Expand All @@ -29,21 +32,21 @@ const CredentialCards = ({ onlyCreditScore = false, required = false }) => {

{
onlyCreditScore ?
<div className='flex items-center justify-between p-4 border rounded-2xl shadow-lg bg-white w-full'>
<div className='flex items-center justify-between w-full p-4 bg-white border shadow-lg rounded-2xl'>
<div>
<h2 className='font-bold'>{credentials.credit.title}</h2>
<p className='text-sm font-medium'>{credentials.credit.description}</p>
</div>
{verified && <Check className='text-green-600 h-6 w-6' />}
{verified && <Check className='w-6 h-6 text-green-600' />}
</div>
:
Object.entries(credentials).map(([key, value], index) => (
<div key={index} className='flex items-center justify-between p-4 border rounded-2xl shadow-lg bg-white w-full'>
filteredCredentialsEntries.map(([key, value], index) => (
<div key={index} className='flex items-center justify-between w-full p-4 bg-white border shadow-lg rounded-2xl'>
<div>
<h2 className='font-bold'>{value.title}</h2>
<p className='text-sm font-medium'>{value.description}</p>
</div>
{verified && <Check className='text-green-600 h-6 w-6' />}
{verified && <Check className='w-6 h-6 text-green-600' />}
</div>
))
}
Expand Down
26 changes: 13 additions & 13 deletions components/org/urbanscape/urbanscape-success.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,31 +43,31 @@ const UrbanscapeSuccess = () => {
return (
<div>
<div className='my-4'>
<h2 className='text-4xl text-urban font-semibold'>You have been approved!</h2>
<p className='font-semibold text-base'>To reserve your new appartment home, please pay total amount due now.</p>
<h2 className='text-4xl font-semibold text-urban'>You have been approved!</h2>
<p className='text-base font-semibold'>To reserve your new appartment home, please pay total amount due now.</p>
</div>
<div className='flex gap-4 flex-wrap'>
<div className='flex-1 w-full xl:w-2/3 md:w-2/3 space-y-5'>
<div className='flex flex-wrap gap-4'>
<div className='flex-1 w-full space-y-5 xl:w-2/3 md:w-2/3'>
<div className='border rounded-lg'>
<div className='border-b p-3 flex items-center justify-between'>
<div className='flex items-center justify-between p-3 border-b'>
<p className='font-bold'>2 bedroom 2 bath with city view</p>
<CheckCircle2 className='text-white bg-urban rounded-full' />
<CheckCircle2 className='text-white rounded-full bg-urban' />
</div>
<div className='p-3'>
<div className='flex space-x-1 items-center'>
<div className='flex items-center space-x-1'>
<h2 className='text-2xl font-bold'>$2,550</h2>
<p className='text-sm'>per month</p>
</div>
<p className='text-sm'>Includes use of all common area, pool, gym and parks.</p>
</div>
</div>
<div className='border rounded-lg'>
<div className='border-b p-3 flex items-center justify-between'>
<div className='flex items-center justify-between p-3 border-b'>
<p className='font-bold'>Deposit</p>
<CheckCircle2 className='text-white bg-urban rounded-full' />
<CheckCircle2 className='text-white rounded-full bg-urban' />
</div>
<div className='p-3 space-y-2'>
<div className='flex space-x-1 items-center'>
<div className='flex items-center space-x-1'>
<h2 className='text-2xl font-bold'>{isWaived ? '$0' : '$1,440' }</h2>
<p className='text-sm'>one time</p>
</div>
Expand All @@ -88,14 +88,14 @@ const UrbanscapeSuccess = () => {
<div className='space-y-3'>
<p className='font-bold'>TOTAL DUE NOW:</p>
<p className='text-3xl font-semibold text-green'>{isWaived ? ('$2,550') : ('$3,990')}</p>
<Button className='bg-cyan-700 text-sm p-6 px-6 font-semibold'>Pay Now</Button>
<Button className='p-6 px-6 text-sm font-semibold bg-cyan-700'>Pay Now</Button>
</div>
<Separator />
<div className='space-y-4'>
<p>{'Urbanscape is a part of the IdentityClarity\'s ecosystem called clarity partners.'}</p>
<Link href='/partners' target='_blank'>
<a target='_blank' rel='noopener noreferrer'>
<div className='w-2/4 cursor-pointer mt-5 mb-5'>
<div className='w-2/4 mt-5 mb-5 cursor-pointer'>
<Image src={'/clarity_partners.png'} alt='clarity_partners' width={230} height={36} />
</div>
</a>
Expand All @@ -104,7 +104,7 @@ const UrbanscapeSuccess = () => {
</div>
{ !isWaived ?
(
<div className='flex-2 w-full md:w-1/3 xl:w-1/3'>
<div className='w-full flex-2 md:w-1/3 xl:w-1/3'>
<QrCodeAuthentication
required={true}
onlyCreditScore={true}
Expand Down
18 changes: 9 additions & 9 deletions components/qrcode/qr-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,28 @@ import { RefreshCw } from 'lucide-react';
import { useVerifyProof } from 'hooks/useVerifyProof';
import CredentialCards from '../org/quotient/bank-credentials';

const QrCodeAuthentication = ({ proofTemplateId, title = '', qrText = '', qrTextAfter = '', onlyCreditScore = false, required = true }) => {
const QrCodeAuthentication = ({ proofTemplateId, title = '', qrText = '', qrTextAfter = '', onlyCreditScore = false, required = true, filteredCredentials }) => {
const verified = qrCodeStore((state) => state.verified);
const { refetch } = useQrCode({ proofTemplateId });
useVerifyProof();

return (
<div className='bg-neutral-50 rounded-lg space-y-5 h-fit p-5'>
<div className='p-5 space-y-5 rounded-lg bg-neutral-50 h-fit'>
{(title !== null && title !== '') && <div>
<h2 className='font-semibold mb-5'>{title}</h2>
<h2 className='mb-5 font-semibold'>{title}</h2>
<Separator />
</div>
}
{!verified ? (
<>
{(qrText !== null && qrText !== '') && (
<div>
<h2 className='text-2xl font-semibold mb-5'>{qrText}</h2>
<h2 className='mb-5 text-2xl font-semibold'>{qrText}</h2>
</div>
)}

<VerifyQrCode proofTemplateId={proofTemplateId} />
<div className='m-auto ta-c relative w-fit'>
<div className='relative m-auto ta-c w-fit'>
<Image
src={'/clarity_partners.png'}
alt='clarity_partners'
Expand All @@ -39,19 +39,19 @@ const QrCodeAuthentication = ({ proofTemplateId, title = '', qrText = '', qrText
</div>
{(qrTextAfter !== null && qrTextAfter !== '') && (
<div>
<p className='text-start font-semibold mb-5'>{qrTextAfter}</p>
<p className='mb-5 font-semibold text-start'>{qrTextAfter}</p>
<Separator />
</div>
)}
</>
) :
<div className='m-auto ta-c relative w-fit'>
<RefreshCw className='h-7 w-7 text-urban cursor-pointer' onClick={() => refetch()} />
<div className='relative m-auto ta-c w-fit'>
<RefreshCw className='cursor-pointer h-7 w-7 text-urban' onClick={() => refetch()} />
</div>
}

<div>
<CredentialCards onlyCreditScore={onlyCreditScore} required={required} />
<CredentialCards onlyCreditScore={onlyCreditScore} required={required} filteredCredentials={filteredCredentials} />
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions data/qrcode-text-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ const qrCodeVerificationData = {
qrTextAfter: 'You will be required to provide a biometric on your mobile device in order to receive these credentials.'
},
URBAN_BANKBIO: {
title: 'Automate approval by using your mobile banking app to complete this form with verified information. Approval guaranteed with a credit score over 600.',
title: null,
qrText: 'Scan the QR code below with your Quotient mobile banking app.',
qrTextAfter: null
},
URBAN_CREDITSCORE: {
title: null,
title: 'Automate approval by using your mobile banking app to complete this form with verified information. Approval guaranteed with a credit score over 700.',
qrText: 'Scan QR code with your mobile app to see if you qualify for a waived deposit.',
qrTextAfter: null
},
Expand Down
23 changes: 12 additions & 11 deletions pages/org/urbanscape/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,22 +158,22 @@ const UrbanScapePage = () => {
<title>Urbanscape - Application for Apartment</title>
</Head>
<Header />
<div className='p-4 min-h-screen mainContainer'>
<div className='min-h-screen p-4 mainContainer'>
{isSuccess ? (
<UrbanscapeSuccess />
) : (
<>
<div className='mb-4 mt-2'>
<h2 className='font-medium text-3xl text-slate-700'>Application for Apartment</h2>
<p className='font-medium text-base'>Auto fill this form by using your banking app. Scan the QR Code on the right.</p>
<div className='mt-2 mb-4'>
<h2 className='text-3xl font-medium text-slate-700'>Application for Apartment</h2>
<p className='text-base font-medium'>Auto fill this form by using your banking app. Scan the QR Code on the right.</p>
</div>
<Form {...form}>
<form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
<div className='flex gap-4 flex-wrap'>
<div className='flex-1 w-full xl:w-2/3 md:w-2/3 space-y-4'>
<div className='flex flex-wrap gap-4'>
<div className='flex-1 w-full space-y-4 xl:w-2/3 md:w-2/3'>
<div className='space-y-2'>
<h2 className='text-urban font-bold'>APPLICANT INFORMATION</h2>
<div className='p-4 bg-neutral-50 rounded-lg space-y-5'>
<h2 className='font-bold text-urban'>APPLICANT INFORMATION</h2>
<div className='p-4 space-y-5 rounded-lg bg-neutral-50'>
<FormFieldApplicantId control={form.control} applicant={applicant} />
<Separator />
<FormFieldAddress control={form.control} applicant={applicant} />
Expand All @@ -184,26 +184,27 @@ const UrbanScapePage = () => {

<div>
<h2 className='font-semibold'>NAMES AND AGES OF ALL PERSONS TO OCCUPY APARTMENT</h2>
<div className='p-4 bg-neutral-50 rounded-lg space-y-5'>
<div className='p-4 space-y-5 rounded-lg bg-neutral-50'>
<FormFieldOccupants control={form.control} />
</div>
</div>

</div>
<div className='flex-2 w-full md:w-1/3 xl:w-1/3'>
<div className='w-full flex-2 md:w-1/3 xl:w-1/3'>
<QrCodeAuthentication
required={true}
proofTemplateId={proofTemplateId}
title={qrCodeVerificationData.URBAN_BANKBIO.title}
qrText={qrCodeVerificationData.URBAN_BANKBIO.qrText}
qrTextAfter={qrCodeVerificationData.URBAN_BANKBIO.qrTextAfter}
filteredCredentials={['biometric', 'loan']}
/>
</div>
</div>

<div className='mt-3'>
<Button
className='col-span-2 w-fit md:place-self-end px-10 bg-emerald-700 text-lg'
className='col-span-2 px-10 text-lg w-fit md:place-self-end bg-emerald-700'
type='submit'>
Submit Application
</Button>
Expand Down
Loading