Add a single payment method (bank transfer)

Author: w3bdesign

components/Checkout/Billing.component.jsx

@@ -356,80 +356,14 @@ const Billing = ({ input, handleOnChange }) => {
                   id="address1"
                 />
                 <Error errors={input.errors} fieldName={'address1'} />
-              </div>      
+              </div>
 
               <div className="w-full p-2">
-                <button className="flex px-8 py-2 mx-auto text-lg text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600">
-                  Button
+                <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 className="w-full p-2 pt-8 mt-8 text-center border-t border-gray-200">
-                <a className="text-indigo-500">[email protected]</a>
-                <p className="my-5 leading-normal">
-                  49 Smith St.
-                  <br />
-                  Saint Cloud, MN 56301
-                </p>
-                <span className="inline-flex">
-                  <a className="text-gray-500">
-                    <svg
-                      fill="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      className="w-5 h-5"
-                      viewBox="0 0 24 24"
-                    >
-                      <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
-                    </svg>
-                  </a>
-                  <a className="ml-4 text-gray-500">
-                    <svg
-                      fill="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      className="w-5 h-5"
-                      viewBox="0 0 24 24"
-                    >
-                      <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
-                    </svg>
-                  </a>
-                  <a className="ml-4 text-gray-500">
-                    <svg
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      className="w-5 h-5"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        width="20"
-                        height="20"
-                        x="2"
-                        y="2"
-                        rx="5"
-                        ry="5"
-                      ></rect>
-                      <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
-                    </svg>
-                  </a>
-                  <a className="ml-4 text-gray-500">
-                    <svg
-                      fill="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      className="w-5 h-5"
-                      viewBox="0 0 24 24"
-                    >
-                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
-                    </svg>
-                  </a>
-                </span>
-              </div>
+
             </div>
           </div>
         </div>

components/Checkout/CheckoutForm.component.jsx

@@ -2,14 +2,20 @@ import { useState, useContext, useEffect } from 'react';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import Billing from './Billing.component';
+import Payment from "./Payment.component";
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
 import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
 
 import { AppContext } from 'utils/context/AppContext';
 
-import { getFormattedCart } from 'utils/functions/functions';
+import {
+  getFormattedCart,
+  createCheckoutData,
+} from 'utils/functions/functions';
+
+import validateAndSanitizeCheckoutForm from 'utils/validator/checkoutValidator';
 
 const CheckoutForm = () => {
   const [cart, setCart] = useContext(AppContext);
@@ -101,11 +107,27 @@ const CheckoutForm = () => {
               <Billing input={input} handleOnChange={handleOnChange} />
             </div>
 
+            {/*Payment*/}
+            <div className="">
+							<Payment input={ input } handleOnChange={ handleOnChange }/>
+              </div>
+
+            <div>
+              <button
+                className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400"
+                type="submit"
+              >
+                BESTILL
+              </button>
+            </div>
+
             {/* Checkout Loading*/}
-            {checkoutLoading && <p>Behandler ordre ...</p>}
-            {requestError && (
-              <p>Feilmelding: {requestError} :( Vennligst prøv igjen.)</p>
-            )}
+            {
+            //checkoutLoading && <p>Behandler ordre ...</p>
+            }
+            {
+            //requestError && <p>Feilmelding: {requestError} </p>
+          }
           </div>
         </form>
       ) : (

components/Checkout/Payment.component.jsx

@@ -0,0 +1,18 @@
+const Payment = ({ input, handleOnChange }) => {
+  return (
+    <div className="mt-3">
+      <label className="form-check-label">
+        <input
+          onChange={handleOnChange}
+          value="bacs"
+          className="form-check-input"
+          name="paymentMethod"
+          type="radio"
+        />
+        <span className="woo-next-payment-content">Direkte bankoverføring</span>
+      </label>
+    </div>
+  );
+};
+
+export default Payment;

utils/functions/functions.js

@@ -1,3 +1,5 @@
+import { v4 } from 'uuid';
+
 /**
  * Convert price from string to floating value and convert it to use two decimals
  * @param {String} string

utils/validator/checkoutValidator.js

@@ -0,0 +1,7 @@
+const validateAndSanitizeCheckoutForm = (data) => {
+  return {
+    isValid: true,
+  };
+};
+
+export default validateAndSanitizeCheckoutForm;