Skip to content

Commit

Permalink
Merge pull request #201 from w3bdesign/development
Browse files Browse the repository at this point in the history 
Added React Hook Form with validation
  • Loading branch information
@w3bdesign
w3bdesign authored Jul 7, 2020
2 parents d4954e9 + 1411b6f commit b049d18
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 182 deletions.
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
- Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
- Algolia search
- Apollo Client with GraphQL
- React Hook Form with form validation and error display
- Animations with React-Spring and Animate.css
- Loading spinner created with Styled Components
- Shows page load progress with Nprogress during navigation
Expand All @@ -42,8 +43,6 @@
## TODO

- Display product variation name in cart / checkout
- Implement React-hook-form for validation
- Fix bug with changing quantity for variable products
- Hide products not in stock
- Add better SEO
- Add a better README.md
Expand Down
299 changes: 186 additions & 113 deletions components/Checkout/Billing.component.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,197 @@
import Error from './Error.component';
import { useForm } from 'react-hook-form';

import CheckoutTitle from 'components/Header/CheckoutTitle.component';

const Billing = ({ input, handleOnChange }) => {
// https://react-hook-form.com/get-started#Quickstart
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, errors } = useForm();

return (
<>
<section className="relative text-gray-700 body-font">
<div className="container px-5 py-2 mx-auto">
<CheckoutTitle title="Betalingsdetaljer" />
<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">
<label className="pb-4">Fornavn</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"
placeholder="Fornavn"
type="text"
onChange={handleOnChange}
value={input.firstName}
name="firstName"
id="first-name"
/>
<Error errors={input.errors} fieldName={'firstName'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Etternavn</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"
placeholder="Etternavn"
type="text"
onChange={handleOnChange}
value={input.lastName}
name="lastName"
id="last-name"
/>
<Error errors={input.errors} fieldName={'lastName'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Adresse</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"
placeholder="Addresse"
type="text"
onChange={handleOnChange}
value={input.address1}
name="address1"
id="address1"
/>
<Error errors={input.errors} fieldName={'address1'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Postnummer</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"
placeholder="Postnummer"
type="text"
onChange={handleOnChange}
value={input.postcode}
name="postcode"
id="post-code"
/>
<Error errors={input.errors} fieldName={'postcode'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Sted</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"
placeholder="Sted"
type="text"
onChange={handleOnChange}
value={input.city}
name="city"
id="city"
/>
<Error errors={input.errors} fieldName={'city'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Epost</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"
placeholder="Epost"
type="text"
onChange={handleOnChange}
value={input.email}
name="email"
id="email"
/>
<Error errors={input.errors} fieldName={'email'} />
</div>
<div className="w-1/2 p-2">
<label className="pb-4">Telefon</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"
placeholder="Telefon"
type="text"
onChange={handleOnChange}
value={input.phone}
name="phone"
id="phone1"
/>
<Error errors={input.errors} fieldName={'phone'} />
</div>
<div className="w-1/2 p-2">
<input
className="hidden"
value="bacs"
name="paymentMethod"
type="radio"
checked
readOnly
/>
</div>
<div className="w-full p-2">
<button className="flex px-4 py-2 mx-auto font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
BESTILL
</button>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="container px-5 py-2 mx-auto">
<CheckoutTitle title="Betalingsdetaljer" />
<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
name="firstName"
placeholder="Fornavn"
label="Fornavn"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
/>
{errors.firstName && (
<span className="text-red-500">
FEIL: {errors.firstName.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="lastName"
placeholder="Etternavn"
label="Etternavn"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
/>
{errors.lastName && (
<span className="text-red-500">
FEIL: {errors.lastName.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="address1"
placeholder="Adresse"
label="Adresse"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
/>
{errors.address1 && (
<span className="text-red-500">
FEIL: {errors.address1.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="postcode"
placeholder="Postnummer"
label="Postnummer"
register={register}
parameters={{
required: 'Dette feltet er påkrevd',
minLength: {
value: 4,
message: 'Postnummer må være minimum 4 tall',
},
maxLength: {
value: 4,
message: 'Postnummer må være maksimalt 4 tall',
},
pattern: {
value: /^[0-9]+$/i,
message: 'Postnummer må bare være tall',
},
}}
/>
{errors.postcode && (
<span className="text-red-500">
FEIL: {errors.postcode.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="city"
placeholder="Sted"
label="Sted"
register={register}
parameters={{ required: 'Dette feltet er påkrevd' }}
/>
{errors.city && (
<span className="text-red-500">
FEIL: {errors.city.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="email"
placeholder="Epost"
label="Epost"
register={register}
parameters={{
required: 'Dette feltet er påkrevd',
pattern: {
value: /[^@]+@[^@]+\.[^@]+/i,
message: 'Du må oppgi en gyldig epost',
},
}}
/>
{errors.email && (
<span className="text-red-500">
FEIL: {errors.email.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="phone"
placeholder="Telefon"
label="Telefon"
register={register}
parameters={{
required: 'Dette feltet er påkrevd',
minLength: {
value: 8,
message: 'Minimum 8 tall i telefonnummeret',
},
maxLength: {
value: 8,
message: 'Maksimalt 8 tall i telefonnummeret',
},

pattern: {
value: /^[0-9]+$/i,
message: 'Ikke gyldig telefonnummer',
},
}}
/>
{errors.phone && (
<span className="text-red-500">
FEIL: {errors.phone.message}
</span>
)}
</div>
<div className="w-1/2 p-2">
<Input
name="paymentMethod"
placeholder="paymentMethod"
label=""
type="hidden"
value="cod"
register={register}
checked
readOnly
/>
</div>
<div className="w-full p-2">
<button className="flex px-4 py-2 mx-auto font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
BESTILL
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</section>
</>
);
Expand Down
Loading

1 comment on commit b049d18

@vercel
Copy link

@vercel vercel bot commented on b049d18 Jul 7, 2020

Choose a reason for hiding this comment

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

Successfully deployed to following URLs:

Please sign in to comment.