8694a92c-2a29-4314-ad94-740437c55d5c

Committed 10 Jul 2024 08:46AM UTC coverage: 90.71% (-2.3%) from 93.026%

Build # 8694a92c-2a29-4314-ad94-740437c55d5c

Build Type

Pull #39

circleci

Committed by

Bananayosostene

Commit Message

A buyer should be able to checkout [#187364703]

Pull Request Pull Request #39: [#187364703] ft-A buyer should be able to checkout

Run Details

367 of 445 branches covered (82.47%)

Branch coverage included in aggregate %.

17 of 55 new or added lines in 3 files covered. (30.91%)

5 existing lines in 1 file now uncovered.

1000 of 1062 relevant lines covered (94.16%)

8.18 hits per line

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

24.14

/src/views/checkout.tsx

import React ,{ useState, useEffect } from "react";
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
import * as Yup from "yup";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import useAxiosClient from "../hooks/AxiosInstance";
import SectionHeader from "../components/SectionHeader";
import Button from "../components/Button";
import { GrFormPrevious } from "react-icons/gr";
import { GrFormNext } from "react-icons/gr";
import "../app.scss";

interface CheckoutFormValues {
  fullName: string;
  phoneNumber: string;
  country: string;
  streetAddress: string;
  town: string;
  email: string;
  deliveryDate: string;
  paymentMethod: string;
  mobileMoneyNumber: string;
  // cardNumber: string;
  // expiryDate: string;
  // cvv: string;
}

interface CartItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  images: string[];
}

interface Cart {
  items: CartItem[];
  totalQuantity: number;
  totalPrice: number;
}


const validationSchema = Yup.object().shape({
  fullName: Yup.string().required("Full name is required"),
  phoneNumber: Yup.string().required("Phone number is required"),
  country: Yup.string().required("Country is required"),
  streetAddress: Yup.string().required("Street address is required"),
  town: Yup.string().required("Town is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
  deliveryDate: Yup.date().required("Delivery date is required"),
  paymentMethod: Yup.string().required("Payment method is required"),
  mobileMoneyNumber: Yup.string()
    .matches(/^[0-9]{10,15}$/, "Invalid mobile money number")
    .required("Mobile money number is required"),
});



const Checkout: React.FC = () => {
  const axiosClient = useAxiosClient();
  const [cart, setCart] = useState<Cart | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 2;

   useEffect(() => {
     const fetchCart = async () => {
       try {
         const response = await axiosClient.get("/cart");
         setCart(response.data.cart);
       } catch (error) {
         console.error("Error fetching cart:", error);
       }
     };

     fetchCart();
   }, []);

   if (!cart) {
     return <div>Loading...</div>;
   }

   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentItems = cart.items.slice(indexOfFirstItem, indexOfLastItem);

   const totalPages = Math.ceil(cart.items.length / itemsPerPage);


  const initialValues: CheckoutFormValues = {
    fullName: "",
    phoneNumber: "",
    country: "",
    streetAddress: "",
    town: "",
    email: "",
    deliveryDate: "",
    paymentMethod: "",
    mobileMoneyNumber: "",
    // cardNumber: "",
    // expiryDate: "",
    // cvv: "",
  };

  const handleSubmit = async (
    values: CheckoutFormValues,
    { setSubmitting }: FormikHelpers<CheckoutFormValues>,
  ) => {
    try {
      const response = await axiosClient.post("/checkout", values);
      toast.success("Order has been sent successfully!");
      response.data;
      setTimeout(() => {
        window.location.reload();
      }, 2000); 
    } catch (error) {
      toast.error("Error placing order. Please try again.");
      // console.error("API error:", error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="">
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        {({ values, isSubmitting }) => (
          <Form>
            <div className="container md:text-sm text-xs mx-auto md:w-full w-full md:flex justify-center md:gap-20 py-10 md:px-20 px-[5%]">
              <div className="left md:w-1/2 ">
                <div className="flex items-center mb-8">
                  <SectionHeader title="Shipping Address" />
                </div>
                <div className="space-y-3 w-full">
                  <div>
                    <label htmlFor="fullName" className="block mb-1">
                      Name
                    </label>
                    <Field
                      type="text"
                      id="fullName"
                      name="fullName"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="fullName"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="country" className="block mb-1">
                      Country
                    </label>
                    <Field
                      type="text"
                      id="country"
                      name="country"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="country"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="streetAddress" className="block mb-1">
                      Street Address
                    </label>
                    <Field
                      type="text"
                      id="streetAddress"
                      name="streetAddress"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="streetAddress"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="town" className="block mb-1">
                      Town/City
                    </label>
                    <Field
                      type="text"
                      id="town"
                      name="town"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="town"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="phoneNumber" className="block mb-1">
                      Phone Number
                    </label>
                    <Field
                      type="tel"
                      id="phoneNumber"
                      name="phoneNumber"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="phoneNumber"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="email" className="block mb-1">
                      Email Address
                    </label>
                    <Field
                      type="email"
                      id="email"
                      name="email"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="email"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>

                  <div>
                    <label htmlFor="deliveryDate" className="block mb-1">
                      Delivery Date
                    </label>
                    <Field
                      type="date"
                      id="deliveryDate"
                      name="deliveryDate"
                      className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
                    />
                    <ErrorMessage
                      name="deliveryDate"
                      component="div"
                      className="text-red-500 text-xs mt-1"
                    />
                  </div>
                </div>
              </div>

              <div className="right md:w-1/2">
                <div className="flex items-center pb-8">
                  <SectionHeader title="Order Details" />
                </div>
                <div className="orders mb-8">
                  <table className="w-full">
                    <thead>
                      <tr className=" ">
                        <th className="text-left py-2 font-bold">Product</th>
                        <th className="text-left py-2 font-bold">Name</th>
                        <th className="text-right py-2 font-bold">Quantity</th>
                        <th className="text-right py-2 font-bold">Price</th>
                      </tr>
                    </thead>
                    <tbody>
                      {currentItems.map((item) => (
                        <tr key={item.productId} className="">
                          <td className="py-2">
                            <img
                              src={item.images[0]}
                              alt={item.name}
                              className="w-12 h-12 object-cover rounded shadow-[0_0_5px_rgba(0,0,0,0.3)]"
                            />
                          </td>
                          <td className="py-2 ">{item.name}</td>
                          <td className="text-center py-2">{item.quantity}</td>
                          <td className="text-right py-2">{item.price}rwf</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>

                  <div className="pagination flex justify-between mt-4">
                    <button
                      onClick={() =>
                        setCurrentPage((prev) => Math.max(prev - 1, 1))
                      }
                      disabled={currentPage === 1}
                      className={`border-[1px] border-black px-4 py-1 rounded ${
                        currentPage === 1
                          ? "gradient-right-white-left-black cursor-not-allowed"
                          : "gradient-right-white-left-black"
                      }`}
                    >
                      <GrFormPrevious />
                    </button>
                    {currentPage !== totalPages && (
                      <button
                        onClick={() =>
                          setCurrentPage((prev) =>
                            Math.min(prev + 1, totalPages),
                          )
                        }
                        disabled={currentPage === totalPages}
                        className="gradient-left-white-right-black px-4 py-1 border-[1px] border-black rounded disabled:bg-gray-300"
                      >
                        <GrFormNext />
                      </button>
                    )}
                  </div>

                  <div className="Total mt-8">
                    <hr className="w-full my-[1rem] border-b border-gray_100" />
                    <div className="flex justify-between my-[1rem]">
                      <p>Subtotal</p>
                      <p>{cart.totalQuantity} items</p>
                      <p>{cart.totalPrice}rwf</p>
                    </div>
                    <div className="flex justify-between">
                      <p>Delivery Fee</p>
                      <p className="text-customRed">0.0 rwf</p>
                    </div>
                    <hr className="w-full my-2 border-b border-gray_100" />
                    <div className="flex justify-between text-lg font-bold">
                      <p>Total</p>
                      <p className="font-bold  text-customGreen">
                        {cart.totalPrice} rwf
                      </p>
                    </div>
                  </div>
                </div>

                <div className="payment-method">
                  <div className="flex items-center py-5">
                    <SectionHeader title="Payment Method" />
                  </div>
                  <div className="ml-[2rem]">
                    <div className="flex mb-2">
                      <Field
                        type="radio"
                        name="paymentMethod"
                        value="mobileMoney"
                        className="form-radio"
                      />
                      <label htmlFor="mobileMoney" className="block ml-3">
                        <span className="ml-2">Mobile Money</span>
                      </label>
                    </div>
                    <div className="flex">
                      <Field
                        type="radio"
                        name="paymentMethod"
                        value="creditCard"
                        className="form-radio"
                      />
                      <label htmlFor="creditCard" className="block ml-3">
                        <span className="ml-2">Credit Card</span>
                      </label>
                    </div>
                    <ErrorMessage
                      name="paymentMethod"
                      component="div"
                      className="text-red-500 text-xs"
                    />

                    {values.paymentMethod === "mobileMoney" && (
                      <div className="">
                        <div className="flex mb-3 mt-[2rem] ">
                          <label htmlFor="mobileMoneyNumber" className="block">
                            Mobile Money Number
                          </label>
                          <Field
                            type="text"
                            id="mobileMoneyNumber"
                            name="mobileMoneyNumber"
                            className="outline-none p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
                          />
                        </div>
                        <ErrorMessage
                          name="mobileMoneyNumber"
                          component="div"
                          className="text-red-500 text-xs mt-1 text-right"
                        />
                      </div>
                    )}

                    {values.paymentMethod === "creditCard" && (
                      <>
                        <div className="flex mb-3 mt-[2rem] ">
                          <label htmlFor="cardNumber" className="block">
                            Card Number
                          </label>
                          <Field
                            type="text"
                            id="cardNumber"
                            name="cardNumber"
                            className="outline-none  p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
                          />
                          <ErrorMessage
                            name="cardNumber"
                            component="div"
                            className="text-red-500 text-xs mt-1"
                          />
                        </div>
                        <div className="flex">
                          <label htmlFor="expiryDate" className="block mb-1">
                            Expiry Date
                          </label>
                          <Field
                            type="text"
                            id="expiryDate"
                            name="expiryDate"
                            placeholder="MM/YY"
                            className="outline-none mb-3 p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
                          />
                          <ErrorMessage
                            name="expiryDate"
                            component="div"
                            className="text-red-500 text-xs mt-1"
                          />
                        </div>
                        <div className="flex mb-3 ">
                          <label htmlFor="cvv" className="block">
                            CVV Code
                          </label>
                          <Field
                            type="text"
                            id="cvv"
                            name="cvv"
                            className="outline-none p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
                          />
                          <ErrorMessage
                            name="cvv"
                            component="div"
                            className="text-red-500 text-xs mt-1"
                          />
                        </div>
                      </>
                    )}
                  </div>
                </div>

                <div className="mt-8">
                  <Button
                    type="submit"
                    value={isSubmitting ? "Processing..." : "Place Order"}
                    disabled={isSubmitting}
                  />
                </div>
              </div>
            </div>
          </Form>
        )}
      </Formik>
      <ToastContainer />
    </div>
  );
};

export default Checkout;

1	import React ,{ useState, useEffect } from "react";	1✔
2	import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";	1✔
3	import * as Yup from "yup";	1✔
4	import { ToastContainer, toast } from "react-toastify";	1✔
5	import "react-toastify/dist/ReactToastify.css";	1✔
6	import useAxiosClient from "../hooks/AxiosInstance";	1✔
7	import SectionHeader from "../components/SectionHeader";	1✔
8	import Button from "../components/Button";	1✔
9	import { GrFormPrevious } from "react-icons/gr";	1✔
10	import { GrFormNext } from "react-icons/gr";	1✔
11	import "../app.scss";	1✔
12
13	interface CheckoutFormValues {
14	fullName: string;
15	phoneNumber: string;
16	country: string;
17	streetAddress: string;
18	town: string;
19	email: string;
20	deliveryDate: string;
21	paymentMethod: string;
22	mobileMoneyNumber: string;
23	// cardNumber: string;
24	// expiryDate: string;
25	// cvv: string;
26	}
27
28	interface CartItem {
29	productId: string;
30	name: string;
31	price: number;
32	quantity: number;
33	images: string[];
34	}
35
36	interface Cart {
37	items: CartItem[];
38	totalQuantity: number;
39	totalPrice: number;
40	}
41
42
43	const validationSchema = Yup.object().shape({	1✔
44	fullName: Yup.string().required("Full name is required"),
45	phoneNumber: Yup.string().required("Phone number is required"),
46	country: Yup.string().required("Country is required"),
47	streetAddress: Yup.string().required("Street address is required"),
48	town: Yup.string().required("Town is required"),
49	email: Yup.string().email("Invalid email").required("Email is required"),
50	deliveryDate: Yup.date().required("Delivery date is required"),
51	paymentMethod: Yup.string().required("Payment method is required"),
52	mobileMoneyNumber: Yup.string()
53	.matches(/^[0-9]{10,15}$/, "Invalid mobile money number")
54	.required("Mobile money number is required"),
55	});
56
57
58
59	const Checkout: React.FC = () => {	1✔
NEW 60	const axiosClient = useAxiosClient();	×
NEW 61	const [cart, setCart] = useState<Cart \| null>(null);	×
NEW 62	const [currentPage, setCurrentPage] = useState(1);	×
NEW 63	const itemsPerPage = 2;	×
64
NEW 65	useEffect(() => {	×
NEW 66	const fetchCart = async () => {	×
NEW 67	try {	×
NEW 68	const response = await axiosClient.get("/cart");	×
NEW 69	setCart(response.data.cart);	×
70	} catch (error) {
NEW 71	console.error("Error fetching cart:", error);	×
72	}
73	};
74
NEW 75	fetchCart();	×
76	}, []);
77
NEW 78	if (!cart) {	×
NEW 79	return <div>Loading...</div>;	×
80	}
81
NEW 82	const indexOfLastItem = currentPage * itemsPerPage;	×
NEW 83	const indexOfFirstItem = indexOfLastItem - itemsPerPage;	×
NEW 84	const currentItems = cart.items.slice(indexOfFirstItem, indexOfLastItem);	×
85
NEW 86	const totalPages = Math.ceil(cart.items.length / itemsPerPage);	×
87
88
NEW 89	const initialValues: CheckoutFormValues = {	×
90	fullName: "",
91	phoneNumber: "",
92	country: "",
93	streetAddress: "",
94	town: "",
95	email: "",
96	deliveryDate: "",
97	paymentMethod: "",
98	mobileMoneyNumber: "",
99	// cardNumber: "",
100	// expiryDate: "",
101	// cvv: "",
102	};
103
NEW 104	const handleSubmit = async (	×
105	values: CheckoutFormValues,
106	{ setSubmitting }: FormikHelpers<CheckoutFormValues>,
107	) => {
NEW 108	try {	×
NEW 109	const response = await axiosClient.post("/checkout", values);	×
NEW 110	toast.success("Order has been sent successfully!");	×
NEW 111	response.data;	×
NEW 112	setTimeout(() => {	×
NEW 113	window.location.reload();	×
114	}, 2000);
115	} catch (error) {
NEW 116	toast.error("Error placing order. Please try again.");	×
117	// console.error("API error:", error);
118	} finally {
NEW 119	setSubmitting(false);	×
120	}
121	};
122
NEW 123	return (	×
124	<div className="">
125	<Formik
126	initialValues={initialValues}
127	validationSchema={validationSchema}
128	onSubmit={handleSubmit}
129	>
130	{({ values, isSubmitting }) => (
NEW 131	<Form>	×
132	<div className="container md:text-sm text-xs mx-auto md:w-full w-full md:flex justify-center md:gap-20 py-10 md:px-20 px-[5%]">
133	<div className="left md:w-1/2 ">
134	<div className="flex items-center mb-8">
135	<SectionHeader title="Shipping Address" />
136	</div>
137	<div className="space-y-3 w-full">
138	<div>
139	<label htmlFor="fullName" className="block mb-1">
140	Name
141	</label>
142	<Field
143	type="text"
144	id="fullName"
145	name="fullName"
146	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
147	/>
148	<ErrorMessage
149	name="fullName"
150	component="div"
151	className="text-red-500 text-xs mt-1"
152	/>
153	</div>
154
155	<div>
156	<label htmlFor="country" className="block mb-1">
157	Country
158	</label>
159	<Field
160	type="text"
161	id="country"
162	name="country"
163	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
164	/>
165	<ErrorMessage
166	name="country"
167	component="div"
168	className="text-red-500 text-xs mt-1"
169	/>
170	</div>
171
172	<div>
173	<label htmlFor="streetAddress" className="block mb-1">
174	Street Address
175	</label>
176	<Field
177	type="text"
178	id="streetAddress"
179	name="streetAddress"
180	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
181	/>
182	<ErrorMessage
183	name="streetAddress"
184	component="div"
185	className="text-red-500 text-xs mt-1"
186	/>
187	</div>
188
189	<div>
190	<label htmlFor="town" className="block mb-1">
191	Town/City
192	</label>
193	<Field
194	type="text"
195	id="town"
196	name="town"
197	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
198	/>
199	<ErrorMessage
200	name="town"
201	component="div"
202	className="text-red-500 text-xs mt-1"
203	/>
204	</div>
205
206	<div>
207	<label htmlFor="phoneNumber" className="block mb-1">
208	Phone Number
209	</label>
210	<Field
211	type="tel"
212	id="phoneNumber"
213	name="phoneNumber"
214	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
215	/>
216	<ErrorMessage
217	name="phoneNumber"
218	component="div"
219	className="text-red-500 text-xs mt-1"
220	/>
221	</div>
222
223	<div>
224	<label htmlFor="email" className="block mb-1">
225	Email Address
226	</label>
227	<Field
228	type="email"
229	id="email"
230	name="email"
231	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
232	/>
233	<ErrorMessage
234	name="email"
235	component="div"
236	className="text-red-500 text-xs mt-1"
237	/>
238	</div>
239
240	<div>
241	<label htmlFor="deliveryDate" className="block mb-1">
242	Delivery Date
243	</label>
244	<Field
245	type="date"
246	id="deliveryDate"
247	name="deliveryDate"
248	className="outline-none p-2 w-full text-main-black-color md:text-sm text-xs rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)]"
249	/>
250	<ErrorMessage
251	name="deliveryDate"
252	component="div"
253	className="text-red-500 text-xs mt-1"
254	/>
255	</div>
256	</div>
257	</div>
258
259	<div className="right md:w-1/2">
260	<div className="flex items-center pb-8">
261	<SectionHeader title="Order Details" />
262	</div>
263	<div className="orders mb-8">
264	<table className="w-full">
265	<thead>
266	<tr className=" ">
267	<th className="text-left py-2 font-bold">Product</th>
268	<th className="text-left py-2 font-bold">Name</th>
269	<th className="text-right py-2 font-bold">Quantity</th>
270	<th className="text-right py-2 font-bold">Price</th>
271	</tr>
272	</thead>
273	<tbody>
274	{currentItems.map((item) => (
NEW 275	<tr key={item.productId} className="">	×
276	<td className="py-2">
277	<img
278	src={item.images[0]}
279	alt={item.name}
280	className="w-12 h-12 object-cover rounded shadow-[0_0_5px_rgba(0,0,0,0.3)]"
281	/>
282	</td>
283	<td className="py-2 ">{item.name}</td>
284	<td className="text-center py-2">{item.quantity}</td>
285	<td className="text-right py-2">{item.price}rwf</td>
286	</tr>
287	))}
288	</tbody>
289	</table>
290
291	<div className="pagination flex justify-between mt-4">
292	<button
293	onClick={() =>
NEW 294	setCurrentPage((prev) => Math.max(prev - 1, 1))	×
295	}
296	disabled={currentPage === 1}
297	className={`border-[1px] border-black px-4 py-1 rounded ${
298	currentPage === 1	×
299	? "gradient-right-white-left-black cursor-not-allowed"
300	: "gradient-right-white-left-black"
301	}`}
302	>
303	<GrFormPrevious />
304	</button>
305	{currentPage !== totalPages && (	×
306	<button
307	onClick={() =>
NEW 308	setCurrentPage((prev) =>	×
NEW 309	Math.min(prev + 1, totalPages),	×
310	)
311	}
312	disabled={currentPage === totalPages}
313	className="gradient-left-white-right-black px-4 py-1 border-[1px] border-black rounded disabled:bg-gray-300"
314	>
315	<GrFormNext />
316	</button>
317	)}
318	</div>
319
320	<div className="Total mt-8">
321	<hr className="w-full my-[1rem] border-b border-gray_100" />
322	<div className="flex justify-between my-[1rem]">
323	<p>Subtotal</p>
324	<p>{cart.totalQuantity} items</p>
325	<p>{cart.totalPrice}rwf</p>
326	</div>
327	<div className="flex justify-between">
328	<p>Delivery Fee</p>
329	<p className="text-customRed">0.0 rwf</p>
330	</div>
331	<hr className="w-full my-2 border-b border-gray_100" />
332	<div className="flex justify-between text-lg font-bold">
333	<p>Total</p>
334	<p className="font-bold text-customGreen">
335	{cart.totalPrice} rwf
336	</p>
337	</div>
338	</div>
339	</div>
340
341	<div className="payment-method">
342	<div className="flex items-center py-5">
343	<SectionHeader title="Payment Method" />
344	</div>
345	<div className="ml-[2rem]">
346	<div className="flex mb-2">
347	<Field
348	type="radio"
349	name="paymentMethod"
350	value="mobileMoney"
351	className="form-radio"
352	/>
353	<label htmlFor="mobileMoney" className="block ml-3">
354	<span className="ml-2">Mobile Money</span>
355	</label>
356	</div>
357	<div className="flex">
358	<Field
359	type="radio"
360	name="paymentMethod"
361	value="creditCard"
362	className="form-radio"
363	/>
364	<label htmlFor="creditCard" className="block ml-3">
365	<span className="ml-2">Credit Card</span>
366	</label>
367	</div>
368	<ErrorMessage
369	name="paymentMethod"
370	component="div"
371	className="text-red-500 text-xs"
372	/>
373
374	{values.paymentMethod === "mobileMoney" && (	×
375	<div className="">
376	<div className="flex mb-3 mt-[2rem] ">
377	<label htmlFor="mobileMoneyNumber" className="block">
378	Mobile Money Number
379	</label>
380	<Field
381	type="text"
382	id="mobileMoneyNumber"
383	name="mobileMoneyNumber"
384	className="outline-none p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
385	/>
386	</div>
387	<ErrorMessage
388	name="mobileMoneyNumber"
389	component="div"
390	className="text-red-500 text-xs mt-1 text-right"
391	/>
392	</div>
393	)}
394
395	{values.paymentMethod === "creditCard" && (	×
396	<>
397	<div className="flex mb-3 mt-[2rem] ">
398	<label htmlFor="cardNumber" className="block">
399	Card Number
400	</label>
401	<Field
402	type="text"
403	id="cardNumber"
404	name="cardNumber"
405	className="outline-none p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
406	/>
407	<ErrorMessage
408	name="cardNumber"
409	component="div"
410	className="text-red-500 text-xs mt-1"
411	/>
412	</div>
413	<div className="flex">
414	<label htmlFor="expiryDate" className="block mb-1">
415	Expiry Date
416	</label>
417	<Field
418	type="text"
419	id="expiryDate"
420	name="expiryDate"
421	placeholder="MM/YY"
422	className="outline-none mb-3 p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
423	/>
424	<ErrorMessage
425	name="expiryDate"
426	component="div"
427	className="text-red-500 text-xs mt-1"
428	/>
429	</div>
430	<div className="flex mb-3 ">
431	<label htmlFor="cvv" className="block">
432	CVV Code
433	</label>
434	<Field
435	type="text"
436	id="cvv"
437	name="cvv"
438	className="outline-none p-1 w-1/2 text-main-black-color text-sm rounded-[5px] shadow-[0_0_2px_rgba(0,0,0,0.9)] ml-auto"
439	/>
440	<ErrorMessage
441	name="cvv"
442	component="div"
443	className="text-red-500 text-xs mt-1"
444	/>
445	</div>
446	</>
447	)}
448	</div>
449	</div>
450
451	<div className="mt-8">
452	<Button
453	type="submit"
454	value={isSubmitting ? "Processing..." : "Place Order"}	×
455	disabled={isSubmitting}
456	/>
457	</div>
458	</div>
459	</div>
460	</Form>
461	)}
462	</Formik>
463	<ToastContainer />
464	</div>
465	);
466	};
467
468	export default Checkout;	1✔

atlp-rwanda / e-commerce-bitcrafters-fn / 8694a92c-2a29-4314-ad94-740437c55d5c

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