Skip to content

Commit bc46330

Browse files
w3bdesignw3bdesign
committed
Add basic Billing setup, need to style it
1 parent cc0b8dd commit bc46330

File tree

2 files changed

+216
-2
lines changed

2 files changed

+216
-2
lines changed

‎components/Checkout/Billing.component.jsx

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

‎components/Checkout/Error.component.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const Error = ( { errors, fieldName } ) => {
2+
3+
return(
4+
errors && ( errors.hasOwnProperty( fieldName ) ) ? (
5+
<div className="invalid-feedback d-block">{ errors[fieldName] }</div>
6+
) : ''
7+
)
8+
};
9+
10+
export default Error;

0 commit comments

Comments
 (0)