Skip to content

Commit

Permalink
Merge pull request #424 from w3bdesign/develop
Browse files Browse the repository at this point in the history 
Upgraded React Hook Form to v7.0.1
  • Loading branch information
@w3bdesign
w3bdesign authored Apr 5, 2021
2 parents b96c482 + 6618aa3 commit bdeada6
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 125 deletions.
112 changes: 57 additions & 55 deletions components/Checkout/Billing.component.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,32 @@
import { useForm } from 'react-hook-form';

const Input = ({
name,
label,
register,
placeholder,
value,
parameters,
type = 'text',
readOnly = false,
}) => (
<>
<label className="pb-4">{label}</label>
<input
className="w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black"
name={name}
placeholder={placeholder}
type="text"
value={value}
ref={register(parameters)}
type={type}
readOnly={readOnly}
/>
</>
);

const Billing = ({ onSubmit }) => {
const { register, handleSubmit, formState: { errors } } = useForm();
const inputClasses =
'w-full px-4 py-2 mt-2 text-base bg-white border border-gray-400 rounded focus:outline-none focus:border-black';
const {
register,
handleSubmit,
formState: { errors },
} = useForm();

return (
<>
<section className="text-gray-700">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="container p-4 py-2 mx-auto">
<div className="container p-4 py-2 mx-auto">
<div className="mx-auto lg:w-1/2 md:w-2/3">
<div className="flex flex-wrap -m-2">
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Fornavn</label>
<input
className={inputClasses}
name="firstName"
placeholder="Fornavn"
label="Fornavn"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
type="text"
{...register('firstName', {
required: 'Dette feltet er påkrevd',
})}
/>
{errors.firstName && (
<span className="text-red-500">
Expand All @@ -50,12 +35,16 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Etternavn</label>
<input
className={inputClasses}
name="lastName"
placeholder="Etternavn"
label="Etternavn"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
type="text"
{...register('lastName', {
required: 'Dette feltet er påkrevd',
})}
/>
{errors.lastName && (
<span className="text-red-500">
Expand All @@ -64,12 +53,16 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Addresse</label>
<input
className={inputClasses}
name="address1"
placeholder="Adresse"
label="Adresse"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
type="text"
{...register('address1', {
required: 'Dette feltet er påkrevd',
})}
/>
{errors.address1 && (
<span className="text-red-500">
Expand All @@ -78,12 +71,14 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Addresse</label>
<input
className={inputClasses}
name="postcode"
placeholder="Postnummer"
label="Postnummer"
register={register}
parameters={{
type="text"
{...register('postcode', {
required: 'Dette feltet er påkrevd',
minLength: {
value: 4,
Expand All @@ -97,7 +92,7 @@ const Billing = ({ onSubmit }) => {
value: /^[0-9]+$/i,
message: 'Postnummer må bare være tall',
},
}}
})}
/>
{errors.postcode && (
<span className="text-red-500">
Expand All @@ -106,12 +101,16 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Sted</label>
<input
className={inputClasses}
name="city"
placeholder="Sted"
label="Sted"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
type="text"
{...register('city', {
required: 'Dette feltet er påkrevd',
})}
/>
{errors.city && (
<span className="text-red-500">
Expand All @@ -120,18 +119,20 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Epost</label>
<input
className={inputClasses}
name="email"
placeholder="Epost"
label="Epost"
register={register}
parameters={{
type="text"
{...register('email', {
required: 'Dette feltet er påkrevd',
pattern: {
value: /[^@]+@[^@]+\.[^@]+/i,
message: 'Du må oppgi en gyldig epost',
},
}}
})}
/>
{errors.email && (
<span className="text-red-500">
Expand All @@ -140,12 +141,14 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<label className="pb-4">Telefon</label>
<input
className={inputClasses}
name="phone"
placeholder="Telefon"
label="Telefon"
register={register}
parameters={{
type="text"
{...register('phone', {
required: 'Dette feltet er påkrevd',
minLength: {
value: 8,
Expand All @@ -155,12 +158,11 @@ const Billing = ({ onSubmit }) => {
value: 8,
message: 'Maksimalt 8 tall i telefonnummeret',
},

pattern: {
value: /^[0-9]+$/i,
message: 'Ikke gyldig telefonnummer',
},
}}
})}
/>
{errors.phone && (
<span className="text-red-500">
Expand All @@ -169,15 +171,15 @@ const Billing = ({ onSubmit }) => {
)}
</div>
<div className="w-1/2 p-2">
<Input
<input
name="paymentMethod"
placeholder="paymentMethod"
label=""
type="hidden"
value="cod"
register={register}
checked
readOnly
type="hidden"
{...register('paymentMethod')}
/>
</div>
<div className="w-full p-2">
Expand Down
27 changes: 14 additions & 13 deletions components/Checkout/CheckoutForm.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@ const CheckoutForm = () => {
const [requestError, setRequestError] = useState(null);
const [orderCompleted, setorderCompleted] = useState(false);

// Get Cart Data.
const { data, refetch } = useQuery(GET_CART, {
notifyOnNetworkStatusChange: true,
onCompleted: () => {
// Update cart in the localStorage.
const updatedCart = getFormattedCart(data);
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
// Update cart data in React Context.
setCart(updatedCart);
},
});
// Get Cart Data.
const { data, refetch } = useQuery(GET_CART, {
notifyOnNetworkStatusChange: true,
onCompleted: () => {
// Update cart in the localStorage.
const updatedCart = getFormattedCart(data);
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
// Update cart data in React Context.
setCart(updatedCart);
},
});

// Checkout GraphQL mutation
const [checkout, { loading: checkoutLoading }] = useMutation(
Expand All @@ -51,8 +51,6 @@ const CheckoutForm = () => {
}
);



useEffect(() => {
if (null !== orderData) {
// Perform checkout mutation when the value for orderData changes.
Expand All @@ -61,6 +59,9 @@ const CheckoutForm = () => {
}, [orderData]);

const onSubmit = (submitData) => {
console.log('Submit ...');
console.log(submitData);

const checkOutData = createCheckoutData(submitData);
setOrderData(checkOutData);
setRequestError(null);
Expand Down
Loading

1 comment on commit bdeada6

@vercel
Copy link

@vercel vercel bot commented on bdeada6 Apr 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.