Skip to content

Commit 3078378

Browse files
gioboagioboa
committed
add AddressFrom in checkout
1 parent 33bbbba commit 3078378

File tree

4 files changed

+74
-115
lines changed

4 files changed

+74
-115
lines changed

‎src/components/AddressForm/AddressForm.tsx

+27-90
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import { component$, useSignal, useStore, useTask$ } from '@builder.io/qwik';
2-
import { Form } from '@builder.io/qwik-city';
3-
import {
4-
SfButton,
5-
SfCheckbox,
6-
SfInput,
7-
SfLoaderCircular,
8-
SfSelect,
9-
} from 'qwik-storefront-ui';
10-
import { useAddressForm } from '~/routes/layout';
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfInput, SfSelect } from 'qwik-storefront-ui';
113
import { FormHelperText } from '../Form/FormHelperText';
124
import { FormLabel } from '../Form/FormLabel';
135

@@ -26,50 +18,24 @@ export type AddressFormFields = Record<AddressFields, string>;
2618

2719
export type AddressFormProps = {
2820
type: 'billingAddress' | 'shippingAddress';
29-
savedAddress?: AddressFormFields | undefined;
21+
savedAddress: AddressFormFields;
22+
class?: string;
3023
};
3124

3225
export const AddressForm = component$<AddressFormProps>(
33-
({ type, savedAddress }) => {
34-
const addressFormAction = useAddressForm();
35-
const formRefSig = useSignal<HTMLFormElement>();
36-
useStore<{ value: AddressFormFields }>({
37-
value: {
38-
firstName: savedAddress?.firstName || '',
39-
lastName: savedAddress?.lastName || '',
40-
phone: savedAddress?.phone || '',
41-
country: savedAddress?.country || '',
42-
streetName: savedAddress?.streetName || '',
43-
streetNumber: savedAddress?.streetNumber || '',
44-
city: savedAddress?.city || '',
45-
state: savedAddress?.state || '',
46-
postalCode: savedAddress?.postalCode || '',
47-
},
48-
});
49-
const countries = ['US'];
50-
const states = ['California'];
51-
52-
useTask$(({ track }) => {
53-
const success = track(() => addressFormAction.value?.success);
54-
if (success) {
55-
if (formRefSig.value) {
56-
formRefSig.value.reset();
57-
}
58-
}
59-
});
60-
26+
({ savedAddress, class: _class }) => {
6127
return (
62-
<Form
63-
class='grid grid-cols-1 md:grid-cols-[50%_1fr_120px] gap-4'
28+
<div
29+
class={['grid grid-cols-1 md:grid-cols-[50%_1fr_120px] gap-4', _class]}
6430
data-testid='address-form'
65-
action={addressFormAction}
66-
ref={formRefSig}
6731
>
6832
<label>
6933
<FormLabel>{$localize`form.firstNameLabel`}</FormLabel>
7034
<SfInput
7135
name='firstName'
7236
autoComplete='given-name'
37+
value={savedAddress.firstName}
38+
readOnly={true}
7339
// defaultValue={addressStore.firstName} <-- fix lib <-- fix lib
7440
required
7541
/>
@@ -79,7 +45,8 @@ export const AddressForm = component$<AddressFormProps>(
7945
<SfInput
8046
name='lastName'
8147
autoComplete='family-name'
82-
// defaultValue={addressStore.lastName} <-- fix lib
48+
value={savedAddress.lastName}
49+
readOnly={true}
8350
required
8451
/>
8552
</label>
@@ -89,7 +56,8 @@ export const AddressForm = component$<AddressFormProps>(
8956
name='phone'
9057
type='tel'
9158
autoComplete='tel'
92-
// defaultValue={addressStore.phone} <-- fix lib
59+
value={savedAddress.phone}
60+
readOnly={true}
9361
required
9462
/>
9563
</label>
@@ -99,10 +67,10 @@ export const AddressForm = component$<AddressFormProps>(
9967
name='country'
10068
placeholder={$localize`form.selectPlaceholder`}
10169
autoComplete='country-name'
102-
// defaultValue={addressStore.country} <-- fix lib
70+
disabled={true}
10371
required
10472
>
105-
{countries.map((country) => (
73+
{['US'].map((country) => (
10674
<option key={country}>{country}</option>
10775
))}
10876
</SfSelect>
@@ -112,7 +80,8 @@ export const AddressForm = component$<AddressFormProps>(
11280
<SfInput
11381
name='streetName'
11482
autoComplete='address-line1'
115-
// defaultValue={// addressStore.streetName} <-- fix lib
83+
value={savedAddress.streetName}
84+
readOnly={true}
11685
required
11786
/>
11887
<FormHelperText>{$localize`form.streetNameHelp`}</FormHelperText>
@@ -121,7 +90,8 @@ export const AddressForm = component$<AddressFormProps>(
12190
<FormLabel>{$localize`form.streetNumberLabel`}</FormLabel>
12291
<SfInput
12392
name='streetNumber'
124-
// defaultValue={// addressStore.streetNumber} <-- fix lib
93+
value={savedAddress.streetNumber}
94+
readOnly={true}
12595
/>
12696
<FormHelperText>{$localize`form.streetNumberHelp`}</FormHelperText>
12797
</label>
@@ -130,7 +100,8 @@ export const AddressForm = component$<AddressFormProps>(
130100
<SfInput
131101
name='city'
132102
autoComplete='address-level2'
133-
// defaultValue={// addressStore.city} <-- fix lib
103+
value={savedAddress.city}
104+
readOnly={true}
134105
required
135106
/>
136107
</label>
@@ -139,11 +110,12 @@ export const AddressForm = component$<AddressFormProps>(
139110
<SfSelect
140111
name='state'
141112
autoComplete='address-level1'
142-
// defaultValue={// addressStore.state} <-- fix lib
113+
value={savedAddress.state}
114+
disabled={true}
143115
placeholder={$localize`form.selectPlaceholder`}
144116
required
145117
>
146-
{states.map((state) => (
118+
{['California'].map((state) => (
147119
<option key={state}>{state}</option>
148120
))}
149121
</SfSelect>
@@ -153,47 +125,12 @@ export const AddressForm = component$<AddressFormProps>(
153125
<SfInput
154126
name='postalCode'
155127
autoComplete='postal-code'
156-
// defaultValue={// addressStore.postalCode} <-- fix lib
128+
value={savedAddress.postalCode}
129+
readOnly={true}
157130
required
158131
/>
159132
</label>
160-
161-
{type === 'billingAddress' && (
162-
<label class='md:col-span-3 flex items-center gap-2'>
163-
<SfCheckbox name='useAsShipping' />
164-
{$localize`form.useAsShippingLabel`}
165-
</label>
166-
)}
167-
168-
<div class='md:col-span-3 flex justify-end gap-4'>
169-
<SfButton
170-
type='reset'
171-
onClick$={() => {
172-
if (formRefSig.value) {
173-
formRefSig.value.reset();
174-
}
175-
}}
176-
class='max-md:w-1/2'
177-
variant='secondary'
178-
>
179-
{$localize`checkout:contactInfo.clearAll`}
180-
</SfButton>
181-
<SfButton
182-
type='submit'
183-
class='w-1/2 md:w-1/6'
184-
disabled={addressFormAction.isRunning}
185-
>
186-
{addressFormAction.isRunning ? (
187-
<SfLoaderCircular
188-
class='flex justify-center items-center'
189-
size='sm'
190-
/>
191-
) : (
192-
$localize`checkout:contactInfo.save`
193-
)}
194-
</SfButton>
195-
</div>
196-
</Form>
133+
</div>
197134
);
198135
}
199136
);

‎src/locales/message.en.json

+13-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,18 @@
3535
"1719047096624561048": "Go to checkout",
3636
"6787366122454794832": "Your cart is empty",
3737
"7539114716372791901": "Browse products",
38-
"2059776914259282992": "Sale"
38+
"2059776914259282992": "Sale",
39+
"367954925859282289": "First name",
40+
"7147927515048312616": "Last name",
41+
"6206887981416426359": "Phone",
42+
"1063577823791550591": "Country",
43+
"6341994302591875311": "Address",
44+
"1268565796905963785": "eg. 49 Corbry Street",
45+
"5720064335204831738": "Number",
46+
"6757790463591546161": "eg. Apartment 2B",
47+
"981026333874286979": "City",
48+
"4863334709373043428": "State / Province",
49+
"4262324887016280796": "US",
50+
"3821572148524813829": "Postal code"
3951
}
4052
}

‎src/routes/checkout/index.tsx

+34-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$ } from '@builder.io/qwik';
22
import { Link } from '@builder.io/qwik-city';
33
import { Image } from 'qwik-image';
4+
import { AddressForm } from '~/components/AddressForm/AddressForm';
45
import { OrderSummary } from '~/components/OrderSummary/OrderSummary';
56
import { ShippingMethodSelector } from '~/components/ShippingMethodSelector/ShippingMethodSelector';
67
import { Divider } from '~/components/UI/Divider/Divider';
@@ -83,13 +84,21 @@ export default component$(() => {
8384
Add a billing address. You will receive the invoice to the
8485
email address provided above.
8586
</p>
86-
<button
87-
type='button'
88-
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed py-2 leading-6 px-4 gap-2 text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-1 ring-primary-700 hover:shadow-md active:shadow shadow hover:ring-primary-800 active:ring-primary-900 disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50 mt-4 w-full md:w-auto'
89-
data-testid='button'
90-
>
91-
Add billing address
92-
</button>
87+
<AddressForm
88+
class='mt-4'
89+
type='billingAddress'
90+
savedAddress={{
91+
firstName: 'John',
92+
lastName: 'Doe',
93+
phone: '00000000000',
94+
country: 'US',
95+
streetName: '49 Corbry Street',
96+
streetNumber: '2B',
97+
city: 'Santa Rosa',
98+
state: 'California',
99+
postalCode: '95401',
100+
}}
101+
/>
93102
</div>
94103
</div>
95104
<Divider class='w-screen md:w-auto -mx-4 md:mx-0' />
@@ -101,13 +110,21 @@ export default component$(() => {
101110
</div>
102111
<div class='w-full md:max-w-[520px]'>
103112
<p>Add a shipping address to view shipping details.</p>
104-
<button
105-
type='button'
106-
class='inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed py-2 leading-6 px-4 gap-2 text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-1 ring-primary-700 hover:shadow-md active:shadow shadow hover:ring-primary-800 active:ring-primary-900 disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50 mt-4 w-full md:w-auto'
107-
data-testid='button'
108-
>
109-
Add shipping address
110-
</button>
113+
<AddressForm
114+
class='mt-4'
115+
type='billingAddress'
116+
savedAddress={{
117+
firstName: 'John',
118+
lastName: 'Doe',
119+
phone: '00000000000',
120+
country: 'US',
121+
streetName: '49 Corbry Street',
122+
streetNumber: '2B',
123+
city: 'Santa Rosa',
124+
state: 'California',
125+
postalCode: '95401',
126+
}}
127+
/>
111128
</div>
112129
</div>
113130
<Divider class='w-screen md:w-auto -mx-4 md:mx-0' />
@@ -148,7 +165,7 @@ export default component$(() => {
148165
src='/images/paypal.svg'
149166
alt='Paypal Icon'
150167
/>
151-
<span class=''>Coming soon</span>
168+
<span>Coming soon</span>
152169
</div>
153170
</button>
154171
<button
@@ -166,7 +183,7 @@ export default component$(() => {
166183
src='/images/apple-pay.svg'
167184
alt='Apple Pay Icon'
168185
/>
169-
<span class='text-xs text-neutral-500'>Coming soon</span>
186+
<span>Coming soon</span>
170187
</div>
171188
</button>
172189
<button
@@ -184,7 +201,7 @@ export default component$(() => {
184201
src='/images/google-pay.svg'
185202
alt='Google Pay icon'
186203
/>
187-
<span class='text-xs text-neutral-500'>Coming soon</span>
204+
<span>Coming soon</span>
188205
</div>
189206
</button>
190207
</div>

‎src/routes/layout.tsx

-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { $, Slot, component$, useComputed$ } from '@builder.io/qwik';
22
import {
3-
routeAction$,
43
routeLoader$,
54
useLocation,
65
type RequestHandler,
@@ -13,7 +12,6 @@ import { Footer } from '~/components/Footer/Footer';
1312
import { NavbarTop } from '~/components/NavbarTop/NavbarTop';
1413
import { ScrollToTopButton } from '~/components/ScrollToTopButton/ScrollToTopButton';
1514
import { Search } from '~/components/Search/Search';
16-
import { sleep } from '~/shared/utils';
1715
import { useAppStore } from '~/store';
1816
import type { Product } from '~/types/product';
1917
import { extractLang } from '~/utils/i18n';
@@ -29,11 +27,6 @@ export const onRequest: RequestHandler = ({ request, locale }) => {
2927
locale(extractLang(request.headers.get('accept-language'), request.url));
3028
};
3129

32-
export const useAddressForm = routeAction$(async () => {
33-
await sleep(5_000);
34-
return { success: true };
35-
});
36-
3730
export const useRandomProductsLoader = routeLoader$(
3831
async ({ env }): Promise<Product[]> => {
3932
const response = await fetch(`${env.get('HOST')}/api/random-products`);

0 commit comments

Comments
 (0)