atlp-rwanda/knights-ecomm-fe | Build 9836581611 | src/components/Cart/Cart.tsx | Coveralls

1

import React, { useEffect } from 'react';

1✔

2

import { useSelector, useDispatch } from 'react-redux';

1✔

3

import { RootState, AppDispatch } from '../../redux/store';

1✔

4

import { fetchCart, removeFromCart } from '../../redux/actions/cartAction';

1✔

5

import CartSkeletonLoader from './CartSkeletonLoader';

1✔

6

import { X } from 'lucide-react';

1✔

7

import { useNavigate } from 'react-router-dom';

1✔

8

import { cartData } from '../../types/cartTypes';

1✔

9

1✔

10

function Cart() {

6✔

11

  const dispatch = useDispatch<AppDispatch>();

6✔

12

6✔

13

  const { cart, cartItems, loading } = useSelector((state: RootState) => state.cart);

6✔

14

6✔

15

  const navigate = useNavigate();

6✔

16

6✔

17

  const handleClick = (id: string) => {

6✔

20

6✔

21

  const handleRemoveFormCart = (id: string) => {

6✔

24

6✔

25

  useEffect(() => {

6✔

26

    dispatch(fetchCart());

2✔

27

  }, [dispatch]);

6✔

28

6✔

29

  useEffect(() => {

6✔

30

    window.scrollTo(0, 0);

2✔

31

  }, []);

6✔

32

6✔

33

  return (

6✔

34

<>

6✔

35

      {loading ? (

6✔

36

        <CartSkeletonLoader />

2✔

37

      ) : (

4✔

38

        <div className="h-auto w-full p-10 flex items-start justify-center">

4✔

39

          <div className="w-[80vw] flex flex-col items-center justify-start gap-y-2">

4✔

40

            <div className="w-full items-center justify-start">

4✔

41

              <div className="w-full flex items-center justify-start text-primary">

4✔

42

                <h1 className="font-medium text-2xl sm:text-3xl font-poppins mb-2">Shopping Cart</h1>

4✔

43

              </div>

4✔

44

            </div>

4✔

45

4✔

46

            {cartItems.length > 0 ? (

4✔

47

<>

4✔

48

                <div className="w-full overflow-x-auto" key="cartTable">

4✔

49

                  <div className="w-[1200px] grid grid-cols-12 mt-4 sm:w-full">

1✔

50

                    <div className="col-span-2 flex items-center justify-start">

1✔

51

                      <p className="font-medium font-poppins text-grey7 text-lg">Products</p>

1✔

52

                    </div>

1✔

53

                    <div className="col-span-3 flex items-center justify-start">

1✔

54

                      <p className="font-medium font-poppins text-grey7 text-lg">Title</p>

1✔

55

                    </div>

1✔

56

                    <div className="col-span-1 flex items-center justify-start ">

1✔

57

                      <p className="font-medium font-poppins text-grey7 text-lg">Price</p>

1✔

58

                    </div>

1✔

59

                    <div className="col-span-3 flex items-center justify-center">

1✔

60

                      <p className="font-medium font-poppins text-grey7 text-lg">Quantity</p>

1✔

61

                    </div>

1✔

62

                    <div className="col-span-2 flex items-center justify-start">

1✔

63

                      <p className="font-medium font-poppins text-grey7 text-lg">Total</p>

1✔

64

                    </div>

1✔

65

                    <div className="col-span-1 flex items-center justify-end">

1✔

66

                      <p className="font-medium font-poppins text-grey7 text-lg">Remove</p>

1✔

67

                    </div>

1✔

68

                  </div>

1✔

69

                  <div className="w-[1200px] sm:w-full h-[1px] bg-grey6 mt-1"></div>

1✔

70

1✔

71

                  {cartItems.map((item) => (

1✔

72

                    <React.Fragment key={item.id}>

1✔

73

                      <div className="w-[1200px] grid grid-cols-12 sm:w-full py-1">

1✔

74

                        <div className="col-span-2 flex items-center justify-start h-[75px]">

1✔

75

                          <div className="w-[55px] h-[70px]">

1✔

76

                            <img

1✔

77

                              src={item.product.images[0]}

1✔

78

                              alt={item.product.name}

1✔

79

                              className="w-full h-full object-cover"

1✔

80

/>

1✔

81

                          </div>

1✔

82

                        </div>

1✔

83

                        <div className="col-span-3 flex items-center justify-start h-[75px]">

1✔

84

<p

1✔

85

                            className="font-normal text-base font-poppins text-grey7 cursor-pointer"

1✔

86

                            onClick={() => handleClick(item.product.id)}

1✔

87

1✔

88

                            {item.product.name}

1✔

89

                          </p>

1✔

90

                        </div>

1✔

91

                        <div className="col-span-1 flex items-center justify-start h-[75px]">

1✔

92

                          <p className="font-normal text-base font-poppins text-grey7">

1✔

93

                            RWF{parseInt(item.newPrice).toLocaleString()}

1✔

94

                          </p>

1✔

95

                        </div>

1✔

96

                        <div className="col-span-3 flex items-center justify-center h-[75px]">

1✔

97

                          <p className="font-medium font-poppins flex items-center justify-center py-2 px-5 border-[2px] border-grey6 text-grey7 text-lg">

1✔

98

                            {item.quantity}

1✔

99

                          </p>

1✔

100

                        </div>

1✔

101

                        <div className="col-span-2 flex items-center justify-start h-[75px]">

1✔

102

                          <p className="font-normal text-base font-poppins text-grey7">

1✔

103

                            RWF{parseInt(item.total).toLocaleString()}

1✔

104

                          </p>

1✔

105

                        </div>

1✔

106

                        <div className="col-span-1 flex items-center justify-end h-[75px]">

1✔

107

                          <p className="font-medium font-poppins text-grey7 text-lg">

1✔

108

<X

1✔

109

                              strokeWidth={1}

1✔

110

                              className="cursor-pointer"

1✔

111

                              onClick={() => handleRemoveFormCart(item.id)}

1✔

112

/>

1✔

113

                          </p>

1✔

114

                        </div>

1✔

115

                      </div>

1✔

116

                      <div className="w-[1200px] sm:w-full h-[1px] bg-grey6 mt-1"></div>

1✔

117

                    </React.Fragment>

1✔

118

))}

1✔

119

                </div>

1✔

120

1✔

121

                {cart && (

1✔

122

<>

1✔

123

                    <div className="w-full flex items-center justify-start text-primary mt-4">

1✔

124

                      <h1 className="font-bold text-lg sm:text-base font-poppins mb-2">Coupon Code</h1>

1✔

125

                    </div>

1✔

126

1✔

127

                    <div className="w-full flex items-center justify-start">

1✔

128

                      <input

1✔

129

                        type="text"

1✔

130

                        placeholder="COUPONCODE"

1✔

131

                        className="h-[50px] w-[70%] sm:w-[350px] border border-grey3 px-2 py-2 outline-none font-poppins font-normal"

1✔

132

/>

1✔

133

                      <button className="h-[50px] w-[150px] flex items-center justify-center  border border-primary bg-primary text-white text-sm sm:text-base font-poppins font-normal px-2">

1✔

134

                        Apply Coupon

1✔

135

                      </button>

1✔

136

                    </div>

1✔

137

1✔

138

                    <div className="w-full flex items-center justify-start text-primary mt-8">

1✔

139

                      <h1 className="font-medium text-xl sm:text-xl font-poppins mb-2">Cart Totals</h1>

1✔

140

                    </div>

1✔

141

1✔

142

                    <div className="w-full items-center justify-start">

1✔

143

                      <div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-2">

1✔

144

                        <div className="w-full flex items-center justify-between py-1 text-grey7">

1✔

145

                          <p className="font-normal text-sm sm:text-lg font-poppins">Subtotals</p>

1✔

146

                          <p className="font-normal text-sm sm:text-lg font-poppins">

1✔

147

RWF

1✔

148

                            {parseInt((cart as cartData).totalAmount.toString()).toLocaleString()}

1✔

149

                          </p>

1✔

150

                        </div>

1✔

151

                        <div className="w-full h-[2px] bg-grey6 mt-1"></div>

1✔

152

                      </div>

1✔

153

                      <div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-3">

1✔

154

                        <div className="w-full flex items-center justify-between py-1 text-grey7">

1✔

155

                          <p className="font-normal text-sm sm:text-lg font-poppins">Delivery Fee</p>

1✔

156

                          <p className="font-normal text-sm sm:text-lg font-poppins">Free</p>

1✔

157

                        </div>

1✔

158

                        <div className="w-full h-[2px] bg-grey6 mt-1"></div>

1✔

159

                      </div>

1✔

160

                      <div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-2">

1✔

161

                        <div className="w-full flex items-center justify-between py-1 text-grey7">

1✔

162

                          <p className="font-medium text-sm sm:text-lg font-poppins">Total</p>

1✔

163

                          <p className="font-medium text-sm sm:text-lg font-poppins">

1✔

164

RWF

1✔

165

                            {parseInt((cart as cartData).totalAmount.toString()).toLocaleString()}

1✔

166

                          </p>

1✔

167

                        </div>

1✔

168

                      </div>

1✔

169

                    </div>

1✔

170

1✔

171

                    <div className="w-full items-center justify-start mt-4">

1✔

172

                      <button className="h-[50px] w-full sm:w-[500px] flex items-center justify-center  border border-primary bg-primary text-white font-poppins font-normal px-2">

1✔

173

                        PROCEED TO CHECKOUT

1✔

174

                      </button>

1✔

175

                    </div>

1✔

176

</>

1✔

177

)}

1✔

178

</>

1✔

179

            ) : (

1✔

180

              <div className="w-full h-[20vh] flex items-start justify-start text-grey2">

1✔

181

                <p className="font-normal text-sm sm:text-base font-poppins mt-2">No item in cart at the moment</p>

1✔

182

              </div>

1✔

183

)}

1✔

184

          </div>

1✔

185

        </div>

1✔

186

)}

1✔

187

</>

3✔

188

);

3✔

189

3✔

190

3✔

191

export default Cart;

3✔

atlp-rwanda / knights-ecomm-fe / 9836581611

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1	import React, { useEffect } from 'react';	1✔
2	import { useSelector, useDispatch } from 'react-redux';	1✔
3	import { RootState, AppDispatch } from '../../redux/store';	1✔
4	import { fetchCart, removeFromCart } from '../../redux/actions/cartAction';	1✔
5	import CartSkeletonLoader from './CartSkeletonLoader';	1✔
6	import { X } from 'lucide-react';	1✔
7	import { useNavigate } from 'react-router-dom';	1✔
8	import { cartData } from '../../types/cartTypes';	1✔
9		1✔
10	function Cart() {	6✔
11	const dispatch = useDispatch<AppDispatch>();	6✔
12		6✔
13	const { cart, cartItems, loading } = useSelector((state: RootState) => state.cart);	6✔
14		6✔
15	const navigate = useNavigate();	6✔
16		6✔
17	const handleClick = (id: string) => {	6✔
NEW 18	navigate(`/product/${id}`);	×
NEW 19	};	×
20		6✔
21	const handleRemoveFormCart = (id: string) => {	6✔
NEW 22	dispatch(removeFromCart(id));	×
NEW 23	};	×
24		6✔
25	useEffect(() => {	6✔
26	dispatch(fetchCart());	2✔
27	}, [dispatch]);	6✔
28		6✔
29	useEffect(() => {	6✔
30	window.scrollTo(0, 0);	2✔
31	}, []);	6✔
32		6✔
33	return (	6✔
34	<>	6✔
35	{loading ? (	6✔
36	<CartSkeletonLoader />	2✔
37	) : (	4✔
38	<div className="h-auto w-full p-10 flex items-start justify-center">	4✔
39	<div className="w-[80vw] flex flex-col items-center justify-start gap-y-2">	4✔
40	<div className="w-full items-center justify-start">	4✔
41	<div className="w-full flex items-center justify-start text-primary">	4✔
42	<h1 className="font-medium text-2xl sm:text-3xl font-poppins mb-2">Shopping Cart</h1>	4✔
43	</div>	4✔
44	</div>	4✔
45		4✔
46	{cartItems.length > 0 ? (	4✔
47	<>	4✔
48	<div className="w-full overflow-x-auto" key="cartTable">	4✔
49	<div className="w-[1200px] grid grid-cols-12 mt-4 sm:w-full">	1✔
50	<div className="col-span-2 flex items-center justify-start">	1✔
51	<p className="font-medium font-poppins text-grey7 text-lg">Products</p>	1✔
52	</div>	1✔
53	<div className="col-span-3 flex items-center justify-start">	1✔
54	<p className="font-medium font-poppins text-grey7 text-lg">Title</p>	1✔
55	</div>	1✔
56	<div className="col-span-1 flex items-center justify-start ">	1✔
57	<p className="font-medium font-poppins text-grey7 text-lg">Price</p>	1✔
58	</div>	1✔
59	<div className="col-span-3 flex items-center justify-center">	1✔
60	<p className="font-medium font-poppins text-grey7 text-lg">Quantity</p>	1✔
61	</div>	1✔
62	<div className="col-span-2 flex items-center justify-start">	1✔
63	<p className="font-medium font-poppins text-grey7 text-lg">Total</p>	1✔
64	</div>	1✔
65	<div className="col-span-1 flex items-center justify-end">	1✔
66	<p className="font-medium font-poppins text-grey7 text-lg">Remove</p>	1✔
67	</div>	1✔
68	</div>	1✔
69	<div className="w-[1200px] sm:w-full h-[1px] bg-grey6 mt-1"></div>	1✔
70		1✔
71	{cartItems.map((item) => (	1✔
72	<React.Fragment key={item.id}>	1✔
73	<div className="w-[1200px] grid grid-cols-12 sm:w-full py-1">	1✔
74	<div className="col-span-2 flex items-center justify-start h-[75px]">	1✔
75	<div className="w-[55px] h-[70px]">	1✔
76	<img	1✔
77	src={item.product.images[0]}	1✔
78	alt={item.product.name}	1✔
79	className="w-full h-full object-cover"	1✔
80	/>	1✔
81	</div>	1✔
82	</div>	1✔
83	<div className="col-span-3 flex items-center justify-start h-[75px]">	1✔
84	<p	1✔
85	className="font-normal text-base font-poppins text-grey7 cursor-pointer"	1✔
86	onClick={() => handleClick(item.product.id)}	1✔
87	>	1✔
88	{item.product.name}	1✔
89	</p>	1✔
90	</div>	1✔
91	<div className="col-span-1 flex items-center justify-start h-[75px]">	1✔
92	<p className="font-normal text-base font-poppins text-grey7">	1✔
93	RWF{parseInt(item.newPrice).toLocaleString()}	1✔
94	</p>	1✔
95	</div>	1✔
96	<div className="col-span-3 flex items-center justify-center h-[75px]">	1✔
97	<p className="font-medium font-poppins flex items-center justify-center py-2 px-5 border-[2px] border-grey6 text-grey7 text-lg">	1✔
98	{item.quantity}	1✔
99	</p>	1✔
100	</div>	1✔
101	<div className="col-span-2 flex items-center justify-start h-[75px]">	1✔
102	<p className="font-normal text-base font-poppins text-grey7">	1✔
103	RWF{parseInt(item.total).toLocaleString()}	1✔
104	</p>	1✔
105	</div>	1✔
106	<div className="col-span-1 flex items-center justify-end h-[75px]">	1✔
107	<p className="font-medium font-poppins text-grey7 text-lg">	1✔
108	<X	1✔
109	strokeWidth={1}	1✔
110	className="cursor-pointer"	1✔
111	onClick={() => handleRemoveFormCart(item.id)}	1✔
112	/>	1✔
113	</p>	1✔
114	</div>	1✔
115	</div>	1✔
116	<div className="w-[1200px] sm:w-full h-[1px] bg-grey6 mt-1"></div>	1✔
117	</React.Fragment>	1✔
118	))}	1✔
119	</div>	1✔
120		1✔
121	{cart && (	1✔
122	<>	1✔
123	<div className="w-full flex items-center justify-start text-primary mt-4">	1✔
124	<h1 className="font-bold text-lg sm:text-base font-poppins mb-2">Coupon Code</h1>	1✔
125	</div>	1✔
126		1✔
127	<div className="w-full flex items-center justify-start">	1✔
128	<input	1✔
129	type="text"	1✔
130	placeholder="COUPONCODE"	1✔
131	className="h-[50px] w-[70%] sm:w-[350px] border border-grey3 px-2 py-2 outline-none font-poppins font-normal"	1✔
132	/>	1✔
133	<button className="h-[50px] w-[150px] flex items-center justify-center border border-primary bg-primary text-white text-sm sm:text-base font-poppins font-normal px-2">	1✔
134	Apply Coupon	1✔
135	</button>	1✔
136	</div>	1✔
137		1✔
138	<div className="w-full flex items-center justify-start text-primary mt-8">	1✔
139	<h1 className="font-medium text-xl sm:text-xl font-poppins mb-2">Cart Totals</h1>	1✔
140	</div>	1✔
141		1✔
142	<div className="w-full items-center justify-start">	1✔
143	<div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-2">	1✔
144	<div className="w-full flex items-center justify-between py-1 text-grey7">	1✔
145	<p className="font-normal text-sm sm:text-lg font-poppins">Subtotals</p>	1✔
146	<p className="font-normal text-sm sm:text-lg font-poppins">	1✔
147	RWF	1✔
148	{parseInt((cart as cartData).totalAmount.toString()).toLocaleString()}	1✔
149	</p>	1✔
150	</div>	1✔
151	<div className="w-full h-[2px] bg-grey6 mt-1"></div>	1✔
152	</div>	1✔
153	<div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-3">	1✔
154	<div className="w-full flex items-center justify-between py-1 text-grey7">	1✔
155	<p className="font-normal text-sm sm:text-lg font-poppins">Delivery Fee</p>	1✔
156	<p className="font-normal text-sm sm:text-lg font-poppins">Free</p>	1✔
157	</div>	1✔
158	<div className="w-full h-[2px] bg-grey6 mt-1"></div>	1✔
159	</div>	1✔
160	<div className="w-full sm:w-[500px] flex flex-col items-center justify-start mt-2">	1✔
161	<div className="w-full flex items-center justify-between py-1 text-grey7">	1✔
162	<p className="font-medium text-sm sm:text-lg font-poppins">Total</p>	1✔
163	<p className="font-medium text-sm sm:text-lg font-poppins">	1✔
164	RWF	1✔
165	{parseInt((cart as cartData).totalAmount.toString()).toLocaleString()}	1✔
166	</p>	1✔
167	</div>	1✔
168	</div>	1✔
169	</div>	1✔
170		1✔
171	<div className="w-full items-center justify-start mt-4">	1✔
172	<button className="h-[50px] w-full sm:w-[500px] flex items-center justify-center border border-primary bg-primary text-white font-poppins font-normal px-2">	1✔
173	PROCEED TO CHECKOUT	1✔
174	</button>	1✔
175	</div>	1✔
176	</>	1✔
177	)}	1✔
178	</>	1✔
179	) : (	1✔
180	<div className="w-full h-[20vh] flex items-start justify-start text-grey2">	1✔
181	<p className="font-normal text-sm sm:text-base font-poppins mt-2">No item in cart at the moment</p>	1✔
182	</div>	1✔
183	)}	1✔
184	</div>	1✔
185	</div>	1✔
186	)}	1✔
187	</>	3✔
188	);	3✔
189	}	3✔
190		3✔
191	export default Cart;	3✔

atlp-rwanda / knights-ecomm-fe / 9836581611

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous