Skip to content

Commit 273ece7

Browse files
w3bdesignw3bdesign
authored
Merge pull request #145 from w3bdesign/development
Work on billing and checkout form
2 parents 5949ca1 + cc0b8dd commit 273ece7

13 files changed

+128
-68
lines changed

‎components/Cart/Cart.component.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Cart = () => {
1818

1919
return (
2020
<>
21-
<Link href="/cart">
21+
<Link href="/handlekurv">
2222
<a className="inline-block pl-3 no-underline hover:text-black">
2323
<svg
2424
className="fill-current hover:text-black"

‎components/Cart/CartPage/CartItem.component.jsx

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -41,28 +41,12 @@ const CartItem = ({
4141
? item.totalPrice.toFixed(2)
4242
: item.totalPrice}
4343
</td>
44+
45+
46+
47+
4448
</tr>
4549
);
4650
};
4751

4852
export default CartItem;
49-
50-
/*
51-
<tr className="bg-gray-100">
52-
<td className="px-4 py-2 border">Test</td>
53-
<td className="px-4 py-2 border">Test</td>
54-
<td className="px-4 py-2 border">Test</td>
55-
<td className="px-4 py-2 border">Test</td>
56-
</tr>
57-
<tr className="bg-gray-100">
58-
<td className="px-4 py-2 border">Test</td>
59-
<td className="px-4 py-2 border">Test</td>
60-
<td className="px-4 py-2 border">Test</td>
61-
<td className="px-4 py-2 border">Test</td>
62-
</tr>
63-
<tr className="bg-gray-100">
64-
<td className="px-4 py-2 border">Testx</td>
65-
<td className="px-4 py-2 border">Testxx</td>
66-
<td className="px-4 py-2 border">Testxxxx</td>
67-
<td className="px-4 py-2 border">Test xxxxxxxxxx</td>
68-
*/

‎components/Cart/CartPage/CartItemsContainer.component.jsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import CartItem from 'components/Cart/CartPage/CartItem.component';
1515
import PageTitle from 'components/Header/PageTitle.component';
1616

17-
import { WOO_CONFIG } from 'utils/config/nextConfig';
1817
import { GET_CART } from 'utils/const/GQL_QUERIES';
1918

2019
/*
@@ -75,12 +74,25 @@ const CartItemsContainer = () => {
7574
<CartItem
7675
key={item.productId}
7776
item={item}
77+
products={cart.products}
7878
// updateCartProcessing={updateCartProcessing}
79-
// products={cart.products}
8079
// handleRemoveProductClick={handleRemoveProductClick}
8180
// updateCart={updateCart}
8281
/>
8382
))}
83+
84+
<tr>
85+
<td>
86+
<Link href="/kasse">
87+
<a
88+
className="inline-block px-6 py-3 mt-6 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
89+
href="#"
90+
>
91+
gå til kasse
92+
</a>
93+
</Link>
94+
</td>
95+
</tr>
8496
</tbody>
8597
</table>
8698
</div>

‎components/Checkout/Billing.component.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const Billing = ({ input, handleOnChange }) => {
2+
return (
3+
<>
4+
{/* Name */}
5+
<div>Billing</div>
6+
</>
7+
);
8+
};
9+
10+
export default Billing;

‎components/Checkout/CheckoutForm.component.jsx

Lines changed: 57 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import { useState, useContext, useEffect } from 'react';
22
import { useQuery, useMutation } from '@apollo/react-hooks';
33

4+
import Billing from './Billing.component';
5+
46
import { GET_CART } from 'utils/const/GQL_QUERIES';
7+
import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
58
import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
9+
610
import { AppContext } from 'utils/context/AppContext';
711

812
import { getFormattedCart } from 'utils/functions/functions';
@@ -13,6 +17,24 @@ const CheckoutForm = () => {
1317
const [orderData, setOrderData] = useState(null);
1418
const [requestError, setRequestError] = useState(null);
1519

20+
// Checkout GraphQL mutation
21+
const [
22+
checkout,
23+
{ data: checkoutResponse, loading: checkoutLoading, error: checkoutError },
24+
] = useMutation(CHECKOUT_MUTATION, {
25+
variables: {
26+
input: orderData,
27+
},
28+
onCompleted: () => {
29+
refetch();
30+
},
31+
onError: (error) => {
32+
if (error) {
33+
setRequestError(error);
34+
}
35+
},
36+
});
37+
1638
// Get Cart Data.
1739
const { loading, error, data, refetch } = useQuery(GET_CART, {
1840
notifyOnNetworkStatusChange: true,
@@ -44,34 +66,50 @@ const CheckoutForm = () => {
4466
setRequestError(null);
4567
};
4668

69+
/*
70+
* Handle onChange input.
71+
*
72+
* @param {Object} event Event Object.
73+
*
74+
* @return {void}
75+
*/
76+
const handleOnChange = (event) => {
77+
if ('createAccount' === event.target.name) {
78+
const newState = { ...input, [event.target.name]: !input.createAccount };
79+
setInput(newState);
80+
} else {
81+
const newState = { ...input, [event.target.name]: event.target.value };
82+
setInput(newState);
83+
}
84+
};
85+
4786
useEffect(() => {
4887
if (null !== orderData) {
49-
// Do checkout mutation when the value for orderData changes.
50-
// checkout();
88+
// Perform checkout mutation when the value for orderData changes.
89+
checkout();
5190
}
5291
}, [orderData]);
5392

5493
return (
5594
<>
56-
<section className="py-8 bg-white">
57-
<div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
58-
<nav id="store" className="top-0 w-full px-6 py-1">
59-
<div className="container flex flex-wrap items-center justify-between w-full px-2 py-3 mx-auto mt-0">
60-
<a
61-
className="mt-6 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline"
62-
href="#"
63-
>
64-
Bestillingsskjema
65-
</a>
95+
{cart ? (
96+
<div className="container mx-auto">
97+
<form onSubmit={handleFormSubmit} className="">
98+
<div className="">
99+
{/*Payment Details*/}
100+
<div className="">
101+
<h2 className="">Betalingsdetaljer</h2>
102+
<Billing input={input} handleOnChange={handleOnChange} />
103+
</div>
104+
105+
{/* Checkout Loading*/}
106+
{checkoutLoading && <p>Behandler ordre ...</p>}
107+
{requestError && (
108+
<p>Feilmelding: {requestError} :( Vennligst prøv igjen.</p>
109+
)}
66110
</div>
67-
</nav>
111+
</form>
68112
</div>
69-
</section>
70-
71-
{cart ? (
72-
<form onSubmit={handleFormSubmit} className="woo-next-checkout-form">
73-
<div className="row">Skjema kommer her</div>
74-
</form>
75113
) : (
76114
''
77115
)}

‎components/Header/PageTitle.component.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ const PageTitle = ({ title, marginleft }) => {
22
return (
33
<>
44
{marginleft ? (
5-
<section className="container pl-6 mx-auto mt-24 bg-white">
6-
<span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
5+
<section className="container pl-8 mx-auto mt-24 text-center bg-white">
6+
<span className="py-2 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
77
{title}
88
</span>
99
</section>
1010
) : (
11-
<section className="container pl-4 mx-auto mt-24 bg-white">
12-
<span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
11+
<section className="container pl-4 mx-auto mt-24 text-center bg-white">
12+
<span className="py-2 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
1313
{title}
1414
</span>
1515
</section>

‎components/Index/Hero.component.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Hero = () => {
1616
</h1>
1717

1818
<a
19-
className="inline-block px-6 py-3 text-xl leading-relaxed border border-gray-600 border-solid hover:underline"
19+
className="inline-block px-6 py-3 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
2020
href="#"
2121
>
2222
Kjøp Nå

‎components/Product/IndexProducts.component.jsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,8 @@ import { v4 as uuidv4 } from 'uuid';
99
const IndexProducts = ({ products }) => {
1010
return (
1111
<>
12-
1312
<section className="container mx-auto bg-white">
14-
15-
<div
16-
id="product-container"
17-
className="flex flex-wrap items-center"
18-
>
19-
20-
13+
<div id="product-container" className="flex flex-wrap items-center">
2114
{products ? (
2215
products.map(
2316
({
@@ -41,7 +34,7 @@ const IndexProducts = ({ products }) => {
4134
<a>
4235
<img
4336
id="product-image"
44-
className="transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
37+
className="transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
4538
//className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
4639
src={image.sourceUrl}
4740
/>

‎pages/checkout.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎pages/cart.js renamed to ‎pages/handlekurv.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import CartItemsContainer from '../components/Cart/CartPage/CartItemsContainer.component';
22

3-
const Cart = () => {
3+
const Handlekurv = () => {
44
return (
55
<>
66
<CartItemsContainer />
77
</>
88
);
99
};
1010

11-
export default Cart;
11+
export default Handlekurv;

0 commit comments

Comments
 (0)