Skip to content

Commit 0262ce5

Browse files
w3bdesignw3bdesign
committed
Fix bug with React hook form upgrade
1 parent e90088e commit 0262ce5

File tree

4 files changed

+187
-153
lines changed

4 files changed

+187
-153
lines changed

‎components/Checkout/Billing.component.jsx‎

Lines changed: 83 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,60 @@ import { useForm } from 'react-hook-form';
33
const Input = ({
44
name,
55
label,
6-
register,
6+
//register,
7+
registerRef,
78
placeholder,
89
value,
910
parameters,
10-
type = 'text',
11+
type = 'text',
1112
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-
);
13+
}) => {
14+
const { register } = useForm();
15+
16+
return (
17+
<>
18+
<label className="pb-4">{label}</label>
19+
<input
20+
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
21+
name={name}
22+
placeholder={placeholder}
23+
type="text"
24+
value={value}
25+
{...register(registerRef, parameters)}
26+
type={type}
27+
readOnly={readOnly}
28+
/>
29+
</>
30+
);
31+
};
2732

2833
const Billing = ({ onSubmit }) => {
29-
const { register, handleSubmit, errors } = useForm();
34+
const inputClasses =
35+
'w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black';
36+
const {
37+
register,
38+
handleSubmit,
39+
formState: { errors },
40+
} = useForm();
3041

3142
return (
3243
<>
3344
<section className="text-gray-700">
3445
<form onSubmit={handleSubmit(onSubmit)}>
35-
<div className="container p-4 py-2 mx-auto">
46+
<div className="container p-4 py-2 mx-auto">
3647
<div className="mx-auto lg:w-1/2 md:w-2/3">
3748
<div className="flex flex-wrap -m-2">
3849
<div className="w-1/2 p-2">
39-
<Input
50+
<label className="pb-4">Fornavn</label>
51+
<input
52+
className={inputClasses}
4053
name="firstName"
4154
placeholder="Fornavn"
4255
label="Fornavn"
43-
register={register}
44-
parameters={{ required: 'Dette feltet er påkrevd' }}
56+
type="text"
57+
{...register('firstName', {
58+
required: 'Dette feltet er påkrevd',
59+
})}
4560
/>
4661
{errors.firstName && (
4762
<span className="text-red-500">
@@ -50,12 +65,16 @@ const Billing = ({ onSubmit }) => {
5065
)}
5166
</div>
5267
<div className="w-1/2 p-2">
53-
<Input
68+
<label className="pb-4">Etternavn</label>
69+
<input
70+
className={inputClasses}
5471
name="lastName"
5572
placeholder="Etternavn"
5673
label="Etternavn"
57-
register={register}
58-
parameters={{ required: 'Dette feltet er påkrevd' }}
74+
type="text"
75+
{...register('lastName', {
76+
required: 'Dette feltet er påkrevd',
77+
})}
5978
/>
6079
{errors.lastName && (
6180
<span className="text-red-500">
@@ -64,26 +83,33 @@ const Billing = ({ onSubmit }) => {
6483
)}
6584
</div>
6685
<div className="w-1/2 p-2">
67-
<Input
86+
<label className="pb-4">Addresse</label>
87+
<input
88+
className={inputClasses}
6889
name="address1"
6990
placeholder="Adresse"
7091
label="Adresse"
71-
register={register}
72-
parameters={{ required: 'Dette feltet er påkrevd' }}
92+
type="text"
93+
{...register('address1', {
94+
required: 'Dette feltet er påkrevd',
95+
})}
7396
/>
97+
7498
{errors.address1 && (
7599
<span className="text-red-500">
76100
FEIL: {errors.address1.message}
77101
</span>
78102
)}
79103
</div>
80104
<div className="w-1/2 p-2">
81-
<Input
105+
<label className="pb-4">Addresse</label>
106+
<input
107+
className={inputClasses}
82108
name="postcode"
83109
placeholder="Postnummer"
84110
label="Postnummer"
85-
register={register}
86-
parameters={{
111+
type="text"
112+
{...register('postcode', {
87113
required: 'Dette feltet er påkrevd',
88114
minLength: {
89115
value: 4,
@@ -97,7 +123,7 @@ const Billing = ({ onSubmit }) => {
97123
value: /^[0-9]+$/i,
98124
message: 'Postnummer må bare være tall',
99125
},
100-
}}
126+
})}
101127
/>
102128
{errors.postcode && (
103129
<span className="text-red-500">
@@ -106,46 +132,56 @@ const Billing = ({ onSubmit }) => {
106132
)}
107133
</div>
108134
<div className="w-1/2 p-2">
109-
<Input
135+
<label className="pb-4">Sted</label>
136+
<input
137+
className={inputClasses}
110138
name="city"
111139
placeholder="Sted"
112140
label="Sted"
113-
register={register}
114-
parameters={{ required: 'Dette feltet er påkrevd' }}
141+
type="text"
142+
{...register('city', {
143+
required: 'Dette feltet er påkrevd',
144+
})}
115145
/>
146+
116147
{errors.city && (
117148
<span className="text-red-500">
118149
FEIL: {errors.city.message}
119150
</span>
120151
)}
121152
</div>
122153
<div className="w-1/2 p-2">
123-
<Input
154+
<label className="pb-4">Epost</label>
155+
<input
156+
className={inputClasses}
124157
name="email"
125158
placeholder="Epost"
126159
label="Epost"
127-
register={register}
128-
parameters={{
160+
type="text"
161+
{...register('email', {
129162
required: 'Dette feltet er påkrevd',
130163
pattern: {
131164
value: /[^@]+@[^@]+\.[^@]+/i,
132165
message: 'Du må oppgi en gyldig epost',
133166
},
134-
}}
167+
})}
135168
/>
169+
136170
{errors.email && (
137171
<span className="text-red-500">
138172
FEIL: {errors.email.message}
139173
</span>
140174
)}
141175
</div>
142176
<div className="w-1/2 p-2">
143-
<Input
177+
<label className="pb-4">Telefon</label>
178+
<input
179+
className={inputClasses}
144180
name="phone"
145181
placeholder="Telefon"
146182
label="Telefon"
147-
register={register}
148-
parameters={{
183+
type="text"
184+
{...register('phone', {
149185
required: 'Dette feltet er påkrevd',
150186
minLength: {
151187
value: 8,
@@ -160,24 +196,25 @@ const Billing = ({ onSubmit }) => {
160196
value: /^[0-9]+$/i,
161197
message: 'Ikke gyldig telefonnummer',
162198
},
163-
}}
199+
})}
164200
/>
201+
165202
{errors.phone && (
166203
<span className="text-red-500">
167204
FEIL: {errors.phone.message}
168205
</span>
169206
)}
170207
</div>
171208
<div className="w-1/2 p-2">
172-
<Input
209+
<input
173210
name="paymentMethod"
174211
placeholder="paymentMethod"
175212
label=""
176213
type="hidden"
177214
value="cod"
178-
register={register}
179215
checked
180-
readOnly
216+
type="hidden"
217+
{...register('paymentMethod')}
181218
/>
182219
</div>
183220
<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)