9714456101

Committed 28 Jun 2024 02:30PM UTC coverage: 86.364% (-0.6%) from 86.973%

Build # 9714456101

Build Type

Pull #38

github

Committed by

web-flow

Commit Message

Merge dec1137c4 into 6b02e0dbe

Pull Request Pull Request #38: vendor coupon management

Run Details

312 of 468 branches covered (66.67%)

Branch coverage included in aggregate %.

996 of 1194 new or added lines in 16 files covered. (83.42%)

14 existing lines in 3 files now uncovered.

4261 of 4827 relevant lines covered (88.27%)

7.57 hits per line

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

80.27

/src/components/Forms/CouponForm.tsx

import React, { useState, ChangeEvent, FormEvent } from 'react';
import { CouponFormProps, FormPayload } from '../../types/CouponTypes';

interface FormErrors {
  code: string;
  discountRate: string;
  expirationDate: string;
  maxUsageLimit: string;
}

const CouponForm: React.FC<CouponFormProps> = ({ onSubmit, product, updateData, title }) => {
  const [discountType, setDiscountType] = useState<'percentage' | 'amount'>(updateData?.discountType || 'percentage');
  const [formData, setFormData] = useState<FormPayload>({
    code: updateData?.code || '',
    discountRate: updateData?.discountRate || 0,
    expirationDate: updateData?.expirationDate || '',
    maxUsageLimit: updateData?.maxUsageLimit || 0,
    discountType: updateData?.discountType || 'percentage',
    product: product
  });
  const [errors, setErrors] = useState<FormErrors>({
    code: '',
    discountRate: '',
    expirationDate: '',
    maxUsageLimit: ''
  });

  const validateForm = (): boolean => {
    const newErrors: FormErrors = {
      code: '',
      discountRate: '',
      expirationDate: '',
      maxUsageLimit: ''
    };
    let isValid = true;

    if (!formData.code) {
      newErrors.code = 'Code is required';
      isValid = false;
    }
    if (!formData.discountRate) {
      newErrors.discountRate = 'Discount rate is required';
      isValid = false;
    } else if (isNaN(Number(formData.discountRate))) {
      newErrors.discountRate = 'Discount rate must be a number';
      isValid = false;
    }
    if (!formData.expirationDate) {
      newErrors.expirationDate = 'Expiration date is required';
      isValid = false;
    }
    if (!formData.maxUsageLimit || isNaN(Number(formData.maxUsageLimit)) || Number(formData.maxUsageLimit) < 0) {
      newErrors.maxUsageLimit = 'Usage limit must be a non-negative number';
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (event: FormEvent): void => {
    event.preventDefault();
    if (validateForm()) {
      const data: FormPayload = {
        ...formData,
        discountType,
        maxUsageLimit: formData.maxUsageLimit
      };
      onSubmit(data);
      if (!updateData) {
        clearForm();
      }
    }
  };

  const clearForm = (): void => {
    setFormData({
      code: '',
      discountRate: '',
      expirationDate: '',
      maxUsageLimit: 0,
      discountType: 'percentage',
      product: product
    });
    setDiscountType('percentage');
    setErrors({
      code: '',
      discountRate: '',
      expirationDate: '',
      maxUsageLimit: ''
    });
  };

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

  const handleDiscountTypeChange = (e: ChangeEvent<HTMLSelectElement>): void => {
    const newDiscountType = e.target.value as 'percentage' | 'amount';
    setDiscountType(newDiscountType);
    setFormData({ ...formData, discountType: newDiscountType });
  };

  return (
    <form id={`${title.split(' ').join('')}-form`} onSubmit={handleSubmit} className="w-[542px]">
      <div className="flex gap-2 flex-col items-start">
        <label htmlFor="code">Code</label>
        <input
          type="text"
          id="code"
          name="code"
          value={formData.code}
          onChange={handleInputChange}
          className={`text-sm outline-none w-full p-2 h-9 border ${
            errors.code ? 'border-red-500' : 'border-gray-300'
          } rounded bg-transparent`}
        />
        {errors.code && <span className="text-red-500 text-xs">{errors.code}</span>}
      </div>
      <div className="flex justify-between gap-4 mt-2">
        <div className="flex gap-2 flex-col items-start w-fit">
          <label htmlFor="discountType" className="whitespace-nowrap">
            Discount type
          </label>
          <select
            id="discountType"
            name="discountType"
            value={discountType}
            onChange={handleDiscountTypeChange}
            className="text-sm outline-none w-full pl-2 pr-4 h-9 border border-gray-300 rounded bg-transparent whitespace-nowrap"
          >
            <option value="percentage">Percentage</option>
            <option value="amount">Amount</option>
          </select>
        </div>

        <div className="flex gap-2 flex-col items-start w-4/5">
          <label htmlFor="discountRate">{discountType === 'percentage' ? 'Rate' : 'Amount'}</label>
          <input
            type="text"
            id="discountRate"
            name="discountRate"
            value={formData.discountRate}
            onChange={handleInputChange}
            className={`text-sm outline-none w-full p-2 h-9 border ${
              errors.discountRate ? 'border-red-500' : 'border-gray-300'
            } rounded bg-transparent`}
            placeholder={discountType === 'percentage' ? '20%' : '20 RWF'}
          />
          {errors.discountRate && <span className="text-red-500 text-xs">{errors.discountRate}</span>}
        </div>
      </div>

      <div className="flex gap-2 flex-col items-start my-2">
        <label htmlFor="expirationDate">Expiration Date</label>
        <input
          type="date"
          id="expirationDate"
          name="expirationDate"
          value={formData.expirationDate}
          onChange={handleInputChange}
          className={`text-sm outline-none w-full p-2 h-9 border ${
            errors.expirationDate ? 'border-red-500' : 'border-gray-300'
          } rounded bg-transparent flex items-center justify-center`}
        />
        {errors.expirationDate && <span className="text-red-500 text-xs">{errors.expirationDate}</span>}
      </div>
      <div className="flex gap-2 flex-col items-start my-2">
        <label htmlFor="maxUsageLimit">Usage Limit</label>
        <input
          type="number"
          id="maxUsageLimit"
          name="maxUsageLimit"
          value={formData.maxUsageLimit}
          onChange={handleInputChange}
          className={`text-sm outline-none w-full p-2 h-9 border ${
            errors.maxUsageLimit ? 'border-red-500' : 'border-gray-300'
          } rounded bg-transparent`}
          min="0"
        />
        {errors.maxUsageLimit && <span className="text-red-500 text-xs">{errors.maxUsageLimit}</span>}
      </div>
    </form>
  );
};

export default CouponForm;

1	import React, { useState, ChangeEvent, FormEvent } from 'react';	1✔
2	import { CouponFormProps, FormPayload } from '../../types/CouponTypes';	1✔
3		1✔
4	interface FormErrors {	1✔
5	code: string;	1✔
6	discountRate: string;	1✔
7	expirationDate: string;	1✔
8	maxUsageLimit: string;	1✔
9	}	1✔
10		1✔
11	const CouponForm: React.FC<CouponFormProps> = ({ onSubmit, product, updateData, title }) => {	1✔
12	const [discountType, setDiscountType] = useState<'percentage' \| 'amount'>(updateData?.discountType \|\| 'percentage');	42✔
13	const [formData, setFormData] = useState<FormPayload>({	42✔
14	code: updateData?.code \|\| '',	42✔
15	discountRate: updateData?.discountRate \|\| 0,	42✔
16	expirationDate: updateData?.expirationDate \|\| '',	42✔
17	maxUsageLimit: updateData?.maxUsageLimit \|\| 0,	42✔
18	discountType: updateData?.discountType \|\| 'percentage',	42✔
19	product: product	42✔
20	});	42✔
21	const [errors, setErrors] = useState<FormErrors>({	42✔
22	code: '',	42✔
23	discountRate: '',	42✔
24	expirationDate: '',	42✔
25	maxUsageLimit: ''	42✔
26	});	42✔
27		42✔
28	const validateForm = (): boolean => {	42✔
29	const newErrors: FormErrors = {	42✔
30	code: '',	42✔
31	discountRate: '',	1✔
32	expirationDate: '',	1✔
33	maxUsageLimit: ''	1✔
34	};	1✔
35	let isValid = true;	1✔
36		1✔
37	if (!formData.code) {	1✔
38	newErrors.code = 'Code is required';	1✔
39	isValid = false;	1✔
40	}	1✔
41	if (!formData.discountRate) {	1✔
42	newErrors.discountRate = 'Discount rate is required';	1✔
43	isValid = false;	1✔
44	} else if (isNaN(Number(formData.discountRate))) {	1✔
45	newErrors.discountRate = 'Discount rate must be a number';	1✔
46	isValid = false;	1!
NEW 47	}	×
NEW 48	if (!formData.expirationDate) {	×
NEW 49	newErrors.expirationDate = 'Expiration date is required';	×
50	isValid = false;	1✔
51	}	1✔
52	if (!formData.maxUsageLimit \|\| isNaN(Number(formData.maxUsageLimit)) \|\| Number(formData.maxUsageLimit) < 0) {	1✔
53	newErrors.maxUsageLimit = 'Usage limit must be a non-negative number';	1✔
54	isValid = false;	1✔
55	}	1!
NEW 56		×
NEW 57	setErrors(newErrors);	×
58	return isValid;	1✔
59	};	1✔
60		1✔
61	const handleSubmit = (event: FormEvent): void => {	1✔
62	event.preventDefault();	1✔
63	if (validateForm()) {	1✔
64	const data: FormPayload = {	1✔
65	...formData,	1✔
66	discountType,	42✔
67	maxUsageLimit: formData.maxUsageLimit	42✔
68	};	1✔
69	onSubmit(data);	1!
NEW 70	if (!updateData) {	×
NEW 71	clearForm();	×
NEW 72	}	×
NEW 73	}	×
NEW 74	};	×
NEW 75		×
NEW 76	const clearForm = (): void => {	×
NEW 77	setFormData({	×
NEW 78	code: '',	×
NEW 79	discountRate: '',	×
80	expirationDate: '',	1✔
81	maxUsageLimit: 0,	42✔
82	discountType: 'percentage',	42✔
NEW 83	product: product	×
NEW 84	});	×
NEW 85	setDiscountType('percentage');	×
NEW 86	setErrors({	×
NEW 87	code: '',	×
NEW 88	discountRate: '',	×
NEW 89	expirationDate: '',	×
NEW 90	maxUsageLimit: ''	×
NEW 91	});	×
NEW 92	};	×
NEW 93		×
NEW 94	const handleInputChange = (e: ChangeEvent<HTMLInputElement \| HTMLSelectElement>): void => {	×
NEW 95	const { name, value } = e.target;	×
NEW 96	setFormData({ ...formData, [name]: value });	×
NEW 97	};	×
NEW 98		×
99	const handleDiscountTypeChange = (e: ChangeEvent<HTMLSelectElement>): void => {	42✔
100	const newDiscountType = e.target.value as 'percentage' \| 'amount';	42✔
NEW 101	setDiscountType(newDiscountType);	×
NEW 102	setFormData({ ...formData, discountType: newDiscountType });	×
NEW 103	};	×
104		42✔
105	return (	42✔
NEW 106	<form id={`${title.split(' ').join('')}-form`} onSubmit={handleSubmit} className="w-[542px]">	×
NEW 107	<div className="flex gap-2 flex-col items-start">	×
NEW 108	<label htmlFor="code">Code</label>	×
NEW 109	<input	×
110	type="text"	42✔
111	id="code"	42✔
112	name="code"	42✔
113	value={formData.code}	42✔
114	onChange={handleInputChange}	42✔
115	className={`text-sm outline-none w-full p-2 h-9 border ${	42✔
116	errors.code ? 'border-red-500' : 'border-gray-300'	42✔
117	} rounded bg-transparent`}	42✔
118	/>	42✔
119	{errors.code && <span className="text-red-500 text-xs">{errors.code}</span>}	42✔
120	</div>	42✔
121	<div className="flex justify-between gap-4 mt-2">	42✔
122	<div className="flex gap-2 flex-col items-start w-fit">	42✔
123	<label htmlFor="discountType" className="whitespace-nowrap">	42✔
124	Discount type	42✔
125	</label>	42✔
126	<select	42✔
127	id="discountType"	42✔
128	name="discountType"	42✔
129	value={discountType}	42✔
130	onChange={handleDiscountTypeChange}	42✔
131	className="text-sm outline-none w-full pl-2 pr-4 h-9 border border-gray-300 rounded bg-transparent whitespace-nowrap"	42✔
132	>	42✔
133	<option value="percentage">Percentage</option>	42✔
134	<option value="amount">Amount</option>	42✔
135	</select>	42✔
136	</div>	42✔
137		42✔
138	<div className="flex gap-2 flex-col items-start w-4/5">	42✔
139	<label htmlFor="discountRate">{discountType === 'percentage' ? 'Rate' : 'Amount'}</label>	42✔
140	<input	42✔
141	type="text"	42✔
142	id="discountRate"	42✔
143	name="discountRate"	42✔
144	value={formData.discountRate}	42✔
145	onChange={handleInputChange}	42!
146	className={`text-sm outline-none w-full p-2 h-9 border ${	42✔
147	errors.discountRate ? 'border-red-500' : 'border-gray-300'	42✔
148	} rounded bg-transparent`}	42✔
149	placeholder={discountType === 'percentage' ? '20%' : '20 RWF'}	42✔
150	/>	42✔
151	{errors.discountRate && <span className="text-red-500 text-xs">{errors.discountRate}</span>}	42✔
152	</div>	42✔
153	</div>	42✔
154		42✔
155	<div className="flex gap-2 flex-col items-start my-2">	42!
156	<label htmlFor="expirationDate">Expiration Date</label>	42✔
157	<input	42✔
158	type="date"	1✔
159	id="expirationDate"	42✔
160	name="expirationDate"	42✔
161	value={formData.expirationDate}	42✔
162	onChange={handleInputChange}	42✔
163	className={`text-sm outline-none w-full p-2 h-9 border ${	42✔
164	errors.expirationDate ? 'border-red-500' : 'border-gray-300'	42✔
165	} rounded bg-transparent flex items-center justify-center`}	42✔
166	/>	42✔
167	{errors.expirationDate && <span className="text-red-500 text-xs">{errors.expirationDate}</span>}	42✔
168	</div>	42✔
169	<div className="flex gap-2 flex-col items-start my-2">	42✔
170	<label htmlFor="maxUsageLimit">Usage Limit</label>	42✔
171	<input	42✔
172	type="number"	42✔
173	id="maxUsageLimit"	42✔
174	name="maxUsageLimit"	42✔
175	value={formData.maxUsageLimit}	42✔
176	onChange={handleInputChange}	1✔
177	className={`text-sm outline-none w-full p-2 h-9 border ${	42✔
178	errors.maxUsageLimit ? 'border-red-500' : 'border-gray-300'	42✔
179	} rounded bg-transparent`}	42✔
180	min="0"	42✔
181	/>	42✔
182	{errors.maxUsageLimit && <span className="text-red-500 text-xs">{errors.maxUsageLimit}</span>}	42✔
183	</div>	42✔
184	</form>	42✔
185	);	42✔
186	};	42✔
187		42✔
188	export default CouponForm;	42✔

atlp-rwanda / knights-ecomm-fe / 9714456101

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