@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
|
@@ -771,6 +771,7 @@ var THROTTLE_ELEMENT_KEYS = [
|
|
|
771
771
|
"orderDetail.payButton",
|
|
772
772
|
"orderDetail.trackButton",
|
|
773
773
|
"orderDetail.reorderButton",
|
|
774
|
+
"fieldRow",
|
|
774
775
|
"confirm.header",
|
|
775
776
|
"confirm.title",
|
|
776
777
|
"confirm.body",
|
|
@@ -1590,6 +1591,7 @@ var THROTTLE_STYLES = `
|
|
|
1590
1591
|
is near-white, so on a light host page it was rendering white-on-white. */
|
|
1591
1592
|
.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }
|
|
1592
1593
|
.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }
|
|
1594
|
+
.throttle-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }
|
|
1593
1595
|
.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; }
|
|
1594
1596
|
.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }
|
|
1595
1597
|
.throttle-addressblock__line { margin: 0 0 2px; }
|
|
@@ -1635,6 +1637,7 @@ var THROTTLE_STYLES = `
|
|
|
1635
1637
|
it span. Stretch it explicitly when stacked. */
|
|
1636
1638
|
.throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }
|
|
1637
1639
|
.throttle-addresses { grid-template-columns: 1fr; }
|
|
1640
|
+
.throttle-fieldrow { grid-template-columns: 1fr; }
|
|
1638
1641
|
.throttle-tabs__rail { width: 100%; }
|
|
1639
1642
|
}
|
|
1640
1643
|
|
|
@@ -1837,13 +1840,20 @@ function FieldGroup(props) {
|
|
|
1837
1840
|
] }, i)) });
|
|
1838
1841
|
}
|
|
1839
1842
|
|
|
1840
|
-
// src/react/components/primitives/
|
|
1843
|
+
// src/react/components/primitives/FieldRow.tsx
|
|
1841
1844
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1845
|
+
function FieldRow({ children }) {
|
|
1846
|
+
const a = useAppearance();
|
|
1847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...a.el("fieldRow", "throttle-fieldrow"), children });
|
|
1848
|
+
}
|
|
1849
|
+
|
|
1850
|
+
// src/react/components/primitives/Alert.tsx
|
|
1851
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1842
1852
|
function Alert(props) {
|
|
1843
1853
|
const a = useAppearance();
|
|
1844
1854
|
const Slot = a.slots.Alert;
|
|
1845
|
-
if (Slot) return /* @__PURE__ */ (0,
|
|
1846
|
-
return /* @__PURE__ */ (0,
|
|
1855
|
+
if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Slot, { tone: props.tone, children: props.children });
|
|
1856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1847
1857
|
"p",
|
|
1848
1858
|
{
|
|
1849
1859
|
...a.el("alert", `throttle-alert throttle-alert--${props.tone}`),
|
|
@@ -1854,11 +1864,11 @@ function Alert(props) {
|
|
|
1854
1864
|
}
|
|
1855
1865
|
|
|
1856
1866
|
// src/react/components/primitives/Skeleton.tsx
|
|
1857
|
-
var
|
|
1867
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1858
1868
|
function Skeleton(props) {
|
|
1859
1869
|
const a = useAppearance();
|
|
1860
1870
|
const rows = Array.from({ length: props.count ?? 1 });
|
|
1861
|
-
return /* @__PURE__ */ (0,
|
|
1871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
|
|
1862
1872
|
}
|
|
1863
1873
|
|
|
1864
1874
|
// src/react/components/primitives/Modal.tsx
|
|
@@ -1867,10 +1877,10 @@ var import_react_dom = require("react-dom");
|
|
|
1867
1877
|
|
|
1868
1878
|
// src/react/components/surface.tsx
|
|
1869
1879
|
var import_react7 = require("react");
|
|
1870
|
-
var
|
|
1880
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1871
1881
|
var Ctx5 = (0, import_react7.createContext)("standalone");
|
|
1872
1882
|
function SurfaceProvider(props) {
|
|
1873
|
-
return /* @__PURE__ */ (0,
|
|
1883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
|
|
1874
1884
|
}
|
|
1875
1885
|
function useSurface() {
|
|
1876
1886
|
return (0, import_react7.useContext)(Ctx5);
|
|
@@ -1880,7 +1890,7 @@ function useCardClass() {
|
|
|
1880
1890
|
}
|
|
1881
1891
|
|
|
1882
1892
|
// src/react/components/primitives/Modal.tsx
|
|
1883
|
-
var
|
|
1893
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1884
1894
|
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
1885
1895
|
function Modal(props) {
|
|
1886
1896
|
const a = useAppearance();
|
|
@@ -1931,7 +1941,7 @@ function Modal(props) {
|
|
|
1931
1941
|
}, [props.open, mounted]);
|
|
1932
1942
|
if (!props.open || !mounted) return null;
|
|
1933
1943
|
return (0, import_react_dom.createPortal)(
|
|
1934
|
-
/* @__PURE__ */ (0,
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1935
1945
|
"div",
|
|
1936
1946
|
{
|
|
1937
1947
|
...a.el(props.overlayKey ?? "modal.overlay", "throttle-modal__overlay"),
|
|
@@ -1939,7 +1949,7 @@ function Modal(props) {
|
|
|
1939
1949
|
onClick: (e) => {
|
|
1940
1950
|
if (e.target === e.currentTarget) props.onClose();
|
|
1941
1951
|
},
|
|
1942
|
-
children: /* @__PURE__ */ (0,
|
|
1952
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1943
1953
|
"div",
|
|
1944
1954
|
{
|
|
1945
1955
|
...a.el(props.containerKey ?? "modal.container", props.size === "compact" ? "throttle-modal__container throttle-modal__container--compact" : "throttle-modal__container"),
|
|
@@ -1949,7 +1959,7 @@ function Modal(props) {
|
|
|
1949
1959
|
"aria-labelledby": props.labelledBy,
|
|
1950
1960
|
tabIndex: -1,
|
|
1951
1961
|
children: [
|
|
1952
|
-
/* @__PURE__ */ (0,
|
|
1962
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1953
1963
|
"button",
|
|
1954
1964
|
{
|
|
1955
1965
|
...a.el("modal.closeButton", "throttle-modal__close"),
|
|
@@ -1959,7 +1969,7 @@ function Modal(props) {
|
|
|
1959
1969
|
children: "\xD7"
|
|
1960
1970
|
}
|
|
1961
1971
|
),
|
|
1962
|
-
/* @__PURE__ */ (0,
|
|
1972
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SurfaceProvider, { value: "modal", children: props.children })
|
|
1963
1973
|
]
|
|
1964
1974
|
}
|
|
1965
1975
|
)
|
|
@@ -1971,7 +1981,7 @@ function Modal(props) {
|
|
|
1971
1981
|
|
|
1972
1982
|
// src/react/components/primitives/Confirm.tsx
|
|
1973
1983
|
var import_react9 = require("react");
|
|
1974
|
-
var
|
|
1984
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1975
1985
|
var ConfirmContext = (0, import_react9.createContext)(null);
|
|
1976
1986
|
function ConfirmProvider({ children }) {
|
|
1977
1987
|
const [request2, setRequest] = (0, import_react9.useState)(null);
|
|
@@ -1991,14 +2001,14 @@ function ConfirmProvider({ children }) {
|
|
|
1991
2001
|
settle.current = resolve;
|
|
1992
2002
|
});
|
|
1993
2003
|
}, []);
|
|
1994
|
-
return /* @__PURE__ */ (0,
|
|
2004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ConfirmContext.Provider, { value: ask, children: [
|
|
1995
2005
|
children,
|
|
1996
|
-
request2 ? /* @__PURE__ */ (0,
|
|
1997
|
-
/* @__PURE__ */ (0,
|
|
1998
|
-
/* @__PURE__ */ (0,
|
|
1999
|
-
request2.body ? /* @__PURE__ */ (0,
|
|
2000
|
-
/* @__PURE__ */ (0,
|
|
2001
|
-
/* @__PURE__ */ (0,
|
|
2006
|
+
request2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Modal, { open: true, onClose: () => answer(false), labelledBy: titleId, size: "compact", children: [
|
|
2007
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request2.title }) }),
|
|
2008
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
|
|
2009
|
+
request2.body ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "throttle-muted", children: request2.body }) : null,
|
|
2010
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "throttle-actions", children: [
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2002
2012
|
Button,
|
|
2003
2013
|
{
|
|
2004
2014
|
elementKey: "confirm.confirmButton",
|
|
@@ -2007,7 +2017,7 @@ function ConfirmProvider({ children }) {
|
|
|
2007
2017
|
children: request2.confirmLabel ?? t.common.delete
|
|
2008
2018
|
}
|
|
2009
2019
|
),
|
|
2010
|
-
/* @__PURE__ */ (0,
|
|
2020
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request2.cancelLabel ?? t.common.keepIt })
|
|
2011
2021
|
] })
|
|
2012
2022
|
] })
|
|
2013
2023
|
] }) : null
|
|
@@ -2024,7 +2034,7 @@ function useConfirm() {
|
|
|
2024
2034
|
|
|
2025
2035
|
// src/react/components/primitives/Dropdown.tsx
|
|
2026
2036
|
var import_react10 = require("react");
|
|
2027
|
-
var
|
|
2037
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2028
2038
|
function Dropdown(props) {
|
|
2029
2039
|
const a = useAppearance();
|
|
2030
2040
|
const [open, setOpen] = (0, import_react10.useState)(false);
|
|
@@ -2057,8 +2067,8 @@ function Dropdown(props) {
|
|
|
2057
2067
|
const next = (at + delta + items.length) % items.length;
|
|
2058
2068
|
items[next < 0 ? items.length - 1 : next].focus();
|
|
2059
2069
|
};
|
|
2060
|
-
return /* @__PURE__ */ (0,
|
|
2061
|
-
/* @__PURE__ */ (0,
|
|
2070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
|
|
2071
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2062
2072
|
"button",
|
|
2063
2073
|
{
|
|
2064
2074
|
ref: trigger,
|
|
@@ -2071,7 +2081,7 @@ function Dropdown(props) {
|
|
|
2071
2081
|
children: props.trigger
|
|
2072
2082
|
}
|
|
2073
2083
|
),
|
|
2074
|
-
open ? /* @__PURE__ */ (0,
|
|
2084
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2075
2085
|
"div",
|
|
2076
2086
|
{
|
|
2077
2087
|
ref: menu,
|
|
@@ -2097,24 +2107,24 @@ function DropdownItem(props) {
|
|
|
2097
2107
|
const a = useAppearance();
|
|
2098
2108
|
const attrs = a.el(props.itemKey ?? "dropdown.item", "throttle-dropdown__item");
|
|
2099
2109
|
if (props.href) {
|
|
2100
|
-
return /* @__PURE__ */ (0,
|
|
2110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
|
|
2101
2111
|
}
|
|
2102
|
-
return /* @__PURE__ */ (0,
|
|
2112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
|
|
2103
2113
|
}
|
|
2104
2114
|
function DropdownSeparator() {
|
|
2105
2115
|
const a = useAppearance();
|
|
2106
|
-
return /* @__PURE__ */ (0,
|
|
2116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
|
|
2107
2117
|
}
|
|
2108
2118
|
|
|
2109
2119
|
// src/react/components/primitives/Tabs.tsx
|
|
2110
|
-
var
|
|
2120
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2111
2121
|
function Tabs(props) {
|
|
2112
2122
|
const a = useAppearance();
|
|
2113
2123
|
const at = props.tabs.findIndex((t) => t.id === props.active);
|
|
2114
2124
|
const vertical = props.orientation === "vertical";
|
|
2115
2125
|
const listClass = vertical ? "throttle-tabs__rail" : "throttle-tabs__list";
|
|
2116
2126
|
const itemClass = vertical ? "throttle-tabs__railitem" : "throttle-tabs__tab";
|
|
2117
|
-
return /* @__PURE__ */ (0,
|
|
2127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2118
2128
|
"div",
|
|
2119
2129
|
{
|
|
2120
2130
|
...a.el("tabs.list", listClass),
|
|
@@ -2133,7 +2143,7 @@ function Tabs(props) {
|
|
|
2133
2143
|
children: props.tabs.map((tab) => {
|
|
2134
2144
|
const selected = tab.id === props.active;
|
|
2135
2145
|
const { className, ...rest } = a.el("tabs.tab", itemClass);
|
|
2136
|
-
return /* @__PURE__ */ (0,
|
|
2146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2137
2147
|
"button",
|
|
2138
2148
|
{
|
|
2139
2149
|
...rest,
|
|
@@ -2158,16 +2168,16 @@ function Tabs(props) {
|
|
|
2158
2168
|
}
|
|
2159
2169
|
|
|
2160
2170
|
// src/react/components/primitives/DataTable.tsx
|
|
2161
|
-
var
|
|
2171
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2162
2172
|
function DataTable(props) {
|
|
2163
2173
|
const a = useAppearance();
|
|
2164
2174
|
const clickable = Boolean(props.onRowClick);
|
|
2165
2175
|
return (
|
|
2166
2176
|
// Tables are the one thing allowed to be wider than the panel; it scrolls
|
|
2167
2177
|
// rather than forcing the whole page to.
|
|
2168
|
-
/* @__PURE__ */ (0,
|
|
2169
|
-
/* @__PURE__ */ (0,
|
|
2170
|
-
/* @__PURE__ */ (0,
|
|
2178
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
|
|
2179
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
|
|
2180
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { children: props.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2171
2181
|
"tr",
|
|
2172
2182
|
{
|
|
2173
2183
|
...a.el(props.rowElementKey ?? "table.row", "throttle-table__row"),
|
|
@@ -2179,7 +2189,7 @@ function DataTable(props) {
|
|
|
2179
2189
|
props.onRowClick(row);
|
|
2180
2190
|
}
|
|
2181
2191
|
} : void 0,
|
|
2182
|
-
children: props.columns.map((col) => /* @__PURE__ */ (0,
|
|
2192
|
+
children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { ...a.el("table.cell", "throttle-table__cell"), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
|
|
2183
2193
|
},
|
|
2184
2194
|
props.rowKey(row)
|
|
2185
2195
|
)) })
|
|
@@ -2188,39 +2198,39 @@ function DataTable(props) {
|
|
|
2188
2198
|
}
|
|
2189
2199
|
|
|
2190
2200
|
// src/react/components/primitives/EmptyState.tsx
|
|
2191
|
-
var
|
|
2201
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2192
2202
|
function EmptyState(props) {
|
|
2193
2203
|
const a = useAppearance();
|
|
2194
2204
|
const Slot = a.slots.EmptyState;
|
|
2195
|
-
if (Slot) return /* @__PURE__ */ (0,
|
|
2196
|
-
return /* @__PURE__ */ (0,
|
|
2197
|
-
/* @__PURE__ */ (0,
|
|
2198
|
-
props.description ? /* @__PURE__ */ (0,
|
|
2205
|
+
if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Slot, { title: props.title, description: props.description });
|
|
2206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ...a.el("emptyState", "throttle-empty"), children: [
|
|
2207
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
|
|
2208
|
+
props.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
|
|
2199
2209
|
] });
|
|
2200
2210
|
}
|
|
2201
2211
|
|
|
2202
2212
|
// src/react/components/primitives/Avatar.tsx
|
|
2203
|
-
var
|
|
2213
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2204
2214
|
function Avatar(props) {
|
|
2205
2215
|
const a = useAppearance();
|
|
2206
2216
|
const Slot = a.slots.Avatar;
|
|
2207
|
-
if (Slot) return /* @__PURE__ */ (0,
|
|
2217
|
+
if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Slot, { name: props.name, email: props.email });
|
|
2208
2218
|
const initials = props.name.split(" ").map((part) => part.trim()[0]).filter(Boolean).slice(0, 2).join("") || props.email.trim()[0] || "?";
|
|
2209
|
-
return /* @__PURE__ */ (0,
|
|
2219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
|
|
2210
2220
|
}
|
|
2211
2221
|
|
|
2212
2222
|
// src/react/components/primitives/Badge.tsx
|
|
2213
|
-
var
|
|
2223
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2214
2224
|
function Badge(props) {
|
|
2215
2225
|
const a = useAppearance();
|
|
2216
2226
|
const tone = props.tone ?? "neutral";
|
|
2217
2227
|
const base = tone === "neutral" ? "throttle-badge" : `throttle-badge throttle-badge--${tone}`;
|
|
2218
|
-
return /* @__PURE__ */ (0,
|
|
2228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
|
|
2219
2229
|
}
|
|
2220
2230
|
|
|
2221
2231
|
// src/react/components/auth/StepUpDialog.tsx
|
|
2222
2232
|
var import_react11 = require("react");
|
|
2223
|
-
var
|
|
2233
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2224
2234
|
function StepUpDialog(props) {
|
|
2225
2235
|
const a = useAppearance();
|
|
2226
2236
|
const cardClass = useCardClass();
|
|
@@ -2230,7 +2240,7 @@ function StepUpDialog(props) {
|
|
|
2230
2240
|
(0, import_react11.useEffect)(() => {
|
|
2231
2241
|
if (!props.open) setPassword("");
|
|
2232
2242
|
}, [props.open]);
|
|
2233
|
-
return /* @__PURE__ */ (0,
|
|
2243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2234
2244
|
"form",
|
|
2235
2245
|
{
|
|
2236
2246
|
onSubmit: (e) => {
|
|
@@ -2238,12 +2248,12 @@ function StepUpDialog(props) {
|
|
|
2238
2248
|
props.onResolve(password);
|
|
2239
2249
|
},
|
|
2240
2250
|
children: [
|
|
2241
|
-
/* @__PURE__ */ (0,
|
|
2242
|
-
/* @__PURE__ */ (0,
|
|
2243
|
-
/* @__PURE__ */ (0,
|
|
2251
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "throttle-card__header", children: [
|
|
2252
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
|
|
2253
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "throttle-card__description", children: t.stepUp.description })
|
|
2244
2254
|
] }),
|
|
2245
|
-
/* @__PURE__ */ (0,
|
|
2246
|
-
/* @__PURE__ */ (0,
|
|
2255
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
|
|
2256
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2247
2257
|
Field,
|
|
2248
2258
|
{
|
|
2249
2259
|
label: t.stepUp.password,
|
|
@@ -2255,8 +2265,8 @@ function StepUpDialog(props) {
|
|
|
2255
2265
|
elementKey: "stepUp.passwordField"
|
|
2256
2266
|
}
|
|
2257
2267
|
),
|
|
2258
|
-
/* @__PURE__ */ (0,
|
|
2259
|
-
/* @__PURE__ */ (0,
|
|
2268
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
|
|
2269
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
|
|
2260
2270
|
] })
|
|
2261
2271
|
]
|
|
2262
2272
|
}
|
|
@@ -2303,7 +2313,7 @@ function useAction() {
|
|
|
2303
2313
|
}
|
|
2304
2314
|
|
|
2305
2315
|
// src/react/components/auth/SignIn.tsx
|
|
2306
|
-
var
|
|
2316
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2307
2317
|
function SignIn(props) {
|
|
2308
2318
|
const a = useAppearance(props.appearance);
|
|
2309
2319
|
const cardClass = useCardClass();
|
|
@@ -2317,8 +2327,8 @@ function SignIn(props) {
|
|
|
2317
2327
|
const branded = variant === "branded";
|
|
2318
2328
|
const grouped = variant === "grouped";
|
|
2319
2329
|
const logo = useBrandLogo(props.logo);
|
|
2320
|
-
const forgotLink = props.onForgotPassword ? /* @__PURE__ */ (0,
|
|
2321
|
-
const emailField = /* @__PURE__ */ (0,
|
|
2330
|
+
const forgotLink = props.onForgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
|
|
2331
|
+
const emailField = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2322
2332
|
Field,
|
|
2323
2333
|
{
|
|
2324
2334
|
label: t.signIn.email,
|
|
@@ -2331,7 +2341,7 @@ function SignIn(props) {
|
|
|
2331
2341
|
grouped
|
|
2332
2342
|
}
|
|
2333
2343
|
);
|
|
2334
|
-
const passwordField = /* @__PURE__ */ (0,
|
|
2344
|
+
const passwordField = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2335
2345
|
Field,
|
|
2336
2346
|
{
|
|
2337
2347
|
label: t.signIn.password,
|
|
@@ -2345,7 +2355,7 @@ function SignIn(props) {
|
|
|
2345
2355
|
labelExtra: grouped ? void 0 : forgotLink
|
|
2346
2356
|
}
|
|
2347
2357
|
);
|
|
2348
|
-
return /* @__PURE__ */ (0,
|
|
2358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2349
2359
|
"form",
|
|
2350
2360
|
{
|
|
2351
2361
|
...a.el("signIn.root", cardClass),
|
|
@@ -2357,7 +2367,7 @@ function SignIn(props) {
|
|
|
2357
2367
|
});
|
|
2358
2368
|
},
|
|
2359
2369
|
children: [
|
|
2360
|
-
/* @__PURE__ */ (0,
|
|
2370
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2361
2371
|
CardHeader,
|
|
2362
2372
|
{
|
|
2363
2373
|
title: t.signIn.title,
|
|
@@ -2368,24 +2378,24 @@ function SignIn(props) {
|
|
|
2368
2378
|
branded
|
|
2369
2379
|
}
|
|
2370
2380
|
),
|
|
2371
|
-
/* @__PURE__ */ (0,
|
|
2372
|
-
grouped ? /* @__PURE__ */ (0,
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardBody, { children: [
|
|
2382
|
+
grouped ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(FieldGroup, { children: [
|
|
2373
2383
|
emailField,
|
|
2374
2384
|
passwordField
|
|
2375
|
-
] }) : /* @__PURE__ */ (0,
|
|
2385
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
2376
2386
|
emailField,
|
|
2377
2387
|
passwordField
|
|
2378
2388
|
] }),
|
|
2379
|
-
grouped && forgotLink ? /* @__PURE__ */ (0,
|
|
2380
|
-
error ? /* @__PURE__ */ (0,
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2389
|
+
grouped && forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
|
|
2390
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2391
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
|
|
2382
2392
|
] }),
|
|
2383
|
-
props.onSignUp ? /* @__PURE__ */ (0,
|
|
2384
|
-
/* @__PURE__ */ (0,
|
|
2393
|
+
props.onSignUp ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardFooter, { ruled: !branded, children: [
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "throttle-muted", children: [
|
|
2385
2395
|
t.signIn.switchPrompt,
|
|
2386
2396
|
" "
|
|
2387
2397
|
] }),
|
|
2388
|
-
/* @__PURE__ */ (0,
|
|
2398
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
|
|
2389
2399
|
] }) : null
|
|
2390
2400
|
]
|
|
2391
2401
|
}
|
|
@@ -2394,7 +2404,7 @@ function SignIn(props) {
|
|
|
2394
2404
|
|
|
2395
2405
|
// src/react/components/auth/SignUp.tsx
|
|
2396
2406
|
var import_react14 = require("react");
|
|
2397
|
-
var
|
|
2407
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2398
2408
|
function SignUp(props) {
|
|
2399
2409
|
const a = useAppearance(props.appearance);
|
|
2400
2410
|
const cardClass = useCardClass();
|
|
@@ -2408,7 +2418,7 @@ function SignUp(props) {
|
|
|
2408
2418
|
const branded = variant === "branded";
|
|
2409
2419
|
const grouped = variant === "grouped";
|
|
2410
2420
|
const logo = useBrandLogo(props.logo);
|
|
2411
|
-
const emailField = /* @__PURE__ */ (0,
|
|
2421
|
+
const emailField = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2412
2422
|
Field,
|
|
2413
2423
|
{
|
|
2414
2424
|
label: t.signUp.email,
|
|
@@ -2421,7 +2431,7 @@ function SignUp(props) {
|
|
|
2421
2431
|
grouped
|
|
2422
2432
|
}
|
|
2423
2433
|
);
|
|
2424
|
-
const passwordField = /* @__PURE__ */ (0,
|
|
2434
|
+
const passwordField = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2425
2435
|
Field,
|
|
2426
2436
|
{
|
|
2427
2437
|
label: t.signUp.password,
|
|
@@ -2434,7 +2444,7 @@ function SignUp(props) {
|
|
|
2434
2444
|
grouped
|
|
2435
2445
|
}
|
|
2436
2446
|
);
|
|
2437
|
-
return /* @__PURE__ */ (0,
|
|
2447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2438
2448
|
"form",
|
|
2439
2449
|
{
|
|
2440
2450
|
...a.el("signUp.root", cardClass),
|
|
@@ -2450,7 +2460,7 @@ function SignUp(props) {
|
|
|
2450
2460
|
});
|
|
2451
2461
|
},
|
|
2452
2462
|
children: [
|
|
2453
|
-
/* @__PURE__ */ (0,
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2454
2464
|
CardHeader,
|
|
2455
2465
|
{
|
|
2456
2466
|
title: t.signUp.title,
|
|
@@ -2461,24 +2471,24 @@ function SignUp(props) {
|
|
|
2461
2471
|
branded
|
|
2462
2472
|
}
|
|
2463
2473
|
),
|
|
2464
|
-
/* @__PURE__ */ (0,
|
|
2465
|
-
grouped ? /* @__PURE__ */ (0,
|
|
2474
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardBody, { children: [
|
|
2475
|
+
grouped ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(FieldGroup, { children: [
|
|
2466
2476
|
emailField,
|
|
2467
2477
|
passwordField
|
|
2468
|
-
] }) : /* @__PURE__ */ (0,
|
|
2478
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2469
2479
|
emailField,
|
|
2470
2480
|
passwordField
|
|
2471
2481
|
] }),
|
|
2472
|
-
error ? /* @__PURE__ */ (0,
|
|
2473
|
-
notice ? /* @__PURE__ */ (0,
|
|
2474
|
-
/* @__PURE__ */ (0,
|
|
2482
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2483
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "info", children: notice }) : null,
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
|
|
2475
2485
|
] }),
|
|
2476
|
-
props.onSignIn ? /* @__PURE__ */ (0,
|
|
2477
|
-
/* @__PURE__ */ (0,
|
|
2486
|
+
props.onSignIn ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardFooter, { ruled: !branded, children: [
|
|
2487
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "throttle-muted", children: [
|
|
2478
2488
|
t.signUp.switchPrompt,
|
|
2479
2489
|
" "
|
|
2480
2490
|
] }),
|
|
2481
|
-
/* @__PURE__ */ (0,
|
|
2491
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
|
|
2482
2492
|
] }) : null
|
|
2483
2493
|
]
|
|
2484
2494
|
}
|
|
@@ -2487,7 +2497,7 @@ function SignUp(props) {
|
|
|
2487
2497
|
|
|
2488
2498
|
// src/react/components/auth/ForgotPassword.tsx
|
|
2489
2499
|
var import_react15 = require("react");
|
|
2490
|
-
var
|
|
2500
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2491
2501
|
function ForgotPassword(props) {
|
|
2492
2502
|
const a = useAppearance(props.appearance);
|
|
2493
2503
|
const cardClass = useCardClass();
|
|
@@ -2498,7 +2508,7 @@ function ForgotPassword(props) {
|
|
|
2498
2508
|
const [email, setEmail] = (0, import_react15.useState)("");
|
|
2499
2509
|
const branded = (props.variant ?? "quiet") === "branded";
|
|
2500
2510
|
const logo = useBrandLogo(props.logo);
|
|
2501
|
-
return /* @__PURE__ */ (0,
|
|
2511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2502
2512
|
"form",
|
|
2503
2513
|
{
|
|
2504
2514
|
...a.el("forgotPassword.root", cardClass),
|
|
@@ -2510,7 +2520,7 @@ function ForgotPassword(props) {
|
|
|
2510
2520
|
});
|
|
2511
2521
|
},
|
|
2512
2522
|
children: [
|
|
2513
|
-
/* @__PURE__ */ (0,
|
|
2523
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2514
2524
|
CardHeader,
|
|
2515
2525
|
{
|
|
2516
2526
|
title: t.forgotPassword.title,
|
|
@@ -2521,8 +2531,8 @@ function ForgotPassword(props) {
|
|
|
2521
2531
|
branded
|
|
2522
2532
|
}
|
|
2523
2533
|
),
|
|
2524
|
-
/* @__PURE__ */ (0,
|
|
2525
|
-
/* @__PURE__ */ (0,
|
|
2534
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
|
|
2535
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2526
2536
|
Field,
|
|
2527
2537
|
{
|
|
2528
2538
|
label: t.forgotPassword.email,
|
|
@@ -2534,11 +2544,11 @@ function ForgotPassword(props) {
|
|
|
2534
2544
|
elementKey: "forgotPassword.emailField"
|
|
2535
2545
|
}
|
|
2536
2546
|
),
|
|
2537
|
-
error ? /* @__PURE__ */ (0,
|
|
2538
|
-
notice ? /* @__PURE__ */ (0,
|
|
2539
|
-
/* @__PURE__ */ (0,
|
|
2547
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2548
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: notice }) : null,
|
|
2549
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
|
|
2540
2550
|
] }),
|
|
2541
|
-
props.onBack ? /* @__PURE__ */ (0,
|
|
2551
|
+
props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardFooter, { ruled: !branded, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
|
|
2542
2552
|
]
|
|
2543
2553
|
}
|
|
2544
2554
|
) }) });
|
|
@@ -2546,7 +2556,7 @@ function ForgotPassword(props) {
|
|
|
2546
2556
|
|
|
2547
2557
|
// src/react/components/auth/ResetPassword.tsx
|
|
2548
2558
|
var import_react16 = require("react");
|
|
2549
|
-
var
|
|
2559
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2550
2560
|
function ResetPassword(props) {
|
|
2551
2561
|
const a = useAppearance(props.appearance);
|
|
2552
2562
|
const cardClass = useCardClass();
|
|
@@ -2557,8 +2567,8 @@ function ResetPassword(props) {
|
|
|
2557
2567
|
const [password, setPassword] = (0, import_react16.useState)("");
|
|
2558
2568
|
const branded = (props.variant ?? "quiet") === "branded";
|
|
2559
2569
|
const logo = useBrandLogo(props.logo);
|
|
2560
|
-
return /* @__PURE__ */ (0,
|
|
2561
|
-
/* @__PURE__ */ (0,
|
|
2570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...a.el("resetPassword.root", cardClass), children: [
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2562
2572
|
CardHeader,
|
|
2563
2573
|
{
|
|
2564
2574
|
title: t.resetPassword.title,
|
|
@@ -2568,11 +2578,11 @@ function ResetPassword(props) {
|
|
|
2568
2578
|
branded
|
|
2569
2579
|
}
|
|
2570
2580
|
),
|
|
2571
|
-
/* @__PURE__ */ (0,
|
|
2581
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardBody, { children: !props.token ? (
|
|
2572
2582
|
// No form at all without a token. A submit button that can only
|
|
2573
2583
|
// fail is worse than an explanation.
|
|
2574
|
-
/* @__PURE__ */ (0,
|
|
2575
|
-
) : /* @__PURE__ */ (0,
|
|
2584
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "error", children: t.resetPassword.missingToken })
|
|
2585
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2576
2586
|
"form",
|
|
2577
2587
|
{
|
|
2578
2588
|
onSubmit: (e) => {
|
|
@@ -2583,8 +2593,8 @@ function ResetPassword(props) {
|
|
|
2583
2593
|
return t.resetPassword.doneNotice;
|
|
2584
2594
|
});
|
|
2585
2595
|
},
|
|
2586
|
-
children: /* @__PURE__ */ (0,
|
|
2587
|
-
/* @__PURE__ */ (0,
|
|
2596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "throttle-stack", children: [
|
|
2597
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2588
2598
|
Field,
|
|
2589
2599
|
{
|
|
2590
2600
|
label: t.resetPassword.password,
|
|
@@ -2596,9 +2606,9 @@ function ResetPassword(props) {
|
|
|
2596
2606
|
elementKey: "resetPassword.passwordField"
|
|
2597
2607
|
}
|
|
2598
2608
|
),
|
|
2599
|
-
error ? /* @__PURE__ */ (0,
|
|
2600
|
-
notice ? /* @__PURE__ */ (0,
|
|
2601
|
-
/* @__PURE__ */ (0,
|
|
2609
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2610
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "success", children: notice }) : null,
|
|
2611
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
|
|
2602
2612
|
] })
|
|
2603
2613
|
}
|
|
2604
2614
|
) })
|
|
@@ -2607,7 +2617,7 @@ function ResetPassword(props) {
|
|
|
2607
2617
|
|
|
2608
2618
|
// src/react/components/auth/VerifyEmail.tsx
|
|
2609
2619
|
var import_react17 = require("react");
|
|
2610
|
-
var
|
|
2620
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2611
2621
|
function VerifyEmail(props) {
|
|
2612
2622
|
const a = useAppearance(props.appearance);
|
|
2613
2623
|
const cardClass = useCardClass();
|
|
@@ -2633,8 +2643,8 @@ function VerifyEmail(props) {
|
|
|
2633
2643
|
setState("failed");
|
|
2634
2644
|
});
|
|
2635
2645
|
}, [props.token, auth]);
|
|
2636
|
-
return /* @__PURE__ */ (0,
|
|
2637
|
-
/* @__PURE__ */ (0,
|
|
2646
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...a.el("verifyEmail.root", cardClass), children: [
|
|
2647
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2638
2648
|
CardHeader,
|
|
2639
2649
|
{
|
|
2640
2650
|
title: t.verifyEmail.title,
|
|
@@ -2644,17 +2654,17 @@ function VerifyEmail(props) {
|
|
|
2644
2654
|
branded
|
|
2645
2655
|
}
|
|
2646
2656
|
),
|
|
2647
|
-
/* @__PURE__ */ (0,
|
|
2648
|
-
state === "verifying" ? /* @__PURE__ */ (0,
|
|
2649
|
-
/* @__PURE__ */ (0,
|
|
2657
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CardBody, { children: [
|
|
2658
|
+
state === "verifying" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { children: [
|
|
2659
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Spinner, {}),
|
|
2650
2660
|
" ",
|
|
2651
2661
|
t.verifyEmail.verifying
|
|
2652
2662
|
] }) : null,
|
|
2653
|
-
state === "done" ? /* @__PURE__ */ (0,
|
|
2654
|
-
state === "failed" && error ? /* @__PURE__ */ (0,
|
|
2655
|
-
state === "idle" ? /* @__PURE__ */ (0,
|
|
2656
|
-
notice ? /* @__PURE__ */ (0,
|
|
2657
|
-
state !== "done" ? /* @__PURE__ */ (0,
|
|
2663
|
+
state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
|
|
2664
|
+
state === "failed" && error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2665
|
+
state === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
|
|
2666
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "success", children: notice }) : null,
|
|
2667
|
+
state !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2658
2668
|
Button,
|
|
2659
2669
|
{
|
|
2660
2670
|
variant: "secondary",
|
|
@@ -2672,7 +2682,7 @@ function VerifyEmail(props) {
|
|
|
2672
2682
|
}
|
|
2673
2683
|
|
|
2674
2684
|
// src/react/components/auth/AuthFlow.tsx
|
|
2675
|
-
var
|
|
2685
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2676
2686
|
var HASH_FOR = {
|
|
2677
2687
|
signIn: "#/sign-in",
|
|
2678
2688
|
signUp: "#/sign-up",
|
|
@@ -2730,8 +2740,8 @@ function AuthFlow(props) {
|
|
|
2730
2740
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
2731
2741
|
}, [props.routing, controlled]);
|
|
2732
2742
|
const shared = { appearance: props.appearance, localization: props.localization };
|
|
2733
|
-
return /* @__PURE__ */ (0,
|
|
2734
|
-
view === "signIn" ? /* @__PURE__ */ (0,
|
|
2743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...a.el("authFlow.root"), children: [
|
|
2744
|
+
view === "signIn" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2735
2745
|
SignIn,
|
|
2736
2746
|
{
|
|
2737
2747
|
...shared,
|
|
@@ -2740,19 +2750,19 @@ function AuthFlow(props) {
|
|
|
2740
2750
|
onSignUp: () => go("signUp")
|
|
2741
2751
|
}
|
|
2742
2752
|
) : null,
|
|
2743
|
-
view === "signUp" ? /* @__PURE__ */ (0,
|
|
2744
|
-
view === "forgotPassword" ? /* @__PURE__ */ (0,
|
|
2745
|
-
view === "resetPassword" ? /* @__PURE__ */ (0,
|
|
2746
|
-
view === "verifyEmail" ? /* @__PURE__ */ (0,
|
|
2753
|
+
view === "signUp" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
|
|
2754
|
+
view === "forgotPassword" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
|
|
2755
|
+
view === "resetPassword" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
|
|
2756
|
+
view === "verifyEmail" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VerifyEmail, { ...shared, token }) : null
|
|
2747
2757
|
] }) });
|
|
2748
2758
|
}
|
|
2749
2759
|
|
|
2750
2760
|
// src/react/components/auth/AuthModal.tsx
|
|
2751
|
-
var
|
|
2761
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2752
2762
|
function AuthModal(props) {
|
|
2753
2763
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
2754
2764
|
const titleId = (0, import_react19.useId)();
|
|
2755
|
-
return /* @__PURE__ */ (0,
|
|
2765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2756
2766
|
Modal,
|
|
2757
2767
|
{
|
|
2758
2768
|
open: props.open,
|
|
@@ -2762,8 +2772,8 @@ function AuthModal(props) {
|
|
|
2762
2772
|
overlayKey: "authModal.overlay",
|
|
2763
2773
|
containerKey: "authModal.container",
|
|
2764
2774
|
children: [
|
|
2765
|
-
/* @__PURE__ */ (0,
|
|
2766
|
-
/* @__PURE__ */ (0,
|
|
2775
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
|
|
2776
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2767
2777
|
AuthFlow,
|
|
2768
2778
|
{
|
|
2769
2779
|
initialView: props.initialView,
|
|
@@ -2786,7 +2796,7 @@ var import_react30 = require("react");
|
|
|
2786
2796
|
|
|
2787
2797
|
// src/react/components/account/VerifyEmailBanner.tsx
|
|
2788
2798
|
var import_react20 = require("react");
|
|
2789
|
-
var
|
|
2799
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2790
2800
|
var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
|
|
2791
2801
|
function readDismissed() {
|
|
2792
2802
|
try {
|
|
@@ -2809,12 +2819,12 @@ function VerifyEmailBanner(props) {
|
|
|
2809
2819
|
const { submitting, notice, error, run } = useAction();
|
|
2810
2820
|
const [dismissed, setDismissed] = (0, import_react20.useState)(readDismissed);
|
|
2811
2821
|
if (status !== "authenticated" || emailVerified || dismissed) return null;
|
|
2812
|
-
return /* @__PURE__ */ (0,
|
|
2813
|
-
/* @__PURE__ */ (0,
|
|
2814
|
-
notice ? /* @__PURE__ */ (0,
|
|
2815
|
-
error ? /* @__PURE__ */ (0,
|
|
2816
|
-
/* @__PURE__ */ (0,
|
|
2817
|
-
/* @__PURE__ */ (0,
|
|
2822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
|
|
2823
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
|
|
2824
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "success", children: notice }) : null,
|
|
2825
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
2826
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "throttle-actions", children: [
|
|
2827
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2818
2828
|
Button,
|
|
2819
2829
|
{
|
|
2820
2830
|
variant: "secondary",
|
|
@@ -2827,7 +2837,7 @@ function VerifyEmailBanner(props) {
|
|
|
2827
2837
|
children: t.verifyBanner.resendButton
|
|
2828
2838
|
}
|
|
2829
2839
|
),
|
|
2830
|
-
/* @__PURE__ */ (0,
|
|
2840
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2831
2841
|
Button,
|
|
2832
2842
|
{
|
|
2833
2843
|
variant: "link",
|
|
@@ -2844,9 +2854,9 @@ function VerifyEmailBanner(props) {
|
|
|
2844
2854
|
}
|
|
2845
2855
|
|
|
2846
2856
|
// src/react/components/account/icons.tsx
|
|
2847
|
-
var
|
|
2857
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2848
2858
|
function Glyph(props) {
|
|
2849
|
-
return /* @__PURE__ */ (0,
|
|
2859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2850
2860
|
"svg",
|
|
2851
2861
|
{
|
|
2852
2862
|
className: "throttle-tabs__railicon",
|
|
@@ -2865,35 +2875,35 @@ function Glyph(props) {
|
|
|
2865
2875
|
);
|
|
2866
2876
|
}
|
|
2867
2877
|
var ACCOUNT_ICONS = {
|
|
2868
|
-
profile: /* @__PURE__ */ (0,
|
|
2869
|
-
/* @__PURE__ */ (0,
|
|
2870
|
-
/* @__PURE__ */ (0,
|
|
2878
|
+
profile: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2879
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "8", r: "4" }),
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
|
|
2871
2881
|
] }),
|
|
2872
|
-
addresses: /* @__PURE__ */ (0,
|
|
2873
|
-
/* @__PURE__ */ (0,
|
|
2874
|
-
/* @__PURE__ */ (0,
|
|
2882
|
+
addresses: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2883
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
|
|
2884
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "10", r: "2.5" })
|
|
2875
2885
|
] }),
|
|
2876
|
-
paymentMethods: /* @__PURE__ */ (0,
|
|
2877
|
-
/* @__PURE__ */ (0,
|
|
2878
|
-
/* @__PURE__ */ (0,
|
|
2886
|
+
paymentMethods: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2887
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
|
|
2888
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M2.5 10h19" })
|
|
2879
2889
|
] }),
|
|
2880
|
-
orders: /* @__PURE__ */ (0,
|
|
2881
|
-
/* @__PURE__ */ (0,
|
|
2882
|
-
/* @__PURE__ */ (0,
|
|
2883
|
-
/* @__PURE__ */ (0,
|
|
2890
|
+
orders: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M4 7h16v13H4z" }),
|
|
2892
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 7V4h8v3" }),
|
|
2893
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 12h8" })
|
|
2884
2894
|
] }),
|
|
2885
|
-
invoices: /* @__PURE__ */ (0,
|
|
2886
|
-
/* @__PURE__ */ (0,
|
|
2887
|
-
/* @__PURE__ */ (0,
|
|
2895
|
+
invoices: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2896
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
|
|
2897
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M9 8h6M9 12h6" })
|
|
2888
2898
|
] }),
|
|
2889
|
-
subscriptions: /* @__PURE__ */ (0,
|
|
2890
|
-
/* @__PURE__ */ (0,
|
|
2891
|
-
/* @__PURE__ */ (0,
|
|
2892
|
-
/* @__PURE__ */ (0,
|
|
2899
|
+
subscriptions: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2900
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
|
|
2901
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
|
|
2902
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M18 3v4h-4M6 21v-4h4" })
|
|
2893
2903
|
] }),
|
|
2894
|
-
security: /* @__PURE__ */ (0,
|
|
2895
|
-
/* @__PURE__ */ (0,
|
|
2896
|
-
/* @__PURE__ */ (0,
|
|
2904
|
+
security: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
|
|
2905
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
|
|
2906
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m9 12 2 2 4-4" })
|
|
2897
2907
|
] })
|
|
2898
2908
|
};
|
|
2899
2909
|
|
|
@@ -3024,32 +3034,32 @@ function useInvoice(id) {
|
|
|
3024
3034
|
}
|
|
3025
3035
|
|
|
3026
3036
|
// src/react/components/account/PanelState.tsx
|
|
3027
|
-
var
|
|
3037
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3028
3038
|
function PanelState(props) {
|
|
3029
3039
|
const { t, errorMessage } = useCopy();
|
|
3030
3040
|
const { data, isLoading, error, refetch } = props.resource;
|
|
3031
3041
|
const empty = props.isEmpty(data);
|
|
3032
|
-
if (isLoading && empty) return /* @__PURE__ */ (0,
|
|
3033
|
-
const errorBanner = error ? /* @__PURE__ */ (0,
|
|
3034
|
-
/* @__PURE__ */ (0,
|
|
3035
|
-
/* @__PURE__ */ (0,
|
|
3042
|
+
if (isLoading && empty) return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { count: props.skeletonRows ?? 3 });
|
|
3043
|
+
const errorBanner = error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "throttle-stack", children: [
|
|
3044
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { tone: "error", children: errorMessage(error) }),
|
|
3045
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
|
|
3036
3046
|
] }) : null;
|
|
3037
3047
|
const gatedByVerification = error?.code === "verification_required";
|
|
3038
3048
|
if (gatedByVerification && empty) {
|
|
3039
|
-
return /* @__PURE__ */ (0,
|
|
3049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
|
|
3040
3050
|
}
|
|
3041
3051
|
if (error && empty) return errorBanner;
|
|
3042
3052
|
if (empty) {
|
|
3043
|
-
return props.gated ? /* @__PURE__ */ (0,
|
|
3053
|
+
return props.gated ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
|
|
3044
3054
|
}
|
|
3045
|
-
return /* @__PURE__ */ (0,
|
|
3055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
3046
3056
|
errorBanner,
|
|
3047
3057
|
props.children(data)
|
|
3048
3058
|
] });
|
|
3049
3059
|
}
|
|
3050
3060
|
|
|
3051
3061
|
// src/react/components/account/ProfilePanel.tsx
|
|
3052
|
-
var
|
|
3062
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3053
3063
|
function ProfilePanel(props) {
|
|
3054
3064
|
const a = useAppearance(props.appearance);
|
|
3055
3065
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3070,14 +3080,14 @@ function ProfilePanel(props) {
|
|
|
3070
3080
|
});
|
|
3071
3081
|
}, [resource.data]);
|
|
3072
3082
|
if (status === "unauthenticated") return null;
|
|
3073
|
-
return /* @__PURE__ */ (0,
|
|
3083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3074
3084
|
PanelState,
|
|
3075
3085
|
{
|
|
3076
3086
|
resource,
|
|
3077
3087
|
isEmpty: (c) => c === null,
|
|
3078
3088
|
emptyTitle: t.common.somethingWentWrong,
|
|
3079
3089
|
skeletonRows: 4,
|
|
3080
|
-
children: (customer) => /* @__PURE__ */ (0,
|
|
3090
|
+
children: (customer) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3081
3091
|
"form",
|
|
3082
3092
|
{
|
|
3083
3093
|
...a.el("profilePanel.form", "throttle-stack"),
|
|
@@ -3095,7 +3105,7 @@ function ProfilePanel(props) {
|
|
|
3095
3105
|
});
|
|
3096
3106
|
},
|
|
3097
3107
|
children: [
|
|
3098
|
-
/* @__PURE__ */ (0,
|
|
3108
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3099
3109
|
Field,
|
|
3100
3110
|
{
|
|
3101
3111
|
label: t.profile.email,
|
|
@@ -3107,58 +3117,62 @@ function ProfilePanel(props) {
|
|
|
3107
3117
|
hint: t.profile.emailReadOnly
|
|
3108
3118
|
}
|
|
3109
3119
|
),
|
|
3110
|
-
/* @__PURE__ */ (0,
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3120
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
|
|
3121
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3122
|
+
Field,
|
|
3123
|
+
{
|
|
3124
|
+
label: t.profile.firstName,
|
|
3125
|
+
value: form.firstName,
|
|
3126
|
+
autoComplete: "given-name",
|
|
3127
|
+
onChange: (v) => {
|
|
3128
|
+
edited.current = true;
|
|
3129
|
+
setForm((f) => ({ ...f, firstName: v }));
|
|
3130
|
+
}
|
|
3119
3131
|
}
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3132
|
+
),
|
|
3133
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3134
|
+
Field,
|
|
3135
|
+
{
|
|
3136
|
+
label: t.profile.lastName,
|
|
3137
|
+
value: form.lastName,
|
|
3138
|
+
autoComplete: "family-name",
|
|
3139
|
+
onChange: (v) => {
|
|
3140
|
+
edited.current = true;
|
|
3141
|
+
setForm((f) => ({ ...f, lastName: v }));
|
|
3142
|
+
}
|
|
3131
3143
|
}
|
|
3132
|
-
|
|
3133
|
-
),
|
|
3134
|
-
/* @__PURE__ */ (0,
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
+
)
|
|
3145
|
+
] }),
|
|
3146
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
|
|
3147
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3148
|
+
Field,
|
|
3149
|
+
{
|
|
3150
|
+
label: t.profile.phone,
|
|
3151
|
+
type: "tel",
|
|
3152
|
+
value: form.phone,
|
|
3153
|
+
autoComplete: "tel",
|
|
3154
|
+
onChange: (v) => {
|
|
3155
|
+
edited.current = true;
|
|
3156
|
+
setForm((f) => ({ ...f, phone: v }));
|
|
3157
|
+
}
|
|
3144
3158
|
}
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3159
|
+
),
|
|
3160
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3161
|
+
Field,
|
|
3162
|
+
{
|
|
3163
|
+
label: t.profile.company,
|
|
3164
|
+
value: form.company,
|
|
3165
|
+
autoComplete: "organization",
|
|
3166
|
+
onChange: (v) => {
|
|
3167
|
+
edited.current = true;
|
|
3168
|
+
setForm((f) => ({ ...f, company: v }));
|
|
3169
|
+
}
|
|
3156
3170
|
}
|
|
3157
|
-
|
|
3158
|
-
),
|
|
3159
|
-
error ? /* @__PURE__ */ (0,
|
|
3160
|
-
notice ? /* @__PURE__ */ (0,
|
|
3161
|
-
/* @__PURE__ */ (0,
|
|
3171
|
+
)
|
|
3172
|
+
] }),
|
|
3173
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
3174
|
+
notice ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "success", children: notice }) : null,
|
|
3175
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
|
|
3162
3176
|
]
|
|
3163
3177
|
}
|
|
3164
3178
|
)
|
|
@@ -3171,7 +3185,7 @@ var import_react24 = require("react");
|
|
|
3171
3185
|
|
|
3172
3186
|
// src/react/components/account/AddressForm.tsx
|
|
3173
3187
|
var import_react23 = require("react");
|
|
3174
|
-
var
|
|
3188
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3175
3189
|
function AddressForm(props) {
|
|
3176
3190
|
const a = useAppearance();
|
|
3177
3191
|
const { t } = useCopy();
|
|
@@ -3190,7 +3204,7 @@ function AddressForm(props) {
|
|
|
3190
3204
|
phone: i?.phone ?? ""
|
|
3191
3205
|
});
|
|
3192
3206
|
const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
|
|
3193
|
-
return /* @__PURE__ */ (0,
|
|
3207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
3194
3208
|
"form",
|
|
3195
3209
|
{
|
|
3196
3210
|
...a.el("addressesPanel.form", "throttle-stack"),
|
|
@@ -3212,11 +3226,15 @@ function AddressForm(props) {
|
|
|
3212
3226
|
});
|
|
3213
3227
|
},
|
|
3214
3228
|
children: [
|
|
3215
|
-
/* @__PURE__ */ (0,
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3229
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
|
|
3231
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
|
|
3232
|
+
] }),
|
|
3233
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
|
|
3236
|
+
] }),
|
|
3237
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3220
3238
|
Field,
|
|
3221
3239
|
{
|
|
3222
3240
|
label: t.addresses.addressLine1,
|
|
@@ -3226,7 +3244,7 @@ function AddressForm(props) {
|
|
|
3226
3244
|
autoComplete: "address-line1"
|
|
3227
3245
|
}
|
|
3228
3246
|
),
|
|
3229
|
-
/* @__PURE__ */ (0,
|
|
3247
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3230
3248
|
Field,
|
|
3231
3249
|
{
|
|
3232
3250
|
label: t.addresses.addressLine2,
|
|
@@ -3235,41 +3253,45 @@ function AddressForm(props) {
|
|
|
3235
3253
|
autoComplete: "address-line2"
|
|
3236
3254
|
}
|
|
3237
3255
|
),
|
|
3238
|
-
/* @__PURE__ */ (0,
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
|
|
3257
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
|
|
3258
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3259
|
+
Field,
|
|
3260
|
+
{
|
|
3261
|
+
label: t.addresses.stateProvince,
|
|
3262
|
+
value: form.stateProvince,
|
|
3263
|
+
onChange: set("stateProvince"),
|
|
3264
|
+
autoComplete: "address-level1"
|
|
3265
|
+
}
|
|
3266
|
+
)
|
|
3267
|
+
] }),
|
|
3268
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3270
|
+
Field,
|
|
3271
|
+
{
|
|
3272
|
+
label: t.addresses.postalCode,
|
|
3273
|
+
value: form.postalCode,
|
|
3274
|
+
onChange: set("postalCode"),
|
|
3275
|
+
autoComplete: "postal-code"
|
|
3276
|
+
}
|
|
3277
|
+
),
|
|
3278
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3279
|
+
Field,
|
|
3280
|
+
{
|
|
3281
|
+
label: t.addresses.countryCode,
|
|
3282
|
+
value: form.countryCode,
|
|
3283
|
+
onChange: set("countryCode"),
|
|
3284
|
+
required: true,
|
|
3285
|
+
autoComplete: "country",
|
|
3286
|
+
hint: "ISO 3166-1 alpha-2, e.g. GB"
|
|
3287
|
+
}
|
|
3288
|
+
)
|
|
3289
|
+
] }),
|
|
3290
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
|
|
3291
|
+
props.error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Alert, { tone: "error", children: props.error }) : null,
|
|
3292
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "throttle-actions", children: [
|
|
3293
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
|
|
3294
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
|
|
3273
3295
|
] })
|
|
3274
3296
|
]
|
|
3275
3297
|
}
|
|
@@ -3277,7 +3299,7 @@ function AddressForm(props) {
|
|
|
3277
3299
|
}
|
|
3278
3300
|
|
|
3279
3301
|
// src/react/components/account/AddressesPanel.tsx
|
|
3280
|
-
var
|
|
3302
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3281
3303
|
function AddressesPanel(props) {
|
|
3282
3304
|
const a = useAppearance(props.appearance);
|
|
3283
3305
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3293,9 +3315,9 @@ function AddressesPanel(props) {
|
|
|
3293
3315
|
const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
|
|
3294
3316
|
const close = () => setEditing(null);
|
|
3295
3317
|
const formatAddress = (address) => [address.addressLine2, address.city, address.stateProvince, address.postalCode, address.countryCode].filter(Boolean).join(", ");
|
|
3296
|
-
return /* @__PURE__ */ (0,
|
|
3297
|
-
!editing && error ? /* @__PURE__ */ (0,
|
|
3298
|
-
editing ? /* @__PURE__ */ (0,
|
|
3318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
|
|
3319
|
+
!editing && error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
3320
|
+
editing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3299
3321
|
AddressForm,
|
|
3300
3322
|
{
|
|
3301
3323
|
initial: editing === "new" ? void 0 : editing,
|
|
@@ -3308,16 +3330,16 @@ function AddressesPanel(props) {
|
|
|
3308
3330
|
close();
|
|
3309
3331
|
})
|
|
3310
3332
|
}
|
|
3311
|
-
) : /* @__PURE__ */ (0,
|
|
3312
|
-
/* @__PURE__ */ (0,
|
|
3313
|
-
/* @__PURE__ */ (0,
|
|
3333
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
|
|
3335
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3314
3336
|
PanelState,
|
|
3315
3337
|
{
|
|
3316
3338
|
resource,
|
|
3317
3339
|
isEmpty: (rows) => rows.length === 0,
|
|
3318
3340
|
emptyTitle: t.addresses.empty,
|
|
3319
3341
|
emptyDescription: t.addresses.emptyDescription,
|
|
3320
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */ (0,
|
|
3342
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3321
3343
|
DataTable,
|
|
3322
3344
|
{
|
|
3323
3345
|
tableKey: "addressesPanel.table",
|
|
@@ -3326,13 +3348,13 @@ function AddressesPanel(props) {
|
|
|
3326
3348
|
rows,
|
|
3327
3349
|
columns: [
|
|
3328
3350
|
{ key: "label", label: t.addresses.label, render: (address) => address.label || address.addressLine1 },
|
|
3329
|
-
{ key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ (0,
|
|
3351
|
+
{ key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3330
3352
|
address.addressLine1,
|
|
3331
3353
|
formatAddress(address) ? `, ${formatAddress(address)}` : ""
|
|
3332
3354
|
] }) },
|
|
3333
|
-
{ key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ (0,
|
|
3334
|
-
{ key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ (0,
|
|
3335
|
-
!address.isDefault ? /* @__PURE__ */ (0,
|
|
3355
|
+
{ key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
|
|
3356
|
+
{ key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
|
|
3357
|
+
!address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3336
3358
|
Button,
|
|
3337
3359
|
{
|
|
3338
3360
|
variant: "secondary",
|
|
@@ -3341,7 +3363,7 @@ function AddressesPanel(props) {
|
|
|
3341
3363
|
children: t.addresses.makeDefault
|
|
3342
3364
|
}
|
|
3343
3365
|
) : null,
|
|
3344
|
-
/* @__PURE__ */ (0,
|
|
3366
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3345
3367
|
Button,
|
|
3346
3368
|
{
|
|
3347
3369
|
variant: "secondary",
|
|
@@ -3350,7 +3372,7 @@ function AddressesPanel(props) {
|
|
|
3350
3372
|
children: t.common.edit
|
|
3351
3373
|
}
|
|
3352
3374
|
),
|
|
3353
|
-
/* @__PURE__ */ (0,
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3354
3376
|
Button,
|
|
3355
3377
|
{
|
|
3356
3378
|
variant: "danger",
|
|
@@ -3366,17 +3388,17 @@ function AddressesPanel(props) {
|
|
|
3366
3388
|
] }) }
|
|
3367
3389
|
]
|
|
3368
3390
|
}
|
|
3369
|
-
) : /* @__PURE__ */ (0,
|
|
3370
|
-
/* @__PURE__ */ (0,
|
|
3371
|
-
/* @__PURE__ */ (0,
|
|
3372
|
-
/* @__PURE__ */ (0,
|
|
3373
|
-
address.isDefault ? /* @__PURE__ */ (0,
|
|
3391
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("addressesPanel.item", itemBase), children: [
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
|
|
3393
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-row", children: [
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("strong", { children: address.label || address.addressLine1 }),
|
|
3395
|
+
address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
|
|
3374
3396
|
] }),
|
|
3375
|
-
/* @__PURE__ */ (0,
|
|
3376
|
-
/* @__PURE__ */ (0,
|
|
3397
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "throttle-muted", children: address.addressLine1 }),
|
|
3398
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "throttle-muted", children: formatAddress(address) })
|
|
3377
3399
|
] }),
|
|
3378
|
-
/* @__PURE__ */ (0,
|
|
3379
|
-
!address.isDefault ? /* @__PURE__ */ (0,
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
|
|
3401
|
+
!address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3380
3402
|
Button,
|
|
3381
3403
|
{
|
|
3382
3404
|
variant: actionVariant("secondary"),
|
|
@@ -3385,7 +3407,7 @@ function AddressesPanel(props) {
|
|
|
3385
3407
|
children: t.addresses.makeDefault
|
|
3386
3408
|
}
|
|
3387
3409
|
) : null,
|
|
3388
|
-
/* @__PURE__ */ (0,
|
|
3410
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3389
3411
|
Button,
|
|
3390
3412
|
{
|
|
3391
3413
|
variant: actionVariant("secondary"),
|
|
@@ -3394,7 +3416,7 @@ function AddressesPanel(props) {
|
|
|
3394
3416
|
children: t.common.edit
|
|
3395
3417
|
}
|
|
3396
3418
|
),
|
|
3397
|
-
/* @__PURE__ */ (0,
|
|
3419
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3398
3420
|
Button,
|
|
3399
3421
|
{
|
|
3400
3422
|
variant: actionVariant("danger"),
|
|
@@ -3420,7 +3442,7 @@ var import_react26 = require("react");
|
|
|
3420
3442
|
|
|
3421
3443
|
// src/react/components/account/AddCardDialog.tsx
|
|
3422
3444
|
var import_react25 = require("react");
|
|
3423
|
-
var
|
|
3445
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3424
3446
|
function AddCardDialog(props) {
|
|
3425
3447
|
const { account } = useAuth();
|
|
3426
3448
|
const titleId = (0, import_react25.useId)();
|
|
@@ -3495,11 +3517,11 @@ function AddCardDialog(props) {
|
|
|
3495
3517
|
return () => window.removeEventListener("message", onMessage);
|
|
3496
3518
|
}, [src, account, t]);
|
|
3497
3519
|
if (!props.open) return null;
|
|
3498
|
-
return /* @__PURE__ */ (0,
|
|
3499
|
-
/* @__PURE__ */ (0,
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3501
|
-
error ? /* @__PURE__ */ (0,
|
|
3502
|
-
busy ? /* @__PURE__ */ (0,
|
|
3520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
|
|
3521
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-modal__header", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { id: titleId, className: "throttle-modal__title", children: t.paymentMethods.addTitle }) }),
|
|
3522
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "throttle-modal__body", children: [
|
|
3523
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
3524
|
+
busy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {}) }) : src ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3503
3525
|
"iframe",
|
|
3504
3526
|
{
|
|
3505
3527
|
className: "throttle-cardframe",
|
|
@@ -3507,13 +3529,13 @@ function AddCardDialog(props) {
|
|
|
3507
3529
|
title: t.paymentMethods.addTitle,
|
|
3508
3530
|
sandbox: "allow-scripts allow-forms allow-same-origin"
|
|
3509
3531
|
}
|
|
3510
|
-
) : !error ? /* @__PURE__ */ (0,
|
|
3532
|
+
) : !error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {}) }) : null
|
|
3511
3533
|
] })
|
|
3512
3534
|
] });
|
|
3513
3535
|
}
|
|
3514
3536
|
|
|
3515
3537
|
// src/react/components/account/PaymentMethodsPanel.tsx
|
|
3516
|
-
var
|
|
3538
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3517
3539
|
function PaymentMethodsPanel(props) {
|
|
3518
3540
|
const a = useAppearance(props.appearance);
|
|
3519
3541
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3530,10 +3552,10 @@ function PaymentMethodsPanel(props) {
|
|
|
3530
3552
|
const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
|
|
3531
3553
|
const cardLabel = (card) => `${(card.cardBrand ?? card.methodType).toUpperCase()} \u2022\u2022\u2022\u2022 ${card.cardLastFour ?? "____"}`;
|
|
3532
3554
|
const expiryLabel = (card) => card.cardExpMonth && card.cardExpYear ? `${String(card.cardExpMonth).padStart(2, "0")}/${card.cardExpYear}` : "";
|
|
3533
|
-
return /* @__PURE__ */ (0,
|
|
3534
|
-
error ? /* @__PURE__ */ (0,
|
|
3535
|
-
emailVerified ? /* @__PURE__ */ (0,
|
|
3536
|
-
/* @__PURE__ */ (0,
|
|
3555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
|
|
3556
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
3557
|
+
emailVerified ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
|
|
3558
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3537
3559
|
AddCardDialog,
|
|
3538
3560
|
{
|
|
3539
3561
|
open: adding,
|
|
@@ -3544,7 +3566,7 @@ function PaymentMethodsPanel(props) {
|
|
|
3544
3566
|
localization: props.localization
|
|
3545
3567
|
}
|
|
3546
3568
|
),
|
|
3547
|
-
/* @__PURE__ */ (0,
|
|
3569
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3548
3570
|
PanelState,
|
|
3549
3571
|
{
|
|
3550
3572
|
resource,
|
|
@@ -3553,7 +3575,7 @@ function PaymentMethodsPanel(props) {
|
|
|
3553
3575
|
isEmpty: (rows) => rows.length === 0,
|
|
3554
3576
|
emptyTitle: t.paymentMethods.empty,
|
|
3555
3577
|
emptyDescription: t.paymentMethods.emptyDescription,
|
|
3556
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */ (0,
|
|
3578
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3557
3579
|
DataTable,
|
|
3558
3580
|
{
|
|
3559
3581
|
tableKey: "paymentMethodsPanel.table",
|
|
@@ -3563,9 +3585,9 @@ function PaymentMethodsPanel(props) {
|
|
|
3563
3585
|
columns: [
|
|
3564
3586
|
{ key: "card", label: t.paymentMethods.columnCard, render: (card) => cardLabel(card) },
|
|
3565
3587
|
{ key: "expires", label: t.paymentMethods.expires, render: (card) => expiryLabel(card) },
|
|
3566
|
-
{ key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ (0,
|
|
3567
|
-
{ key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ (0,
|
|
3568
|
-
!card.isDefault ? /* @__PURE__ */ (0,
|
|
3588
|
+
{ key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
|
|
3589
|
+
{ key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-actions", children: [
|
|
3590
|
+
!card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3569
3591
|
Button,
|
|
3570
3592
|
{
|
|
3571
3593
|
variant: "secondary",
|
|
@@ -3575,7 +3597,7 @@ function PaymentMethodsPanel(props) {
|
|
|
3575
3597
|
children: t.paymentMethods.makeDefault
|
|
3576
3598
|
}
|
|
3577
3599
|
) : null,
|
|
3578
|
-
/* @__PURE__ */ (0,
|
|
3600
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3579
3601
|
Button,
|
|
3580
3602
|
{
|
|
3581
3603
|
variant: "danger",
|
|
@@ -3591,13 +3613,13 @@ function PaymentMethodsPanel(props) {
|
|
|
3591
3613
|
] }) }
|
|
3592
3614
|
]
|
|
3593
3615
|
}
|
|
3594
|
-
) : /* @__PURE__ */ (0,
|
|
3595
|
-
/* @__PURE__ */ (0,
|
|
3596
|
-
/* @__PURE__ */ (0,
|
|
3597
|
-
/* @__PURE__ */ (0,
|
|
3598
|
-
card.isDefault ? /* @__PURE__ */ (0,
|
|
3616
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
|
|
3617
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
|
|
3618
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-row", children: [
|
|
3619
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: cardLabel(card) }),
|
|
3620
|
+
card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
|
|
3599
3621
|
] }),
|
|
3600
|
-
card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ (0,
|
|
3622
|
+
card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "throttle-muted", children: [
|
|
3601
3623
|
t.paymentMethods.expires,
|
|
3602
3624
|
" ",
|
|
3603
3625
|
String(card.cardExpMonth).padStart(2, "0"),
|
|
@@ -3605,8 +3627,8 @@ function PaymentMethodsPanel(props) {
|
|
|
3605
3627
|
card.cardExpYear
|
|
3606
3628
|
] }) : null
|
|
3607
3629
|
] }),
|
|
3608
|
-
/* @__PURE__ */ (0,
|
|
3609
|
-
!card.isDefault ? /* @__PURE__ */ (0,
|
|
3630
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-actions", children: [
|
|
3631
|
+
!card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3610
3632
|
Button,
|
|
3611
3633
|
{
|
|
3612
3634
|
variant: actionVariant("secondary"),
|
|
@@ -3616,7 +3638,7 @@ function PaymentMethodsPanel(props) {
|
|
|
3616
3638
|
children: t.paymentMethods.makeDefault
|
|
3617
3639
|
}
|
|
3618
3640
|
) : null,
|
|
3619
|
-
/* @__PURE__ */ (0,
|
|
3641
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3620
3642
|
Button,
|
|
3621
3643
|
{
|
|
3622
3644
|
variant: actionVariant("danger"),
|
|
@@ -3669,7 +3691,7 @@ function formatDate(value, locale) {
|
|
|
3669
3691
|
}
|
|
3670
3692
|
|
|
3671
3693
|
// src/react/components/account/OrderStatus.tsx
|
|
3672
|
-
var
|
|
3694
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3673
3695
|
function copyKey(wire) {
|
|
3674
3696
|
return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
|
|
3675
3697
|
}
|
|
@@ -3677,21 +3699,21 @@ var ATTENTION_PAYMENT_STATES = /* @__PURE__ */ new Set(["pending", "failed", "di
|
|
|
3677
3699
|
var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["cancelled", "closed", "void", "expired", "voided"]);
|
|
3678
3700
|
function StatusBadge(props) {
|
|
3679
3701
|
const label = props.labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
|
|
3680
|
-
return /* @__PURE__ */ (0,
|
|
3702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
|
|
3681
3703
|
}
|
|
3682
3704
|
function OrderStatus(props) {
|
|
3683
3705
|
const labels = props.t.orders.statusLabels;
|
|
3684
3706
|
const payLabels = props.t.orders.paymentLabels;
|
|
3685
3707
|
const lifecycle = labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
|
|
3686
3708
|
const money = props.paymentStatus ? payLabels[copyKey(props.paymentStatus)] : void 0;
|
|
3687
|
-
return /* @__PURE__ */ (0,
|
|
3688
|
-
/* @__PURE__ */ (0,
|
|
3689
|
-
money ? /* @__PURE__ */ (0,
|
|
3709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
|
|
3711
|
+
money ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
|
|
3690
3712
|
] });
|
|
3691
3713
|
}
|
|
3692
3714
|
|
|
3693
3715
|
// src/react/components/account/AddressBlock.tsx
|
|
3694
|
-
var
|
|
3716
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3695
3717
|
function addressLines(address) {
|
|
3696
3718
|
if (!address || typeof address !== "object") return [];
|
|
3697
3719
|
const a = address;
|
|
@@ -3711,14 +3733,14 @@ function AddressBlock(props) {
|
|
|
3711
3733
|
const a = useAppearance();
|
|
3712
3734
|
const lines = addressLines(props.address);
|
|
3713
3735
|
if (lines.length === 0) return null;
|
|
3714
|
-
return /* @__PURE__ */ (0,
|
|
3715
|
-
/* @__PURE__ */ (0,
|
|
3716
|
-
lines.map((l) => /* @__PURE__ */ (0,
|
|
3736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...a.el(props.elementKey ?? "orderDetail.address", "throttle-addressblock"), children: [
|
|
3737
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: "throttle-section__title", children: props.heading }),
|
|
3738
|
+
lines.map((l) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "throttle-addressblock__line throttle-muted", children: l }, l))
|
|
3717
3739
|
] });
|
|
3718
3740
|
}
|
|
3719
3741
|
|
|
3720
3742
|
// src/react/components/account/OrderTimeline.tsx
|
|
3721
|
-
var
|
|
3743
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3722
3744
|
function orderTimeline(order, labels) {
|
|
3723
3745
|
const entries = [{ label: labels.placed, at: order.createdAt }];
|
|
3724
3746
|
if (order.completedAt) entries.push({ label: labels.completed, at: order.completedAt });
|
|
@@ -3729,24 +3751,24 @@ function orderTimeline(order, labels) {
|
|
|
3729
3751
|
function OrderTimeline(props) {
|
|
3730
3752
|
const a = useAppearance();
|
|
3731
3753
|
if (props.entries.length <= 1) return null;
|
|
3732
|
-
return /* @__PURE__ */ (0,
|
|
3733
|
-
/* @__PURE__ */ (0,
|
|
3734
|
-
props.entries.map((e) => /* @__PURE__ */ (0,
|
|
3735
|
-
/* @__PURE__ */ (0,
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
3737
|
-
/* @__PURE__ */ (0,
|
|
3754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.timeline", "throttle-timeline"), children: [
|
|
3755
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h4", { className: "throttle-section__title", children: props.heading }),
|
|
3756
|
+
props.entries.map((e) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-timeline__row", children: [
|
|
3757
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-timeline__dot", "aria-hidden": "true" }),
|
|
3758
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-timeline__label", children: e.label }),
|
|
3759
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-muted", children: formatDate(e.at, props.locale) })
|
|
3738
3760
|
] }, `${e.label}-${e.at}`))
|
|
3739
3761
|
] });
|
|
3740
3762
|
}
|
|
3741
3763
|
|
|
3742
3764
|
// src/react/components/account/OrderDetail.tsx
|
|
3743
|
-
var
|
|
3765
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3744
3766
|
var CAN_PAY = /* @__PURE__ */ new Set(["draft", "pending"]);
|
|
3745
3767
|
var CAN_REORDER = /* @__PURE__ */ new Set(["fulfilled", "cancelled", "closed"]);
|
|
3746
3768
|
function Line(props) {
|
|
3747
|
-
return /* @__PURE__ */ (0,
|
|
3748
|
-
/* @__PURE__ */ (0,
|
|
3749
|
-
/* @__PURE__ */ (0,
|
|
3769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
|
|
3770
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "throttle-muted", children: props.label }),
|
|
3771
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: props.value })
|
|
3750
3772
|
] });
|
|
3751
3773
|
}
|
|
3752
3774
|
function OrderDetail(props) {
|
|
@@ -3754,7 +3776,7 @@ function OrderDetail(props) {
|
|
|
3754
3776
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
3755
3777
|
const { t, locale } = useCopy(props.localization);
|
|
3756
3778
|
const resource = useOrder(props.orderId);
|
|
3757
|
-
return /* @__PURE__ */ (0,
|
|
3779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
|
|
3758
3780
|
props.onBack ? (
|
|
3759
3781
|
// Wrapped on purpose. The panel is a column flex container, so a
|
|
3760
3782
|
// direct child stretches to its full width however `width: auto`
|
|
@@ -3762,27 +3784,27 @@ function OrderDetail(props) {
|
|
|
3762
3784
|
// centred label. The wrapper takes the stretch; the button keeps
|
|
3763
3785
|
// its own width. A CSS fix would need a compound selector, and
|
|
3764
3786
|
// those outrank the merchant overrides in `appearance.elements`.
|
|
3765
|
-
/* @__PURE__ */ (0,
|
|
3787
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
|
|
3766
3788
|
) : null,
|
|
3767
|
-
/* @__PURE__ */ (0,
|
|
3789
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3768
3790
|
PanelState,
|
|
3769
3791
|
{
|
|
3770
3792
|
resource,
|
|
3771
3793
|
isEmpty: (o) => o === null,
|
|
3772
3794
|
emptyTitle: t.orders.empty,
|
|
3773
3795
|
skeletonRows: 5,
|
|
3774
|
-
children: (order) => /* @__PURE__ */ (0,
|
|
3775
|
-
/* @__PURE__ */ (0,
|
|
3776
|
-
/* @__PURE__ */ (0,
|
|
3777
|
-
/* @__PURE__ */ (0,
|
|
3796
|
+
children: (order) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
3797
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
|
|
3798
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { children: order.orderNumber }),
|
|
3799
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
|
|
3778
3800
|
] }),
|
|
3779
|
-
/* @__PURE__ */ (0,
|
|
3780
|
-
/* @__PURE__ */ (0,
|
|
3781
|
-
item.imageUrl ? /* @__PURE__ */ (0,
|
|
3782
|
-
/* @__PURE__ */ (0,
|
|
3783
|
-
/* @__PURE__ */ (0,
|
|
3784
|
-
item.description ? /* @__PURE__ */ (0,
|
|
3785
|
-
/* @__PURE__ */ (0,
|
|
3801
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
|
|
3802
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
|
|
3803
|
+
item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
|
|
3804
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { flex: 1 }, children: [
|
|
3805
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: item.name }),
|
|
3806
|
+
item.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "throttle-muted", children: item.description }) : null,
|
|
3807
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
|
|
3786
3808
|
t.orders.quantity,
|
|
3787
3809
|
" ",
|
|
3788
3810
|
item.quantity,
|
|
@@ -3790,17 +3812,17 @@ function OrderDetail(props) {
|
|
|
3790
3812
|
formatMoney(item.unitPrice, order.currency, locale)
|
|
3791
3813
|
] })
|
|
3792
3814
|
] }),
|
|
3793
|
-
/* @__PURE__ */ (0,
|
|
3815
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: formatMoney(item.total, order.currency, locale) })
|
|
3794
3816
|
] }, item.id)) }),
|
|
3795
|
-
/* @__PURE__ */ (0,
|
|
3796
|
-
/* @__PURE__ */ (0,
|
|
3797
|
-
order.discountTotal ? /* @__PURE__ */ (0,
|
|
3798
|
-
/* @__PURE__ */ (0,
|
|
3799
|
-
/* @__PURE__ */ (0,
|
|
3800
|
-
/* @__PURE__ */ (0,
|
|
3817
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
|
|
3818
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
|
|
3819
|
+
order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
|
|
3820
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
|
|
3821
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
|
|
3822
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
|
|
3801
3823
|
] }),
|
|
3802
|
-
/* @__PURE__ */ (0,
|
|
3803
|
-
/* @__PURE__ */ (0,
|
|
3824
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
|
|
3825
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3804
3826
|
AddressBlock,
|
|
3805
3827
|
{
|
|
3806
3828
|
heading: t.orders.shipTo,
|
|
@@ -3808,7 +3830,7 @@ function OrderDetail(props) {
|
|
|
3808
3830
|
elementKey: "orderDetail.shippingAddress"
|
|
3809
3831
|
}
|
|
3810
3832
|
),
|
|
3811
|
-
/* @__PURE__ */ (0,
|
|
3833
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3812
3834
|
AddressBlock,
|
|
3813
3835
|
{
|
|
3814
3836
|
heading: t.orders.billTo,
|
|
@@ -3817,7 +3839,7 @@ function OrderDetail(props) {
|
|
|
3817
3839
|
}
|
|
3818
3840
|
)
|
|
3819
3841
|
] }),
|
|
3820
|
-
/* @__PURE__ */ (0,
|
|
3842
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3821
3843
|
OrderTimeline,
|
|
3822
3844
|
{
|
|
3823
3845
|
heading: t.orders.history,
|
|
@@ -3841,8 +3863,8 @@ function OrderDetail(props) {
|
|
|
3841
3863
|
quantity: li.quantity
|
|
3842
3864
|
}))
|
|
3843
3865
|
};
|
|
3844
|
-
return /* @__PURE__ */ (0,
|
|
3845
|
-
props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ (0,
|
|
3866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-actions", children: [
|
|
3867
|
+
props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3846
3868
|
Button,
|
|
3847
3869
|
{
|
|
3848
3870
|
elementKey: "orderDetail.payButton",
|
|
@@ -3850,7 +3872,7 @@ function OrderDetail(props) {
|
|
|
3850
3872
|
children: t.orders.payNow
|
|
3851
3873
|
}
|
|
3852
3874
|
) : null,
|
|
3853
|
-
props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ (0,
|
|
3875
|
+
props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3854
3876
|
Button,
|
|
3855
3877
|
{
|
|
3856
3878
|
variant: "secondary",
|
|
@@ -3859,7 +3881,7 @@ function OrderDetail(props) {
|
|
|
3859
3881
|
children: t.orders.track
|
|
3860
3882
|
}
|
|
3861
3883
|
) : null,
|
|
3862
|
-
props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ (0,
|
|
3884
|
+
props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3863
3885
|
Button,
|
|
3864
3886
|
{
|
|
3865
3887
|
variant: "secondary",
|
|
@@ -3868,7 +3890,7 @@ function OrderDetail(props) {
|
|
|
3868
3890
|
children: t.orders.reorder
|
|
3869
3891
|
}
|
|
3870
3892
|
) : null,
|
|
3871
|
-
order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0,
|
|
3893
|
+
order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
|
|
3872
3894
|
] });
|
|
3873
3895
|
})()
|
|
3874
3896
|
] })
|
|
@@ -3878,7 +3900,7 @@ function OrderDetail(props) {
|
|
|
3878
3900
|
}
|
|
3879
3901
|
|
|
3880
3902
|
// src/react/components/account/OrdersPanel.tsx
|
|
3881
|
-
var
|
|
3903
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3882
3904
|
function OrdersPanel(props) {
|
|
3883
3905
|
const a = useAppearance(props.appearance);
|
|
3884
3906
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -3891,7 +3913,7 @@ function OrdersPanel(props) {
|
|
|
3891
3913
|
const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
|
|
3892
3914
|
const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
|
|
3893
3915
|
if (openId) {
|
|
3894
|
-
return /* @__PURE__ */ (0,
|
|
3916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3895
3917
|
OrderDetail,
|
|
3896
3918
|
{
|
|
3897
3919
|
orderId: openId,
|
|
@@ -3905,7 +3927,7 @@ function OrdersPanel(props) {
|
|
|
3905
3927
|
}
|
|
3906
3928
|
);
|
|
3907
3929
|
}
|
|
3908
|
-
return /* @__PURE__ */ (0,
|
|
3930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3909
3931
|
PanelState,
|
|
3910
3932
|
{
|
|
3911
3933
|
resource,
|
|
@@ -3914,7 +3936,7 @@ function OrdersPanel(props) {
|
|
|
3914
3936
|
isEmpty: (rows) => rows.length === 0,
|
|
3915
3937
|
emptyTitle: t.orders.empty,
|
|
3916
3938
|
emptyDescription: t.orders.emptyDescription,
|
|
3917
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */ (0,
|
|
3939
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3918
3940
|
DataTable,
|
|
3919
3941
|
{
|
|
3920
3942
|
tableKey: "ordersPanel.table",
|
|
@@ -3928,25 +3950,25 @@ function OrdersPanel(props) {
|
|
|
3928
3950
|
{
|
|
3929
3951
|
key: "status",
|
|
3930
3952
|
label: t.orders.status,
|
|
3931
|
-
render: (o) => /* @__PURE__ */ (0,
|
|
3953
|
+
render: (o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
|
|
3932
3954
|
},
|
|
3933
3955
|
{
|
|
3934
3956
|
key: "total",
|
|
3935
3957
|
label: t.orders.total,
|
|
3936
|
-
render: (o) => /* @__PURE__ */ (0,
|
|
3958
|
+
render: (o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
|
|
3937
3959
|
}
|
|
3938
3960
|
]
|
|
3939
3961
|
}
|
|
3940
|
-
) : /* @__PURE__ */ (0,
|
|
3941
|
-
/* @__PURE__ */ (0,
|
|
3942
|
-
/* @__PURE__ */ (0,
|
|
3943
|
-
/* @__PURE__ */ (0,
|
|
3944
|
-
/* @__PURE__ */ (0,
|
|
3962
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("ordersPanel.item", itemBase), children: [
|
|
3963
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
|
|
3964
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
|
|
3965
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: o.orderNumber }),
|
|
3966
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
|
|
3945
3967
|
] }),
|
|
3946
|
-
/* @__PURE__ */ (0,
|
|
3947
|
-
/* @__PURE__ */ (0,
|
|
3968
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
|
|
3969
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
|
|
3948
3970
|
] }),
|
|
3949
|
-
/* @__PURE__ */ (0,
|
|
3971
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3950
3972
|
Button,
|
|
3951
3973
|
{
|
|
3952
3974
|
variant: rowsVariant ? "link" : "secondary",
|
|
@@ -3964,11 +3986,11 @@ function OrdersPanel(props) {
|
|
|
3964
3986
|
var import_react28 = require("react");
|
|
3965
3987
|
|
|
3966
3988
|
// src/react/components/account/InvoiceDetail.tsx
|
|
3967
|
-
var
|
|
3989
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3968
3990
|
function Line2(props) {
|
|
3969
|
-
return /* @__PURE__ */ (0,
|
|
3970
|
-
/* @__PURE__ */ (0,
|
|
3971
|
-
/* @__PURE__ */ (0,
|
|
3991
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "throttle-row", children: [
|
|
3992
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "throttle-muted", children: props.label }),
|
|
3993
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: props.value })
|
|
3972
3994
|
] });
|
|
3973
3995
|
}
|
|
3974
3996
|
function InvoiceDetail(props) {
|
|
@@ -3978,7 +4000,7 @@ function InvoiceDetail(props) {
|
|
|
3978
4000
|
const { account } = useAuth();
|
|
3979
4001
|
const resource = useInvoice(props.invoiceId);
|
|
3980
4002
|
const { submitting, error, run } = useAction();
|
|
3981
|
-
return /* @__PURE__ */ (0,
|
|
4003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
|
|
3982
4004
|
props.onBack ? (
|
|
3983
4005
|
// Wrapped on purpose. The panel is a column flex container, so a
|
|
3984
4006
|
// direct child stretches to its full width however `width: auto`
|
|
@@ -3986,25 +4008,25 @@ function InvoiceDetail(props) {
|
|
|
3986
4008
|
// centred label. The wrapper takes the stretch; the button keeps
|
|
3987
4009
|
// its own width. A CSS fix would need a compound selector, and
|
|
3988
4010
|
// those outrank the merchant overrides in `appearance.elements`.
|
|
3989
|
-
/* @__PURE__ */ (0,
|
|
4011
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
|
|
3990
4012
|
) : null,
|
|
3991
|
-
/* @__PURE__ */ (0,
|
|
3992
|
-
/* @__PURE__ */ (0,
|
|
3993
|
-
/* @__PURE__ */ (0,
|
|
3994
|
-
/* @__PURE__ */ (0,
|
|
4013
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
4014
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "throttle-row", children: [
|
|
4015
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { children: invoice.number }),
|
|
4016
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
|
|
3995
4017
|
] }),
|
|
3996
|
-
/* @__PURE__ */ (0,
|
|
3997
|
-
/* @__PURE__ */ (0,
|
|
3998
|
-
invoice.dueAt ? /* @__PURE__ */ (0,
|
|
3999
|
-
invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0,
|
|
4018
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
|
|
4019
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
|
|
4020
|
+
invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
|
|
4021
|
+
invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
4000
4022
|
Line2,
|
|
4001
4023
|
{
|
|
4002
4024
|
label: t.invoices.period,
|
|
4003
4025
|
value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
|
|
4004
4026
|
}
|
|
4005
4027
|
) : null,
|
|
4006
|
-
/* @__PURE__ */ (0,
|
|
4007
|
-
invoice.amountRefunded ? /* @__PURE__ */ (0,
|
|
4028
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
|
|
4029
|
+
invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
4008
4030
|
Line2,
|
|
4009
4031
|
{
|
|
4010
4032
|
label: t.invoices.refunded,
|
|
@@ -4012,8 +4034,8 @@ function InvoiceDetail(props) {
|
|
|
4012
4034
|
}
|
|
4013
4035
|
) : null
|
|
4014
4036
|
] }),
|
|
4015
|
-
error ? /* @__PURE__ */ (0,
|
|
4016
|
-
/* @__PURE__ */ (0,
|
|
4037
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
4038
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
4017
4039
|
Button,
|
|
4018
4040
|
{
|
|
4019
4041
|
variant: "secondary",
|
|
@@ -4032,7 +4054,7 @@ function InvoiceDetail(props) {
|
|
|
4032
4054
|
}
|
|
4033
4055
|
|
|
4034
4056
|
// src/react/components/account/InvoicesPanel.tsx
|
|
4035
|
-
var
|
|
4057
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
4036
4058
|
function InvoicesPanel(props) {
|
|
4037
4059
|
const a = useAppearance(props.appearance);
|
|
4038
4060
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4045,7 +4067,7 @@ function InvoicesPanel(props) {
|
|
|
4045
4067
|
const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
|
|
4046
4068
|
const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
|
|
4047
4069
|
if (openId) {
|
|
4048
|
-
return /* @__PURE__ */ (0,
|
|
4070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
4049
4071
|
InvoiceDetail,
|
|
4050
4072
|
{
|
|
4051
4073
|
invoiceId: openId,
|
|
@@ -4055,7 +4077,7 @@ function InvoicesPanel(props) {
|
|
|
4055
4077
|
}
|
|
4056
4078
|
);
|
|
4057
4079
|
}
|
|
4058
|
-
return /* @__PURE__ */ (0,
|
|
4080
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
4059
4081
|
PanelState,
|
|
4060
4082
|
{
|
|
4061
4083
|
resource,
|
|
@@ -4064,7 +4086,7 @@ function InvoicesPanel(props) {
|
|
|
4064
4086
|
isEmpty: (rows) => rows.length === 0,
|
|
4065
4087
|
emptyTitle: t.invoices.empty,
|
|
4066
4088
|
emptyDescription: t.invoices.emptyDescription,
|
|
4067
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */ (0,
|
|
4089
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
4068
4090
|
DataTable,
|
|
4069
4091
|
{
|
|
4070
4092
|
tableKey: "invoicesPanel.table",
|
|
@@ -4075,24 +4097,24 @@ function InvoicesPanel(props) {
|
|
|
4075
4097
|
columns: [
|
|
4076
4098
|
{ key: "number", label: t.invoices.number },
|
|
4077
4099
|
{ key: "issuedAt", label: t.invoices.issued, render: (i) => formatDate(i.issuedAt, locale) },
|
|
4078
|
-
{ key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ (0,
|
|
4100
|
+
{ key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
|
|
4079
4101
|
{
|
|
4080
4102
|
key: "total",
|
|
4081
4103
|
label: t.invoices.total,
|
|
4082
|
-
render: (i) => /* @__PURE__ */ (0,
|
|
4104
|
+
render: (i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
|
|
4083
4105
|
}
|
|
4084
4106
|
]
|
|
4085
4107
|
}
|
|
4086
|
-
) : /* @__PURE__ */ (0,
|
|
4087
|
-
/* @__PURE__ */ (0,
|
|
4088
|
-
/* @__PURE__ */ (0,
|
|
4089
|
-
/* @__PURE__ */ (0,
|
|
4090
|
-
/* @__PURE__ */ (0,
|
|
4108
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...a.el("invoicesPanel.item", itemBase), children: [
|
|
4109
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
|
|
4110
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "throttle-row", children: [
|
|
4111
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: i.number }),
|
|
4112
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
|
|
4091
4113
|
] }),
|
|
4092
|
-
/* @__PURE__ */ (0,
|
|
4093
|
-
/* @__PURE__ */ (0,
|
|
4114
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
|
|
4115
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
|
|
4094
4116
|
] }),
|
|
4095
|
-
/* @__PURE__ */ (0,
|
|
4117
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
4096
4118
|
Button,
|
|
4097
4119
|
{
|
|
4098
4120
|
variant: rowsVariant ? "link" : "secondary",
|
|
@@ -4107,7 +4129,7 @@ function InvoicesPanel(props) {
|
|
|
4107
4129
|
}
|
|
4108
4130
|
|
|
4109
4131
|
// src/react/components/account/SubscriptionsPanel.tsx
|
|
4110
|
-
var
|
|
4132
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
4111
4133
|
var CAN_PAUSE = /* @__PURE__ */ new Set(["active", "trialing"]);
|
|
4112
4134
|
var CAN_RESUME = /* @__PURE__ */ new Set(["paused"]);
|
|
4113
4135
|
var CAN_CANCEL = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
|
|
@@ -4132,8 +4154,8 @@ function SubscriptionsPanel(props) {
|
|
|
4132
4154
|
};
|
|
4133
4155
|
const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${sub.interval}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
|
|
4134
4156
|
const renewsLabel = (sub) => formatDate(sub.status === "cancelled" ? sub.cancelledAt ?? sub.currentPeriodEnd : sub.currentPeriodEnd, locale);
|
|
4135
|
-
const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ (0,
|
|
4136
|
-
CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ (0,
|
|
4157
|
+
const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-actions", children: [
|
|
4158
|
+
CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4137
4159
|
Button,
|
|
4138
4160
|
{
|
|
4139
4161
|
variant: variantFor("secondary"),
|
|
@@ -4146,7 +4168,7 @@ function SubscriptionsPanel(props) {
|
|
|
4146
4168
|
children: t.subscriptions.pauseButton
|
|
4147
4169
|
}
|
|
4148
4170
|
) : null,
|
|
4149
|
-
CAN_RESUME.has(sub.status) ? /* @__PURE__ */ (0,
|
|
4171
|
+
CAN_RESUME.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4150
4172
|
Button,
|
|
4151
4173
|
{
|
|
4152
4174
|
variant: variantFor("secondary"),
|
|
@@ -4159,7 +4181,7 @@ function SubscriptionsPanel(props) {
|
|
|
4159
4181
|
children: t.subscriptions.resumeButton
|
|
4160
4182
|
}
|
|
4161
4183
|
) : null,
|
|
4162
|
-
CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0,
|
|
4184
|
+
CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4163
4185
|
Button,
|
|
4164
4186
|
{
|
|
4165
4187
|
variant: variantFor("secondary"),
|
|
@@ -4173,7 +4195,7 @@ function SubscriptionsPanel(props) {
|
|
|
4173
4195
|
children: t.subscriptions.cancelAtPeriodEnd
|
|
4174
4196
|
}
|
|
4175
4197
|
) : null,
|
|
4176
|
-
CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0,
|
|
4198
|
+
CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4177
4199
|
Button,
|
|
4178
4200
|
{
|
|
4179
4201
|
variant: variantFor("danger"),
|
|
@@ -4188,9 +4210,9 @@ function SubscriptionsPanel(props) {
|
|
|
4188
4210
|
}
|
|
4189
4211
|
) : null
|
|
4190
4212
|
] });
|
|
4191
|
-
return /* @__PURE__ */ (0,
|
|
4192
|
-
error ? /* @__PURE__ */ (0,
|
|
4193
|
-
/* @__PURE__ */ (0,
|
|
4213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
|
|
4214
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Alert, { tone: "error", children: error }) : null,
|
|
4215
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4194
4216
|
PanelState,
|
|
4195
4217
|
{
|
|
4196
4218
|
resource,
|
|
@@ -4199,7 +4221,7 @@ function SubscriptionsPanel(props) {
|
|
|
4199
4221
|
isEmpty: (rows) => rows.length === 0,
|
|
4200
4222
|
emptyTitle: t.subscriptions.empty,
|
|
4201
4223
|
emptyDescription: t.subscriptions.emptyDescription,
|
|
4202
|
-
children: (rows) => variant === "table" ? /* @__PURE__ */ (0,
|
|
4224
|
+
children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
4203
4225
|
DataTable,
|
|
4204
4226
|
{
|
|
4205
4227
|
tableKey: "subscriptionsPanel.table",
|
|
@@ -4208,42 +4230,42 @@ function SubscriptionsPanel(props) {
|
|
|
4208
4230
|
rows,
|
|
4209
4231
|
columns: [
|
|
4210
4232
|
{ key: "plan", label: t.subscriptions.columnPlan, render: (sub) => sub.planName ?? sub.planReference },
|
|
4211
|
-
{ key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ (0,
|
|
4233
|
+
{ key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
|
|
4212
4234
|
{ key: "renews", label: t.subscriptions.columnRenews, render: (sub) => renewsLabel(sub) },
|
|
4213
|
-
{ key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ (0,
|
|
4214
|
-
/* @__PURE__ */ (0,
|
|
4215
|
-
sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0,
|
|
4235
|
+
{ key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-row", children: [
|
|
4236
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
|
|
4237
|
+
sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
|
|
4216
4238
|
] }) },
|
|
4217
4239
|
{ key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
|
|
4218
4240
|
]
|
|
4219
4241
|
}
|
|
4220
|
-
) : /* @__PURE__ */ (0,
|
|
4221
|
-
/* @__PURE__ */ (0,
|
|
4222
|
-
/* @__PURE__ */ (0,
|
|
4223
|
-
/* @__PURE__ */ (0,
|
|
4224
|
-
/* @__PURE__ */ (0,
|
|
4242
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
|
|
4243
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
|
|
4244
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-row", children: [
|
|
4245
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("strong", { children: sub.planName ?? sub.planReference }),
|
|
4246
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
|
|
4225
4247
|
] }),
|
|
4226
|
-
/* @__PURE__ */ (0,
|
|
4248
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
|
|
4227
4249
|
formatMoney(sub.amount, sub.currency, locale),
|
|
4228
4250
|
" / ",
|
|
4229
4251
|
sub.interval,
|
|
4230
4252
|
sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""
|
|
4231
4253
|
] }),
|
|
4232
|
-
sub.status === "cancelled" ? /* @__PURE__ */ (0,
|
|
4254
|
+
sub.status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
|
|
4233
4255
|
t.subscriptions.cancelledOn,
|
|
4234
4256
|
" ",
|
|
4235
4257
|
formatDate(sub.cancelledAt ?? sub.currentPeriodEnd, locale)
|
|
4236
|
-
] }) : /* @__PURE__ */ (0,
|
|
4258
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
|
|
4237
4259
|
sub.cancelAtPeriodEnd ? t.subscriptions.endsOn : t.subscriptions.renewsOn,
|
|
4238
4260
|
" ",
|
|
4239
4261
|
formatDate(sub.currentPeriodEnd, locale)
|
|
4240
4262
|
] }),
|
|
4241
|
-
sub.trialEnd ? /* @__PURE__ */ (0,
|
|
4263
|
+
sub.trialEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
|
|
4242
4264
|
t.subscriptions.trialEnds,
|
|
4243
4265
|
" ",
|
|
4244
4266
|
formatDate(sub.trialEnd, locale)
|
|
4245
4267
|
] }) : null,
|
|
4246
|
-
sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0,
|
|
4268
|
+
sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
|
|
4247
4269
|
] }),
|
|
4248
4270
|
lifecycleActions(sub, actionVariant)
|
|
4249
4271
|
] }, sub.id)) })
|
|
@@ -4286,7 +4308,7 @@ function describeDevice(userAgent) {
|
|
|
4286
4308
|
}
|
|
4287
4309
|
|
|
4288
4310
|
// src/react/components/account/SecurityPanel.tsx
|
|
4289
|
-
var
|
|
4311
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
4290
4312
|
function SecurityPanel(props) {
|
|
4291
4313
|
const a = useAppearance(props.appearance);
|
|
4292
4314
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4317,8 +4339,8 @@ function SecurityPanel(props) {
|
|
|
4317
4339
|
void load();
|
|
4318
4340
|
}, [load]);
|
|
4319
4341
|
const others = (sessions ?? []).filter((s) => !s.current);
|
|
4320
|
-
return /* @__PURE__ */ (0,
|
|
4321
|
-
/* @__PURE__ */ (0,
|
|
4342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
|
|
4343
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
4322
4344
|
"form",
|
|
4323
4345
|
{
|
|
4324
4346
|
...a.el("securityPanel.passwordForm", "throttle-stack"),
|
|
@@ -4331,8 +4353,8 @@ function SecurityPanel(props) {
|
|
|
4331
4353
|
});
|
|
4332
4354
|
},
|
|
4333
4355
|
children: [
|
|
4334
|
-
/* @__PURE__ */ (0,
|
|
4335
|
-
/* @__PURE__ */ (0,
|
|
4356
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h3", { children: t.security.passwordTitle }),
|
|
4357
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4336
4358
|
Field,
|
|
4337
4359
|
{
|
|
4338
4360
|
label: t.security.newPassword,
|
|
@@ -4343,21 +4365,21 @@ function SecurityPanel(props) {
|
|
|
4343
4365
|
onChange: setPassword
|
|
4344
4366
|
}
|
|
4345
4367
|
),
|
|
4346
|
-
passwordAction.error ? /* @__PURE__ */ (0,
|
|
4347
|
-
passwordAction.notice ? /* @__PURE__ */ (0,
|
|
4348
|
-
/* @__PURE__ */ (0,
|
|
4368
|
+
passwordAction.error ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: passwordAction.error }) : null,
|
|
4369
|
+
passwordAction.notice ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "success", children: passwordAction.notice }) : null,
|
|
4370
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
|
|
4349
4371
|
]
|
|
4350
4372
|
}
|
|
4351
4373
|
),
|
|
4352
|
-
/* @__PURE__ */ (0,
|
|
4353
|
-
/* @__PURE__ */ (0,
|
|
4354
|
-
listError ? /* @__PURE__ */ (0,
|
|
4355
|
-
/* @__PURE__ */ (0,
|
|
4356
|
-
/* @__PURE__ */ (0,
|
|
4374
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
|
|
4375
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h3", { children: t.security.sessionsTitle }),
|
|
4376
|
+
listError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
|
|
4377
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: listError }),
|
|
4378
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
|
|
4357
4379
|
] }) : null,
|
|
4358
|
-
sessionAction.error ? /* @__PURE__ */ (0,
|
|
4359
|
-
sessions === null && !listError ? /* @__PURE__ */ (0,
|
|
4360
|
-
sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ (0,
|
|
4380
|
+
sessionAction.error ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: sessionAction.error }) : null,
|
|
4381
|
+
sessions === null && !listError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Skeleton, { count: 2 }) : null,
|
|
4382
|
+
sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4361
4383
|
DataTable,
|
|
4362
4384
|
{
|
|
4363
4385
|
tableKey: "securityPanel.table",
|
|
@@ -4365,12 +4387,12 @@ function SecurityPanel(props) {
|
|
|
4365
4387
|
rowKey: (session) => session.id,
|
|
4366
4388
|
rows: sessions,
|
|
4367
4389
|
columns: [
|
|
4368
|
-
{ key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0,
|
|
4369
|
-
/* @__PURE__ */ (0,
|
|
4370
|
-
session.current ? /* @__PURE__ */ (0,
|
|
4390
|
+
{ key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "throttle-row", children: [
|
|
4391
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
|
|
4392
|
+
session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
|
|
4371
4393
|
] }) },
|
|
4372
4394
|
{ key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
|
|
4373
|
-
{ key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ (0,
|
|
4395
|
+
{ key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4374
4396
|
Button,
|
|
4375
4397
|
{
|
|
4376
4398
|
variant: "danger",
|
|
@@ -4385,19 +4407,19 @@ function SecurityPanel(props) {
|
|
|
4385
4407
|
) : null }
|
|
4386
4408
|
]
|
|
4387
4409
|
}
|
|
4388
|
-
) : (sessions ?? []).map((session) => /* @__PURE__ */ (0,
|
|
4389
|
-
/* @__PURE__ */ (0,
|
|
4390
|
-
/* @__PURE__ */ (0,
|
|
4391
|
-
/* @__PURE__ */ (0,
|
|
4392
|
-
session.current ? /* @__PURE__ */ (0,
|
|
4410
|
+
) : (sessions ?? []).map((session) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
|
|
4411
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
|
|
4412
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "throttle-row", children: [
|
|
4413
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
|
|
4414
|
+
session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
|
|
4393
4415
|
] }),
|
|
4394
|
-
/* @__PURE__ */ (0,
|
|
4416
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "throttle-muted", children: [
|
|
4395
4417
|
t.security.lastActive,
|
|
4396
4418
|
" ",
|
|
4397
4419
|
formatDate(session.lastUsedAt, locale)
|
|
4398
4420
|
] })
|
|
4399
4421
|
] }),
|
|
4400
|
-
!session.current ? /* @__PURE__ */ (0,
|
|
4422
|
+
!session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4401
4423
|
Button,
|
|
4402
4424
|
{
|
|
4403
4425
|
variant: revokeVariant,
|
|
@@ -4411,8 +4433,8 @@ function SecurityPanel(props) {
|
|
|
4411
4433
|
}
|
|
4412
4434
|
) : null
|
|
4413
4435
|
] }, session.id)),
|
|
4414
|
-
sessions !== null && others.length === 0 ? /* @__PURE__ */ (0,
|
|
4415
|
-
others.length > 0 ? /* @__PURE__ */ (0,
|
|
4436
|
+
sessions !== null && others.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
|
|
4437
|
+
others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4416
4438
|
Button,
|
|
4417
4439
|
{
|
|
4418
4440
|
variant: "danger",
|
|
@@ -4432,7 +4454,7 @@ function SecurityPanel(props) {
|
|
|
4432
4454
|
}
|
|
4433
4455
|
|
|
4434
4456
|
// src/react/components/account/AccountDashboard.tsx
|
|
4435
|
-
var
|
|
4457
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
4436
4458
|
var ACCOUNT_TABS = [
|
|
4437
4459
|
"profile",
|
|
4438
4460
|
"addresses",
|
|
@@ -4484,7 +4506,7 @@ function AccountDashboard(props) {
|
|
|
4484
4506
|
};
|
|
4485
4507
|
const shared = { appearance: props.appearance, localization: props.localization };
|
|
4486
4508
|
const sidebar = (props.layout ?? "sidebar") === "sidebar";
|
|
4487
|
-
const nav = /* @__PURE__ */ (0,
|
|
4509
|
+
const nav = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4488
4510
|
Tabs,
|
|
4489
4511
|
{
|
|
4490
4512
|
idBase,
|
|
@@ -4500,7 +4522,7 @@ function AccountDashboard(props) {
|
|
|
4500
4522
|
}))
|
|
4501
4523
|
}
|
|
4502
4524
|
);
|
|
4503
|
-
const panel = /* @__PURE__ */ (0,
|
|
4525
|
+
const panel = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
4504
4526
|
"div",
|
|
4505
4527
|
{
|
|
4506
4528
|
...a.el("accountDashboard.panel", sidebar ? "throttle-account__content" : "throttle-tabs__panel"),
|
|
@@ -4509,10 +4531,10 @@ function AccountDashboard(props) {
|
|
|
4509
4531
|
"aria-labelledby": `${idBase}-tab-${active}`,
|
|
4510
4532
|
tabIndex: 0,
|
|
4511
4533
|
children: [
|
|
4512
|
-
active === "profile" ? /* @__PURE__ */ (0,
|
|
4513
|
-
active === "addresses" ? /* @__PURE__ */ (0,
|
|
4514
|
-
active === "paymentMethods" ? /* @__PURE__ */ (0,
|
|
4515
|
-
active === "orders" ? /* @__PURE__ */ (0,
|
|
4534
|
+
active === "profile" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ProfilePanel, { ...shared }) : null,
|
|
4535
|
+
active === "addresses" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
4536
|
+
active === "paymentMethods" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
4537
|
+
active === "orders" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4516
4538
|
OrdersPanel,
|
|
4517
4539
|
{
|
|
4518
4540
|
...shared,
|
|
@@ -4523,32 +4545,32 @@ function AccountDashboard(props) {
|
|
|
4523
4545
|
onTrackShipment: props.onTrackShipment
|
|
4524
4546
|
}
|
|
4525
4547
|
) : null,
|
|
4526
|
-
active === "invoices" ? /* @__PURE__ */ (0,
|
|
4527
|
-
active === "subscriptions" ? /* @__PURE__ */ (0,
|
|
4528
|
-
active === "security" ? /* @__PURE__ */ (0,
|
|
4548
|
+
active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
4549
|
+
active === "subscriptions" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
|
|
4550
|
+
active === "security" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
|
|
4529
4551
|
]
|
|
4530
4552
|
}
|
|
4531
4553
|
);
|
|
4532
|
-
return /* @__PURE__ */ (0,
|
|
4533
|
-
/* @__PURE__ */ (0,
|
|
4534
|
-
sidebar ? /* @__PURE__ */ (0,
|
|
4535
|
-
/* @__PURE__ */ (0,
|
|
4554
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
|
|
4555
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VerifyEmailBanner, { ...shared }),
|
|
4556
|
+
sidebar ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "throttle-account", children: [
|
|
4557
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
|
|
4536
4558
|
panel
|
|
4537
|
-
] }) : /* @__PURE__ */ (0,
|
|
4538
|
-
/* @__PURE__ */ (0,
|
|
4559
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
4560
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.el("accountDashboard.tabs"), children: nav }),
|
|
4539
4561
|
panel
|
|
4540
4562
|
] })
|
|
4541
4563
|
] }) }) });
|
|
4542
4564
|
}
|
|
4543
4565
|
|
|
4544
4566
|
// src/react/components/account/AccountModal.tsx
|
|
4545
|
-
var
|
|
4567
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
4546
4568
|
function AccountModal(props) {
|
|
4547
4569
|
const a = useAppearance(props.appearance);
|
|
4548
4570
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
4549
4571
|
const { t } = useCopy(props.localization);
|
|
4550
4572
|
const titleId = (0, import_react31.useId)();
|
|
4551
|
-
return /* @__PURE__ */ (0,
|
|
4573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
4552
4574
|
Modal,
|
|
4553
4575
|
{
|
|
4554
4576
|
open: props.open,
|
|
@@ -4558,15 +4580,15 @@ function AccountModal(props) {
|
|
|
4558
4580
|
overlayKey: "accountModal.overlay",
|
|
4559
4581
|
containerKey: "accountModal.container",
|
|
4560
4582
|
children: [
|
|
4561
|
-
/* @__PURE__ */ (0,
|
|
4562
|
-
/* @__PURE__ */ (0,
|
|
4583
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
|
|
4584
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
|
|
4563
4585
|
]
|
|
4564
4586
|
}
|
|
4565
4587
|
) });
|
|
4566
4588
|
}
|
|
4567
4589
|
|
|
4568
4590
|
// src/react/components/provider.tsx
|
|
4569
|
-
var
|
|
4591
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4570
4592
|
var warned = /* @__PURE__ */ new Set();
|
|
4571
4593
|
function warnOnce(key, message) {
|
|
4572
4594
|
if (process.env.NODE_ENV === "production") return;
|
|
@@ -4688,10 +4710,10 @@ function ThrottleProvider(props) {
|
|
|
4688
4710
|
resolve?.(password);
|
|
4689
4711
|
};
|
|
4690
4712
|
const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
|
|
4691
|
-
return /* @__PURE__ */ (0,
|
|
4713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfirmProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
|
|
4692
4714
|
children,
|
|
4693
|
-
/* @__PURE__ */ (0,
|
|
4694
|
-
/* @__PURE__ */ (0,
|
|
4715
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
|
|
4716
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4695
4717
|
AuthModal,
|
|
4696
4718
|
{
|
|
4697
4719
|
open: authOverlayOpen,
|
|
@@ -4702,13 +4724,13 @@ function ThrottleProvider(props) {
|
|
|
4702
4724
|
},
|
|
4703
4725
|
overlay === "signUp" ? "signUp" : "signIn"
|
|
4704
4726
|
),
|
|
4705
|
-
/* @__PURE__ */ (0,
|
|
4727
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
|
|
4706
4728
|
] }) }) }) }) }) });
|
|
4707
4729
|
}
|
|
4708
4730
|
|
|
4709
4731
|
// src/react/components/auth/SignInButton.tsx
|
|
4710
4732
|
var import_react33 = require("react");
|
|
4711
|
-
var
|
|
4733
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4712
4734
|
function SignInButton(props) {
|
|
4713
4735
|
const a = useAppearance(props.appearance);
|
|
4714
4736
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4718,7 +4740,7 @@ function SignInButton(props) {
|
|
|
4718
4740
|
const useShared = ui !== null && props.initialView === void 0;
|
|
4719
4741
|
const label = props.children ?? t.signIn.submitButton;
|
|
4720
4742
|
if (props.mode === "redirect") {
|
|
4721
|
-
return /* @__PURE__ */ (0,
|
|
4743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
|
|
4722
4744
|
}
|
|
4723
4745
|
const openModal = () => {
|
|
4724
4746
|
if (useShared) ui.openSignIn(props.afterSignIn);
|
|
@@ -4728,10 +4750,10 @@ function SignInButton(props) {
|
|
|
4728
4750
|
if (useShared) ui.close();
|
|
4729
4751
|
else setLocalOpen(false);
|
|
4730
4752
|
};
|
|
4731
|
-
const trigger = props.asChild && (0, import_react33.isValidElement)(props.children) ? (0, import_react33.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0,
|
|
4732
|
-
return /* @__PURE__ */ (0,
|
|
4733
|
-
/* @__PURE__ */ (0,
|
|
4734
|
-
!useShared ? /* @__PURE__ */ (0,
|
|
4753
|
+
const trigger = props.asChild && (0, import_react33.isValidElement)(props.children) ? (0, import_react33.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
|
|
4754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(AppearanceProvider, { value: scoped, children: [
|
|
4755
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { ...a.rootProps, children: trigger }),
|
|
4756
|
+
!useShared ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4735
4757
|
AuthModal,
|
|
4736
4758
|
{
|
|
4737
4759
|
open: localOpen,
|
|
@@ -4750,7 +4772,7 @@ function SignInButton(props) {
|
|
|
4750
4772
|
|
|
4751
4773
|
// src/react/components/auth/SignUpButton.tsx
|
|
4752
4774
|
var import_react34 = require("react");
|
|
4753
|
-
var
|
|
4775
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4754
4776
|
function SignUpButton(props) {
|
|
4755
4777
|
const a = useAppearance(props.appearance);
|
|
4756
4778
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4760,7 +4782,7 @@ function SignUpButton(props) {
|
|
|
4760
4782
|
const useShared = ui !== null && props.initialView === void 0;
|
|
4761
4783
|
const label = props.children ?? t.signUp.submitButton;
|
|
4762
4784
|
if (props.mode === "redirect") {
|
|
4763
|
-
return /* @__PURE__ */ (0,
|
|
4785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
|
|
4764
4786
|
}
|
|
4765
4787
|
const openModal = () => {
|
|
4766
4788
|
if (useShared) ui.openSignUp(props.afterSignUp);
|
|
@@ -4770,10 +4792,10 @@ function SignUpButton(props) {
|
|
|
4770
4792
|
if (useShared) ui.close();
|
|
4771
4793
|
else setLocalOpen(false);
|
|
4772
4794
|
};
|
|
4773
|
-
const trigger = props.asChild && (0, import_react34.isValidElement)(props.children) ? (0, import_react34.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0,
|
|
4774
|
-
return /* @__PURE__ */ (0,
|
|
4775
|
-
/* @__PURE__ */ (0,
|
|
4776
|
-
!useShared ? /* @__PURE__ */ (0,
|
|
4795
|
+
const trigger = props.asChild && (0, import_react34.isValidElement)(props.children) ? (0, import_react34.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
|
|
4796
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AppearanceProvider, { value: scoped, children: [
|
|
4797
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.rootProps, children: trigger }),
|
|
4798
|
+
!useShared ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4777
4799
|
AuthModal,
|
|
4778
4800
|
{
|
|
4779
4801
|
open: localOpen,
|
|
@@ -4791,14 +4813,14 @@ function SignUpButton(props) {
|
|
|
4791
4813
|
}
|
|
4792
4814
|
|
|
4793
4815
|
// src/react/components/auth/SignOutButton.tsx
|
|
4794
|
-
var
|
|
4816
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
4795
4817
|
function SignOutButton(props) {
|
|
4796
4818
|
const a = useAppearance();
|
|
4797
4819
|
const { auth } = useAuth();
|
|
4798
4820
|
const { t } = useCopy(props.localization);
|
|
4799
4821
|
const { submitting, run } = useAction();
|
|
4800
4822
|
const label = props.children ?? (props.everywhere ? t.userButton.signOutAll : t.userButton.signOut);
|
|
4801
|
-
return /* @__PURE__ */ (0,
|
|
4823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
4802
4824
|
Button,
|
|
4803
4825
|
{
|
|
4804
4826
|
variant: "secondary",
|
|
@@ -4815,13 +4837,13 @@ function SignOutButton(props) {
|
|
|
4815
4837
|
}
|
|
4816
4838
|
|
|
4817
4839
|
// src/react/components/auth/SignInPage.tsx
|
|
4818
|
-
var
|
|
4840
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
4819
4841
|
function SignInPage(props) {
|
|
4820
4842
|
const a = useAppearance(props.appearance);
|
|
4821
4843
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
4822
|
-
return /* @__PURE__ */ (0,
|
|
4823
|
-
props.logo ? /* @__PURE__ */ (0,
|
|
4824
|
-
/* @__PURE__ */ (0,
|
|
4844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ...a.el("signInPage.root", "throttle-page"), children: [
|
|
4845
|
+
props.logo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
|
|
4846
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4825
4847
|
SignIn,
|
|
4826
4848
|
{
|
|
4827
4849
|
onSuccess: props.onSuccess,
|
|
@@ -4831,18 +4853,18 @@ function SignInPage(props) {
|
|
|
4831
4853
|
localization: props.localization
|
|
4832
4854
|
}
|
|
4833
4855
|
),
|
|
4834
|
-
props.footer ? /* @__PURE__ */ (0,
|
|
4856
|
+
props.footer ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
|
|
4835
4857
|
] }) }) });
|
|
4836
4858
|
}
|
|
4837
4859
|
|
|
4838
4860
|
// src/react/components/auth/SignUpPage.tsx
|
|
4839
|
-
var
|
|
4861
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
4840
4862
|
function SignUpPage(props) {
|
|
4841
4863
|
const a = useAppearance(props.appearance);
|
|
4842
4864
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
4843
|
-
return /* @__PURE__ */ (0,
|
|
4844
|
-
props.logo ? /* @__PURE__ */ (0,
|
|
4845
|
-
/* @__PURE__ */ (0,
|
|
4865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
|
|
4866
|
+
props.logo ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
|
|
4867
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
4846
4868
|
SignUp,
|
|
4847
4869
|
{
|
|
4848
4870
|
onSuccess: props.onSuccess,
|
|
@@ -4851,31 +4873,31 @@ function SignUpPage(props) {
|
|
|
4851
4873
|
localization: props.localization
|
|
4852
4874
|
}
|
|
4853
4875
|
),
|
|
4854
|
-
props.footer ? /* @__PURE__ */ (0,
|
|
4876
|
+
props.footer ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
|
|
4855
4877
|
] }) }) });
|
|
4856
4878
|
}
|
|
4857
4879
|
|
|
4858
4880
|
// src/react/components/guards.tsx
|
|
4859
|
-
var
|
|
4881
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
4860
4882
|
function SignedIn(props) {
|
|
4861
4883
|
const { status } = useAuth();
|
|
4862
|
-
return status === "authenticated" ? /* @__PURE__ */ (0,
|
|
4884
|
+
return status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children }) : null;
|
|
4863
4885
|
}
|
|
4864
4886
|
function SignedOut(props) {
|
|
4865
4887
|
const { status } = useAuth();
|
|
4866
|
-
return status === "unauthenticated" ? /* @__PURE__ */ (0,
|
|
4888
|
+
return status === "unauthenticated" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children }) : null;
|
|
4867
4889
|
}
|
|
4868
4890
|
function Protect(props) {
|
|
4869
4891
|
const { status, emailVerified } = useAuth();
|
|
4870
4892
|
if (status === "loading") return null;
|
|
4871
|
-
if (status !== "authenticated") return /* @__PURE__ */ (0,
|
|
4872
|
-
if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0,
|
|
4873
|
-
return /* @__PURE__ */ (0,
|
|
4893
|
+
if (status !== "authenticated") return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.fallback ?? null });
|
|
4894
|
+
if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.fallback ?? null });
|
|
4895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children });
|
|
4874
4896
|
}
|
|
4875
4897
|
|
|
4876
4898
|
// src/react/components/UserButton.tsx
|
|
4877
4899
|
var import_react35 = require("react");
|
|
4878
|
-
var
|
|
4900
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
4879
4901
|
function UserButtonRoot(props) {
|
|
4880
4902
|
const a = useAppearance(props.appearance);
|
|
4881
4903
|
const scoped = useAppearanceProviderValue(props.appearance);
|
|
@@ -4895,25 +4917,25 @@ function UserButtonRoot(props) {
|
|
|
4895
4917
|
};
|
|
4896
4918
|
if (status !== "authenticated" || !customer) return null;
|
|
4897
4919
|
const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
|
|
4898
|
-
return /* @__PURE__ */ (0,
|
|
4899
|
-
/* @__PURE__ */ (0,
|
|
4920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { ref: rootRef, ...a.el("userButton.root"), children: [
|
|
4921
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
4900
4922
|
Dropdown,
|
|
4901
4923
|
{
|
|
4902
4924
|
label: t.userButton.openMenu,
|
|
4903
4925
|
triggerKey: "userButton.trigger",
|
|
4904
4926
|
menuKey: "userButton.menu",
|
|
4905
|
-
trigger: /* @__PURE__ */ (0,
|
|
4927
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Avatar, { name, email: customer.email }),
|
|
4906
4928
|
children: [
|
|
4907
|
-
/* @__PURE__ */ (0,
|
|
4908
|
-
/* @__PURE__ */ (0,
|
|
4909
|
-
/* @__PURE__ */ (0,
|
|
4910
|
-
/* @__PURE__ */ (0,
|
|
4929
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { children: [
|
|
4930
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { ...a.el("userButton.email"), children: customer.email }),
|
|
4931
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("br", {}),
|
|
4932
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
|
|
4911
4933
|
] }) }),
|
|
4912
|
-
/* @__PURE__ */ (0,
|
|
4913
|
-
props.mode === "navigate" ? /* @__PURE__ */ (0,
|
|
4934
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownSeparator, {}),
|
|
4935
|
+
props.mode === "navigate" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
|
|
4914
4936
|
props.children,
|
|
4915
|
-
/* @__PURE__ */ (0,
|
|
4916
|
-
/* @__PURE__ */ (0,
|
|
4937
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownSeparator, {}),
|
|
4938
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4917
4939
|
DropdownItem,
|
|
4918
4940
|
{
|
|
4919
4941
|
itemKey: "userButton.signOutButton",
|
|
@@ -4921,7 +4943,7 @@ function UserButtonRoot(props) {
|
|
|
4921
4943
|
children: t.userButton.signOut
|
|
4922
4944
|
}
|
|
4923
4945
|
),
|
|
4924
|
-
/* @__PURE__ */ (0,
|
|
4946
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4925
4947
|
DropdownItem,
|
|
4926
4948
|
{
|
|
4927
4949
|
itemKey: "userButton.signOutAllButton",
|
|
@@ -4932,7 +4954,7 @@ function UserButtonRoot(props) {
|
|
|
4932
4954
|
]
|
|
4933
4955
|
}
|
|
4934
4956
|
),
|
|
4935
|
-
props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0,
|
|
4957
|
+
props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
4936
4958
|
Modal,
|
|
4937
4959
|
{
|
|
4938
4960
|
open: accountOpen,
|
|
@@ -4940,8 +4962,8 @@ function UserButtonRoot(props) {
|
|
|
4940
4962
|
labelledBy: titleId,
|
|
4941
4963
|
restoreFocusTo: openerRef.current,
|
|
4942
4964
|
children: [
|
|
4943
|
-
/* @__PURE__ */ (0,
|
|
4944
|
-
/* @__PURE__ */ (0,
|
|
4965
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
|
|
4966
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4945
4967
|
AccountDashboard,
|
|
4946
4968
|
{
|
|
4947
4969
|
tabs: props.tabs,
|
|
@@ -4955,13 +4977,13 @@ function UserButtonRoot(props) {
|
|
|
4955
4977
|
] }) }) });
|
|
4956
4978
|
}
|
|
4957
4979
|
function UserButtonLink(props) {
|
|
4958
|
-
return /* @__PURE__ */ (0,
|
|
4980
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
|
|
4959
4981
|
props.icon,
|
|
4960
4982
|
props.label
|
|
4961
4983
|
] });
|
|
4962
4984
|
}
|
|
4963
4985
|
function UserButtonAction(props) {
|
|
4964
|
-
return /* @__PURE__ */ (0,
|
|
4986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
|
|
4965
4987
|
props.icon,
|
|
4966
4988
|
props.label
|
|
4967
4989
|
] });
|