Skip to content

Commit 6d45cf9

Browse files
w3bdesignw3bdesign
committed
Complete work on form styling of Billing
1 parent 93bb42d commit 6d45cf9

File tree

4 files changed

+47
-297
lines changed

4 files changed

+47
-297
lines changed

‎components/Checkout/Billing.component.jsx

Lines changed: 42 additions & 275 deletions
Original file line numberDiff line numberDiff line change
@@ -5,212 +5,9 @@ const countryList = [{ countryCode: 'NO', countryName: 'Norge' }];
55
const Billing = ({ input, handleOnChange }) => {
66
return (
77
<>
8-
<div className="row">
9-
<div className="p-0 pr-2 col-lg-6 col-md-12">
10-
<div className="form-group">
11-
<label htmlFor="first-name">
12-
Fornavn
13-
<abbr className="required" title="required">
14-
*
15-
</abbr>
16-
</label>
17-
<input
18-
onChange={handleOnChange}
19-
value={input.firstName}
20-
type="text"
21-
name="firstName"
22-
id="first-name"
23-
/>
24-
<Error errors={input.errors} fieldName={'firstName'} />
25-
</div>
26-
</div>
27-
<div className="p-0 col-lg-6 col-sm-12">
28-
<div className="form-group">
29-
<label htmlFor="last-name">
30-
Etternavn
31-
<abbr className="required" title="required">
32-
*
33-
</abbr>
34-
</label>
35-
<input
36-
onChange={handleOnChange}
37-
value={input.lastName}
38-
type="text"
39-
name="lastName"
40-
className="form-control woo-next-checkout-input"
41-
id="last-name"
42-
/>
43-
<Error errors={input.errors} fieldName={'lastName'} />
44-
</div>
45-
</div>
46-
</div>
47-
{/* Company Name */}
48-
<div className="form-group">
49-
<label htmlFor="first-name">Firma</label>
50-
<input
51-
onChange={handleOnChange}
52-
value={input.company}
53-
type="text"
54-
name="company"
55-
className="form-control woo-next-checkout-input"
56-
id="first-name"
57-
/>
58-
<Error errors={input.errors} fieldName={'company'} />
59-
</div>
60-
{/* Country */}
61-
<div className="form-group">
62-
<label htmlFor="country-select">
63-
Land
64-
<abbr className="required" title="required">
65-
*
66-
</abbr>
67-
</label>
68-
<select
69-
onChange={handleOnChange}
70-
value={input.country}
71-
name="country"
72-
className="form-control woo-next-checkout-input"
73-
id="country-select"
74-
>
75-
<option value="">Velg ditt land ...</option>
76-
{countryList.length &&
77-
countryList.map((country, index) => (
78-
<option key={`${country}-${index}`} value={country.countryCode}>
79-
{country.countryName}
80-
</option>
81-
))}
82-
</select>
83-
<Error errors={input.errors} fieldName={'country'} />
84-
</div>
85-
{/* Street Address */}
86-
<div className="form-group">
87-
<label htmlFor="street-address">
88-
Addresse
89-
<abbr className="required" title="required">
90-
*
91-
</abbr>
92-
</label>
93-
<input
94-
type="text"
95-
onChange={handleOnChange}
96-
value={input.address1}
97-
name="address1"
98-
placeholder="Gateaddresse"
99-
className="form-control woo-next-checkout-input"
100-
id="street-address"
101-
/>
102-
<Error errors={input.errors} fieldName={'address1'} />
103-
<br />
104-
<input
105-
type="text"
106-
onChange={handleOnChange}
107-
value={input.address2}
108-
name="address2"
109-
placeholder="Apartment, suite, unit etc.(optional)"
110-
className="form-control woo-next-checkout-input"
111-
id="first-name"
112-
/>
113-
</div>
114-
{/* Town/City */}
115-
<div className="form-group">
116-
<label htmlFor="city">
117-
By
118-
<abbr className="required" title="required">
119-
*
120-
</abbr>
121-
</label>
122-
<input
123-
onChange={handleOnChange}
124-
value={input.city}
125-
type="text"
126-
name="city"
127-
className="form-control woo-next-checkout-input"
128-
id="city"
129-
/>
130-
<Error errors={input.errors} fieldName={'city'} />
131-
</div>
132-
{/* County */}
133-
<div className="form-group">
134-
<label htmlFor="state">
135-
Fylke
136-
<abbr className="required" title="required">
137-
*
138-
</abbr>
139-
</label>
140-
<input
141-
onChange={handleOnChange}
142-
value={input.state}
143-
type="text"
144-
name="state"
145-
className="form-control woo-next-checkout-input"
146-
id="state"
147-
/>
148-
<Error errors={input.errors} fieldName={'state'} />
149-
</div>
150-
{/* Post Code */}
151-
<div className="form-group">
152-
<label htmlFor="post-code">
153-
Postnummer
154-
<abbr className="required" title="required">
155-
*
156-
</abbr>
157-
</label>
158-
<input
159-
onChange={handleOnChange}
160-
value={input.postcode}
161-
type="text"
162-
name="postcode"
163-
className="form-control woo-next-checkout-input"
164-
id="post-code"
165-
/>
166-
<Error errors={input.errors} fieldName={'postcode'} />
167-
</div>
168-
{/*Phone & Email*/}
169-
<div className="row">
170-
<div className="p-0 pr-2 col-lg-6 col-md-12">
171-
<div className="form-group">
172-
<label htmlFor="phone">
173-
Telefon
174-
<abbr className="required" title="required">
175-
*
176-
</abbr>
177-
</label>
178-
<input
179-
onChange={handleOnChange}
180-
value={input.phone}
181-
type="text"
182-
name="phone"
183-
className="form-control woo-next-checkout-input"
184-
id="phone"
185-
/>
186-
<Error errors={input.errors} fieldName={'phone'} />
187-
</div>
188-
</div>
189-
<div className="p-0 col-lg-6 col-sm-12">
190-
<div className="form-group">
191-
<label htmlFor="email">
192-
Epost
193-
<abbr className="required" title="required">
194-
*
195-
</abbr>
196-
</label>
197-
<input
198-
onChange={handleOnChange}
199-
value={input.email}
200-
type="email"
201-
name="email"
202-
className="form-control woo-next-checkout-input"
203-
id="email"
204-
/>
205-
<Error errors={input.errors} fieldName={'email'} />
206-
</div>
207-
</div>
208-
</div>
209-
210-
<br />
211-
2128
{
2139
// https://tailwindcss.com/components/forms/#
10+
// https://react-hook-form.com/get-started#Quickstart
21411
}
21512

21613
<section className="relative text-gray-700 body-font">
@@ -223,8 +20,9 @@ const Billing = ({ input, handleOnChange }) => {
22320
<div className="mx-auto lg:w-1/2 md:w-2/3">
22421
<div className="flex flex-wrap -m-2">
22522
<div className="w-1/2 p-2">
23+
<label className="pb-4">Fornavn</label>
22624
<input
227-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
25+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
22826
placeholder="Fornavn"
22927
type="text"
23028
onChange={handleOnChange}
@@ -235,8 +33,9 @@ const Billing = ({ input, handleOnChange }) => {
23533
<Error errors={input.errors} fieldName={'firstName'} />
23634
</div>
23735
<div className="w-1/2 p-2">
36+
<label className="pb-4">Etternavn</label>
23837
<input
239-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
38+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
24039
placeholder="Etternavn"
24140
type="text"
24241
onChange={handleOnChange}
@@ -246,124 +45,92 @@ const Billing = ({ input, handleOnChange }) => {
24645
/>
24746
<Error errors={input.errors} fieldName={'lastName'} />
24847
</div>
48+
24949
<div className="w-1/2 p-2">
50+
<label className="pb-4">Adresse</label>
25051
<input
251-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
252-
placeholder="Firmanavn"
253-
type="text"
254-
onChange={handleOnChange}
255-
value={input.firstName}
256-
name="company"
257-
id="company"
258-
/>
259-
<Error errors={input.errors} fieldName={'company'} />
260-
</div>
261-
<div className="w-1/2 p-2">
262-
<input
263-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
52+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
26453
placeholder="Addresse"
26554
type="text"
26655
onChange={handleOnChange}
267-
value={input.firstName}
56+
value={input.address1}
26857
name="address1"
26958
id="address1"
27059
/>
27160
<Error errors={input.errors} fieldName={'address1'} />
27261
</div>
27362

27463
<div className="w-1/2 p-2">
275-
<select
276-
onChange={handleOnChange}
277-
value={input.country}
278-
name="country"
279-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
280-
id="country-select"
281-
>
282-
<option value="">Velg ditt land ...</option>
283-
{countryList.length &&
284-
countryList.map((country, index) => (
285-
<option
286-
key={`${country}-${index}`}
287-
value={country.countryCode}
288-
>
289-
{country.countryName}
290-
</option>
291-
))}
292-
</select>
293-
<Error errors={input.errors} fieldName={'country'} />
294-
</div>
295-
296-
<div className="w-1/2 p-2">
64+
<label className="pb-4">Postnummer</label>
29765
<input
298-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
299-
placeholder="Addresse"
66+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
67+
placeholder="Postnummer"
30068
type="text"
30169
onChange={handleOnChange}
302-
value={input.firstName}
303-
name="address1"
304-
id="address1"
70+
value={input.postcode}
71+
name="postcode"
72+
id="post-code"
30573
/>
306-
<Error errors={input.errors} fieldName={'address1'} />
74+
<Error errors={input.errors} fieldName={'postcode'} />
30775
</div>
30876

30977
<div className="w-1/2 p-2">
78+
<label className="pb-4">Sted</label>
31079
<input
311-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
312-
placeholder="Addresse"
80+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
81+
placeholder="Sted"
31382
type="text"
31483
onChange={handleOnChange}
315-
value={input.firstName}
316-
name="address1"
317-
id="address1"
84+
value={input.city}
85+
name="city"
86+
id="city"
31887
/>
319-
<Error errors={input.errors} fieldName={'address1'} />
88+
<Error errors={input.errors} fieldName={'city'} />
32089
</div>
32190

32291
<div className="w-1/2 p-2">
92+
<label className="pb-4">Epost</label>
32393
<input
324-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
325-
placeholder="Addresse"
94+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
95+
placeholder="Epost"
32696
type="text"
32797
onChange={handleOnChange}
328-
value={input.firstName}
329-
name="address1"
330-
id="address1"
98+
value={input.email}
99+
name="email"
100+
id="email"
331101
/>
332-
<Error errors={input.errors} fieldName={'address1'} />
102+
<Error errors={input.errors} fieldName={'email'} />
333103
</div>
334104

335105
<div className="w-1/2 p-2">
106+
<label className="pb-4">Telefon</label>
336107
<input
337-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
338-
placeholder="Addresse"
108+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
109+
placeholder="Telefon"
339110
type="text"
340111
onChange={handleOnChange}
341-
value={input.firstName}
342-
name="address1"
343-
id="address1"
112+
value={input.phone}
113+
name="phone"
114+
id="phone1"
344115
/>
345-
<Error errors={input.errors} fieldName={'address1'} />
116+
<Error errors={input.errors} fieldName={'phone'} />
346117
</div>
347118

348119
<div className="w-1/2 p-2">
349120
<input
350-
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
351-
placeholder="Addresse"
352-
type="text"
353-
onChange={handleOnChange}
354-
value={input.firstName}
355-
name="address1"
356-
id="address1"
121+
className="hidden"
122+
value="bacs"
123+
name="paymentMethod"
124+
type="radio"
125+
checked
357126
/>
358-
<Error errors={input.errors} fieldName={'address1'} />
359127
</div>
360128

361129
<div className="w-full p-2">
362130
<button className="flex px-4 py-2 mx-auto font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
363131
BESTILL
364132
</button>
365133
</div>
366-
367134
</div>
368135
</div>
369136
</div>

0 commit comments

Comments
 (0)