@orbe-agro/client-core 3.4.10 → 3.4.12

package/dist/lib/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.js

@@ -0,0 +1,196 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import "../../../../../components/ui/Card/index.js";
+import "../../../../../components/ui/Input/index.js";
+import "../../../../../components/ui/Select/index.js";
+import { Avatar as h } from "../../../../../components/ui/Avatar/index.js";
+import "../../../../../components/ui/Form/index.js";
+import C from "../../../../../components/shared/NumericInput.js";
+import { countryList as N } from "../../../../../constants/countries.constant.js";
+import { Controller as n } from "react-hook-form";
+import { components as g } from "react-select";
+import b from "../../../../../components/ui/Select/Option.js";
+import v from "../../../../../components/ui/Card/Card.js";
+import i from "../../../../../components/ui/Form/FormItem.js";
+import s from "../../../../../components/ui/Input/Input.js";
+import B from "../../../../../components/ui/Select/Select.js";
+const { Control: x } = g, L = (o) => /* @__PURE__ */ e(
+  b,
+  {
+    ...o,
+    customLabel: (a) => /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          shape: "circle",
+          size: 20,
+          src: `/img/countries/${a.value}.png`
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: a.dialCode })
+    ] })
+  }
+), w = ({ children: o, ...a }) => {
+  const t = a.getValue()[0];
+  return /* @__PURE__ */ r(x, { ...a, children: [
+    t && /* @__PURE__ */ e(
+      h,
+      {
+        className: "ltr:ml-4 rtl:mr-4",
+        shape: "circle",
+        size: 20,
+        src: `/img/countries/${t.value}.png`
+      }
+    ),
+    o
+  ] });
+}, k = ({
+  control: o,
+  errors: a
+}) => {
+  var d, c, p, u;
+  const t = f(() => JSON.parse(
+    JSON.stringify(N)
+  ).map((m) => (m.label = m.dialCode, m)), []);
+  return /* @__PURE__ */ r(v, { id: "customerDetails", children: [
+    /* @__PURE__ */ e("h4", { className: "mb-6", children: "Customer details" }),
+    /* @__PURE__ */ r("div", { className: "grid md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          label: "First Name",
+          invalid: !!a.firstName,
+          errorMessage: (d = a.firstName) == null ? void 0 : d.message,
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              name: "firstName",
+              control: o,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                s,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "First Name",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          label: "User Name",
+          invalid: !!a.lastName,
+          errorMessage: (c = a.lastName) == null ? void 0 : c.message,
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              name: "lastName",
+              control: o,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                s,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "Last Name",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      i,
+      {
+        label: "Email",
+        invalid: !!a.email,
+        errorMessage: (p = a.email) == null ? void 0 : p.message,
+        children: /* @__PURE__ */ e(
+          n,
+          {
+            name: "email",
+            control: o,
+            render: ({ field: l }) => /* @__PURE__ */ e(
+              s,
+              {
+                type: "email",
+                autoComplete: "off",
+                placeholder: "Email",
+                ...l
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "flex items-end gap-4 w-full", children: [
+      /* @__PURE__ */ r(
+        i,
+        {
+          invalid: !!a.phoneNumber || !!a.dialCode,
+          children: [
+            /* @__PURE__ */ e("label", { className: "form-label mb-2", children: "Phone number" }),
+            /* @__PURE__ */ e(
+              n,
+              {
+                name: "dialCode",
+                control: o,
+                render: ({ field: l }) => /* @__PURE__ */ e(
+                  B,
+                  {
+                    options: t,
+                    ...l,
+                    className: "w-[150px]",
+                    components: {
+                      Option: L,
+                      Control: w
+                    },
+                    placeholder: "",
+                    value: t.filter(
+                      (m) => m.dialCode === l.value
+                    ),
+                    onChange: (m) => l.onChange(m == null ? void 0 : m.dialCode)
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          className: "w-full",
+          invalid: !!a.phoneNumber || !!a.dialCode,
+          errorMessage: (u = a.phoneNumber) == null ? void 0 : u.message,
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              name: "phoneNumber",
+              control: o,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                C,
+                {
+                  autoComplete: "off",
+                  placeholder: "Phone Number",
+                  value: l.value,
+                  onChange: l.onChange,
+                  onBlur: l.onBlur
+                }
+              )
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  k as default
+};
+//# sourceMappingURL=CustomerDetailSection.js.map

package/dist/lib/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerDetailSection.js","sources":["../../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/CustomerDetailSection.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport Card from '@/components/ui/Card'\nimport Input from '@/components/ui/Input'\nimport Select, { Option as DefaultOption } from '@/components/ui/Select'\nimport Avatar from '@/components/ui/Avatar'\nimport { FormItem } from '@/components/ui/Form'\nimport NumericInput from '@/components/shared/NumericInput'\nimport { countryList } from '@/constants/countries.constant'\nimport { Controller } from 'react-hook-form'\nimport { components } from 'react-select'\nimport type { FormSectionBaseProps } from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\n\ntype CustomerDetailSectionProps = FormSectionBaseProps\n\ntype CountryOption = {\n    label: string\n    dialCode: string\n    value: string\n}\n\nconst { Control } = components\n\nconst CustomSelectOption = (props: OptionProps<CountryOption>) => {\n    return (\n        <DefaultOption<CountryOption>\n            {...props}\n            customLabel={(data) => (\n                <span className=\"flex items-center gap-2\">\n                    <Avatar\n                        shape=\"circle\"\n                        size={20}\n                        src={`/img/countries/${data.value}.png`}\n                    />\n                    <span>{data.dialCode}</span>\n                </span>\n            )}\n        />\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<CountryOption>) => {\n    const selected = props.getValue()[0]\n    return (\n        <Control {...props}>\n            {selected && (\n                <Avatar\n                    className=\"ltr:ml-4 rtl:mr-4\"\n                    shape=\"circle\"\n                    size={20}\n                    src={`/img/countries/${selected.value}.png`}\n                />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst CustomerDetailSection = ({\n    control,\n    errors,\n}: CustomerDetailSectionProps) => {\n    const dialCodeList = useMemo(() => {\n        const newCountryList: Array<CountryOption> = JSON.parse(\n            JSON.stringify(countryList),\n        )\n\n        return newCountryList.map((country) => {\n            country.label = country.dialCode\n            return country\n        })\n    }, [])\n\n    return (\n        <Card id=\"customerDetails\">\n            <h4 className=\"mb-6\">Customer details</h4>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n                <FormItem\n                    label=\"First Name\"\n                    invalid={Boolean(errors.firstName)}\n                    errorMessage={errors.firstName?.message}\n                >\n                    <Controller\n                        name=\"firstName\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"First Name\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"User Name\"\n                    invalid={Boolean(errors.lastName)}\n                    errorMessage={errors.lastName?.message}\n                >\n                    <Controller\n                        name=\"lastName\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"Last Name\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n            </div>\n            <FormItem\n                label=\"Email\"\n                invalid={Boolean(errors.email)}\n                errorMessage={errors.email?.message}\n            >\n                <Controller\n                    name=\"email\"\n                    control={control}\n                    render={({ field }) => (\n                        <Input\n                            type=\"email\"\n                            autoComplete=\"off\"\n                            placeholder=\"Email\"\n                            {...field}\n                        />\n                    )}\n                />\n            </FormItem>\n            <div className=\"flex items-end gap-4 w-full\">\n                <FormItem\n                    invalid={\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\n                    }\n                >\n                    <label className=\"form-label mb-2\">Phone number</label>\n                    <Controller\n                        name=\"dialCode\"\n                        control={control}\n                        render={({ field }) => (\n                            <Select<CountryOption>\n                                options={dialCodeList}\n                                {...field}\n                                className=\"w-[150px]\"\n                                components={{\n                                    Option: CustomSelectOption,\n                                    Control: CustomControl,\n                                }}\n                                placeholder=\"\"\n                                value={dialCodeList.filter(\n                                    (option) => option.dialCode === field.value,\n                                )}\n                                onChange={(option) =>\n                                    field.onChange(option?.dialCode)\n                                }\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    className=\"w-full\"\n                    invalid={\n                        Boolean(errors.phoneNumber) || Boolean(errors.dialCode)\n                    }\n                    errorMessage={errors.phoneNumber?.message}\n                >\n                    <Controller\n                        name=\"phoneNumber\"\n                        control={control}\n                        render={({ field }) => (\n                            <NumericInput\n                                autoComplete=\"off\"\n                                placeholder=\"Phone Number\"\n                                value={field.value}\n                                onChange={field.onChange}\n                                onBlur={field.onBlur}\n                            />\n                        )}\n                    />\n                </FormItem>\n            </div>\n        </Card>\n    )\n}\n\nexport default CustomerDetailSection\n"],"names":["Control","components","CustomSelectOption","props","jsx","DefaultOption","data","jsxs","Avatar","CustomControl","children","selected","CustomerDetailSection","control","errors","dialCodeList","useMemo","countryList","country","Card","FormItem","_a","Controller","field","Input","_b","_c","Select","option","_d","NumericInput"],"mappings":"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"}

package/dist/lib/@ecme/views/concepts/orders/OrderForm/components/Navigator.js

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Avatar as t } from "../../../../../components/ui/Avatar/index.js";
+import { Link as i } from "react-scroll";
+import { TbPackage as o, TbUserSquare as s, TbMapPin as n, TbCreditCard as l } from "react-icons/tb";
+const c = [
+  {
+    label: "Select products",
+    description: "Add product to purchase list.",
+    link: "selectProducts",
+    icon: /* @__PURE__ */ e(o, {})
+  },
+  {
+    label: "Customer details",
+    description: "Enter customer information like name, email & phone number.",
+    link: "customerDetails",
+    icon: /* @__PURE__ */ e(s, {})
+  },
+  {
+    label: "Address Information",
+    description: "Provide shipping address details.",
+    link: "addressInformation",
+    icon: /* @__PURE__ */ e(n, {})
+  },
+  {
+    label: "Payment",
+    description: "Enter payment method and details to complete the transaction.",
+    link: "payment",
+    icon: /* @__PURE__ */ e(l, {})
+  }
+], b = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c.map((r) => /* @__PURE__ */ e(
+  i,
+  {
+    activeClass: "bg-gray-100 dark:bg-gray-700 active",
+    className: "cursor-pointer p-4 rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-700",
+    to: r.link,
+    spy: !0,
+    smooth: !0,
+    duration: 500,
+    offset: -80,
+    children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          icon: r.icon,
+          className: "bg-gray-100 dark:bg-gray-700 group-hover:bg-white group-[.active]:bg-white dark:group-hover:bg-gray-800 dark:group-[.active]:bg-gray-800 heading-text "
+        }
+      ),
+      /* @__PURE__ */ a("span", { className: "flex flex-col flex-1", children: [
+        /* @__PURE__ */ e("span", { className: "heading-text font-bold", children: r.label }),
+        /* @__PURE__ */ e("span", { children: r.description })
+      ] })
+    ] })
+  },
+  r.label
+)) });
+export {
+  b as default
+};
+//# sourceMappingURL=Navigator.js.map

package/dist/lib/@ecme/views/concepts/orders/OrderForm/components/Navigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigator.js","sources":["../../../../../../../../lib/@ecme/views/concepts/orders/OrderForm/components/Navigator.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\n// eslint-disable-next-line import/named\nimport { Link } from 'react-scroll'\nimport { TbPackage, TbUserSquare, TbMapPin, TbCreditCard } from 'react-icons/tb'\n\nconst navigationList = [\n    {\n        label: 'Select products',\n        description: 'Add product to purchase list.',\n        link: 'selectProducts',\n        icon: <TbPackage />,\n    },\n    {\n        label: 'Customer details',\n        description:\n            'Enter customer information like name, email & phone number.',\n        link: 'customerDetails',\n        icon: <TbUserSquare />,\n    },\n    {\n        label: 'Address Information',\n        description: 'Provide shipping address details.',\n        link: 'addressInformation',\n        icon: <TbMapPin />,\n    },\n    {\n        label: 'Payment',\n        description:\n            'Enter payment method and details to complete the transaction.',\n        link: 'payment',\n        icon: <TbCreditCard />,\n    },\n]\n\nconst Navigator = () => {\n    return (\n        <div className=\"flex flex-col gap-2\">\n            {navigationList.map((nav) => (\n                <Link\n                    key={nav.label}\n                    activeClass=\"bg-gray-100 dark:bg-gray-700 active\"\n                    className=\"cursor-pointer p-4 rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-700\"\n                    to={nav.link}\n                    spy={true}\n                    smooth={true}\n                    duration={500}\n                    offset={-80}\n                >\n                    <span className=\"flex items-center gap-2\">\n                        <Avatar\n                            icon={nav.icon}\n                            className=\"bg-gray-100 dark:bg-gray-700 group-hover:bg-white group-[.active]:bg-white dark:group-hover:bg-gray-800 dark:group-[.active]:bg-gray-800 heading-text \"\n                        />\n                        <span className=\"flex flex-col flex-1\">\n                            <span className=\"heading-text font-bold\">\n                                {nav.label}\n                            </span>\n                            <span>{nav.description}</span>\n                        </span>\n                    </span>\n                </Link>\n            ))}\n        </div>\n    )\n}\n\nexport default Navigator\n"],"names":["navigationList","TbPackage","TbUserSquare","TbMapPin","TbCreditCard","Navigator","nav","jsx","Link","jsxs","Avatar"],"mappings":";;;;AAKA,MAAMA,IAAiB;AAAA,EACnB;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAU,CAAA,CAAA;AAAA,EACrB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAa,CAAA,CAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,wBAAOC,GAAS,CAAA,CAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACI,OAAO;AAAA,IACP,aACI;AAAA,IACJ,MAAM;AAAA,IACN,wBAAOC,GAAa,CAAA,CAAA;AAAA,EAAA;AAE5B,GAEMC,IAAY,wBAET,OAAI,EAAA,WAAU,uBACV,UAAeL,EAAA,IAAI,CAACM,MACjB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IAEG,aAAY;AAAA,IACZ,WAAU;AAAA,IACV,IAAIF,EAAI;AAAA,IACR,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,UAAA,gBAAAG,EAAC,QAAK,EAAA,WAAU,2BACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAMJ,EAAI;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MACd;AAAA,MACA,gBAAAG,EAAC,QAAK,EAAA,WAAU,wBACZ,UAAA;AAAA,QAAA,gBAAAF,EAAC,QAAK,EAAA,WAAU,0BACX,UAAAD,EAAI,OACT;AAAA,QACA,gBAAAC,EAAC,QAAM,EAAA,UAAAD,EAAI,YAAY,CAAA;AAAA,MAAA,EAC3B,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA;AAAA,EApBKA,EAAI;AAsBhB,CAAA,GACL;"}

package/dist/lib/@ecme/views/concepts/orders/OrderForm/components/PaymentMethodSection.js

@@ -0,0 +1,348 @@
+import { jsx as e, jsxs as c, Fragment as d } from "react/jsx-runtime";
+import "../../../../../components/ui/Card/index.js";
+import "../../../../../components/ui/Input/index.js";
+import "../../../../../components/ui/Select/index.js";
+import "../../../../../components/ui/Form/index.js";
+import k from "../../../../../components/shared/CustomFormatInput.js";
+import v from "../../../../../components/shared/PatternInput.js";
+import { Controller as o } from "react-hook-form";
+import { TbCreditCard as A, TbBrandPaypal as E, TbBuildingBank as I } from "react-icons/tb";
+import { components as H } from "react-select";
+import O from "../../../../../components/ui/Select/Option.js";
+import V from "../../../../../components/ui/Card/Card.js";
+import m from "../../../../../components/ui/Form/FormItem.js";
+import F from "../../../../../components/ui/Select/Select.js";
+import i from "../../../../../components/ui/Input/Input.js";
+const x = [
+  {
+    label: "Credit/Debit card",
+    value: "creditOrDebitCard",
+    icon: /* @__PURE__ */ e(A, {})
+  },
+  { label: "Paypal", value: "paypal", icon: /* @__PURE__ */ e(E, {}) },
+  { label: "Bank transfer", value: "bankTransfer", icon: /* @__PURE__ */ e(I, {}) }
+];
+function M(n, a) {
+  return n.length === 1 && n[0] > a[0] && (n = "0" + n), n.length === 2 && (Number(n) === 0 ? n = "01" : n > a && (n = a)), n;
+}
+function P(n) {
+  const a = M(n.substring(0, 2), "12"), r = M(n.substring(2, 4), "31");
+  return a + (r.length ? "/" + r : "");
+}
+const { Control: T } = H, D = (n) => /* @__PURE__ */ e(
+  O,
+  {
+    ...n,
+    customLabel: (a, r) => /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "text-xl", children: a.icon }),
+      /* @__PURE__ */ e("span", { children: r })
+    ] })
+  }
+), S = ({
+  children: n,
+  ...a
+}) => {
+  const r = a.getValue()[0];
+  return /* @__PURE__ */ c(T, { ...a, children: [
+    r && /* @__PURE__ */ e("span", { className: "text-xl ltr:ml-4 rtl:mr-4 text-primary", children: r.icon }),
+    n
+  ] });
+}, _ = ({
+  control: n,
+  errors: a,
+  selectedPaymentMethod: r
+}) => {
+  var p, u, s, h, g, b, f, C, N, y, B;
+  return /* @__PURE__ */ c(V, { id: "payment", children: [
+    /* @__PURE__ */ e("h4", { className: "mb-6", children: "Payment" }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        label: "Payment method",
+        invalid: !!a.paymentMethod,
+        errorMessage: (p = a.paymentMethod) == null ? void 0 : p.message,
+        children: /* @__PURE__ */ e(
+          o,
+          {
+            name: "paymentMethod",
+            control: n,
+            render: ({ field: l }) => /* @__PURE__ */ e(
+              F,
+              {
+                options: x,
+                ...l,
+                components: {
+                  Option: D,
+                  Control: S
+                },
+                placeholder: "",
+                value: x.filter(
+                  (t) => t.value === l.value
+                ),
+                onChange: (t) => l.onChange(t == null ? void 0 : t.value)
+              }
+            )
+          }
+        )
+      }
+    ),
+    r === "creditOrDebitCard" && /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ e(
+        m,
+        {
+          label: "User Name",
+          invalid: !!a.cardHolderName,
+          errorMessage: (u = a.cardHolderName) == null ? void 0 : u.message,
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              name: "cardHolderName",
+              control: n,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                i,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "Card holder name",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        m,
+        {
+          label: "Credit card number",
+          invalid: !!a.ccNumber,
+          errorMessage: (s = a.ccNumber) == null ? void 0 : s.message,
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              name: "ccNumber",
+              control: n,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                v,
+                {
+                  placeholder: "•••• •••• •••• ••••",
+                  format: "#### #### #### ####",
+                  value: l.value,
+                  onValueChange: (t) => {
+                    l.onChange(t.value);
+                  }
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "Expiration date",
+            invalid: !!a.cardExpiry,
+            errorMessage: (h = a.cardExpiry) == null ? void 0 : h.message,
+            children: /* @__PURE__ */ e(
+              o,
+              {
+                name: "cardExpiry",
+                control: n,
+                render: ({ field: l }) => /* @__PURE__ */ e(
+                  k,
+                  {
+                    placeholder: "••/••",
+                    format: P,
+                    value: l.value,
+                    onValueChange: (t) => {
+                      l.onChange(t.value);
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "CVV",
+            invalid: !!a.code,
+            errorMessage: (g = a.code) == null ? void 0 : g.message,
+            children: /* @__PURE__ */ e(
+              o,
+              {
+                name: "code",
+                control: n,
+                render: ({ field: l }) => /* @__PURE__ */ e(
+                  v,
+                  {
+                    placeholder: "•••",
+                    format: "###",
+                    value: l.value,
+                    onValueChange: (t) => {
+                      l.onChange(t.value);
+                    }
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    r === "paypal" && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
+      m,
+      {
+        label: "Paypal email",
+        invalid: !!a.paypalEmail,
+        errorMessage: (b = a.paypalEmail) == null ? void 0 : b.message,
+        children: /* @__PURE__ */ e(
+          o,
+          {
+            name: "paypalEmail",
+            control: n,
+            render: ({ field: l }) => /* @__PURE__ */ e(
+              i,
+              {
+                type: "email",
+                autoComplete: "off",
+                placeholder: "Email",
+                ...l
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    r === "bankTransfer" && /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ e(
+        m,
+        {
+          label: "Bank name",
+          invalid: !!a.bankName,
+          errorMessage: (f = a.bankName) == null ? void 0 : f.message,
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              name: "bankName",
+              control: n,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                i,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "Bank name",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        m,
+        {
+          label: "Account number",
+          invalid: !!a.accountNumber,
+          errorMessage: (C = a.accountNumber) == null ? void 0 : C.message,
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              name: "accountNumber",
+              control: n,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                i,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "Account number",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        m,
+        {
+          label: "Account holder name",
+          invalid: !!a.accountHolderName,
+          errorMessage: (N = a.accountHolderName) == null ? void 0 : N.message,
+          children: /* @__PURE__ */ e(
+            o,
+            {
+              name: "accountHolderName",
+              control: n,
+              render: ({ field: l }) => /* @__PURE__ */ e(
+                i,
+                {
+                  type: "text",
+                  autoComplete: "off",
+                  placeholder: "Account holder name",
+                  ...l
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "IBAN",
+            invalid: !!a.IBAN,
+            errorMessage: (y = a.IBAN) == null ? void 0 : y.message,
+            children: /* @__PURE__ */ e(
+              o,
+              {
+                name: "IBAN",
+                control: n,
+                render: ({ field: l }) => /* @__PURE__ */ e(
+                  i,
+                  {
+                    type: "text",
+                    autoComplete: "off",
+                    placeholder: "IBAN",
+                    ...l
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "Reference number",
+            invalid: !!a.referenceNumber,
+            errorMessage: (B = a.referenceNumber) == null ? void 0 : B.message,
+            children: /* @__PURE__ */ e(
+              o,
+              {
+                name: "referenceNumber",
+                control: n,
+                render: ({ field: l }) => /* @__PURE__ */ e(
+                  i,
+                  {
+                    type: "text",
+                    autoComplete: "off",
+                    placeholder: "Reference number",
+                    ...l
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=PaymentMethodSection.js.map