9727408172

Committed 29 Jun 2024 10:32PM UTC coverage: 87.569% (-0.02%) from 87.591%

Build # 9727408172

Build Type

Pull #38

github

Committed by

elijahladdie

Commit Message

vendor coupon managment

Pull Request Pull Request #38: vendor coupon management

Run Details

364 of 523 branches covered (69.6%)

Branch coverage included in aggregate %.

1026 of 1202 new or added lines in 16 files covered. (85.36%)

14 existing lines in 3 files now uncovered.

4567 of 5108 relevant lines covered (89.41%)

8.85 hits per line

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

86.02

/src/components/Popups/Popup.tsx

import React, { useEffect, useState, useRef } from 'react';
import successImg from '../../assets/done-svgrepo-com.svg';
import errorImg from '../../assets/status-failed-svgrepo-com.svg';
import { PopupProps } from '../../types/CouponTypes';

const Popup: React.FC<PopupProps> = ({ title, subtitle, responseType, duration, onClose }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [imagesLoaded, setImagesLoaded] = useState(false);
  const popupRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const successImage = new Image();
    const errorImage = new Image();

    successImage.src = successImg;
    errorImage.src = errorImg;

    const handleImageLoad = () => {
      setImagesLoaded(true);
    };

    successImage.onload = handleImageLoad;
    errorImage.onload = handleImageLoad;

    return () => {
      successImage.onload = null;
      errorImage.onload = null;
    };
  }, []);

  useEffect(() => {
    if (imagesLoaded) {
      setIsVisible(true);
      const timer = setTimeout(() => {
        setIsVisible(false);
        onClose();
      }, duration);

      return () => clearTimeout(timer);
    }
  }, [imagesLoaded, duration, onClose]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
        setIsVisible(false);
        onClose();
      }
    };

    document.addEventListener('mouseup', handleClickOutside);
    return () => {
      document.removeEventListener('mouseup', handleClickOutside);
    };
  }, [onClose]);

  return (
    <div
      className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ease-out ${
        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
      }`}
    >
      <div
        ref={popupRef}
        className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-500 ease-in-out w-[542px] h-[351px] flex items-center justify-center flex-col ${
          isVisible ? 'scale-100' : 'scale-0'
        }`}
      >
        <img
          src={responseType === 'success' ? successImg : errorImg}
          alt={responseType === 'success' ? 'Success' : 'Failure'}
          className="w-34 h-34 inline-block mr-2"
        />
        <h2 className="text-2xl font-bold mb-2 text-center text-primary">{title}</h2>
        <h3 className="text-lg mb-4 text-center text-secondary">{subtitle}</h3>
      </div>
    </div>
  );
};

export default Popup;

1	import React, { useEffect, useState, useRef } from 'react';	1✔
2	import successImg from '../../assets/done-svgrepo-com.svg';	1✔
3	import errorImg from '../../assets/status-failed-svgrepo-com.svg';	1✔
4	import { PopupProps } from '../../types/CouponTypes';	1✔
5		1✔
6	const Popup: React.FC<PopupProps> = ({ title, subtitle, responseType, duration, onClose }) => {	1✔
7	const [isVisible, setIsVisible] = useState(false);	7✔
8	const [imagesLoaded, setImagesLoaded] = useState(false);	7✔
9	const popupRef = useRef<HTMLDivElement>(null);	7✔
10		7✔
11	useEffect(() => {	7✔
12	const successImage = new Image();	6✔
13	const errorImage = new Image();	6✔
14		6✔
15	successImage.src = successImg;	6✔
16	errorImage.src = errorImg;	6✔
17		6✔
18	const handleImageLoad = () => {	6✔
NEW 19	setImagesLoaded(true);	×
NEW 20	};	×
21		6✔
22	successImage.onload = handleImageLoad;	6✔
23	errorImage.onload = handleImageLoad;	6✔
24		6✔
25	return () => {	6✔
26	successImage.onload = null;	6✔
27	errorImage.onload = null;	6✔
28	};	6✔
29	}, []);	7✔
30		7✔
31	useEffect(() => {	7✔
32	if (imagesLoaded) {	6!
NEW 33	setIsVisible(true);	×
NEW 34	const timer = setTimeout(() => {	×
NEW 35	setIsVisible(false);	×
NEW 36	onClose();	×
NEW 37	}, duration);	×
NEW 38		×
NEW 39	return () => clearTimeout(timer);	×
NEW 40	}	×
41	}, [imagesLoaded, duration, onClose]);	7✔
42		7✔
43	useEffect(() => {	7✔
44	const handleClickOutside = (event: MouseEvent) => {	6✔
45	if (popupRef.current && !popupRef.current.contains(event.target as Node)) {	2✔
46	setIsVisible(false);	2✔
47	onClose();	2✔
48	}	2✔
49	};	2✔
50		6✔
51	document.addEventListener('mouseup', handleClickOutside);	6✔
52	return () => {	6✔
53	document.removeEventListener('mouseup', handleClickOutside);	6✔
54	};	6✔
55	}, [onClose]);	7✔
56		7✔
57	return (	7✔
58	<div	7✔
59	className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ease-out ${	7✔
60	isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'	7!
61	}`}	7✔
62	>	7✔
63	<div	7✔
64	ref={popupRef}	7✔
65	className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-500 ease-in-out w-[542px] h-[351px] flex items-center justify-center flex-col ${	7✔
66	isVisible ? 'scale-100' : 'scale-0'	7!
67	}`}	7✔
68	>	7✔
69	<img	7✔
70	src={responseType === 'success' ? successImg : errorImg}	7✔
71	alt={responseType === 'success' ? 'Success' : 'Failure'}	7✔
72	className="w-34 h-34 inline-block mr-2"	7✔
73	/>	7✔
74	<h2 className="text-2xl font-bold mb-2 text-center text-primary">{title}</h2>	7✔
75	<h3 className="text-lg mb-4 text-center text-secondary">{subtitle}</h3>	7✔
76	</div>	7✔
77	</div>	7✔
78	);	7✔
79	};	7✔
80		1✔
81	export default Popup;	1✔

atlp-rwanda / knights-ecomm-fe / 9727408172

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