From cb7834db5d0fe0360ec80ee44593bece163c4ed4 Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 9 Jul 2024 15:49:03 +0300 Subject: [PATCH 1/5] redesign for the checkout page --- package.json | 2 +- src/components/shop/CartDrawer.jsx | 4 +- src/pages/shop/OrderSummaryPage.jsx | 314 ++++++++----------------- src/pages/shop/PaymentMethd.jsx | 216 +++++++++++++++++ src/pages/shop/sections/ItemHeader.jsx | 5 +- 5 files changed, 319 insertions(+), 222 deletions(-) create mode 100644 src/pages/shop/PaymentMethd.jsx diff --git a/package.json b/package.json index 1743a34b..068ee13b 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 20816b19..51c9327e 100644 --- a/src/components/shop/CartDrawer.jsx +++ b/src/components/shop/CartDrawer.jsx @@ -80,7 +80,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..9cff2791 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -1,7 +1,9 @@ /* eslint-disable react/react-in-jsx-scope */ import { Dialog, Transition } from "@headlessui/react"; import { useState, Fragment } from "react"; +import { FaTag, 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 +13,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(); @@ -36,19 +26,14 @@ function Checkout() { 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,193 +45,121 @@ function Checkout() { setIsOpen(false); }; - console.log("products ", products); + const handleFormData = (data) => { + setFormData(data) + console.log(data); + } 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( ({ id, 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 +167,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 +180,7 @@ function Checkout() { leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -319,19 +197,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 +224,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..757fcaf3 --- /dev/null +++ b/src/pages/shop/PaymentMethd.jsx @@ -0,0 +1,216 @@ +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 + /> +
    +
    + + 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; diff --git a/src/pages/shop/sections/ItemHeader.jsx b/src/pages/shop/sections/ItemHeader.jsx index 6b0101cd..0208631f 100644 --- a/src/pages/shop/sections/ItemHeader.jsx +++ b/src/pages/shop/sections/ItemHeader.jsx @@ -1,6 +1,5 @@ import { FaCheck } from "react-icons/fa"; import { FaMagnifyingGlass } from "react-icons/fa6"; -import { PiShoppingCartLight } from "react-icons/pi"; import { Combobox, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; import { useLocation, useParams, Link } from "react-router-dom"; @@ -144,9 +143,7 @@ function ItemHeader({ show }) {
    )} - +
    ); From 9758a5c2133204beb307e1cf2231060077852e2d Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 9 Jul 2024 16:08:57 +0300 Subject: [PATCH 2/5] redesign for the checkout page --- src/pages/shop/OrderSummaryPage.jsx | 24 ++- src/pages/shop/PaymentMethod.jsx | 229 ++++++++++++++++++++++++++++ 2 files changed, 240 insertions(+), 13 deletions(-) create mode 100644 src/pages/shop/PaymentMethod.jsx diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx index 9cff2791..26e886fc 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -14,7 +14,7 @@ import useProductsInCart from "../../hooks/Queries/shop/useCartProducts"; import { useOrderSummary } from "../../hooks/Queries/shop/useOrdersList"; import ItemHeader from "./sections/ItemHeader"; import { GoBackBtn } from "@/components"; // Import the component -import PaymentMethd from "./PaymentMethd"; +import PaymentMethod from "./PaymentMethd"; function Checkout() { const { data: products, isSuccess } = useProductsInCart(); @@ -29,7 +29,6 @@ function Checkout() { const [formData, setFormData] = useState(null); const [address, setAddress] = useState(""); - const [isOpen, setIsOpen] = useState(false); const handleSubmit = (e) => { @@ -45,20 +44,17 @@ function Checkout() { setIsOpen(false); }; - const handleFormData = (data) => { - setFormData(data) - console.log(data); - } + const handleFormData = (data) => { + setFormData(data); + console.log(data); + }; return ( <> + setOpen((prev) => !prev)} />
    -
    - -
    -
    - + {/* order summary */}
    @@ -72,7 +68,6 @@ function Checkout() { id, product: { id: productId, image, name, price }, quantity, - }) => (
  • @@ -101,7 +96,10 @@ function Checkout() {

    • - diff --git a/src/pages/shop/PaymentMethod.jsx b/src/pages/shop/PaymentMethod.jsx new file mode 100644 index 00000000..11891074 --- /dev/null +++ b/src/pages/shop/PaymentMethod.jsx @@ -0,0 +1,229 @@ +/* eslint-disable react/react-in-jsx-scope */ +import { Dialog, Transition } from "@headlessui/react"; +import { useState, Fragment } from "react"; +import { FaTag, 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"; +import CartDrawer from "../../components/shop/CartDrawer"; +import Counter from "../../components/shop/Counter"; +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"; +import { GoBackBtn } from "@/components"; // Import the component +import PaymentMethd from "./PaymentMethd"; + +function Checkout() { + const { data: products, isSuccess } = useProductsInCart(); + const { + mutate: makeOrder, + isPending, + isSuccess: successfulOrder, + } = useMakeOrder(); + + const [open, setOpen] = useState(false); + const [count, setCount] = useState(1); + const [formData, setFormData] = useState(null); + const [address, setAddress] = useState(""); + + const [isOpen, setIsOpen] = useState(false); + + const handleSubmit = (e) => { + e.preventDefault(); + const payload = { + address, + phonenumber: phoneNumber, + }; + makeOrder(payload); + }; + + const closeModal = () => { + setIsOpen(false); + }; + + const handleFormData = (data) => { + setFormData(data); + console.log(data); + }; + + return ( + <> + setOpen((prev) => !prev)} /> +
    +
    + + + {/* order summary */} +
    +

    Your Cart

    +
    +
    +
      + {isSuccess && + products.cart_items?.map( + ({ + id, + product: { id: productId, image, name, price }, + quantity, + }) => ( +
    • +
      + +
      + +
      + + + {id} + +

      + {" "} + {name} +

      + +
      +

      Qty: {quantity}

      +

      + Ksh + {price} +

      +
      +
      + +
      • + ) + )} +
    +
    +
    +
    +

    Cart Subtotal

    +
    +
    +

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

    +
    +
    +
    +

    Discount Code

    + + +
    +
    +

    Promo Code

    + + +
    +
    +

    VAT(16%)

    +

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

    +
    +
    +

    Total

    +

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

    +
    +
    +
    +
    + + {/* Payment */} +
    + {successfulOrder && ( + + + +
    + + +
    +
    + + + + Order Confirmed! + +
    +

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

    +
    + +
    + +
    +     +     +
    +
    +
    +     + )} + + ); +} + +export default Checkout; From 48747a351fe39cc843572715c29d52dbbedd5056 Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 9 Jul 2024 16:42:18 +0300 Subject: [PATCH 3/5] typo minor bug --- src/pages/shop/OrderSummaryPage.jsx | 4 +- src/pages/shop/PaymentMethod.jsx | 229 ---------------------------- 2 files changed, 2 insertions(+), 231 deletions(-) delete mode 100644 src/pages/shop/PaymentMethod.jsx diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx index 26e886fc..11891074 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -14,7 +14,7 @@ import useProductsInCart from "../../hooks/Queries/shop/useCartProducts"; import { useOrderSummary } from "../../hooks/Queries/shop/useOrdersList"; import ItemHeader from "./sections/ItemHeader"; import { GoBackBtn } from "@/components"; // Import the component -import PaymentMethod from "./PaymentMethd"; +import PaymentMethd from "./PaymentMethd"; function Checkout() { const { data: products, isSuccess } = useProductsInCart(); @@ -54,7 +54,7 @@ function Checkout() { setOpen((prev) => !prev)} />
    - + {/* order summary */}
    diff --git a/src/pages/shop/PaymentMethod.jsx b/src/pages/shop/PaymentMethod.jsx deleted file mode 100644 index 11891074..00000000 --- a/src/pages/shop/PaymentMethod.jsx +++ /dev/null @@ -1,229 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -import { Dialog, Transition } from "@headlessui/react"; -import { useState, Fragment } from "react"; -import { FaTag, 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"; -import CartDrawer from "../../components/shop/CartDrawer"; -import Counter from "../../components/shop/Counter"; -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"; -import { GoBackBtn } from "@/components"; // Import the component -import PaymentMethd from "./PaymentMethd"; - -function Checkout() { - const { data: products, isSuccess } = useProductsInCart(); - const { - mutate: makeOrder, - isPending, - isSuccess: successfulOrder, - } = useMakeOrder(); - - const [open, setOpen] = useState(false); - const [count, setCount] = useState(1); - const [formData, setFormData] = useState(null); - const [address, setAddress] = useState(""); - - const [isOpen, setIsOpen] = useState(false); - - const handleSubmit = (e) => { - e.preventDefault(); - const payload = { - address, - phonenumber: phoneNumber, - }; - makeOrder(payload); - }; - - const closeModal = () => { - setIsOpen(false); - }; - - const handleFormData = (data) => { - setFormData(data); - console.log(data); - }; - - return ( - <> - setOpen((prev) => !prev)} /> -
    -
    - - - {/* order summary */} -
    -

    Your Cart

    -
    -
    -
      - {isSuccess && - products.cart_items?.map( - ({ - id, - product: { id: productId, image, name, price }, - quantity, - }) => ( -
    • -
      - -
      - -
      - - - {id} - -

      - {" "} - {name} -

      - -
      -

      Qty: {quantity}

      -

      - Ksh - {price} -

      -
      -
      - -
      • - ) - )} -
    -
    -
    -
    -

    Cart Subtotal

    -
    -
    -

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

    -
    -
    -
    -

    Discount Code

    - - -
    -
    -

    Promo Code

    - - -
    -
    -

    VAT(16%)

    -

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

    -
    -
    -

    Total

    -

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

    -
    -
    -
    -
    - - {/* Payment */} -
    - {successfulOrder && ( - - - -
    - - -
    -
    - - - - Order Confirmed! - -
    -

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

    -
    - -
    - -
    -     -     -
    -
    -
    -     - )} - - ); -} - -export default Checkout; From 5d79bb74914b1991dbf2b9c873599bb1ef9e098b Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 9 Jul 2024 17:25:37 +0300 Subject: [PATCH 4/5] icon fix --- src/pages/shop/OrderSummaryPage.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx index 11891074..541fb16a 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -1,7 +1,8 @@ /* eslint-disable react/react-in-jsx-scope */ import { Dialog, Transition } from "@headlessui/react"; import { useState, Fragment } from "react"; -import { FaTag, FaTrash } from "react-icons/fa"; +import { FaTrash } from "react-icons/fa"; +import { MdOutlineAddShoppingCart } from "react-icons/md"; import { LazyLoadImage } from "react-lazy-load-image-component"; import { Link } from "react-router-dom"; @@ -80,7 +81,7 @@ function Checkout() {
    - + {id}

    From a018ade7b76ebfe1abd1a7e9c40a453f011c4c00 Mon Sep 17 00:00:00 2001 From: ramo-dev Date: Tue, 9 Jul 2024 18:23:20 +0300 Subject: [PATCH 5/5] handleDelete cart items and bug fix --- src/pages/shop/OrderSummaryPage.jsx | 19 ++++++++++++++----- src/pages/shop/PaymentMethd.jsx | 1 + 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pages/shop/OrderSummaryPage.jsx b/src/pages/shop/OrderSummaryPage.jsx index 541fb16a..cc82af12 100644 --- a/src/pages/shop/OrderSummaryPage.jsx +++ b/src/pages/shop/OrderSummaryPage.jsx @@ -1,8 +1,9 @@ /* eslint-disable react/react-in-jsx-scope */ import { Dialog, Transition } from "@headlessui/react"; import { useState, Fragment } from "react"; -import { FaTrash } from "react-icons/fa"; -import { MdOutlineAddShoppingCart } from "react-icons/md"; +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"; @@ -26,7 +27,7 @@ function Checkout() { } = useMakeOrder(); const [open, setOpen] = useState(false); - const [count, setCount] = useState(1); + const [formData, setFormData] = useState(null); const [address, setAddress] = useState(""); @@ -50,10 +51,17 @@ function Checkout() { console.log(data); }; + const handleDeleteItem = (productId) => { + + products.cart_items?.filter((item) => item.product.id !== productId); + + + }; + return ( <> setOpen((prev) => !prev)} /> -

    +
    @@ -81,7 +89,7 @@ function Checkout() {
    - + {id}

    @@ -100,6 +108,7 @@ function Checkout() { diff --git a/src/pages/shop/PaymentMethd.jsx b/src/pages/shop/PaymentMethd.jsx index 757fcaf3..c24fd5d6 100644 --- a/src/pages/shop/PaymentMethd.jsx +++ b/src/pages/shop/PaymentMethd.jsx @@ -158,6 +158,7 @@ function PaymentMethod({ handleSubmit, isPending, setForm }) { placeholder="Select Country" value={country} required + aria-label="selection" />