Skip to content

Commit 12d18f5

Browse files
w3bdesignw3bdesign
authored
Merge pull request #154 from w3bdesign/development
Development
2 parents 8375610 + 3cda54b commit 12d18f5

13 files changed

+285
-90
lines changed

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useState } from 'react';
2-
import { v4 } from 'uuid';
32

4-
import SVGCloseX from 'components/SVG/SVGCloseX.component';
3+
import SVGX from 'components/SVG/SVGX.component';
54

65
const CartItem = ({
76
item,
@@ -15,7 +14,13 @@ const CartItem = ({
1514
return (
1615
<tr className="bg-gray-100">
1716
<td className="px-4 py-2 border">
18-
<SVGCloseX />
17+
<span>
18+
<SVGX
19+
onClick={() => {
20+
//setisExpanded(!isExpanded);
21+
}}
22+
/>
23+
</span>
1924
</td>
2025
<td className="px-4 py-2 border">
2126
<img
@@ -33,18 +38,16 @@ const CartItem = ({
3338
</td>
3439

3540
<td className="px-4 py-2 border">
36-
<input type="number" min="1" value={productCount} />
41+
<input
42+
className="w-12"
43+
type="number" min="1" value={productCount} />
3744
</td>
3845

3946
<td className="px-4 py-2 border">
4047
{'string' !== typeof item.totalPrice
4148
? item.totalPrice.toFixed(2)
4249
: item.totalPrice}
4350
</td>
44-
45-
46-
47-
4851
</tr>
4952
);
5053
};

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

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import {
1111
removeItemFromCart,
1212
} from '../../../utils/functions/functions';
1313

14-
import CartItem from 'components/Cart/CartPage/CartItem.component';
1514
import PageTitle from 'components/Header/PageTitle.component';
15+
import RegularCart from './RegularCart.component';
16+
import MobileCart from './MobileCart.component';
1617

1718
import { GET_CART } from 'utils/const/GQL_QUERIES';
1819

@@ -43,50 +44,14 @@ const CartItemsContainer = () => {
4344

4445
return (
4546
<>
46-
{
47-
/*
48-
<PageTitle title="Handlekurv" />
49-
*/
50-
}
51-
5247
<section className="py-8 bg-white">
5348
<div className="container flex flex-wrap items-center mx-auto">
5449
{cart ? (
5550
<div className="p-6 mx-auto mt-5">
5651
<PageTitle title="Handlekurv" />
57-
<table className="table-auto">
58-
<thead>
59-
<tr>
60-
<th className="px-4 py-2" scope="col" />
61-
<th className="px-4 py-2" scope="col" />
62-
<th className="px-4 py-2" scope="col">
63-
Produkt
64-
</th>
65-
<th className="px-4 py-2" scope="col">
66-
Pris
67-
</th>
68-
<th className="px-4 py-2" scope="col">
69-
Antall
70-
</th>
71-
<th className="px-4 py-2" scope="col">
72-
Total
73-
</th>
74-
</tr>
75-
</thead>
76-
<tbody>
77-
{cart.products.length &&
78-
cart.products.map((item) => (
79-
<CartItem
80-
key={item.productId}
81-
item={item}
82-
products={cart.products}
83-
// updateCartProcessing={updateCartProcessing}
84-
// handleRemoveProductClick={handleRemoveProductClick}
85-
// updateCart={updateCart}
86-
/>
87-
))}
88-
</tbody>
89-
</table>
52+
53+
<RegularCart cart={cart} />
54+
<MobileCart cart={cart} />
9055

9156
<div className="mt-4">
9257
<Link href="/kasse">
@@ -96,7 +61,6 @@ const CartItemsContainer = () => {
9661
</Link>
9762
</div>
9863
</div>
99-
10064
) : (
10165
<div className="p-6 mx-auto mt-5">
10266
<h2 className="text-lg">Ingen varer i handlekurven</h2>

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import MobileCartItem from './MobileCartItem.component';
2+
3+
const MobileCart = ({ cart }) => {
4+
return (
5+
<section
6+
//className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
7+
className="bg-white md:hidden lg:hidden xl:hidden"
8+
>
9+
<div className="flex items-center justify-center">
10+
<div className="container">
11+
<table className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg" style={{width: "360px"}}>
12+
<thead className="text-black">
13+
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
14+
<th className="p-3 text-left">Fjern</th>
15+
<th className="p-3 text-left">Navn</th>
16+
<th className="p-3 text-left">Pris</th>
17+
<th className="p-3 text-left">Antall</th>
18+
<th className="p-3 text-left">Totalpris</th>
19+
</tr>
20+
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
21+
<th className="p-3 text-left">Fjern</th>
22+
<th className="p-3 text-left">Navn</th>
23+
<th className="p-3 text-left">Pris</th>
24+
<th className="p-3 text-left">Antall</th>
25+
<th className="p-3 text-left">Totalpris</th>
26+
</tr>
27+
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
28+
<th className="p-3 text-left">Fjern</th>
29+
<th className="p-3 text-left">Navn</th>
30+
<th className="p-3 text-left">Pris</th>
31+
<th className="p-3 text-left">Antall</th>
32+
<th className="p-3 text-left">Totalpris</th>
33+
</tr>
34+
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
35+
<th className="p-3 text-left">Fjern</th>
36+
<th className="p-3 text-left">Navn</th>
37+
<th className="p-3 text-left">Pris</th>
38+
<th className="p-3 text-left">Antall</th>
39+
<th className="p-3 text-left">Totalpris</th>
40+
</tr>
41+
</thead>
42+
<tbody className="flex-1 sm:flex-none">
43+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
44+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
45+
X
46+
</td>
47+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
48+
WordPress Pennant
49+
</td>
50+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
51+
kr 18.00
52+
</td>
53+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
54+
1
55+
</td>
56+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
57+
kr 18.00
58+
</td>
59+
</tr>
60+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
61+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
62+
X
63+
</td>
64+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
65+
WordPress Pennant
66+
</td>
67+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
68+
kr 18.00
69+
</td>
70+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
71+
1
72+
</td>
73+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
74+
kr 18.00
75+
</td>
76+
</tr>
77+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
78+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
79+
X
80+
</td>
81+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
82+
WordPress Pennant
83+
</td>
84+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
85+
kr 18.00
86+
</td>
87+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
88+
1
89+
</td>
90+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
91+
kr 18.00
92+
</td>
93+
</tr>
94+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
95+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
96+
X
97+
</td>
98+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
99+
WordPress Pennant
100+
</td>
101+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
102+
kr 18.00
103+
</td>
104+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
105+
1
106+
</td>
107+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
108+
kr 18.00
109+
</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
</div>
114+
</div>
115+
116+
<div
117+
//className="flex flex-col"
118+
className="flex flex-col justify-between"
119+
>
120+
{cart.products.length &&
121+
cart.products.map((item) => (
122+
<MobileCartItem
123+
key={item.productId}
124+
item={item}
125+
products={cart.products}
126+
// updateCartProcessing={updateCartProcessing}
127+
// handleRemoveProductClick={handleRemoveProductClick}
128+
// updateCart={updateCart}
129+
/>
130+
))}
131+
</div>
132+
</section>
133+
);
134+
};
135+
136+
export default MobileCart;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useState } from 'react';
2+
3+
import SVGX from 'components/SVG/SVGX.component';
4+
5+
const MobileCartItem = ({ item }) => {
6+
const [productCount, setProductCount] = useState(item.qty);
7+
8+
return (
9+
<>
10+
<div className="inline-block pt-2">
11+
<SVGX />
12+
</div>
13+
14+
<div className="inline-block pt-2">
15+
{item.name}
16+
17+
</div>
18+
19+
<div className="inline-block pt-2">
20+
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
21+
22+
</div>
23+
24+
<div className="inline-block pt-2">
25+
<input className="w-12" type="number" min="1" value={productCount} />
26+
27+
</div>
28+
29+
<div className="inline-block pt-2">
30+
{'string' !== typeof item.totalPrice
31+
? item.totalPrice.toFixed(2)
32+
: item.totalPrice}
33+
34+
</div>
35+
</>
36+
);
37+
};
38+
39+
export default MobileCartItem;

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import CartItem from './CartItem.component';
2+
3+
const RegularCart = ({ cart }) => {
4+
return (
5+
<table className="hidden table-auto md:block lg:block xl:block">
6+
<thead>
7+
<tr>
8+
<th className="px-4 py-2" scope="col" />
9+
<th className="px-4 py-2" scope="col" />
10+
<th className="px-4 py-2" scope="col">
11+
Produkt
12+
</th>
13+
<th className="px-4 py-2" scope="col">
14+
Pris
15+
</th>
16+
<th className="px-4 py-2" scope="col">
17+
Antall
18+
</th>
19+
<th className="px-4 py-2" scope="col">
20+
Total
21+
</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
{cart.products.length &&
26+
cart.products.map((item) => (
27+
<CartItem
28+
key={item.productId}
29+
item={item}
30+
products={cart.products}
31+
// updateCartProcessing={updateCartProcessing}
32+
// handleRemoveProductClick={handleRemoveProductClick}
33+
// updateCart={updateCart}
34+
/>
35+
))}
36+
</tbody>
37+
</table>
38+
);
39+
};
40+
41+
export default RegularCart;

‎components/Checkout/OrderDetails.component.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@ const OrderDetails = ({ cart }) => {
99
{cart ? (
1010
<div className="p-6 mx-auto mt-5">
1111
<CheckoutTitle title="Handlekurv" />
12-
12+
1313
<table className="table-auto">
1414
<thead>
15-
<tr>
16-
<th className="px-4 py-2" scope="col" />
15+
<tr>
1716
<th className="px-4 py-2" scope="col" />
1817
<th className="px-4 py-2" scope="col">
1918
Produkt

‎components/Checkout/OrderDetailsCartItem.component.jsx

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
import { useState } from 'react';
22

3-
import SVGCloseX from 'components/SVG/SVGCloseX.component';
4-
5-
const OrderDetailsCartItem = ({
6-
item,
7-
products,
8-
updateCartProcessing,
9-
handleRemoveProductClick,
10-
updateCart,
11-
}) => {
3+
const OrderDetailsCartItem = ({ item }) => {
124
const [productCount, setProductCount] = useState(item.qty);
135

146
return (
157
<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">
8+
<td className="px-0 py-2 border sm:px-4 md:px-4 lg:px-4 xl:px-4">
209
<img
10+
className="hidden sm:block md:block lg:block xl:block"
2111
width="64"
2212
src={item.image.sourceUrl}
2313
srcSet={item.image.srcSet}
@@ -31,19 +21,13 @@ const OrderDetailsCartItem = ({
3121
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
3222
</td>
3323

34-
<td className="px-4 py-2 border">
35-
<input type="number" min="1" value={productCount} />
36-
</td>
24+
<td className="px-4 py-2 border">{productCount}</td>
3725

3826
<td className="px-4 py-2 border">
3927
{'string' !== typeof item.totalPrice
4028
? item.totalPrice.toFixed(2)
4129
: item.totalPrice}
4230
</td>
43-
44-
45-
46-
4731
</tr>
4832
);
4933
};

0 commit comments

Comments
 (0)