10112884288

Committed 26 Jul 2024 02:25PM UTC coverage: 90.787% (-0.4%) from 91.198%

Build # 10112884288

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #87 from atlp-rwanda/fix-feedback

fix: resolve feedback issue

Run Details

1149 of 1416 branches covered (81.14%)

Branch coverage included in aggregate %.

26 of 31 new or added lines in 5 files covered. (83.87%)

60 existing lines in 4 files now uncovered.

11848 of 12900 relevant lines covered (91.84%)

12.24 hits per line

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

70.06

/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 { userToken } = useSelector((state: RootState) => state.auth);

  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) {
      setTimeout(() => {
        toast.success('Product added to cart');
      }, 5000);
    }
  };

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

atlp-rwanda / knights-ecomm-fe / 10112884288

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