10091870848

Committed 25 Jul 2024 09:02AM UTC coverage: 90.842% (+0.04%) from 90.801%

Build # 10091870848

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #80 from atlp-rwanda/fix-category-caption

modify category capturing on products

Run Details

1095 of 1356 branches covered (80.75%)

Branch coverage included in aggregate %.

150 of 189 new or added lines in 6 files covered. (79.37%)

37 existing lines in 2 files now uncovered.

11433 of 12435 relevant lines covered (91.94%)

12.31 hits per line

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

81.88

/src/components/SingleProduct/SingleProduct.tsx

import React, { useEffect, useRef, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '../../redux/store';
import { addFeedback, fetchSingleProduct } from '../../redux/actions/productAction';
import SingleProductSkeletonLoader from './SingleProductSkeletonLoader';
import { useParams } from 'react-router-dom';
import toast from 'react-hot-toast';
import { Minus, Plus, Star } from 'lucide-react';
import ProductBreadcrumbs from '../Breadcrumbs/ProductBreadcrumbs';
import { AddToCartData } from '../../types/cartTypes';
import { addToCart } from '../../redux/actions/cartAction';
import { BeatLoader } from 'react-spinners';
import FeedbackForm from '../Forms/FeedbackForm';
import Popup from '../Popups/Popup';
import { FeedbackPayload } from '../../types/FeedbackTypes';
import { PopupProps } from '../../types/CouponTypes';
import { deleteFeedback, GetOrders, UpdateFeedback } from '../../redux/actions/OrdersAction';

import FeedbackFormPopup from '../Popups/FeedbackFormPopup';
import ConfirmDeletePopup from './ConfirmDeletePopup';
// eslint-disable-next-line react-refresh/only-export-components
export function triggerUpdateFeedback(dispatch: AppDispatch, feedbackId: string, data: any, productId: string) {
  dispatch(UpdateFeedback({ feedbackId, data })).then(() => {
    dispatch(fetchSingleProduct(productId));
  });
  dispatch(deleteFeedback({ feedbackId })).then(() => {
    dispatch(fetchSingleProduct(productId));
  });
}
function SingleProduct() {
  const { id } = useParams<{ id: string }>();
  const [isVisible, setIsVisible] = useState(false);
  const [visible, setVisible] = useState('false');

  const openFormPopup = (openForm: string) => {
    setIsVisible(!isVisible);
    setVisible(openForm);
  };

  const dispatch = useDispatch<AppDispatch>();

  const { product, loading, error } = useSelector((state: RootState) => state.singleProduct);
  const { orders } = useSelector((state: RootState) => state.buyerOrders);

  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [showPopup, setShowPopup] = useState(false);
  const [orderId, setOrderId] = useState('');
  const [popupProps, setPopupProps] = useState<PopupProps>({
    title: '',
    subtitle: '',
    responseType: 'success',
    duration: 3000,
    onClose: () => setShowPopup(false)
  });
  const inputRef = useRef<HTMLInputElement>(null);
  const [productQuantity, setProductQuantity] = useState<number>(1);

  const handleIncrement = () => {
    setProductQuantity((prev) => prev + 1);
  };

  const handleUpdate = async (data: any) => {
    dispatch(UpdateFeedback({ feedbackId: data?.id, data })).then(() => {
      handleGetProduct();
    });
    setIsVisible(false);
    setVisible('');
  };

  const handleDecrement = () => {
    if (productQuantity > 0) {
      setProductQuantity((prev) => prev - 1);
    }
  };

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

  const handleAddToCart = () => {
    const data: AddToCartData = {
      productId: product?.id,
      quantity: productQuantity
    };

    dispatch(addToCart(data));

    if (addToCartError) {
      toast.error(addToCartError);
    }

    if (!addToCartloading && !addToCartError) {
      toast.success('Product added to cart');
    }
  };

  useEffect(() => {
    dispatch(fetchSingleProduct(id as string));
    dispatch(GetOrders());
  }, [dispatch, id]);
  useEffect(() => {
    if (orders) {
      const foundOrder = orders.find((order) => order.orderItems.some((item) => item.product.id === id));
      if (foundOrder) {
        setOrderId(foundOrder.id);
      }
    }
  }, [orders, id]);
  useEffect(() => {
    if (error) {
      toast.error(error);
    }
  }, [error]);
  useEffect(() => {
    if (addToCartError) {
      toast.error(addToCartError);
    }
  }, [addToCartError]);

  useEffect(() => {
    window.scrollTo(0, 0);
    if (product) {
      setSelectedImage(product.images[0]);
    }
  }, [product]);

  const handleImageClick = (image: string) => {
    setSelectedImage(image);
  };
  const handleGetProduct = async () => {
    await dispatch(fetchSingleProduct(id as string));
  };

  const handleDeleteFeedback = async (feedbackId: string) => {
    dispatch(deleteFeedback({ feedbackId })).then(() => {
      handleGetProduct();
      setIsVisible(false);
      setVisible('');
    });
  };
  const formattedDate = (dateString: string): string => {
    const options: Intl.DateTimeFormatOptions = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };
    return new Date(dateString).toLocaleDateString('en-US', options);
  };

  useEffect(() => {
    if (inputRef.current) {
      const length = productQuantity.toString().length;
      inputRef.current.style.width = `${Math.max(length * 10, 15)}px`;
    }
  }, [productQuantity]);

  const handleSubmit = async (data: FeedbackPayload) => {
    setOrderId(orderId);
    try {
      await dispatch(addFeedback({ data, productId: id as string })).then((response) => {
        toast.success(response.payload.message);
        dispatch(fetchSingleProduct(id as string));
      });
    } catch (error: any) {
      setPopupProps({
        title: 'Failure',
        subtitle: `${error.message}`,
        responseType: 'fail',
        duration: 3000,
        onClose: () => setShowPopup(false)
      });

      setShowPopup(true);
    }
  };
  const handleClose = () => {
    console.log('closed');
  };

  const [showAllReviews, setShowAllReviews] = useState(false);
  const toggleShowAllReviews = () => {
    setShowAllReviews(!showAllReviews);
  };

  return (
    <>
      {loading ? (
        <SingleProductSkeletonLoader />
      ) : (
        product !== null && (
          <div className="h-auto w-full p-10 flex items-start justify-center">
            <div className="w-[80vw] flex flex-col items-center justify-start gap-y-4">
              <ProductBreadcrumbs item={product} />

              <div className="w-full flex flex-col sm:flex-row items-start justify-start gap-x-5">
                <div className="w-full sm:w-auto flex flex-col-reverse sm:flex-row items-start justify-start gap-x-4">
                  <div className="h-[65px] sm:h-[450px] w-[100%] sm:w-[85px] flex flex-row sm:flex-col items-center justify-start gap-x-3 sm:gap-y-3 px-0.5 overflow-x-auto overflow-y-hidden sm:overflow-x-hidden sm:overflow-y-auto mt-4 sm:mt-0">
                    {product?.images?.map((image, index) => (
                      <div
                        className="min-w-[80px] sm:w-full h-[50px] sm:h-[100px] shadow-prodImage cursor-pointer"
                        key={index}
                        onClick={() => handleImageClick(image)}
                      >
                        <img src={image} alt="thumbnail " className="h-full w-full object-cover" role="testRole" />
                      </div>
                    ))}
                  </div>
                  <div className="h-[450px] w-full sm:w-[375px] shadow-prodImage">
                    <img
                      src={selectedImage as string}
                      alt="main image"
                      className="h-full w-full object-cover"
                      role="main image"
                    />
                  </div>
                  <div className="sm:hidden w-full flex items-center justify-start text-primary">
                    <h1 className="font-medium text-2xl sm:text-3xl font-poppins mb-2">{product?.name}</h1>
                  </div>
                </div>

                <div className="w-full h-auto sm:h-[450px] flex flex-col items-start justify-start sm:justify-between gap-y-1">
                  <div className="w-full flex flex-col items-start justify-start gap-y-2 mt-5 sm:mt-0">
                    <div className="hidden w-full sm:flex items-center justify-start text-primary">
                      <h1 className="font-medium text-2xl sm:text-3xl font-poppins">{product?.name}</h1>
                    </div>
                    <div className="w-full flex items-center justify-start text-orange gap-x-1.5">
                      <Star fill="#FF4141" strokeWidth={1} />
                      <Star fill="#FF4141" strokeWidth={1} />
                      <Star fill="#FF4141" strokeWidth={1} />
                      <Star fill="#FF4141" strokeWidth={1} />
                      <Star fill="#FF4141" fillOpacity={0.5} />{' '}
                      <p className="text-primary text-md font-thin font-poppins">({product?.feedbacks?.length})</p>
                    </div>
                    <div className="w-full flex items-center justify-start mt-8 gap-x-3">
                      {product?.oldPrice !== null && parseInt(product?.oldPrice) > parseInt(product?.newPrice) && (
                        <p className="font-poppins font-medium text-2xl text-grey2 line-through">
                          RWF{parseInt(product?.oldPrice).toLocaleString()}
                        </p>
                      )}

                      <p className="font-poppins font-medium text-2xl text-orange">
                        RWF{parseInt(product?.newPrice).toLocaleString()}
                      </p>
                    </div>
                  </div>

                  <div className="w-full flex flex-col items-center sm:items-start justify-center sm:justify-start gap-y-2">
                    <div className="w-full flex items-center justify-start text-primary mt-4 sm:mt-0">
                      <p className="w-full text-center sm:text-left font-poppins font-medium text-xl sm:text-base">
                        Quantity
                      </p>
                    </div>
                    <div className="w-[80%] sm:w-auto flex items-center justify-center sm:justify-start px-3 py-1.5 text-grey5 border-[1.5px] border-grey5 gap-x-4 font-poppins font-medium mb-0 sm:mb-3">
                      <Minus strokeWidth={2} className="cursor-pointer" onClick={handleDecrement} />
                      <input
                        ref={inputRef}
                        type="text"
                        className="outline-none w-[15px] border-none text-center font-poppins font-normal text-base text-grey5"
                        value={productQuantity}
                        onChange={(e) => setProductQuantity(parseInt(e.target.value) || 0)}
                      />
                      <Plus strokeWidth={2} className="cursor-pointer" onClick={handleIncrement} />
                    </div>
                    <button
                      className={`flex items-center justify-center w-full sm:w-[180px] h-[45px] bg-primary text-white font-poppins font-medium text-base border border-primary mt-2 ${productQuantity === 0 ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                      disabled={productQuantity === 0}
                      onClick={handleAddToCart}
                    >
                      {addToCartloading ? <BeatLoader color="#ffffff" /> : 'Add to Cart'}
                    </button>
                    {orderId && (
                      <div className="block">
                        <FeedbackFormPopup
                          trigger={
                            <button
                              className="px-8 py-4 bg-[#E7EBEF] font-semibold text-black rounded-lg flex gap-4 items-center hover:scale-105 transition-all duration-300 ease-in-out"
                              role="feedback-button"
                            >
                              Feedback <Plus />
                            </button>
                          }
                          title="Share with us your review"
                          submitText="Submit Review"
                          closeText="Cancel"
                          body={
                            <FeedbackForm
                              onSubmit={handleSubmit}
                              orderId={orderId}
                              title={'Share with us your review'}
                            />
                          }
                          onSubmit={handleSubmit}
                          onClose={handleClose}
                        />

                        {showPopup && <Popup {...popupProps} onClose={() => setShowPopup(false)} />}
                      </div>
                    )}
                    <div className="w-full flex items-center justify-start gap-x-1 mt-4 sm:mt-0">
                      <p className="font-poppins font-semibold text-primary text-lg sm:text-base">Category:</p>
                      <p className="font-poppins font-normal text-grey2 text-lg sm:text-base">
                        {product?.categories.map((category) => category.name).join(', ')}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="w-full flex flex-col items-start justify-start gap-y-2 mt-4 sm:mt-6">
                <div className="w-full flex items-center justify-center sm:justify-start text-primary">
                  <h1 className="font-medium text-xl sm:text-3xl font-poppins">Product Description</h1>
                </div>
              </div>

              <div className="w-full flex flex-col items-start justify-start mt-2 sm:mt-4">
                <div className="w-full flex items-center justify-start text-grey4">
                  {
                    <p className="text-sm font-light sm:font-normal sm:text-base font-poppins">
                      {product?.description}
                    </p>
                  }
                </div>
              </div>
              <div className="container w-full">
                <h2 className="text-2xl font-bold text-gray-800 mb-4">Reviews ({product?.feedbacks?.length})</h2>

                {product?.feedbacks.slice(0, showAllReviews ? product?.feedbacks?.length : 5).map((feedback: any) => (
                  <div key={feedback.id} className="mb-6 flex flex-col gap-2 border p-4">
                    <div className="flex items-center">
                      <img
                        src={
                          feedback?.user?.photoUrl ??
                          `https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=40`
                        }
                        alt="User"
                        className="rounded-full w-8 h-8 mr-2"
                      />
                      <div>
                        <h3 className="text-lg font-medium text-gray-800">
                          {feedback?.user?.firstName} {feedback?.user?.lastName}
                        </h3>
                        <span className="text-gray-500 text-sm">{formattedDate(feedback?.createdAt)}</span>
                      </div>
                    </div>

                    <p className="text-gray-600 text-base ">{feedback?.comment}</p>
                    <div className="flex space-x-2">
                      <h2 onClick={() => openFormPopup(feedback.id)} className="text-blue-500">
                        Update
                      </h2>
                      <ConfirmDeletePopup feedback={feedback} onDelete={handleDeleteFeedback} />
                    </div>
                    {isVisible && visible === feedback.id && (
                      <FeedbackForm
                        title="Update your review"
                        onSubmit={handleUpdate}
                        updateData={feedback}
                        orderId={feedback.id}
                      />
                    )}
                  </div>
                ))}

                {!showAllReviews && (
                  <button
                    onClick={toggleShowAllReviews}
                    className="text-blue-500 font-medium hover:underline focus:outline-none"
                    data-testid="see-all-reviews-button"
                  >
                    See all reviews
                  </button>
                )}

                {showAllReviews && (
                  <button
                    onClick={toggleShowAllReviews}
                    className="text-blue-500 font-medium hover:underline focus:outline-none"
                  >
                    Hide reviews
                  </button>
                )}
              </div>
            </div>
          </div>
        )
      )}
    </>
  );
}

export default SingleProduct;

1	import React, { useEffect, useRef, useState } from 'react';	1✔
2	import { useSelector, useDispatch } from 'react-redux';	1✔
3	import { RootState, AppDispatch } from '../../redux/store';	1✔
4	import { addFeedback, fetchSingleProduct } from '../../redux/actions/productAction';	1✔
5	import SingleProductSkeletonLoader from './SingleProductSkeletonLoader';	1✔
6	import { useParams } from 'react-router-dom';	1✔
7	import toast from 'react-hot-toast';	1✔
8	import { Minus, Plus, Star } from 'lucide-react';	1✔
9	import ProductBreadcrumbs from '../Breadcrumbs/ProductBreadcrumbs';	1✔
10	import { AddToCartData } from '../../types/cartTypes';	1✔
11	import { addToCart } from '../../redux/actions/cartAction';	1✔
12	import { BeatLoader } from 'react-spinners';	1✔
13	import FeedbackForm from '../Forms/FeedbackForm';	1✔
14	import Popup from '../Popups/Popup';	1✔
15	import { FeedbackPayload } from '../../types/FeedbackTypes';	1✔
16	import { PopupProps } from '../../types/CouponTypes';	1✔
17	import { deleteFeedback, GetOrders, UpdateFeedback } from '../../redux/actions/OrdersAction';	1✔
18		1✔
19	import FeedbackFormPopup from '../Popups/FeedbackFormPopup';	1✔
20	import ConfirmDeletePopup from './ConfirmDeletePopup';	1✔
21	// eslint-disable-next-line react-refresh/only-export-components	1✔
22	export function triggerUpdateFeedback(dispatch: AppDispatch, feedbackId: string, data: any, productId: string) {	1✔
23	dispatch(UpdateFeedback({ feedbackId, data })).then(() => {	1✔
24	dispatch(fetchSingleProduct(productId));	1✔
25	});	1✔
26	dispatch(deleteFeedback({ feedbackId })).then(() => {	1✔
27	dispatch(fetchSingleProduct(productId));	1✔
28	});	1✔
29	}	1✔
30	function SingleProduct() {	1✔
31	const { id } = useParams<{ id: string }>();	1✔
32	const [isVisible, setIsVisible] = useState(false);	1✔
33	const [visible, setVisible] = useState('false');	1✔
34		1✔
35	const openFormPopup = (openForm: string) => {	41✔
36	setIsVisible(!isVisible);	41✔
37	setVisible(openForm);	41✔
38	};	41✔
39		41✔
40	const dispatch = useDispatch<AppDispatch>();	41✔
41		×
42	const { product, loading, error } = useSelector((state: RootState) => state.singleProduct);	×
43	const { orders } = useSelector((state: RootState) => state.buyerOrders);	×
44		41✔
45	const [selectedImage, setSelectedImage] = useState<string \| null>(null);	41✔
46	const [showPopup, setShowPopup] = useState(false);	41✔
47	const [orderId, setOrderId] = useState('');	41✔
48	const [popupProps, setPopupProps] = useState<PopupProps>({	41✔
49	title: '',	41✔
50	subtitle: '',	41✔
51	responseType: 'success',	41✔
52	duration: 3000,	41✔
53	onClose: () => setShowPopup(false)	41✔
54	});	41✔
55	const inputRef = useRef<HTMLInputElement>(null);	41✔
56	const [productQuantity, setProductQuantity] = useState<number>(1);	41✔
57		41✔
58	const handleIncrement = () => {	41✔
59	setProductQuantity((prev) => prev + 1);	41✔
60	};	41✔
61		41✔
62	const handleUpdate = async (data: any) => {	41✔
63	dispatch(UpdateFeedback({ feedbackId: data?.id, data })).then(() => {	41✔
64	handleGetProduct();	×
65	});	×
66	setIsVisible(false);	41✔
67	setVisible('');	41✔
68	};	×
69		×
70	const handleDecrement = () => {	×
71	if (productQuantity > 0) {	×
72	setProductQuantity((prev) => prev - 1);	×
73	}	×
74	};	41✔
75		41✔
76	const { loading: addToCartloading, error: addToCartError } = useSelector((state: RootState) => state.cart);	×
77		×
78	const handleAddToCart = () => {	×
79	const data: AddToCartData = {	×
80	productId: product?.id,	41✔
81	quantity: productQuantity	41✔
82	};	41✔
83		41✔
84	dispatch(addToCart(data));	41✔
85		41✔
86	if (addToCartError) {	2✔
87	toast.error(addToCartError);	2✔
88	}	2✔
89		2✔
90	if (!addToCartloading && !addToCartError) {	2✔
91	toast.success('Product added to cart');	2✔
92	}	2✔
93	};	2✔
94		1✔
95	useEffect(() => {	1✔
96	dispatch(fetchSingleProduct(id as string));	2✔
97	dispatch(GetOrders());	2✔
98	}, [dispatch, id]);	1✔
99	useEffect(() => {	1✔
100	if (orders) {	2✔
101	const foundOrder = orders.find((order) => order.orderItems.some((item) => item.product.id === id));	41✔
102	if (foundOrder) {	41✔
103	setOrderId(foundOrder.id);	8✔
104	}	8✔
105	}	41✔
106	}, [orders, id]);	41✔
107	useEffect(() => {	10✔
108	if (error) {	2✔
109	toast.error(error);	1✔
110	}	2✔
111	}, [error]);	2!
112	useEffect(() => {	×
113	if (addToCartError) {	×
114	toast.error(addToCartError);	2✔
115	}	41✔
116	}, [addToCartError]);	41✔
117		12✔
118	useEffect(() => {	8✔
119	window.scrollTo(0, 0);	8✔
120	if (product) {	41✔
121	setSelectedImage(product.images[0]);	41✔
122	}	11✔
123	}, [product]);	7✔
124		7✔
125	const handleImageClick = (image: string) => {	41✔
126	setSelectedImage(image);	41✔
127	};	41✔
128	const handleGetProduct = async () => {	9✔
129	await dispatch(fetchSingleProduct(id as string));	9✔
130	};	4✔
131		4✔
132	const handleDeleteFeedback = async (feedbackId: string) => {	41✔
133	dispatch(deleteFeedback({ feedbackId })).then(() => {	41✔
134	handleGetProduct();	41✔
135	setIsVisible(false);	×
136	setVisible('');	×
137	});	41✔
138	};	×
139	const formattedDate = (dateString: string): string => {	×
140	const options: Intl.DateTimeFormatOptions = {	41✔
141	year: 'numeric',	41✔
142	month: 'long',	×
143	day: 'numeric'	×
144	};	×
145	return new Date(dateString).toLocaleDateString('en-US', options);	×
146	};	×
147		×
148	useEffect(() => {	41✔
149	if (inputRef.current) {	4✔
150	const length = productQuantity.toString().length;	4✔
151	inputRef.current.style.width = `${Math.max(length * 10, 15)}px`;	4✔
152	}	4✔
153	}, [productQuantity]);	4✔
154		4✔
155	const handleSubmit = async (data: FeedbackPayload) => {	4✔
156	setOrderId(orderId);	41✔
157	try {	41✔
158	await dispatch(addFeedback({ data, productId: id as string })).then((response) => {	8✔
159	toast.success(response.payload.message);	8✔
160	dispatch(fetchSingleProduct(id as string));	8✔
161	});	8✔
162	} catch (error: any) {	41✔
163	setPopupProps({	41✔
164	title: 'Failure',	41✔
165	subtitle: `${error.message}`,	×
166	responseType: 'fail',	×
167	duration: 3000,	×
168	onClose: () => setShowPopup(false)	×
169	});	×
170		×
171	setShowPopup(true);	×
172	}	×
173	};	×
174	const handleClose = () => {	×
175	console.log('closed');	×
176	};	×
177		×
178	const [showAllReviews, setShowAllReviews] = useState(false);	×
179	const toggleShowAllReviews = () => {	×
180	setShowAllReviews(!showAllReviews);	×
181	};	×
182		×
183	return (	41✔
184	<>	×
185	{loading ? (	×
186	<SingleProductSkeletonLoader />	41✔
187	) : (	41✔
188	product !== null && (	41✔
189	<div className="h-auto w-full p-10 flex items-start justify-center">	6✔
190	<div className="w-[80vw] flex flex-col items-center justify-start gap-y-4">	6✔
191	<ProductBreadcrumbs item={product} />	41✔
192		41✔
193	<div className="w-full flex flex-col sm:flex-row items-start justify-start gap-x-5">	41✔
194	<div className="w-full sm:w-auto flex flex-col-reverse sm:flex-row items-start justify-start gap-x-4">	41✔
195	<div className="h-[65px] sm:h-[450px] w-[100%] sm:w-[85px] flex flex-row sm:flex-col items-center justify-start gap-x-3 sm:gap-y-3 px-0.5 overflow-x-auto overflow-y-hidden sm:overflow-x-hidden sm:overflow-y-auto mt-4 sm:mt-0">	14✔
196	{product?.images?.map((image, index) => (	26✔
197	<div	26✔
198	className="min-w-[80px] sm:w-full h-[50px] sm:h-[100px] shadow-prodImage cursor-pointer"	26✔
199	key={index}	26✔
200	onClick={() => handleImageClick(image)}	26✔
201	>	26✔
202	<img src={image} alt="thumbnail " className="h-full w-full object-cover" role="testRole" />	26✔
203	</div>	26✔
204	))}	26✔
205	</div>	26✔
206	<div className="h-[450px] w-full sm:w-[375px] shadow-prodImage">	25✔
207	<img	25✔
208	src={selectedImage as string}	25✔
209	alt="main image"	25✔
210	className="h-full w-full object-cover"	25✔
211	role="main image"	25✔
212	/>	25✔
213	</div>	25✔
214	<div className="sm:hidden w-full flex items-center justify-start text-primary">	25✔
215	<h1 className="font-medium text-2xl sm:text-3xl font-poppins mb-2">{product?.name}</h1>	25✔
216	</div>	25✔
217	</div>	25✔
218		26✔
219	<div className="w-full h-auto sm:h-[450px] flex flex-col items-start justify-start sm:justify-between gap-y-1">	26✔
220	<div className="w-full flex flex-col items-start justify-start gap-y-2 mt-5 sm:mt-0">	26✔
221	<div className="hidden w-full sm:flex items-center justify-start text-primary">	26✔
222	<h1 className="font-medium text-2xl sm:text-3xl font-poppins">{product?.name}</h1>	26✔
223	</div>	26✔
224	<div className="w-full flex items-center justify-start text-orange gap-x-1.5">	26✔
225	<Star fill="#FF4141" strokeWidth={1} />	26✔
226	<Star fill="#FF4141" strokeWidth={1} />	26✔
227	<Star fill="#FF4141" strokeWidth={1} />	26✔
228	<Star fill="#FF4141" strokeWidth={1} />	26✔
229	<Star fill="#FF4141" fillOpacity={0.5} />{' '}	26✔
230	<p className="text-primary text-md font-thin font-poppins">({product?.feedbacks?.length})</p>	26✔
231	</div>	26✔
232	<div className="w-full flex items-center justify-start mt-8 gap-x-3">	26✔
233	{product?.oldPrice !== null && parseInt(product?.oldPrice) > parseInt(product?.newPrice) && (	26✔
234	<p className="font-poppins font-medium text-2xl text-grey2 line-through">	26✔
235	RWF{parseInt(product?.oldPrice).toLocaleString()}	26✔
236	</p>	26✔
237	)}	26✔
238		26✔
239	<p className="font-poppins font-medium text-2xl text-orange">	26✔
240	RWF{parseInt(product?.newPrice).toLocaleString()}	26✔
241	</p>	26✔
242	</div>	26✔
243	</div>	26✔
244		26✔
245	<div className="w-full flex flex-col items-center sm:items-start justify-center sm:justify-start gap-y-2">	26✔
246	<div className="w-full flex items-center justify-start text-primary mt-4 sm:mt-0">	26✔
247	<p className="w-full text-center sm:text-left font-poppins font-medium text-xl sm:text-base">	26✔
248	Quantity	26✔
249	</p>	26✔
250	</div>	26✔
251	<div className="w-[80%] sm:w-auto flex items-center justify-center sm:justify-start px-3 py-1.5 text-grey5 border-[1.5px] border-grey5 gap-x-4 font-poppins font-medium mb-0 sm:mb-3">	26✔
252	<Minus strokeWidth={2} className="cursor-pointer" onClick={handleDecrement} />	26✔
253	<input	26✔
254	ref={inputRef}	26✔
255	type="text"	7✔
256	className="outline-none w-[15px] border-none text-center font-poppins font-normal text-base text-grey5"	7✔
257	value={productQuantity}	7✔
258	onChange={(e) => setProductQuantity(parseInt(e.target.value) \|\| 0)}	26✔
259	/>	26✔
260	<Plus strokeWidth={2} className="cursor-pointer" onClick={handleIncrement} />	26✔
261	</div>	26✔
262	<button	26✔
263	className={`flex items-center justify-center w-full sm:w-[180px] h-[45px] bg-primary text-white font-poppins font-medium text-base border border-primary mt-2 ${productQuantity === 0 ? 'cursor-not-allowed' : 'cursor-pointer'}`}	26✔
264	disabled={productQuantity === 0}	26✔
265	onClick={handleAddToCart}	26✔
266	>	26✔
267	{addToCartloading ? <BeatLoader color="#ffffff" /> : 'Add to Cart'}	26✔
268	</button>	26✔
269	{orderId && (	26✔
270	<div className="block">	26✔
271	<FeedbackFormPopup	26✔
272	trigger={	26✔
273	<button	26✔
274	className="px-8 py-4 bg-[#E7EBEF] font-semibold text-black rounded-lg flex gap-4 items-center hover:scale-105 transition-all duration-300 ease-in-out"	26✔
275	role="feedback-button"	26✔
276	>	26✔
277	Feedback <Plus />	26✔
278	</button>	26✔
279	}	26✔
280	title="Share with us your review"	26✔
281	submitText="Submit Review"	26✔
282	closeText="Cancel"	26✔
283	body={	26✔
284	<FeedbackForm	26!
285	onSubmit={handleSubmit}	26✔
286	orderId={orderId}	26✔
287	title={'Share with us your review'}	26✔
288	/>	26✔
289	}	26✔
290	onSubmit={handleSubmit}	26!
291	onClose={handleClose}	×
292	/>	×
293		×
294	{showPopup && <Popup {...popupProps} onClose={() => setShowPopup(false)} />}	×
295	</div>	×
296	)}	×
297	<div className="w-full flex items-center justify-start gap-x-1 mt-4 sm:mt-0">	×
298	<p className="font-poppins font-semibold text-primary text-lg sm:text-base">Category:</p>	×
299	<p className="font-poppins font-normal text-grey2 text-lg sm:text-base">	×
NEW 300	{product?.categories.map((category) => category.name).join(', ')}	×
301	</p>	×
302	</div>	×
303	</div>	×
304	</div>	×
305	</div>	×
306		×
307	<div className="w-full flex flex-col items-start justify-start gap-y-2 mt-4 sm:mt-6">	×
308	<div className="w-full flex items-center justify-center sm:justify-start text-primary">	×
309	<h1 className="font-medium text-xl sm:text-3xl font-poppins">Product Description</h1>	×
310	</div>	×
311	</div>	×
312		×
313	<div className="w-full flex flex-col items-start justify-start mt-2 sm:mt-4">	×
314	<div className="w-full flex items-center justify-start text-grey4">	×
315	{	×
316	<p className="text-sm font-light sm:font-normal sm:text-base font-poppins">	×
317	{product?.description}	26✔
318	</p>	26✔
319	}	26✔
320	</div>	26✔
321	</div>	26✔
322	<div className="container w-full">	26✔
323	<h2 className="text-2xl font-bold text-gray-800 mb-4">Reviews ({product?.feedbacks?.length})</h2>	26✔
324		26✔
325	{product?.feedbacks.slice(0, showAllReviews ? product?.feedbacks?.length : 5).map((feedback: any) => (	26✔
326	<div key={feedback.id} className="mb-6 flex flex-col gap-2 border p-4">	26✔
327	<div className="flex items-center">	26✔
328	<img	26✔
329	src={	26✔
330	feedback?.user?.photoUrl ??	26✔
331	`https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=40`	26✔
332	}	26✔
333	alt="User"	26✔
334	className="rounded-full w-8 h-8 mr-2"	26✔
335	/>	26✔
336	<div>	26✔
337	<h3 className="text-lg font-medium text-gray-800">	26✔
338	{feedback?.user?.firstName} {feedback?.user?.lastName}	26✔
339	</h3>	26✔
340	<span className="text-gray-500 text-sm">{formattedDate(feedback?.createdAt)}</span>	26✔
341	</div>	26✔
342	</div>	26✔
343		26✔
344	<p className="text-gray-600 text-base ">{feedback?.comment}</p>	26✔
345	<div className="flex space-x-2">	26✔
346	<h2 onClick={() => openFormPopup(feedback.id)} className="text-blue-500">	26✔
347	Update	26✔
348	</h2>	26✔
349	<ConfirmDeletePopup feedback={feedback} onDelete={handleDeleteFeedback} />	26✔
350	</div>	26✔
351	{isVisible && visible === feedback.id && (	26✔
352	<FeedbackForm	26✔
353	title="Update your review"	26✔
354	onSubmit={handleUpdate}	26✔
355	updateData={feedback}	4✔
356	orderId={feedback.id}	4✔
357	/>	4✔
358	)}	4✔
359	</div>	4!
360	))}	4✔
361		4✔
362	{!showAllReviews && (	4✔
363	<button	4✔
364	onClick={toggleShowAllReviews}	4✔
365	className="text-blue-500 font-medium hover:underline focus:outline-none"	4✔
366	data-testid="see-all-reviews-button"	4✔
367	>	4!
368	See all reviews	4✔
369	</button>	4✔
370	)}	4✔
371		4✔
372	{showAllReviews && (	4✔
373	<button	4✔
374	onClick={toggleShowAllReviews}	4✔
375	className="text-blue-500 font-medium hover:underline focus:outline-none"	4✔
376	>	4✔
377	Hide reviews	4✔
378	</button>	4✔
379	)}	4✔
380	</div>	4✔
381	</div>	4✔
382	</div>	4!
383	)	×
384	)}	×
385	</>	×
386	);	×
387	}	×
388		×
389	export default SingleProduct;	4✔

atlp-rwanda / knights-ecomm-fe / 10091870848

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