9938019830

Committed 15 Jul 2024 10:45AM UTC coverage: 90.119% (+0.6%) from 89.557%

Build # 9938019830

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #57 from atlp-rwanda/ft-product-review

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

Run Details

780 of 1002 branches covered (77.84%)

Branch coverage included in aggregate %.

560 of 629 new or added lines in 10 files covered. (89.03%)

39 existing lines in 2 files now uncovered.

8404 of 9189 relevant lines covered (91.46%)

9.75 hits per line

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

92.8

/src/components/Forms/FeedbackForm.tsx

import React, { useState, ChangeEvent, FormEvent } from 'react';
import { FeedbackFormProps, FeedbackPayload } from '../../types/FeedbackTypes';

interface FormErrors {
  comment: string;
}

const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSubmit, orderId, updateData, title }) => {
  const [formData, setFormData] = useState<FeedbackPayload>({
    comment: updateData?.comment || '',
    orderId
  });
  const [errors, setErrors] = useState<FormErrors>({
    comment: ''
  });

  const validateForm = (): boolean => {
    const newErrors: FormErrors = {
      comment: ''
    };
    let isValid = true;

    if (!formData.comment) {
      newErrors.comment = 'Comment or Review is required';
      isValid = false;
    }
    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (event: FormEvent): void => {
    event.preventDefault();
    if (validateForm()) {
      const data: FeedbackPayload = {
        ...formData,
        id: updateData?.id || orderId
      };

      if (updateData) {
        const data: any = {
          ...formData,
          id: updateData.id
        };

        if (onSubmit) onSubmit(data);
      }
      if (onSubmit) onSubmit(data);
      if (!updateData) {
        clearForm();
      }
    }
  };

  const clearForm = (): void => {
    setFormData({
      comment: '',
      orderId
    });
    setErrors({
      comment: ''
    });
  };

  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form id={`${title?.split(' ').join('')}-form`} onSubmit={handleSubmit} className="w-[542px]" data-testid="form">
      <div className="flex gap-2 flex-col items-start">
        <textarea
          id="review"
          name="comment"
          value={formData.comment}
          onChange={handleInputChange}
          className={`text-sm outline-none w-full p-2 min-h-20 border ${
            errors.comment ? 'border-red-500' : 'border-gray-300'
          } rounded bg-transparent`}
        />
        <input
          type="text"
          id="different"
          name="different"
          value={orderId}
          hidden
          readOnly={true}
          className={`text-sm outline-none w-full p-2 h-9 border ${
            errors.comment ? 'border-red-500' : 'border-gray-300'
          } rounded bg-transparent`}
        />
        {errors.comment && <span className="text-red-500 text-xs">{errors.comment}</span>}
      </div>
      {title.toLocaleLowerCase().includes('update') && (
        <button
          type="submit"
          className="w-fit  my-2   px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90 transition duration-300"
        >
          Update
        </button>
      )}
    </form>
  );
};

export default FeedbackForm;

1	import React, { useState, ChangeEvent, FormEvent } from 'react';	1✔
2	import { FeedbackFormProps, FeedbackPayload } from '../../types/FeedbackTypes';	1✔
3		1✔
4	interface FormErrors {	1✔
5	comment: string;	1✔
6	}	1✔
7		1✔
8	const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSubmit, orderId, updateData, title }) => {	1✔
9	const [formData, setFormData] = useState<FeedbackPayload>({	16✔
10	comment: updateData?.comment \|\| '',	16✔
11	orderId	16✔
12	});	16✔
13	const [errors, setErrors] = useState<FormErrors>({	16✔
14	comment: ''	16✔
15	});	16✔
16		16✔
17	const validateForm = (): boolean => {	16✔
18	const newErrors: FormErrors = {	3✔
19	comment: ''	3✔
20	};	3✔
21	let isValid = true;	3✔
22		3✔
23	if (!formData.comment) {	3✔
24	newErrors.comment = 'Comment or Review is required';	1✔
25	isValid = false;	1✔
26	}	1✔
27	setErrors(newErrors);	3✔
28	return isValid;	3✔
29	};	3✔
30		16✔
31	const handleSubmit = (event: FormEvent): void => {	16✔
32	event.preventDefault();	3✔
33	if (validateForm()) {	3✔
34	const data: FeedbackPayload = {	2✔
35	...formData,	2✔
36	id: updateData?.id \|\| orderId	2!
37	};	2✔
38		2✔
39	if (updateData) {	2!
NEW 40	const data: any = {	×
NEW 41	...formData,	×
NEW 42	id: updateData.id	×
NEW 43	};	×
NEW 44		×
NEW 45	if (onSubmit) onSubmit(data);	×
NEW 46	}	×
47	if (onSubmit) onSubmit(data);	2✔
48	if (!updateData) {	2✔
49	clearForm();	2✔
50	}	2✔
51	}	2✔
52	};	3✔
53		16✔
54	const clearForm = (): void => {	16✔
55	setFormData({	2✔
56	comment: '',	2✔
57	orderId	2✔
58	});	2✔
59	setErrors({	2✔
60	comment: ''	2✔
61	});	2✔
62	};	2✔
63		16✔
64	const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {	16✔
65	const { name, value } = e.target;	2✔
66	setFormData({ ...formData, [name]: value });	2✔
67	};	2✔
68		16✔
69	return (	16✔
70	<form id={`${title?.split(' ').join('')}-form`} onSubmit={handleSubmit} className="w-[542px]" data-testid="form">	16✔
71	<div className="flex gap-2 flex-col items-start">	16✔
72	<textarea	16✔
73	id="review"	16✔
74	name="comment"	16✔
75	value={formData.comment}	16✔
76	onChange={handleInputChange}	16✔
77	className={`text-sm outline-none w-full p-2 min-h-20 border ${	16✔
78	errors.comment ? 'border-red-500' : 'border-gray-300'	16✔
79	} rounded bg-transparent`}	16✔
80	/>	16✔
81	<input	16✔
82	type="text"	16✔
83	id="different"	16✔
84	name="different"	16✔
85	value={orderId}	16✔
86	hidden	16✔
87	readOnly={true}	16✔
88	className={`text-sm outline-none w-full p-2 h-9 border ${	16✔
89	errors.comment ? 'border-red-500' : 'border-gray-300'	16✔
90	} rounded bg-transparent`}	16✔
91	/>	16✔
92	{errors.comment && <span className="text-red-500 text-xs">{errors.comment}</span>}	16✔
93	</div>	16✔
94	{title.toLocaleLowerCase().includes('update') && (	16✔
95	<button	16✔
96	type="submit"	16✔
97	className="w-fit my-2 px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90 transition duration-300"	16✔
98	>	16✔
99	Update	16✔
100	</button>	1✔
101	)}	1✔
102	</form>	1✔
103	);	1✔
104	};	1✔
105		1✔
106	export default FeedbackForm;	16✔

atlp-rwanda / knights-ecomm-fe / 9938019830

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