#1136

Committed 23 Jul 2024 01:45PM UTC coverage: 92.72% (-0.004%) from 92.724%

Build # #1136

Build Type

Committed by

Commit Message

feat:(stripe payment): implementation of stripe payment 187419028

Pull Request Pull Request #44: #187419028 implementation of stripe payment API

Run Details

753 of 926 branches covered (81.32%)

Branch coverage included in aggregate %.

342 of 357 new or added lines in 8 files covered. (95.8%)

3 existing lines in 2 files now uncovered.

8634 of 9198 relevant lines covered (93.87%)

15.92 hits per line

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

96.57

/src/pages/dashboard/buyer/order/SingleOrders.tsx

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { ScaleLoader } from 'react-spinners';
import { DynamicData } from '../../../../@types/DynamicData';
import BackButton from '../../../../components/buttons/BackButton';
import { getSingleOrder } from '../../../../redux/features/OrdersSlice';
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks/hooks';
import getStatusColor from '../../../../utils/statusColor';
import Pagination from '../../../../components/dashboard/buyer/Pagination';

const SingleOrders = () => {
        const dispatch = useAppDispatch();
        const { id } = useParams<{ id: string }>();
        const { isLoading, singleOrder } = useAppSelector((state) => state.order);

        useEffect(() => {
                if (id) {
                        dispatch(getSingleOrder(id || '')).unwrap();
                }
        }, [dispatch, id]);

        const [currentPage, setCurrentPage] = useState(0);
        const itemsPerPage = 3;

        const SingleOrderArray = Array.isArray(singleOrder) ? singleOrder : [];
        const offset = currentPage * itemsPerPage;

        const paginatedSales =
                SingleOrderArray[0]?.sales.slice(offset, offset + itemsPerPage) || [];
        const pageCount = Math.ceil(
                (SingleOrderArray[0]?.sales.length || 0) / itemsPerPage,
        );

        const handlePageClick = (event: { selected: number }) => {
                setCurrentPage(event.selected);
        };

        return (
                <>
                        <div className="bg-neutral-white flex flex-col px-8 mx-auto my-24 tablet:mb-12 tablet:mt-44 ipad:w-[80%] laptop:w-[70%]">
                                {isLoading ? (
                                        <div
                                                className="loader_icon flex justify-center items-center h-screen"
                                                role="progressbar"
                                                aria-label="menu"
                                        >
                                                <ScaleLoader color="#256490" />
                                        </div>
                                ) : (
                                        <>
                                                {SingleOrderArray.map((item: DynamicData, idx: number) => (
                                                        <div key={idx} className="space-y-10 tablet:space-y-8 ">
                                                                <div className="flex justify-end items-center ">
                                                                        <BackButton
                                                                                isBordered
                                                                                title={''}
                                                                                otherStyles="bg-primary-lightblue text-neutral-white _shadow hover:bg-primary-lightblue/85"
                                                                        />
                                                                </div>
                                                                <div className=" space-y-5 bg-neutral-white px-7 py-8 ipad:py-12 ipad:space-y-8 rounded-lg _shadow">
                                                                        <div className="flex flex-col gap-2 tablet:flex-row justify-between">
                                                                                <h3 className="font-bold tablet:text-lg">
                                                                                        Order Id: <span>#{item.id?.slice(0, 5)}</span>
                                                                                </h3>
                                                                                <p className="font-semibold">
                                                                                        Delivery Date:{' '}
                                                                                        <span className="font-normal">
                                                                                                {new Date(
                                                                                                        item.sales[0].deliveryDate || 0,
                                                                                                ).toLocaleDateString()}
                                                                                        </span>
                                                                                </p>
                                                                        </div>
                                                                        <div className="flex flex-col gap-2 tablet:flex-row justify-between">
                                                                                <p className="font-semibold">
                                                                                        Items:{' '}
                                                                                        <span className="font-normal">{item.sales.length}</span>
                                                                                </p>
                                                                                <p className="font-semibold">
                                                                                        Status:
                                                                                        <span className={`${getStatusColor(item.status)} pl-2`}>
                                                                                                {item.status}
                                                                                        </span>
                                                                                </p>
                                                                        </div>
                                                                        <p className="font-semibold">
                                                                                Total Price:{' '}
                                                                                <span className="text-primary-lightblue mr-1">
                                                                                        {item.sales.reduce(
                                                                                                (acc: number, sale: DynamicData) =>
                                                                                                        acc + sale.soldProducts.price * sale.quantitySold,
                                                                                                0,
                                                                                        )}
                                                                                </span>
                                                                                <span className="text-primary-lightblue">RWF</span>
                                                                        </p>
                                                                </div>
                                                                <div className="_shadow rounded-2xl">
                                                                        <div className=" flex flex-col tablet:flex tablet:flex-row tablet:justify-evenly bg-neutral-white p-2">
                                                                                {paginatedSales.map((sale: DynamicData, idx: number) => (
                                                                                        <div
                                                                                                key={idx}
                                                                                                className=" p-4 m-4 rounded-lg _shadow space-y-5"
                                                                                        >
                                                                                                <div className=" ">
                                                                                                        <img
                                                                                                                src={sale.soldProducts.images[0]}
                                                                                                                alt="image"
                                                                                                                className="rounded-lg w-full h-48 tablet:w-60 tablet:h-50 object-cover"
                                                                                                        />
                                                                                                </div>
                                                                                                <div className="space-y-3">
                                                                                                        <div>
                                                                                                                <p className="font-bold">
                                                                                                                        Product:{' '}
                                                                                                                        <span className="font-medium">
                                                                                                                                {sale.soldProducts.name}
                                                                                                                        </span>
                                                                                                                </p>
                                                                                                        </div>
                                                                                                        <div>
                                                                                                                <p className="font-bold">
                                                                                                                        Price:{' '}
                                                                                                                        <span className="font-medium">
                                                                                                                                {sale.soldProducts.price}
                                                                                                                        </span>{' '}
                                                                                                                        Rwf
                                                                                                                </p>
                                                                                                        </div>
                                                                                                        <div>
                                                                                                                <p className="font-bold">
                                                                                                                        Status:{' '}
                                                                                                                        <span
                                                                                                                                className={`${getStatusColor(sale.status)} pl-0.5`}
                                                                                                                        >
                                                                                                                                {sale.status}
                                                                                                                        </span>
                                                                                                                </p>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                ))}
                                                                        </div>
                                                                        <div className="flex items-center justify-center pb-7">
                                                                                <Pagination
                                                                                        pageCount={pageCount}
                                                                                        onPageChange={handlePageClick}
                                                                                />
                                                                        </div>
                                                                </div>
                                                        </div>
                                                ))}
                                        </>
                                )}
                        </div>
                </>
        );
};
export default SingleOrders;

1	import { useEffect, useState } from 'react';	1✔
2	import { useParams } from 'react-router-dom';	1✔
3	import { ScaleLoader } from 'react-spinners';	1✔
4	import { DynamicData } from '../../../../@types/DynamicData';	1✔
5	import BackButton from '../../../../components/buttons/BackButton';	1✔
6	import { getSingleOrder } from '../../../../redux/features/OrdersSlice';	1✔
7	import { useAppDispatch, useAppSelector } from '../../../../redux/hooks/hooks';	1✔
8	import getStatusColor from '../../../../utils/statusColor';	1✔
9	import Pagination from '../../../../components/dashboard/buyer/Pagination';	1✔
10		1✔
11	const SingleOrders = () => {	1✔
12	const dispatch = useAppDispatch();	2✔
13	const { id } = useParams<{ id: string }>();	2✔
14	const { isLoading, singleOrder } = useAppSelector((state) => state.order);	2✔
15		2✔
16	useEffect(() => {	2✔
17	if (id) {	2!
NEW 18	dispatch(getSingleOrder(id \|\| '')).unwrap();	×
NEW 19	}	×
20	}, [dispatch, id]);	2✔
21		2✔
22	const [currentPage, setCurrentPage] = useState(0);	2✔
23	const itemsPerPage = 3;	2✔
24		2✔
25	const SingleOrderArray = Array.isArray(singleOrder) ? singleOrder : [];	2✔
26	const offset = currentPage * itemsPerPage;	2✔
27		2✔
28	const paginatedSales =	2✔
29	SingleOrderArray[0]?.sales.slice(offset, offset + itemsPerPage) \|\| [];	2✔
30	const pageCount = Math.ceil(	2✔
31	(SingleOrderArray[0]?.sales.length \|\| 0) / itemsPerPage,	2✔
32	);	2✔
33		2✔
34	const handlePageClick = (event: { selected: number }) => {	2✔
NEW 35	setCurrentPage(event.selected);	×
NEW 36	};	×
37		2✔
38	return (	2✔
39	<>	2✔
40	<div className="bg-neutral-white flex flex-col px-8 mx-auto my-24 tablet:mb-12 tablet:mt-44 ipad:w-[80%] laptop:w-[70%]">	2✔
41	{isLoading ? (	2✔
42	<div	1✔
43	className="loader_icon flex justify-center items-center h-screen"	1✔
44	role="progressbar"	1✔
45	aria-label="menu"	1✔
46	>	1✔
47	<ScaleLoader color="#256490" />	1✔
48	</div>	1✔
49	) : (	1✔
50	<>	1✔
51	{SingleOrderArray.map((item: DynamicData, idx: number) => (	1✔
52	<div key={idx} className="space-y-10 tablet:space-y-8 ">	1✔
53	<div className="flex justify-end items-center ">	1✔
54	<BackButton	1✔
55	isBordered	1✔
56	title={''}	1✔
57	otherStyles="bg-primary-lightblue text-neutral-white _shadow hover:bg-primary-lightblue/85"	1✔
58	/>	1✔
59	</div>	1✔
60	<div className=" space-y-5 bg-neutral-white px-7 py-8 ipad:py-12 ipad:space-y-8 rounded-lg _shadow">	1✔
61	<div className="flex flex-col gap-2 tablet:flex-row justify-between">	1✔
62	<h3 className="font-bold tablet:text-lg">	1✔
63	Order Id: <span>#{item.id?.slice(0, 5)}</span>	1✔
64	</h3>	1✔
65	<p className="font-semibold">	1✔
66	Delivery Date:{' '}	1✔
67	<span className="font-normal">	1✔
68	{new Date(	1✔
69	item.sales[0].deliveryDate \|\| 0,	1!
70	).toLocaleDateString()}	1✔
71	</span>	1✔
72	</p>	1✔
73	</div>	1✔
74	<div className="flex flex-col gap-2 tablet:flex-row justify-between">	1✔
75	<p className="font-semibold">	1✔
76	Items:{' '}	1✔
77	<span className="font-normal">{item.sales.length}</span>	1✔
78	</p>	1✔
79	<p className="font-semibold">	1✔
80	Status:	1✔
81	<span className={`${getStatusColor(item.status)} pl-2`}>	1✔
82	{item.status}	1✔
83	</span>	1✔
84	</p>	1✔
85	</div>	1✔
86	<p className="font-semibold">	1✔
87	Total Price:{' '}	1✔
88	<span className="text-primary-lightblue mr-1">	1✔
89	{item.sales.reduce(	1✔
90	(acc: number, sale: DynamicData) =>	1✔
91	acc + sale.soldProducts.price * sale.quantitySold,	1✔
92	0,	1✔
93	)}	1✔
94	</span>	1✔
95	<span className="text-primary-lightblue">RWF</span>	1✔
96	</p>	1✔
97	</div>	1✔
98	<div className="_shadow rounded-2xl">	1✔
99	<div className=" flex flex-col tablet:flex tablet:flex-row tablet:justify-evenly bg-neutral-white p-2">	1✔
100	{paginatedSales.map((sale: DynamicData, idx: number) => (	1✔
101	<div	1✔
102	key={idx}	1✔
103	className=" p-4 m-4 rounded-lg _shadow space-y-5"	1✔
104	>	1✔
105	<div className=" ">	1✔
106	<img	1✔
107	src={sale.soldProducts.images[0]}	1✔
108	alt="image"	1✔
109	className="rounded-lg w-full h-48 tablet:w-60 tablet:h-50 object-cover"	1✔
110	/>	1✔
111	</div>	1✔
112	<div className="space-y-3">	1✔
113	<div>	1✔
114	<p className="font-bold">	1✔
115	Product:{' '}	1✔
116	<span className="font-medium">	1✔
117	{sale.soldProducts.name}	1✔
118	</span>	1✔
119	</p>	1✔
120	</div>	1✔
121	<div>	1✔
122	<p className="font-bold">	1✔
123	Price:{' '}	1✔
124	<span className="font-medium">	1✔
125	{sale.soldProducts.price}	1✔
126	</span>{' '}	1✔
127	Rwf	1✔
128	</p>	1✔
129	</div>	1✔
130	<div>	1✔
131	<p className="font-bold">	1✔
132	Status:{' '}	1✔
133	<span	1✔
134	className={`${getStatusColor(sale.status)} pl-0.5`}	1✔
135	>	1✔
136	{sale.status}	1✔
137	</span>	1✔
138	</p>	1✔
139	</div>	1✔
140	</div>	1✔
141	</div>	1✔
142	))}	1✔
143	</div>	1✔
144	<div className="flex items-center justify-center pb-7">	1✔
145	<Pagination	1✔
146	pageCount={pageCount}	1✔
147	onPageChange={handlePageClick}	1✔
148	/>	1✔
149	</div>	1✔
150	</div>	1✔
151	</div>	1✔
152	))}	1✔
153	</>	1✔
154	)}	2✔
155	</div>	2✔
156	</>	2✔
157	);	2✔
158	};	2✔
159	export default SingleOrders;	1✔

atlp-rwanda / hackers-ec-Fe / #1136

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