9909651380

Committed 12 Jul 2024 02:37PM UTC coverage: 88.093% (-0.5%) from 88.568%

Build # 9909651380

Build Type

Pull #57

github

Committed by

elijahladdie

Commit Message

# This is a combination of 2 commits.
# This is the 1st commit message:

ft: user should be able to provide a review after order is complete

ft: user should be able to provide a review after order is complete

# This is the commit message #2:

ft: user should be able to provide a review after order is complete

ft: user should be able to provide a review after order is complete

Pull Request Pull Request #57: ft: user should be able to provide a review after order is complete

Run Details

627 of 831 branches covered (75.45%)

Branch coverage included in aggregate %.

405 of 519 new or added lines in 9 files covered. (78.03%)

42 existing lines in 4 files now uncovered.

7001 of 7828 relevant lines covered (89.44%)

9.15 hits per line

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

82.56

/src/components/Popups/FeedbackFormPopup.tsx

import React, { useState } from 'react';
import { FeedbackPayload, FeedbackFormPopupProps } from '../../types/FeedbackTypes';

const FeedbackFormPopup: React.FC<FeedbackFormPopupProps> = ({
  trigger,
  title,
  body,
  onSubmit,
  onClose,
  submitText,
  closeText
}) => {
  const [isVisible, setIsVisible] = useState(false);

  const openFormPopup = () => {
    setIsVisible(true);
  };

  const closeFormPopup = () => {
    setIsVisible(false);
    if (onClose) onClose(); // Call onClose to handle any cleanup or state changes outside the component
  };

  const submitHandler = (data: FeedbackPayload) => {
    if (onSubmit) onSubmit(data);
    closeFormPopup();
  };
  return (
    <div className="relative text-black">
      {/* Trigger element to open the popup */}
      <span onClick={openFormPopup}>{trigger}</span>

      {/* Popup content */}
      <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'
        }`}
        onClick={() => {
          // Close the popup when clicking outside
          if (!isVisible) return; // Prevent unnecessary state updates
          closeFormPopup();
        }}
        data-testid="dialog"
      >
        <div
          className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-500 ease-in-out ${
            isVisible ? 'scale-100' : 'scale-0'
          }`}
          onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside the FormPopup
        >
          <h2 className="text-2xl mb-4 text-start">{title}</h2>
          <div className="mb-4">{React.cloneElement(body as React.ReactElement<any>, { onSubmit: submitHandler })}</div>
          <div className="flex justify-between space-x-4 gap-3">
            {/* Close button */}
            <button
              onClick={closeFormPopup}
              className="w-1/2 px-4 py-2 border border-primary text-primary rounded hover:bg-opacity-40 transition duration-300"
            >
              {closeText}
            </button>
            {/* Submit button */}
            <button
              onClick={() => {
                const form = document.querySelector(`#${title.split(' ').join('')}-form`); // Assuming each form has a unique ID based on the title
                if (form) {
                  form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
                }
              }}
              className="w-1/2 px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90 transition duration-300"
            >
              {submitText}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FeedbackFormPopup;

1	import React, { useState } from 'react';	1✔
2	import { FeedbackPayload, FeedbackFormPopupProps } from '../../types/FeedbackTypes';	1✔
3		1✔
4	const FeedbackFormPopup: React.FC<FeedbackFormPopupProps> = ({	1✔
5	trigger,	5✔
6	title,	5✔
7	body,	5✔
8	onSubmit,	5✔
9	onClose,	5✔
10	submitText,	5✔
11	closeText	5✔
12	}) => {	5✔
13	const [isVisible, setIsVisible] = useState(false);	5✔
14		5✔
15	const openFormPopup = () => {	5✔
16	setIsVisible(true);	1✔
17	};	1✔
18		5✔
19	const closeFormPopup = () => {	5✔
NEW 20	setIsVisible(false);	×
NEW 21	if (onClose) onClose(); // Call onClose to handle any cleanup or state changes outside the component	×
NEW 22	};	×
23		5✔
24	const submitHandler = (data: FeedbackPayload) => {	5✔
NEW 25	if (onSubmit) onSubmit(data);	×
NEW 26	closeFormPopup();	×
NEW 27	};	×
28	return (	5✔
29	<div className="relative text-black">	5✔
30	{/* Trigger element to open the popup */}	5✔
31	<span onClick={openFormPopup}>{trigger}</span>	5✔
32		5✔
33	{/* Popup content */}	5✔
34	<div	5✔
35	className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ease-out ${	5✔
36	isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'	5✔
37	}`}	5✔
38	onClick={() => {	5✔
NEW 39	// Close the popup when clicking outside	×
NEW 40	if (!isVisible) return; // Prevent unnecessary state updates	×
NEW 41	closeFormPopup();	×
NEW 42	}}	×
43	data-testid="dialog"	5✔
44	>	5✔
45	<div	5✔
46	className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-500 ease-in-out ${	5✔
47	isVisible ? 'scale-100' : 'scale-0'	5✔
48	}`}	5✔
49	onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside the FormPopup	5✔
50	>	5✔
51	<h2 className="text-2xl mb-4 text-start">{title}</h2>	5✔
52	<div className="mb-4">{React.cloneElement(body as React.ReactElement<any>, { onSubmit: submitHandler })}</div>	5✔
53	<div className="flex justify-between space-x-4 gap-3">	5✔
54	{/* Close button */}	5✔
55	<button	5✔
56	onClick={closeFormPopup}	5✔
57	className="w-1/2 px-4 py-2 border border-primary text-primary rounded hover:bg-opacity-40 transition duration-300"	5✔
58	>	5✔
59	{closeText}	5✔
60	</button>	5✔
61	{/* Submit button */}	5✔
62	<button	5✔
63	onClick={() => {	5✔
64	const form = document.querySelector(`#${title.split(' ').join('')}-form`); // Assuming each form has a unique ID based on the title	5✔
65	if (form) {	5✔
NEW 66	form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));	×
NEW 67	}	×
NEW 68	}}	×
NEW 69	className="w-1/2 px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90 transition duration-300"	×
NEW 70	>	×
71	{submitText}	5✔
72	</button>	5✔
73	</div>	5✔
74	</div>	5✔
75	</div>	5✔
76	</div>	5✔
77	);	5✔
78	};	5✔
79		5✔
80	export default FeedbackFormPopup;	5✔

atlp-rwanda / knights-ecomm-fe / 9909651380

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