@tesouro/embedded-components-react 0.3.52 → 0.3.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -64
- package/dist/index.css +0 -6
- package/dist/index.d.ts +80 -26
- package/dist/index.js +45 -49
- package/dist/lib/CardDetailsWidget.d.ts +61 -1
- package/dist/lib/CardDetailsWidget.js +1 -1
- package/dist/lib/CreditCardsWidget.d.ts +78 -4
- package/dist/lib/DebitCardsWidget.d.ts +78 -4
- package/dist/lib/WidgetSuite.d.ts +78 -4
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index.js +7 -4
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index2.js +20 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index3.js +43 -6
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index4.js +40 -14
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index5.js +5 -26
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index6.js +4 -4
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index7.js +32 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index8.js +25 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index9.js +27 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index.js +2 -1
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js +1 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js +17 -160
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index7.js +107 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index8.js +188 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/index.js +4 -2
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js +137 -8
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardSuccessView.js +27 -2
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/FieldError.js +12 -1
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/labels.js +55 -0
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/validation.js +47 -0
- package/dist/libs/tesouro-embedded-components-react/cards-widget/feature/dist/index9.js +37 -36
- package/dist/libs/tesouro-embedded-components-react/create-card-widget/feature/dist/index.js +4 -4
- package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index22.js +1 -1
- package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index98.js +47 -29
- package/dist/libs/tesouro-embedded-components-react/shared/data-access/dist/index.js +22 -20
- package/dist/libs/tesouro-embedded-components-react/shared/data-access/dist/lib/isApiConflictError.js +7 -0
- package/dist/libs/tesouro-embedded-components-react/shared/data-access/dist/lib/isApiUnprocessableError.js +7 -0
- package/dist/libs/tesouro-embedded-components-react/shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js +246 -225
- package/dist/libs/tesouro-embedded-components-react/shared/data-access/dist/lib/rest/sdk.gen.js +170 -134
- package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js +1 -1
- package/package.json +27 -2
- package/dist/lib/CreateCardWidget.d.ts +0 -823
- package/dist/lib/CreateCardWidget.js +0 -5
- package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/PinField.js +0 -5
package/dist/libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index9.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
"use client";
|
|
4
|
+
"use client";
|
|
5
|
+
import { useEmbedApi as e } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
|
|
6
|
+
import { organizationHeaders as t } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
|
|
7
|
+
import { verifyDebitCardMutation as n } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
|
|
8
|
+
import "../../../shared/data-access/dist/index.js";
|
|
9
|
+
import { resyncOnConflict as r } from "./index3.js";
|
|
10
|
+
import { useMutation as i } from "@tanstack/react-query";
|
|
11
|
+
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/data-access/dist/index9.js
|
|
12
|
+
function a() {
|
|
13
|
+
let { client: a, organizationId: o } = e();
|
|
14
|
+
return i({
|
|
15
|
+
...n({
|
|
16
|
+
client: a,
|
|
17
|
+
headers: t(o)
|
|
18
|
+
}),
|
|
19
|
+
onError: r({
|
|
20
|
+
client: a,
|
|
21
|
+
organizationId: o,
|
|
22
|
+
program: "debit"
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
export { a as useVerifyDebitCardMutation };
|
package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js
CHANGED
|
@@ -4,6 +4,7 @@ import "../../../shared/feature/dist/index.js";
|
|
|
4
4
|
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js
|
|
5
5
|
var r = {
|
|
6
6
|
copySuccessToast: "Copied to clipboard",
|
|
7
|
+
activationConflictToast: "This card is no longer awaiting activation.",
|
|
7
8
|
revealNotPermittedDescription: "This card's details can't be shown for this session.",
|
|
8
9
|
programLabels: {
|
|
9
10
|
[e.Credit]: "Business credit",
|
package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js
CHANGED
|
@@ -1,165 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
|
|
6
|
-
import { EmbeddedToaster as t } from "../../../shared/ui/dist/lib/EmbeddedToaster.js";
|
|
7
|
-
import "../../../shared/ui/dist/index.js";
|
|
8
|
-
import { useAnalyticsTrack as n } from "../../../shared/feature/dist/lib/analytics/hooks.js";
|
|
9
|
-
import { WidgetProvider as r } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
|
|
10
|
-
import { useRefetchWidget as i, useWidgetError as a } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
|
|
11
|
-
import { CardProgram as o } from "../../../shared/feature/dist/lib/card/cardProgram.js";
|
|
1
|
+
import { hasAnyScope as e } from "../../../shared/data-access/dist/lib/hasAnyScope.js";
|
|
2
|
+
import { Scope as t } from "../../../shared/data-access/dist/lib/scopes.js";
|
|
3
|
+
import "../../../shared/data-access/dist/index.js";
|
|
4
|
+
import { CardProgram as n } from "../../../shared/feature/dist/lib/card/cardProgram.js";
|
|
12
5
|
import "../../../shared/feature/dist/index.js";
|
|
13
|
-
import { resolveCardDetailsFeatureLabels as s } from "./index5.js";
|
|
14
|
-
import { CardDetailsWidgetAnalyticsEvent as c, WIDGET_NAME as l } from "./index2.js";
|
|
15
|
-
import { copyTextToClipboard as u, formatCardNumber as d, formatExpirationDate as f } from "./index3.js";
|
|
16
|
-
import { CardProgramValidity as p, resolveCanRevealCredentials as m, resolveCardDetailsPanelState as h, resolveCardDetailsPresentation as ee, resolveCardDetailsRevealState as te, resolveCardProgramValidity as g } from "./index4.js";
|
|
17
|
-
import { useCreditCardDetailsQuery as _ } from "../../data-access/dist/index4.js";
|
|
18
|
-
import { useDebitCardCredentialsQuery as v } from "../../data-access/dist/index5.js";
|
|
19
|
-
import { useDebitCardDetailsQuery as y } from "../../data-access/dist/index6.js";
|
|
20
|
-
import "../../data-access/dist/index.js";
|
|
21
|
-
import { CardDetailsPanel as b } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
|
|
22
|
-
import "../../ui/dist/index.js";
|
|
23
|
-
import { useCallback as x, useEffect as S, useMemo as C, useState as ne } from "react";
|
|
24
|
-
import { Fragment as w, jsx as T, jsxs as re } from "react/jsx-runtime";
|
|
25
6
|
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}), z = y({
|
|
35
|
-
cardId: r,
|
|
36
|
-
enabled: L
|
|
37
|
-
}), { data: B, isError: V, isNotFound: H, refetch: U } = I ? R : z, W = h({
|
|
38
|
-
programValidity: F,
|
|
39
|
-
isNotFound: H,
|
|
40
|
-
isError: !!M || V,
|
|
41
|
-
hasCard: !!B
|
|
42
|
-
});
|
|
43
|
-
S(() => {
|
|
44
|
-
if (F === p.Supported) return;
|
|
45
|
-
let e = `"${o.Credit}" or "${o.Debit}"`;
|
|
46
|
-
console.error(F === p.Missing ? `[CardDetailsWidget] cardProgram is required and was not set. Pass ${e} — it selects which card program to read, so there is no default. No card was fetched.` : `[CardDetailsWidget] cardProgram must be ${e}, received ${JSON.stringify(l)}. No card was fetched.`);
|
|
47
|
-
}, [l, F]);
|
|
48
|
-
let [G, K] = ne(), q = G === r;
|
|
49
|
-
S(() => {
|
|
50
|
-
K(void 0);
|
|
51
|
-
}, [r]);
|
|
52
|
-
let J = m({
|
|
53
|
-
panelState: W,
|
|
54
|
-
cardProgram: l,
|
|
55
|
-
cardStatus: B?.cardStatus
|
|
56
|
-
});
|
|
57
|
-
S(() => {
|
|
58
|
-
q && !J && K(void 0);
|
|
59
|
-
}, [q, J]);
|
|
60
|
-
let Y = v({
|
|
61
|
-
cardId: r,
|
|
62
|
-
enabled: J && q
|
|
63
|
-
}), X = te({
|
|
64
|
-
isRevealRequested: q,
|
|
65
|
-
isError: Y.isError,
|
|
66
|
-
hasCredentials: !!Y.data
|
|
67
|
-
}), Z = C(() => W === "loaded" && B ? ee({
|
|
68
|
-
card: B,
|
|
69
|
-
cardProgram: l,
|
|
70
|
-
labels: P
|
|
71
|
-
}) : void 0, [
|
|
72
|
-
B,
|
|
73
|
-
l,
|
|
74
|
-
P,
|
|
75
|
-
W
|
|
76
|
-
]), ie = x(async (t) => {
|
|
77
|
-
await u(t) && (e.success(P.copySuccessToast), j(c.ValueCopied));
|
|
78
|
-
}, [P.copySuccessToast, j]), { refetch: Q } = Y, ae = x(() => {
|
|
79
|
-
if (q) {
|
|
80
|
-
Q();
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
K(r);
|
|
84
|
-
}, [
|
|
85
|
-
r,
|
|
86
|
-
q,
|
|
87
|
-
Q
|
|
88
|
-
]), oe = x(() => {
|
|
89
|
-
K(void 0);
|
|
90
|
-
}, []), se = x(() => {
|
|
91
|
-
K(void 0), E?.();
|
|
92
|
-
}, [E]), ce = C(() => Y.isForbidden ? {
|
|
93
|
-
...D,
|
|
94
|
-
credentials: {
|
|
95
|
-
...D?.credentials,
|
|
96
|
-
errorDescription: P.revealNotPermittedDescription
|
|
97
|
-
}
|
|
98
|
-
} : D, [
|
|
99
|
-
Y.isForbidden,
|
|
100
|
-
D,
|
|
101
|
-
P.revealNotPermittedDescription
|
|
102
|
-
]), $ = C(() => {
|
|
103
|
-
if (!(X !== "revealed" || !Y.data)) return {
|
|
104
|
-
cardNumber: d(Y.data.pan),
|
|
105
|
-
expirationDate: f(Y.data.expirationDate),
|
|
106
|
-
securityCode: Y.data.cvv
|
|
107
|
-
};
|
|
108
|
-
}, [Y.data, X]), le = x(() => {
|
|
109
|
-
if (M) {
|
|
110
|
-
N();
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
U();
|
|
114
|
-
}, [
|
|
115
|
-
U,
|
|
116
|
-
N,
|
|
117
|
-
M
|
|
118
|
-
]);
|
|
119
|
-
return /* @__PURE__ */ re(w, { children: [/* @__PURE__ */ T(t, {}), /* @__PURE__ */ T(b, {
|
|
120
|
-
labels: ce,
|
|
121
|
-
state: W,
|
|
122
|
-
nickname: Z?.nickname,
|
|
123
|
-
statusLabel: Z?.statusLabel,
|
|
124
|
-
statusTone: Z?.statusTone,
|
|
125
|
-
formFactorLabel: Z?.formFactorLabel,
|
|
126
|
-
onClose: E ? se : void 0,
|
|
127
|
-
bankLogoSrc: k,
|
|
128
|
-
bankLogoAlt: A,
|
|
129
|
-
cardholderName: Z?.cardholderName,
|
|
130
|
-
maskedCardNumber: Z?.maskedCardNumber,
|
|
131
|
-
programLabel: Z?.programLabel,
|
|
132
|
-
allowedCategories: Z?.allowedCategories,
|
|
133
|
-
spendLimitLabels: Z?.spendLimitLabels,
|
|
134
|
-
perTransactionMaxLabel: Z?.perTransactionMaxLabel,
|
|
135
|
-
onCopy: ie,
|
|
136
|
-
onViewCard: J ? ae : void 0,
|
|
137
|
-
onHideCard: J ? oe : void 0,
|
|
138
|
-
revealState: X,
|
|
139
|
-
revealedCardNumber: $?.cardNumber,
|
|
140
|
-
revealedExpirationDate: $?.expirationDate,
|
|
141
|
-
revealedSecurityCode: $?.securityCode,
|
|
142
|
-
onRetry: F === p.Supported ? le : void 0
|
|
143
|
-
})] });
|
|
7
|
+
var r = {
|
|
8
|
+
[n.Credit]: t.CreditCardActivateOrg,
|
|
9
|
+
[n.Debit]: t.DebitCardActivateOrg
|
|
10
|
+
};
|
|
11
|
+
function i({ card: t, cardProgram: n, scopes: i }) {
|
|
12
|
+
if (!t || t.cardType !== "PHYSICAL" || t.cardStatus !== "PENDING_ACTIVATION") return !1;
|
|
13
|
+
let a = r[n];
|
|
14
|
+
return a ? e(new Set(i ?? []), [a]) : !1;
|
|
144
15
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
widgetToken: t,
|
|
150
|
-
organizationId: n,
|
|
151
|
-
configClient: i,
|
|
152
|
-
gatewayRouting: a,
|
|
153
|
-
linkComponent: o,
|
|
154
|
-
implementation: s,
|
|
155
|
-
uiFramework: c,
|
|
156
|
-
errorFallback: u,
|
|
157
|
-
onError: d,
|
|
158
|
-
analytics: f,
|
|
159
|
-
disclosuresAcceptance: p,
|
|
160
|
-
providerLabels: m,
|
|
161
|
-
children: /* @__PURE__ */ T(E, { ...h })
|
|
162
|
-
});
|
|
16
|
+
var a = 4;
|
|
17
|
+
function o(e) {
|
|
18
|
+
let t = e.replace(/\D/g, "");
|
|
19
|
+
if (t.length === a) return `${t.slice(0, 2)}-${t.slice(2)}`;
|
|
163
20
|
}
|
|
164
21
|
//#endregion
|
|
165
|
-
export {
|
|
22
|
+
export { r as ACTIVATE_SCOPE_BY_PROGRAM, i as canActivateCard, o as toCardFaceExpirationDate };
|
package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index7.js
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
"use client";
|
|
4
|
+
"use client";
|
|
5
|
+
import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
|
|
6
|
+
import { isApiConflictError as t } from "../../../shared/data-access/dist/lib/isApiConflictError.js";
|
|
7
|
+
import { isApiUnprocessableError as n } from "../../../shared/data-access/dist/lib/isApiUnprocessableError.js";
|
|
8
|
+
import "../../../shared/data-access/dist/index.js";
|
|
9
|
+
import "../../../shared/ui/dist/index.js";
|
|
10
|
+
import { CardProgram as r } from "../../../shared/feature/dist/lib/card/cardProgram.js";
|
|
11
|
+
import "../../../shared/feature/dist/index.js";
|
|
12
|
+
import { canActivateCard as i, toCardFaceExpirationDate as a } from "./index6.js";
|
|
13
|
+
import { useActivateCreditCardMutation as o, useActivateDebitCardMutation as s } from "../../data-access/dist/index4.js";
|
|
14
|
+
import { useVerifyDebitCardMutation as c } from "../../data-access/dist/index9.js";
|
|
15
|
+
import "../../data-access/dist/index.js";
|
|
16
|
+
import { ActivateCardFormError as l, EMPTY_ACTIVATE_CARD_FORM_VALUES as u, validateActivateCardForm as d } from "../../ui/dist/lib/ActivateCardPanel/validation.js";
|
|
17
|
+
import "../../ui/dist/index.js";
|
|
18
|
+
import { useCallback as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
|
|
19
|
+
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index7.js
|
|
20
|
+
function _({ cardId: _, cardProgram: v, card: y, scopes: b, conflictToast: x }) {
|
|
21
|
+
let [S, C] = g(!1), [w, T] = g(u), [E, D] = g("idle"), [O, k] = g(!1), A = h(null), [j, M] = g(_);
|
|
22
|
+
_ !== j && (M(_), A.current = null, C(!1), T(u), D("idle"), k(!1));
|
|
23
|
+
let { mutateAsync: N } = c(), { mutateAsync: P } = o(), { mutateAsync: F } = s(), I = i({
|
|
24
|
+
card: y,
|
|
25
|
+
cardProgram: v,
|
|
26
|
+
scopes: b
|
|
27
|
+
}), L = m(() => d(w), [w]), R = m(() => ({
|
|
28
|
+
...L.errors,
|
|
29
|
+
...O ? { form: l.VerificationRejected } : {}
|
|
30
|
+
}), [O, L.errors]), z = f(() => {
|
|
31
|
+
C(!0);
|
|
32
|
+
}, []), B = f(() => {
|
|
33
|
+
C(!1), A.current = null, T(u), D("idle"), k(!1);
|
|
34
|
+
}, []), V = f((e) => {
|
|
35
|
+
T((t) => ({
|
|
36
|
+
...t,
|
|
37
|
+
...e
|
|
38
|
+
}));
|
|
39
|
+
}, []);
|
|
40
|
+
p(() => {
|
|
41
|
+
!S || I || E !== "succeeded" && E !== "submitting" && (e.error(x), B());
|
|
42
|
+
}, [
|
|
43
|
+
I,
|
|
44
|
+
B,
|
|
45
|
+
x,
|
|
46
|
+
S,
|
|
47
|
+
E
|
|
48
|
+
]);
|
|
49
|
+
let H = f(async () => {
|
|
50
|
+
if (!I || !d(w).isValid) return;
|
|
51
|
+
let i = v === r.Credit, o = v === r.Debit;
|
|
52
|
+
if (!i && !o) return;
|
|
53
|
+
D("submitting"), k(!1), A.current = _;
|
|
54
|
+
let s = () => A.current !== _;
|
|
55
|
+
try {
|
|
56
|
+
if (o) {
|
|
57
|
+
let e = a(w.expirationDate);
|
|
58
|
+
if (!e) {
|
|
59
|
+
D("errored");
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
await N({
|
|
63
|
+
path: { id: _ },
|
|
64
|
+
body: {
|
|
65
|
+
expirationDate: e,
|
|
66
|
+
cvv: w.securityCode
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
if (s() || (i ? await P({ path: { id: _ } }) : await F({ path: { id: _ } }), s())) return;
|
|
71
|
+
D("succeeded");
|
|
72
|
+
} catch (r) {
|
|
73
|
+
if (s()) return;
|
|
74
|
+
if (t(r)) {
|
|
75
|
+
e.error(x), B();
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
n(r) && k(!0), D("errored");
|
|
79
|
+
}
|
|
80
|
+
}, [
|
|
81
|
+
P,
|
|
82
|
+
F,
|
|
83
|
+
I,
|
|
84
|
+
_,
|
|
85
|
+
v,
|
|
86
|
+
B,
|
|
87
|
+
x,
|
|
88
|
+
w,
|
|
89
|
+
N
|
|
90
|
+
]), U = f(() => {
|
|
91
|
+
H();
|
|
92
|
+
}, [H]);
|
|
93
|
+
return {
|
|
94
|
+
canActivate: I,
|
|
95
|
+
isOpen: S,
|
|
96
|
+
open: z,
|
|
97
|
+
close: B,
|
|
98
|
+
values: w,
|
|
99
|
+
errors: R,
|
|
100
|
+
state: E,
|
|
101
|
+
isSubmitDisabled: !I || !L.isValid || E === "submitting",
|
|
102
|
+
onValuesChange: V,
|
|
103
|
+
onSubmit: U
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
//#endregion
|
|
107
|
+
export { _ as useActivateCard };
|
package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index8.js
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
"use client";
|
|
4
|
+
"use client";
|
|
5
|
+
import { toast as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
|
|
6
|
+
import { EmbeddedToaster as t } from "../../../shared/ui/dist/lib/EmbeddedToaster.js";
|
|
7
|
+
import "../../../shared/ui/dist/index.js";
|
|
8
|
+
import { useAnalyticsTrack as n } from "../../../shared/feature/dist/lib/analytics/hooks.js";
|
|
9
|
+
import { WidgetProvider as r } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
|
|
10
|
+
import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
|
|
11
|
+
import { CardProgram as s } from "../../../shared/feature/dist/lib/card/cardProgram.js";
|
|
12
|
+
import "../../../shared/feature/dist/index.js";
|
|
13
|
+
import { resolveCardDetailsFeatureLabels as c } from "./index5.js";
|
|
14
|
+
import { CardDetailsWidgetAnalyticsEvent as l, WIDGET_NAME as u } from "./index2.js";
|
|
15
|
+
import { copyTextToClipboard as d, formatCardNumber as f, formatExpirationDate as p } from "./index3.js";
|
|
16
|
+
import { CardProgramValidity as m, resolveCanRevealCredentials as h, resolveCardDetailsPanelState as ee, resolveCardDetailsPresentation as te, resolveCardDetailsRevealState as ne, resolveCardProgramValidity as re } from "./index4.js";
|
|
17
|
+
import { useCreditCardDetailsQuery as ie } from "../../data-access/dist/index6.js";
|
|
18
|
+
import { useDebitCardCredentialsQuery as g } from "../../data-access/dist/index7.js";
|
|
19
|
+
import { useDebitCardDetailsQuery as _ } from "../../data-access/dist/index8.js";
|
|
20
|
+
import "../../data-access/dist/index.js";
|
|
21
|
+
import { CardDetailsPanel as ae } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
|
|
22
|
+
import { ActivateCardPanel as v } from "../../ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js";
|
|
23
|
+
import "../../ui/dist/index.js";
|
|
24
|
+
import { useActivateCard as y } from "./index7.js";
|
|
25
|
+
import { useCallback as b, useEffect as x, useMemo as S, useState as C } from "react";
|
|
26
|
+
import { Fragment as w, jsx as T, jsxs as oe } from "react/jsx-runtime";
|
|
27
|
+
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index8.js
|
|
28
|
+
function E({ cardId: r, cardProgram: u, onClose: E, labels: D, activateLabels: se, featureLabels: O, bankLogoSrc: k, bankLogoAlt: A }) {
|
|
29
|
+
let j = n(), M = o(), N = i(), { initResponse: ce } = a();
|
|
30
|
+
x(() => {
|
|
31
|
+
j(l.Mounted);
|
|
32
|
+
}, [j]);
|
|
33
|
+
let P = S(() => c(O), [O]), F = re(u), I = u === s.Credit, L = u === s.Debit, R = ie({
|
|
34
|
+
cardId: r,
|
|
35
|
+
enabled: I
|
|
36
|
+
}), z = _({
|
|
37
|
+
cardId: r,
|
|
38
|
+
enabled: L
|
|
39
|
+
}), { data: B, isError: V, isNotFound: H, refetch: U } = I ? R : z, W = ee({
|
|
40
|
+
programValidity: F,
|
|
41
|
+
isNotFound: H,
|
|
42
|
+
isError: !!M || V,
|
|
43
|
+
hasCard: !!B
|
|
44
|
+
});
|
|
45
|
+
x(() => {
|
|
46
|
+
if (F === m.Supported) return;
|
|
47
|
+
let e = `"${s.Credit}" or "${s.Debit}"`;
|
|
48
|
+
console.error(F === m.Missing ? `[CardDetailsWidget] cardProgram is required and was not set. Pass ${e} — it selects which card program to read, so there is no default. No card was fetched.` : `[CardDetailsWidget] cardProgram must be ${e}, received ${JSON.stringify(u)}. No card was fetched.`);
|
|
49
|
+
}, [u, F]);
|
|
50
|
+
let [le, G] = C(), K = le === r;
|
|
51
|
+
x(() => {
|
|
52
|
+
G(void 0);
|
|
53
|
+
}, [r]);
|
|
54
|
+
let q = h({
|
|
55
|
+
panelState: W,
|
|
56
|
+
cardProgram: u,
|
|
57
|
+
cardStatus: B?.cardStatus
|
|
58
|
+
});
|
|
59
|
+
x(() => {
|
|
60
|
+
K && !q && G(void 0);
|
|
61
|
+
}, [K, q]);
|
|
62
|
+
let J = g({
|
|
63
|
+
cardId: r,
|
|
64
|
+
enabled: q && K
|
|
65
|
+
}), Y = ne({
|
|
66
|
+
isRevealRequested: K,
|
|
67
|
+
isError: J.isError,
|
|
68
|
+
hasCredentials: !!J.data
|
|
69
|
+
}), X = S(() => W === "loaded" && B ? te({
|
|
70
|
+
card: B,
|
|
71
|
+
cardProgram: u,
|
|
72
|
+
labels: P
|
|
73
|
+
}) : void 0, [
|
|
74
|
+
B,
|
|
75
|
+
u,
|
|
76
|
+
P,
|
|
77
|
+
W
|
|
78
|
+
]), ue = b(async (t) => {
|
|
79
|
+
await d(t) && (e.success(P.copySuccessToast), j(l.ValueCopied));
|
|
80
|
+
}, [P.copySuccessToast, j]), Z = y({
|
|
81
|
+
cardId: r,
|
|
82
|
+
cardProgram: u,
|
|
83
|
+
card: W === "loaded" ? B : void 0,
|
|
84
|
+
scopes: ce?.scopes,
|
|
85
|
+
conflictToast: P.activationConflictToast
|
|
86
|
+
}), { refetch: Q } = J, de = b(() => {
|
|
87
|
+
if (K) {
|
|
88
|
+
Q();
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
G(r);
|
|
92
|
+
}, [
|
|
93
|
+
r,
|
|
94
|
+
K,
|
|
95
|
+
Q
|
|
96
|
+
]), fe = b(() => {
|
|
97
|
+
G(void 0);
|
|
98
|
+
}, []), pe = b(() => {
|
|
99
|
+
G(void 0), E?.();
|
|
100
|
+
}, [E]), me = S(() => J.isForbidden ? {
|
|
101
|
+
...D,
|
|
102
|
+
credentials: {
|
|
103
|
+
...D?.credentials,
|
|
104
|
+
errorDescription: P.revealNotPermittedDescription
|
|
105
|
+
}
|
|
106
|
+
} : D, [
|
|
107
|
+
J.isForbidden,
|
|
108
|
+
D,
|
|
109
|
+
P.revealNotPermittedDescription
|
|
110
|
+
]), $ = S(() => {
|
|
111
|
+
if (!(Y !== "revealed" || !J.data)) return {
|
|
112
|
+
cardNumber: f(J.data.pan),
|
|
113
|
+
expirationDate: p(J.data.expirationDate),
|
|
114
|
+
securityCode: J.data.cvv
|
|
115
|
+
};
|
|
116
|
+
}, [J.data, Y]), he = b(() => {
|
|
117
|
+
if (M) {
|
|
118
|
+
N();
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
U();
|
|
122
|
+
}, [
|
|
123
|
+
U,
|
|
124
|
+
N,
|
|
125
|
+
M
|
|
126
|
+
]);
|
|
127
|
+
return /* @__PURE__ */ oe(w, { children: [/* @__PURE__ */ T(t, {}), Z.isOpen ? /* @__PURE__ */ T(v, {
|
|
128
|
+
labels: se,
|
|
129
|
+
state: Z.state,
|
|
130
|
+
values: Z.values,
|
|
131
|
+
errors: Z.errors,
|
|
132
|
+
isSubmitDisabled: Z.isSubmitDisabled,
|
|
133
|
+
onValuesChange: Z.onValuesChange,
|
|
134
|
+
onSubmit: Z.onSubmit,
|
|
135
|
+
onClose: Z.close,
|
|
136
|
+
bankLogoSrc: k,
|
|
137
|
+
bankLogoAlt: A,
|
|
138
|
+
cardholderName: X?.cardholderName,
|
|
139
|
+
maskedCardNumber: X?.maskedCardNumber,
|
|
140
|
+
programLabel: X?.programLabel
|
|
141
|
+
}) : /* @__PURE__ */ T(ae, {
|
|
142
|
+
labels: me,
|
|
143
|
+
state: W,
|
|
144
|
+
nickname: X?.nickname,
|
|
145
|
+
statusLabel: X?.statusLabel,
|
|
146
|
+
statusTone: X?.statusTone,
|
|
147
|
+
formFactorLabel: X?.formFactorLabel,
|
|
148
|
+
onClose: E ? pe : void 0,
|
|
149
|
+
bankLogoSrc: k,
|
|
150
|
+
bankLogoAlt: A,
|
|
151
|
+
cardholderName: X?.cardholderName,
|
|
152
|
+
maskedCardNumber: X?.maskedCardNumber,
|
|
153
|
+
programLabel: X?.programLabel,
|
|
154
|
+
allowedCategories: X?.allowedCategories,
|
|
155
|
+
spendLimitLabels: X?.spendLimitLabels,
|
|
156
|
+
perTransactionMaxLabel: X?.perTransactionMaxLabel,
|
|
157
|
+
onCopy: ue,
|
|
158
|
+
onActivate: Z.canActivate ? Z.open : void 0,
|
|
159
|
+
onViewCard: q ? de : void 0,
|
|
160
|
+
onHideCard: q ? fe : void 0,
|
|
161
|
+
revealState: Y,
|
|
162
|
+
revealedCardNumber: $?.cardNumber,
|
|
163
|
+
revealedExpirationDate: $?.expirationDate,
|
|
164
|
+
revealedSecurityCode: $?.securityCode,
|
|
165
|
+
onRetry: F === m.Supported ? he : void 0
|
|
166
|
+
})] });
|
|
167
|
+
}
|
|
168
|
+
function D({ baseUrl: e, widgetToken: t, organizationId: n, configClient: i, gatewayRouting: a, linkComponent: o, implementation: s, uiFramework: c, errorFallback: l, onError: d, analytics: f, disclosuresAcceptance: p, providerLabels: m, ...h }) {
|
|
169
|
+
return /* @__PURE__ */ T(r, {
|
|
170
|
+
widgetName: u,
|
|
171
|
+
baseUrl: e,
|
|
172
|
+
widgetToken: t,
|
|
173
|
+
organizationId: n,
|
|
174
|
+
configClient: i,
|
|
175
|
+
gatewayRouting: a,
|
|
176
|
+
linkComponent: o,
|
|
177
|
+
implementation: s,
|
|
178
|
+
uiFramework: c,
|
|
179
|
+
errorFallback: l,
|
|
180
|
+
onError: d,
|
|
181
|
+
analytics: f,
|
|
182
|
+
disclosuresAcceptance: p,
|
|
183
|
+
providerLabels: m,
|
|
184
|
+
children: /* @__PURE__ */ T(E, { ...h })
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
//#endregion
|
|
188
|
+
export { D as CardDetailsWidget, D as default };
|
|
@@ -4,5 +4,7 @@ import "./lib/CardDetailsPanel/CardFace.js";
|
|
|
4
4
|
import "./lib/CardDetailsPanel/DetailCopyRow.js";
|
|
5
5
|
import "./lib/CardDetailsPanel/labels.js";
|
|
6
6
|
import { CardDetailsPanel as e } from "./lib/CardDetailsPanel/CardDetailsPanel.js";
|
|
7
|
-
import "./lib/ActivateCardPanel/
|
|
8
|
-
|
|
7
|
+
import "./lib/ActivateCardPanel/labels.js";
|
|
8
|
+
import { ActivateCardFormError as t, EMPTY_ACTIVATE_CARD_FORM_VALUES as n, validateActivateCardForm as r } from "./lib/ActivateCardPanel/validation.js";
|
|
9
|
+
import { ActivateCardPanel as i } from "./lib/ActivateCardPanel/ActivateCardPanel.js";
|
|
10
|
+
export { t as ActivateCardFormError, i as ActivateCardPanel, e as CardDetailsPanel, n as EMPTY_ACTIVATE_CARD_FORM_VALUES, r as validateActivateCardForm };
|
|
@@ -2,12 +2,141 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
"use client";
|
|
4
4
|
"use client";
|
|
5
|
-
import "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
|
|
5
|
+
import { Button as e, Input as t, Label as n, Separator as r, Spinner as i, Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c, cn as l } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
|
|
6
|
+
import { InlineErrorAlert as u } from "../../../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
|
|
6
7
|
import "../../../../../shared/ui/dist/index.js";
|
|
7
|
-
import "../CardDetailsPanel/
|
|
8
|
-
import "
|
|
9
|
-
import "./
|
|
10
|
-
import "./
|
|
11
|
-
import "
|
|
12
|
-
import "
|
|
13
|
-
import "
|
|
8
|
+
import { cardDetailsWidgetUiTestIds as d } from "../CardDetailsPanel/testIds.js";
|
|
9
|
+
import { CardFace as f } from "../CardDetailsPanel/CardFace.js";
|
|
10
|
+
import { resolveActivateCardPanelLabels as p } from "./labels.js";
|
|
11
|
+
import { ActivateCardFieldError as m, ActivateCardFormError as h, EMPTY_ACTIVATE_CARD_FORM_VALUES as g, formatDigitsInput as _, formatExpirationDateInput as v } from "./validation.js";
|
|
12
|
+
import { ActivateCardSuccessView as y } from "./ActivateCardSuccessView.js";
|
|
13
|
+
import { FieldError as b } from "./FieldError.js";
|
|
14
|
+
import { useId as x, useMemo as S } from "react";
|
|
15
|
+
import { jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
16
|
+
import { ChevronRightIcon as T, HelpCircleIcon as E, XIcon as D } from "lucide-react";
|
|
17
|
+
//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/ActivateCardPanel/ActivateCardPanel.js
|
|
18
|
+
var O = {};
|
|
19
|
+
function k(e, t) {
|
|
20
|
+
switch (e) {
|
|
21
|
+
case m.ImpossibleMonth: return t.impossibleMonth;
|
|
22
|
+
case m.PastExpiration: return t.pastExpiration;
|
|
23
|
+
case h.VerificationRejected: return t.verificationRejected;
|
|
24
|
+
default: return;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function A({ labels: m, state: h = "idle", values: A = g, onValuesChange: j, errors: M = O, isSubmitDisabled: N = !0, onSubmit: P, onClose: F, bankLogoSrc: I, bankLogoAlt: L, cardholderName: R, maskedCardNumber: z, programLabel: B, className: V }) {
|
|
28
|
+
let H = S(() => p(m), [m]), U = x(), W = x(), G = x(), K = x(), q = h === "submitting", J = k(M.expirationDate, H.validation), Y = k(M.form, H.validation);
|
|
29
|
+
return /* @__PURE__ */ w("div", {
|
|
30
|
+
"data-testid": d.activatePanel,
|
|
31
|
+
className: l("ttw:flex ttw:w-full ttw:flex-col", V),
|
|
32
|
+
children: [/* @__PURE__ */ w("div", {
|
|
33
|
+
className: "ttw:flex ttw:items-start ttw:gap-1.5 ttw:px-4 ttw:pt-4 ttw:pb-3",
|
|
34
|
+
children: [/* @__PURE__ */ C("h2", {
|
|
35
|
+
className: "ttw:min-w-0 ttw:flex-1 ttw:text-2xl ttw:font-semibold ttw:tracking-[-0.6px] ttw:text-foreground",
|
|
36
|
+
children: H.header.title
|
|
37
|
+
}), F ? /* @__PURE__ */ C(e, {
|
|
38
|
+
type: "button",
|
|
39
|
+
variant: "ghost",
|
|
40
|
+
size: "icon",
|
|
41
|
+
className: "ttw:size-8 ttw:shrink-0",
|
|
42
|
+
"aria-label": H.header.closeAriaLabel,
|
|
43
|
+
onClick: F,
|
|
44
|
+
children: /* @__PURE__ */ C(D, { className: "ttw:size-4" })
|
|
45
|
+
}) : null]
|
|
46
|
+
}), h === "succeeded" ? /* @__PURE__ */ C(y, { labels: H.status }) : /* @__PURE__ */ w("form", {
|
|
47
|
+
noValidate: !0,
|
|
48
|
+
onSubmit: (e) => {
|
|
49
|
+
e.preventDefault(), !(N || q) && P?.();
|
|
50
|
+
},
|
|
51
|
+
className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:px-4 ttw:pb-4",
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ C("div", {
|
|
54
|
+
className: "ttw:flex ttw:justify-center",
|
|
55
|
+
children: /* @__PURE__ */ C(f, {
|
|
56
|
+
bankLogoSrc: I,
|
|
57
|
+
bankLogoAlt: L ?? H.cardFace.bankLogoAlt,
|
|
58
|
+
cardholderName: R ?? "",
|
|
59
|
+
maskedCardNumber: z ?? "",
|
|
60
|
+
programLabel: B ?? ""
|
|
61
|
+
})
|
|
62
|
+
}),
|
|
63
|
+
/* @__PURE__ */ w("div", {
|
|
64
|
+
className: "ttw:flex ttw:flex-col ttw:gap-1.5",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ C(n, {
|
|
67
|
+
htmlFor: U,
|
|
68
|
+
className: "ttw:text-sm ttw:font-medium",
|
|
69
|
+
children: H.fields.expirationDate
|
|
70
|
+
}),
|
|
71
|
+
/* @__PURE__ */ C(t, {
|
|
72
|
+
id: U,
|
|
73
|
+
value: A.expirationDate,
|
|
74
|
+
placeholder: H.fields.expirationDatePlaceholder,
|
|
75
|
+
disabled: q,
|
|
76
|
+
inputMode: "numeric",
|
|
77
|
+
autoComplete: "off",
|
|
78
|
+
"aria-invalid": J ? !0 : void 0,
|
|
79
|
+
"aria-describedby": J ? W : void 0,
|
|
80
|
+
onChange: (e) => j?.({ expirationDate: v(e.target.value) })
|
|
81
|
+
}),
|
|
82
|
+
/* @__PURE__ */ C(b, {
|
|
83
|
+
id: W,
|
|
84
|
+
message: J
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ w("div", {
|
|
89
|
+
className: "ttw:flex ttw:flex-col ttw:gap-1.5",
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ w("div", {
|
|
92
|
+
className: "ttw:flex ttw:items-center ttw:gap-1.5",
|
|
93
|
+
children: [/* @__PURE__ */ C(n, {
|
|
94
|
+
htmlFor: G,
|
|
95
|
+
className: "ttw:text-sm ttw:font-medium",
|
|
96
|
+
children: H.fields.securityCode
|
|
97
|
+
}), /* @__PURE__ */ C(s, { children: /* @__PURE__ */ w(a, { children: [/* @__PURE__ */ C(c, {
|
|
98
|
+
type: "button",
|
|
99
|
+
className: "ttw:inline-flex ttw:shrink-0 ttw:cursor-help ttw:text-muted-foreground",
|
|
100
|
+
"aria-label": H.fields.securityCodeInfoAriaLabel,
|
|
101
|
+
children: /* @__PURE__ */ C(E, { className: "ttw:size-4" })
|
|
102
|
+
}), /* @__PURE__ */ C(o, {
|
|
103
|
+
className: "ttw:max-w-xs",
|
|
104
|
+
children: H.fields.securityCodeInfo
|
|
105
|
+
})] }) })]
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ C(t, {
|
|
108
|
+
id: G,
|
|
109
|
+
value: A.securityCode,
|
|
110
|
+
placeholder: H.fields.securityCodePlaceholder,
|
|
111
|
+
"aria-describedby": K,
|
|
112
|
+
disabled: q,
|
|
113
|
+
inputMode: "numeric",
|
|
114
|
+
autoComplete: "off",
|
|
115
|
+
maxLength: 4,
|
|
116
|
+
onChange: (e) => j?.({ securityCode: _(e.target.value, 4) })
|
|
117
|
+
}),
|
|
118
|
+
/* @__PURE__ */ C("span", {
|
|
119
|
+
id: K,
|
|
120
|
+
className: "ttw:sr-only",
|
|
121
|
+
children: H.fields.securityCodeInfo
|
|
122
|
+
})
|
|
123
|
+
]
|
|
124
|
+
}),
|
|
125
|
+
/* @__PURE__ */ C(r, {}),
|
|
126
|
+
h === "errored" || Y ? /* @__PURE__ */ C(u, { children: Y ?? H.status.errorDescription }) : null,
|
|
127
|
+
/* @__PURE__ */ w(e, {
|
|
128
|
+
type: "submit",
|
|
129
|
+
className: "ttw:w-full",
|
|
130
|
+
disabled: N || q,
|
|
131
|
+
children: [
|
|
132
|
+
q ? /* @__PURE__ */ C(i, { "aria-label": H.status.submittingAriaLabel }) : null,
|
|
133
|
+
H.status.submit,
|
|
134
|
+
/* @__PURE__ */ C(T, { className: "ttw:size-4" })
|
|
135
|
+
]
|
|
136
|
+
})
|
|
137
|
+
]
|
|
138
|
+
})]
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
//#endregion
|
|
142
|
+
export { A as ActivateCardPanel };
|