9888974138

Committed 11 Jul 2024 09:29AM UTC coverage: 86.994% (-1.6%) from 88.568%

Build # 9888974138

Build Type

Pull #60

github

Committed by

maxCastro1

Commit Message

Merge pull request #55 from atlp-rwanda/ft-cart-managment

Implement Single Product View and Cart management (Guest and User)

Pull Request Pull Request #60: This PR is for the addition of Stripe Payment Integration with Payment and Success Routes

Run Details

503 of 689 branches covered (73.0%)

Branch coverage included in aggregate %.

41 of 163 new or added lines in 3 files covered. (25.15%)

45 existing lines in 6 files now uncovered.

6139 of 6946 relevant lines covered (88.38%)

7.84 hits per line

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

75.0

/src/pages/Authentication/OtpPage.tsx

import React from 'react';
import { useState, ChangeEvent, FormEvent } from 'react';
import { toast } from 'react-hot-toast';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../redux/store';
import { setCredentials } from '../../redux/reducers/authReducer';
import handleError from '../../utils/errorHandler';
import { fetchCart } from '../../redux/actions/cartAction';

const OtpPage = () => {
  interface OtpForm {
    first: string;
    second: string;
    third: string;
    fourth: string;
    fifth: string;
    sixth: string;
  }

  const initialForm = {
    first: '',
    second: '',
    third: '',
    fourth: '',
    fifth: '',
    sixth: ''
  };

  const [otpForm, setOtpForm] = useState<OtpForm>(initialForm);
  const [loading, setLoading] = useState(false);
  const { email } = useSelector((state: RootState) => state.currentUser);

  const dispatch = useDispatch<AppDispatch>();
  const fields = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'] as const;

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    if (/^\d?$/.test(value)) {
      setOtpForm((prevFormData) => ({ ...prevFormData, [name]: value }));
    }
  };

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    try {
      const allFieldsFilled = fields.every((field) => otpForm[field]);
      if (!allFieldsFilled) {
        toast.error('Fill all the OTP fields.');
        return;
      }

      const otpCode = Object.values(otpForm).join('');
      if (!email) throw Error('Something went wrong, Login again');
      const reqData = { email, otp: otpCode };
      setLoading(true);
      const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/verify-otp`, reqData);

      if (response.status === 200) {
        dispatch(setCredentials(response.data.data.token));
        dispatch(fetchCart());
      }
    } catch (error) {
      handleError(error);
    } finally {
      setOtpForm(initialForm);
      setLoading(false);
    }
  };

  const resendOTP = async () => {
    try {
      if (!email) throw Error('Something went wrong, Login again');
      const reqData = { email };
      setLoading(true);
      const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/resend-otp`, reqData);

      if (response.data.data.message === 'OTP sent successfully') toast.success('OTP resent successfully');
    } catch (error) {
      handleError(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="flex bg-transparent1 items-center justify-center h-[530px]">
        <div className="bg-transparent1 sm:bg-white p-5 sm:p-10  text-black flex flex-col gap-6 items-center">
          <h2 className="font-medium text-[20px]">Verify Your Identity</h2>
          <p className="font-light text-xs sm:text-[12.3px] max-w-[281px] sm:max-w-[412px] text-center">
            Protecting your account is our priority. Please confirm your identity by providing the code sent to your
            email/phone.
          </p>

          <form className="flex flex-col gap-6 items-center" onSubmit={handleSubmit}>
            <div className="flex gap-[17px] text-black">
              {fields.map((field) => (
                <input
                  key={field}
                  className="w-8 h-8 sm:w-[50px] sm:h-[50px] bg-white border border-grey3 border-solid text-center"
                  maxLength={1}
                  onChange={handleChange}
                  name={field}
                  value={otpForm[field]}
                />
              ))}
            </div>
            <button
              type={loading ? 'button' : 'submit'}
              className={`bg-primary text-white text-[16px] py-2 px-2 rounded-sm ${loading ? 'cursor-not-allowed' : 'cursor-pointer'} w-60`}
            >
              {loading ? 'Loading...' : 'Verify'}
            </button>
          </form>
          <p className="font-light text-xs sm:text-[12.3px] max-w-[296px] sm:max-w-[329px] text-center">
            It may take a minute to receive verification message. Haven’t received it yet?
            <span onClick={resendOTP} className="text-orange cursor-pointer">
              Resend
            </span>
          </p>
        </div>
      </div>
    </>
  );
};

export default OtpPage;

1	import React from 'react';	1✔
2	import { useState, ChangeEvent, FormEvent } from 'react';	1✔
3	import { toast } from 'react-hot-toast';	1✔
4	import axios from 'axios';	1✔
5	import { useDispatch, useSelector } from 'react-redux';	1✔
6	import { AppDispatch, RootState } from '../../redux/store';	1✔
7	import { setCredentials } from '../../redux/reducers/authReducer';	1✔
8	import handleError from '../../utils/errorHandler';	1✔
9	import { fetchCart } from '../../redux/actions/cartAction';	1✔
10		1✔
11	const OtpPage = () => {	1✔
12	interface OtpForm {	11✔
13	first: string;	11✔
14	second: string;	11✔
15	third: string;	11✔
16	fourth: string;	11✔
17	fifth: string;	11✔
18	sixth: string;	11✔
19	}	11✔
20		11✔
21	const initialForm = {	11✔
22	first: '',	11✔
23	second: '',	11✔
24	third: '',	11✔
25	fourth: '',	11✔
26	fifth: '',	11✔
27	sixth: ''	11✔
28	};	11✔
29		11✔
30	const [otpForm, setOtpForm] = useState<OtpForm>(initialForm);	11✔
31	const [loading, setLoading] = useState(false);	11✔
32	const { email } = useSelector((state: RootState) => state.currentUser);	11✔
33		11✔
34	const dispatch = useDispatch<AppDispatch>();	11✔
35	const fields = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'] as const;	11✔
36		11✔
37	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {	11✔
38	const { name, value } = event.target;	13✔
39	if (/^\d?$/.test(value)) {	13✔
40	setOtpForm((prevFormData) => ({ ...prevFormData, [name]: value }));	6✔
41	}	6✔
42	};	13✔
43		11✔
44	const handleSubmit = async (event: FormEvent) => {	11✔
45	event.preventDefault();	1✔
46	try {	1✔
47	const allFieldsFilled = fields.every((field) => otpForm[field]);	1✔
48	if (!allFieldsFilled) {	1✔
49	toast.error('Fill all the OTP fields.');	1✔
50	return;	1✔
51	}	1!
UNCOV 52		×
UNCOV 53	const otpCode = Object.values(otpForm).join('');	×
UNCOV 54	if (!email) throw Error('Something went wrong, Login again');	×
55	const reqData = { email, otp: otpCode };	×
56	setLoading(true);	×
57	const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/verify-otp`, reqData);	×
58		×
59	if (response.status === 200) {	×
60	dispatch(setCredentials(response.data.data.token));	×
61	dispatch(fetchCart());	×
62	}	×
63	} catch (error) {	×
64	handleError(error);	×
65	} finally {	×
66	setOtpForm(initialForm);	1!
UNCOV 67	setLoading(false);	×
68	}	1✔
69	};	1✔
70		1✔
71	const resendOTP = async () => {	1✔
72	try {	1✔
73	if (!email) throw Error('Something went wrong, Login again');	11✔
74	const reqData = { email };	11✔
UNCOV 75	setLoading(true);	×
UNCOV 76	const response = await axios.post(`${import.meta.env.VITE_APP_API_URL}/user/resend-otp`, reqData);	×
77		×
78	if (response.data.data.message === 'OTP sent successfully') toast.success('OTP resent successfully');	×
79	} catch (error) {	×
80	handleError(error);	×
81	} finally {	×
82	setLoading(false);	×
83	}	×
84	};	×
85		×
UNCOV 86	return (	×
UNCOV 87	<>	×
UNCOV 88	<div className="flex bg-transparent1 items-center justify-center h-[530px]">	×
UNCOV 89	<div className="bg-transparent1 sm:bg-white p-5 sm:p-10 text-black flex flex-col gap-6 items-center">	×
UNCOV 90	<h2 className="font-medium text-[20px]">Verify Your Identity</h2>	×
UNCOV 91	<p className="font-light text-xs sm:text-[12.3px] max-w-[281px] sm:max-w-[412px] text-center">	×
92	Protecting your account is our priority. Please confirm your identity by providing the code sent to your	11✔
93	email/phone.	11✔
94	</p>	11✔
95		11✔
96	<form className="flex flex-col gap-6 items-center" onSubmit={handleSubmit}>	11✔
97	<div className="flex gap-[17px] text-black">	11✔
98	{fields.map((field) => (	11✔
99	<input	11✔
100	key={field}	11✔
101	className="w-8 h-8 sm:w-[50px] sm:h-[50px] bg-white border border-grey3 border-solid text-center"	11✔
102	maxLength={1}	11✔
103	onChange={handleChange}	11✔
104	name={field}	11✔
105	value={otpForm[field]}	11✔
106	/>	66✔
107	))}	66✔
108	</div>	66✔
109	<button	66✔
110	type={loading ? 'button' : 'submit'}	66✔
111	className={`bg-primary text-white text-[16px] py-2 px-2 rounded-sm ${loading ? 'cursor-not-allowed' : 'cursor-pointer'} w-60`}	66✔
112	>	66✔
113	{loading ? 'Loading...' : 'Verify'}	66✔
114	</button>	11✔
115	</form>	11✔
116	<p className="font-light text-xs sm:text-[12.3px] max-w-[296px] sm:max-w-[329px] text-center">	11✔
117	It may take a minute to receive verification message. Haven’t received it yet?	11!
118	<span onClick={resendOTP} className="text-orange cursor-pointer">	11!
119	Resend	11✔
120	</span>	11!
121	</p>	11✔
122	</div>	11✔
123	</div>	11✔
124	</>	11✔
125	);	11✔
126	};	11✔
127		11✔
128	export default OtpPage;	11✔

atlp-rwanda / knights-ecomm-fe / 9888974138

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