Merge branch 'master' into develop

Author: w3bdesign

components/Checkout/Billing.component.jsx

@@ -1,5 +1,46 @@
 import { useForm } from 'react-hook-form';
 import { InputField } from '../Input/InputField.component';
+import { getCustomNumberValidation } from '../../utils/functions/functions';
+
+const inputField = [
+  { label: 'Fornavn', name: 'firstName' },
+  { label: 'Etternavn', name: 'lastName' },
+  { label: 'Adresse', name: 'address1' },
+  {
+    label: 'Postnummer',
+    name: 'postcode',
+    customValidation: getCustomNumberValidation(
+      {
+        minLength: 'Postnummer må være minimum 4 tall',
+        maxLength: 'Postnummer må være maksimalt 4 tall',
+        pattern: 'Postnummer må bare være tall',
+      },
+      4
+    ),
+  },
+  { label: 'Sted', name: 'city' },
+  {
+    label: 'Epost',
+    name: 'email',
+    customValidation: getCustomNumberValidation(
+      { pattern: 'Du må oppgi en gyldig epost' },
+      undefined,
+      /^[a-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[a-z0-9.-]+$/gim
+    ),
+  },
+  {
+    label: 'Telefon',
+    name: 'phone',
+    customValidation: getCustomNumberValidation(
+      {
+        minLength: 'Minimum 8 tall i telefonnummeret',
+        maxLength: 'Maksimalt 8 tall i telefonnummeret',
+        pattern: 'Ikke gyldig telefonnummer',
+      },
+      8
+    ),
+  },
+];
 
 const Billing = ({ onSubmit }) => {
   const {
@@ -12,82 +53,16 @@ const Billing = ({ onSubmit }) => {
     <section className="text-gray-700 container p-4 py-2 mx-auto">
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="mx-auto lg:w-1/2 flex flex-wrap">
-          <InputField
-            label="Fornavn"
-            name="firstName"
-            errors={errors}
-            register={register}
-          />
-          <InputField
-            label="Etternavn"
-            name="lastName"
-            errors={errors}
-            register={register}
-          />
-          <InputField
-            label="Adresse"
-            name="address1"
-            errors={errors}
-            register={register}
-          />
-          <InputField
-            label="Postnummer"
-            name="postcode"
-            errors={errors}
-            register={register}
-            customValidation={{
-              minLength: {
-                value: 4,
-                message: 'Postnummer må være minimum 4 tall',
-              },
-              maxLength: {
-                value: 4,
-                message: 'Postnummer må være maksimalt 4 tall',
-              },
-              pattern: {
-                value: /^\d+$/i,
-                message: 'Postnummer må bare være tall',
-              },
-            }}
-          />
-          <InputField
-            label="Sted"
-            name="city"
-            errors={errors}
-            register={register}
-          />
-          <InputField
-            label="Epost"
-            name="email"
-            errors={errors}
-            register={register}
-            customValidation={{
-              pattern: {
-                value: /[^@]+@[^@]+\.[^@]+/i,
-                message: 'Du må oppgi en gyldig epost',
-              },
-            }}
-          />
-          <InputField
-            label="Telefon"
-            name="phone"
-            errors={errors}
-            register={register}
-            customValidation={{
-              minLength: {
-                value: 8,
-                message: 'Minimum 8 tall i telefonnummeret',
-              },
-              maxLength: {
-                value: 8,
-                message: 'Maksimalt 8 tall i telefonnummeret',
-              },
-              pattern: {
-                value: /^\d+$/i,
-                message: 'Ikke gyldig telefonnummer',
-              },
-            }}
-          />
+          {inputField.map(({ label, name, customValidation }, key) => (
+            <InputField
+              key={key}
+              label={label}
+              name={name}
+              customValidation={customValidation}
+              errors={errors}
+              register={register}
+            />
+          ))}
           <OrderButton register={register} />
         </div>
       </form>

utils/functions/functions.js

@@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
  * @param {String} price The price string that we input
  * @param {String} symbol Currency symbol to add empty character/padding after
  */
-
 export const paddedPrice = (price, symbol) =>
   price.split(symbol).join(`${symbol} `);
 
@@ -22,6 +21,35 @@ export const trimmedStringToLength = (string, length) => {
   return string;
 };
 
+/**
+ * Creates a validation object with passed custom error messages.
+ * If `value` is not passed then returned object will contain only pattern message.
+ * @param {Object} messages Custom error messages
+ * @param {String} messages.minLength Message for min length attribute validation
+ * @param {String} messages.maxLength Message for max length attribute vlidation
+ * @param {String} messages.pattern Message for custom pattern vlidation
+ * @param {Integer=} value The number value used as limit for min/max attribute
+ * @param {RegExp} patternValue Regular expression pattern for validation
+ */
+export const getCustomNumberValidation = (
+  { minLength, maxLength, pattern },
+  value,
+  patternValue = /^\d+$/i
+) => {
+  const validationObj = {
+    minLength: { value, message: minLength },
+    maxLength: { value, message: maxLength },
+    pattern: { value: patternValue, message: pattern },
+  };
+
+  return Object.keys(validationObj).reduce((acc, key) => {
+    if (validationObj[key].value) {
+      acc[key] = validationObj[key];
+    }
+    return acc;
+  }, {});
+};
+
 /**
  * Filter variant price. Changes "kr198.00 - kr299.00" to kr299.00 or kr198 depending on the side variable
  * @param {String} side Which side of the string to return (which side of the "-" symbol)