#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

94.31

/src/pages/LandingProduct.tsx

import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { FaCaretDown, FaStar } from 'react-icons/fa';
import { IoFilter } from 'react-icons/io5';
import { ScaleLoader } from 'react-spinners';
import { DynamicData } from '../@types/DynamicData';
import { searchInputs as SearchInputsType } from '../@types/SearchType';
import depart_icon from '../assets/departments_icon.svg';
import Button from '../components/buttons/Button';
import ProductPageAddToCart from '../components/carts/ProductPageAddToCart';
import CategoryModel from '../components/CategoryModel';
import FormInput from '../components/Forms/InputText';
import { getProducts } from '../redux/features/productSlice';
import {
        getSearchedProducts,
        manipulateSearchInput,
        search,
} from '../redux/features/SearchSlice';
import { useAppDispatch, useAppSelector } from '../redux/hooks/hooks';
import fetchInfo from '../utils/userDetails';
import AddToWish from '../components/wishes/AddToWish';
import { ThemeContext } from '../hooks/useWishcontext';
import useWish from '../hooks/useWishlist';
import SearchResultNotFound from './SearchResultNotFound';

const LandingProduct = () => {
        const { isLoading, products } = useAppSelector((state) => state.product);
        const { data, searchInputs } = useAppSelector((state) => state.search);
        const [openModel, setOpenModel] = useState(false);
        const [openFilter, setOpenFilter] = useState(false);
        const dispatch = useAppDispatch();

        const toggleModel = () => {
                setOpenModel(!openModel);
        };

        const tokenInfo = fetchInfo();

        useEffect(() => {
                if (products && !products.length && tokenInfo) {
                        dispatch(getProducts()).unwrap();
                }
        }, [dispatch, products, tokenInfo]);

        useEffect(() => {
                dispatch(getSearchedProducts(products));
        }, [products, dispatch]);

        const handleSearch = async (searchInput: Partial<SearchInputsType>) => {
                dispatch(manipulateSearchInput(searchInput));
        };

        useEffect(() => {
                dispatch(search(searchInputs)).unwrap();
        }, [dispatch, searchInputs]);
        const { data: wishes } = useWish();

        return (
                <>
                        <div className="perent_products_container min-h-screen relative">
                                {isLoading ? (
                                        <div className="w-full h-full flex items-center justify-center absolute">
                                                <ScaleLoader color="#256490" role="progressbar" />
                                        </div>
                                ) : (
                                        <div className="products_container flex flex-col items-center laptop:flex-row laptop:items-start pl-[5%] w-full mt-16 laptop:gap-5">
                                                <div className="departments cursor-pointer flex ipad:p-4 w-[100%] mobile:w-[100%] ipad:w-[40%] laptop:w-[28%]">
                                                        <div className="depart_icon z-10 w-[60%] mobile:w-[50%] laptop:w-[90%] bg-primary-lightblue p-2 flex items-center h-12 justify-between gap-2 mt-6 rounded-t-md relative">
                                                                <img src={depart_icon} alt="depart_icon" className="w-6 h-10" />
                                                                <h1 className="text-md font-semibld text-neutral-white">
                                                                        {searchInputs.categoryName
                                                                                ? searchInputs.categoryName
                                                                                : 'All categories'}
                                                                </h1>
                                                                <FaCaretDown
                                                                        className="text-3xl text-neutral-white"
                                                                        onClick={toggleModel}
                                                                />
                                                                <CategoryModel
                                                                        setOpenModel={setOpenModel}
                                                                        openModel={openModel}
                                                                />
                                                        </div>
                                                </div>

                                                <div className="mr-[5%] w-full">
                                                        <div className=" mobile:relative absolute tablet:absolute laptop:relative w-full top-6 mobile:top-0 tablet:top-6 laptop:top-0  pr-[10%] mobile:pr-0 tablet:pr-[10%] laptop:pr-0 flex justify-end cursor-pointer">
                                                                <div
                                                                        onClick={() => setOpenFilter(!openFilter)}
                                                                        className=" text-primary-lightblue py-1 w-[30%] h-12 mobile:h-8 tablet:h-12 laptop:h-10 mobile:w-[10%] tablet:w-[20%] laptop:w-[12%] right-0 flex items-center gap-2 justify-center rounded-md border-2 border-primary-lightblue"
                                                                >
                                                                        {' '}
                                                                        <IoFilter color="#266491" size="20px" />
                                                                        <p className="text-md">Filters</p>
                                                                </div>
                                                        </div>
                                                        {openFilter && (
                                                                <motion.form
                                                                        initial={{ y: '100%', opacity: 1 }}
                                                                        animate={{ y: '0%' }}
                                                                        transition={{ ease: 'easeOut', duration: 1 }}
                                                                        className=" flex w-full gap-5 py-3"
                                                                >
                                                                        <FormInput
                                                                                type="number"
                                                                                placeholder="Minimum price"
                                                                                otherStyles="h-12 rounded-md pl-3 primary-lightblue"
                                                                                value={
                                                                                        searchInputs.minPrice !== null
                                                                                                ? String(searchInputs.minPrice)
                                                                                                : ''
                                                                                }
                                                                                onChange={(e) =>
                                                                                        handleSearch({
                                                                                                minPrice: e.target.value
                                                                                                        ? String(e.target.value)
                                                                                                        : null,
                                                                                        })
                                                                                }
                                                                        />
                                                                        <FormInput
                                                                                type="number"
                                                                                placeholder="Maximum price"
                                                                                otherStyles="h-12 rounded-md pl-3 primary-lightblue"
                                                                                value={
                                                                                        searchInputs.maxPrice !== null
                                                                                                ? String(searchInputs.maxPrice)
                                                                                                : ''
                                                                                }
                                                                                onChange={(e) =>
                                                                                        handleSearch({
                                                                                                maxPrice: e.target.value
                                                                                                        ? String(e.target.value)
                                                                                                        : null,
                                                                                        })
                                                                                }
                                                                        />
                                                                </motion.form>
                                                        )}
                                                        <div
                                                                className={` ${!data ? 'flex flex-1 justify-end items-center' : 'grid mobile:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-10'} product_card_container max-h-[95vh] overflow-hidden overflow-y-scroll h-full py-2 place-items-center`}
                                                        >
                                                                {Array.isArray(data) ? (
                                                                        data.slice(0, 8).map((item: DynamicData, idx: number) => (
                                                                                <div
                                                                                        className="product_card bg-neutral-white p-4 flex flex-col rounded-md shadow laptop:max-w-[100%] h-full"
                                                                                        key={idx}
                                                                                >
                                                                                        <div className="card_profile p-2 w-full flex-grow">
                                                                                                <div className="w-full h-48 relative">
                                                                                                        <div className="w-full overflow-hidden flex shadow h-48">
                                                                                                                <img
                                                                                                                        src={item.images && item.images[0]}
                                                                                                                        alt="card_profile"
                                                                                                                        className="w-full h-full object-cover rounded-lg"
                                                                                                                />
                                                                                                        </div>
                                                                                                        <ProductPageAddToCart productId={item.id} />
                                                                                                        {item.discount > 0 && (
                                                                                                                <div className="discount absolute p-1 rounded bg-action-warning text-neutral-white -right-2 -top-2 font-bold">
                                                                                                                        {item.discount}%
                                                                                                                </div>
                                                                                                        )}
                                                                                                </div>
                                                                                        </div>
                                                                                        <div className="card_description pl-2 flex-grow">
                                                                                                <h1 className="py-2">
                                                                                                        {item.name.length > 20
                                                                                                                ? item.name.slice(0, 20) + '...'
                                                                                                                : item.name}
                                                                                                </h1>
                                                                                                <div className="ratings flex">
                                                                                                        <span className="ml-2 flex items-center gap-2">
                                                                                                                <FaStar />
                                                                                                                {item.ratings} ratings
                                                                                                        </span>
                                                                                                </div>
                                                                                                <div className="price_wish flex justify-between items-center mt-2 gap-2 flex-wrap py-2">
                                                                                                        <h1 className="text-2xl font-bold">
                                                                                                                {item.price}
                                                                                                                <small className="text-base font-normal">
                                                                                                                        {' '}
                                                                                                                        RWF
                                                                                                                </small>
                                                                                                        </h1>
                                                                                                        <div className="wish flex items-center cursor-pointer">
                                                                                                                <span className="mr-1">add to wish</span>
                                                                                                                {/* <FaHeart className=" text-action-error text-2xl cursor-pointer wish_btn" /> */}
                                                                                                                <ThemeContext.Provider value={wishes}>
                                                                                                                        <AddToWish productId={item.id} />
                                                                                                                </ThemeContext.Provider>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div className="btn flex justify-center">
                                                                                                <Button
                                                                                                        title="preview product"
                                                                                                        url={`/products/${item.id}`}
                                                                                                        otherStyles={
                                                                                                                ' rounded-l-full rounded-r-full mt-2 font-semibold'
                                                                                                        }
                                                                                                        buttonType={'button'}
                                                                                                />
                                                                                        </div>
                                                                                </div>
                                                                        ))
                                                                ) : (
                                                                        <SearchResultNotFound />
                                                                )}
                                                        </div>
                                                </div>
                                        </div>
                                )}
                        </div>
                </>
        );
};

export default LandingProduct;

1	import { motion } from 'framer-motion';	1✔
2	import { useEffect, useState } from 'react';	1✔
3	import { FaCaretDown, FaStar } from 'react-icons/fa';	1✔
4	import { IoFilter } from 'react-icons/io5';	1✔
5	import { ScaleLoader } from 'react-spinners';	1✔
6	import { DynamicData } from '../@types/DynamicData';	1✔
7	import { searchInputs as SearchInputsType } from '../@types/SearchType';	1✔
8	import depart_icon from '../assets/departments_icon.svg';	1✔
9	import Button from '../components/buttons/Button';	1✔
10	import ProductPageAddToCart from '../components/carts/ProductPageAddToCart';	1✔
11	import CategoryModel from '../components/CategoryModel';	1✔
12	import FormInput from '../components/Forms/InputText';	1✔
13	import { getProducts } from '../redux/features/productSlice';	1✔
14	import {	1✔
15	getSearchedProducts,	1✔
16	manipulateSearchInput,	1✔
17	search,	1✔
18	} from '../redux/features/SearchSlice';	1✔
19	import { useAppDispatch, useAppSelector } from '../redux/hooks/hooks';	1✔
20	import fetchInfo from '../utils/userDetails';	1✔
21	import AddToWish from '../components/wishes/AddToWish';	1✔
22	import { ThemeContext } from '../hooks/useWishcontext';	1✔
23	import useWish from '../hooks/useWishlist';	1✔
24	import SearchResultNotFound from './SearchResultNotFound';	1✔
25		1✔
26	const LandingProduct = () => {	1✔
27	const { isLoading, products } = useAppSelector((state) => state.product);	44✔
28	const { data, searchInputs } = useAppSelector((state) => state.search);	44✔
29	const [openModel, setOpenModel] = useState(false);	44✔
30	const [openFilter, setOpenFilter] = useState(false);	44✔
31	const dispatch = useAppDispatch();	44✔
32		44✔
33	const toggleModel = () => {	44✔
34	setOpenModel(!openModel);	×
35	};	×
36		44✔
37	const tokenInfo = fetchInfo();	44✔
38		44✔
39	useEffect(() => {	44✔
40	if (products && !products.length && tokenInfo) {	10✔
41	dispatch(getProducts()).unwrap();	1✔
42	}	1✔
43	}, [dispatch, products, tokenInfo]);	44✔
44		44✔
45	useEffect(() => {	44✔
46	dispatch(getSearchedProducts(products));	10✔
47	}, [products, dispatch]);	44✔
48		44✔
49	const handleSearch = async (searchInput: Partial<SearchInputsType>) => {	44✔
50	dispatch(manipulateSearchInput(searchInput));	16✔
51	};	16✔
52		44✔
53	useEffect(() => {	44✔
54	dispatch(search(searchInputs)).unwrap();	25✔
55	}, [dispatch, searchInputs]);	44✔
56	const { data: wishes } = useWish();	44✔
57		44✔
58	return (	44✔
59	<>	44✔
60	<div className="perent_products_container min-h-screen relative">	44✔
61	{isLoading ? (	44✔
62	<div className="w-full h-full flex items-center justify-center absolute">	1✔
63	<ScaleLoader color="#256490" role="progressbar" />	1✔
64	</div>	1✔
65	) : (	43✔
66	<div className="products_container flex flex-col items-center laptop:flex-row laptop:items-start pl-[5%] w-full mt-16 laptop:gap-5">	43✔
67	<div className="departments cursor-pointer flex ipad:p-4 w-[100%] mobile:w-[100%] ipad:w-[40%] laptop:w-[28%]">	43✔
68	<div className="depart_icon z-10 w-[60%] mobile:w-[50%] laptop:w-[90%] bg-primary-lightblue p-2 flex items-center h-12 justify-between gap-2 mt-6 rounded-t-md relative">	43✔
69	<img src={depart_icon} alt="depart_icon" className="w-6 h-10" />	43✔
70	<h1 className="text-md font-semibld text-neutral-white">	43✔
71	{searchInputs.categoryName	43!
72	? searchInputs.categoryName	×
73	: 'All categories'}	43✔
74	</h1>	43✔
75	<FaCaretDown	43✔
76	className="text-3xl text-neutral-white"	43✔
77	onClick={toggleModel}	43✔
78	/>	43✔
79	<CategoryModel	43✔
80	setOpenModel={setOpenModel}	43✔
81	openModel={openModel}	43✔
82	/>	43✔
83	</div>	43✔
84	</div>	43✔
85		43✔
86	<div className="mr-[5%] w-full">	43✔
87	<div className=" mobile:relative absolute tablet:absolute laptop:relative w-full top-6 mobile:top-0 tablet:top-6 laptop:top-0 pr-[10%] mobile:pr-0 tablet:pr-[10%] laptop:pr-0 flex justify-end cursor-pointer">	43✔
88	<div	43✔
89	onClick={() => setOpenFilter(!openFilter)}	43✔
90	className=" text-primary-lightblue py-1 w-[30%] h-12 mobile:h-8 tablet:h-12 laptop:h-10 mobile:w-[10%] tablet:w-[20%] laptop:w-[12%] right-0 flex items-center gap-2 justify-center rounded-md border-2 border-primary-lightblue"	43✔
91	>	43✔
92	{' '}	43✔
93	<IoFilter color="#266491" size="20px" />	43✔
94	<p className="text-md">Filters</p>	43✔
95	</div>	43✔
96	</div>	43✔
97	{openFilter && (	43✔
98	<motion.form	24✔
99	initial={{ y: '100%', opacity: 1 }}	24✔
100	animate={{ y: '0%' }}	24✔
101	transition={{ ease: 'easeOut', duration: 1 }}	24✔
102	className=" flex w-full gap-5 py-3"	24✔
103	>	24✔
104	<FormInput	24✔
105	type="number"	24✔
106	placeholder="Minimum price"	24✔
107	otherStyles="h-12 rounded-md pl-3 primary-lightblue"	24✔
108	value={	24✔
109	searchInputs.minPrice !== null	24✔
110	? String(searchInputs.minPrice)	20✔
111	: ''	4✔
112	}	24✔
113	onChange={(e) =>	24✔
114	handleSearch({	15✔
115	minPrice: e.target.value	15✔
116	? String(e.target.value)	15!
117	: null,	×
118	})	15✔
119	}	24✔
120	/>	24✔
121	<FormInput	24✔
122	type="number"	24✔
123	placeholder="Maximum price"	24✔
124	otherStyles="h-12 rounded-md pl-3 primary-lightblue"	24✔
125	value={	24✔
126	searchInputs.maxPrice !== null	24✔
127	? String(searchInputs.maxPrice)	21✔
128	: ''	3✔
129	}	24✔
130	onChange={(e) =>	24✔
131	handleSearch({	1✔
132	maxPrice: e.target.value	1✔
133	? String(e.target.value)	1!
134	: null,	×
135	})	1✔
136	}	24✔
137	/>	24✔
138	</motion.form>	24✔
139	)}	43✔
140	<div	43✔
141	className={` ${!data ? 'flex flex-1 justify-end items-center' : 'grid mobile:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-10'} product_card_container max-h-[95vh] overflow-hidden overflow-y-scroll h-full py-2 place-items-center`}	43!
142	>	43✔
143	{Array.isArray(data) ? (	43✔
144	data.slice(0, 8).map((item: DynamicData, idx: number) => (	43✔
145	<div	216✔
146	className="product_card bg-neutral-white p-4 flex flex-col rounded-md shadow laptop:max-w-[100%] h-full"	216✔
147	key={idx}	216✔
148	>	216✔
149	<div className="card_profile p-2 w-full flex-grow">	216✔
150	<div className="w-full h-48 relative">	216✔
151	<div className="w-full overflow-hidden flex shadow h-48">	216✔
152	<img	216✔
153	src={item.images && item.images[0]}	216✔
154	alt="card_profile"	216✔
155	className="w-full h-full object-cover rounded-lg"	216✔
156	/>	216✔
157	</div>	216✔
158	<ProductPageAddToCart productId={item.id} />	216✔
159	{item.discount > 0 && (	216✔
160	<div className="discount absolute p-1 rounded bg-action-warning text-neutral-white -right-2 -top-2 font-bold">	39✔
161	{item.discount}%	39✔
162	</div>	39✔
163	)}	216✔
164	</div>	216✔
165	</div>	216✔
166	<div className="card_description pl-2 flex-grow">	216✔
167	<h1 className="py-2">	216✔
168	{item.name.length > 20	216!
169	? item.name.slice(0, 20) + '...'	×
170	: item.name}	216✔
171	</h1>	216✔
172	<div className="ratings flex">	216✔
173	<span className="ml-2 flex items-center gap-2">	216✔
174	<FaStar />	216✔
175	{item.ratings} ratings	216✔
176	</span>	216✔
177	</div>	216✔
178	<div className="price_wish flex justify-between items-center mt-2 gap-2 flex-wrap py-2">	216✔
179	<h1 className="text-2xl font-bold">	216✔
180	{item.price}	216✔
181	<small className="text-base font-normal">	216✔
182	{' '}	216✔
183	RWF	216✔
184	</small>	216✔
185	</h1>	216✔
186	<div className="wish flex items-center cursor-pointer">	216✔
187	<span className="mr-1">add to wish</span>	216✔
188	{/* <FaHeart className=" text-action-error text-2xl cursor-pointer wish_btn" /> */}	216✔
189	<ThemeContext.Provider value={wishes}>	216✔
190	<AddToWish productId={item.id} />	216✔
191	</ThemeContext.Provider>	216✔
192	</div>	216✔
193	</div>	216✔
194	</div>	216✔
195	<div className="btn flex justify-center">	216✔
196	<Button	216✔
197	title="preview product"	216✔
198	url={`/products/${item.id}`}	216✔
199	otherStyles={	216✔
200	' rounded-l-full rounded-r-full mt-2 font-semibold'	216✔
201	}	216✔
202	buttonType={'button'}	216✔
203	/>	216✔
204	</div>	216✔
205	</div>	216✔
206	))	43!
UNCOV 207	) : (	×
UNCOV 208	<SearchResultNotFound />	×
209	)}	43✔
210	</div>	43✔
211	</div>	43✔
212	</div>	43✔
213	)}	44✔
214	</div>	44✔
215	</>	44✔
216	);	44✔
217	};	44✔
218		1✔
219	export default LandingProduct;	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