-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
form steps: contact details / funding
- Loading branch information
Showing
19 changed files
with
370 additions
and
109 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 0 additions & 3 deletions
3
client/src/containers/my-projects/form/steps/contact-details.tsx
This file was deleted.
Oops, something went wrong.
93 changes: 93 additions & 0 deletions
93
client/src/containers/my-projects/form/steps/contact-details/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { Field as FieldRFF } from 'react-final-form'; | ||
|
|
||
| import { usePathname } from 'next/navigation'; | ||
|
|
||
| import { HiOutlineArrowLeft } from 'react-icons/hi'; | ||
|
|
||
| import LinkButton from 'components/button'; | ||
| import { Input } from 'components/forms'; | ||
|
|
||
| import VisibilityLabel from '../../label'; | ||
| import FormLegend from '../../legend'; | ||
| import { ProjectSchema } from '../../validations'; | ||
|
|
||
| import PrimaryOfficeCountrySelector from './primary-office-country'; | ||
| import PrimaryOfficeStateSelector from './primary-office-state'; | ||
|
|
||
| export default function ContactDetailsStep() { | ||
| const pathname = usePathname(); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-10 pb-10"> | ||
| <div className="grid grid-cols-12 flex-col gap-2"> | ||
| <h3 className="font-display text-2.5xl col-span-12">Contact Details</h3> | ||
| {/*@todo: update text*/} | ||
| <p className="font-semibold col-span-9"> | ||
| Lorem ipsum dolor sit amet consectetur et fringilla pellentesque in ut congue at ultrices | ||
| nulla nibh dolor sit amet pellentesque consectetur. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="space-y-4"> | ||
| <FormLegend /> | ||
| <p className="font-semibold text-grey-20 flex items-center gap-1"> | ||
| <span className="align-super text-red-0">*</span> | ||
| All fields marked with a red asterisk are mandatory to fill | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-12 gap-4 items-end"> | ||
| <div className="col-span-6"> | ||
| <div className="space-y-2"> | ||
| <VisibilityLabel | ||
| labelProps={{ | ||
| htmlFor: 'country_id', | ||
| }} | ||
| required | ||
| > | ||
| Primary Office Country | ||
| </VisibilityLabel> | ||
| <PrimaryOfficeCountrySelector /> | ||
| </div> | ||
| </div> | ||
| <div className="col-span-6"> | ||
| <div className="space-y-2"> | ||
| <VisibilityLabel | ||
| labelProps={{ | ||
| htmlFor: 'stated_id', | ||
| }} | ||
| > | ||
| Primary Office State | ||
| </VisibilityLabel> | ||
| <PrimaryOfficeStateSelector /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="space-y-2"> | ||
| <VisibilityLabel | ||
| labelProps={{ | ||
| htmlFor: 'city', | ||
| }} | ||
| required | ||
| > | ||
| Primary Office City | ||
| </VisibilityLabel> | ||
| <FieldRFF<ProjectSchema['name']> name="city" type="text"> | ||
| {({ input }) => <Input {...input} id={input.name} className="h-[46px]" />} | ||
| </FieldRFF> | ||
| </div> | ||
|
|
||
| <footer className="flex justify-end"> | ||
| <LinkButton | ||
| theme="outline" | ||
| href={`${pathname}?step=project-details`} | ||
| className="flex items-center gap-2" | ||
| > | ||
| <HiOutlineArrowLeft className="w-[20px] h-[20px]" /> | ||
| <span>Project Details</span> | ||
| </LinkButton> | ||
| </footer> | ||
| </div> | ||
| ); | ||
| } |
46 changes: 46 additions & 0 deletions
46
client/src/containers/my-projects/form/steps/contact-details/primary-office-country.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| 'use client'; | ||
|
|
||
| import { ComponentProps } from 'react'; | ||
|
|
||
| import { Field as FieldRFF } from 'react-final-form'; | ||
|
|
||
| import { useSubGeographics } from 'hooks/geographics'; | ||
|
|
||
| import { ProjectSchema } from 'containers/my-projects/form/validations'; | ||
|
|
||
| import { Select } from 'components/forms'; | ||
|
|
||
| export default function PrimaryOfficeCountrySelector() { | ||
| const { | ||
| data: countries, | ||
| isFetching: countriesFetching, | ||
| isFetched: countriesFetched, | ||
| } = useSubGeographics( | ||
| { | ||
| filters: { geographic: 'countries' }, | ||
| }, | ||
| { | ||
| select: ({ data }) => data, | ||
| } | ||
| ); | ||
|
|
||
| const countriesOptions: ComponentProps<typeof Select>['options'] = | ||
| countries?.map(({ id, name }) => ({ value: id, label: name })) || []; | ||
|
|
||
| return ( | ||
| <FieldRFF<ProjectSchema['name']> name="country_id"> | ||
| {({ input }) => ( | ||
| <Select | ||
| id="country_id" | ||
| placeholder="Select an option" | ||
| theme="light" | ||
| size="base" | ||
| options={countriesOptions} | ||
| value={input.value} | ||
| loading={countriesFetching && !countriesFetched} | ||
| onSelect={input.onChange} | ||
| /> | ||
| )} | ||
| </FieldRFF> | ||
| ); | ||
| } |
74 changes: 74 additions & 0 deletions
74
client/src/containers/my-projects/form/steps/contact-details/primary-office-state.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| 'use client'; | ||
|
|
||
| import { ComponentProps, useEffect } from 'react'; | ||
|
|
||
| import { Field as FieldRFF, useForm, useFormState } from 'react-final-form'; | ||
|
|
||
| import { useSubGeographics } from 'hooks/geographics'; | ||
|
|
||
| import { ProjectSchema } from 'containers/my-projects/form/validations'; | ||
|
|
||
| import { Select } from 'components/forms'; | ||
|
|
||
| export default function PrimaryOfficeStateSelector() { | ||
| const { | ||
| values: { country_id: countryId }, | ||
| } = useFormState<ProjectSchema>(); | ||
|
|
||
| const { change, getFieldState } = useForm(); | ||
|
|
||
| const stateFieldState = getFieldState('state_id'); | ||
| const dirty = stateFieldState?.dirty; | ||
|
|
||
| const { data: countries } = useSubGeographics( | ||
| { | ||
| filters: { geographic: 'countries' }, | ||
| }, | ||
| { | ||
| select: ({ data }) => data, | ||
| } | ||
| ); | ||
|
|
||
| const isUSA = countries.find(({ id }) => id === countryId)?.code === 'USA'; | ||
|
|
||
| const { | ||
| data: states, | ||
| isFetching: statesFetching, | ||
| isFetched: statesFetched, | ||
| } = useSubGeographics( | ||
| { | ||
| filters: { geographic: 'states' }, | ||
| }, | ||
| { | ||
| select: ({ data }) => data, | ||
| enabled: isUSA, | ||
| } | ||
| ); | ||
|
|
||
| const statesOptions: ComponentProps<typeof Select>['options'] = | ||
| states?.map(({ id, name }) => ({ value: id, label: name })) || []; | ||
|
|
||
| useEffect(() => { | ||
| if (dirty && !isUSA) { | ||
| change('state_id', undefined); | ||
| } | ||
| }, [dirty, isUSA, change]); | ||
|
|
||
| return ( | ||
| <FieldRFF<ProjectSchema['name']> name="state_id"> | ||
| {({ input }) => ( | ||
| <Select | ||
| id="state_id" | ||
| placeholder="Select an option" | ||
| theme="light" | ||
| size="base" | ||
| options={statesOptions} | ||
| value={input.value} | ||
| loading={statesFetching && !statesFetched} | ||
| onSelect={input.onChange} | ||
| disabled={!isUSA} | ||
| /> | ||
| )} | ||
| </FieldRFF> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.