@tesouro/embedded-components-react 0.2.27 → 0.2.28

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index378.js

@@ -1,36 +1,13 @@
-import { useMoniteContext as s } from "./index59.js";
-import { useLingui as n } from "@lingui/react";
-import { toast as r } from "react-hot-toast";
-const c = (i) => {
+import { useMoniteContext as o } from "./index59.js";
+const t = () => {
   const {
-    i18n: e
-  } = n(), {
-    api: a,
-    queryClient: o
-  } = s();
-  return a.finops.patchProductsId.useMutation({
-    path: {
-      product_id: i
-    }
-  }, {
-    onSuccess: async (t) => {
-      await a.finops.getProducts.invalidateQueries(o), await a.finops.getProductsId.invalidateQueries({
-        parameters: {
-          path: {
-            product_id: t.id
-          }
-        }
-      }, o), r.success(t.type === "product" ? e._("Product {name} was updated.", {
-        name: t.name
-      }) : e._("Service {name} was updated.", {
-        name: t.name
-      }));
-    },
+    api: n
+  } = o();
+  return n.finops.postFinancingInvoices.useMutation({}, {
     onError: () => {
-      r.error(e._("Failed to update"));
     }
   });
 };
 export {
-  c as useUpdateProduct
+  t as useFinanceAnInvoice
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index379.js

@@ -1,12 +1,64 @@
-import { jsx as a } from "@emotion/react/jsx-runtime";
-import { cn as o } from "./index102.js";
-import * as r from "@radix-ui/react-label";
-function l({
-  className: t,
-  ...e
-}) {
-  return /* @__PURE__ */ a(r.Root, { "data-slot": "label", className: o("ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm ttw:leading-none ttw:font-medium ttw:select-none ttw:group-data-[disabled=true]:pointer-events-none ttw:group-data-[disabled=true]:opacity-50 ttw:peer-disabled:cursor-not-allowed ttw:peer-disabled:opacity-50", t), ...e });
-}
+import { jsxs as t, jsx as e, Fragment as f } from "@emotion/react/jsx-runtime";
+import { FinanceBannerWrapper as h } from "./index366.js";
+import { FinanceMenuButtons as g } from "./index380.js";
+import { FinanceProgressBar as y } from "./index368.js";
+import { useMoniteContext as x } from "./index59.js";
+import { useCurrencies as v } from "./index60.js";
+import "react";
+import "./index94.js";
+import { useLingui as b } from "@lingui/react";
+import "react-dom";
+import "@mui/x-data-grid";
+import { useTheme as D, Box as a, Typography as r } from "@mui/material";
+const P = ({
+  offers: i = []
+}) => {
+  const {
+    componentSettings: m
+  } = x(), {
+    i18n: n
+  } = b(), u = D(), {
+    formatCurrencyToDisplay: o
+  } = v(), s = i?.[0]?.total_amount ?? 0, l = (i?.[0]?.status === "LATE" ? 0 : i?.[0]?.available_amount) ?? 0, p = l / s * 100, c = i?.[0]?.status !== "CLOSED" && i?.[0]?.status !== "DEFAULTED", d = () => {
+    switch (i?.[0]?.status) {
+      case "DEFAULTED":
+        return n._("Financing is blocked due to a violation of the agreed-upon terms. Please, contact the provider for further details.");
+      case "CLOSED":
+        return n._("Financing is not available for your business anymore. Please, contact the provider for further details.");
+      case "LATE":
+        return n._("Due to late payment your financing is currently on hold. Please, contact the provider for further details.");
+      default:
+        return n._("Your amount available for financing additional invoices.");
+    }
+  };
+  return !i || i.length === 0 ? null : /* @__PURE__ */ t(a, { maxWidth: "440px", width: "100%", children: [
+    /* @__PURE__ */ e(r, { variant: "subtitle1", sx: {
+      mb: 3,
+      display: "inline-block"
+    }, children: n._("My financing") }),
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(a, { sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1.25
+    }, children: [
+      /* @__PURE__ */ e(a, { children: c ? /* @__PURE__ */ t(f, { children: [
+        /* @__PURE__ */ e(r, { variant: "body1", children: n._("Remaining limit") }),
+        /* @__PURE__ */ t(a, { display: "flex", alignItems: "center", gap: 1, children: [
+          /* @__PURE__ */ e(r, { variant: "h2", fontSize: 24, lineHeight: "32px", children: o(l, "USD") }),
+          /* @__PURE__ */ t(r, { component: "span", variant: "subtitle1", fontSize: 18, color: u.palette.grey[400], children: [
+            "/ ",
+            o(s, "USD")
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ e(r, { variant: "h2", fontSize: 24, children: n._("Not available") }) }),
+      /* @__PURE__ */ t(a, { display: "flex", flexDirection: "column", gap: 1.5, children: [
+        c && /* @__PURE__ */ e(y, { progress: p }),
+        /* @__PURE__ */ e(r, { variant: "body1", fontSize: 14, lineHeight: "22px", fontWeight: 400, children: d() })
+      ] }),
+      m?.financing?.enableFinanceWidgetButton && /* @__PURE__ */ e(g, {})
+    ] }) })
+  ] });
+};
 export {
-  l as Label
+  P as FinanceLimits
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index38.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as b, Fragment as $ } from "@emotion/react/jsx-runtime";
 import { ScopedCssBaselineContainerClassName as z } from "./index106.js";
 import { InvoiceStatusChip as k } from "./index57.js";
-import { ReceivableFilters as B } from "./index175.js";
+import { ReceivableFilters as B } from "./index183.js";
 import "react-hot-toast";
 import { useMoniteContext as G } from "./index59.js";
 import { useLingui as A } from "@lingui/react";
 import { useState as c, useMemo as D } from "react";
-import { useReceivablesFilters as W } from "./index176.js";
+import { useReceivablesFilters as W } from "./index184.js";
 import "date-fns";
 import { useCurrencies as j } from "./index60.js";
 import "../../shared/data-access/dist/lib/rest/client/utils.gen.js";
@@ -19,18 +19,18 @@ import "tailwind-merge";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
 import "./index86.js";
-import { useGetReceivables as E } from "./index149.js";
+import { useGetReceivables as E } from "./index147.js";
 import "./index94.js";
 import { useAreCounterpartsLoading as V, defaultCounterpartColumnWidth as q, useAutosizeGridColumns as H } from "./index64.js";
 import "react-hook-form";
 import { MoniteScopedProviders as Q } from "./index85.js";
-import { ReceivableCursorFields as x } from "./index173.js";
-import { CounterpartNameCellById as Y } from "./index163.js";
-import { DataGridEmptyState as J } from "./index177.js";
-import { GetNoRowsOverlay as K } from "./index164.js";
+import { ReceivableCursorFields as x } from "./index181.js";
+import { CounterpartNameCellById as Y } from "./index160.js";
+import { DataGridEmptyState as J } from "./index185.js";
+import { GetNoRowsOverlay as K } from "./index161.js";
 import { TablePagination as U } from "./index88.js";
-import { classNames as X } from "./index178.js";
-import { hasSelectedText as Z } from "./index166.js";
+import { classNames as X } from "./index186.js";
+import { hasSelectedText as Z } from "./index163.js";
 import { Stack as ee, Typography as te, Box as oe } from "@mui/material";
 import { DataGrid as ie } from "@mui/x-data-grid";
 const De = (s) => /* @__PURE__ */ o(Q, { children: /* @__PURE__ */ o(ae, { ...s }) }), ae = ({

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index380.js

@@ -1,21 +1,26 @@
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { cn as i } from "./index102.js";
-import * as e from "@radix-ui/react-radio-group";
-import { CircleIcon as s } from "lucide-react";
-function w({
-  className: r,
-  ...a
-}) {
-  return /* @__PURE__ */ t(e.Root, { "data-slot": "radio-group", className: i("ttw:grid ttw:gap-3", r), ...a });
-}
-function c({
-  className: r,
-  dotClassName: a,
-  ...o
-}) {
-  return /* @__PURE__ */ t(e.Item, { "data-slot": "radio-group-item", className: i("ttw:border-input ttw:text-primary ttw:focus-visible:border-ring ttw:focus-visible:ring-ring/50 ttw:aria-invalid:ring-destructive/20 ttw:dark:aria-invalid:ring-destructive/40 ttw:aria-invalid:border-destructive ttw:dark:bg-input/30 ttw:aspect-square ttw:size-4 ttw:shrink-0 ttw:rounded-full ttw:border ttw:shadow-xs ttw:transition-[color,box-shadow] ttw:outline-none ttw:focus-visible:ring-[3px] ttw:disabled:cursor-not-allowed ttw:disabled:opacity-50", r), ...o, children: /* @__PURE__ */ t(e.Indicator, { "data-slot": "radio-group-indicator", className: "ttw:relative ttw:flex ttw:items-center ttw:justify-center", children: /* @__PURE__ */ t(s, { className: i("ttw:fill-primary ttw:absolute ttw:top-1/2 ttw:left-1/2 ttw:size-2 ttw:-translate-x-1/2 ttw:-translate-y-1/2", a) }) }) });
-}
+import { jsxs as a, jsx as n } from "@emotion/react/jsx-runtime";
+import { FinanceHowItWorks as s } from "./index375.js";
+import { useKanmonContext as c } from "./index58.js";
+import { Dialog as m } from "./index52.js";
+import { useLingui as l } from "@lingui/react";
+import { Stack as p, Button as r } from "@mui/material";
+import { useState as g } from "react";
+const w = () => {
+  const {
+    i18n: o
+  } = l(), {
+    startFinanceSession: t
+  } = c(), [e, i] = g(!1);
+  return /* @__PURE__ */ a(p, { direction: "row", gap: 1, alignItems: "center", children: [
+    /* @__PURE__ */ n(r, { variant: "text", onClick: () => i(!0), children: o._("How does invoice financing work?") }),
+    /* @__PURE__ */ n(r, { onClick: () => t(), variant: "contained", color: "primary", sx: {
+      px: 2.5,
+      py: 1.5,
+      height: 40
+    }, children: o._("Financing menu") }),
+    /* @__PURE__ */ n(m, { open: e, onClose: () => i(!1), alignDialog: "right", children: /* @__PURE__ */ n(s, {}) })
+  ] });
+};
 export {
-  w as RadioGroup,
-  c as RadioGroupItem
+  w as FinanceMenuButtons
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index381.js

@@ -1,30 +1,65 @@
-import { jsx as t, jsxs as e } from "@emotion/react/jsx-runtime";
-import { useLingui as m } from "@lingui/react";
-import { twMerge as d } from "tailwind-merge";
-const p = ({
-  isAllStatus: s,
-  data: w,
-  amountOfItems: i,
-  selected: l,
-  onClick: n,
-  formatAmount: a,
-  statusChip: r,
-  allItemsText: o
+import { jsxs as a, jsx as e } from "@emotion/react/jsx-runtime";
+import { Fragment as m } from "react";
+import { useLingui as h } from "@lingui/react";
+import _ from "@mui/icons-material/MonetizationOnOutlined";
+import { useTheme as g, Box as i, Typography as n, lighten as f, List as x, ListItem as l } from "@mui/material";
+const F = ({
+  offers: p
 }) => {
   const {
-    i18n: c
-  } = m();
-  return /* @__PURE__ */ t("button", { onClick: n, type: "button", className: d("ttw:flex ttw:flex-col ttw:gap-2 ttw:px-4 ttw:py-2 ttw:rounded-xl ttw:border ttw:w-42 ttw:shrink-0 ttw:text-left ttw:cursor-pointer ttw:transition-colors ttw:bg-white", l ? "ttw:border-indigo-700" : "ttw:border-white ttw:hover:border-indigo-700"), children: s ? /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col ttw:gap-2", children: [
-    /* @__PURE__ */ t("span", { className: "ttw:text-xs ttw:font-medium ttw:text-zinc-950", children: o ?? c._("All items") }),
-    /* @__PURE__ */ t("span", { className: "ttw:text-2xl ttw:font-medium ttw:text-zinc-950 ttw:leading-8 ttw:tabular-nums", children: w })
-  ] }) : /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col", children: [
-    /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2", children: [
-      r,
-      /* @__PURE__ */ t("span", { className: "ttw:text-xs ttw:font-medium ttw:leading-4.5 ttw:text-zinc-950 ttw:tabular-nums", children: i ?? 0 })
-    ] }),
-    /* @__PURE__ */ t("span", { className: "ttw:text-2xl ttw:font-medium ttw:text-zinc-950 ttw:leading-8 ttw:tabular-nums ttw:overflow-hidden ttw:whitespace-nowrap ttw:text-ellipsis", children: a(w) })
-  ] }) });
+    i18n: t
+  } = h(), d = g();
+  return !p || p.length === 0 ? null : /* @__PURE__ */ a(i, { width: "100%", children: [
+    /* @__PURE__ */ e(n, { variant: "subtitle1", sx: {
+      mb: 3,
+      display: "inline-block"
+    }, children: t._("Current offer") }),
+    /* @__PURE__ */ e(i, { sx: {
+      display: "flex",
+      gap: 2,
+      flexWrap: "wrap"
+    }, children: p.map((o, c) => o?.pricing_plans?.map((r, s) => /* @__PURE__ */ a(i, { width: 232, height: 148, px: 3, py: 2.5, sx: {
+      backgroundColor: d.palette.background.paper,
+      borderRadius: "16px",
+      border: `1px solid ${d.palette.divider}`
+    }, children: [
+      /* @__PURE__ */ a(i, { sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        mb: 2
+      }, children: [
+        /* @__PURE__ */ e(_, { sx: {
+          fontSize: 24,
+          color: f(d.palette.primary.main, 0.6)
+        } }),
+        /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 500, sx: {
+          flex: "1 1 0%",
+          width: "100%"
+        }, children: t._("Financing plan") })
+      ] }),
+      /* @__PURE__ */ e(x, { sx: {
+        p: 0
+      }, children: /* @__PURE__ */ a(m, { children: [
+        /* @__PURE__ */ e(l, { sx: {
+          p: 0
+        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("{itemAdvance_rate_percentage}% advance rate", {
+          itemAdvance_rate_percentage: r.advance_rate_percentage / 100
+        }) }) }),
+        /* @__PURE__ */ e(l, { sx: {
+          p: 0
+        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("Pay in {itemRepayment_duration_days} days", {
+          itemRepayment_duration_days: r.repayment_duration_days
+        }) }) }),
+        /* @__PURE__ */ e(l, { sx: {
+          p: 0
+        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("{itemFee_percentage}% fee", {
+          itemFee_percentage: r.fee_percentage / 100
+        }) }) })
+      ] }, r.advance_rate_percentage) })
+    ] }, `${o.available_amount}-${c}-${o.total_amount}-${s}`))) })
+  ] });
 };
 export {
-  p as StatusCard
+  F as FinanceOffers
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index382.js

@@ -1,129 +1,16 @@
-import { startOfDay as c, startOfYear as r, subYears as m, endOfYear as s, startOfQuarter as o, subQuarters as b, endOfQuarter as u, subDays as a, startOfMonth as l, subMonths as d, endOfMonth as n, startOfWeek as _, subWeeks as i, endOfWeek as f, endOfDay as y } from "date-fns";
-const v = [{
-  value: "today",
-  label: "Today",
-  group: "Current"
-}, {
-  value: "this_week",
-  label: "This week",
-  group: "Current"
-}, {
-  value: "this_month",
-  label: "This month",
-  group: "Current"
-}, {
-  value: "this_quarter",
-  label: "This quarter",
-  group: "Current"
-}, {
-  value: "this_year",
-  label: "This year",
-  group: "Current"
-}, {
-  value: "yesterday",
-  label: "Yesterday",
-  group: "Past"
-}, {
-  value: "last_week",
-  label: "Last week",
-  group: "Past"
-}, {
-  value: "last_month",
-  label: "Last month",
-  group: "Past"
-}, {
-  value: "last_30_days",
-  label: "Last 30 days",
-  group: "Past"
-}, {
-  value: "last_90_days",
-  label: "Last 90 days",
-  group: "Past"
-}, {
-  value: "last_quarter",
-  label: "Last quarter",
-  group: "Past"
-}, {
-  value: "last_year",
-  label: "Last year",
-  group: "Past"
-}];
-function g(h) {
-  const e = c(/* @__PURE__ */ new Date());
-  switch (h) {
-    case "today":
-      return {
-        from: e,
-        to: y(e)
-      };
-    case "this_week":
-      return {
-        from: _(e),
-        to: f(e)
-      };
-    case "this_month":
-      return {
-        from: l(e),
-        to: n(e)
-      };
-    case "this_quarter":
-      return {
-        from: o(e),
-        to: u(e)
-      };
-    case "this_year":
-      return {
-        from: r(e),
-        to: s(e)
-      };
-    case "yesterday": {
-      const t = a(e, 1);
-      return {
-        from: t,
-        to: y(t)
-      };
-    }
-    case "last_week": {
-      const t = _(i(e, 1));
-      return {
-        from: t,
-        to: f(t)
-      };
-    }
-    case "last_month": {
-      const t = l(d(e, 1));
-      return {
-        from: t,
-        to: n(t)
-      };
-    }
-    case "last_30_days":
-      return {
-        from: a(e, 30),
-        to: e
-      };
-    case "last_90_days":
-      return {
-        from: a(e, 90),
-        to: e
-      };
-    case "last_quarter": {
-      const t = o(b(e, 1));
-      return {
-        from: t,
-        to: u(t)
-      };
-    }
-    case "last_year": {
-      const t = r(m(e, 1));
-      return {
-        from: t,
-        to: s(t)
-      };
-    }
-  }
-}
+import { jsxs as r, jsx as o } from "@emotion/react/jsx-runtime";
+import { Box as f } from "@mui/material";
+import { FinanceLimits as e } from "./index379.js";
+import { FinanceOffers as i } from "./index381.js";
+const p = ({
+  offers: s
+}) => /* @__PURE__ */ r(f, { sx: {
+  display: "flex",
+  gap: 2
+}, children: [
+  /* @__PURE__ */ o(e, { offers: s }),
+  s?.[0]?.status === "CURRENT" && /* @__PURE__ */ o(i, { offers: s })
+] });
 export {
-  v as DATE_PRESETS,
-  g as resolveDatePreset
+  p as FinanceWidget
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index383.js

@@ -1,98 +1,13 @@
-import { jsx as n, jsxs as I } from "@emotion/react/jsx-runtime";
-import { useState as l, useEffect as w } from "react";
-import { toast as c } from "react-hot-toast";
-import { useRootElements as S } from "./index94.js";
-import "./index59.js";
-import "@tanstack/react-query";
-import "date-fns";
-import { useLingui as R } from "@lingui/react";
-import { usePaymentIntentById as $ } from "./index82.js";
-import { useCreatePayablePaymentLink as v, usePaymentLinkById as B } from "./index458.js";
-import { Modal as j, Box as x, CircularProgress as D } from "@mui/material";
-const G = (r, d, f, i) => {
-  const {
-    i18n: t
-  } = R(), {
-    root: k
-  } = S(), b = v(), [L, m] = l(!1), [u, o] = l(null), [g, p] = l(null), [_, P] = l(!1), {
-    data: s,
-    isSuccess: h
-  } = $(i ?? "");
-  w(() => {
-    h && s?.payment_link_id && i && p(s.payment_link_id);
-  }, [h, s, i]);
-  const {
-    data: e,
-    refetch: C,
-    isSuccess: y,
-    isLoading: E
-  } = B(g ?? "");
-  return w(() => {
-    y && e?.payment_intent?.status === "processing" && f?.(r ?? "", e?.payment_intent?.status ?? "");
-  }, [e, y, f, r]), {
-    handlePay: async () => {
-      if (!d) {
-        c.error(t._("Vendor not found. Please create a vendor first."));
-        return;
-      }
-      if (!_)
-        try {
-          if (E) {
-            c.error(t._("Payment link is still loading. Please wait a moment and try again."));
-            return;
-          }
-          if (!g || y && e?.payment_intent?.status !== "created") {
-            if (P(!0), !r) throw new Error("Payable ID is undefined");
-            const a = await b(
-              r,
-              d,
-              ["sepa_credit"],
-              60
-              // 60 days from now
-            );
-            if (a.payment_page_url)
-              p(a.id), o(a.payment_page_url);
-            else
-              throw p(null), o(null), new Error("No payment page URL in response");
-          } else if (e?.payment_page_url)
-            o(e.payment_page_url);
-          else
-            throw new Error("No payment page URL in existing payment link");
-          m(!0);
-        } catch (a) {
-          console.error("Payment link creation/retrieval error:", a), c.error(i && s?.status === "created" ? t._("Failed to retrieve payment link. Please try again.") : t._("Failed to create payment link. Please try again.")), m(!1);
-        } finally {
-          P(!1);
-        }
-    },
-    isCreatingPaymentLink: _,
-    modalComponent: /* @__PURE__ */ n(j, { open: L, onClose: async () => {
-      await C(), m(!1), o(null);
-    }, container: k, children: /* @__PURE__ */ n(x, { sx: {
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: "80%",
-      maxWidth: 600,
-      bgcolor: "background.paper",
-      boxShadow: 24,
-      p: 4,
-      borderRadius: 2
-    }, children: u ? /* @__PURE__ */ n("iframe", { src: u, title: "Payment Page", width: "100%", height: "400px", style: {
-      border: "none"
-    } }) : /* @__PURE__ */ I(x, { sx: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 2,
-      py: 4
-    }, children: [
-      /* @__PURE__ */ n(D, {}),
-      /* @__PURE__ */ n("p", { children: t._("Loading payment page...") })
-    ] }) }) })
-  };
-};
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { cn as i } from "./index102.js";
+import * as r from "@radix-ui/react-checkbox";
+import { CheckIcon as o } from "lucide-react";
+function c({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(r.Root, { "data-slot": "checkbox", className: i("ttw:peer ttw:border-input ttw:dark:bg-input/30 ttw:data-[state=checked]:bg-primary ttw:data-[state=checked]:text-primary-foreground ttw:dark:data-[state=checked]:bg-primary ttw:data-[state=checked]:border-primary ttw:focus-visible:border-ring ttw:focus-visible:ring-ring/50 ttw:aria-invalid:ring-destructive/20 ttw:dark:aria-invalid:ring-destructive/40 ttw:aria-invalid:border-destructive ttw:size-4 ttw:shrink-0 ttw:rounded-[4px] ttw:border ttw:shadow-xs ttw:transition-shadow ttw:outline-none ttw:focus-visible:ring-[3px] ttw:disabled:cursor-not-allowed ttw:disabled:opacity-50", e), ...a, children: /* @__PURE__ */ t(r.Indicator, { "data-slot": "checkbox-indicator", className: "ttw:flex ttw:items-center ttw:justify-center ttw:text-current ttw:transition-none", children: /* @__PURE__ */ t(o, { className: "ttw:size-3.5" }) }) });
+}
 export {
-  G as usePaymentHandler
+  c as Checkbox
 };