@usethrottle/auth 0.3.0 → 0.3.1
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/dist/react/components/index.cjs +558 -536
- package/dist/react/components/index.cjs.map +1 -1
- package/dist/react/components/index.d.cts +2 -2
- package/dist/react/components/index.d.ts +2 -2
- package/dist/react/components/index.js +464 -442
- package/dist/react/components/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/package.json +1 -1
|
@@ -293,6 +293,7 @@ var THROTTLE_ELEMENT_KEYS = [
|
|
|
293
293
|
"orderDetail.payButton",
|
|
294
294
|
"orderDetail.trackButton",
|
|
295
295
|
"orderDetail.reorderButton",
|
|
296
|
+
"fieldRow",
|
|
296
297
|
"confirm.header",
|
|
297
298
|
"confirm.title",
|
|
298
299
|
"confirm.body",
|
|
@@ -1055,6 +1056,7 @@ var THROTTLE_STYLES = `
|
|
|
1055
1056
|
is near-white, so on a light host page it was rendering white-on-white. */
|
|
1056
1057
|
.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }
|
|
1057
1058
|
.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }
|
|
1059
|
+
.throttle-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }
|
|
1058
1060
|
.throttle-section__title { font-size: var(--throttle-font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--throttle-color-muted-foreground); margin: 0 0 var(--throttle-space-2); font-weight: 600; }
|
|
1059
1061
|
.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }
|
|
1060
1062
|
.throttle-addressblock__line { margin: 0 0 2px; }
|
|
@@ -1100,6 +1102,7 @@ var THROTTLE_STYLES = `
|
|
|
1100
1102
|
it span. Stretch it explicitly when stacked. */
|
|
1101
1103
|
.throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }
|
|
1102
1104
|
.throttle-addresses { grid-template-columns: 1fr; }
|
|
1105
|
+
.throttle-fieldrow { grid-template-columns: 1fr; }
|
|
1103
1106
|
.throttle-tabs__rail { width: 100%; }
|
|
1104
1107
|
}
|
|
1105
1108
|
|
|
@@ -1302,13 +1305,20 @@ function FieldGroup(props) {
|
|
|
1302
1305
|
] }, i)) });
|
|
1303
1306
|
}
|
|
1304
1307
|
|
|
1305
|
-
// src/react/components/primitives/
|
|
1308
|
+
// src/react/components/primitives/FieldRow.tsx
|
|
1306
1309
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1310
|
+
function FieldRow({ children }) {
|
|
1311
|
+
const a = useAppearance();
|
|
1312
|
+
return /* @__PURE__ */ jsx8("div", { ...a.el("fieldRow", "throttle-fieldrow"), children });
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
// src/react/components/primitives/Alert.tsx
|
|
1316
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1307
1317
|
function Alert(props) {
|
|
1308
1318
|
const a = useAppearance();
|
|
1309
1319
|
const Slot = a.slots.Alert;
|
|
1310
|
-
if (Slot) return /* @__PURE__ */
|
|
1311
|
-
return /* @__PURE__ */
|
|
1320
|
+
if (Slot) return /* @__PURE__ */ jsx9(Slot, { tone: props.tone, children: props.children });
|
|
1321
|
+
return /* @__PURE__ */ jsx9(
|
|
1312
1322
|
"p",
|
|
1313
1323
|
{
|
|
1314
1324
|
...a.el("alert", `throttle-alert throttle-alert--${props.tone}`),
|
|
@@ -1319,11 +1329,11 @@ function Alert(props) {
|
|
|
1319
1329
|
}
|
|
1320
1330
|
|
|
1321
1331
|
// src/react/components/primitives/Skeleton.tsx
|
|
1322
|
-
import { jsx as
|
|
1332
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
1323
1333
|
function Skeleton(props) {
|
|
1324
1334
|
const a = useAppearance();
|
|
1325
1335
|
const rows = Array.from({ length: props.count ?? 1 });
|
|
1326
|
-
return /* @__PURE__ */
|
|
1336
|
+
return /* @__PURE__ */ jsx10("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ jsx10("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
|
|
1327
1337
|
}
|
|
1328
1338
|
|
|
1329
1339
|
// src/react/components/primitives/Modal.tsx
|
|
@@ -1332,10 +1342,10 @@ import { createPortal } from "react-dom";
|
|
|
1332
1342
|
|
|
1333
1343
|
// src/react/components/surface.tsx
|
|
1334
1344
|
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
1335
|
-
import { jsx as
|
|
1345
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1336
1346
|
var Ctx4 = createContext4("standalone");
|
|
1337
1347
|
function SurfaceProvider(props) {
|
|
1338
|
-
return /* @__PURE__ */
|
|
1348
|
+
return /* @__PURE__ */ jsx11(Ctx4.Provider, { value: props.value, children: props.children });
|
|
1339
1349
|
}
|
|
1340
1350
|
function useSurface() {
|
|
1341
1351
|
return useContext4(Ctx4);
|
|
@@ -1345,7 +1355,7 @@ function useCardClass() {
|
|
|
1345
1355
|
}
|
|
1346
1356
|
|
|
1347
1357
|
// src/react/components/primitives/Modal.tsx
|
|
1348
|
-
import { jsx as
|
|
1358
|
+
import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1349
1359
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
1350
1360
|
function Modal(props) {
|
|
1351
1361
|
const a = useAppearance();
|
|
@@ -1396,7 +1406,7 @@ function Modal(props) {
|
|
|
1396
1406
|
}, [props.open, mounted]);
|
|
1397
1407
|
if (!props.open || !mounted) return null;
|
|
1398
1408
|
return createPortal(
|
|
1399
|
-
/* @__PURE__ */
|
|
1409
|
+
/* @__PURE__ */ jsx12("div", { ...a.rootProps, children: /* @__PURE__ */ jsx12(
|
|
1400
1410
|
"div",
|
|
1401
1411
|
{
|
|
1402
1412
|
...a.el(props.overlayKey ?? "modal.overlay", "throttle-modal__overlay"),
|
|
@@ -1414,7 +1424,7 @@ function Modal(props) {
|
|
|
1414
1424
|
"aria-labelledby": props.labelledBy,
|
|
1415
1425
|
tabIndex: -1,
|
|
1416
1426
|
children: [
|
|
1417
|
-
/* @__PURE__ */
|
|
1427
|
+
/* @__PURE__ */ jsx12(
|
|
1418
1428
|
"button",
|
|
1419
1429
|
{
|
|
1420
1430
|
...a.el("modal.closeButton", "throttle-modal__close"),
|
|
@@ -1424,7 +1434,7 @@ function Modal(props) {
|
|
|
1424
1434
|
children: "\xD7"
|
|
1425
1435
|
}
|
|
1426
1436
|
),
|
|
1427
|
-
/* @__PURE__ */
|
|
1437
|
+
/* @__PURE__ */ jsx12(SurfaceProvider, { value: "modal", children: props.children })
|
|
1428
1438
|
]
|
|
1429
1439
|
}
|
|
1430
1440
|
)
|
|
@@ -1436,7 +1446,7 @@ function Modal(props) {
|
|
|
1436
1446
|
|
|
1437
1447
|
// src/react/components/primitives/Confirm.tsx
|
|
1438
1448
|
import { createContext as createContext5, useCallback, useContext as useContext5, useId as useId2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
|
|
1439
|
-
import { jsx as
|
|
1449
|
+
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1440
1450
|
var ConfirmContext = createContext5(null);
|
|
1441
1451
|
function ConfirmProvider({ children }) {
|
|
1442
1452
|
const [request, setRequest] = useState2(null);
|
|
@@ -1459,11 +1469,11 @@ function ConfirmProvider({ children }) {
|
|
|
1459
1469
|
return /* @__PURE__ */ jsxs5(ConfirmContext.Provider, { value: ask, children: [
|
|
1460
1470
|
children,
|
|
1461
1471
|
request ? /* @__PURE__ */ jsxs5(Modal, { open: true, onClose: () => answer(false), labelledBy: titleId, size: "compact", children: [
|
|
1462
|
-
/* @__PURE__ */
|
|
1472
|
+
/* @__PURE__ */ jsx13("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx13("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request.title }) }),
|
|
1463
1473
|
/* @__PURE__ */ jsxs5("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
|
|
1464
|
-
request.body ? /* @__PURE__ */
|
|
1474
|
+
request.body ? /* @__PURE__ */ jsx13("p", { className: "throttle-muted", children: request.body }) : null,
|
|
1465
1475
|
/* @__PURE__ */ jsxs5("div", { className: "throttle-actions", children: [
|
|
1466
|
-
/* @__PURE__ */
|
|
1476
|
+
/* @__PURE__ */ jsx13(
|
|
1467
1477
|
Button,
|
|
1468
1478
|
{
|
|
1469
1479
|
elementKey: "confirm.confirmButton",
|
|
@@ -1472,7 +1482,7 @@ function ConfirmProvider({ children }) {
|
|
|
1472
1482
|
children: request.confirmLabel ?? t.common.delete
|
|
1473
1483
|
}
|
|
1474
1484
|
),
|
|
1475
|
-
/* @__PURE__ */
|
|
1485
|
+
/* @__PURE__ */ jsx13(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request.cancelLabel ?? t.common.keepIt })
|
|
1476
1486
|
] })
|
|
1477
1487
|
] })
|
|
1478
1488
|
] }) : null
|
|
@@ -1489,7 +1499,7 @@ function useConfirm() {
|
|
|
1489
1499
|
|
|
1490
1500
|
// src/react/components/primitives/Dropdown.tsx
|
|
1491
1501
|
import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
|
|
1492
|
-
import { jsx as
|
|
1502
|
+
import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1493
1503
|
function Dropdown(props) {
|
|
1494
1504
|
const a = useAppearance();
|
|
1495
1505
|
const [open, setOpen] = useState3(false);
|
|
@@ -1523,7 +1533,7 @@ function Dropdown(props) {
|
|
|
1523
1533
|
items[next < 0 ? items.length - 1 : next].focus();
|
|
1524
1534
|
};
|
|
1525
1535
|
return /* @__PURE__ */ jsxs6("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
|
|
1526
|
-
/* @__PURE__ */
|
|
1536
|
+
/* @__PURE__ */ jsx14(
|
|
1527
1537
|
"button",
|
|
1528
1538
|
{
|
|
1529
1539
|
ref: trigger,
|
|
@@ -1536,7 +1546,7 @@ function Dropdown(props) {
|
|
|
1536
1546
|
children: props.trigger
|
|
1537
1547
|
}
|
|
1538
1548
|
),
|
|
1539
|
-
open ? /* @__PURE__ */
|
|
1549
|
+
open ? /* @__PURE__ */ jsx14(
|
|
1540
1550
|
"div",
|
|
1541
1551
|
{
|
|
1542
1552
|
ref: menu,
|
|
@@ -1562,24 +1572,24 @@ function DropdownItem(props) {
|
|
|
1562
1572
|
const a = useAppearance();
|
|
1563
1573
|
const attrs = a.el(props.itemKey ?? "dropdown.item", "throttle-dropdown__item");
|
|
1564
1574
|
if (props.href) {
|
|
1565
|
-
return /* @__PURE__ */
|
|
1575
|
+
return /* @__PURE__ */ jsx14("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
|
|
1566
1576
|
}
|
|
1567
|
-
return /* @__PURE__ */
|
|
1577
|
+
return /* @__PURE__ */ jsx14("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
|
|
1568
1578
|
}
|
|
1569
1579
|
function DropdownSeparator() {
|
|
1570
1580
|
const a = useAppearance();
|
|
1571
|
-
return /* @__PURE__ */
|
|
1581
|
+
return /* @__PURE__ */ jsx14("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
|
|
1572
1582
|
}
|
|
1573
1583
|
|
|
1574
1584
|
// src/react/components/primitives/Tabs.tsx
|
|
1575
|
-
import { jsx as
|
|
1585
|
+
import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1576
1586
|
function Tabs(props) {
|
|
1577
1587
|
const a = useAppearance();
|
|
1578
1588
|
const at = props.tabs.findIndex((t) => t.id === props.active);
|
|
1579
1589
|
const vertical = props.orientation === "vertical";
|
|
1580
1590
|
const listClass = vertical ? "throttle-tabs__rail" : "throttle-tabs__list";
|
|
1581
1591
|
const itemClass = vertical ? "throttle-tabs__railitem" : "throttle-tabs__tab";
|
|
1582
|
-
return /* @__PURE__ */
|
|
1592
|
+
return /* @__PURE__ */ jsx15(
|
|
1583
1593
|
"div",
|
|
1584
1594
|
{
|
|
1585
1595
|
...a.el("tabs.list", listClass),
|
|
@@ -1623,16 +1633,16 @@ function Tabs(props) {
|
|
|
1623
1633
|
}
|
|
1624
1634
|
|
|
1625
1635
|
// src/react/components/primitives/DataTable.tsx
|
|
1626
|
-
import { jsx as
|
|
1636
|
+
import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1627
1637
|
function DataTable(props) {
|
|
1628
1638
|
const a = useAppearance();
|
|
1629
1639
|
const clickable = Boolean(props.onRowClick);
|
|
1630
1640
|
return (
|
|
1631
1641
|
// Tables are the one thing allowed to be wider than the panel; it scrolls
|
|
1632
1642
|
// rather than forcing the whole page to.
|
|
1633
|
-
/* @__PURE__ */
|
|
1634
|
-
/* @__PURE__ */
|
|
1635
|
-
/* @__PURE__ */
|
|
1643
|
+
/* @__PURE__ */ jsx16("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ jsxs8("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
|
|
1644
|
+
/* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { children: props.columns.map((col) => /* @__PURE__ */ jsx16("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
|
|
1645
|
+
/* @__PURE__ */ jsx16("tbody", { children: props.rows.map((row) => /* @__PURE__ */ jsx16(
|
|
1636
1646
|
"tr",
|
|
1637
1647
|
{
|
|
1638
1648
|
...a.el(props.rowElementKey ?? "table.row", "throttle-table__row"),
|
|
@@ -1644,7 +1654,7 @@ function DataTable(props) {
|
|
|
1644
1654
|
props.onRowClick(row);
|
|
1645
1655
|
}
|
|
1646
1656
|
} : void 0,
|
|
1647
|
-
children: props.columns.map((col) => /* @__PURE__ */
|
|
1657
|
+
children: props.columns.map((col) => /* @__PURE__ */ jsx16("td", { ...a.el("table.cell", "throttle-table__cell"), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
|
|
1648
1658
|
},
|
|
1649
1659
|
props.rowKey(row)
|
|
1650
1660
|
)) })
|
|
@@ -1653,39 +1663,39 @@ function DataTable(props) {
|
|
|
1653
1663
|
}
|
|
1654
1664
|
|
|
1655
1665
|
// src/react/components/primitives/EmptyState.tsx
|
|
1656
|
-
import { jsx as
|
|
1666
|
+
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1657
1667
|
function EmptyState(props) {
|
|
1658
1668
|
const a = useAppearance();
|
|
1659
1669
|
const Slot = a.slots.EmptyState;
|
|
1660
|
-
if (Slot) return /* @__PURE__ */
|
|
1670
|
+
if (Slot) return /* @__PURE__ */ jsx17(Slot, { title: props.title, description: props.description });
|
|
1661
1671
|
return /* @__PURE__ */ jsxs9("div", { ...a.el("emptyState", "throttle-empty"), children: [
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
props.description ? /* @__PURE__ */
|
|
1672
|
+
/* @__PURE__ */ jsx17("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
|
|
1673
|
+
props.description ? /* @__PURE__ */ jsx17("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
|
|
1664
1674
|
] });
|
|
1665
1675
|
}
|
|
1666
1676
|
|
|
1667
1677
|
// src/react/components/primitives/Avatar.tsx
|
|
1668
|
-
import { jsx as
|
|
1678
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1669
1679
|
function Avatar(props) {
|
|
1670
1680
|
const a = useAppearance();
|
|
1671
1681
|
const Slot = a.slots.Avatar;
|
|
1672
|
-
if (Slot) return /* @__PURE__ */
|
|
1682
|
+
if (Slot) return /* @__PURE__ */ jsx18(Slot, { name: props.name, email: props.email });
|
|
1673
1683
|
const initials = props.name.split(" ").map((part) => part.trim()[0]).filter(Boolean).slice(0, 2).join("") || props.email.trim()[0] || "?";
|
|
1674
|
-
return /* @__PURE__ */
|
|
1684
|
+
return /* @__PURE__ */ jsx18("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
|
|
1675
1685
|
}
|
|
1676
1686
|
|
|
1677
1687
|
// src/react/components/primitives/Badge.tsx
|
|
1678
|
-
import { jsx as
|
|
1688
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1679
1689
|
function Badge(props) {
|
|
1680
1690
|
const a = useAppearance();
|
|
1681
1691
|
const tone = props.tone ?? "neutral";
|
|
1682
1692
|
const base = tone === "neutral" ? "throttle-badge" : `throttle-badge throttle-badge--${tone}`;
|
|
1683
|
-
return /* @__PURE__ */
|
|
1693
|
+
return /* @__PURE__ */ jsx19("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
|
|
1684
1694
|
}
|
|
1685
1695
|
|
|
1686
1696
|
// src/react/components/auth/StepUpDialog.tsx
|
|
1687
1697
|
import { useEffect as useEffect3, useId as useId3, useState as useState4 } from "react";
|
|
1688
|
-
import { jsx as
|
|
1698
|
+
import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1689
1699
|
function StepUpDialog(props) {
|
|
1690
1700
|
const a = useAppearance();
|
|
1691
1701
|
const cardClass = useCardClass();
|
|
@@ -1695,7 +1705,7 @@ function StepUpDialog(props) {
|
|
|
1695
1705
|
useEffect3(() => {
|
|
1696
1706
|
if (!props.open) setPassword("");
|
|
1697
1707
|
}, [props.open]);
|
|
1698
|
-
return /* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ jsx20(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ jsx20("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ jsxs10(
|
|
1699
1709
|
"form",
|
|
1700
1710
|
{
|
|
1701
1711
|
onSubmit: (e) => {
|
|
@@ -1704,11 +1714,11 @@ function StepUpDialog(props) {
|
|
|
1704
1714
|
},
|
|
1705
1715
|
children: [
|
|
1706
1716
|
/* @__PURE__ */ jsxs10("div", { className: "throttle-card__header", children: [
|
|
1707
|
-
/* @__PURE__ */
|
|
1708
|
-
/* @__PURE__ */
|
|
1717
|
+
/* @__PURE__ */ jsx20("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
|
|
1718
|
+
/* @__PURE__ */ jsx20("p", { className: "throttle-card__description", children: t.stepUp.description })
|
|
1709
1719
|
] }),
|
|
1710
1720
|
/* @__PURE__ */ jsxs10(CardBody, { children: [
|
|
1711
|
-
/* @__PURE__ */
|
|
1721
|
+
/* @__PURE__ */ jsx20(
|
|
1712
1722
|
Field,
|
|
1713
1723
|
{
|
|
1714
1724
|
label: t.stepUp.password,
|
|
@@ -1720,8 +1730,8 @@ function StepUpDialog(props) {
|
|
|
1720
1730
|
elementKey: "stepUp.passwordField"
|
|
1721
1731
|
}
|
|
1722
1732
|
),
|
|
1723
|
-
/* @__PURE__ */
|
|
1724
|
-
/* @__PURE__ */
|
|
1733
|
+
/* @__PURE__ */ jsx20(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
|
|
1734
|
+
/* @__PURE__ */ jsx20(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
|
|
1725
1735
|
] })
|
|
1726
1736
|
]
|
|
1727
1737
|
}
|
|
@@ -1768,7 +1778,7 @@ function useAction() {
|
|
|
1768
1778
|
}
|
|
1769
1779
|
|
|
1770
1780
|
// src/react/components/auth/SignIn.tsx
|
|
1771
|
-
import { Fragment as Fragment2, jsx as
|
|
1781
|
+
import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1772
1782
|
function SignIn(props) {
|
|
1773
1783
|
const a = useAppearance(props.appearance);
|
|
1774
1784
|
const cardClass = useCardClass();
|
|
@@ -1782,8 +1792,8 @@ function SignIn(props) {
|
|
|
1782
1792
|
const branded = variant === "branded";
|
|
1783
1793
|
const grouped = variant === "grouped";
|
|
1784
1794
|
const logo = useBrandLogo(props.logo);
|
|
1785
|
-
const forgotLink = props.onForgotPassword ? /* @__PURE__ */
|
|
1786
|
-
const emailField = /* @__PURE__ */
|
|
1795
|
+
const forgotLink = props.onForgotPassword ? /* @__PURE__ */ jsx21(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
|
|
1796
|
+
const emailField = /* @__PURE__ */ jsx21(
|
|
1787
1797
|
Field,
|
|
1788
1798
|
{
|
|
1789
1799
|
label: t.signIn.email,
|
|
@@ -1796,7 +1806,7 @@ function SignIn(props) {
|
|
|
1796
1806
|
grouped
|
|
1797
1807
|
}
|
|
1798
1808
|
);
|
|
1799
|
-
const passwordField = /* @__PURE__ */
|
|
1809
|
+
const passwordField = /* @__PURE__ */ jsx21(
|
|
1800
1810
|
Field,
|
|
1801
1811
|
{
|
|
1802
1812
|
label: t.signIn.password,
|
|
@@ -1810,7 +1820,7 @@ function SignIn(props) {
|
|
|
1810
1820
|
labelExtra: grouped ? void 0 : forgotLink
|
|
1811
1821
|
}
|
|
1812
1822
|
);
|
|
1813
|
-
return /* @__PURE__ */
|
|
1823
|
+
return /* @__PURE__ */ jsx21(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx21("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs11(
|
|
1814
1824
|
"form",
|
|
1815
1825
|
{
|
|
1816
1826
|
...a.el("signIn.root", cardClass),
|
|
@@ -1822,7 +1832,7 @@ function SignIn(props) {
|
|
|
1822
1832
|
});
|
|
1823
1833
|
},
|
|
1824
1834
|
children: [
|
|
1825
|
-
/* @__PURE__ */
|
|
1835
|
+
/* @__PURE__ */ jsx21(
|
|
1826
1836
|
CardHeader,
|
|
1827
1837
|
{
|
|
1828
1838
|
title: t.signIn.title,
|
|
@@ -1841,16 +1851,16 @@ function SignIn(props) {
|
|
|
1841
1851
|
emailField,
|
|
1842
1852
|
passwordField
|
|
1843
1853
|
] }),
|
|
1844
|
-
grouped && forgotLink ? /* @__PURE__ */
|
|
1845
|
-
error ? /* @__PURE__ */
|
|
1846
|
-
/* @__PURE__ */
|
|
1854
|
+
grouped && forgotLink ? /* @__PURE__ */ jsx21("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
|
|
1855
|
+
error ? /* @__PURE__ */ jsx21(Alert, { tone: "error", children: error }) : null,
|
|
1856
|
+
/* @__PURE__ */ jsx21(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
|
|
1847
1857
|
] }),
|
|
1848
1858
|
props.onSignUp ? /* @__PURE__ */ jsxs11(CardFooter, { ruled: !branded, children: [
|
|
1849
1859
|
/* @__PURE__ */ jsxs11("span", { className: "throttle-muted", children: [
|
|
1850
1860
|
t.signIn.switchPrompt,
|
|
1851
1861
|
" "
|
|
1852
1862
|
] }),
|
|
1853
|
-
/* @__PURE__ */
|
|
1863
|
+
/* @__PURE__ */ jsx21(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
|
|
1854
1864
|
] }) : null
|
|
1855
1865
|
]
|
|
1856
1866
|
}
|
|
@@ -1859,7 +1869,7 @@ function SignIn(props) {
|
|
|
1859
1869
|
|
|
1860
1870
|
// src/react/components/auth/SignUp.tsx
|
|
1861
1871
|
import { useState as useState7 } from "react";
|
|
1862
|
-
import { Fragment as Fragment3, jsx as
|
|
1872
|
+
import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1863
1873
|
function SignUp(props) {
|
|
1864
1874
|
const a = useAppearance(props.appearance);
|
|
1865
1875
|
const cardClass = useCardClass();
|
|
@@ -1873,7 +1883,7 @@ function SignUp(props) {
|
|
|
1873
1883
|
const branded = variant === "branded";
|
|
1874
1884
|
const grouped = variant === "grouped";
|
|
1875
1885
|
const logo = useBrandLogo(props.logo);
|
|
1876
|
-
const emailField = /* @__PURE__ */
|
|
1886
|
+
const emailField = /* @__PURE__ */ jsx22(
|
|
1877
1887
|
Field,
|
|
1878
1888
|
{
|
|
1879
1889
|
label: t.signUp.email,
|
|
@@ -1886,7 +1896,7 @@ function SignUp(props) {
|
|
|
1886
1896
|
grouped
|
|
1887
1897
|
}
|
|
1888
1898
|
);
|
|
1889
|
-
const passwordField = /* @__PURE__ */
|
|
1899
|
+
const passwordField = /* @__PURE__ */ jsx22(
|
|
1890
1900
|
Field,
|
|
1891
1901
|
{
|
|
1892
1902
|
label: t.signUp.password,
|
|
@@ -1899,7 +1909,7 @@ function SignUp(props) {
|
|
|
1899
1909
|
grouped
|
|
1900
1910
|
}
|
|
1901
1911
|
);
|
|
1902
|
-
return /* @__PURE__ */
|
|
1912
|
+
return /* @__PURE__ */ jsx22(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx22("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs12(
|
|
1903
1913
|
"form",
|
|
1904
1914
|
{
|
|
1905
1915
|
...a.el("signUp.root", cardClass),
|
|
@@ -1915,7 +1925,7 @@ function SignUp(props) {
|
|
|
1915
1925
|
});
|
|
1916
1926
|
},
|
|
1917
1927
|
children: [
|
|
1918
|
-
/* @__PURE__ */
|
|
1928
|
+
/* @__PURE__ */ jsx22(
|
|
1919
1929
|
CardHeader,
|
|
1920
1930
|
{
|
|
1921
1931
|
title: t.signUp.title,
|
|
@@ -1934,16 +1944,16 @@ function SignUp(props) {
|
|
|
1934
1944
|
emailField,
|
|
1935
1945
|
passwordField
|
|
1936
1946
|
] }),
|
|
1937
|
-
error ? /* @__PURE__ */
|
|
1938
|
-
notice ? /* @__PURE__ */
|
|
1939
|
-
/* @__PURE__ */
|
|
1947
|
+
error ? /* @__PURE__ */ jsx22(Alert, { tone: "error", children: error }) : null,
|
|
1948
|
+
notice ? /* @__PURE__ */ jsx22(Alert, { tone: "info", children: notice }) : null,
|
|
1949
|
+
/* @__PURE__ */ jsx22(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
|
|
1940
1950
|
] }),
|
|
1941
1951
|
props.onSignIn ? /* @__PURE__ */ jsxs12(CardFooter, { ruled: !branded, children: [
|
|
1942
1952
|
/* @__PURE__ */ jsxs12("span", { className: "throttle-muted", children: [
|
|
1943
1953
|
t.signUp.switchPrompt,
|
|
1944
1954
|
" "
|
|
1945
1955
|
] }),
|
|
1946
|
-
/* @__PURE__ */
|
|
1956
|
+
/* @__PURE__ */ jsx22(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
|
|
1947
1957
|
] }) : null
|
|
1948
1958
|
]
|
|
1949
1959
|
}
|
|
@@ -1952,7 +1962,7 @@ function SignUp(props) {
|
|
|
1952
1962
|
|
|
1953
1963
|
// src/react/components/auth/ForgotPassword.tsx
|
|
1954
1964
|
import { useState as useState8 } from "react";
|
|
1955
|
-
import { jsx as
|
|
1965
|
+
import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1956
1966
|
function ForgotPassword(props) {
|
|
1957
1967
|
const a = useAppearance(props.appearance);
|
|
1958
1968
|
const cardClass = useCardClass();
|
|
@@ -1963,7 +1973,7 @@ function ForgotPassword(props) {
|
|
|
1963
1973
|
const [email, setEmail] = useState8("");
|
|
1964
1974
|
const branded = (props.variant ?? "quiet") === "branded";
|
|
1965
1975
|
const logo = useBrandLogo(props.logo);
|
|
1966
|
-
return /* @__PURE__ */
|
|
1976
|
+
return /* @__PURE__ */ jsx23(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx23("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs13(
|
|
1967
1977
|
"form",
|
|
1968
1978
|
{
|
|
1969
1979
|
...a.el("forgotPassword.root", cardClass),
|
|
@@ -1975,7 +1985,7 @@ function ForgotPassword(props) {
|
|
|
1975
1985
|
});
|
|
1976
1986
|
},
|
|
1977
1987
|
children: [
|
|
1978
|
-
/* @__PURE__ */
|
|
1988
|
+
/* @__PURE__ */ jsx23(
|
|
1979
1989
|
CardHeader,
|
|
1980
1990
|
{
|
|
1981
1991
|
title: t.forgotPassword.title,
|
|
@@ -1987,7 +1997,7 @@ function ForgotPassword(props) {
|
|
|
1987
1997
|
}
|
|
1988
1998
|
),
|
|
1989
1999
|
/* @__PURE__ */ jsxs13(CardBody, { children: [
|
|
1990
|
-
/* @__PURE__ */
|
|
2000
|
+
/* @__PURE__ */ jsx23(
|
|
1991
2001
|
Field,
|
|
1992
2002
|
{
|
|
1993
2003
|
label: t.forgotPassword.email,
|
|
@@ -1999,11 +2009,11 @@ function ForgotPassword(props) {
|
|
|
1999
2009
|
elementKey: "forgotPassword.emailField"
|
|
2000
2010
|
}
|
|
2001
2011
|
),
|
|
2002
|
-
error ? /* @__PURE__ */
|
|
2003
|
-
notice ? /* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2012
|
+
error ? /* @__PURE__ */ jsx23(Alert, { tone: "error", children: error }) : null,
|
|
2013
|
+
notice ? /* @__PURE__ */ jsx23(Alert, { tone: "success", children: notice }) : null,
|
|
2014
|
+
/* @__PURE__ */ jsx23(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
|
|
2005
2015
|
] }),
|
|
2006
|
-
props.onBack ? /* @__PURE__ */
|
|
2016
|
+
props.onBack ? /* @__PURE__ */ jsx23(CardFooter, { ruled: !branded, children: /* @__PURE__ */ jsx23(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
|
|
2007
2017
|
]
|
|
2008
2018
|
}
|
|
2009
2019
|
) }) });
|
|
@@ -2011,7 +2021,7 @@ function ForgotPassword(props) {
|
|
|
2011
2021
|
|
|
2012
2022
|
// src/react/components/auth/ResetPassword.tsx
|
|
2013
2023
|
import { useState as useState9 } from "react";
|
|
2014
|
-
import { jsx as
|
|
2024
|
+
import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2015
2025
|
function ResetPassword(props) {
|
|
2016
2026
|
const a = useAppearance(props.appearance);
|
|
2017
2027
|
const cardClass = useCardClass();
|
|
@@ -2022,8 +2032,8 @@ function ResetPassword(props) {
|
|
|
2022
2032
|
const [password, setPassword] = useState9("");
|
|
2023
2033
|
const branded = (props.variant ?? "quiet") === "branded";
|
|
2024
2034
|
const logo = useBrandLogo(props.logo);
|
|
2025
|
-
return /* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2035
|
+
return /* @__PURE__ */ jsx24(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx24("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs14("div", { ...a.el("resetPassword.root", cardClass), children: [
|
|
2036
|
+
/* @__PURE__ */ jsx24(
|
|
2027
2037
|
CardHeader,
|
|
2028
2038
|
{
|
|
2029
2039
|
title: t.resetPassword.title,
|
|
@@ -2033,11 +2043,11 @@ function ResetPassword(props) {
|
|
|
2033
2043
|
branded
|
|
2034
2044
|
}
|
|
2035
2045
|
),
|
|
2036
|
-
/* @__PURE__ */
|
|
2046
|
+
/* @__PURE__ */ jsx24(CardBody, { children: !props.token ? (
|
|
2037
2047
|
// No form at all without a token. A submit button that can only
|
|
2038
2048
|
// fail is worse than an explanation.
|
|
2039
|
-
/* @__PURE__ */
|
|
2040
|
-
) : /* @__PURE__ */
|
|
2049
|
+
/* @__PURE__ */ jsx24(Alert, { tone: "error", children: t.resetPassword.missingToken })
|
|
2050
|
+
) : /* @__PURE__ */ jsx24(
|
|
2041
2051
|
"form",
|
|
2042
2052
|
{
|
|
2043
2053
|
onSubmit: (e) => {
|
|
@@ -2049,7 +2059,7 @@ function ResetPassword(props) {
|
|
|
2049
2059
|
});
|
|
2050
2060
|
},
|
|
2051
2061
|
children: /* @__PURE__ */ jsxs14("div", { className: "throttle-stack", children: [
|
|
2052
|
-
/* @__PURE__ */
|
|
2062
|
+
/* @__PURE__ */ jsx24(
|
|
2053
2063
|
Field,
|
|
2054
2064
|
{
|
|
2055
2065
|
label: t.resetPassword.password,
|
|
@@ -2061,9 +2071,9 @@ function ResetPassword(props) {
|
|
|
2061
2071
|
elementKey: "resetPassword.passwordField"
|
|
2062
2072
|
}
|
|
2063
2073
|
),
|
|
2064
|
-
error ? /* @__PURE__ */
|
|
2065
|
-
notice ? /* @__PURE__ */
|
|
2066
|
-
/* @__PURE__ */
|
|
2074
|
+
error ? /* @__PURE__ */ jsx24(Alert, { tone: "error", children: error }) : null,
|
|
2075
|
+
notice ? /* @__PURE__ */ jsx24(Alert, { tone: "success", children: notice }) : null,
|
|
2076
|
+
/* @__PURE__ */ jsx24(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
|
|
2067
2077
|
] })
|
|
2068
2078
|
}
|
|
2069
2079
|
) })
|
|
@@ -2072,7 +2082,7 @@ function ResetPassword(props) {
|
|
|
2072
2082
|
|
|
2073
2083
|
// src/react/components/auth/VerifyEmail.tsx
|
|
2074
2084
|
import { useEffect as useEffect4, useRef as useRef5, useState as useState10 } from "react";
|
|
2075
|
-
import { jsx as
|
|
2085
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2076
2086
|
function VerifyEmail(props) {
|
|
2077
2087
|
const a = useAppearance(props.appearance);
|
|
2078
2088
|
const cardClass = useCardClass();
|
|
@@ -2098,8 +2108,8 @@ function VerifyEmail(props) {
|
|
|
2098
2108
|
setState("failed");
|
|
2099
2109
|
});
|
|
2100
2110
|
}, [props.token, auth]);
|
|
2101
|
-
return /* @__PURE__ */
|
|
2102
|
-
/* @__PURE__ */
|
|
2111
|
+
return /* @__PURE__ */ jsx25(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx25("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs15("div", { ...a.el("verifyEmail.root", cardClass), children: [
|
|
2112
|
+
/* @__PURE__ */ jsx25(
|
|
2103
2113
|
CardHeader,
|
|
2104
2114
|
{
|
|
2105
2115
|
title: t.verifyEmail.title,
|
|
@@ -2111,15 +2121,15 @@ function VerifyEmail(props) {
|
|
|
2111
2121
|
),
|
|
2112
2122
|
/* @__PURE__ */ jsxs15(CardBody, { children: [
|
|
2113
2123
|
state === "verifying" ? /* @__PURE__ */ jsxs15("p", { children: [
|
|
2114
|
-
/* @__PURE__ */
|
|
2124
|
+
/* @__PURE__ */ jsx25(Spinner, {}),
|
|
2115
2125
|
" ",
|
|
2116
2126
|
t.verifyEmail.verifying
|
|
2117
2127
|
] }) : null,
|
|
2118
|
-
state === "done" ? /* @__PURE__ */
|
|
2119
|
-
state === "failed" && error ? /* @__PURE__ */
|
|
2120
|
-
state === "idle" ? /* @__PURE__ */
|
|
2121
|
-
notice ? /* @__PURE__ */
|
|
2122
|
-
state !== "done" ? /* @__PURE__ */
|
|
2128
|
+
state === "done" ? /* @__PURE__ */ jsx25(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
|
|
2129
|
+
state === "failed" && error ? /* @__PURE__ */ jsx25(Alert, { tone: "error", children: error }) : null,
|
|
2130
|
+
state === "idle" ? /* @__PURE__ */ jsx25("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
|
|
2131
|
+
notice ? /* @__PURE__ */ jsx25(Alert, { tone: "success", children: notice }) : null,
|
|
2132
|
+
state !== "done" ? /* @__PURE__ */ jsx25(
|
|
2123
2133
|
Button,
|
|
2124
2134
|
{
|
|
2125
2135
|
variant: "secondary",
|
|
@@ -2137,7 +2147,7 @@ function VerifyEmail(props) {
|
|
|
2137
2147
|
}
|
|
2138
2148
|
|
|
2139
2149
|
// src/react/components/auth/AuthFlow.tsx
|
|
2140
|
-
import { jsx as
|
|
2150
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2141
2151
|
var HASH_FOR = {
|
|
2142
2152
|
signIn: "#/sign-in",
|
|
2143
2153
|
signUp: "#/sign-up",
|
|
@@ -2195,8 +2205,8 @@ function AuthFlow(props) {
|
|
|
2195
2205
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
2196
2206
|
}, [props.routing, controlled]);
|
|
2197
2207
|
const shared = { appearance: props.appearance, localization: props.localization };
|
|
2198
|
-
return /* @__PURE__ */
|
|
2199
|
-
view === "signIn" ? /* @__PURE__ */
|
|
2208
|
+
return /* @__PURE__ */ jsx26("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs16("div", { ...a.el("authFlow.root"), children: [
|
|
2209
|
+
view === "signIn" ? /* @__PURE__ */ jsx26(
|
|
2200
2210
|
SignIn,
|
|
2201
2211
|
{
|
|
2202
2212
|
...shared,
|
|
@@ -2205,19 +2215,19 @@ function AuthFlow(props) {
|
|
|
2205
2215
|
onSignUp: () => go("signUp")
|
|
2206
2216
|
}
|
|
2207
2217
|
) : null,
|
|
2208
|
-
view === "signUp" ? /* @__PURE__ */
|
|
2209
|
-
view === "forgotPassword" ? /* @__PURE__ */
|
|
2210
|
-
view === "resetPassword" ? /* @__PURE__ */
|
|
2211
|
-
view === "verifyEmail" ? /* @__PURE__ */
|
|
2218
|
+
view === "signUp" ? /* @__PURE__ */ jsx26(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
|
|
2219
|
+
view === "forgotPassword" ? /* @__PURE__ */ jsx26(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
|
|
2220
|
+
view === "resetPassword" ? /* @__PURE__ */ jsx26(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
|
|
2221
|
+
view === "verifyEmail" ? /* @__PURE__ */ jsx26(VerifyEmail, { ...shared, token }) : null
|
|
2212
2222
|
] }) });
|
|
2213
2223
|
}
|
|
2214
2224
|
|
|
2215
2225
|
// src/react/components/auth/AuthModal.tsx
|
|
2216
|
-
import { jsx as
|
|
2226
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2217
2227
|
function AuthModal(props) {
|
|
2218
2228
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
2219
2229
|
const titleId = useId4();
|
|
2220
|
-
return /* @__PURE__ */
|
|
2230
|
+
return /* @__PURE__ */ jsx27(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs17(
|
|
2221
2231
|
Modal,
|
|
2222
2232
|
{
|
|
2223
2233
|
open: props.open,
|
|
@@ -2227,8 +2237,8 @@ function AuthModal(props) {
|
|
|
2227
2237
|
overlayKey: "authModal.overlay",
|
|
2228
2238
|
containerKey: "authModal.container",
|
|
2229
2239
|
children: [
|
|
2230
|
-
/* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2240
|
+
/* @__PURE__ */ jsx27("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
|
|
2241
|
+
/* @__PURE__ */ jsx27(
|
|
2232
2242
|
AuthFlow,
|
|
2233
2243
|
{
|
|
2234
2244
|
initialView: props.initialView,
|
|
@@ -2251,7 +2261,7 @@ import { useEffect as useEffect9, useId as useId6, useState as useState21 } from
|
|
|
2251
2261
|
|
|
2252
2262
|
// src/react/components/account/VerifyEmailBanner.tsx
|
|
2253
2263
|
import { useState as useState12 } from "react";
|
|
2254
|
-
import { jsx as
|
|
2264
|
+
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2255
2265
|
var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
|
|
2256
2266
|
function readDismissed() {
|
|
2257
2267
|
try {
|
|
@@ -2274,12 +2284,12 @@ function VerifyEmailBanner(props) {
|
|
|
2274
2284
|
const { submitting, notice, error, run } = useAction();
|
|
2275
2285
|
const [dismissed, setDismissed] = useState12(readDismissed);
|
|
2276
2286
|
if (status !== "authenticated" || emailVerified || dismissed) return null;
|
|
2277
|
-
return /* @__PURE__ */
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
notice ? /* @__PURE__ */
|
|
2280
|
-
error ? /* @__PURE__ */
|
|
2287
|
+
return /* @__PURE__ */ jsx28(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx28("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs18("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
|
|
2288
|
+
/* @__PURE__ */ jsx28("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
|
|
2289
|
+
notice ? /* @__PURE__ */ jsx28(Alert, { tone: "success", children: notice }) : null,
|
|
2290
|
+
error ? /* @__PURE__ */ jsx28(Alert, { tone: "error", children: error }) : null,
|
|
2281
2291
|
/* @__PURE__ */ jsxs18("span", { className: "throttle-actions", children: [
|
|
2282
|
-
/* @__PURE__ */
|
|
2292
|
+
/* @__PURE__ */ jsx28(
|
|
2283
2293
|
Button,
|
|
2284
2294
|
{
|
|
2285
2295
|
variant: "secondary",
|
|
@@ -2292,7 +2302,7 @@ function VerifyEmailBanner(props) {
|
|
|
2292
2302
|
children: t.verifyBanner.resendButton
|
|
2293
2303
|
}
|
|
2294
2304
|
),
|
|
2295
|
-
/* @__PURE__ */
|
|
2305
|
+
/* @__PURE__ */ jsx28(
|
|
2296
2306
|
Button,
|
|
2297
2307
|
{
|
|
2298
2308
|
variant: "link",
|
|
@@ -2309,9 +2319,9 @@ function VerifyEmailBanner(props) {
|
|
|
2309
2319
|
}
|
|
2310
2320
|
|
|
2311
2321
|
// src/react/components/account/icons.tsx
|
|
2312
|
-
import { jsx as
|
|
2322
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2313
2323
|
function Glyph(props) {
|
|
2314
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ jsx29(
|
|
2315
2325
|
"svg",
|
|
2316
2326
|
{
|
|
2317
2327
|
className: "throttle-tabs__railicon",
|
|
@@ -2331,34 +2341,34 @@ function Glyph(props) {
|
|
|
2331
2341
|
}
|
|
2332
2342
|
var ACCOUNT_ICONS = {
|
|
2333
2343
|
profile: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2334
|
-
/* @__PURE__ */
|
|
2335
|
-
/* @__PURE__ */
|
|
2344
|
+
/* @__PURE__ */ jsx29("circle", { cx: "12", cy: "8", r: "4" }),
|
|
2345
|
+
/* @__PURE__ */ jsx29("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
|
|
2336
2346
|
] }),
|
|
2337
2347
|
addresses: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2338
|
-
/* @__PURE__ */
|
|
2339
|
-
/* @__PURE__ */
|
|
2348
|
+
/* @__PURE__ */ jsx29("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
|
|
2349
|
+
/* @__PURE__ */ jsx29("circle", { cx: "12", cy: "10", r: "2.5" })
|
|
2340
2350
|
] }),
|
|
2341
2351
|
paymentMethods: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2342
|
-
/* @__PURE__ */
|
|
2343
|
-
/* @__PURE__ */
|
|
2352
|
+
/* @__PURE__ */ jsx29("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
|
|
2353
|
+
/* @__PURE__ */ jsx29("path", { d: "M2.5 10h19" })
|
|
2344
2354
|
] }),
|
|
2345
2355
|
orders: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2346
|
-
/* @__PURE__ */
|
|
2347
|
-
/* @__PURE__ */
|
|
2348
|
-
/* @__PURE__ */
|
|
2356
|
+
/* @__PURE__ */ jsx29("path", { d: "M4 7h16v13H4z" }),
|
|
2357
|
+
/* @__PURE__ */ jsx29("path", { d: "M8 7V4h8v3" }),
|
|
2358
|
+
/* @__PURE__ */ jsx29("path", { d: "M8 12h8" })
|
|
2349
2359
|
] }),
|
|
2350
2360
|
invoices: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2351
|
-
/* @__PURE__ */
|
|
2352
|
-
/* @__PURE__ */
|
|
2361
|
+
/* @__PURE__ */ jsx29("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
|
|
2362
|
+
/* @__PURE__ */ jsx29("path", { d: "M9 8h6M9 12h6" })
|
|
2353
2363
|
] }),
|
|
2354
2364
|
subscriptions: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2355
|
-
/* @__PURE__ */
|
|
2356
|
-
/* @__PURE__ */
|
|
2357
|
-
/* @__PURE__ */
|
|
2365
|
+
/* @__PURE__ */ jsx29("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
|
|
2366
|
+
/* @__PURE__ */ jsx29("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
|
|
2367
|
+
/* @__PURE__ */ jsx29("path", { d: "M18 3v4h-4M6 21v-4h4" })
|
|
2358
2368
|
] }),
|
|
2359
2369
|
security: /* @__PURE__ */ jsxs19(Glyph, { children: [
|
|
2360
|
-
/* @__PURE__ */
|
|
2361
|
-
/* @__PURE__ */
|
|
2370
|
+
/* @__PURE__ */ jsx29("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
|
|
2371
|
+
/* @__PURE__ */ jsx29("path", { d: "m9 12 2 2 4-4" })
|
|
2362
2372
|
] })
|
|
2363
2373
|
};
|
|
2364
2374
|
|
|
@@ -2366,23 +2376,23 @@ var ACCOUNT_ICONS = {
|
|
|
2366
2376
|
import { useEffect as useEffect6, useState as useState13, useRef as useRef6 } from "react";
|
|
2367
2377
|
|
|
2368
2378
|
// src/react/components/account/PanelState.tsx
|
|
2369
|
-
import { Fragment as Fragment4, jsx as
|
|
2379
|
+
import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2370
2380
|
function PanelState(props) {
|
|
2371
2381
|
const { t, errorMessage } = useCopy();
|
|
2372
2382
|
const { data, isLoading, error, refetch } = props.resource;
|
|
2373
2383
|
const empty = props.isEmpty(data);
|
|
2374
|
-
if (isLoading && empty) return /* @__PURE__ */
|
|
2384
|
+
if (isLoading && empty) return /* @__PURE__ */ jsx30(Skeleton, { count: props.skeletonRows ?? 3 });
|
|
2375
2385
|
const errorBanner = error ? /* @__PURE__ */ jsxs20("div", { className: "throttle-stack", children: [
|
|
2376
|
-
/* @__PURE__ */
|
|
2377
|
-
/* @__PURE__ */
|
|
2386
|
+
/* @__PURE__ */ jsx30(Alert, { tone: "error", children: errorMessage(error) }),
|
|
2387
|
+
/* @__PURE__ */ jsx30(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
|
|
2378
2388
|
] }) : null;
|
|
2379
2389
|
const gatedByVerification = error?.code === "verification_required";
|
|
2380
2390
|
if (gatedByVerification && empty) {
|
|
2381
|
-
return /* @__PURE__ */
|
|
2391
|
+
return /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
|
|
2382
2392
|
}
|
|
2383
2393
|
if (error && empty) return errorBanner;
|
|
2384
2394
|
if (empty) {
|
|
2385
|
-
return props.gated ? /* @__PURE__ */
|
|
2395
|
+
return props.gated ? /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
|
|
2386
2396
|
}
|
|
2387
2397
|
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2388
2398
|
errorBanner,
|
|
@@ -2391,7 +2401,7 @@ function PanelState(props) {
|
|
|
2391
2401
|
}
|
|
2392
2402
|
|
|
2393
2403
|
// src/react/components/account/ProfilePanel.tsx
|
|
2394
|
-
import { jsx as
|
|
2404
|
+
import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2395
2405
|
function ProfilePanel(props) {
|
|
2396
2406
|
const a = useAppearance(props.appearance);
|
|
2397
2407
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -2412,7 +2422,7 @@ function ProfilePanel(props) {
|
|
|
2412
2422
|
});
|
|
2413
2423
|
}, [resource.data]);
|
|
2414
2424
|
if (status === "unauthenticated") return null;
|
|
2415
|
-
return /* @__PURE__ */
|
|
2425
|
+
return /* @__PURE__ */ jsx31(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx31("div", { ...a.rootProps, children: /* @__PURE__ */ jsx31("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx31(
|
|
2416
2426
|
PanelState,
|
|
2417
2427
|
{
|
|
2418
2428
|
resource,
|
|
@@ -2437,7 +2447,7 @@ function ProfilePanel(props) {
|
|
|
2437
2447
|
});
|
|
2438
2448
|
},
|
|
2439
2449
|
children: [
|
|
2440
|
-
/* @__PURE__ */
|
|
2450
|
+
/* @__PURE__ */ jsx31(
|
|
2441
2451
|
Field,
|
|
2442
2452
|
{
|
|
2443
2453
|
label: t.profile.email,
|
|
@@ -2449,58 +2459,62 @@ function ProfilePanel(props) {
|
|
|
2449
2459
|
hint: t.profile.emailReadOnly
|
|
2450
2460
|
}
|
|
2451
2461
|
),
|
|
2452
|
-
/* @__PURE__ */
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2462
|
+
/* @__PURE__ */ jsxs21(FieldRow, { children: [
|
|
2463
|
+
/* @__PURE__ */ jsx31(
|
|
2464
|
+
Field,
|
|
2465
|
+
{
|
|
2466
|
+
label: t.profile.firstName,
|
|
2467
|
+
value: form.firstName,
|
|
2468
|
+
autoComplete: "given-name",
|
|
2469
|
+
onChange: (v) => {
|
|
2470
|
+
edited.current = true;
|
|
2471
|
+
setForm((f) => ({ ...f, firstName: v }));
|
|
2472
|
+
}
|
|
2461
2473
|
}
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2474
|
+
),
|
|
2475
|
+
/* @__PURE__ */ jsx31(
|
|
2476
|
+
Field,
|
|
2477
|
+
{
|
|
2478
|
+
label: t.profile.lastName,
|
|
2479
|
+
value: form.lastName,
|
|
2480
|
+
autoComplete: "family-name",
|
|
2481
|
+
onChange: (v) => {
|
|
2482
|
+
edited.current = true;
|
|
2483
|
+
setForm((f) => ({ ...f, lastName: v }));
|
|
2484
|
+
}
|
|
2473
2485
|
}
|
|
2474
|
-
|
|
2475
|
-
),
|
|
2476
|
-
/* @__PURE__ */
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
+
)
|
|
2487
|
+
] }),
|
|
2488
|
+
/* @__PURE__ */ jsxs21(FieldRow, { children: [
|
|
2489
|
+
/* @__PURE__ */ jsx31(
|
|
2490
|
+
Field,
|
|
2491
|
+
{
|
|
2492
|
+
label: t.profile.phone,
|
|
2493
|
+
type: "tel",
|
|
2494
|
+
value: form.phone,
|
|
2495
|
+
autoComplete: "tel",
|
|
2496
|
+
onChange: (v) => {
|
|
2497
|
+
edited.current = true;
|
|
2498
|
+
setForm((f) => ({ ...f, phone: v }));
|
|
2499
|
+
}
|
|
2486
2500
|
}
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2501
|
+
),
|
|
2502
|
+
/* @__PURE__ */ jsx31(
|
|
2503
|
+
Field,
|
|
2504
|
+
{
|
|
2505
|
+
label: t.profile.company,
|
|
2506
|
+
value: form.company,
|
|
2507
|
+
autoComplete: "organization",
|
|
2508
|
+
onChange: (v) => {
|
|
2509
|
+
edited.current = true;
|
|
2510
|
+
setForm((f) => ({ ...f, company: v }));
|
|
2511
|
+
}
|
|
2498
2512
|
}
|
|
2499
|
-
|
|
2500
|
-
),
|
|
2501
|
-
error ? /* @__PURE__ */
|
|
2502
|
-
notice ? /* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2513
|
+
)
|
|
2514
|
+
] }),
|
|
2515
|
+
error ? /* @__PURE__ */ jsx31(Alert, { tone: "error", children: error }) : null,
|
|
2516
|
+
notice ? /* @__PURE__ */ jsx31(Alert, { tone: "success", children: notice }) : null,
|
|
2517
|
+
/* @__PURE__ */ jsx31(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
|
|
2504
2518
|
]
|
|
2505
2519
|
}
|
|
2506
2520
|
)
|
|
@@ -2513,7 +2527,7 @@ import { useState as useState15 } from "react";
|
|
|
2513
2527
|
|
|
2514
2528
|
// src/react/components/account/AddressForm.tsx
|
|
2515
2529
|
import { useState as useState14 } from "react";
|
|
2516
|
-
import { jsx as
|
|
2530
|
+
import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2517
2531
|
function AddressForm(props) {
|
|
2518
2532
|
const a = useAppearance();
|
|
2519
2533
|
const { t } = useCopy();
|
|
@@ -2554,11 +2568,15 @@ function AddressForm(props) {
|
|
|
2554
2568
|
});
|
|
2555
2569
|
},
|
|
2556
2570
|
children: [
|
|
2557
|
-
/* @__PURE__ */
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
/* @__PURE__ */
|
|
2571
|
+
/* @__PURE__ */ jsxs22(FieldRow, { children: [
|
|
2572
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
|
|
2573
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
|
|
2574
|
+
] }),
|
|
2575
|
+
/* @__PURE__ */ jsxs22(FieldRow, { children: [
|
|
2576
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
|
|
2577
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
|
|
2578
|
+
] }),
|
|
2579
|
+
/* @__PURE__ */ jsx32(
|
|
2562
2580
|
Field,
|
|
2563
2581
|
{
|
|
2564
2582
|
label: t.addresses.addressLine1,
|
|
@@ -2568,7 +2586,7 @@ function AddressForm(props) {
|
|
|
2568
2586
|
autoComplete: "address-line1"
|
|
2569
2587
|
}
|
|
2570
2588
|
),
|
|
2571
|
-
/* @__PURE__ */
|
|
2589
|
+
/* @__PURE__ */ jsx32(
|
|
2572
2590
|
Field,
|
|
2573
2591
|
{
|
|
2574
2592
|
label: t.addresses.addressLine2,
|
|
@@ -2577,41 +2595,45 @@ function AddressForm(props) {
|
|
|
2577
2595
|
autoComplete: "address-line2"
|
|
2578
2596
|
}
|
|
2579
2597
|
),
|
|
2580
|
-
/* @__PURE__ */
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2598
|
+
/* @__PURE__ */ jsxs22(FieldRow, { children: [
|
|
2599
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
|
|
2600
|
+
/* @__PURE__ */ jsx32(
|
|
2601
|
+
Field,
|
|
2602
|
+
{
|
|
2603
|
+
label: t.addresses.stateProvince,
|
|
2604
|
+
value: form.stateProvince,
|
|
2605
|
+
onChange: set("stateProvince"),
|
|
2606
|
+
autoComplete: "address-level1"
|
|
2607
|
+
}
|
|
2608
|
+
)
|
|
2609
|
+
] }),
|
|
2610
|
+
/* @__PURE__ */ jsxs22(FieldRow, { children: [
|
|
2611
|
+
/* @__PURE__ */ jsx32(
|
|
2612
|
+
Field,
|
|
2613
|
+
{
|
|
2614
|
+
label: t.addresses.postalCode,
|
|
2615
|
+
value: form.postalCode,
|
|
2616
|
+
onChange: set("postalCode"),
|
|
2617
|
+
autoComplete: "postal-code"
|
|
2618
|
+
}
|
|
2619
|
+
),
|
|
2620
|
+
/* @__PURE__ */ jsx32(
|
|
2621
|
+
Field,
|
|
2622
|
+
{
|
|
2623
|
+
label: t.addresses.countryCode,
|
|
2624
|
+
value: form.countryCode,
|
|
2625
|
+
onChange: set("countryCode"),
|
|
2626
|
+
required: true,
|
|
2627
|
+
autoComplete: "country",
|
|
2628
|
+
hint: "ISO 3166-1 alpha-2, e.g. GB"
|
|
2629
|
+
}
|
|
2630
|
+
)
|
|
2631
|
+
] }),
|
|
2632
|
+
/* @__PURE__ */ jsx32(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
|
|
2633
|
+
props.error ? /* @__PURE__ */ jsx32(Alert, { tone: "error", children: props.error }) : null,
|
|
2612
2634
|
/* @__PURE__ */ jsxs22("div", { className: "throttle-actions", children: [
|
|
2613
|
-
/* @__PURE__ */
|
|
2614
|
-
/* @__PURE__ */
|
|
2635
|
+
/* @__PURE__ */ jsx32(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
|
|
2636
|
+
/* @__PURE__ */ jsx32(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
|
|
2615
2637
|
] })
|
|
2616
2638
|
]
|
|
2617
2639
|
}
|
|
@@ -2619,7 +2641,7 @@ function AddressForm(props) {
|
|
|
2619
2641
|
}
|
|
2620
2642
|
|
|
2621
2643
|
// src/react/components/account/AddressesPanel.tsx
|
|
2622
|
-
import { Fragment as Fragment5, jsx as
|
|
2644
|
+
import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2623
2645
|
function AddressesPanel(props) {
|
|
2624
2646
|
const a = useAppearance(props.appearance);
|
|
2625
2647
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -2635,9 +2657,9 @@ function AddressesPanel(props) {
|
|
|
2635
2657
|
const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
|
|
2636
2658
|
const close = () => setEditing(null);
|
|
2637
2659
|
const formatAddress = (address) => [address.addressLine2, address.city, address.stateProvince, address.postalCode, address.countryCode].filter(Boolean).join(", ");
|
|
2638
|
-
return /* @__PURE__ */
|
|
2639
|
-
!editing && error ? /* @__PURE__ */
|
|
2640
|
-
editing ? /* @__PURE__ */
|
|
2660
|
+
return /* @__PURE__ */ jsx33(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx33("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs23("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
|
|
2661
|
+
!editing && error ? /* @__PURE__ */ jsx33(Alert, { tone: "error", children: error }) : null,
|
|
2662
|
+
editing ? /* @__PURE__ */ jsx33(
|
|
2641
2663
|
AddressForm,
|
|
2642
2664
|
{
|
|
2643
2665
|
initial: editing === "new" ? void 0 : editing,
|
|
@@ -2651,15 +2673,15 @@ function AddressesPanel(props) {
|
|
|
2651
2673
|
})
|
|
2652
2674
|
}
|
|
2653
2675
|
) : /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2654
|
-
/* @__PURE__ */
|
|
2655
|
-
/* @__PURE__ */
|
|
2676
|
+
/* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
|
|
2677
|
+
/* @__PURE__ */ jsx33(
|
|
2656
2678
|
PanelState,
|
|
2657
2679
|
{
|
|
2658
2680
|
resource,
|
|
2659
2681
|
isEmpty: (rows) => rows.length === 0,
|
|
2660
2682
|
emptyTitle: t.addresses.empty,
|
|
2661
2683
|
emptyDescription: t.addresses.emptyDescription,
|
|
2662
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */
|
|
2684
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ jsx33(
|
|
2663
2685
|
DataTable,
|
|
2664
2686
|
{
|
|
2665
2687
|
tableKey: "addressesPanel.table",
|
|
@@ -2672,9 +2694,9 @@ function AddressesPanel(props) {
|
|
|
2672
2694
|
address.addressLine1,
|
|
2673
2695
|
formatAddress(address) ? `, ${formatAddress(address)}` : ""
|
|
2674
2696
|
] }) },
|
|
2675
|
-
{ key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */
|
|
2697
|
+
{ key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
|
|
2676
2698
|
{ key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
|
|
2677
|
-
!address.isDefault ? /* @__PURE__ */
|
|
2699
|
+
!address.isDefault ? /* @__PURE__ */ jsx33(
|
|
2678
2700
|
Button,
|
|
2679
2701
|
{
|
|
2680
2702
|
variant: "secondary",
|
|
@@ -2683,7 +2705,7 @@ function AddressesPanel(props) {
|
|
|
2683
2705
|
children: t.addresses.makeDefault
|
|
2684
2706
|
}
|
|
2685
2707
|
) : null,
|
|
2686
|
-
/* @__PURE__ */
|
|
2708
|
+
/* @__PURE__ */ jsx33(
|
|
2687
2709
|
Button,
|
|
2688
2710
|
{
|
|
2689
2711
|
variant: "secondary",
|
|
@@ -2692,7 +2714,7 @@ function AddressesPanel(props) {
|
|
|
2692
2714
|
children: t.common.edit
|
|
2693
2715
|
}
|
|
2694
2716
|
),
|
|
2695
|
-
/* @__PURE__ */
|
|
2717
|
+
/* @__PURE__ */ jsx33(
|
|
2696
2718
|
Button,
|
|
2697
2719
|
{
|
|
2698
2720
|
variant: "danger",
|
|
@@ -2708,17 +2730,17 @@ function AddressesPanel(props) {
|
|
|
2708
2730
|
] }) }
|
|
2709
2731
|
]
|
|
2710
2732
|
}
|
|
2711
|
-
) : /* @__PURE__ */
|
|
2733
|
+
) : /* @__PURE__ */ jsx33("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ jsxs23("div", { ...a.el("addressesPanel.item", itemBase), children: [
|
|
2712
2734
|
/* @__PURE__ */ jsxs23("div", { children: [
|
|
2713
2735
|
/* @__PURE__ */ jsxs23("div", { className: "throttle-row", children: [
|
|
2714
|
-
/* @__PURE__ */
|
|
2715
|
-
address.isDefault ? /* @__PURE__ */
|
|
2736
|
+
/* @__PURE__ */ jsx33("strong", { children: address.label || address.addressLine1 }),
|
|
2737
|
+
address.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
|
|
2716
2738
|
] }),
|
|
2717
|
-
/* @__PURE__ */
|
|
2718
|
-
/* @__PURE__ */
|
|
2739
|
+
/* @__PURE__ */ jsx33("p", { className: "throttle-muted", children: address.addressLine1 }),
|
|
2740
|
+
/* @__PURE__ */ jsx33("p", { className: "throttle-muted", children: formatAddress(address) })
|
|
2719
2741
|
] }),
|
|
2720
2742
|
/* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
|
|
2721
|
-
!address.isDefault ? /* @__PURE__ */
|
|
2743
|
+
!address.isDefault ? /* @__PURE__ */ jsx33(
|
|
2722
2744
|
Button,
|
|
2723
2745
|
{
|
|
2724
2746
|
variant: actionVariant("secondary"),
|
|
@@ -2727,7 +2749,7 @@ function AddressesPanel(props) {
|
|
|
2727
2749
|
children: t.addresses.makeDefault
|
|
2728
2750
|
}
|
|
2729
2751
|
) : null,
|
|
2730
|
-
/* @__PURE__ */
|
|
2752
|
+
/* @__PURE__ */ jsx33(
|
|
2731
2753
|
Button,
|
|
2732
2754
|
{
|
|
2733
2755
|
variant: actionVariant("secondary"),
|
|
@@ -2736,7 +2758,7 @@ function AddressesPanel(props) {
|
|
|
2736
2758
|
children: t.common.edit
|
|
2737
2759
|
}
|
|
2738
2760
|
),
|
|
2739
|
-
/* @__PURE__ */
|
|
2761
|
+
/* @__PURE__ */ jsx33(
|
|
2740
2762
|
Button,
|
|
2741
2763
|
{
|
|
2742
2764
|
variant: actionVariant("danger"),
|
|
@@ -2762,7 +2784,7 @@ import { useState as useState17 } from "react";
|
|
|
2762
2784
|
|
|
2763
2785
|
// src/react/components/account/AddCardDialog.tsx
|
|
2764
2786
|
import { useEffect as useEffect7, useId as useId5, useRef as useRef7, useState as useState16 } from "react";
|
|
2765
|
-
import { jsx as
|
|
2787
|
+
import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2766
2788
|
function AddCardDialog(props) {
|
|
2767
2789
|
const { account } = useAuth();
|
|
2768
2790
|
const titleId = useId5();
|
|
@@ -2838,10 +2860,10 @@ function AddCardDialog(props) {
|
|
|
2838
2860
|
}, [src, account, t]);
|
|
2839
2861
|
if (!props.open) return null;
|
|
2840
2862
|
return /* @__PURE__ */ jsxs24(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
|
|
2841
|
-
/* @__PURE__ */
|
|
2863
|
+
/* @__PURE__ */ jsx34("div", { className: "throttle-modal__header", children: /* @__PURE__ */ jsx34("h2", { id: titleId, className: "throttle-modal__title", children: t.paymentMethods.addTitle }) }),
|
|
2842
2864
|
/* @__PURE__ */ jsxs24("div", { className: "throttle-modal__body", children: [
|
|
2843
|
-
error ? /* @__PURE__ */
|
|
2844
|
-
busy ? /* @__PURE__ */
|
|
2865
|
+
error ? /* @__PURE__ */ jsx34(Alert, { tone: "error", children: error }) : null,
|
|
2866
|
+
busy ? /* @__PURE__ */ jsx34("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx34(Spinner, {}) }) : src ? /* @__PURE__ */ jsx34(
|
|
2845
2867
|
"iframe",
|
|
2846
2868
|
{
|
|
2847
2869
|
className: "throttle-cardframe",
|
|
@@ -2849,13 +2871,13 @@ function AddCardDialog(props) {
|
|
|
2849
2871
|
title: t.paymentMethods.addTitle,
|
|
2850
2872
|
sandbox: "allow-scripts allow-forms allow-same-origin"
|
|
2851
2873
|
}
|
|
2852
|
-
) : !error ? /* @__PURE__ */
|
|
2874
|
+
) : !error ? /* @__PURE__ */ jsx34("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx34(Spinner, {}) }) : null
|
|
2853
2875
|
] })
|
|
2854
2876
|
] });
|
|
2855
2877
|
}
|
|
2856
2878
|
|
|
2857
2879
|
// src/react/components/account/PaymentMethodsPanel.tsx
|
|
2858
|
-
import { jsx as
|
|
2880
|
+
import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2859
2881
|
function PaymentMethodsPanel(props) {
|
|
2860
2882
|
const a = useAppearance(props.appearance);
|
|
2861
2883
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -2872,10 +2894,10 @@ function PaymentMethodsPanel(props) {
|
|
|
2872
2894
|
const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
|
|
2873
2895
|
const cardLabel = (card) => `${(card.cardBrand ?? card.methodType).toUpperCase()} \u2022\u2022\u2022\u2022 ${card.cardLastFour ?? "____"}`;
|
|
2874
2896
|
const expiryLabel = (card) => card.cardExpMonth && card.cardExpYear ? `${String(card.cardExpMonth).padStart(2, "0")}/${card.cardExpYear}` : "";
|
|
2875
|
-
return /* @__PURE__ */
|
|
2876
|
-
error ? /* @__PURE__ */
|
|
2877
|
-
emailVerified ? /* @__PURE__ */
|
|
2878
|
-
/* @__PURE__ */
|
|
2897
|
+
return /* @__PURE__ */ jsx35(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx35("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs25("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
|
|
2898
|
+
error ? /* @__PURE__ */ jsx35(Alert, { tone: "error", children: error }) : null,
|
|
2899
|
+
emailVerified ? /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
|
|
2900
|
+
/* @__PURE__ */ jsx35(
|
|
2879
2901
|
AddCardDialog,
|
|
2880
2902
|
{
|
|
2881
2903
|
open: adding,
|
|
@@ -2886,7 +2908,7 @@ function PaymentMethodsPanel(props) {
|
|
|
2886
2908
|
localization: props.localization
|
|
2887
2909
|
}
|
|
2888
2910
|
),
|
|
2889
|
-
/* @__PURE__ */
|
|
2911
|
+
/* @__PURE__ */ jsx35(
|
|
2890
2912
|
PanelState,
|
|
2891
2913
|
{
|
|
2892
2914
|
resource,
|
|
@@ -2895,7 +2917,7 @@ function PaymentMethodsPanel(props) {
|
|
|
2895
2917
|
isEmpty: (rows) => rows.length === 0,
|
|
2896
2918
|
emptyTitle: t.paymentMethods.empty,
|
|
2897
2919
|
emptyDescription: t.paymentMethods.emptyDescription,
|
|
2898
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */
|
|
2920
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ jsx35(
|
|
2899
2921
|
DataTable,
|
|
2900
2922
|
{
|
|
2901
2923
|
tableKey: "paymentMethodsPanel.table",
|
|
@@ -2905,9 +2927,9 @@ function PaymentMethodsPanel(props) {
|
|
|
2905
2927
|
columns: [
|
|
2906
2928
|
{ key: "card", label: t.paymentMethods.columnCard, render: (card) => cardLabel(card) },
|
|
2907
2929
|
{ key: "expires", label: t.paymentMethods.expires, render: (card) => expiryLabel(card) },
|
|
2908
|
-
{ key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */
|
|
2930
|
+
{ key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ jsx35(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
|
|
2909
2931
|
{ key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ jsxs25("div", { className: "throttle-actions", children: [
|
|
2910
|
-
!card.isDefault ? /* @__PURE__ */
|
|
2932
|
+
!card.isDefault ? /* @__PURE__ */ jsx35(
|
|
2911
2933
|
Button,
|
|
2912
2934
|
{
|
|
2913
2935
|
variant: "secondary",
|
|
@@ -2917,7 +2939,7 @@ function PaymentMethodsPanel(props) {
|
|
|
2917
2939
|
children: t.paymentMethods.makeDefault
|
|
2918
2940
|
}
|
|
2919
2941
|
) : null,
|
|
2920
|
-
/* @__PURE__ */
|
|
2942
|
+
/* @__PURE__ */ jsx35(
|
|
2921
2943
|
Button,
|
|
2922
2944
|
{
|
|
2923
2945
|
variant: "danger",
|
|
@@ -2933,11 +2955,11 @@ function PaymentMethodsPanel(props) {
|
|
|
2933
2955
|
] }) }
|
|
2934
2956
|
]
|
|
2935
2957
|
}
|
|
2936
|
-
) : /* @__PURE__ */
|
|
2958
|
+
) : /* @__PURE__ */ jsx35("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ jsxs25("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
|
|
2937
2959
|
/* @__PURE__ */ jsxs25("div", { children: [
|
|
2938
2960
|
/* @__PURE__ */ jsxs25("div", { className: "throttle-row", children: [
|
|
2939
|
-
/* @__PURE__ */
|
|
2940
|
-
card.isDefault ? /* @__PURE__ */
|
|
2961
|
+
/* @__PURE__ */ jsx35("strong", { children: cardLabel(card) }),
|
|
2962
|
+
card.isDefault ? /* @__PURE__ */ jsx35(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
|
|
2941
2963
|
] }),
|
|
2942
2964
|
card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ jsxs25("p", { className: "throttle-muted", children: [
|
|
2943
2965
|
t.paymentMethods.expires,
|
|
@@ -2948,7 +2970,7 @@ function PaymentMethodsPanel(props) {
|
|
|
2948
2970
|
] }) : null
|
|
2949
2971
|
] }),
|
|
2950
2972
|
/* @__PURE__ */ jsxs25("div", { className: "throttle-actions", children: [
|
|
2951
|
-
!card.isDefault ? /* @__PURE__ */
|
|
2973
|
+
!card.isDefault ? /* @__PURE__ */ jsx35(
|
|
2952
2974
|
Button,
|
|
2953
2975
|
{
|
|
2954
2976
|
variant: actionVariant("secondary"),
|
|
@@ -2958,7 +2980,7 @@ function PaymentMethodsPanel(props) {
|
|
|
2958
2980
|
children: t.paymentMethods.makeDefault
|
|
2959
2981
|
}
|
|
2960
2982
|
) : null,
|
|
2961
|
-
/* @__PURE__ */
|
|
2983
|
+
/* @__PURE__ */ jsx35(
|
|
2962
2984
|
Button,
|
|
2963
2985
|
{
|
|
2964
2986
|
variant: actionVariant("danger"),
|
|
@@ -3011,7 +3033,7 @@ function formatDate(value, locale) {
|
|
|
3011
3033
|
}
|
|
3012
3034
|
|
|
3013
3035
|
// src/react/components/account/OrderStatus.tsx
|
|
3014
|
-
import { Fragment as Fragment6, jsx as
|
|
3036
|
+
import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3015
3037
|
function copyKey(wire) {
|
|
3016
3038
|
return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
|
|
3017
3039
|
}
|
|
@@ -3019,7 +3041,7 @@ var ATTENTION_PAYMENT_STATES = /* @__PURE__ */ new Set(["pending", "failed", "di
|
|
|
3019
3041
|
var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["cancelled", "closed", "void", "expired", "voided"]);
|
|
3020
3042
|
function StatusBadge(props) {
|
|
3021
3043
|
const label = props.labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
|
|
3022
|
-
return /* @__PURE__ */
|
|
3044
|
+
return /* @__PURE__ */ jsx36(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
|
|
3023
3045
|
}
|
|
3024
3046
|
function OrderStatus(props) {
|
|
3025
3047
|
const labels = props.t.orders.statusLabels;
|
|
@@ -3027,13 +3049,13 @@ function OrderStatus(props) {
|
|
|
3027
3049
|
const lifecycle = labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
|
|
3028
3050
|
const money = props.paymentStatus ? payLabels[copyKey(props.paymentStatus)] : void 0;
|
|
3029
3051
|
return /* @__PURE__ */ jsxs26(Fragment6, { children: [
|
|
3030
|
-
/* @__PURE__ */
|
|
3031
|
-
money ? /* @__PURE__ */
|
|
3052
|
+
/* @__PURE__ */ jsx36(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
|
|
3053
|
+
money ? /* @__PURE__ */ jsx36(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
|
|
3032
3054
|
] });
|
|
3033
3055
|
}
|
|
3034
3056
|
|
|
3035
3057
|
// src/react/components/account/AddressBlock.tsx
|
|
3036
|
-
import { jsx as
|
|
3058
|
+
import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3037
3059
|
function addressLines(address) {
|
|
3038
3060
|
if (!address || typeof address !== "object") return [];
|
|
3039
3061
|
const a = address;
|
|
@@ -3054,13 +3076,13 @@ function AddressBlock(props) {
|
|
|
3054
3076
|
const lines = addressLines(props.address);
|
|
3055
3077
|
if (lines.length === 0) return null;
|
|
3056
3078
|
return /* @__PURE__ */ jsxs27("div", { ...a.el(props.elementKey ?? "orderDetail.address", "throttle-addressblock"), children: [
|
|
3057
|
-
/* @__PURE__ */
|
|
3058
|
-
lines.map((l) => /* @__PURE__ */
|
|
3079
|
+
/* @__PURE__ */ jsx37("h4", { className: "throttle-section__title", children: props.heading }),
|
|
3080
|
+
lines.map((l) => /* @__PURE__ */ jsx37("p", { className: "throttle-addressblock__line throttle-muted", children: l }, l))
|
|
3059
3081
|
] });
|
|
3060
3082
|
}
|
|
3061
3083
|
|
|
3062
3084
|
// src/react/components/account/OrderTimeline.tsx
|
|
3063
|
-
import { jsx as
|
|
3085
|
+
import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3064
3086
|
function orderTimeline(order, labels) {
|
|
3065
3087
|
const entries = [{ label: labels.placed, at: order.createdAt }];
|
|
3066
3088
|
if (order.completedAt) entries.push({ label: labels.completed, at: order.completedAt });
|
|
@@ -3072,23 +3094,23 @@ function OrderTimeline(props) {
|
|
|
3072
3094
|
const a = useAppearance();
|
|
3073
3095
|
if (props.entries.length <= 1) return null;
|
|
3074
3096
|
return /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.timeline", "throttle-timeline"), children: [
|
|
3075
|
-
/* @__PURE__ */
|
|
3097
|
+
/* @__PURE__ */ jsx38("h4", { className: "throttle-section__title", children: props.heading }),
|
|
3076
3098
|
props.entries.map((e) => /* @__PURE__ */ jsxs28("div", { className: "throttle-timeline__row", children: [
|
|
3077
|
-
/* @__PURE__ */
|
|
3078
|
-
/* @__PURE__ */
|
|
3079
|
-
/* @__PURE__ */
|
|
3099
|
+
/* @__PURE__ */ jsx38("span", { className: "throttle-timeline__dot", "aria-hidden": "true" }),
|
|
3100
|
+
/* @__PURE__ */ jsx38("span", { className: "throttle-timeline__label", children: e.label }),
|
|
3101
|
+
/* @__PURE__ */ jsx38("span", { className: "throttle-muted", children: formatDate(e.at, props.locale) })
|
|
3080
3102
|
] }, `${e.label}-${e.at}`))
|
|
3081
3103
|
] });
|
|
3082
3104
|
}
|
|
3083
3105
|
|
|
3084
3106
|
// src/react/components/account/OrderDetail.tsx
|
|
3085
|
-
import { Fragment as Fragment7, jsx as
|
|
3107
|
+
import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3086
3108
|
var CAN_PAY = /* @__PURE__ */ new Set(["draft", "pending"]);
|
|
3087
3109
|
var CAN_REORDER = /* @__PURE__ */ new Set(["fulfilled", "cancelled", "closed"]);
|
|
3088
3110
|
function Line(props) {
|
|
3089
3111
|
return /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
/* @__PURE__ */
|
|
3112
|
+
/* @__PURE__ */ jsx39("span", { className: "throttle-muted", children: props.label }),
|
|
3113
|
+
/* @__PURE__ */ jsx39("span", { children: props.value })
|
|
3092
3114
|
] });
|
|
3093
3115
|
}
|
|
3094
3116
|
function OrderDetail(props) {
|
|
@@ -3096,7 +3118,7 @@ function OrderDetail(props) {
|
|
|
3096
3118
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
3097
3119
|
const { t, locale } = useCopy(props.localization);
|
|
3098
3120
|
const resource = useOrder(props.orderId);
|
|
3099
|
-
return /* @__PURE__ */
|
|
3121
|
+
return /* @__PURE__ */ jsx39(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx39("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
|
|
3100
3122
|
props.onBack ? (
|
|
3101
3123
|
// Wrapped on purpose. The panel is a column flex container, so a
|
|
3102
3124
|
// direct child stretches to its full width however `width: auto`
|
|
@@ -3104,9 +3126,9 @@ function OrderDetail(props) {
|
|
|
3104
3126
|
// centred label. The wrapper takes the stretch; the button keeps
|
|
3105
3127
|
// its own width. A CSS fix would need a compound selector, and
|
|
3106
3128
|
// those outrank the merchant overrides in `appearance.elements`.
|
|
3107
|
-
/* @__PURE__ */
|
|
3129
|
+
/* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
|
|
3108
3130
|
) : null,
|
|
3109
|
-
/* @__PURE__ */
|
|
3131
|
+
/* @__PURE__ */ jsx39(
|
|
3110
3132
|
PanelState,
|
|
3111
3133
|
{
|
|
3112
3134
|
resource,
|
|
@@ -3115,15 +3137,15 @@ function OrderDetail(props) {
|
|
|
3115
3137
|
skeletonRows: 5,
|
|
3116
3138
|
children: (order) => /* @__PURE__ */ jsxs29(Fragment7, { children: [
|
|
3117
3139
|
/* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
|
|
3118
|
-
/* @__PURE__ */
|
|
3119
|
-
/* @__PURE__ */
|
|
3140
|
+
/* @__PURE__ */ jsx39("h3", { children: order.orderNumber }),
|
|
3141
|
+
/* @__PURE__ */ jsx39(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
|
|
3120
3142
|
] }),
|
|
3121
|
-
/* @__PURE__ */
|
|
3122
|
-
/* @__PURE__ */
|
|
3123
|
-
item.imageUrl ? /* @__PURE__ */
|
|
3143
|
+
/* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
|
|
3144
|
+
/* @__PURE__ */ jsx39("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
|
|
3145
|
+
item.imageUrl ? /* @__PURE__ */ jsx39("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
|
|
3124
3146
|
/* @__PURE__ */ jsxs29("div", { style: { flex: 1 }, children: [
|
|
3125
|
-
/* @__PURE__ */
|
|
3126
|
-
item.description ? /* @__PURE__ */
|
|
3147
|
+
/* @__PURE__ */ jsx39("strong", { children: item.name }),
|
|
3148
|
+
item.description ? /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: item.description }) : null,
|
|
3127
3149
|
/* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
|
|
3128
3150
|
t.orders.quantity,
|
|
3129
3151
|
" ",
|
|
@@ -3132,17 +3154,17 @@ function OrderDetail(props) {
|
|
|
3132
3154
|
formatMoney(item.unitPrice, order.currency, locale)
|
|
3133
3155
|
] })
|
|
3134
3156
|
] }),
|
|
3135
|
-
/* @__PURE__ */
|
|
3157
|
+
/* @__PURE__ */ jsx39("span", { children: formatMoney(item.total, order.currency, locale) })
|
|
3136
3158
|
] }, item.id)) }),
|
|
3137
3159
|
/* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
|
|
3138
|
-
/* @__PURE__ */
|
|
3139
|
-
order.discountTotal ? /* @__PURE__ */
|
|
3140
|
-
/* @__PURE__ */
|
|
3141
|
-
/* @__PURE__ */
|
|
3142
|
-
/* @__PURE__ */
|
|
3160
|
+
/* @__PURE__ */ jsx39(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
|
|
3161
|
+
order.discountTotal ? /* @__PURE__ */ jsx39(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
|
|
3162
|
+
/* @__PURE__ */ jsx39(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
|
|
3163
|
+
/* @__PURE__ */ jsx39(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
|
|
3164
|
+
/* @__PURE__ */ jsx39(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
|
|
3143
3165
|
] }),
|
|
3144
3166
|
/* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
|
|
3145
|
-
/* @__PURE__ */
|
|
3167
|
+
/* @__PURE__ */ jsx39(
|
|
3146
3168
|
AddressBlock,
|
|
3147
3169
|
{
|
|
3148
3170
|
heading: t.orders.shipTo,
|
|
@@ -3150,7 +3172,7 @@ function OrderDetail(props) {
|
|
|
3150
3172
|
elementKey: "orderDetail.shippingAddress"
|
|
3151
3173
|
}
|
|
3152
3174
|
),
|
|
3153
|
-
/* @__PURE__ */
|
|
3175
|
+
/* @__PURE__ */ jsx39(
|
|
3154
3176
|
AddressBlock,
|
|
3155
3177
|
{
|
|
3156
3178
|
heading: t.orders.billTo,
|
|
@@ -3159,7 +3181,7 @@ function OrderDetail(props) {
|
|
|
3159
3181
|
}
|
|
3160
3182
|
)
|
|
3161
3183
|
] }),
|
|
3162
|
-
/* @__PURE__ */
|
|
3184
|
+
/* @__PURE__ */ jsx39(
|
|
3163
3185
|
OrderTimeline,
|
|
3164
3186
|
{
|
|
3165
3187
|
heading: t.orders.history,
|
|
@@ -3184,7 +3206,7 @@ function OrderDetail(props) {
|
|
|
3184
3206
|
}))
|
|
3185
3207
|
};
|
|
3186
3208
|
return /* @__PURE__ */ jsxs29("div", { className: "throttle-actions", children: [
|
|
3187
|
-
props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */
|
|
3209
|
+
props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ jsx39(
|
|
3188
3210
|
Button,
|
|
3189
3211
|
{
|
|
3190
3212
|
elementKey: "orderDetail.payButton",
|
|
@@ -3192,7 +3214,7 @@ function OrderDetail(props) {
|
|
|
3192
3214
|
children: t.orders.payNow
|
|
3193
3215
|
}
|
|
3194
3216
|
) : null,
|
|
3195
|
-
props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */
|
|
3217
|
+
props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ jsx39(
|
|
3196
3218
|
Button,
|
|
3197
3219
|
{
|
|
3198
3220
|
variant: "secondary",
|
|
@@ -3201,7 +3223,7 @@ function OrderDetail(props) {
|
|
|
3201
3223
|
children: t.orders.track
|
|
3202
3224
|
}
|
|
3203
3225
|
) : null,
|
|
3204
|
-
props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */
|
|
3226
|
+
props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ jsx39(
|
|
3205
3227
|
Button,
|
|
3206
3228
|
{
|
|
3207
3229
|
variant: "secondary",
|
|
@@ -3210,7 +3232,7 @@ function OrderDetail(props) {
|
|
|
3210
3232
|
children: t.orders.reorder
|
|
3211
3233
|
}
|
|
3212
3234
|
) : null,
|
|
3213
|
-
order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */
|
|
3235
|
+
order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ jsx39(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
|
|
3214
3236
|
] });
|
|
3215
3237
|
})()
|
|
3216
3238
|
] })
|
|
@@ -3220,7 +3242,7 @@ function OrderDetail(props) {
|
|
|
3220
3242
|
}
|
|
3221
3243
|
|
|
3222
3244
|
// src/react/components/account/OrdersPanel.tsx
|
|
3223
|
-
import { jsx as
|
|
3245
|
+
import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3224
3246
|
function OrdersPanel(props) {
|
|
3225
3247
|
const a = useAppearance(props.appearance);
|
|
3226
3248
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3233,7 +3255,7 @@ function OrdersPanel(props) {
|
|
|
3233
3255
|
const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
|
|
3234
3256
|
const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
|
|
3235
3257
|
if (openId) {
|
|
3236
|
-
return /* @__PURE__ */
|
|
3258
|
+
return /* @__PURE__ */ jsx40(
|
|
3237
3259
|
OrderDetail,
|
|
3238
3260
|
{
|
|
3239
3261
|
orderId: openId,
|
|
@@ -3247,7 +3269,7 @@ function OrdersPanel(props) {
|
|
|
3247
3269
|
}
|
|
3248
3270
|
);
|
|
3249
3271
|
}
|
|
3250
|
-
return /* @__PURE__ */
|
|
3272
|
+
return /* @__PURE__ */ jsx40(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx40("div", { ...a.rootProps, children: /* @__PURE__ */ jsx40("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx40(
|
|
3251
3273
|
PanelState,
|
|
3252
3274
|
{
|
|
3253
3275
|
resource,
|
|
@@ -3256,7 +3278,7 @@ function OrdersPanel(props) {
|
|
|
3256
3278
|
isEmpty: (rows) => rows.length === 0,
|
|
3257
3279
|
emptyTitle: t.orders.empty,
|
|
3258
3280
|
emptyDescription: t.orders.emptyDescription,
|
|
3259
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */
|
|
3281
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ jsx40(
|
|
3260
3282
|
DataTable,
|
|
3261
3283
|
{
|
|
3262
3284
|
tableKey: "ordersPanel.table",
|
|
@@ -3270,25 +3292,25 @@ function OrdersPanel(props) {
|
|
|
3270
3292
|
{
|
|
3271
3293
|
key: "status",
|
|
3272
3294
|
label: t.orders.status,
|
|
3273
|
-
render: (o) => /* @__PURE__ */
|
|
3295
|
+
render: (o) => /* @__PURE__ */ jsx40(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
|
|
3274
3296
|
},
|
|
3275
3297
|
{
|
|
3276
3298
|
key: "total",
|
|
3277
3299
|
label: t.orders.total,
|
|
3278
|
-
render: (o) => /* @__PURE__ */
|
|
3300
|
+
render: (o) => /* @__PURE__ */ jsx40("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
|
|
3279
3301
|
}
|
|
3280
3302
|
]
|
|
3281
3303
|
}
|
|
3282
|
-
) : /* @__PURE__ */
|
|
3304
|
+
) : /* @__PURE__ */ jsx40("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ jsxs30("div", { ...a.el("ordersPanel.item", itemBase), children: [
|
|
3283
3305
|
/* @__PURE__ */ jsxs30("div", { children: [
|
|
3284
3306
|
/* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
|
|
3285
|
-
/* @__PURE__ */
|
|
3286
|
-
/* @__PURE__ */
|
|
3307
|
+
/* @__PURE__ */ jsx40("strong", { children: o.orderNumber }),
|
|
3308
|
+
/* @__PURE__ */ jsx40(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
|
|
3287
3309
|
] }),
|
|
3288
|
-
/* @__PURE__ */
|
|
3289
|
-
/* @__PURE__ */
|
|
3310
|
+
/* @__PURE__ */ jsx40("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
|
|
3311
|
+
/* @__PURE__ */ jsx40("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
|
|
3290
3312
|
] }),
|
|
3291
|
-
/* @__PURE__ */
|
|
3313
|
+
/* @__PURE__ */ jsx40("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx40(
|
|
3292
3314
|
Button,
|
|
3293
3315
|
{
|
|
3294
3316
|
variant: rowsVariant ? "link" : "secondary",
|
|
@@ -3306,11 +3328,11 @@ function OrdersPanel(props) {
|
|
|
3306
3328
|
import { useState as useState19 } from "react";
|
|
3307
3329
|
|
|
3308
3330
|
// src/react/components/account/InvoiceDetail.tsx
|
|
3309
|
-
import { Fragment as Fragment8, jsx as
|
|
3331
|
+
import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3310
3332
|
function Line2(props) {
|
|
3311
3333
|
return /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
|
|
3312
|
-
/* @__PURE__ */
|
|
3313
|
-
/* @__PURE__ */
|
|
3334
|
+
/* @__PURE__ */ jsx41("span", { className: "throttle-muted", children: props.label }),
|
|
3335
|
+
/* @__PURE__ */ jsx41("span", { children: props.value })
|
|
3314
3336
|
] });
|
|
3315
3337
|
}
|
|
3316
3338
|
function InvoiceDetail(props) {
|
|
@@ -3320,7 +3342,7 @@ function InvoiceDetail(props) {
|
|
|
3320
3342
|
const { account } = useAuth();
|
|
3321
3343
|
const resource = useInvoice(props.invoiceId);
|
|
3322
3344
|
const { submitting, error, run } = useAction();
|
|
3323
|
-
return /* @__PURE__ */
|
|
3345
|
+
return /* @__PURE__ */ jsx41(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx41("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs31("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
|
|
3324
3346
|
props.onBack ? (
|
|
3325
3347
|
// Wrapped on purpose. The panel is a column flex container, so a
|
|
3326
3348
|
// direct child stretches to its full width however `width: auto`
|
|
@@ -3328,25 +3350,25 @@ function InvoiceDetail(props) {
|
|
|
3328
3350
|
// centred label. The wrapper takes the stretch; the button keeps
|
|
3329
3351
|
// its own width. A CSS fix would need a compound selector, and
|
|
3330
3352
|
// those outrank the merchant overrides in `appearance.elements`.
|
|
3331
|
-
/* @__PURE__ */
|
|
3353
|
+
/* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
|
|
3332
3354
|
) : null,
|
|
3333
|
-
/* @__PURE__ */
|
|
3355
|
+
/* @__PURE__ */ jsx41(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ jsxs31(Fragment8, { children: [
|
|
3334
3356
|
/* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
|
|
3335
|
-
/* @__PURE__ */
|
|
3336
|
-
/* @__PURE__ */
|
|
3357
|
+
/* @__PURE__ */ jsx41("h3", { children: invoice.number }),
|
|
3358
|
+
/* @__PURE__ */ jsx41(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
|
|
3337
3359
|
] }),
|
|
3338
3360
|
/* @__PURE__ */ jsxs31("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
|
|
3339
|
-
/* @__PURE__ */
|
|
3340
|
-
invoice.dueAt ? /* @__PURE__ */
|
|
3341
|
-
invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */
|
|
3361
|
+
/* @__PURE__ */ jsx41(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
|
|
3362
|
+
invoice.dueAt ? /* @__PURE__ */ jsx41(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
|
|
3363
|
+
invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ jsx41(
|
|
3342
3364
|
Line2,
|
|
3343
3365
|
{
|
|
3344
3366
|
label: t.invoices.period,
|
|
3345
3367
|
value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
|
|
3346
3368
|
}
|
|
3347
3369
|
) : null,
|
|
3348
|
-
/* @__PURE__ */
|
|
3349
|
-
invoice.amountRefunded ? /* @__PURE__ */
|
|
3370
|
+
/* @__PURE__ */ jsx41(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
|
|
3371
|
+
invoice.amountRefunded ? /* @__PURE__ */ jsx41(
|
|
3350
3372
|
Line2,
|
|
3351
3373
|
{
|
|
3352
3374
|
label: t.invoices.refunded,
|
|
@@ -3354,8 +3376,8 @@ function InvoiceDetail(props) {
|
|
|
3354
3376
|
}
|
|
3355
3377
|
) : null
|
|
3356
3378
|
] }),
|
|
3357
|
-
error ? /* @__PURE__ */
|
|
3358
|
-
/* @__PURE__ */
|
|
3379
|
+
error ? /* @__PURE__ */ jsx41(Alert, { tone: "error", children: error }) : null,
|
|
3380
|
+
/* @__PURE__ */ jsx41(
|
|
3359
3381
|
Button,
|
|
3360
3382
|
{
|
|
3361
3383
|
variant: "secondary",
|
|
@@ -3374,7 +3396,7 @@ function InvoiceDetail(props) {
|
|
|
3374
3396
|
}
|
|
3375
3397
|
|
|
3376
3398
|
// src/react/components/account/InvoicesPanel.tsx
|
|
3377
|
-
import { jsx as
|
|
3399
|
+
import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3378
3400
|
function InvoicesPanel(props) {
|
|
3379
3401
|
const a = useAppearance(props.appearance);
|
|
3380
3402
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3387,7 +3409,7 @@ function InvoicesPanel(props) {
|
|
|
3387
3409
|
const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
|
|
3388
3410
|
const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
|
|
3389
3411
|
if (openId) {
|
|
3390
|
-
return /* @__PURE__ */
|
|
3412
|
+
return /* @__PURE__ */ jsx42(
|
|
3391
3413
|
InvoiceDetail,
|
|
3392
3414
|
{
|
|
3393
3415
|
invoiceId: openId,
|
|
@@ -3397,7 +3419,7 @@ function InvoicesPanel(props) {
|
|
|
3397
3419
|
}
|
|
3398
3420
|
);
|
|
3399
3421
|
}
|
|
3400
|
-
return /* @__PURE__ */
|
|
3422
|
+
return /* @__PURE__ */ jsx42(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx42("div", { ...a.rootProps, children: /* @__PURE__ */ jsx42("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx42(
|
|
3401
3423
|
PanelState,
|
|
3402
3424
|
{
|
|
3403
3425
|
resource,
|
|
@@ -3406,7 +3428,7 @@ function InvoicesPanel(props) {
|
|
|
3406
3428
|
isEmpty: (rows) => rows.length === 0,
|
|
3407
3429
|
emptyTitle: t.invoices.empty,
|
|
3408
3430
|
emptyDescription: t.invoices.emptyDescription,
|
|
3409
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */
|
|
3431
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ jsx42(
|
|
3410
3432
|
DataTable,
|
|
3411
3433
|
{
|
|
3412
3434
|
tableKey: "invoicesPanel.table",
|
|
@@ -3417,24 +3439,24 @@ function InvoicesPanel(props) {
|
|
|
3417
3439
|
columns: [
|
|
3418
3440
|
{ key: "number", label: t.invoices.number },
|
|
3419
3441
|
{ key: "issuedAt", label: t.invoices.issued, render: (i) => formatDate(i.issuedAt, locale) },
|
|
3420
|
-
{ key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */
|
|
3442
|
+
{ key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ jsx42(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
|
|
3421
3443
|
{
|
|
3422
3444
|
key: "total",
|
|
3423
3445
|
label: t.invoices.total,
|
|
3424
|
-
render: (i) => /* @__PURE__ */
|
|
3446
|
+
render: (i) => /* @__PURE__ */ jsx42("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
|
|
3425
3447
|
}
|
|
3426
3448
|
]
|
|
3427
3449
|
}
|
|
3428
|
-
) : /* @__PURE__ */
|
|
3450
|
+
) : /* @__PURE__ */ jsx42("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ jsxs32("div", { ...a.el("invoicesPanel.item", itemBase), children: [
|
|
3429
3451
|
/* @__PURE__ */ jsxs32("div", { children: [
|
|
3430
3452
|
/* @__PURE__ */ jsxs32("div", { className: "throttle-row", children: [
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3453
|
+
/* @__PURE__ */ jsx42("strong", { children: i.number }),
|
|
3454
|
+
/* @__PURE__ */ jsx42(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
|
|
3433
3455
|
] }),
|
|
3434
|
-
/* @__PURE__ */
|
|
3435
|
-
/* @__PURE__ */
|
|
3456
|
+
/* @__PURE__ */ jsx42("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
|
|
3457
|
+
/* @__PURE__ */ jsx42("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
|
|
3436
3458
|
] }),
|
|
3437
|
-
/* @__PURE__ */
|
|
3459
|
+
/* @__PURE__ */ jsx42("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx42(
|
|
3438
3460
|
Button,
|
|
3439
3461
|
{
|
|
3440
3462
|
variant: rowsVariant ? "link" : "secondary",
|
|
@@ -3449,7 +3471,7 @@ function InvoicesPanel(props) {
|
|
|
3449
3471
|
}
|
|
3450
3472
|
|
|
3451
3473
|
// src/react/components/account/SubscriptionsPanel.tsx
|
|
3452
|
-
import { jsx as
|
|
3474
|
+
import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3453
3475
|
var CAN_PAUSE = /* @__PURE__ */ new Set(["active", "trialing"]);
|
|
3454
3476
|
var CAN_RESUME = /* @__PURE__ */ new Set(["paused"]);
|
|
3455
3477
|
var CAN_CANCEL = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
|
|
@@ -3475,7 +3497,7 @@ function SubscriptionsPanel(props) {
|
|
|
3475
3497
|
const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${sub.interval}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
|
|
3476
3498
|
const renewsLabel = (sub) => formatDate(sub.status === "cancelled" ? sub.cancelledAt ?? sub.currentPeriodEnd : sub.currentPeriodEnd, locale);
|
|
3477
3499
|
const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ jsxs33("div", { className: "throttle-actions", children: [
|
|
3478
|
-
CAN_PAUSE.has(sub.status) ? /* @__PURE__ */
|
|
3500
|
+
CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ jsx43(
|
|
3479
3501
|
Button,
|
|
3480
3502
|
{
|
|
3481
3503
|
variant: variantFor("secondary"),
|
|
@@ -3488,7 +3510,7 @@ function SubscriptionsPanel(props) {
|
|
|
3488
3510
|
children: t.subscriptions.pauseButton
|
|
3489
3511
|
}
|
|
3490
3512
|
) : null,
|
|
3491
|
-
CAN_RESUME.has(sub.status) ? /* @__PURE__ */
|
|
3513
|
+
CAN_RESUME.has(sub.status) ? /* @__PURE__ */ jsx43(
|
|
3492
3514
|
Button,
|
|
3493
3515
|
{
|
|
3494
3516
|
variant: variantFor("secondary"),
|
|
@@ -3501,7 +3523,7 @@ function SubscriptionsPanel(props) {
|
|
|
3501
3523
|
children: t.subscriptions.resumeButton
|
|
3502
3524
|
}
|
|
3503
3525
|
) : null,
|
|
3504
|
-
CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */
|
|
3526
|
+
CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(
|
|
3505
3527
|
Button,
|
|
3506
3528
|
{
|
|
3507
3529
|
variant: variantFor("secondary"),
|
|
@@ -3515,7 +3537,7 @@ function SubscriptionsPanel(props) {
|
|
|
3515
3537
|
children: t.subscriptions.cancelAtPeriodEnd
|
|
3516
3538
|
}
|
|
3517
3539
|
) : null,
|
|
3518
|
-
CAN_CANCEL.has(sub.status) ? /* @__PURE__ */
|
|
3540
|
+
CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ jsx43(
|
|
3519
3541
|
Button,
|
|
3520
3542
|
{
|
|
3521
3543
|
variant: variantFor("danger"),
|
|
@@ -3530,9 +3552,9 @@ function SubscriptionsPanel(props) {
|
|
|
3530
3552
|
}
|
|
3531
3553
|
) : null
|
|
3532
3554
|
] });
|
|
3533
|
-
return /* @__PURE__ */
|
|
3534
|
-
error ? /* @__PURE__ */
|
|
3535
|
-
/* @__PURE__ */
|
|
3555
|
+
return /* @__PURE__ */ jsx43(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx43("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs33("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
|
|
3556
|
+
error ? /* @__PURE__ */ jsx43(Alert, { tone: "error", children: error }) : null,
|
|
3557
|
+
/* @__PURE__ */ jsx43(
|
|
3536
3558
|
PanelState,
|
|
3537
3559
|
{
|
|
3538
3560
|
resource,
|
|
@@ -3541,7 +3563,7 @@ function SubscriptionsPanel(props) {
|
|
|
3541
3563
|
isEmpty: (rows) => rows.length === 0,
|
|
3542
3564
|
emptyTitle: t.subscriptions.empty,
|
|
3543
3565
|
emptyDescription: t.subscriptions.emptyDescription,
|
|
3544
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */
|
|
3566
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ jsx43(
|
|
3545
3567
|
DataTable,
|
|
3546
3568
|
{
|
|
3547
3569
|
tableKey: "subscriptionsPanel.table",
|
|
@@ -3550,20 +3572,20 @@ function SubscriptionsPanel(props) {
|
|
|
3550
3572
|
rows,
|
|
3551
3573
|
columns: [
|
|
3552
3574
|
{ key: "plan", label: t.subscriptions.columnPlan, render: (sub) => sub.planName ?? sub.planReference },
|
|
3553
|
-
{ key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */
|
|
3575
|
+
{ key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ jsx43("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
|
|
3554
3576
|
{ key: "renews", label: t.subscriptions.columnRenews, render: (sub) => renewsLabel(sub) },
|
|
3555
3577
|
{ key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
|
|
3556
|
-
/* @__PURE__ */
|
|
3557
|
-
sub.cancelAtPeriodEnd ? /* @__PURE__ */
|
|
3578
|
+
/* @__PURE__ */ jsx43(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
|
|
3579
|
+
sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
|
|
3558
3580
|
] }) },
|
|
3559
3581
|
{ key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
|
|
3560
3582
|
]
|
|
3561
3583
|
}
|
|
3562
|
-
) : /* @__PURE__ */
|
|
3584
|
+
) : /* @__PURE__ */ jsx43("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ jsxs33("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
|
|
3563
3585
|
/* @__PURE__ */ jsxs33("div", { children: [
|
|
3564
3586
|
/* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
|
|
3565
|
-
/* @__PURE__ */
|
|
3566
|
-
/* @__PURE__ */
|
|
3587
|
+
/* @__PURE__ */ jsx43("strong", { children: sub.planName ?? sub.planReference }),
|
|
3588
|
+
/* @__PURE__ */ jsx43(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
|
|
3567
3589
|
] }),
|
|
3568
3590
|
/* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
|
|
3569
3591
|
formatMoney(sub.amount, sub.currency, locale),
|
|
@@ -3585,7 +3607,7 @@ function SubscriptionsPanel(props) {
|
|
|
3585
3607
|
" ",
|
|
3586
3608
|
formatDate(sub.trialEnd, locale)
|
|
3587
3609
|
] }) : null,
|
|
3588
|
-
sub.cancelAtPeriodEnd ? /* @__PURE__ */
|
|
3610
|
+
sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
|
|
3589
3611
|
] }),
|
|
3590
3612
|
lifecycleActions(sub, actionVariant)
|
|
3591
3613
|
] }, sub.id)) })
|
|
@@ -3628,7 +3650,7 @@ function describeDevice(userAgent) {
|
|
|
3628
3650
|
}
|
|
3629
3651
|
|
|
3630
3652
|
// src/react/components/account/SecurityPanel.tsx
|
|
3631
|
-
import { Fragment as Fragment9, jsx as
|
|
3653
|
+
import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3632
3654
|
function SecurityPanel(props) {
|
|
3633
3655
|
const a = useAppearance(props.appearance);
|
|
3634
3656
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3659,7 +3681,7 @@ function SecurityPanel(props) {
|
|
|
3659
3681
|
void load();
|
|
3660
3682
|
}, [load]);
|
|
3661
3683
|
const others = (sessions ?? []).filter((s) => !s.current);
|
|
3662
|
-
return /* @__PURE__ */
|
|
3684
|
+
return /* @__PURE__ */ jsx44(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx44("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
|
|
3663
3685
|
/* @__PURE__ */ jsxs34(
|
|
3664
3686
|
"form",
|
|
3665
3687
|
{
|
|
@@ -3673,8 +3695,8 @@ function SecurityPanel(props) {
|
|
|
3673
3695
|
});
|
|
3674
3696
|
},
|
|
3675
3697
|
children: [
|
|
3676
|
-
/* @__PURE__ */
|
|
3677
|
-
/* @__PURE__ */
|
|
3698
|
+
/* @__PURE__ */ jsx44("h3", { children: t.security.passwordTitle }),
|
|
3699
|
+
/* @__PURE__ */ jsx44(
|
|
3678
3700
|
Field,
|
|
3679
3701
|
{
|
|
3680
3702
|
label: t.security.newPassword,
|
|
@@ -3685,21 +3707,21 @@ function SecurityPanel(props) {
|
|
|
3685
3707
|
onChange: setPassword
|
|
3686
3708
|
}
|
|
3687
3709
|
),
|
|
3688
|
-
passwordAction.error ? /* @__PURE__ */
|
|
3689
|
-
passwordAction.notice ? /* @__PURE__ */
|
|
3690
|
-
/* @__PURE__ */
|
|
3710
|
+
passwordAction.error ? /* @__PURE__ */ jsx44(Alert, { tone: "error", children: passwordAction.error }) : null,
|
|
3711
|
+
passwordAction.notice ? /* @__PURE__ */ jsx44(Alert, { tone: "success", children: passwordAction.notice }) : null,
|
|
3712
|
+
/* @__PURE__ */ jsx44(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
|
|
3691
3713
|
]
|
|
3692
3714
|
}
|
|
3693
3715
|
),
|
|
3694
3716
|
/* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
|
|
3695
|
-
/* @__PURE__ */
|
|
3717
|
+
/* @__PURE__ */ jsx44("h3", { children: t.security.sessionsTitle }),
|
|
3696
3718
|
listError ? /* @__PURE__ */ jsxs34(Fragment9, { children: [
|
|
3697
|
-
/* @__PURE__ */
|
|
3698
|
-
/* @__PURE__ */
|
|
3719
|
+
/* @__PURE__ */ jsx44(Alert, { tone: "error", children: listError }),
|
|
3720
|
+
/* @__PURE__ */ jsx44(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
|
|
3699
3721
|
] }) : null,
|
|
3700
|
-
sessionAction.error ? /* @__PURE__ */
|
|
3701
|
-
sessions === null && !listError ? /* @__PURE__ */
|
|
3702
|
-
sessions !== null && !listError && variant === "table" ? /* @__PURE__ */
|
|
3722
|
+
sessionAction.error ? /* @__PURE__ */ jsx44(Alert, { tone: "error", children: sessionAction.error }) : null,
|
|
3723
|
+
sessions === null && !listError ? /* @__PURE__ */ jsx44(Skeleton, { count: 2 }) : null,
|
|
3724
|
+
sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ jsx44(
|
|
3703
3725
|
DataTable,
|
|
3704
3726
|
{
|
|
3705
3727
|
tableKey: "securityPanel.table",
|
|
@@ -3708,11 +3730,11 @@ function SecurityPanel(props) {
|
|
|
3708
3730
|
rows: sessions,
|
|
3709
3731
|
columns: [
|
|
3710
3732
|
{ key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ jsxs34("div", { className: "throttle-row", children: [
|
|
3711
|
-
/* @__PURE__ */
|
|
3712
|
-
session.current ? /* @__PURE__ */
|
|
3733
|
+
/* @__PURE__ */ jsx44("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
|
|
3734
|
+
session.current ? /* @__PURE__ */ jsx44(Badge, { tone: "success", children: t.security.thisDevice }) : null
|
|
3713
3735
|
] }) },
|
|
3714
3736
|
{ key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
|
|
3715
|
-
{ key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */
|
|
3737
|
+
{ key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ jsx44(
|
|
3716
3738
|
Button,
|
|
3717
3739
|
{
|
|
3718
3740
|
variant: "danger",
|
|
@@ -3730,8 +3752,8 @@ function SecurityPanel(props) {
|
|
|
3730
3752
|
) : (sessions ?? []).map((session) => /* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
|
|
3731
3753
|
/* @__PURE__ */ jsxs34("div", { children: [
|
|
3732
3754
|
/* @__PURE__ */ jsxs34("div", { className: "throttle-row", children: [
|
|
3733
|
-
/* @__PURE__ */
|
|
3734
|
-
session.current ? /* @__PURE__ */
|
|
3755
|
+
/* @__PURE__ */ jsx44("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
|
|
3756
|
+
session.current ? /* @__PURE__ */ jsx44(Badge, { tone: "success", children: t.security.thisDevice }) : null
|
|
3735
3757
|
] }),
|
|
3736
3758
|
/* @__PURE__ */ jsxs34("p", { className: "throttle-muted", children: [
|
|
3737
3759
|
t.security.lastActive,
|
|
@@ -3739,7 +3761,7 @@ function SecurityPanel(props) {
|
|
|
3739
3761
|
formatDate(session.lastUsedAt, locale)
|
|
3740
3762
|
] })
|
|
3741
3763
|
] }),
|
|
3742
|
-
!session.current ? /* @__PURE__ */
|
|
3764
|
+
!session.current ? /* @__PURE__ */ jsx44(
|
|
3743
3765
|
Button,
|
|
3744
3766
|
{
|
|
3745
3767
|
variant: revokeVariant,
|
|
@@ -3753,8 +3775,8 @@ function SecurityPanel(props) {
|
|
|
3753
3775
|
}
|
|
3754
3776
|
) : null
|
|
3755
3777
|
] }, session.id)),
|
|
3756
|
-
sessions !== null && others.length === 0 ? /* @__PURE__ */
|
|
3757
|
-
others.length > 0 ? /* @__PURE__ */
|
|
3778
|
+
sessions !== null && others.length === 0 ? /* @__PURE__ */ jsx44("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
|
|
3779
|
+
others.length > 0 ? /* @__PURE__ */ jsx44(
|
|
3758
3780
|
Button,
|
|
3759
3781
|
{
|
|
3760
3782
|
variant: "danger",
|
|
@@ -3774,7 +3796,7 @@ function SecurityPanel(props) {
|
|
|
3774
3796
|
}
|
|
3775
3797
|
|
|
3776
3798
|
// src/react/components/account/AccountDashboard.tsx
|
|
3777
|
-
import { Fragment as Fragment10, jsx as
|
|
3799
|
+
import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3778
3800
|
var ACCOUNT_TABS = [
|
|
3779
3801
|
"profile",
|
|
3780
3802
|
"addresses",
|
|
@@ -3826,7 +3848,7 @@ function AccountDashboard(props) {
|
|
|
3826
3848
|
};
|
|
3827
3849
|
const shared = { appearance: props.appearance, localization: props.localization };
|
|
3828
3850
|
const sidebar = (props.layout ?? "sidebar") === "sidebar";
|
|
3829
|
-
const nav = /* @__PURE__ */
|
|
3851
|
+
const nav = /* @__PURE__ */ jsx45(
|
|
3830
3852
|
Tabs,
|
|
3831
3853
|
{
|
|
3832
3854
|
idBase,
|
|
@@ -3851,10 +3873,10 @@ function AccountDashboard(props) {
|
|
|
3851
3873
|
"aria-labelledby": `${idBase}-tab-${active}`,
|
|
3852
3874
|
tabIndex: 0,
|
|
3853
3875
|
children: [
|
|
3854
|
-
active === "profile" ? /* @__PURE__ */
|
|
3855
|
-
active === "addresses" ? /* @__PURE__ */
|
|
3856
|
-
active === "paymentMethods" ? /* @__PURE__ */
|
|
3857
|
-
active === "orders" ? /* @__PURE__ */
|
|
3876
|
+
active === "profile" ? /* @__PURE__ */ jsx45(ProfilePanel, { ...shared }) : null,
|
|
3877
|
+
active === "addresses" ? /* @__PURE__ */ jsx45(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
3878
|
+
active === "paymentMethods" ? /* @__PURE__ */ jsx45(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
3879
|
+
active === "orders" ? /* @__PURE__ */ jsx45(
|
|
3858
3880
|
OrdersPanel,
|
|
3859
3881
|
{
|
|
3860
3882
|
...shared,
|
|
@@ -3865,32 +3887,32 @@ function AccountDashboard(props) {
|
|
|
3865
3887
|
onTrackShipment: props.onTrackShipment
|
|
3866
3888
|
}
|
|
3867
3889
|
) : null,
|
|
3868
|
-
active === "invoices" ? /* @__PURE__ */
|
|
3869
|
-
active === "subscriptions" ? /* @__PURE__ */
|
|
3870
|
-
active === "security" ? /* @__PURE__ */
|
|
3890
|
+
active === "invoices" ? /* @__PURE__ */ jsx45(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
3891
|
+
active === "subscriptions" ? /* @__PURE__ */ jsx45(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
3892
|
+
active === "security" ? /* @__PURE__ */ jsx45(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
|
|
3871
3893
|
]
|
|
3872
3894
|
}
|
|
3873
3895
|
);
|
|
3874
|
-
return /* @__PURE__ */
|
|
3875
|
-
/* @__PURE__ */
|
|
3896
|
+
return /* @__PURE__ */ jsx45(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx45("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs35("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
|
|
3897
|
+
/* @__PURE__ */ jsx45(VerifyEmailBanner, { ...shared }),
|
|
3876
3898
|
sidebar ? /* @__PURE__ */ jsxs35("div", { className: "throttle-account", children: [
|
|
3877
|
-
/* @__PURE__ */
|
|
3899
|
+
/* @__PURE__ */ jsx45("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
|
|
3878
3900
|
panel
|
|
3879
3901
|
] }) : /* @__PURE__ */ jsxs35(Fragment10, { children: [
|
|
3880
|
-
/* @__PURE__ */
|
|
3902
|
+
/* @__PURE__ */ jsx45("div", { ...a.el("accountDashboard.tabs"), children: nav }),
|
|
3881
3903
|
panel
|
|
3882
3904
|
] })
|
|
3883
3905
|
] }) }) });
|
|
3884
3906
|
}
|
|
3885
3907
|
|
|
3886
3908
|
// src/react/components/account/AccountModal.tsx
|
|
3887
|
-
import { jsx as
|
|
3909
|
+
import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3888
3910
|
function AccountModal(props) {
|
|
3889
3911
|
const a = useAppearance(props.appearance);
|
|
3890
3912
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
3891
3913
|
const { t } = useCopy(props.localization);
|
|
3892
3914
|
const titleId = useId7();
|
|
3893
|
-
return /* @__PURE__ */
|
|
3915
|
+
return /* @__PURE__ */ jsx46(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs36(
|
|
3894
3916
|
Modal,
|
|
3895
3917
|
{
|
|
3896
3918
|
open: props.open,
|
|
@@ -3900,15 +3922,15 @@ function AccountModal(props) {
|
|
|
3900
3922
|
overlayKey: "accountModal.overlay",
|
|
3901
3923
|
containerKey: "accountModal.container",
|
|
3902
3924
|
children: [
|
|
3903
|
-
/* @__PURE__ */
|
|
3904
|
-
/* @__PURE__ */
|
|
3925
|
+
/* @__PURE__ */ jsx46("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx46("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
|
|
3926
|
+
/* @__PURE__ */ jsx46("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ jsx46(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
|
|
3905
3927
|
]
|
|
3906
3928
|
}
|
|
3907
3929
|
) });
|
|
3908
3930
|
}
|
|
3909
3931
|
|
|
3910
3932
|
// src/react/components/provider.tsx
|
|
3911
|
-
import { jsx as
|
|
3933
|
+
import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3912
3934
|
var warned = /* @__PURE__ */ new Set();
|
|
3913
3935
|
function warnOnce(key, message) {
|
|
3914
3936
|
if (process.env.NODE_ENV === "production") return;
|
|
@@ -4030,10 +4052,10 @@ function ThrottleProvider(props) {
|
|
|
4030
4052
|
resolve?.(password);
|
|
4031
4053
|
};
|
|
4032
4054
|
const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
|
|
4033
|
-
return /* @__PURE__ */
|
|
4055
|
+
return /* @__PURE__ */ jsx47(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx47(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx47(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx47(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsx47(ConfirmProvider, { children: /* @__PURE__ */ jsxs37(ThrottleUIContext.Provider, { value: ui, children: [
|
|
4034
4056
|
children,
|
|
4035
|
-
/* @__PURE__ */
|
|
4036
|
-
/* @__PURE__ */
|
|
4057
|
+
/* @__PURE__ */ jsx47(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
|
|
4058
|
+
/* @__PURE__ */ jsx47(
|
|
4037
4059
|
AuthModal,
|
|
4038
4060
|
{
|
|
4039
4061
|
open: authOverlayOpen,
|
|
@@ -4044,13 +4066,13 @@ function ThrottleProvider(props) {
|
|
|
4044
4066
|
},
|
|
4045
4067
|
overlay === "signUp" ? "signUp" : "signIn"
|
|
4046
4068
|
),
|
|
4047
|
-
/* @__PURE__ */
|
|
4069
|
+
/* @__PURE__ */ jsx47(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
|
|
4048
4070
|
] }) }) }) }) }) });
|
|
4049
4071
|
}
|
|
4050
4072
|
|
|
4051
4073
|
// src/react/components/auth/SignInButton.tsx
|
|
4052
4074
|
import { cloneElement, isValidElement, useContext as useContext7, useState as useState23 } from "react";
|
|
4053
|
-
import { jsx as
|
|
4075
|
+
import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
4054
4076
|
function SignInButton(props) {
|
|
4055
4077
|
const a = useAppearance(props.appearance);
|
|
4056
4078
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4060,7 +4082,7 @@ function SignInButton(props) {
|
|
|
4060
4082
|
const useShared = ui !== null && props.initialView === void 0;
|
|
4061
4083
|
const label = props.children ?? t.signIn.submitButton;
|
|
4062
4084
|
if (props.mode === "redirect") {
|
|
4063
|
-
return /* @__PURE__ */
|
|
4085
|
+
return /* @__PURE__ */ jsx48(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx48("span", { ...a.rootProps, children: /* @__PURE__ */ jsx48("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
|
|
4064
4086
|
}
|
|
4065
4087
|
const openModal = () => {
|
|
4066
4088
|
if (useShared) ui.openSignIn(props.afterSignIn);
|
|
@@ -4070,10 +4092,10 @@ function SignInButton(props) {
|
|
|
4070
4092
|
if (useShared) ui.close();
|
|
4071
4093
|
else setLocalOpen(false);
|
|
4072
4094
|
};
|
|
4073
|
-
const trigger = props.asChild && isValidElement(props.children) ? cloneElement(props.children, { onClick: openModal }) : /* @__PURE__ */
|
|
4095
|
+
const trigger = props.asChild && isValidElement(props.children) ? cloneElement(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx48(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
|
|
4074
4096
|
return /* @__PURE__ */ jsxs38(AppearanceProvider, { value: scoped, children: [
|
|
4075
|
-
/* @__PURE__ */
|
|
4076
|
-
!useShared ? /* @__PURE__ */
|
|
4097
|
+
/* @__PURE__ */ jsx48("span", { ...a.rootProps, children: trigger }),
|
|
4098
|
+
!useShared ? /* @__PURE__ */ jsx48(
|
|
4077
4099
|
AuthModal,
|
|
4078
4100
|
{
|
|
4079
4101
|
open: localOpen,
|
|
@@ -4092,7 +4114,7 @@ function SignInButton(props) {
|
|
|
4092
4114
|
|
|
4093
4115
|
// src/react/components/auth/SignUpButton.tsx
|
|
4094
4116
|
import { cloneElement as cloneElement2, isValidElement as isValidElement2, useContext as useContext8, useState as useState24 } from "react";
|
|
4095
|
-
import { jsx as
|
|
4117
|
+
import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
4096
4118
|
function SignUpButton(props) {
|
|
4097
4119
|
const a = useAppearance(props.appearance);
|
|
4098
4120
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4102,7 +4124,7 @@ function SignUpButton(props) {
|
|
|
4102
4124
|
const useShared = ui !== null && props.initialView === void 0;
|
|
4103
4125
|
const label = props.children ?? t.signUp.submitButton;
|
|
4104
4126
|
if (props.mode === "redirect") {
|
|
4105
|
-
return /* @__PURE__ */
|
|
4127
|
+
return /* @__PURE__ */ jsx49(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx49("span", { ...a.rootProps, children: /* @__PURE__ */ jsx49("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
|
|
4106
4128
|
}
|
|
4107
4129
|
const openModal = () => {
|
|
4108
4130
|
if (useShared) ui.openSignUp(props.afterSignUp);
|
|
@@ -4112,10 +4134,10 @@ function SignUpButton(props) {
|
|
|
4112
4134
|
if (useShared) ui.close();
|
|
4113
4135
|
else setLocalOpen(false);
|
|
4114
4136
|
};
|
|
4115
|
-
const trigger = props.asChild && isValidElement2(props.children) ? cloneElement2(props.children, { onClick: openModal }) : /* @__PURE__ */
|
|
4137
|
+
const trigger = props.asChild && isValidElement2(props.children) ? cloneElement2(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx49(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
|
|
4116
4138
|
return /* @__PURE__ */ jsxs39(AppearanceProvider, { value: scoped, children: [
|
|
4117
|
-
/* @__PURE__ */
|
|
4118
|
-
!useShared ? /* @__PURE__ */
|
|
4139
|
+
/* @__PURE__ */ jsx49("span", { ...a.rootProps, children: trigger }),
|
|
4140
|
+
!useShared ? /* @__PURE__ */ jsx49(
|
|
4119
4141
|
AuthModal,
|
|
4120
4142
|
{
|
|
4121
4143
|
open: localOpen,
|
|
@@ -4133,14 +4155,14 @@ function SignUpButton(props) {
|
|
|
4133
4155
|
}
|
|
4134
4156
|
|
|
4135
4157
|
// src/react/components/auth/SignOutButton.tsx
|
|
4136
|
-
import { jsx as
|
|
4158
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
4137
4159
|
function SignOutButton(props) {
|
|
4138
4160
|
const a = useAppearance();
|
|
4139
4161
|
const { auth } = useAuth();
|
|
4140
4162
|
const { t } = useCopy(props.localization);
|
|
4141
4163
|
const { submitting, run } = useAction();
|
|
4142
4164
|
const label = props.children ?? (props.everywhere ? t.userButton.signOutAll : t.userButton.signOut);
|
|
4143
|
-
return /* @__PURE__ */
|
|
4165
|
+
return /* @__PURE__ */ jsx50("span", { ...a.rootProps, children: /* @__PURE__ */ jsx50(
|
|
4144
4166
|
Button,
|
|
4145
4167
|
{
|
|
4146
4168
|
variant: "secondary",
|
|
@@ -4157,13 +4179,13 @@ function SignOutButton(props) {
|
|
|
4157
4179
|
}
|
|
4158
4180
|
|
|
4159
4181
|
// src/react/components/auth/SignInPage.tsx
|
|
4160
|
-
import { jsx as
|
|
4182
|
+
import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4161
4183
|
function SignInPage(props) {
|
|
4162
4184
|
const a = useAppearance(props.appearance);
|
|
4163
4185
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
4164
|
-
return /* @__PURE__ */
|
|
4165
|
-
props.logo ? /* @__PURE__ */
|
|
4166
|
-
/* @__PURE__ */
|
|
4186
|
+
return /* @__PURE__ */ jsx51(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx51("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs40("div", { ...a.el("signInPage.root", "throttle-page"), children: [
|
|
4187
|
+
props.logo ? /* @__PURE__ */ jsx51("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
|
|
4188
|
+
/* @__PURE__ */ jsx51(
|
|
4167
4189
|
SignIn,
|
|
4168
4190
|
{
|
|
4169
4191
|
onSuccess: props.onSuccess,
|
|
@@ -4173,18 +4195,18 @@ function SignInPage(props) {
|
|
|
4173
4195
|
localization: props.localization
|
|
4174
4196
|
}
|
|
4175
4197
|
),
|
|
4176
|
-
props.footer ? /* @__PURE__ */
|
|
4198
|
+
props.footer ? /* @__PURE__ */ jsx51("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
|
|
4177
4199
|
] }) }) });
|
|
4178
4200
|
}
|
|
4179
4201
|
|
|
4180
4202
|
// src/react/components/auth/SignUpPage.tsx
|
|
4181
|
-
import { jsx as
|
|
4203
|
+
import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
4182
4204
|
function SignUpPage(props) {
|
|
4183
4205
|
const a = useAppearance(props.appearance);
|
|
4184
4206
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
4185
|
-
return /* @__PURE__ */
|
|
4186
|
-
props.logo ? /* @__PURE__ */
|
|
4187
|
-
/* @__PURE__ */
|
|
4207
|
+
return /* @__PURE__ */ jsx52(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx52("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs41("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
|
|
4208
|
+
props.logo ? /* @__PURE__ */ jsx52("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
|
|
4209
|
+
/* @__PURE__ */ jsx52(
|
|
4188
4210
|
SignUp,
|
|
4189
4211
|
{
|
|
4190
4212
|
onSuccess: props.onSuccess,
|
|
@@ -4193,31 +4215,31 @@ function SignUpPage(props) {
|
|
|
4193
4215
|
localization: props.localization
|
|
4194
4216
|
}
|
|
4195
4217
|
),
|
|
4196
|
-
props.footer ? /* @__PURE__ */
|
|
4218
|
+
props.footer ? /* @__PURE__ */ jsx52("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
|
|
4197
4219
|
] }) }) });
|
|
4198
4220
|
}
|
|
4199
4221
|
|
|
4200
4222
|
// src/react/components/guards.tsx
|
|
4201
|
-
import { Fragment as Fragment11, jsx as
|
|
4223
|
+
import { Fragment as Fragment11, jsx as jsx53 } from "react/jsx-runtime";
|
|
4202
4224
|
function SignedIn(props) {
|
|
4203
4225
|
const { status } = useAuth();
|
|
4204
|
-
return status === "authenticated" ? /* @__PURE__ */
|
|
4226
|
+
return status === "authenticated" ? /* @__PURE__ */ jsx53(Fragment11, { children: props.children }) : null;
|
|
4205
4227
|
}
|
|
4206
4228
|
function SignedOut(props) {
|
|
4207
4229
|
const { status } = useAuth();
|
|
4208
|
-
return status === "unauthenticated" ? /* @__PURE__ */
|
|
4230
|
+
return status === "unauthenticated" ? /* @__PURE__ */ jsx53(Fragment11, { children: props.children }) : null;
|
|
4209
4231
|
}
|
|
4210
4232
|
function Protect(props) {
|
|
4211
4233
|
const { status, emailVerified } = useAuth();
|
|
4212
4234
|
if (status === "loading") return null;
|
|
4213
|
-
if (status !== "authenticated") return /* @__PURE__ */
|
|
4214
|
-
if (props.requireVerified && !emailVerified) return /* @__PURE__ */
|
|
4215
|
-
return /* @__PURE__ */
|
|
4235
|
+
if (status !== "authenticated") return /* @__PURE__ */ jsx53(Fragment11, { children: props.fallback ?? null });
|
|
4236
|
+
if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx53(Fragment11, { children: props.fallback ?? null });
|
|
4237
|
+
return /* @__PURE__ */ jsx53(Fragment11, { children: props.children });
|
|
4216
4238
|
}
|
|
4217
4239
|
|
|
4218
4240
|
// src/react/components/UserButton.tsx
|
|
4219
4241
|
import { useContext as useContext9, useId as useId8, useRef as useRef10, useState as useState25 } from "react";
|
|
4220
|
-
import { jsx as
|
|
4242
|
+
import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
4221
4243
|
function UserButtonRoot(props) {
|
|
4222
4244
|
const a = useAppearance(props.appearance);
|
|
4223
4245
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4237,25 +4259,25 @@ function UserButtonRoot(props) {
|
|
|
4237
4259
|
};
|
|
4238
4260
|
if (status !== "authenticated" || !customer) return null;
|
|
4239
4261
|
const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
|
|
4240
|
-
return /* @__PURE__ */
|
|
4262
|
+
return /* @__PURE__ */ jsx54(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx54("span", { ...a.rootProps, children: /* @__PURE__ */ jsxs42("span", { ref: rootRef, ...a.el("userButton.root"), children: [
|
|
4241
4263
|
/* @__PURE__ */ jsxs42(
|
|
4242
4264
|
Dropdown,
|
|
4243
4265
|
{
|
|
4244
4266
|
label: t.userButton.openMenu,
|
|
4245
4267
|
triggerKey: "userButton.trigger",
|
|
4246
4268
|
menuKey: "userButton.menu",
|
|
4247
|
-
trigger: /* @__PURE__ */
|
|
4269
|
+
trigger: /* @__PURE__ */ jsx54(Avatar, { name, email: customer.email }),
|
|
4248
4270
|
children: [
|
|
4249
|
-
/* @__PURE__ */
|
|
4250
|
-
/* @__PURE__ */
|
|
4251
|
-
/* @__PURE__ */
|
|
4252
|
-
/* @__PURE__ */
|
|
4271
|
+
/* @__PURE__ */ jsx54("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ jsxs42("span", { children: [
|
|
4272
|
+
/* @__PURE__ */ jsx54("span", { ...a.el("userButton.email"), children: customer.email }),
|
|
4273
|
+
/* @__PURE__ */ jsx54("br", {}),
|
|
4274
|
+
/* @__PURE__ */ jsx54(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
|
|
4253
4275
|
] }) }),
|
|
4254
|
-
/* @__PURE__ */
|
|
4255
|
-
props.mode === "navigate" ? /* @__PURE__ */
|
|
4276
|
+
/* @__PURE__ */ jsx54(DropdownSeparator, {}),
|
|
4277
|
+
props.mode === "navigate" ? /* @__PURE__ */ jsx54(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ jsx54(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
|
|
4256
4278
|
props.children,
|
|
4257
|
-
/* @__PURE__ */
|
|
4258
|
-
/* @__PURE__ */
|
|
4279
|
+
/* @__PURE__ */ jsx54(DropdownSeparator, {}),
|
|
4280
|
+
/* @__PURE__ */ jsx54(
|
|
4259
4281
|
DropdownItem,
|
|
4260
4282
|
{
|
|
4261
4283
|
itemKey: "userButton.signOutButton",
|
|
@@ -4263,7 +4285,7 @@ function UserButtonRoot(props) {
|
|
|
4263
4285
|
children: t.userButton.signOut
|
|
4264
4286
|
}
|
|
4265
4287
|
),
|
|
4266
|
-
/* @__PURE__ */
|
|
4288
|
+
/* @__PURE__ */ jsx54(
|
|
4267
4289
|
DropdownItem,
|
|
4268
4290
|
{
|
|
4269
4291
|
itemKey: "userButton.signOutAllButton",
|
|
@@ -4282,8 +4304,8 @@ function UserButtonRoot(props) {
|
|
|
4282
4304
|
labelledBy: titleId,
|
|
4283
4305
|
restoreFocusTo: openerRef.current,
|
|
4284
4306
|
children: [
|
|
4285
|
-
/* @__PURE__ */
|
|
4286
|
-
/* @__PURE__ */
|
|
4307
|
+
/* @__PURE__ */ jsx54("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
|
|
4308
|
+
/* @__PURE__ */ jsx54("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx54(
|
|
4287
4309
|
AccountDashboard,
|
|
4288
4310
|
{
|
|
4289
4311
|
tabs: props.tabs,
|