@tesouro/embedded-components-react 0.3.0 → 0.3.2

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

@@ -1,87 +1,102 @@
-import { Fragment as e } from "react";
+import { useMoniteContext as e } from "./index47.js";
 import { jsx as t, jsxs as n } from "@emotion/react/jsx-runtime";
-import { Box as r, List as i, ListItem as a, Typography as o, lighten as s, useTheme as c } from "@mui/material";
-import { useLingui as l } from "@lingui/react";
-import u from "@mui/icons-material/MonetizationOnOutlined";
+import { Box as r, List as i, ListItem as a, Typography as o } from "@mui/material";
+import { useLingui as s } from "@lingui/react";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index581.js
-var d = ({ offers: d }) => {
-	let { i18n: f } = l(), p = c();
-	return !d || d.length === 0 ? null : /* @__PURE__ */ n(r, {
-		width: "100%",
-		children: [/* @__PURE__ */ t(o, {
-			variant: "subtitle1",
-			sx: {
-				mb: 3,
-				display: "inline-block"
-			},
-			children: f._("Current offer")
-		}), /* @__PURE__ */ t(r, {
+var c = () => {
+	let { i18n: c } = s(), { componentSettings: l } = e(), u = [
+		{
+			id: 1,
+			title: c._("Create an invoice:"),
+			description: c._("If you applied for accounts receivable financing, issue an invoice and deliver it to your customer via email or any other channel."),
+			description2: c._("Or if you applied for accounts payable financing, upload/select the uploaded invoice you've received from your vendor."),
+			list: {
+				listTitle: c._("Invoices cannot be financed if:"),
+				listItems: [
+					{
+						id: "listItem-1",
+						text: c._("- they are due within 7 days.")
+					},
+					{
+						id: "listItem-2",
+						text: c._("- they are already overdue.")
+					},
+					{
+						id: "listItem-3",
+						text: c._("- the loan sum exceeds your remaining limit.")
+					}
+				]
+			}
+		},
+		{
+			id: 2,
+			title: c._("Select 'Get Paid Now':"),
+			description: c._("Access funding through the invoice list, within the invoice details, or the 'My Financing' tab. If approved, you will receive the invoice amount instantly, minus the fee associated with the payment offer chosen.")
+		},
+		{
+			id: 3,
+			title: c._("Pay out the financed sum:"),
+			description: c._("The full sum will be withdrawn from your bank account automatically on the date specified in the selected offer. You can also pay out the sum earlier via the 'Pay out' button.")
+		}
+	], d = l?.financing?.financeSteps ?? u;
+	return /* @__PURE__ */ n(r, {
+		px: 4,
+		py: 5,
+		children: [/* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(o, {
+			variant: "h3",
+			children: c._("How does invoice financing work?")
+		}) }), /* @__PURE__ */ t(i, {
 			sx: {
+				mt: 4,
 				display: "flex",
-				gap: 2,
-				flexWrap: "wrap"
+				flexDirection: "column",
+				gap: 3,
+				p: 0,
+				pl: 2
 			},
-			children: d.map((c, l) => c?.pricing_plans?.map((d, m) => /* @__PURE__ */ n(r, {
-				width: 232,
-				height: 148,
-				px: 3,
-				py: 2.5,
+			component: "ul",
+			children: d.map((e) => /* @__PURE__ */ n(a, {
+				component: "li",
 				sx: {
-					backgroundColor: p.palette.background.paper,
-					borderRadius: "16px",
-					border: `1px solid ${p.palette.divider}`
+					p: 0,
+					display: "list-item",
+					listStyleType: "disc",
+					maxWidth: 472,
+					mx: "auto"
 				},
-				children: [/* @__PURE__ */ n(r, {
-					sx: {
-						display: "flex",
-						alignItems: "center",
-						gap: 1,
-						mb: 2
-					},
-					children: [/* @__PURE__ */ t(u, { sx: {
-						fontSize: 24,
-						color: s(p.palette.primary.main, .6)
-					} }), /* @__PURE__ */ t(o, {
+				children: [
+					/* @__PURE__ */ n(o, {
+						variant: "body1",
+						fontWeight: 400,
+						mb: e.list || e.description2 ? 3 : 0,
+						children: [/* @__PURE__ */ n(o, {
+							component: "span",
+							variant: "body1",
+							fontWeight: 600,
+							children: [e.title, " "]
+						}), e.description]
+					}),
+					e.description2 && /* @__PURE__ */ t(o, {
+						variant: "body1",
+						fontWeight: 400,
+						mb: e.list ? 3 : 0,
+						children: e.description2
+					}),
+					e.list && /* @__PURE__ */ n(o, {
 						variant: "body1",
-						fontWeight: 500,
-						sx: {
-							flex: "1 1 0%",
-							width: "100%"
-						},
-						children: f._("Financing plan")
-					})]
-				}), /* @__PURE__ */ t(i, {
-					sx: { p: 0 },
-					children: /* @__PURE__ */ n(e, { children: [
-						/* @__PURE__ */ t(a, {
-							sx: { p: 0 },
-							children: /* @__PURE__ */ t(o, {
-								variant: "body1",
-								fontWeight: 400,
-								children: f._("{itemAdvance_rate_percentage}% advance rate", { itemAdvance_rate_percentage: d.advance_rate_percentage / 100 })
-							})
-						}),
-						/* @__PURE__ */ t(a, {
-							sx: { p: 0 },
-							children: /* @__PURE__ */ t(o, {
-								variant: "body1",
-								fontWeight: 400,
-								children: f._("Pay in {itemRepayment_duration_days} days", { itemRepayment_duration_days: d.repayment_duration_days })
-							})
-						}),
-						/* @__PURE__ */ t(a, {
-							sx: { p: 0 },
-							children: /* @__PURE__ */ t(o, {
-								variant: "body1",
-								fontWeight: 400,
-								children: f._("{itemFee_percentage}% fee", { itemFee_percentage: d.fee_percentage / 100 })
-							})
-						})
-					] }, d.advance_rate_percentage)
-				})]
-			}, `${c.available_amount}-${l}-${c.total_amount}-${m}`)))
+						fontWeight: 600,
+						children: [e.list.listTitle, e.list.listItems.map((e) => /* @__PURE__ */ t(o, {
+							variant: "body1",
+							component: "span",
+							display: "block",
+							fontWeight: 400,
+							children: e.text
+						}, e.id))]
+					})
+				]
+			}, e.id))
 		})]
 	});
 };
 //#endregion
-export { d as FinanceOffers };
+export { c as FinanceHowItWorks };

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

@@ -1,14 +1,66 @@
-import { FinanceLimits as e } from "./index580.js";
-import { FinanceOffers as t } from "./index581.js";
-import { jsx as n, jsxs as r } from "@emotion/react/jsx-runtime";
-import { Box as i } from "@mui/material";
+import { FinanceFaqWrapper as e } from "./index567.js";
+import { useKanmonContext as t } from "./index571.js";
+import { useFinancing as n } from "./index572.js";
+import "./index575.js";
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+import { Box as a, Button as o, Stack as s, Typography as c, lighten as l, useTheme as u } from "@mui/material";
+import { useLingui as d } from "@lingui/react";
+import f from "@mui/icons-material/Money";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index582.js
-var a = ({ offers: a }) => /* @__PURE__ */ r(i, {
-	sx: {
-		display: "flex",
-		gap: 2
-	},
-	children: [/* @__PURE__ */ n(e, { offers: a }), a?.[0]?.status === "CURRENT" && /* @__PURE__ */ n(t, { offers: a })]
-});
+var p = () => {
+	let { i18n: p } = d(), { startFinanceSession: m } = t(), h = u(), { isLoading: g, isEnabled: _ } = n();
+	return _ ? /* @__PURE__ */ i(s, {
+		gap: 4,
+		sx: { border: `1px solid ${h.palette.divider}` },
+		borderRadius: "16px",
+		p: 3,
+		children: [
+			/* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(a, {
+				sx: {
+					backgroundColor: l(h.palette.primary.main, .9),
+					borderRadius: "100%",
+					width: "40px",
+					height: "40px",
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					p: 2
+				},
+				children: /* @__PURE__ */ r(f, { sx: {
+					color: h.palette.primary.main,
+					width: 20,
+					height: 20
+				} })
+			}) }),
+			/* @__PURE__ */ i(s, {
+				gap: 1,
+				children: [/* @__PURE__ */ r(c, {
+					variant: "subtitle1",
+					children: p._("Invoice financing")
+				}), /* @__PURE__ */ r(c, {
+					variant: "body1",
+					fontWeight: 400,
+					children: p._("Apply for a monthly plan loans to manage your business more efficiently")
+				})]
+			}),
+			/* @__PURE__ */ i(s, {
+				direction: "row",
+				gap: 1,
+				alignItems: "center",
+				children: [/* @__PURE__ */ r(o, {
+					disabled: g,
+					onClick: () => m(),
+					variant: "outlined",
+					sx: { px: 2 },
+					children: p._("Apply for loans")
+				}), /* @__PURE__ */ r(e, { children: ({ openModal: e }) => /* @__PURE__ */ r(o, {
+					onClick: e,
+					variant: "text",
+					children: p._("Read more")
+				}) })]
+			})
+		]
+	}) : null;
+};
 //#endregion
-export { a as FinanceWidget };
+export { p as FinanceIntegrationCard };

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

@@ -1,26 +1,57 @@
-import { useGetFinanceOffers as e } from "./index563.js";
-import { useFinancing as t } from "./index566.js";
-import "./index569.js";
-import { FinancedInvoicesTable as n } from "./index574.js";
-import { FinanceWidget as r } from "./index582.js";
-import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
-import { CircularProgress as o, Stack as s } from "@mui/material";
+import { useMoniteContext as e } from "./index47.js";
+import { useCurrencies as t } from "./index63.js";
+import "./index217.js";
+import { Dialog as n } from "./index229.js";
+import "./index230.js";
+import { useGetFinancedInvoices as r } from "./index574.js";
+import "./index575.js";
+import { FinancedInvoiceStatusChip as i } from "./index578.js";
+import { FinanceDetails as a } from "./index579.js";
+import { useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+import { Box as u, Skeleton as d, Typography as f, useTheme as p } from "@mui/material";
+import { useLingui as m } from "@lingui/react";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index583.js
-var c = ({ onRowClick: c }) => {
-	let { isLoading: l, data: u } = e(), { isLoading: d, isEnabled: f } = t();
-	return d || l ? /* @__PURE__ */ i(o, {
-		color: "inherit",
-		size: 20
-	}) : f ? /* @__PURE__ */ a(s, {
-		mt: 4,
-		gap: 4,
-		px: 1.5,
-		height: "100%",
-		children: [u?.offers && u.offers.length > 0 && /* @__PURE__ */ i(r, { offers: u.offers }), /* @__PURE__ */ i(n, {
-			onRowClick: c,
-			offers: u?.offers
-		})]
-	}) : null;
+var h = ({ invoice: h, offers: g }) => {
+	let { i18n: _ } = m(), v = p(), { locale: y } = e(), [b, x] = o(!1), { formatCurrencyToDisplay: S } = t(), { isLoading: C, data: w } = r({
+		invoice_id: h.id,
+		type: "receivable"
+	}), T = w?.data?.[0] ?? null, E = y.dateFormat, D = T ? S(T.repayment_schedule?.repayment_amount ?? 0, h.currency) : "—", O = T?.repayment_schedule?.repayment_date ? _.date(T?.repayment_schedule?.repayment_date, E) : "—", k = T?.status;
+	return C ? /* @__PURE__ */ c(d, {
+		variant: "rounded",
+		height: 80
+	}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l(u, {
+		onClick: () => x(!0),
+		sx: {
+			borderRadius: "16px",
+			px: 3,
+			py: 2.5,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			border: `1px solid ${v.palette.divider}`,
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(f, {
+			variant: "subtitle2",
+			children: _._("Funding for {repaymentAmount}", { repaymentAmount: D })
+		}), /* @__PURE__ */ c(f, {
+			variant: "body1",
+			children: _._("Repayment on {repaymentDate}", { repaymentDate: O })
+		})] }), /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(i, {
+			icon: !0,
+			status: k ?? "DEFAULTED"
+		}) })]
+	}), /* @__PURE__ */ c(n, {
+		open: b,
+		onClose: () => x(!1),
+		alignDialog: "right",
+		children: /* @__PURE__ */ c(a, {
+			invoice: h,
+			offers: g?.offers,
+			financedInvoice: T
+		})
+	})] });
 };
 //#endregion
-export { c as FinanceTab };
+export { h as FinanceOverviewCard };

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

@@ -1,17 +1,94 @@
-import "./index559.js";
-import "./index560.js";
-import "./index561.js";
-import "./index562.js";
-import "./index570.js";
-import "./index576.js";
-import "./index572.js";
-import "./index573.js";
-import "./index577.js";
-import "./index578.js";
-import "./index574.js";
+import { FinanceBannerWrapper as e } from "./index565.js";
+import { useKanmonContext as t } from "./index571.js";
+import { useGetFinanceOffers as n } from "./index569.js";
+import { useFinancing as r } from "./index572.js";
+import { useFinanceAnInvoice as i } from "./index573.js";
+import { useGetFinancedInvoices as a } from "./index574.js";
 import "./index575.js";
-import "./index579.js";
-import "./index580.js";
-import "./index581.js";
-import "./index582.js";
-import "./index583.js";
+import { FinanceOverviewCard as o } from "./index583.js";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+import { Box as u, Button as d, Tooltip as f, Typography as p } from "@mui/material";
+import { useLingui as m } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index584.js
+var h = 5184e5, g = ({ invoice: g }) => {
+	let { i18n: _ } = m(), { startFinanceSession: v } = t(), [y, b] = s(!1), x = i(), { isLoading: S, data: C } = a({
+		invoice_id: g.id,
+		type: "receivable"
+	}), { isLoading: w, isEnabled: T, isServicing: E } = r(), { isLoading: D, data: O } = n(), k = !!C?.data?.find((e) => e?.invoice_id === g.id), A = w || S || D, j = ["issued", "partially_paid"].includes(g.status), M = g.due_date ? new Date(g.due_date).getTime() - ((/* @__PURE__ */ new Date()).getTime() + h) > 0 : !1;
+	return !T || !E ? null : k ? /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(o, {
+		invoice: g,
+		offers: O ?? null
+	}) }) : j && M ? /* @__PURE__ */ c(e, { children: /* @__PURE__ */ l(u, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: 2,
+			justifyContent: "space-between"
+		},
+		children: [/* @__PURE__ */ l(u, {
+			sx: { flex: "1 1 0%" },
+			children: [/* @__PURE__ */ c(p, {
+				variant: "subtitle2",
+				children: _._("Don't wait for your client to pay")
+			}), /* @__PURE__ */ l(p, {
+				variant: "body1",
+				children: [
+					_._("This invoice can be financed"),
+					".",
+					" ",
+					/* @__PURE__ */ c(f, {
+						arrow: !0,
+						title: _._("Invoices that are due within 7 days cannot be financed. Overdue invoices cannot be financed. The loan sum must be within your remaining limit."),
+						children: /* @__PURE__ */ c(p, {
+							variant: "body1",
+							sx: { textDecoration: "underline" },
+							component: "span",
+							children: _._("Why?")
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ c(d, {
+			onClick: async () => {
+				try {
+					b(!0), x.mutate({ invoices: [{
+						id: g.id,
+						type: "receivable"
+					}] }, {
+						onError: () => {
+							b(!1);
+						},
+						onSuccess: ({ session_token: e }) => {
+							v({
+								sessionToken: e,
+								component: "SESSION_INVOICE_FLOW_WITH_INVOICE_FILE"
+							}), b(!1);
+						}
+					});
+				} catch {
+					b(!1);
+				}
+			},
+			disabled: y || A,
+			color: "primary",
+			variant: "contained",
+			sx: {
+				px: 2.5,
+				py: 1.5
+			},
+			children: y ? _._("Loading...") : _._("Get paid now")
+		})]
+	}) }) : /* @__PURE__ */ c(e, { children: /* @__PURE__ */ l(u, {
+		sx: { flex: "1 1 0%" },
+		children: [/* @__PURE__ */ c(p, {
+			variant: "subtitle2",
+			children: _._("This invoice can't be financed")
+		}), /* @__PURE__ */ c(p, {
+			variant: "body1",
+			children: _._("It must be in the “Issued” or “Partially paid” statuses and have more than 7 days till overdue.")
+		})]
+	}) });
+};
+//#endregion
+export { g as FinanceInvoice };

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

@@ -1,5 +1,43 @@
-import "./index570.js";
-import "./index576.js";
-import "./index578.js";
-import "./index583.js";
-import "./index584.js";
+import { Dialog as e } from "./index229.js";
+import "./index230.js";
+import { useKanmonContext as t } from "./index571.js";
+import { FinanceHowItWorks as n } from "./index581.js";
+import { useState as r } from "react";
+import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+import { Button as o, Stack as s } from "@mui/material";
+import { useLingui as c } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index585.js
+var l = () => {
+	let { i18n: l } = c(), { startFinanceSession: u } = t(), [d, f] = r(!1);
+	return /* @__PURE__ */ a(s, {
+		direction: "row",
+		gap: 1,
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ i(o, {
+				variant: "text",
+				onClick: () => f(!0),
+				children: l._("How does invoice financing work?")
+			}),
+			/* @__PURE__ */ i(o, {
+				onClick: () => u(),
+				variant: "contained",
+				color: "primary",
+				sx: {
+					px: 2.5,
+					py: 1.5,
+					height: 40
+				},
+				children: l._("Financing menu")
+			}),
+			/* @__PURE__ */ i(e, {
+				open: d,
+				onClose: () => f(!1),
+				alignDialog: "right",
+				children: /* @__PURE__ */ i(n, {})
+			})
+		]
+	});
+};
+//#endregion
+export { l as FinanceMenuButtons };

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

@@ -1,24 +1,79 @@
-import { MoniteScopedProviders as e } from "./index209.js";
-import { PageHeader as t } from "./index332.js";
-import { FinanceIntegrationCard as n } from "./index576.js";
-import "./index585.js";
-import { Fragment as r, jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
-import { Box as o } from "@mui/material";
-import { useLingui as s } from "@lingui/react";
+import { useMoniteContext as e } from "./index47.js";
+import { useCurrencies as t } from "./index63.js";
+import "./index217.js";
+import { FinanceBannerWrapper as n } from "./index565.js";
+import { FinanceProgressBar as r } from "./index568.js";
+import { FinanceMenuButtons as i } from "./index585.js";
+import { Fragment as a, jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+import { Box as c, Typography as l, useTheme as u } from "@mui/material";
+import { useLingui as d } from "@lingui/react";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index586.js
-function c() {
-	return /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(l, {}) });
-}
-function l() {
-	let { i18n: e } = s();
-	return /* @__PURE__ */ a(o, { children: [/* @__PURE__ */ i(t, { title: /* @__PURE__ */ i(r, { children: e._("Integrations") }) }), /* @__PURE__ */ i(o, {
-		sx: {
-			display: "grid",
-			gridTemplateColumns: "minmax(360px, 480px) minmax(360px, 480px)",
-			gap: 2
-		},
-		children: /* @__PURE__ */ i(n, {})
-	})] });
-}
+var f = ({ offers: f = [] }) => {
+	let { componentSettings: p } = e(), { i18n: m } = d(), h = u(), { formatCurrencyToDisplay: g } = t(), _ = f?.[0]?.total_amount ?? 0, v = (f?.[0]?.status === "LATE" ? 0 : f?.[0]?.available_amount) ?? 0, y = v / _ * 100, b = f?.[0]?.status !== "CLOSED" && f?.[0]?.status !== "DEFAULTED";
+	return !f || f.length === 0 ? null : /* @__PURE__ */ s(c, {
+		maxWidth: "440px",
+		width: "100%",
+		children: [/* @__PURE__ */ o(l, {
+			variant: "subtitle1",
+			sx: {
+				mb: 3,
+				display: "inline-block"
+			},
+			children: m._("My financing")
+		}), /* @__PURE__ */ o(n, { children: /* @__PURE__ */ s(c, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.25
+			},
+			children: [
+				/* @__PURE__ */ o(c, { children: b ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(l, {
+					variant: "body1",
+					children: m._("Remaining limit")
+				}), /* @__PURE__ */ s(c, {
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					children: [/* @__PURE__ */ o(l, {
+						variant: "h2",
+						fontSize: 24,
+						lineHeight: "32px",
+						children: g(v, "USD")
+					}), /* @__PURE__ */ s(l, {
+						component: "span",
+						variant: "subtitle1",
+						fontSize: 18,
+						color: h.palette.grey[400],
+						children: ["/ ", g(_, "USD")]
+					})]
+				})] }) : /* @__PURE__ */ o(l, {
+					variant: "h2",
+					fontSize: 24,
+					children: m._("Not available")
+				}) }),
+				/* @__PURE__ */ s(c, {
+					display: "flex",
+					flexDirection: "column",
+					gap: 1.5,
+					children: [b && /* @__PURE__ */ o(r, { progress: y }), /* @__PURE__ */ o(l, {
+						variant: "body1",
+						fontSize: 14,
+						lineHeight: "22px",
+						fontWeight: 400,
+						children: (() => {
+							switch (f?.[0]?.status) {
+								case "DEFAULTED": return m._("Financing is blocked due to a violation of the agreed-upon terms. Please, contact the provider for further details.");
+								case "CLOSED": return m._("Financing is not available for your business anymore. Please, contact the provider for further details.");
+								case "LATE": return m._("Due to late payment your financing is currently on hold. Please, contact the provider for further details.");
+								default: return m._("Your amount available for financing additional invoices.");
+							}
+						})()
+					})]
+				}),
+				p?.financing?.enableFinanceWidgetButton && /* @__PURE__ */ o(i, {})
+			]
+		}) })]
+	});
+};
 //#endregion
-export { c as Integrations };
+export { f as FinanceLimits };