Skip to content

Commit bdeada6

Browse files
w3bdesignw3bdesign
authored
Merge pull request #424 from w3bdesign/develop
Upgraded React Hook Form to v7.0.1
2 parents b96c482 + 6618aa3 commit bdeada6

File tree

4 files changed

+117
-125
lines changed

4 files changed

+117
-125
lines changed

‎components/Checkout/Billing.component.jsx

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,32 @@
11
import { useForm } from 'react-hook-form';
22

3-
const Input = ({
4-
name,
5-
label,
6-
register,
7-
placeholder,
8-
value,
9-
parameters,
10-
type = 'text',
11-
readOnly = false,
12-
}) => (
13-
<>
14-
<label className="pb-4">{label}</label>
15-
<input
16-
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
17-
name={name}
18-
placeholder={placeholder}
19-
type="text"
20-
value={value}
21-
ref={register(parameters)}
22-
type={type}
23-
readOnly={readOnly}
24-
/>
25-
</>
26-
);
27-
283
const Billing = ({ onSubmit }) => {
29-
const { register, handleSubmit, formState: { errors } } = useForm();
4+
const inputClasses =
5+
'w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black';
6+
const {
7+
register,
8+
handleSubmit,
9+
formState: { errors },
10+
} = useForm();
3011

3112
return (
3213
<>
3314
<section className="text-gray-700">
3415
<form onSubmit={handleSubmit(onSubmit)}>
35-
<div className="container p-4 py-2 mx-auto">
16+
<div className="container p-4 py-2 mx-auto">
3617
<div className="mx-auto lg:w-1/2 md:w-2/3">
3718
<div className="flex flex-wrap -m-2">
3819
<div className="w-1/2 p-2">
39-
<Input
20+
<label className="pb-4">Fornavn</label>
21+
<input
22+
className={inputClasses}
4023
name="firstName"
4124
placeholder="Fornavn"
4225
label="Fornavn"
43-
register={register}
44-
parameters={{ required: 'Dette feltet er påkrevd' }}
26+
type="text"
27+
{...register('firstName', {
28+
required: 'Dette feltet er påkrevd',
29+
})}
4530
/>
4631
{errors.firstName && (
4732
<span className="text-red-500">
@@ -50,12 +35,16 @@ const Billing = ({ onSubmit }) => {
5035
)}
5136
</div>
5237
<div className="w-1/2 p-2">
53-
<Input
38+
<label className="pb-4">Etternavn</label>
39+
<input
40+
className={inputClasses}
5441
name="lastName"
5542
placeholder="Etternavn"
5643
label="Etternavn"
57-
register={register}
58-
parameters={{ required: 'Dette feltet er påkrevd' }}
44+
type="text"
45+
{...register('lastName', {
46+
required: 'Dette feltet er påkrevd',
47+
})}
5948
/>
6049
{errors.lastName && (
6150
<span className="text-red-500">
@@ -64,12 +53,16 @@ const Billing = ({ onSubmit }) => {
6453
)}
6554
</div>
6655
<div className="w-1/2 p-2">
67-
<Input
56+
<label className="pb-4">Addresse</label>
57+
<input
58+
className={inputClasses}
6859
name="address1"
6960
placeholder="Adresse"
7061
label="Adresse"
71-
register={register}
72-
parameters={{ required: 'Dette feltet er påkrevd' }}
62+
type="text"
63+
{...register('address1', {
64+
required: 'Dette feltet er påkrevd',
65+
})}
7366
/>
7467
{errors.address1 && (
7568
<span className="text-red-500">
@@ -78,12 +71,14 @@ const Billing = ({ onSubmit }) => {
7871
)}
7972
</div>
8073
<div className="w-1/2 p-2">
81-
<Input
74+
<label className="pb-4">Addresse</label>
75+
<input
76+
className={inputClasses}
8277
name="postcode"
8378
placeholder="Postnummer"
8479
label="Postnummer"
85-
register={register}
86-
parameters={{
80+
type="text"
81+
{...register('postcode', {
8782
required: 'Dette feltet er påkrevd',
8883
minLength: {
8984
value: 4,
@@ -97,7 +92,7 @@ const Billing = ({ onSubmit }) => {
9792
value: /^[0-9]+$/i,
9893
message: 'Postnummer må bare være tall',
9994
},
100-
}}
95+
})}
10196
/>
10297
{errors.postcode && (
10398
<span className="text-red-500">
@@ -106,12 +101,16 @@ const Billing = ({ onSubmit }) => {
106101
)}
107102
</div>
108103
<div className="w-1/2 p-2">
109-
<Input
104+
<label className="pb-4">Sted</label>
105+
<input
106+
className={inputClasses}
110107
name="city"
111108
placeholder="Sted"
112109
label="Sted"
113-
register={register}
114-
parameters={{ required: 'Dette feltet er påkrevd' }}
110+
type="text"
111+
{...register('city', {
112+
required: 'Dette feltet er påkrevd',
113+
})}
115114
/>
116115
{errors.city && (
117116
<span className="text-red-500">
@@ -120,18 +119,20 @@ const Billing = ({ onSubmit }) => {
120119
)}
121120
</div>
122121
<div className="w-1/2 p-2">
123-
<Input
122+
<label className="pb-4">Epost</label>
123+
<input
124+
className={inputClasses}
124125
name="email"
125126
placeholder="Epost"
126127
label="Epost"
127-
register={register}
128-
parameters={{
128+
type="text"
129+
{...register('email', {
129130
required: 'Dette feltet er påkrevd',
130131
pattern: {
131132
value: /[^@]+@[^@]+\.[^@]+/i,
132133
message: 'Du må oppgi en gyldig epost',
133134
},
134-
}}
135+
})}
135136
/>
136137
{errors.email && (
137138
<span className="text-red-500">
@@ -140,12 +141,14 @@ const Billing = ({ onSubmit }) => {
140141
)}
141142
</div>
142143
<div className="w-1/2 p-2">
143-
<Input
144+
<label className="pb-4">Telefon</label>
145+
<input
146+
className={inputClasses}
144147
name="phone"
145148
placeholder="Telefon"
146149
label="Telefon"
147-
register={register}
148-
parameters={{
150+
type="text"
151+
{...register('phone', {
149152
required: 'Dette feltet er påkrevd',
150153
minLength: {
151154
value: 8,
@@ -155,12 +158,11 @@ const Billing = ({ onSubmit }) => {
155158
value: 8,
156159
message: 'Maksimalt 8 tall i telefonnummeret',
157160
},
158-
159161
pattern: {
160162
value: /^[0-9]+$/i,
161163
message: 'Ikke gyldig telefonnummer',
162164
},
163-
}}
165+
})}
164166
/>
165167
{errors.phone && (
166168
<span className="text-red-500">
@@ -169,15 +171,15 @@ const Billing = ({ onSubmit }) => {
169171
)}
170172
</div>
171173
<div className="w-1/2 p-2">
172-
<Input
174+
<input
173175
name="paymentMethod"
174176
placeholder="paymentMethod"
175177
label=""
176178
type="hidden"
177179
value="cod"
178-
register={register}
179180
checked
180-
readOnly
181+
type="hidden"
182+
{...register('paymentMethod')}
181183
/>
182184
</div>
183185
<div className="w-full p-2">

‎components/Checkout/CheckoutForm.component.jsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const CheckoutForm = () => {
2121
const [requestError, setRequestError] = useState(null);
2222
const [orderCompleted, setorderCompleted] = useState(false);
2323

24-
// Get Cart Data.
25-
const { data, refetch } = useQuery(GET_CART, {
26-
notifyOnNetworkStatusChange: true,
27-
onCompleted: () => {
28-
// Update cart in the localStorage.
29-
const updatedCart = getFormattedCart(data);
30-
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
31-
// Update cart data in React Context.
32-
setCart(updatedCart);
33-
},
34-
});
24+
// Get Cart Data.
25+
const { data, refetch } = useQuery(GET_CART, {
26+
notifyOnNetworkStatusChange: true,
27+
onCompleted: () => {
28+
// Update cart in the localStorage.
29+
const updatedCart = getFormattedCart(data);
30+
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
31+
// Update cart data in React Context.
32+
setCart(updatedCart);
33+
},
34+
});
3535

3636
// Checkout GraphQL mutation
3737
const [checkout, { loading: checkoutLoading }] = useMutation(
@@ -51,8 +51,6 @@ const CheckoutForm = () => {
5151
}
5252
);
5353

54-
55-
5654
useEffect(() => {
5755
if (null !== orderData) {
5856
// Perform checkout mutation when the value for orderData changes.
@@ -61,6 +59,9 @@ const CheckoutForm = () => {
6159
}, [orderData]);
6260

6361
const onSubmit = (submitData) => {
62+
console.log('Submit ...');
63+
console.log(submitData);
64+
6465
const checkOutData = createCheckoutData(submitData);
6566
setOrderData(checkOutData);
6667
setRequestError(null);

0 commit comments

Comments
 (0)