Skip to content

Commit

Permalink
Fix credit score on Urbanscape form.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gasher
gasher committed Nov 5, 2024
1 parent bbb0972 commit 89924db
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 41 deletions.
15 changes: 9 additions & 6 deletions components/org/quotient/bank-credentials.jsx
View file
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
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
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
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
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

0 comments on commit 89924db

Please sign in to comment.