Skip to content

Commit a8acf18

Browse files
gioboagioboa
committed
refactor + add Footer
1 parent 7961e16 commit a8acf18

File tree

18 files changed

+573
-258
lines changed

18 files changed

+573
-258
lines changed

‎src/components/AddressForm/AddressForm.tsx

Lines changed: 166 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -9,175 +9,176 @@ import {
99
} from 'qwik-storefront-ui';
1010
import { useAddressForm } from '~/routes/layout';
1111
import { useTranslation } from '~/shared/utils';
12-
import FormHelperText from '../Form/FormHelperText';
13-
import FormLabel from '../Form/FormLabel';
12+
import { FormHelperText, FormLabel } from '../Form';
1413
import type { AddressFormFields, AddressFormProps } from './types';
1514

16-
export default component$<AddressFormProps>(({ type, savedAddress }) => {
17-
const addressFormAction = useAddressForm();
18-
const { t } = useTranslation('address');
19-
const formRefSig = useSignal<HTMLFormElement>();
20-
useStore<{ value: AddressFormFields }>({
21-
// const addressStore =
22-
value: {
23-
firstName: savedAddress?.firstName || '',
24-
lastName: savedAddress?.lastName || '',
25-
phone: savedAddress?.phone || '',
26-
country: savedAddress?.country || '',
27-
streetName: savedAddress?.streetName || '',
28-
streetNumber: savedAddress?.streetNumber || '',
29-
city: savedAddress?.city || '',
30-
state: savedAddress?.state || '',
31-
postalCode: savedAddress?.postalCode || '',
32-
},
33-
});
34-
const countries = ['US'];
35-
const states = ['California'];
15+
export const AddressForm = component$<AddressFormProps>(
16+
({ type, savedAddress }) => {
17+
const addressFormAction = useAddressForm();
18+
const { t } = useTranslation('address');
19+
const formRefSig = useSignal<HTMLFormElement>();
20+
useStore<{ value: AddressFormFields }>({
21+
// const addressStore =
22+
value: {
23+
firstName: savedAddress?.firstName || '',
24+
lastName: savedAddress?.lastName || '',
25+
phone: savedAddress?.phone || '',
26+
country: savedAddress?.country || '',
27+
streetName: savedAddress?.streetName || '',
28+
streetNumber: savedAddress?.streetNumber || '',
29+
city: savedAddress?.city || '',
30+
state: savedAddress?.state || '',
31+
postalCode: savedAddress?.postalCode || '',
32+
},
33+
});
34+
const countries = ['US'];
35+
const states = ['California'];
3636

37-
useTask$(({ track }) => {
38-
const success = track(() => addressFormAction.value?.success);
39-
if (success) {
40-
if (formRefSig.value) {
41-
formRefSig.value.reset();
37+
useTask$(({ track }) => {
38+
const success = track(() => addressFormAction.value?.success);
39+
if (success) {
40+
if (formRefSig.value) {
41+
formRefSig.value.reset();
42+
}
4243
}
43-
}
44-
});
44+
});
4545

46-
return (
47-
<Form
48-
class='grid grid-cols-1 md:grid-cols-[50%_1fr_120px] gap-4'
49-
data-testid='address-form'
50-
action={addressFormAction}
51-
ref={formRefSig}
52-
>
53-
<label>
54-
<FormLabel>{t('form.firstNameLabel')}</FormLabel>
55-
<SfInput
56-
name='firstName'
57-
autoComplete='given-name'
58-
// defaultValue={addressStore.firstName} <-- fix lib <-- fix lib
59-
required
60-
/>
61-
</label>
62-
<label class='md:col-span-2'>
63-
<FormLabel>{t('form.lastNameLabel')}</FormLabel>
64-
<SfInput
65-
name='lastName'
66-
autoComplete='family-name'
67-
// defaultValue={addressStore.lastName} <-- fix lib
68-
required
69-
/>
70-
</label>
71-
<label class='md:col-span-3'>
72-
<FormLabel>{t('form.phoneLabel')}</FormLabel>
73-
<SfInput
74-
name='phone'
75-
type='tel'
76-
autoComplete='tel'
77-
// defaultValue={addressStore.phone} <-- fix lib
78-
required
79-
/>
80-
</label>
81-
<label class='md:col-span-3'>
82-
<FormLabel>{t('form.countryLabel')}</FormLabel>
83-
<SfSelect
84-
name='country'
85-
placeholder={t('form.selectPlaceholder')}
86-
autoComplete='country-name'
87-
// defaultValue={addressStore.country} <-- fix lib
88-
required
89-
>
90-
{countries.map((country) => (
91-
<option key={country}>{country}</option>
92-
))}
93-
</SfSelect>
94-
</label>
95-
<label class='md:col-span-2'>
96-
<FormLabel>{t('form.streetNameLabel')}</FormLabel>
97-
<SfInput
98-
name='streetName'
99-
autoComplete='address-line1'
100-
// defaultValue={// addressStore.streetName} <-- fix lib
101-
required
102-
/>
103-
<FormHelperText>{t('form.streetNameHelp')}</FormHelperText>
104-
</label>
105-
<label>
106-
<FormLabel>{t('form.streetNumberLabel')}</FormLabel>
107-
<SfInput
108-
name='streetNumber'
109-
// defaultValue={// addressStore.streetNumber} <-- fix lib
110-
/>
111-
<FormHelperText>{t('form.streetNumberHelp')}</FormHelperText>
112-
</label>
113-
<label class='md:col-span-3'>
114-
<FormLabel>{t('form.cityLabel')}</FormLabel>
115-
<SfInput
116-
name='city'
117-
autoComplete='address-level2'
118-
// defaultValue={// addressStore.city} <-- fix lib
119-
required
120-
/>
121-
</label>
122-
<label class='md:col-span-2'>
123-
<FormLabel>{t('form.stateLabel')}</FormLabel>
124-
<SfSelect
125-
name='state'
126-
autoComplete='address-level1'
127-
// defaultValue={// addressStore.state} <-- fix lib
128-
placeholder={t('form.selectPlaceholder')}
129-
required
130-
>
131-
{states.map((state) => (
132-
<option key={state}>{state}</option>
133-
))}
134-
</SfSelect>
135-
</label>
136-
<label>
137-
<FormLabel>{t('form.postalCodeLabel')}</FormLabel>
138-
<SfInput
139-
name='postalCode'
140-
autoComplete='postal-code'
141-
// defaultValue={// addressStore.postalCode} <-- fix lib
142-
required
143-
/>
144-
</label>
145-
146-
{type === 'billingAddress' && (
147-
<label class='md:col-span-3 flex items-center gap-2'>
148-
<SfCheckbox name='useAsShipping' />
149-
{t('form.useAsShippingLabel')}
46+
return (
47+
<Form
48+
class='grid grid-cols-1 md:grid-cols-[50%_1fr_120px] gap-4'
49+
data-testid='address-form'
50+
action={addressFormAction}
51+
ref={formRefSig}
52+
>
53+
<label>
54+
<FormLabel>{t('form.firstNameLabel')}</FormLabel>
55+
<SfInput
56+
name='firstName'
57+
autoComplete='given-name'
58+
// defaultValue={addressStore.firstName} <-- fix lib <-- fix lib
59+
required
60+
/>
61+
</label>
62+
<label class='md:col-span-2'>
63+
<FormLabel>{t('form.lastNameLabel')}</FormLabel>
64+
<SfInput
65+
name='lastName'
66+
autoComplete='family-name'
67+
// defaultValue={addressStore.lastName} <-- fix lib
68+
required
69+
/>
70+
</label>
71+
<label class='md:col-span-3'>
72+
<FormLabel>{t('form.phoneLabel')}</FormLabel>
73+
<SfInput
74+
name='phone'
75+
type='tel'
76+
autoComplete='tel'
77+
// defaultValue={addressStore.phone} <-- fix lib
78+
required
79+
/>
80+
</label>
81+
<label class='md:col-span-3'>
82+
<FormLabel>{t('form.countryLabel')}</FormLabel>
83+
<SfSelect
84+
name='country'
85+
placeholder={t('form.selectPlaceholder')}
86+
autoComplete='country-name'
87+
// defaultValue={addressStore.country} <-- fix lib
88+
required
89+
>
90+
{countries.map((country) => (
91+
<option key={country}>{country}</option>
92+
))}
93+
</SfSelect>
94+
</label>
95+
<label class='md:col-span-2'>
96+
<FormLabel>{t('form.streetNameLabel')}</FormLabel>
97+
<SfInput
98+
name='streetName'
99+
autoComplete='address-line1'
100+
// defaultValue={// addressStore.streetName} <-- fix lib
101+
required
102+
/>
103+
<FormHelperText>{t('form.streetNameHelp')}</FormHelperText>
150104
</label>
151-
)}
105+
<label>
106+
<FormLabel>{t('form.streetNumberLabel')}</FormLabel>
107+
<SfInput
108+
name='streetNumber'
109+
// defaultValue={// addressStore.streetNumber} <-- fix lib
110+
/>
111+
<FormHelperText>{t('form.streetNumberHelp')}</FormHelperText>
112+
</label>
113+
<label class='md:col-span-3'>
114+
<FormLabel>{t('form.cityLabel')}</FormLabel>
115+
<SfInput
116+
name='city'
117+
autoComplete='address-level2'
118+
// defaultValue={// addressStore.city} <-- fix lib
119+
required
120+
/>
121+
</label>
122+
<label class='md:col-span-2'>
123+
<FormLabel>{t('form.stateLabel')}</FormLabel>
124+
<SfSelect
125+
name='state'
126+
autoComplete='address-level1'
127+
// defaultValue={// addressStore.state} <-- fix lib
128+
placeholder={t('form.selectPlaceholder')}
129+
required
130+
>
131+
{states.map((state) => (
132+
<option key={state}>{state}</option>
133+
))}
134+
</SfSelect>
135+
</label>
136+
<label>
137+
<FormLabel>{t('form.postalCodeLabel')}</FormLabel>
138+
<SfInput
139+
name='postalCode'
140+
autoComplete='postal-code'
141+
// defaultValue={// addressStore.postalCode} <-- fix lib
142+
required
143+
/>
144+
</label>
145+
146+
{type === 'billingAddress' && (
147+
<label class='md:col-span-3 flex items-center gap-2'>
148+
<SfCheckbox name='useAsShipping' />
149+
{t('form.useAsShippingLabel')}
150+
</label>
151+
)}
152152

153-
<div class='md:col-span-3 flex justify-end gap-4'>
154-
<SfButton
155-
type='reset'
156-
onClick$={() => {
157-
if (formRefSig.value) {
158-
formRefSig.value.reset();
159-
}
160-
}}
161-
class='max-md:w-1/2'
162-
variant='secondary'
163-
>
164-
{t('checkout:contactInfo.clearAll')}
165-
</SfButton>
166-
<SfButton
167-
type='submit'
168-
class='w-1/2 md:w-1/6'
169-
disabled={addressFormAction.isRunning}
170-
>
171-
{addressFormAction.isRunning ? (
172-
<SfLoaderCircular
173-
class='flex justify-center items-center'
174-
size='sm'
175-
/>
176-
) : (
177-
t('checkout:contactInfo.save')
178-
)}
179-
</SfButton>
180-
</div>
181-
</Form>
182-
);
183-
});
153+
<div class='md:col-span-3 flex justify-end gap-4'>
154+
<SfButton
155+
type='reset'
156+
onClick$={() => {
157+
if (formRefSig.value) {
158+
formRefSig.value.reset();
159+
}
160+
}}
161+
class='max-md:w-1/2'
162+
variant='secondary'
163+
>
164+
{t('checkout:contactInfo.clearAll')}
165+
</SfButton>
166+
<SfButton
167+
type='submit'
168+
class='w-1/2 md:w-1/6'
169+
disabled={addressFormAction.isRunning}
170+
>
171+
{addressFormAction.isRunning ? (
172+
<SfLoaderCircular
173+
class='flex justify-center items-center'
174+
size='sm'
175+
/>
176+
) : (
177+
t('checkout:contactInfo.save')
178+
)}
179+
</SfButton>
180+
</div>
181+
</Form>
182+
);
183+
}
184+
);

0 commit comments

Comments
 (0)