@tesouro/embedded-components-react 0.9.36 → 0.9.38

package/dist/experimental/ApprovalRequests.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
+import { PartialDeep } from 'type-fest';
 import { FallbackProps } from 'react-error-boundary';
 
 type AuthToken = string | undefined;
@@ -326,6 +327,7 @@ type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean
 type ClientOptions = {
     baseUrl: 'https://api.stage.tesouro.com' | 'https://api.sandbox.stage.tesouro.com' | 'https://api.stage.business-banking.app' | 'https://api.tesouro.com' | 'https://api.sandbox.tesouro.com' | 'https://api.business-banking.app' | (string & {});
 };
+type ApprovalRequestStatus = 'waiting' | 'approved' | 'rejected' | 'canceled';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -596,13 +598,38 @@ interface WidgetProviderProps extends WidgetProviderBaseProps {
     providerLabels?: Partial<WidgetProviderLabels>;
 }
 
+interface ApprovalRequestsScreenLabels {
+    columnInvoiceNumber: string;
+    columnIssueDate: string;
+    columnDueDate: string;
+    columnStatus: string;
+    columnAmount: string;
+    errorTitle: string;
+    errorDescription: string;
+    errorRetry: string;
+}
+
+interface ApprovalRequestsListLabels {
+    emptyTitle: string;
+    emptyDescription: string;
+    filterEmptyTitle: string;
+    filterEmptyDescription: string;
+    /** Shown in a cell whose value the request's payable does not carry. */
+    missingValue: string;
+    status: Record<ApprovalRequestStatus, string>;
+}
+
+interface ApprovalRequestsWidgetOwnProps {
+    screenLabels?: Partial<ApprovalRequestsScreenLabels>;
+    listLabels?: PartialDeep<ApprovalRequestsListLabels>;
+}
 /** Public props for {@link ApprovalRequestsWidget}. */
-type ApprovalRequestsWidgetProps = WidgetProviderProps;
+type ApprovalRequestsWidgetProps = WidgetProviderProps & ApprovalRequestsWidgetOwnProps;
 /**
  * Self-contained approval requests widget, a native port of Monite's approval
- * requests (FOPS-97). Intentionally unpublished: not exported from the package.
+ * requests (FOPS-97). Exported only from the package's `/experimental` entry.
  */
-declare function ApprovalRequestsWidget(widgetProviderProps: ApprovalRequestsWidgetProps): React.JSX.Element;
+declare function ApprovalRequestsWidget({ screenLabels, listLabels, ...widgetProviderProps }: ApprovalRequestsWidgetProps): React.JSX.Element;
 
 export { ApprovalRequestsWidget };
 export type { ApprovalRequestsWidgetProps };

package/dist/experimental/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
+import { PartialDeep } from 'type-fest';
 import { FallbackProps } from 'react-error-boundary';
 
 type AuthToken = string | undefined;
@@ -326,6 +327,7 @@ type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean
 type ClientOptions = {
     baseUrl: 'https://api.stage.tesouro.com' | 'https://api.sandbox.stage.tesouro.com' | 'https://api.stage.business-banking.app' | 'https://api.tesouro.com' | 'https://api.sandbox.tesouro.com' | 'https://api.business-banking.app' | (string & {});
 };
+type ApprovalRequestStatus = 'waiting' | 'approved' | 'rejected' | 'canceled';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -596,13 +598,38 @@ interface WidgetProviderProps extends WidgetProviderBaseProps {
     providerLabels?: Partial<WidgetProviderLabels>;
 }
 
+interface ApprovalRequestsScreenLabels {
+    columnInvoiceNumber: string;
+    columnIssueDate: string;
+    columnDueDate: string;
+    columnStatus: string;
+    columnAmount: string;
+    errorTitle: string;
+    errorDescription: string;
+    errorRetry: string;
+}
+
+interface ApprovalRequestsListLabels {
+    emptyTitle: string;
+    emptyDescription: string;
+    filterEmptyTitle: string;
+    filterEmptyDescription: string;
+    /** Shown in a cell whose value the request's payable does not carry. */
+    missingValue: string;
+    status: Record<ApprovalRequestStatus, string>;
+}
+
+interface ApprovalRequestsWidgetOwnProps {
+    screenLabels?: Partial<ApprovalRequestsScreenLabels>;
+    listLabels?: PartialDeep<ApprovalRequestsListLabels>;
+}
 /** Public props for {@link ApprovalRequestsWidget}. */
-type ApprovalRequestsWidgetProps = WidgetProviderProps;
+type ApprovalRequestsWidgetProps = WidgetProviderProps & ApprovalRequestsWidgetOwnProps;
 /**
  * Self-contained approval requests widget, a native port of Monite's approval
- * requests (FOPS-97). Intentionally unpublished: not exported from the package.
+ * requests (FOPS-97). Exported only from the package's `/experimental` entry.
  */
-declare function ApprovalRequestsWidget(widgetProviderProps: ApprovalRequestsWidgetProps): React.JSX.Element;
+declare function ApprovalRequestsWidget({ screenLabels, listLabels, ...widgetProviderProps }: ApprovalRequestsWidgetProps): React.JSX.Element;
 
 interface CheckAmountAndDetailScreenLabels {
     title: string;

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index.js

@@ -0,0 +1,8 @@
+import "../../../shared/data-access/dist/lib/useCurrentUserQuery.js";
+import "../../../shared/data-access/dist/index.js";
+import "./index2.js";
+import { useApprovalRequestsQuery as e } from "./index3.js";
+import "./index4.js";
+import "./index5.js";
+import "./index6.js";
+export { e as useApprovalRequestsQuery };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index2.js

@@ -0,0 +1 @@
+import "../../../shared/data-access/dist/index.js";

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index3.js

@@ -0,0 +1,72 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { getApprovalRequests as e, getPayables as t } from "../../../shared/data-access/dist/lib/rest/sdk.gen.js";
+import { getApprovalRequestsQueryKey as n } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as r } from "../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import { useEmbedApi as i } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as a } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../shared/data-access/dist/index.js";
+import { queryOptions as o, useQuery as s } from "@tanstack/react-query";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index3.js
+var c = "with-payables";
+async function l({ client: n, headers: r, query: i, signal: a }) {
+	let { data: o } = await e({
+		client: n,
+		headers: r,
+		query: i,
+		signal: a,
+		throwOnError: !0
+	}), s = [...new Set(o.data.map((e) => e.object_id))], c = /* @__PURE__ */ new Map();
+	if (s.length > 0) {
+		let { data: e } = await t({
+			client: n,
+			headers: r,
+			query: {
+				id__in: s,
+				limit: s.length
+			},
+			signal: a,
+			throwOnError: !0
+		});
+		for (let t of e.data) c.set(t.id, t);
+	}
+	return {
+		data: o.data.map((e) => ({
+			request: e,
+			payable: c.get(e.object_id)
+		})),
+		next_pagination_token: o.next_pagination_token,
+		prev_pagination_token: o.prev_pagination_token
+	};
+}
+function u({ enabled: e, ...t } = {}) {
+	let { client: u, organizationId: d, widgetToken: f, authEpoch: p, organizationStatus: m } = i(), h = a(d), g = {
+		...t,
+		sort: "updated_at",
+		order: "desc",
+		object_type: "payable"
+	};
+	return s({
+		...r(o({
+			queryKey: [...n({
+				client: u,
+				headers: h,
+				query: g
+			}), c],
+			queryFn: ({ signal: e }) => l({
+				client: u,
+				headers: h,
+				query: g,
+				signal: e
+			})
+		}), {
+			authEpoch: p,
+			organizationStatus: m
+		}, { carryWithinOrg: !0 }),
+		enabled: !!(d && f) && (e === !0 || e === void 0)
+	});
+}
+//#endregion
+export { u as useApprovalRequestsQuery };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index4.js

@@ -0,0 +1,7 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import "../../../shared/data-access/dist/index.js";
+import "./index2.js";
+import "@tanstack/react-query";

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index5.js

@@ -0,0 +1,7 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import "../../../shared/data-access/dist/index.js";
+import "./index2.js";
+import "@tanstack/react-query";

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index6.js

@@ -0,0 +1,6 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import "../../../shared/data-access/dist/index.js";
+import "@tanstack/react-query";

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/ApprovalRequestsWidget.js

@@ -2,25 +2,59 @@
 "use client";
 "use client";
 "use client";
-import { useAnalyticsTrack as e } from "../../../../../shared/feature/dist/lib/analytics/hooks.js";
-import { WidgetProvider as t } from "../../../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
+import { isOrganizationOnItsWay as e } from "../../../../../shared/data-access/dist/lib/organizationStatus.js";
+import { useEmbedApi as t } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../../../shared/data-access/dist/index.js";
+import { useAnalyticsTrack as n } from "../../../../../shared/feature/dist/lib/analytics/hooks.js";
+import { WidgetProvider as r } from "../../../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
+import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o, useWidgetInitStaleForToken as s } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
 import "../../../../../shared/feature/dist/index.js";
-import { ApprovalRequestsWidgetAnalyticsEvent as n, WIDGET_NAME as r } from "../analytics/events.js";
-import { useEffect as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { ApprovalRequestsWidgetAnalyticsEvent as c, WIDGET_NAME as l } from "../analytics/events.js";
+import { APPROVAL_REQUESTS_LIST_LABELS_EN as u } from "./labels.js";
+import { useApprovalRequestsTable as d } from "./useApprovalRequestsTable.js";
+import { ApprovalRequestsScreen as f } from "../../../../ui/dist/index3.js";
+import "../../../../ui/dist/index.js";
+import { useEffect as p, useMemo as m } from "react";
+import { jsx as h } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/ApprovalRequestsWidget.js
-function o() {
-	let t = e();
-	return i(() => {
-		t(n.Mounted);
-	}, [t]), null;
+function g({ screenLabels: r, listLabels: l }) {
+	let g = n();
+	p(() => {
+		g(c.Mounted);
+	}, [g]);
+	let _ = m(() => ({
+		...u,
+		...l,
+		status: {
+			...u.status,
+			...l?.status
+		}
+	}), [l]), v = d({ labels: _ }), { initResponse: y } = a(), b = o(), x = s(), S = i(), { organizationStatus: C } = t(), w = !!b && (!y || x);
+	return /* @__PURE__ */ h(f, {
+		rows: v.rows,
+		isLoading: v.isLoading || e(C) && v.rows.length === 0,
+		isError: w || v.isError,
+		pageSize: v.pageSize,
+		onPageSizeChange: v.onPageSizeChange,
+		pageSizeOptions: v.pageSizeOptions,
+		hasNextPage: v.hasNextPage,
+		hasPrevPage: v.hasPrevPage,
+		onNextPage: v.onNextPage,
+		onPrevPage: v.onPrevPage,
+		emptyState: v.emptyState,
+		onRetry: w ? S : v.onRetry,
+		labels: r
+	});
 }
-function s(e) {
-	return /* @__PURE__ */ a(t, {
-		...e,
-		widgetName: r,
-		children: /* @__PURE__ */ a(o, {})
+function _({ screenLabels: e, listLabels: t, ...n }) {
+	return /* @__PURE__ */ h(r, {
+		...n,
+		widgetName: l,
+		children: /* @__PURE__ */ h(g, {
+			screenLabels: e,
+			listLabels: t
+		})
 	});
 }
 //#endregion
-export { s as ApprovalRequestsWidget, s as default };
+export { _ as ApprovalRequestsWidget, _ as default };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/buildApprovalRequestRows.js

@@ -0,0 +1,29 @@
+import { createCurrencyFormatter as e } from "../../../../../shared/util/dist/lib/createCurrencyFormatter.js";
+import { formatCalendarDate as t } from "../../../../../shared/util/dist/lib/formatCalendarDate.js";
+import "../../../../../shared/util/dist/index.js";
+import { STATUS_TONE as n } from "./constants.js";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/buildApprovalRequestRows.js
+var r = { day: "2-digit" };
+function i(t, n) {
+	let r = new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: n
+	}).resolvedOptions().maximumFractionDigits ?? 2;
+	return e(n).format(t / 10 ** r);
+}
+function a(e, a) {
+	return e.map(({ request: e, payable: o }) => {
+		let s = o?.amount_to_pay, c = o?.currency;
+		return {
+			id: e.id,
+			invoiceNumber: o?.document_id || a.missingValue,
+			issueDate: t(o?.issued_at, r) || a.missingValue,
+			dueDate: t(o?.due_date, r) || a.missingValue,
+			statusLabel: a.status[e.status],
+			statusTone: n[e.status],
+			amount: typeof s == "number" && c ? i(s, c) : a.missingValue
+		};
+	});
+}
+//#endregion
+export { a as buildApprovalRequestRows };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/constants.js

@@ -0,0 +1,14 @@
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/constants.js
+var e = [
+	10,
+	25,
+	50,
+	100
+], t = {
+	waiting: "warning",
+	approved: "success",
+	rejected: "destructive",
+	canceled: "neutral"
+};
+//#endregion
+export { e as PAGE_SIZE_OPTIONS, t as STATUS_TONE };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/labels.js

@@ -0,0 +1,16 @@
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/labels.js
+var e = {
+	emptyTitle: "No approval requests",
+	emptyDescription: "You don't have any approval requests yet.",
+	filterEmptyTitle: "No approval requests found",
+	filterEmptyDescription: "Try adjusting your filter criteria.",
+	missingValue: "—",
+	status: {
+		waiting: "In approval",
+		approved: "Approved",
+		rejected: "Rejected",
+		canceled: "Canceled"
+	}
+};
+//#endregion
+export { e as APPROVAL_REQUESTS_LIST_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js

@@ -0,0 +1,53 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { useEmbedApi as e } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../../../shared/data-access/dist/index.js";
+import { PAGE_SIZE_OPTIONS as t } from "./constants.js";
+import { buildApprovalRequestRows as n } from "./buildApprovalRequestRows.js";
+import { useApprovalRequestsQuery as r } from "../../../../data-access/dist/index3.js";
+import "../../../../data-access/dist/index.js";
+import { useCallback as i, useMemo as a, useState as o } from "react";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js
+function s(e, t) {
+	return e ? {
+		title: t.filterEmptyTitle,
+		description: t.filterEmptyDescription
+	} : {
+		title: t.emptyTitle,
+		description: t.emptyDescription
+	};
+}
+function c({ labels: c }) {
+	let [l, u] = o(t[0]), [d, f] = o(), { organizationId: p } = e(), [m, h] = o(p);
+	p && p !== m && (h(p), f(void 0));
+	let g = r({
+		limit: l,
+		pagination_token: d
+	}), _ = a(() => n(g.data?.data ?? [], c), [g.data, c]), v = g.isPlaceholderData ? void 0 : g.data, y = v?.next_pagination_token ?? void 0, b = v?.prev_pagination_token ?? void 0, x = i((e) => {
+		u(e), f(void 0);
+	}, []), S = i(() => {
+		y && f(y);
+	}, [y]), C = i(() => {
+		b && f(b);
+	}, [b]), { refetch: w } = g, T = i(() => {
+		w();
+	}, [w]);
+	return {
+		rows: _,
+		isLoading: g.isLoading,
+		isError: g.isError,
+		pageSize: l,
+		pageSizeOptions: t,
+		onPageSizeChange: x,
+		hasNextPage: !!y,
+		hasPrevPage: !!b,
+		onNextPage: S,
+		onPrevPage: C,
+		emptyState: s(!1, c),
+		onRetry: T
+	};
+}
+//#endregion
+export { s as selectEmptyState, c as useApprovalRequestsTable };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index.js

@@ -0,0 +1,3 @@
+import "./index2.js";
+import { ApprovalRequestsScreen as e } from "./index3.js";
+export { e as ApprovalRequestsScreen };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js

@@ -0,0 +1,13 @@
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js
+var e = {
+	columnInvoiceNumber: "Invoice #",
+	columnIssueDate: "Issue date",
+	columnDueDate: "Due date",
+	columnStatus: "Status",
+	columnAmount: "Amount",
+	errorTitle: "Couldn't load approval requests",
+	errorDescription: "Try again.",
+	errorRetry: "Try again"
+};
+//#endregion
+export { e as APPROVAL_REQUESTS_SCREEN_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js

@@ -0,0 +1,71 @@
+import { Badge as e, DataTable as t } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { EmptyState as n } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as r } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { APPROVAL_REQUESTS_SCREEN_LABELS_EN as i } from "./index2.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js
+var o = [], s = () => void 0;
+function c({ rows: c, isLoading: l, isError: u, pageSize: d, onPageSizeChange: f, pageSizeOptions: p, hasNextPage: m, hasPrevPage: h, onNextPage: g, onPrevPage: _, emptyState: v, onRetry: y, labels: b }) {
+	let x = {
+		...i,
+		...b
+	}, S = [
+		{
+			accessorKey: "invoiceNumber",
+			header: x.columnInvoiceNumber
+		},
+		{
+			accessorKey: "issueDate",
+			header: x.columnIssueDate
+		},
+		{
+			accessorKey: "dueDate",
+			header: x.columnDueDate
+		},
+		{
+			accessorKey: "statusLabel",
+			header: x.columnStatus,
+			cell: ({ row: t }) => /* @__PURE__ */ a(e, {
+				tone: t.original.statusTone,
+				children: t.original.statusLabel
+			})
+		},
+		{
+			accessorKey: "amount",
+			header: () => /* @__PURE__ */ a("div", {
+				className: "ttw:text-right",
+				children: x.columnAmount
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ a("div", {
+				className: "ttw:text-right ttw:tabular-nums",
+				children: e.original.amount
+			})
+		}
+	];
+	return u ? /* @__PURE__ */ a(r, {
+		title: x.errorTitle,
+		description: x.errorDescription,
+		retryLabel: y ? x.errorRetry : void 0,
+		onRetry: y
+	}) : /* @__PURE__ */ a(t, {
+		columns: S,
+		data: c,
+		isLoading: l,
+		sorting: o,
+		onSortingChange: s,
+		pageSize: d,
+		onPageSizeChange: f,
+		pageSizeOptions: p,
+		hasNextPage: m,
+		hasPrevPage: h,
+		onNextPage: g,
+		onPrevPage: _,
+		children: /* @__PURE__ */ a(n, {
+			title: v.title,
+			description: v.description
+		})
+	});
+}
+//#endregion
+export { c as ApprovalRequestsScreen, c as default };

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.9.36", n = "7bb3fd2a132c9562a64433f1d06d432926bee75d", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.9.38", n = "c747cb8a674d8b9420e5f06a290af1a8ac7fd73c", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/dist/libs/tesouro-embedded-components-react/shared/util/dist/lib/formatCalendarDate.js

@@ -6,6 +6,7 @@ function n(n, r) {
 	return !i || !a || !o ? n : new Date(Date.UTC(i, a - 1, o)).toLocaleDateString(e, {
 		...t,
 		month: r?.month ?? t.month,
+		day: r?.day ?? t.day,
 		timeZone: "UTC"
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.9.36",
+  "version": "0.9.38",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [