Skip to content

Commit 891358a

Browse files
w3bdesignw3bdesign
committed
Finish design and styling of checkout page
1 parent 3ecbc43 commit 891358a

File tree

6 files changed

+140
-15
lines changed

6 files changed

+140
-15
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,17 @@ const CartItemsContainer = () => {
4343

4444
return (
4545
<>
46+
{
47+
/*
4648
<PageTitle title="Handlekurv" />
49+
*/
50+
}
4751

4852
<section className="py-8 bg-white">
4953
<div className="container flex flex-wrap items-center mx-auto">
5054
{cart ? (
5155
<div className="p-6 mx-auto mt-5">
56+
<PageTitle title="Handlekurv" />
5257
<table className="table-auto">
5358
<thead>
5459
<tr>

‎components/Checkout/Billing.component.jsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Error from './Error.component';
2+
import CheckoutTitle from 'components/Header/CheckoutTitle.component';
3+
24

3-
const countryList = [{ countryCode: 'NO', countryName: 'Norge' }];
45

56
const Billing = ({ input, handleOnChange }) => {
67
return (
@@ -11,12 +12,10 @@ const Billing = ({ input, handleOnChange }) => {
1112
}
1213

1314
<section className="relative text-gray-700 body-font">
14-
<div className="container px-5 py-24 mx-auto">
15-
<div className="flex flex-col w-full mb-12 text-center">
16-
<h1 className="mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font">
17-
Betalingsdetaljer
18-
</h1>
19-
</div>
15+
<div className="container px-5 py-2 mx-auto">
16+
17+
<CheckoutTitle title="Betalingsdetaljer" />
18+
2019
<div className="mx-auto lg:w-1/2 md:w-2/3">
2120
<div className="flex flex-wrap -m-2">
2221
<div className="w-1/2 p-2">

‎components/Checkout/CheckoutForm.component.jsx

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

44
import Billing from './Billing.component';
5-
import CartItemsContainer from "../Cart/CartPage/CartItemsContainer.component";
5+
import OrderDetails from "./OrderDetails.component";
66
//import Payment from './Payment.component';
77

88
import { GET_CART } from 'utils/const/GQL_QUERIES';
@@ -101,14 +101,15 @@ const CheckoutForm = () => {
101101
<>
102102
{cart ? (
103103
<form onSubmit={handleFormSubmit} className="">
104-
<div className="">
105-
{/* Order*/}
106-
<CartItemsContainer cart={cart} />
107-
108-
{/*Payment Details*/}
109-
<div className="">
110-
<Billing input={input} handleOnChange={handleOnChange} />
104+
<div className="container mx-auto">
105+
{/* Order*/}
106+
107+
<OrderDetails cart={cart} />
108+
{/*Payment Details*/}
109+
<div className="">
110+
<Billing input={input} handleOnChange={handleOnChange} />
111111
</div>
112+
112113

113114
{/* Checkout Loading*/}
114115
{checkoutLoading}

‎components/Checkout/OrderDetails.component.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import CheckoutTitle from 'components/Header/CheckoutTitle.component';
2+
import OrderDetailsCartItem from './OrderDetailsCartItem.component';
3+
4+
const OrderDetails = ({ cart }) => {
5+
return (
6+
<>
7+
<section className="py-8 bg-white">
8+
<div className="container flex flex-wrap items-center mx-auto">
9+
{cart ? (
10+
<div className="p-6 mx-auto mt-5">
11+
<CheckoutTitle title="Handlekurv" />
12+
13+
<table className="table-auto">
14+
<thead>
15+
<tr>
16+
<th className="px-4 py-2" scope="col" />
17+
<th className="px-4 py-2" scope="col" />
18+
<th className="px-4 py-2" scope="col">
19+
Produkt
20+
</th>
21+
<th className="px-4 py-2" scope="col">
22+
Pris
23+
</th>
24+
<th className="px-4 py-2" scope="col">
25+
Antall
26+
</th>
27+
<th className="px-4 py-2" scope="col">
28+
Total
29+
</th>
30+
</tr>
31+
</thead>
32+
<tbody>
33+
{cart.products.length &&
34+
cart.products.map((item) => (
35+
<OrderDetailsCartItem
36+
key={item.productId}
37+
item={item}
38+
products={cart.products}
39+
// updateCartProcessing={updateCartProcessing}
40+
// handleRemoveProductClick={handleRemoveProductClick}
41+
// updateCart={updateCart}
42+
/>
43+
))}
44+
</tbody>
45+
</table>
46+
</div>
47+
) : (
48+
''
49+
)}
50+
</div>
51+
</section>
52+
</>
53+
);
54+
};
55+
56+
export default OrderDetails;

‎components/Checkout/OrderDetailsCartItem.component.jsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useState } from 'react';
2+
3+
import SVGCloseX from 'components/SVG/SVGCloseX.component';
4+
5+
const OrderDetailsCartItem = ({
6+
item,
7+
products,
8+
updateCartProcessing,
9+
handleRemoveProductClick,
10+
updateCart,
11+
}) => {
12+
const [productCount, setProductCount] = useState(item.qty);
13+
14+
return (
15+
<tr className="bg-gray-100">
16+
<td className="px-4 py-2 border">
17+
<SVGCloseX />
18+
</td>
19+
<td className="px-4 py-2 border">
20+
<img
21+
width="64"
22+
src={item.image.sourceUrl}
23+
srcSet={item.image.srcSet}
24+
alt={item.image.title}
25+
/>
26+
</td>
27+
28+
<td className="px-4 py-2 border">{item.name}</td>
29+
30+
<td className="px-4 py-2 border">
31+
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
32+
</td>
33+
34+
<td className="px-4 py-2 border">
35+
<input type="number" min="1" value={productCount} />
36+
</td>
37+
38+
<td className="px-4 py-2 border">
39+
{'string' !== typeof item.totalPrice
40+
? item.totalPrice.toFixed(2)
41+
: item.totalPrice}
42+
</td>
43+
44+
45+
46+
47+
</tr>
48+
);
49+
};
50+
51+
export default OrderDetailsCartItem;

‎components/Header/CheckoutTitle.component.jsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const CheckoutTitle = ({ title }) => {
2+
return (
3+
<>
4+
<section className="container py-4 pl-8 mx-auto text-center bg-white">
5+
<span className="py-2 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
6+
{title}
7+
</span>
8+
</section>
9+
</>
10+
);
11+
};
12+
13+
export default CheckoutTitle;

0 commit comments

Comments
 (0)