diff --git a/package.json b/package.json index f3597c93..23a03116 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@emailjs/browser": "^3.11.0", - "@headlessui/react": "^1.7.15", + "@headlessui/react": "^2.1.2", "@hookstate/core": "^4.0.1", "@tanstack/react-query": "^5.22.2", "@tanstack/react-query-devtools": "^5.24.0", diff --git a/src/components/shop/CartDrawer.jsx b/src/components/shop/CartDrawer.jsx index 7cc492f7..2575da7a 100644 --- a/src/components/shop/CartDrawer.jsx +++ b/src/components/shop/CartDrawer.jsx @@ -117,7 +117,9 @@ function CartDrawer({ open, setOpen }) { navigate("/shop/checkout"); // } }; - console.log("cartProducts: ", cartProducts); + + // query cart products + // console.log("cartProducts: ", cartProducts); return ( diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx index 07013940..cc82af12 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -1,7 +1,11 @@ /* eslint-disable react/react-in-jsx-scope */ import { Dialog, Transition } from "@headlessui/react"; import { useState, Fragment } from "react"; +import { CiShoppingTag } from "react-icons/ci"; +import { FaTrash } from "react-icons/fa"; + import { LazyLoadImage } from "react-lazy-load-image-component"; + import { Link } from "react-router-dom"; import Sample1 from "../../assets/images/shop-page/sample1.png"; import Sample2 from "../../assets/images/shop-page/sample2.png"; @@ -11,20 +15,8 @@ import useMakeOrder from "../../hooks/Mutations/shop/useMakeOrder"; import useProductsInCart from "../../hooks/Queries/shop/useCartProducts"; import { useOrderSummary } from "../../hooks/Queries/shop/useOrdersList"; import ItemHeader from "./sections/ItemHeader"; - -const steps = [ - { description: "Provide your MPESA mobile number", key: 1 }, - { - description: - "Click submit and a prompt will appear on your phone with a request to confirm transaction by providing your MPESA PIN", - key: 2, - }, - { - description: - "Once completed, you will receive the confirmation SMS for this transaction", - key: 3, - }, -]; +import { GoBackBtn } from "@/components"; // Import the component +import PaymentMethd from "./PaymentMethd"; function Checkout() { const { data: products, isSuccess } = useProductsInCart(); @@ -35,20 +27,14 @@ function Checkout() { } = useMakeOrder(); const [open, setOpen] = useState(false); - const [count, setCount] = useState(1); - const [email, setEmail] = useState(""); - const [name, setName] = useState(""); - const [county, setCounty] = useState(""); + + const [formData, setFormData] = useState(null); const [address, setAddress] = useState(""); - const [city, setCity] = useState(""); - const [postalCode, setPostalCode] = useState(""); - const [street, setStreet] = useState(""); - const [phoneNumber, setPhoneNumber] = useState(""); const [isOpen, setIsOpen] = useState(false); - // const { data: orderSummary, status } = useOrderSummary(); const handleSubmit = (e) => { + e.preventDefault(); const payload = { address, phonenumber: phoneNumber, @@ -60,131 +46,31 @@ function Checkout() { setIsOpen(false); }; - console.log("products ", products); + const handleFormData = (data) => { + setFormData(data); + console.log(data); + }; + + const handleDeleteItem = (productId) => { + + products.cart_items?.filter((item) => item.product.id !== productId); + + + }; return ( <> setOpen((prev) => !prev)} /> - -
+
- {/* form */} -
-

- Shipping Address -

-
-
-
- setEmail(e.target.value)} - /> -
-
- -
-
- setName(e.target.value)} - /> -
-
- -
-
- setCounty(e.target.value)} - /> -
-
- -
-
- setAddress(e.target.value)} - /> -
-
- -
-
- setCity(e.target.value)} - /> -
-
- setPostalCode(e.target.value)} - /> -
-
- -
-
- setStreet(e.target.value)} - /> -
-
- -
-
- setPhoneNumber(e.target.value)} - /> -
-
-
-
+ {/* order summary */} -
-

- Order Summary -

-
-
-
    +
    +

    Your Cart

    +
    +
    +
      {isSuccess && products.cart_items?.map( ({ @@ -192,61 +78,96 @@ function Checkout() { product: { id: productId, image, name, price }, quantity, }) => ( -
    • -
      - +
      +
      -
      +
      + + + {id} +

      {" "} {name}

      -

      - Ksh - {price} -

      - +
      +

      Qty: {quantity}

      +

      + Ksh + {price} +

      +
      +
      • ) )}
    -
    -
    -

    Subtotal

    -

    Shipping

    +
    +
    +

    Cart Subtotal

    -
    +

    Ksh {isSuccess && products.total_price}

    -

    - Ksh - {isSuccess && products.total_price * 0.1} -

    -
    -

    Total

    +
    +

    Discount Code

    + + +
    +
    +

    Promo Code

    + + +
    +
    +

    VAT(16%)

    +

    + Ksh {isSuccess && products.total_price * 0.16} +

    +
    +
    +

    Total

    Ksh{" "} {isSuccess && - products.total_price * 0.1 + products.total_price} + products.total_price * 0.16 + products.total_price}

    @@ -254,41 +175,6 @@ function Checkout() {
    {/* Payment */} -
    -

    - Payment -

    -

    Lipa na MPESA

    -

    Follow the steps below to complete payment

    - -
      - {steps.map(({ description, key }) => ( -
    1. - {key}.{description} -
      2. - ))} -
    - -

    Input your mpesa number

    -
    -
    - -
    -
    - -
    {successfulOrder && ( @@ -302,7 +188,7 @@ function Checkout() { leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -319,19 +205,26 @@ function Checkout() { - Payment Successful! + Order Confirmed! - -
    -

    - Ksh {products.total_price * 0.1 + products.total_price}{" "} +

    +

    + Your order has been successfully placed and paid for. + You will receive a confirmation message shortly.

    + +
    + +
    @@ -339,9 +232,6 @@ function Checkout() { )} - - {/* Cart Drawer */} - ); } diff --git a/src/pages/shop/PaymentMethd.jsx b/src/pages/shop/PaymentMethd.jsx new file mode 100644 index 00000000..c24fd5d6 --- /dev/null +++ b/src/pages/shop/PaymentMethd.jsx @@ -0,0 +1,217 @@ +import React, { useState } from "react"; +import { Disclosure, RadioGroup } from "@headlessui/react"; +import { IoChevronDownOutline, IoChevronUpOutline } from "react-icons/io5"; + +function PaymentMethod({ handleSubmit, isPending, setForm }) { + const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("card"); + const [name, setName] = useState(""); + const [cardNumber, setCardNumber] = useState(""); + const [expiryDate, setExpiryDate] = useState(""); + const [cvc, setCvc] = useState(""); + const [phoneNumber, setPhoneNumber] = useState(""); + const [country, setCountry] = useState(""); + const [postalAddress, setPostalAddress] = useState(""); + const [postalCode, setPostalCode] = useState(""); + const [city, setCity] = useState(""); + + const formObject = { + name, + cardNumber, + expiryDate, + cvc, + phoneNumber, + country, + postalAddress, + postalCode, + city, + }; + + const handleFormSubmit = (e) => { + e.preventDefault(); + setForm(formObject); + handleSubmit(); + }; + + return ( +
    +
    +

    Payment Information

    + + + {({ checked }) => ( + + {({ open }) => ( + <> + +
    + + Debit/Credit Card +
    + {open ? : } +     + +
    +
    + + setName(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Enter cardholder name" + value={name} + required + /> +
    +
    + + setCardNumber(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Enter card number" + value={cardNumber} + required + /> +
    +
    +
    + + setExpiryDate(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="MM/YY" + value={expiryDate} + required + /> +
    +
    + + setCvc(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="..." + value={cvc} + required + /> +
    +
    +
    +     + + )} +     + )} +     +
    + + {({ checked }) => ( + + {({ open }) => ( + <> + +
    + + Mpesa +
    + {open ? : } +     + +
    + + setPhoneNumber(e.target.value)} + type="tel" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Enter phone number" + value={phoneNumber} + required + /> +
    +     + + )} +     + )} +     +     + +
    + + {/* Shipping Information */} +
    +

    Shipping Information

    +
    +
    +
    + + setCountry(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Select Country" + value={country} + required + aria-label="selection" + /> +
    +
    + + setPhoneNumber(e.target.value)} + id="phone-number" + type="tel" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Enter Phone number" + value={phoneNumber} + required + /> +
    +
    +
    +
    + + setPostalAddress(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Postal Address e.g 123 ABC" + value={postalAddress} + required + /> +
    +
    + + setPostalCode(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="Postal code e.g 00100" + value={postalCode} + required + /> +
    +
    +
    + + setCity(e.target.value)} + type="text" + className="mt-1 block w-full rounded-md border-gray-300 py-2 px-3 border" + placeholder="City e.g Nairobi" + value={city} + required + /> +
    +
    +
    + ); +} + +export default PaymentMethod;