@cimplify/sdk 0.56.0 → 0.57.0
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.d.mts +441 -2
- package/dist/react.d.ts +441 -2
- package/dist/react.js +2024 -452
- package/dist/react.mjs +1570 -52
- package/dist/styles.css +1 -1
- package/dist/testing.d.mts +15 -15
- package/dist/testing.d.ts +15 -15
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -7,7 +7,7 @@ var chunkJGBDWEPJ_js = require('./chunk-JGBDWEPJ.js');
|
|
|
7
7
|
var chunk7Y2O3E4D_js = require('./chunk-7Y2O3E4D.js');
|
|
8
8
|
var chunkXA3ZNR75_js = require('./chunk-XA3ZNR75.js');
|
|
9
9
|
require('./chunk-OWW5GUSB.js');
|
|
10
|
-
var
|
|
10
|
+
var React12 = require('react');
|
|
11
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
12
|
var clsx = require('clsx');
|
|
13
13
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -26,7 +26,7 @@ var input = require('@base-ui/react/input');
|
|
|
26
26
|
|
|
27
27
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
28
28
|
|
|
29
|
-
var
|
|
29
|
+
var React12__default = /*#__PURE__*/_interopDefault(React12);
|
|
30
30
|
|
|
31
31
|
// src/ads/identity.ts
|
|
32
32
|
var COOKIE_NAME = "_cimplify_uid";
|
|
@@ -203,7 +203,7 @@ function deriveAdsApiUrl() {
|
|
|
203
203
|
}
|
|
204
204
|
return "https://api.cimplify.io";
|
|
205
205
|
}
|
|
206
|
-
var AdContext =
|
|
206
|
+
var AdContext = React12.createContext({
|
|
207
207
|
siteId: null,
|
|
208
208
|
config: null,
|
|
209
209
|
isLoading: true,
|
|
@@ -211,7 +211,7 @@ var AdContext = React11.createContext({
|
|
|
211
211
|
apiBase: "https://api.cimplify.io"
|
|
212
212
|
});
|
|
213
213
|
function useAds() {
|
|
214
|
-
return
|
|
214
|
+
return React12.useContext(AdContext);
|
|
215
215
|
}
|
|
216
216
|
function AdProvider({
|
|
217
217
|
siteId,
|
|
@@ -220,10 +220,10 @@ function AdProvider({
|
|
|
220
220
|
children
|
|
221
221
|
}) {
|
|
222
222
|
const resolvedApiBase = apiBase || deriveAdsApiUrl();
|
|
223
|
-
const [config, setConfig] =
|
|
224
|
-
const [isLoading, setIsLoading] =
|
|
225
|
-
const [identity, setIdentity] =
|
|
226
|
-
|
|
223
|
+
const [config, setConfig] = React12.useState(null);
|
|
224
|
+
const [isLoading, setIsLoading] = React12.useState(true);
|
|
225
|
+
const [identity, setIdentity] = React12.useState(null);
|
|
226
|
+
React12.useEffect(() => {
|
|
227
227
|
const userIdentity = getUserIdentity(authenticatedAccountId);
|
|
228
228
|
setIdentity(userIdentity);
|
|
229
229
|
fetch(`${resolvedApiBase}/ads/config/${siteId}`).then((r) => r.json()).then((data) => {
|
|
@@ -246,11 +246,11 @@ function Ad({
|
|
|
246
246
|
onClick
|
|
247
247
|
}) {
|
|
248
248
|
const { siteId, config, isLoading, identity, apiBase } = useAds();
|
|
249
|
-
const [ad, setAd] =
|
|
250
|
-
const [error, setError] =
|
|
251
|
-
const impressionTracked =
|
|
252
|
-
const containerRef =
|
|
253
|
-
|
|
249
|
+
const [ad, setAd] = React12.useState(null);
|
|
250
|
+
const [error, setError] = React12.useState(false);
|
|
251
|
+
const impressionTracked = React12.useRef(false);
|
|
252
|
+
const containerRef = React12.useRef(null);
|
|
253
|
+
React12.useEffect(() => {
|
|
254
254
|
if (isLoading || !config?.enabled || !siteId || !identity) return;
|
|
255
255
|
const path = typeof window !== "undefined" ? window.location.pathname : "/";
|
|
256
256
|
const referrer = typeof document !== "undefined" ? document.referrer : "";
|
|
@@ -293,7 +293,7 @@ function Ad({
|
|
|
293
293
|
}
|
|
294
294
|
}).catch(() => setError(true));
|
|
295
295
|
}, [siteId, config, isLoading, slot, identity, apiBase]);
|
|
296
|
-
|
|
296
|
+
React12.useEffect(() => {
|
|
297
297
|
if (!ad || impressionTracked.current || typeof window === "undefined" || !identity) return;
|
|
298
298
|
const observer = new IntersectionObserver(
|
|
299
299
|
([entry]) => {
|
|
@@ -622,7 +622,7 @@ function applyCartPatch(base, patch) {
|
|
|
622
622
|
}
|
|
623
623
|
}
|
|
624
624
|
function useCollectionStore(collection) {
|
|
625
|
-
return
|
|
625
|
+
return React12.useSyncExternalStore(
|
|
626
626
|
(listener) => collection.subscribe(listener),
|
|
627
627
|
() => collection.getSnapshot(),
|
|
628
628
|
() => collection.getSnapshot()
|
|
@@ -992,7 +992,7 @@ function useCart(options = {}) {
|
|
|
992
992
|
const locationId = options.locationId ?? client.getLocationId();
|
|
993
993
|
const currency = options.currency ?? context?.currency ?? "USD";
|
|
994
994
|
const optimisticEnabled = context?.optimistic ?? true;
|
|
995
|
-
const entry =
|
|
995
|
+
const entry = React12.useMemo(
|
|
996
996
|
() => getOrCreateStore({
|
|
997
997
|
client,
|
|
998
998
|
locationId,
|
|
@@ -1002,44 +1002,44 @@ function useCart(options = {}) {
|
|
|
1002
1002
|
[client, currency, locationId, optimisticEnabled]
|
|
1003
1003
|
);
|
|
1004
1004
|
const view = useCollectionStore(entry.collection);
|
|
1005
|
-
|
|
1005
|
+
React12.useEffect(() => {
|
|
1006
1006
|
void ensureInitialized(entry);
|
|
1007
1007
|
}, [entry]);
|
|
1008
|
-
const addItem =
|
|
1008
|
+
const addItem = React12.useCallback(
|
|
1009
1009
|
async (product, quantity, addOptions) => {
|
|
1010
1010
|
await performAddItem(entry, product, quantity ?? 1, addOptions ?? {});
|
|
1011
1011
|
},
|
|
1012
1012
|
[entry]
|
|
1013
1013
|
);
|
|
1014
|
-
const removeItem =
|
|
1014
|
+
const removeItem = React12.useCallback(
|
|
1015
1015
|
async (itemId) => {
|
|
1016
1016
|
await performRemoveItem(entry, itemId);
|
|
1017
1017
|
},
|
|
1018
1018
|
[entry]
|
|
1019
1019
|
);
|
|
1020
|
-
const updateQuantity =
|
|
1020
|
+
const updateQuantity = React12.useCallback(
|
|
1021
1021
|
async (itemId, quantity) => {
|
|
1022
1022
|
await performUpdateQuantity(entry, itemId, quantity);
|
|
1023
1023
|
},
|
|
1024
1024
|
[entry]
|
|
1025
1025
|
);
|
|
1026
|
-
const clearCart =
|
|
1026
|
+
const clearCart = React12.useCallback(async () => {
|
|
1027
1027
|
await performClear(entry);
|
|
1028
1028
|
}, [entry]);
|
|
1029
|
-
const sync =
|
|
1029
|
+
const sync = React12.useCallback(async () => {
|
|
1030
1030
|
await syncFromServer(entry);
|
|
1031
1031
|
}, [entry]);
|
|
1032
|
-
const reorder =
|
|
1032
|
+
const reorder = React12.useCallback(
|
|
1033
1033
|
async (orderId) => {
|
|
1034
1034
|
return performReorder(entry, orderId);
|
|
1035
1035
|
},
|
|
1036
1036
|
[entry]
|
|
1037
1037
|
);
|
|
1038
|
-
const itemCount =
|
|
1038
|
+
const itemCount = React12.useMemo(
|
|
1039
1039
|
() => view.items.reduce((sum, item) => sum + item.quantity, 0),
|
|
1040
1040
|
[view.items]
|
|
1041
1041
|
);
|
|
1042
|
-
return
|
|
1042
|
+
return React12.useMemo(
|
|
1043
1043
|
() => ({
|
|
1044
1044
|
items: view.items,
|
|
1045
1045
|
itemCount,
|
|
@@ -1142,30 +1142,30 @@ function resolveInitialLocation(locations) {
|
|
|
1142
1142
|
}
|
|
1143
1143
|
return locations[0];
|
|
1144
1144
|
}
|
|
1145
|
-
var CimplifyClientContext =
|
|
1146
|
-
var CimplifyStateContext =
|
|
1145
|
+
var CimplifyClientContext = React12.createContext(null);
|
|
1146
|
+
var CimplifyStateContext = React12.createContext(null);
|
|
1147
1147
|
function CimplifyProvider({
|
|
1148
1148
|
client,
|
|
1149
1149
|
children,
|
|
1150
1150
|
onLocationChange,
|
|
1151
1151
|
optimistic = true
|
|
1152
1152
|
}) {
|
|
1153
|
-
const resolvedClient =
|
|
1154
|
-
const onLocationChangeRef =
|
|
1155
|
-
const [business, setBusiness] =
|
|
1156
|
-
const [locations, setLocations] =
|
|
1157
|
-
const [currentLocation, setCurrentLocationState] =
|
|
1158
|
-
const [isReady, setIsReady] =
|
|
1159
|
-
|
|
1153
|
+
const resolvedClient = React12.useMemo(() => client ?? createDefaultClient(), [client]);
|
|
1154
|
+
const onLocationChangeRef = React12.useRef(onLocationChange);
|
|
1155
|
+
const [business, setBusiness] = React12.useState(null);
|
|
1156
|
+
const [locations, setLocations] = React12.useState([]);
|
|
1157
|
+
const [currentLocation, setCurrentLocationState] = React12.useState(null);
|
|
1158
|
+
const [isReady, setIsReady] = React12.useState(false);
|
|
1159
|
+
React12.useEffect(() => {
|
|
1160
1160
|
onLocationChangeRef.current = onLocationChange;
|
|
1161
1161
|
}, [onLocationChange]);
|
|
1162
1162
|
const baseCurrency = business?.default_currency || DEFAULT_CURRENCY;
|
|
1163
|
-
const [displayCurrencyOverride, setDisplayCurrencyOverride] =
|
|
1163
|
+
const [displayCurrencyOverride, setDisplayCurrencyOverride] = React12.useState(
|
|
1164
1164
|
() => getStoredDisplayCurrency()
|
|
1165
1165
|
);
|
|
1166
|
-
const [fxRate, setFxRate] =
|
|
1166
|
+
const [fxRate, setFxRate] = React12.useState(null);
|
|
1167
1167
|
const displayCurrency = displayCurrencyOverride && displayCurrencyOverride !== baseCurrency ? displayCurrencyOverride : baseCurrency;
|
|
1168
|
-
const setDisplayCurrency =
|
|
1168
|
+
const setDisplayCurrency = React12.useCallback(
|
|
1169
1169
|
(currency) => {
|
|
1170
1170
|
const normalized = currency?.trim().toUpperCase() || null;
|
|
1171
1171
|
if (normalized && !chunkXA3ZNR75_js.isSupportedCurrency(normalized)) {
|
|
@@ -1179,7 +1179,7 @@ function CimplifyProvider({
|
|
|
1179
1179
|
},
|
|
1180
1180
|
[baseCurrency]
|
|
1181
1181
|
);
|
|
1182
|
-
|
|
1182
|
+
React12.useEffect(() => {
|
|
1183
1183
|
if (displayCurrency === baseCurrency) {
|
|
1184
1184
|
setFxRate(null);
|
|
1185
1185
|
return;
|
|
@@ -1204,7 +1204,7 @@ function CimplifyProvider({
|
|
|
1204
1204
|
clearInterval(intervalId);
|
|
1205
1205
|
};
|
|
1206
1206
|
}, [resolvedClient, baseCurrency, displayCurrency]);
|
|
1207
|
-
const convertPrice =
|
|
1207
|
+
const convertPrice = React12.useCallback(
|
|
1208
1208
|
(amount) => {
|
|
1209
1209
|
const num = typeof amount === "string" ? parseFloat(amount) : amount;
|
|
1210
1210
|
if (isNaN(num)) return 0;
|
|
@@ -1213,7 +1213,7 @@ function CimplifyProvider({
|
|
|
1213
1213
|
},
|
|
1214
1214
|
[fxRate, displayCurrency, baseCurrency]
|
|
1215
1215
|
);
|
|
1216
|
-
const setCurrentLocation =
|
|
1216
|
+
const setCurrentLocation = React12.useCallback(
|
|
1217
1217
|
(location) => {
|
|
1218
1218
|
const previousLocationId = resolvedClient.getLocationId();
|
|
1219
1219
|
if (previousLocationId && previousLocationId !== location.id) {
|
|
@@ -1226,7 +1226,7 @@ function CimplifyProvider({
|
|
|
1226
1226
|
},
|
|
1227
1227
|
[resolvedClient]
|
|
1228
1228
|
);
|
|
1229
|
-
|
|
1229
|
+
React12.useEffect(() => {
|
|
1230
1230
|
let cancelled = false;
|
|
1231
1231
|
async function bootstrap() {
|
|
1232
1232
|
setIsReady(false);
|
|
@@ -1271,7 +1271,7 @@ function CimplifyProvider({
|
|
|
1271
1271
|
cancelled = true;
|
|
1272
1272
|
};
|
|
1273
1273
|
}, [resolvedClient]);
|
|
1274
|
-
const clientContextValue =
|
|
1274
|
+
const clientContextValue = React12.useMemo(
|
|
1275
1275
|
() => ({
|
|
1276
1276
|
client: resolvedClient,
|
|
1277
1277
|
business,
|
|
@@ -1291,7 +1291,7 @@ function CimplifyProvider({
|
|
|
1291
1291
|
optimistic
|
|
1292
1292
|
]
|
|
1293
1293
|
);
|
|
1294
|
-
const stateContextValue =
|
|
1294
|
+
const stateContextValue = React12.useMemo(
|
|
1295
1295
|
() => ({
|
|
1296
1296
|
currentLocation,
|
|
1297
1297
|
setCurrentLocation,
|
|
@@ -1312,20 +1312,20 @@ function CimplifyProvider({
|
|
|
1312
1312
|
return /* @__PURE__ */ jsxRuntime.jsx(CimplifyClientContext.Provider, { value: clientContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(CimplifyStateContext.Provider, { value: stateContextValue, children }) });
|
|
1313
1313
|
}
|
|
1314
1314
|
function useCimplify() {
|
|
1315
|
-
const clientContext =
|
|
1316
|
-
const stateContext =
|
|
1315
|
+
const clientContext = React12.useContext(CimplifyClientContext);
|
|
1316
|
+
const stateContext = React12.useContext(CimplifyStateContext);
|
|
1317
1317
|
if (!clientContext || !stateContext) {
|
|
1318
1318
|
throw new Error("useCimplify must be used within CimplifyProvider");
|
|
1319
1319
|
}
|
|
1320
|
-
return
|
|
1320
|
+
return React12.useMemo(
|
|
1321
1321
|
() => ({ ...clientContext, ...stateContext }),
|
|
1322
1322
|
[clientContext, stateContext]
|
|
1323
1323
|
);
|
|
1324
1324
|
}
|
|
1325
1325
|
function useOptionalCimplify() {
|
|
1326
|
-
const clientContext =
|
|
1327
|
-
const stateContext =
|
|
1328
|
-
return
|
|
1326
|
+
const clientContext = React12.useContext(CimplifyClientContext);
|
|
1327
|
+
const stateContext = React12.useContext(CimplifyStateContext);
|
|
1328
|
+
return React12.useMemo(() => {
|
|
1329
1329
|
if (!clientContext || !stateContext) {
|
|
1330
1330
|
return null;
|
|
1331
1331
|
}
|
|
@@ -1333,14 +1333,14 @@ function useOptionalCimplify() {
|
|
|
1333
1333
|
}, [clientContext, stateContext]);
|
|
1334
1334
|
}
|
|
1335
1335
|
function useCimplifyClient() {
|
|
1336
|
-
const context =
|
|
1336
|
+
const context = React12.useContext(CimplifyClientContext);
|
|
1337
1337
|
if (!context) {
|
|
1338
1338
|
throw new Error("useCimplifyClient must be used within CimplifyProvider");
|
|
1339
1339
|
}
|
|
1340
1340
|
return context;
|
|
1341
1341
|
}
|
|
1342
1342
|
function useOptionalCimplifyClient() {
|
|
1343
|
-
return
|
|
1343
|
+
return React12.useContext(CimplifyClientContext);
|
|
1344
1344
|
}
|
|
1345
1345
|
function shellColors(isDark) {
|
|
1346
1346
|
return {
|
|
@@ -1391,34 +1391,34 @@ function CimplifyCheckout({
|
|
|
1391
1391
|
appearance,
|
|
1392
1392
|
className
|
|
1393
1393
|
}) {
|
|
1394
|
-
const resolvedOrderTypes =
|
|
1394
|
+
const resolvedOrderTypes = React12.useMemo(
|
|
1395
1395
|
() => orderTypes && orderTypes.length > 0 ? orderTypes : ["pickup", "delivery"],
|
|
1396
1396
|
[orderTypes]
|
|
1397
1397
|
);
|
|
1398
|
-
const resolvedDefaultOrderType =
|
|
1398
|
+
const resolvedDefaultOrderType = React12.useMemo(() => {
|
|
1399
1399
|
if (defaultOrderType && resolvedOrderTypes.includes(defaultOrderType)) {
|
|
1400
1400
|
return defaultOrderType;
|
|
1401
1401
|
}
|
|
1402
1402
|
return resolvedOrderTypes[0] || "pickup";
|
|
1403
1403
|
}, [defaultOrderType, resolvedOrderTypes]);
|
|
1404
|
-
const [orderType, setOrderType] =
|
|
1405
|
-
const [status, setStatus] =
|
|
1406
|
-
const [statusText, setStatusText] =
|
|
1407
|
-
const [isSubmitting, setIsSubmitting] =
|
|
1408
|
-
const [isInitializing, setIsInitializing] =
|
|
1409
|
-
const [errorMessage, setErrorMessage] =
|
|
1410
|
-
const [resolvedBusinessId, setResolvedBusinessId] =
|
|
1411
|
-
const [resolvedCartId, setResolvedCartId] =
|
|
1412
|
-
const [resolvedCart, setResolvedCart] =
|
|
1413
|
-
const checkoutMountRef =
|
|
1414
|
-
const elementsRef =
|
|
1415
|
-
const activeCheckoutRef =
|
|
1416
|
-
const initialAppearanceRef =
|
|
1417
|
-
const hasWarnedInlineAppearanceRef =
|
|
1418
|
-
const isMountedRef =
|
|
1404
|
+
const [orderType, setOrderType] = React12.useState(resolvedDefaultOrderType);
|
|
1405
|
+
const [status, setStatus] = React12.useState(null);
|
|
1406
|
+
const [statusText, setStatusText] = React12.useState("");
|
|
1407
|
+
const [isSubmitting, setIsSubmitting] = React12.useState(false);
|
|
1408
|
+
const [isInitializing, setIsInitializing] = React12.useState(false);
|
|
1409
|
+
const [errorMessage, setErrorMessage] = React12.useState(null);
|
|
1410
|
+
const [resolvedBusinessId, setResolvedBusinessId] = React12.useState(businessId ?? null);
|
|
1411
|
+
const [resolvedCartId, setResolvedCartId] = React12.useState(cartId ?? null);
|
|
1412
|
+
const [resolvedCart, setResolvedCart] = React12.useState(null);
|
|
1413
|
+
const checkoutMountRef = React12.useRef(null);
|
|
1414
|
+
const elementsRef = React12.useRef(null);
|
|
1415
|
+
const activeCheckoutRef = React12.useRef(null);
|
|
1416
|
+
const initialAppearanceRef = React12.useRef(appearance);
|
|
1417
|
+
const hasWarnedInlineAppearanceRef = React12.useRef(false);
|
|
1418
|
+
const isMountedRef = React12.useRef(true);
|
|
1419
1419
|
const isTestMode = client.isTestMode();
|
|
1420
1420
|
const cimplifyCtx = useOptionalCimplify();
|
|
1421
|
-
const fxOptions =
|
|
1421
|
+
const fxOptions = React12.useMemo(() => {
|
|
1422
1422
|
if (!cimplifyCtx?.fxRate) return void 0;
|
|
1423
1423
|
if (cimplifyCtx.displayCurrency === cimplifyCtx.baseCurrency) return void 0;
|
|
1424
1424
|
return {
|
|
@@ -1426,29 +1426,29 @@ function CimplifyCheckout({
|
|
|
1426
1426
|
convertPrice: cimplifyCtx.convertPrice
|
|
1427
1427
|
};
|
|
1428
1428
|
}, [cimplifyCtx?.fxRate, cimplifyCtx?.displayCurrency, cimplifyCtx?.baseCurrency, cimplifyCtx?.convertPrice]);
|
|
1429
|
-
const fxOptionsRef =
|
|
1429
|
+
const fxOptionsRef = React12.useRef(fxOptions);
|
|
1430
1430
|
fxOptionsRef.current = fxOptions;
|
|
1431
|
-
const resolvedCartRef =
|
|
1431
|
+
const resolvedCartRef = React12.useRef(resolvedCart);
|
|
1432
1432
|
resolvedCartRef.current = resolvedCart;
|
|
1433
1433
|
const isDark = appearance?.theme === "dark";
|
|
1434
|
-
const emitStatus =
|
|
1434
|
+
const emitStatus = React12__default.default.useEffectEvent(
|
|
1435
1435
|
(nextStatus, context = {}) => {
|
|
1436
1436
|
setStatus(nextStatus);
|
|
1437
1437
|
setStatusText(context.display_text || "");
|
|
1438
1438
|
onStatusChange?.(nextStatus, context);
|
|
1439
1439
|
}
|
|
1440
1440
|
);
|
|
1441
|
-
const fireError =
|
|
1441
|
+
const fireError = React12__default.default.useEffectEvent(
|
|
1442
1442
|
(error) => {
|
|
1443
1443
|
onError?.(error);
|
|
1444
1444
|
}
|
|
1445
1445
|
);
|
|
1446
|
-
|
|
1446
|
+
React12.useEffect(() => {
|
|
1447
1447
|
if (!resolvedOrderTypes.includes(orderType)) {
|
|
1448
1448
|
setOrderType(resolvedDefaultOrderType);
|
|
1449
1449
|
}
|
|
1450
1450
|
}, [resolvedOrderTypes, resolvedDefaultOrderType, orderType]);
|
|
1451
|
-
|
|
1451
|
+
React12.useEffect(() => {
|
|
1452
1452
|
if (appearance && appearance !== initialAppearanceRef.current && !hasWarnedInlineAppearanceRef.current) {
|
|
1453
1453
|
hasWarnedInlineAppearanceRef.current = true;
|
|
1454
1454
|
console.warn(
|
|
@@ -1456,7 +1456,7 @@ function CimplifyCheckout({
|
|
|
1456
1456
|
);
|
|
1457
1457
|
}
|
|
1458
1458
|
}, [appearance]);
|
|
1459
|
-
|
|
1459
|
+
React12.useEffect(() => {
|
|
1460
1460
|
let cancelled = false;
|
|
1461
1461
|
async function bootstrap() {
|
|
1462
1462
|
const needsBusinessResolve = !businessId;
|
|
@@ -1527,14 +1527,14 @@ function CimplifyCheckout({
|
|
|
1527
1527
|
cancelled = true;
|
|
1528
1528
|
};
|
|
1529
1529
|
}, [businessId, cartId, client]);
|
|
1530
|
-
|
|
1530
|
+
React12.useEffect(() => {
|
|
1531
1531
|
return () => {
|
|
1532
1532
|
isMountedRef.current = false;
|
|
1533
1533
|
activeCheckoutRef.current?.abort();
|
|
1534
1534
|
activeCheckoutRef.current = null;
|
|
1535
1535
|
};
|
|
1536
1536
|
}, []);
|
|
1537
|
-
const handleSubmit =
|
|
1537
|
+
const handleSubmit = React12__default.default.useEffectEvent(async () => {
|
|
1538
1538
|
if (isSubmitting || isInitializing || !resolvedCartId) {
|
|
1539
1539
|
if (!resolvedCartId && !isInitializing) {
|
|
1540
1540
|
const message = "Your cart is empty. Add items before checkout.";
|
|
@@ -1579,7 +1579,7 @@ function CimplifyCheckout({
|
|
|
1579
1579
|
}
|
|
1580
1580
|
}
|
|
1581
1581
|
});
|
|
1582
|
-
|
|
1582
|
+
React12.useEffect(() => {
|
|
1583
1583
|
if (!resolvedBusinessId) {
|
|
1584
1584
|
elementsRef.current = null;
|
|
1585
1585
|
return;
|
|
@@ -1625,7 +1625,7 @@ function CimplifyCheckout({
|
|
|
1625
1625
|
resolvedDefaultOrderType,
|
|
1626
1626
|
submitLabel
|
|
1627
1627
|
]);
|
|
1628
|
-
|
|
1628
|
+
React12.useEffect(() => {
|
|
1629
1629
|
if (!resolvedCart || !elementsRef.current) return;
|
|
1630
1630
|
const checkoutElement = elementsRef.current.getElement("checkout");
|
|
1631
1631
|
if (checkoutElement) {
|
|
@@ -1676,16 +1676,16 @@ function CimplifyAccount({
|
|
|
1676
1676
|
const client = clientProp ?? context?.client;
|
|
1677
1677
|
const resolvedLinkUrl = linkUrl || DEFAULT_LINK_URL;
|
|
1678
1678
|
const resolvedBusinessId = businessIdProp || client?.getBusinessId?.() || "";
|
|
1679
|
-
const iframeRef =
|
|
1680
|
-
const [height, setHeight] =
|
|
1681
|
-
const [isReady, setIsReady] =
|
|
1682
|
-
const iframeSrc =
|
|
1679
|
+
const iframeRef = React12.useRef(null);
|
|
1680
|
+
const [height, setHeight] = React12.useState(400);
|
|
1681
|
+
const [isReady, setIsReady] = React12.useState(false);
|
|
1682
|
+
const iframeSrc = React12.useMemo(() => {
|
|
1683
1683
|
const path = section ? `/elements/account/${section}` : "/elements/account";
|
|
1684
1684
|
const url = new URL(path, resolvedLinkUrl);
|
|
1685
1685
|
if (resolvedBusinessId) url.searchParams.set("businessId", resolvedBusinessId);
|
|
1686
1686
|
return url.toString();
|
|
1687
1687
|
}, [resolvedLinkUrl, section, resolvedBusinessId]);
|
|
1688
|
-
|
|
1688
|
+
React12.useEffect(() => {
|
|
1689
1689
|
function handleMessage(event) {
|
|
1690
1690
|
if (!event.data || typeof event.data !== "object") return;
|
|
1691
1691
|
if (iframeRef.current?.contentWindow && event.source !== iframeRef.current.contentWindow) {
|
|
@@ -1755,6 +1755,944 @@ function CimplifyAccount({
|
|
|
1755
1755
|
}
|
|
1756
1756
|
);
|
|
1757
1757
|
}
|
|
1758
|
+
var BUTTON_BASE = "inline-flex items-center justify-center gap-2 font-semibold leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed [font-family:inherit] cursor-pointer rounded-[10px]";
|
|
1759
|
+
var BUTTON_VARIANTS = {
|
|
1760
|
+
primary: "bg-foreground text-background hover:bg-foreground/90",
|
|
1761
|
+
secondary: "bg-card text-foreground border border-border hover:bg-muted/40 hover:border-foreground/40",
|
|
1762
|
+
ghost: "bg-transparent text-foreground/80 hover:bg-muted/40 hover:text-foreground",
|
|
1763
|
+
danger: "bg-transparent text-destructive border border-border hover:bg-destructive/10 hover:border-destructive"
|
|
1764
|
+
};
|
|
1765
|
+
var BUTTON_SIZES = {
|
|
1766
|
+
sm: "px-[13px] py-[7px] text-[12.5px]",
|
|
1767
|
+
md: "px-[18px] py-[10px] text-[13.5px]"
|
|
1768
|
+
};
|
|
1769
|
+
var Button = React12__default.default.forwardRef(function Button2({ variant = "primary", size = "md", className, children, ...props }, ref) {
|
|
1770
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1771
|
+
"button",
|
|
1772
|
+
{
|
|
1773
|
+
ref,
|
|
1774
|
+
type: props.type ?? "button",
|
|
1775
|
+
className: cn(BUTTON_BASE, BUTTON_VARIANTS[variant], BUTTON_SIZES[size], className),
|
|
1776
|
+
"data-cimplify-account-button": true,
|
|
1777
|
+
"data-variant": variant,
|
|
1778
|
+
...props,
|
|
1779
|
+
children
|
|
1780
|
+
}
|
|
1781
|
+
);
|
|
1782
|
+
});
|
|
1783
|
+
var STATUS_COLOR = {
|
|
1784
|
+
preparing: "text-amber-600",
|
|
1785
|
+
active: "text-amber-600",
|
|
1786
|
+
delivered: "text-emerald-600",
|
|
1787
|
+
completed: "text-foreground/55",
|
|
1788
|
+
cancelled: "text-destructive",
|
|
1789
|
+
paused: "text-foreground/55"
|
|
1790
|
+
};
|
|
1791
|
+
var STATUS_WEIGHT = {
|
|
1792
|
+
preparing: "font-semibold",
|
|
1793
|
+
active: "font-semibold",
|
|
1794
|
+
delivered: "font-medium",
|
|
1795
|
+
completed: "font-medium",
|
|
1796
|
+
cancelled: "font-medium",
|
|
1797
|
+
paused: "font-medium"
|
|
1798
|
+
};
|
|
1799
|
+
var STATUS_DEFAULT_LABEL = {
|
|
1800
|
+
preparing: "In progress",
|
|
1801
|
+
active: "Active",
|
|
1802
|
+
delivered: "Delivered",
|
|
1803
|
+
completed: "Completed",
|
|
1804
|
+
cancelled: "Cancelled",
|
|
1805
|
+
paused: "Paused"
|
|
1806
|
+
};
|
|
1807
|
+
function Status({ status, className }) {
|
|
1808
|
+
const label = status.label ?? STATUS_DEFAULT_LABEL[status.kind];
|
|
1809
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1810
|
+
"span",
|
|
1811
|
+
{
|
|
1812
|
+
"data-cimplify-account-status": true,
|
|
1813
|
+
"data-kind": status.kind,
|
|
1814
|
+
className: cn(
|
|
1815
|
+
"inline-flex items-center gap-[7px] text-[12.5px]",
|
|
1816
|
+
STATUS_COLOR[status.kind],
|
|
1817
|
+
STATUS_WEIGHT[status.kind],
|
|
1818
|
+
className
|
|
1819
|
+
),
|
|
1820
|
+
children: [
|
|
1821
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[7px] rounded-full bg-current", "aria-hidden": true }),
|
|
1822
|
+
label
|
|
1823
|
+
]
|
|
1824
|
+
}
|
|
1825
|
+
);
|
|
1826
|
+
}
|
|
1827
|
+
function BackLink({ label = "Back", className, ...props }) {
|
|
1828
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1829
|
+
"a",
|
|
1830
|
+
{
|
|
1831
|
+
"data-cimplify-account-back": true,
|
|
1832
|
+
className: cn(
|
|
1833
|
+
"inline-flex items-center gap-1.5 text-[13px] text-foreground/55 hover:text-primary",
|
|
1834
|
+
"transition-colors mb-7",
|
|
1835
|
+
className
|
|
1836
|
+
),
|
|
1837
|
+
...props,
|
|
1838
|
+
children: [
|
|
1839
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2190" }),
|
|
1840
|
+
props.children ?? label
|
|
1841
|
+
]
|
|
1842
|
+
}
|
|
1843
|
+
);
|
|
1844
|
+
}
|
|
1845
|
+
function FilterTabs({
|
|
1846
|
+
items,
|
|
1847
|
+
value,
|
|
1848
|
+
onChange,
|
|
1849
|
+
className
|
|
1850
|
+
}) {
|
|
1851
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1852
|
+
"div",
|
|
1853
|
+
{
|
|
1854
|
+
role: "tablist",
|
|
1855
|
+
"data-cimplify-account-filter-tabs": true,
|
|
1856
|
+
className: cn("flex gap-0 border-b border-border/60 mb-7 overflow-x-auto", className),
|
|
1857
|
+
children: items.map((item) => {
|
|
1858
|
+
const active = item.value === value;
|
|
1859
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1860
|
+
"button",
|
|
1861
|
+
{
|
|
1862
|
+
role: "tab",
|
|
1863
|
+
"aria-selected": active,
|
|
1864
|
+
type: "button",
|
|
1865
|
+
onClick: () => onChange?.(item.value),
|
|
1866
|
+
"data-active": active || void 0,
|
|
1867
|
+
className: cn(
|
|
1868
|
+
"inline-flex items-baseline gap-2 px-4 pt-3 pb-[13px] text-[13.5px]",
|
|
1869
|
+
"border-b-2 -mb-px whitespace-nowrap transition-colors",
|
|
1870
|
+
active ? "text-foreground border-foreground font-semibold" : "text-foreground/55 border-transparent hover:text-foreground font-medium"
|
|
1871
|
+
),
|
|
1872
|
+
children: [
|
|
1873
|
+
item.label,
|
|
1874
|
+
item.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1875
|
+
"span",
|
|
1876
|
+
{
|
|
1877
|
+
className: cn(
|
|
1878
|
+
"text-[11.5px] tabular-nums font-medium",
|
|
1879
|
+
active ? "text-foreground/70" : "text-foreground/55"
|
|
1880
|
+
),
|
|
1881
|
+
children: item.count
|
|
1882
|
+
}
|
|
1883
|
+
)
|
|
1884
|
+
]
|
|
1885
|
+
},
|
|
1886
|
+
item.value
|
|
1887
|
+
);
|
|
1888
|
+
})
|
|
1889
|
+
}
|
|
1890
|
+
);
|
|
1891
|
+
}
|
|
1892
|
+
function EmptyState({ glyph, title, description, action, className }) {
|
|
1893
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1894
|
+
"div",
|
|
1895
|
+
{
|
|
1896
|
+
"data-cimplify-account-empty": true,
|
|
1897
|
+
className: cn(
|
|
1898
|
+
"rounded-[16px] border border-dashed border-border bg-card",
|
|
1899
|
+
"px-6 py-20 text-center",
|
|
1900
|
+
className
|
|
1901
|
+
),
|
|
1902
|
+
children: [
|
|
1903
|
+
glyph && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-5 size-14 rounded-[12px] bg-muted/40 text-foreground/55 grid place-items-center", children: glyph }),
|
|
1904
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-serif text-[22px] font-semibold tracking-[-0.02em] text-foreground mb-2", children: title }),
|
|
1905
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-6 max-w-[380px] text-sm leading-[1.55] text-foreground/70", children: description }),
|
|
1906
|
+
action
|
|
1907
|
+
]
|
|
1908
|
+
}
|
|
1909
|
+
);
|
|
1910
|
+
}
|
|
1911
|
+
function ErrorState({
|
|
1912
|
+
title = "Something went wrong",
|
|
1913
|
+
message = "We couldn't load this right now. Try again in a moment.",
|
|
1914
|
+
onRetry,
|
|
1915
|
+
className
|
|
1916
|
+
}) {
|
|
1917
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1918
|
+
"div",
|
|
1919
|
+
{
|
|
1920
|
+
"data-cimplify-account-error": true,
|
|
1921
|
+
className: cn("rounded-[16px] border border-border bg-card px-6 py-8 text-center", className),
|
|
1922
|
+
children: [
|
|
1923
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 size-11 rounded-[12px] bg-destructive/10 text-destructive grid place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: [
|
|
1924
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1925
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5M12 16v.5" })
|
|
1926
|
+
] }) }),
|
|
1927
|
+
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold mb-1.5 text-foreground", children: title }),
|
|
1928
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-foreground/55 mb-4 leading-[1.5]", children: message }),
|
|
1929
|
+
onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" })
|
|
1930
|
+
]
|
|
1931
|
+
}
|
|
1932
|
+
);
|
|
1933
|
+
}
|
|
1934
|
+
function Skeleton({ className, variant = "block" }) {
|
|
1935
|
+
if (variant === "row") {
|
|
1936
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-account-skeleton": true, className: cn("grid grid-cols-[44px_1fr_60px] gap-3 items-center py-3", className), children: [
|
|
1937
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-11 rounded-md bg-muted/50 animate-pulse" }),
|
|
1938
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
|
|
1939
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted/50 rounded animate-pulse w-3/4" }),
|
|
1940
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 bg-muted/40 rounded animate-pulse w-1/2" })
|
|
1941
|
+
] }),
|
|
1942
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted/50 rounded animate-pulse" })
|
|
1943
|
+
] });
|
|
1944
|
+
}
|
|
1945
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-account-skeleton": true, className: cn("bg-muted/50 rounded-md animate-pulse", className) });
|
|
1946
|
+
}
|
|
1947
|
+
function Toast({ title, description, onUndo, onDismiss, className }) {
|
|
1948
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1949
|
+
"div",
|
|
1950
|
+
{
|
|
1951
|
+
"data-cimplify-account-toast": true,
|
|
1952
|
+
role: "status",
|
|
1953
|
+
"aria-live": "polite",
|
|
1954
|
+
className: cn(
|
|
1955
|
+
"relative grid grid-cols-[22px_1fr_auto_auto] gap-3 items-center mb-6",
|
|
1956
|
+
"rounded-[10px] bg-foreground text-background px-4 py-3.5 pr-5 text-[13.5px]",
|
|
1957
|
+
"shadow-[0_1px_0_rgba(0,0,0,0.04),0_8px_24px_rgba(0,0,0,0.12)]",
|
|
1958
|
+
className
|
|
1959
|
+
),
|
|
1960
|
+
children: [
|
|
1961
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[22px] rounded-full bg-emerald-500 grid place-items-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "white", strokeWidth: "2.4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8.5l2.5 2.5L12 5.5" }) }) }),
|
|
1962
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1963
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: title }),
|
|
1964
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] opacity-75 mt-0.5", children: description })
|
|
1965
|
+
] }),
|
|
1966
|
+
onUndo && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1967
|
+
"button",
|
|
1968
|
+
{
|
|
1969
|
+
type: "button",
|
|
1970
|
+
onClick: onUndo,
|
|
1971
|
+
className: "rounded-[8px] border border-white/20 bg-transparent text-background px-3 py-1.5 text-[12.5px] font-semibold hover:bg-white/10",
|
|
1972
|
+
children: "Undo"
|
|
1973
|
+
}
|
|
1974
|
+
),
|
|
1975
|
+
onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1976
|
+
"button",
|
|
1977
|
+
{
|
|
1978
|
+
type: "button",
|
|
1979
|
+
"aria-label": "Dismiss",
|
|
1980
|
+
onClick: onDismiss,
|
|
1981
|
+
className: "bg-transparent border-0 text-background/60 p-1 hover:text-background",
|
|
1982
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 3.5l7 7M10.5 3.5l-7 7" }) })
|
|
1983
|
+
}
|
|
1984
|
+
)
|
|
1985
|
+
]
|
|
1986
|
+
}
|
|
1987
|
+
);
|
|
1988
|
+
}
|
|
1989
|
+
function AccountShell({ sidebar, children, className }) {
|
|
1990
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1991
|
+
"div",
|
|
1992
|
+
{
|
|
1993
|
+
"data-cimplify-account-shell": true,
|
|
1994
|
+
className: cn(
|
|
1995
|
+
"grid min-h-[720px] bg-background",
|
|
1996
|
+
"grid-cols-1 md:grid-cols-[280px_1fr]",
|
|
1997
|
+
className
|
|
1998
|
+
),
|
|
1999
|
+
children: [
|
|
2000
|
+
sidebar,
|
|
2001
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children })
|
|
2002
|
+
]
|
|
2003
|
+
}
|
|
2004
|
+
);
|
|
2005
|
+
}
|
|
2006
|
+
function AccountSidebar({ children, scopeNote, className }) {
|
|
2007
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2008
|
+
"aside",
|
|
2009
|
+
{
|
|
2010
|
+
"data-cimplify-account-sidebar": true,
|
|
2011
|
+
className: cn(
|
|
2012
|
+
"hidden md:flex flex-col bg-background border-r border-border/60",
|
|
2013
|
+
"px-6 pt-9 pb-7",
|
|
2014
|
+
className
|
|
2015
|
+
),
|
|
2016
|
+
children: [
|
|
2017
|
+
children,
|
|
2018
|
+
scopeNote && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-6 px-2 text-[11.5px] leading-[1.55] text-foreground/55", children: scopeNote })
|
|
2019
|
+
]
|
|
2020
|
+
}
|
|
2021
|
+
);
|
|
2022
|
+
}
|
|
2023
|
+
function avatarGradient(seed) {
|
|
2024
|
+
let hash = 0;
|
|
2025
|
+
for (let i = 0; i < seed.length; i++) hash = (hash << 5) - hash + seed.charCodeAt(i) | 0;
|
|
2026
|
+
const hue = (Math.abs(hash) % 60 + 20) % 360;
|
|
2027
|
+
return `linear-gradient(135deg, oklch(0.78 0.10 ${hue}), oklch(0.55 0.16 ${hue - 8}))`;
|
|
2028
|
+
}
|
|
2029
|
+
function initials(name) {
|
|
2030
|
+
return name.trim().split(/\s+/).map((p) => p[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
|
|
2031
|
+
}
|
|
2032
|
+
function AccountIdentityStrip({
|
|
2033
|
+
name,
|
|
2034
|
+
email,
|
|
2035
|
+
customerId,
|
|
2036
|
+
className
|
|
2037
|
+
}) {
|
|
2038
|
+
const seed = customerId ?? name;
|
|
2039
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2040
|
+
"div",
|
|
2041
|
+
{
|
|
2042
|
+
"data-cimplify-account-identity": true,
|
|
2043
|
+
className: cn(
|
|
2044
|
+
"grid grid-cols-[40px_1fr] gap-3 items-center",
|
|
2045
|
+
"border-b border-border/60 px-2 pb-[22px] mb-2",
|
|
2046
|
+
className
|
|
2047
|
+
),
|
|
2048
|
+
children: [
|
|
2049
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2050
|
+
"div",
|
|
2051
|
+
{
|
|
2052
|
+
"aria-hidden": true,
|
|
2053
|
+
className: "size-10 rounded-full grid place-items-center text-white font-serif font-semibold text-[16px] tracking-[-0.01em]",
|
|
2054
|
+
style: { background: avatarGradient(seed) },
|
|
2055
|
+
children: initials(name)
|
|
2056
|
+
}
|
|
2057
|
+
),
|
|
2058
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
2059
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-semibold text-foreground truncate", children: name }),
|
|
2060
|
+
email && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] text-foreground/55 truncate", children: email })
|
|
2061
|
+
] })
|
|
2062
|
+
]
|
|
2063
|
+
}
|
|
2064
|
+
);
|
|
2065
|
+
}
|
|
2066
|
+
var externIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8l4-4M5 4h3v3" }) });
|
|
2067
|
+
function AccountNav({ items, activeHref, className }) {
|
|
2068
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Account", "data-cimplify-account-nav": true, className: cn("pt-4", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-px list-none p-0 m-0", children: items.map((item, idx) => {
|
|
2069
|
+
if (item.divider) {
|
|
2070
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border/60 mx-2 my-3" }) }, `d-${idx}`);
|
|
2071
|
+
}
|
|
2072
|
+
const active = item.href === activeHref;
|
|
2073
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2074
|
+
"a",
|
|
2075
|
+
{
|
|
2076
|
+
href: item.href,
|
|
2077
|
+
"aria-current": active ? "page" : void 0,
|
|
2078
|
+
"data-active": active || void 0,
|
|
2079
|
+
className: cn(
|
|
2080
|
+
"grid grid-cols-[16px_1fr_auto] gap-3 items-center rounded-lg px-3 py-2",
|
|
2081
|
+
"text-[13.5px] no-underline transition-colors",
|
|
2082
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
2083
|
+
active ? "bg-card shadow-[0_0_0_1px_var(--color-border)] text-foreground font-semibold" : "text-foreground/70 font-medium hover:bg-muted/40 hover:text-foreground"
|
|
2084
|
+
),
|
|
2085
|
+
children: [
|
|
2086
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("size-4 grid place-items-center", active ? "text-primary opacity-100" : "opacity-70"), children: item.icon }),
|
|
2087
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
|
|
2088
|
+
item.external && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground/55 opacity-70", children: externIcon })
|
|
2089
|
+
]
|
|
2090
|
+
}
|
|
2091
|
+
) }, item.href);
|
|
2092
|
+
}) }) });
|
|
2093
|
+
}
|
|
2094
|
+
function AccountHero({ eyebrow = "Your account", title, subtitle, className }) {
|
|
2095
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2096
|
+
"header",
|
|
2097
|
+
{
|
|
2098
|
+
"data-cimplify-account-hero": true,
|
|
2099
|
+
className: cn("mb-11", className),
|
|
2100
|
+
children: [
|
|
2101
|
+
eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] font-semibold tracking-[0.16em] uppercase text-primary mb-2", children: eyebrow }),
|
|
2102
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-serif text-[clamp(28px,3vw,40px)] font-semibold tracking-[-0.025em] leading-[1.05] text-foreground m-0", children: title }),
|
|
2103
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70 mt-3 text-[14.5px] m-0", children: subtitle })
|
|
2104
|
+
]
|
|
2105
|
+
}
|
|
2106
|
+
);
|
|
2107
|
+
}
|
|
2108
|
+
function AccountContent({ children, className }) {
|
|
2109
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2110
|
+
"main",
|
|
2111
|
+
{
|
|
2112
|
+
"data-cimplify-account-content": true,
|
|
2113
|
+
className: cn(
|
|
2114
|
+
"bg-background min-w-0",
|
|
2115
|
+
"px-6 sm:px-10 md:px-16 pt-14 pb-18",
|
|
2116
|
+
className
|
|
2117
|
+
),
|
|
2118
|
+
children
|
|
2119
|
+
}
|
|
2120
|
+
);
|
|
2121
|
+
}
|
|
2122
|
+
function Section({ title, meta, action, children, className }) {
|
|
2123
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("section", { "data-cimplify-account-section": true, className: cn("mt-11 first:mt-0", className), children: [
|
|
2124
|
+
(title || meta || action) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-3.5", children: [
|
|
2125
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[12px] font-semibold tracking-[0.1em] uppercase text-foreground/55 m-0", children: title }),
|
|
2126
|
+
meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-foreground/55 tabular-nums", children: meta }),
|
|
2127
|
+
action
|
|
2128
|
+
] }),
|
|
2129
|
+
children
|
|
2130
|
+
] });
|
|
2131
|
+
}
|
|
2132
|
+
function SectionMore({ children, className, ...props }) {
|
|
2133
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2134
|
+
"a",
|
|
2135
|
+
{
|
|
2136
|
+
"data-cimplify-account-section-more": true,
|
|
2137
|
+
className: cn("text-[13px] font-medium text-primary no-underline hover:underline", className),
|
|
2138
|
+
...props,
|
|
2139
|
+
children
|
|
2140
|
+
}
|
|
2141
|
+
);
|
|
2142
|
+
}
|
|
2143
|
+
function Pane({ pane, side }) {
|
|
2144
|
+
const color = pane.variant === "live" ? "text-amber-600" : "text-emerald-600";
|
|
2145
|
+
const haloAnim = pane.variant === "live" ? "cimplify-live-pulse" : "";
|
|
2146
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", side === "right" && "md:pl-8 md:border-l border-border/60"), children: [
|
|
2147
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
2148
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center gap-2 text-[11.5px] font-semibold tracking-[0.08em] uppercase", color), children: [
|
|
2149
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2150
|
+
"span",
|
|
2151
|
+
{
|
|
2152
|
+
"data-cimplify-live-dot": pane.variant === "live" || void 0,
|
|
2153
|
+
className: cn("size-1.5 rounded-full bg-current", haloAnim),
|
|
2154
|
+
"aria-hidden": true
|
|
2155
|
+
}
|
|
2156
|
+
),
|
|
2157
|
+
pane.label
|
|
2158
|
+
] }),
|
|
2159
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-serif text-[22px] font-semibold tracking-[-0.02em] leading-[1.2] text-foreground m-0", children: pane.title }),
|
|
2160
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13.5px] text-foreground/70", children: pane.when })
|
|
2161
|
+
] }),
|
|
2162
|
+
pane.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2.5 mt-auto", children: pane.actions })
|
|
2163
|
+
] });
|
|
2164
|
+
}
|
|
2165
|
+
function HappeningCard({ left, right, className }) {
|
|
2166
|
+
if (!left && !right) return null;
|
|
2167
|
+
const dual = !!left && !!right;
|
|
2168
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2169
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2170
|
+
@keyframes cimplify-live-pulse {
|
|
2171
|
+
0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 18%, transparent); }
|
|
2172
|
+
50% { box-shadow: 0 0 0 8px color-mix(in oklch, currentColor 5%, transparent); }
|
|
2173
|
+
}
|
|
2174
|
+
.cimplify-live-pulse { animation: cimplify-live-pulse 1.8s ease-in-out infinite; }
|
|
2175
|
+
` }),
|
|
2176
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2177
|
+
"div",
|
|
2178
|
+
{
|
|
2179
|
+
"data-cimplify-happening-card": true,
|
|
2180
|
+
"data-dual": dual || void 0,
|
|
2181
|
+
className: cn(
|
|
2182
|
+
"bg-card border border-border rounded-[16px] p-7",
|
|
2183
|
+
"grid gap-4 md:gap-0 items-stretch",
|
|
2184
|
+
dual ? "md:grid-cols-2" : "grid-cols-1",
|
|
2185
|
+
className
|
|
2186
|
+
),
|
|
2187
|
+
children: [
|
|
2188
|
+
left && /* @__PURE__ */ jsxRuntime.jsx(Pane, { pane: left, side: "left" }),
|
|
2189
|
+
right && /* @__PURE__ */ jsxRuntime.jsx(Pane, { pane: right, side: "right" })
|
|
2190
|
+
]
|
|
2191
|
+
}
|
|
2192
|
+
)
|
|
2193
|
+
] });
|
|
2194
|
+
}
|
|
2195
|
+
function ContinuityCard({ glyph, title, description, badge, className }) {
|
|
2196
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2197
|
+
"div",
|
|
2198
|
+
{
|
|
2199
|
+
"data-cimplify-continuity-card": true,
|
|
2200
|
+
className: cn(
|
|
2201
|
+
"grid grid-cols-[auto_1fr_auto] gap-3.5 items-center",
|
|
2202
|
+
"rounded-[12px] px-5 py-3.5 mb-8 -mt-5",
|
|
2203
|
+
"border bg-card text-foreground text-[13.5px]",
|
|
2204
|
+
// soft primary-tinted gradient
|
|
2205
|
+
"bg-[linear-gradient(135deg,color-mix(in_oklch,var(--color-primary)_8%,transparent),var(--color-background))]",
|
|
2206
|
+
"border-[color-mix(in_oklch,var(--color-primary)_18%,transparent)]",
|
|
2207
|
+
className
|
|
2208
|
+
),
|
|
2209
|
+
children: [
|
|
2210
|
+
glyph && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-[26px] rounded-full bg-card border border-border grid place-items-center text-primary text-[13px]", children: glyph }),
|
|
2211
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2212
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-foreground", children: title }),
|
|
2213
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/55 text-[12px] mt-0.5", children: description })
|
|
2214
|
+
] }),
|
|
2215
|
+
badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11.5px] text-primary font-semibold uppercase tracking-[0.06em] px-2.5 py-1 rounded-full bg-card border border-border", children: badge })
|
|
2216
|
+
]
|
|
2217
|
+
}
|
|
2218
|
+
);
|
|
2219
|
+
}
|
|
2220
|
+
function WelcomeCard({ title, description, action, className }) {
|
|
2221
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2222
|
+
"div",
|
|
2223
|
+
{
|
|
2224
|
+
"data-cimplify-welcome-card": true,
|
|
2225
|
+
className: cn(
|
|
2226
|
+
"rounded-[16px] border border-border bg-card",
|
|
2227
|
+
"px-9 py-9 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-8 items-center",
|
|
2228
|
+
className
|
|
2229
|
+
),
|
|
2230
|
+
children: [
|
|
2231
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2232
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-serif text-[24px] font-semibold tracking-[-0.02em] text-foreground m-0 mb-2", children: title }),
|
|
2233
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70 text-sm leading-[1.55] max-w-[460px] m-0", children: description })
|
|
2234
|
+
] }),
|
|
2235
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
|
|
2236
|
+
]
|
|
2237
|
+
}
|
|
2238
|
+
);
|
|
2239
|
+
}
|
|
2240
|
+
function summaryLine(s) {
|
|
2241
|
+
if (!s) return "Addresses, payment, profile \xB7 syncs to every Cimplify shop";
|
|
2242
|
+
const parts = [];
|
|
2243
|
+
if (typeof s.addresses === "number")
|
|
2244
|
+
parts.push(`${s.addresses} address${s.addresses === 1 ? "" : "es"}`);
|
|
2245
|
+
if (typeof s.paymentMethods === "number")
|
|
2246
|
+
parts.push(`${s.paymentMethods} payment method${s.paymentMethods === 1 ? "" : "s"}`);
|
|
2247
|
+
if (typeof s.shops === "number")
|
|
2248
|
+
parts.push(`${s.shops} shop${s.shops === 1 ? "" : "s"}`);
|
|
2249
|
+
if (parts.length === 0) return "Addresses, payment, profile \xB7 syncs to every Cimplify shop";
|
|
2250
|
+
return parts.join(" \xB7 ");
|
|
2251
|
+
}
|
|
2252
|
+
function IdentityOfframp({
|
|
2253
|
+
title = "Cimplify identity",
|
|
2254
|
+
summary,
|
|
2255
|
+
href = "https://link.cimplify.io",
|
|
2256
|
+
className,
|
|
2257
|
+
...props
|
|
2258
|
+
}) {
|
|
2259
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2260
|
+
"a",
|
|
2261
|
+
{
|
|
2262
|
+
"data-cimplify-identity-offramp": true,
|
|
2263
|
+
href,
|
|
2264
|
+
target: href.startsWith("http") ? "_blank" : void 0,
|
|
2265
|
+
rel: href.startsWith("http") ? "noopener noreferrer" : void 0,
|
|
2266
|
+
className: cn(
|
|
2267
|
+
"grid grid-cols-[40px_1fr_auto] gap-4 items-center",
|
|
2268
|
+
"rounded-[16px] border border-border bg-card px-5 py-4",
|
|
2269
|
+
"no-underline text-foreground transition-colors",
|
|
2270
|
+
"hover:bg-muted/40 hover:border-foreground/40",
|
|
2271
|
+
"group",
|
|
2272
|
+
className
|
|
2273
|
+
),
|
|
2274
|
+
...props,
|
|
2275
|
+
children: [
|
|
2276
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-10 rounded-md bg-foreground text-background grid place-items-center font-serif font-bold text-[18px]", children: "C" }),
|
|
2277
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2278
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-semibold text-foreground", children: title }),
|
|
2279
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12.5px] text-foreground/55 mt-0.5 tabular-nums", children: summaryLine(summary) })
|
|
2280
|
+
] }),
|
|
2281
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2282
|
+
"svg",
|
|
2283
|
+
{
|
|
2284
|
+
width: "14",
|
|
2285
|
+
height: "14",
|
|
2286
|
+
viewBox: "0 0 14 14",
|
|
2287
|
+
fill: "none",
|
|
2288
|
+
stroke: "currentColor",
|
|
2289
|
+
strokeWidth: "1.6",
|
|
2290
|
+
className: "text-foreground/55 transition-transform group-hover:text-primary group-hover:translate-x-0.5",
|
|
2291
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l4 4-4 4" })
|
|
2292
|
+
}
|
|
2293
|
+
)
|
|
2294
|
+
]
|
|
2295
|
+
}
|
|
2296
|
+
);
|
|
2297
|
+
}
|
|
2298
|
+
var THUMB_GRADIENTS = [
|
|
2299
|
+
"linear-gradient(135deg, oklch(0.86 0.06 60), oklch(0.74 0.11 35))",
|
|
2300
|
+
"linear-gradient(135deg, oklch(0.92 0.04 80), oklch(0.84 0.08 60))",
|
|
2301
|
+
"linear-gradient(135deg, oklch(0.94 0.05 25), oklch(0.82 0.10 30))",
|
|
2302
|
+
"linear-gradient(135deg, oklch(0.74 0.10 45), oklch(0.58 0.13 30))"
|
|
2303
|
+
];
|
|
2304
|
+
function deterministicGradient(seed, idx) {
|
|
2305
|
+
let hash = idx;
|
|
2306
|
+
for (let i = 0; i < seed.length; i++) hash = (hash << 5) - hash + seed.charCodeAt(i) | 0;
|
|
2307
|
+
return THUMB_GRADIENTS[Math.abs(hash) % THUMB_GRADIENTS.length];
|
|
2308
|
+
}
|
|
2309
|
+
function Thumbs({ thumbnails, seed = "" }) {
|
|
2310
|
+
const list = thumbnails && thumbnails.length > 0 ? thumbnails : [`${seed}-a`, `${seed}-b`, `${seed}-c`];
|
|
2311
|
+
const solo = list.length === 1;
|
|
2312
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative size-14", "aria-hidden": true, children: list.slice(0, 3).map((src, i) => {
|
|
2313
|
+
const isImg = src.startsWith("http") || src.startsWith("/");
|
|
2314
|
+
const sizes = solo ? "size-14 left-0 top-0 z-30" : [
|
|
2315
|
+
"size-11 left-0 top-0 z-30",
|
|
2316
|
+
"size-[38px] left-[14px] top-1 z-20",
|
|
2317
|
+
"size-8 left-6 top-2 z-10"
|
|
2318
|
+
][i];
|
|
2319
|
+
const style = isImg ? { backgroundImage: `url(${src})`, backgroundSize: "cover", backgroundPosition: "center" } : { background: deterministicGradient(src, i) };
|
|
2320
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2321
|
+
"div",
|
|
2322
|
+
{
|
|
2323
|
+
className: cn(
|
|
2324
|
+
"absolute rounded-md shadow-[0_0_0_2px_var(--color-card)]",
|
|
2325
|
+
sizes
|
|
2326
|
+
),
|
|
2327
|
+
style
|
|
2328
|
+
},
|
|
2329
|
+
i
|
|
2330
|
+
);
|
|
2331
|
+
}) });
|
|
2332
|
+
}
|
|
2333
|
+
function OrderRow({ order, onSelect, className }) {
|
|
2334
|
+
const Element = order.href ? "a" : "button";
|
|
2335
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2336
|
+
Element,
|
|
2337
|
+
{
|
|
2338
|
+
"data-cimplify-order-row": true,
|
|
2339
|
+
href: order.href,
|
|
2340
|
+
type: order.href ? void 0 : "button",
|
|
2341
|
+
onClick: () => onSelect?.(order.id),
|
|
2342
|
+
className: cn(
|
|
2343
|
+
"grid grid-cols-[56px_1fr_auto_auto] gap-5 items-center px-[22px] py-[18px]",
|
|
2344
|
+
"border-b border-border/60 last:border-b-0",
|
|
2345
|
+
"text-left no-underline w-full bg-transparent",
|
|
2346
|
+
"transition-colors hover:bg-muted/40",
|
|
2347
|
+
"group cursor-pointer",
|
|
2348
|
+
className
|
|
2349
|
+
),
|
|
2350
|
+
children: [
|
|
2351
|
+
/* @__PURE__ */ jsxRuntime.jsx(Thumbs, { thumbnails: order.thumbnails, seed: order.id }),
|
|
2352
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
|
|
2353
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-semibold text-foreground leading-[1.4] truncate", children: order.summary }),
|
|
2354
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[12.5px] text-foreground/55 flex gap-2 items-center tabular-nums", children: [
|
|
2355
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: order.meta }),
|
|
2356
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-border", children: "\xB7" }),
|
|
2357
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-[11px]", children: [
|
|
2358
|
+
"#",
|
|
2359
|
+
order.id
|
|
2360
|
+
] })
|
|
2361
|
+
] })
|
|
2362
|
+
] }),
|
|
2363
|
+
/* @__PURE__ */ jsxRuntime.jsx(Status, { status: order.status }),
|
|
2364
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14.5px] font-semibold text-foreground tabular-nums", children: order.total })
|
|
2365
|
+
]
|
|
2366
|
+
}
|
|
2367
|
+
);
|
|
2368
|
+
}
|
|
2369
|
+
function OrderList({ orders, onSelect, className }) {
|
|
2370
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2371
|
+
"div",
|
|
2372
|
+
{
|
|
2373
|
+
"data-cimplify-order-list": true,
|
|
2374
|
+
className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
|
|
2375
|
+
children: orders.map((order) => /* @__PURE__ */ jsxRuntime.jsx(OrderRow, { order, onSelect }, order.id))
|
|
2376
|
+
}
|
|
2377
|
+
);
|
|
2378
|
+
}
|
|
2379
|
+
function OrderDetailHeader({ title, meta, className }) {
|
|
2380
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("header", { "data-cimplify-order-detail-header": true, className: cn("mb-9", className), children: [
|
|
2381
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-serif font-semibold text-[clamp(26px,2.8vw,34px)] tracking-[-0.025em] leading-[1.1] text-foreground m-0 mb-2.5", children: title }),
|
|
2382
|
+
meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-wrap text-[13px] text-foreground/55", children: meta })
|
|
2383
|
+
] });
|
|
2384
|
+
}
|
|
2385
|
+
function OrderDetailMetaPipe() {
|
|
2386
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-border", children: "\xB7" });
|
|
2387
|
+
}
|
|
2388
|
+
function OrderTimeline({ steps, className }) {
|
|
2389
|
+
const doneCount = steps.filter((s) => s.state === "done").length;
|
|
2390
|
+
const currentIdx = steps.findIndex((s) => s.state === "current");
|
|
2391
|
+
const filledRatio = currentIdx >= 0 ? (doneCount + (currentIdx >= doneCount ? 0.5 : 0)) / (steps.length - 1) : doneCount / Math.max(1, steps.length - 1);
|
|
2392
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2393
|
+
"div",
|
|
2394
|
+
{
|
|
2395
|
+
"data-cimplify-order-timeline": true,
|
|
2396
|
+
className: cn("bg-card border border-border rounded-[16px] px-7 py-8 mb-6 relative", className),
|
|
2397
|
+
children: [
|
|
2398
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2399
|
+
"div",
|
|
2400
|
+
{
|
|
2401
|
+
className: "absolute top-[18px] h-0.5 bg-border z-[1]",
|
|
2402
|
+
style: {
|
|
2403
|
+
left: `calc(${100 / steps.length / 2}% + 18px)`,
|
|
2404
|
+
right: `calc(${100 / steps.length / 2}% + 18px)`
|
|
2405
|
+
},
|
|
2406
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2407
|
+
"div",
|
|
2408
|
+
{
|
|
2409
|
+
className: "h-full bg-primary",
|
|
2410
|
+
style: { width: `${Math.min(100, filledRatio * 100)}%` }
|
|
2411
|
+
}
|
|
2412
|
+
)
|
|
2413
|
+
}
|
|
2414
|
+
),
|
|
2415
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2416
|
+
"div",
|
|
2417
|
+
{
|
|
2418
|
+
className: "grid relative",
|
|
2419
|
+
style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
|
|
2420
|
+
children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center px-1 relative", children: [
|
|
2421
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2422
|
+
"div",
|
|
2423
|
+
{
|
|
2424
|
+
className: cn(
|
|
2425
|
+
"size-9 rounded-full border-2 grid place-items-center mx-auto mb-3 relative z-[2]",
|
|
2426
|
+
step.state === "current" && "bg-primary text-white border-primary shadow-[0_0_0_6px_color-mix(in_oklch,var(--color-primary)_18%,transparent)]",
|
|
2427
|
+
step.state === "done" && "bg-foreground text-white border-foreground",
|
|
2428
|
+
step.state === "pending" && "bg-muted/40 text-foreground/55 border-border"
|
|
2429
|
+
),
|
|
2430
|
+
children: step.icon
|
|
2431
|
+
}
|
|
2432
|
+
),
|
|
2433
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2434
|
+
"div",
|
|
2435
|
+
{
|
|
2436
|
+
className: cn(
|
|
2437
|
+
"text-[12.5px] font-semibold",
|
|
2438
|
+
step.state === "current" ? "text-foreground" : "text-foreground/70"
|
|
2439
|
+
),
|
|
2440
|
+
children: step.label
|
|
2441
|
+
}
|
|
2442
|
+
),
|
|
2443
|
+
step.time && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11.5px] text-foreground/55 mt-0.5", children: step.time })
|
|
2444
|
+
] }, i))
|
|
2445
|
+
}
|
|
2446
|
+
)
|
|
2447
|
+
]
|
|
2448
|
+
}
|
|
2449
|
+
);
|
|
2450
|
+
}
|
|
2451
|
+
function ItemsCard({ title, rightLabel, items, totals, className }) {
|
|
2452
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2453
|
+
"div",
|
|
2454
|
+
{
|
|
2455
|
+
"data-cimplify-items-card": true,
|
|
2456
|
+
className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
|
|
2457
|
+
children: [
|
|
2458
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-[22px] py-4 border-b border-border/60", children: [
|
|
2459
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[13.5px] font-semibold text-foreground m-0", children: title }),
|
|
2460
|
+
rightLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12.5px] text-foreground/55", children: rightLabel })
|
|
2461
|
+
] }),
|
|
2462
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-none p-0 m-0", children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2463
|
+
"li",
|
|
2464
|
+
{
|
|
2465
|
+
className: "grid grid-cols-[48px_1fr_auto_auto] gap-4 items-center px-[22px] py-3.5 border-b border-border/60 last:border-b-0",
|
|
2466
|
+
children: [
|
|
2467
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2468
|
+
"div",
|
|
2469
|
+
{
|
|
2470
|
+
className: "size-12 rounded",
|
|
2471
|
+
style: {
|
|
2472
|
+
background: item.thumbnail ? `url(${item.thumbnail}) center/cover` : deterministicGradient(item.id, idx)
|
|
2473
|
+
},
|
|
2474
|
+
"aria-hidden": true
|
|
2475
|
+
}
|
|
2476
|
+
),
|
|
2477
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2478
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-semibold text-foreground", children: item.name }),
|
|
2479
|
+
item.meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] text-foreground/55 mt-0.5", children: item.meta })
|
|
2480
|
+
] }),
|
|
2481
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[12.5px] text-foreground/55 tabular-nums", children: [
|
|
2482
|
+
"\xD7 ",
|
|
2483
|
+
item.qty
|
|
2484
|
+
] }),
|
|
2485
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] font-semibold text-foreground tabular-nums", children: item.price })
|
|
2486
|
+
]
|
|
2487
|
+
},
|
|
2488
|
+
item.id
|
|
2489
|
+
)) }),
|
|
2490
|
+
totals && /* @__PURE__ */ jsxRuntime.jsx(OrderTotals, { data: totals })
|
|
2491
|
+
]
|
|
2492
|
+
}
|
|
2493
|
+
);
|
|
2494
|
+
}
|
|
2495
|
+
function OrderTotals({ data, className }) {
|
|
2496
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2497
|
+
"div",
|
|
2498
|
+
{
|
|
2499
|
+
"data-cimplify-order-totals": true,
|
|
2500
|
+
className: cn("px-[22px] py-4 bg-muted/30 border-t border-border/60", className),
|
|
2501
|
+
children: [
|
|
2502
|
+
data.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between py-1 text-[13.5px]", children: [
|
|
2503
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground/70", children: row.label }),
|
|
2504
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-foreground", children: row.value })
|
|
2505
|
+
] }, row.label)),
|
|
2506
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between pt-3 mt-2 border-t border-border font-bold text-[15px]", children: [
|
|
2507
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: data.grandLabel }),
|
|
2508
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-foreground", children: data.grandValue })
|
|
2509
|
+
] })
|
|
2510
|
+
]
|
|
2511
|
+
}
|
|
2512
|
+
);
|
|
2513
|
+
}
|
|
2514
|
+
function ContextCard({ rows, className }) {
|
|
2515
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2516
|
+
"div",
|
|
2517
|
+
{
|
|
2518
|
+
"data-cimplify-context-card": true,
|
|
2519
|
+
className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
|
|
2520
|
+
children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2521
|
+
"div",
|
|
2522
|
+
{
|
|
2523
|
+
className: "grid grid-cols-[130px_1fr_auto] gap-5 px-[22px] py-4 border-b border-border/60 last:border-b-0 items-center",
|
|
2524
|
+
children: [
|
|
2525
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12.5px] text-foreground/55 font-medium", children: row.label }),
|
|
2526
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13.5px] text-foreground leading-[1.5]", children: row.value }),
|
|
2527
|
+
row.manageHref && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2528
|
+
"a",
|
|
2529
|
+
{
|
|
2530
|
+
href: row.manageHref,
|
|
2531
|
+
target: "_blank",
|
|
2532
|
+
rel: "noopener noreferrer",
|
|
2533
|
+
className: "text-[12px] text-foreground/55 no-underline hover:text-primary inline-flex items-center gap-1 transition-colors",
|
|
2534
|
+
children: [
|
|
2535
|
+
row.manageLabel ?? "Manage",
|
|
2536
|
+
" ",
|
|
2537
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2197" })
|
|
2538
|
+
]
|
|
2539
|
+
}
|
|
2540
|
+
)
|
|
2541
|
+
]
|
|
2542
|
+
},
|
|
2543
|
+
row.label
|
|
2544
|
+
))
|
|
2545
|
+
}
|
|
2546
|
+
);
|
|
2547
|
+
}
|
|
2548
|
+
function SubscriptionRow({
|
|
2549
|
+
subscription,
|
|
2550
|
+
onSelect,
|
|
2551
|
+
iconTile,
|
|
2552
|
+
className
|
|
2553
|
+
}) {
|
|
2554
|
+
const Element = subscription.href ? "a" : "button";
|
|
2555
|
+
const muted = subscription.cancelled;
|
|
2556
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2557
|
+
Element,
|
|
2558
|
+
{
|
|
2559
|
+
"data-cimplify-subscription-row": true,
|
|
2560
|
+
href: subscription.href,
|
|
2561
|
+
type: subscription.href ? void 0 : "button",
|
|
2562
|
+
onClick: () => onSelect?.(subscription.id),
|
|
2563
|
+
className: cn(
|
|
2564
|
+
"grid grid-cols-[56px_1fr_auto_auto] gap-5 items-center px-[22px] py-5",
|
|
2565
|
+
"border-b border-border/60 last:border-b-0",
|
|
2566
|
+
"text-left no-underline w-full bg-transparent",
|
|
2567
|
+
"transition-colors hover:bg-muted/40 cursor-pointer",
|
|
2568
|
+
muted && "opacity-60",
|
|
2569
|
+
className
|
|
2570
|
+
),
|
|
2571
|
+
children: [
|
|
2572
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2573
|
+
"div",
|
|
2574
|
+
{
|
|
2575
|
+
className: cn(
|
|
2576
|
+
"size-14 rounded-[12px] grid place-items-center",
|
|
2577
|
+
subscription.paused || muted ? "bg-muted/40 text-foreground/55" : "text-amber-700 bg-[linear-gradient(135deg,oklch(0.92_0.05_80),oklch(0.84_0.10_60))]"
|
|
2578
|
+
),
|
|
2579
|
+
children: iconTile ?? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
2580
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
|
|
2581
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v5l3 2" })
|
|
2582
|
+
] })
|
|
2583
|
+
}
|
|
2584
|
+
),
|
|
2585
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
2586
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14.5px] font-semibold text-foreground", children: subscription.title }),
|
|
2587
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12.5px] text-foreground/55 mt-0.5", children: subscription.meta })
|
|
2588
|
+
] }),
|
|
2589
|
+
/* @__PURE__ */ jsxRuntime.jsx(Status, { status: subscription.status }),
|
|
2590
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right tabular-nums", children: [
|
|
2591
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2592
|
+
"span",
|
|
2593
|
+
{
|
|
2594
|
+
className: cn(
|
|
2595
|
+
"text-[14.5px] font-semibold",
|
|
2596
|
+
muted ? "text-foreground/55" : "text-foreground"
|
|
2597
|
+
),
|
|
2598
|
+
children: subscription.price
|
|
2599
|
+
}
|
|
2600
|
+
),
|
|
2601
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[11px] text-foreground/55 mt-0.5", children: subscription.unit })
|
|
2602
|
+
] })
|
|
2603
|
+
]
|
|
2604
|
+
}
|
|
2605
|
+
);
|
|
2606
|
+
}
|
|
2607
|
+
function SubscriptionList({
|
|
2608
|
+
subscriptions,
|
|
2609
|
+
onSelect,
|
|
2610
|
+
renderIcon,
|
|
2611
|
+
className
|
|
2612
|
+
}) {
|
|
2613
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2614
|
+
"div",
|
|
2615
|
+
{
|
|
2616
|
+
"data-cimplify-subscription-list": true,
|
|
2617
|
+
className: cn("bg-card border border-border rounded-[16px] overflow-hidden", className),
|
|
2618
|
+
children: subscriptions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2619
|
+
SubscriptionRow,
|
|
2620
|
+
{
|
|
2621
|
+
subscription: s,
|
|
2622
|
+
onSelect,
|
|
2623
|
+
iconTile: renderIcon?.(s)
|
|
2624
|
+
},
|
|
2625
|
+
s.id
|
|
2626
|
+
))
|
|
2627
|
+
}
|
|
2628
|
+
);
|
|
2629
|
+
}
|
|
2630
|
+
function NextDeliveryCard({
|
|
2631
|
+
label,
|
|
2632
|
+
date,
|
|
2633
|
+
meta,
|
|
2634
|
+
actions,
|
|
2635
|
+
footnote,
|
|
2636
|
+
rightFootnote,
|
|
2637
|
+
paused,
|
|
2638
|
+
className
|
|
2639
|
+
}) {
|
|
2640
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2641
|
+
"div",
|
|
2642
|
+
{
|
|
2643
|
+
"data-cimplify-next-delivery": true,
|
|
2644
|
+
"data-paused": paused || void 0,
|
|
2645
|
+
className: cn(
|
|
2646
|
+
"bg-card border border-border rounded-[16px] mb-6 overflow-hidden",
|
|
2647
|
+
className
|
|
2648
|
+
),
|
|
2649
|
+
children: [
|
|
2650
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2651
|
+
"div",
|
|
2652
|
+
{
|
|
2653
|
+
className: cn(
|
|
2654
|
+
"px-8 py-7 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-6 items-center",
|
|
2655
|
+
paused && "opacity-85"
|
|
2656
|
+
),
|
|
2657
|
+
children: [
|
|
2658
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
2659
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2660
|
+
"span",
|
|
2661
|
+
{
|
|
2662
|
+
className: cn(
|
|
2663
|
+
"inline-flex items-center gap-2 text-[11.5px] font-semibold tracking-[0.08em] uppercase",
|
|
2664
|
+
paused ? "text-foreground/55" : "text-emerald-600"
|
|
2665
|
+
),
|
|
2666
|
+
children: [
|
|
2667
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": true }),
|
|
2668
|
+
label
|
|
2669
|
+
]
|
|
2670
|
+
}
|
|
2671
|
+
),
|
|
2672
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2673
|
+
"div",
|
|
2674
|
+
{
|
|
2675
|
+
className: cn(
|
|
2676
|
+
"font-serif font-semibold text-[30px] tracking-[-0.025em] leading-[1.05]",
|
|
2677
|
+
paused ? "text-foreground/55" : "text-foreground"
|
|
2678
|
+
),
|
|
2679
|
+
children: date
|
|
2680
|
+
}
|
|
2681
|
+
),
|
|
2682
|
+
meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] text-foreground/70 mt-0.5", children: meta })
|
|
2683
|
+
] }),
|
|
2684
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2.5", children: actions })
|
|
2685
|
+
]
|
|
2686
|
+
}
|
|
2687
|
+
),
|
|
2688
|
+
(footnote || rightFootnote) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-3.5 border-t border-dashed border-border bg-muted/30 flex justify-between items-center text-[12px] text-foreground/55", children: [
|
|
2689
|
+
footnote && /* @__PURE__ */ jsxRuntime.jsx("span", { children: footnote }),
|
|
2690
|
+
rightFootnote && /* @__PURE__ */ jsxRuntime.jsx("span", { children: rightFootnote })
|
|
2691
|
+
] })
|
|
2692
|
+
]
|
|
2693
|
+
}
|
|
2694
|
+
);
|
|
2695
|
+
}
|
|
1758
2696
|
var BASE_CLASSES = "inline-flex items-center justify-center gap-2 font-medium text-sm rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
|
|
1759
2697
|
var VARIANT_CLASSES = {
|
|
1760
2698
|
primary: "bg-emerald-600 text-white hover:bg-emerald-700 px-4 py-2.5 border border-transparent",
|
|
@@ -1772,7 +2710,7 @@ function CimplifySignInButton({
|
|
|
1772
2710
|
onError,
|
|
1773
2711
|
...signInOpts
|
|
1774
2712
|
}) {
|
|
1775
|
-
const [busy, setBusy] =
|
|
2713
|
+
const [busy, setBusy] = React12.useState(false);
|
|
1776
2714
|
const onClick = async () => {
|
|
1777
2715
|
if (busy || disabled) return;
|
|
1778
2716
|
setBusy(true);
|
|
@@ -1806,11 +2744,591 @@ function CimplifySignInButton({
|
|
|
1806
2744
|
}
|
|
1807
2745
|
);
|
|
1808
2746
|
}
|
|
2747
|
+
function AccountSignedOutPrompt({
|
|
2748
|
+
eyebrow = "Sign in",
|
|
2749
|
+
title = "Sign in to see your account",
|
|
2750
|
+
description = "Your orders and subscriptions, all in one place.",
|
|
2751
|
+
clientId,
|
|
2752
|
+
redirectUri,
|
|
2753
|
+
lastEmail,
|
|
2754
|
+
onSuccess,
|
|
2755
|
+
className
|
|
2756
|
+
}) {
|
|
2757
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2758
|
+
"div",
|
|
2759
|
+
{
|
|
2760
|
+
"data-cimplify-signed-out": true,
|
|
2761
|
+
className: cn(
|
|
2762
|
+
"min-h-[480px] px-6 pt-24 pb-32",
|
|
2763
|
+
"bg-[radial-gradient(900px_480px_at_50%_0%,color-mix(in_oklch,var(--color-primary)_8%,transparent),transparent_70%),var(--color-background)]",
|
|
2764
|
+
className
|
|
2765
|
+
),
|
|
2766
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[420px] mx-auto p-10 bg-card border border-border rounded-[16px] text-center shadow-[0_1px_0_rgba(0,0,0,0.04),0_16px_48px_rgba(0,0,0,0.08)]", children: [
|
|
2767
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] font-semibold tracking-[0.16em] uppercase text-primary mb-2.5", children: eyebrow }),
|
|
2768
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-serif text-[28px] font-semibold tracking-[-0.025em] leading-[1.15] m-0 mb-3 text-foreground", children: title }),
|
|
2769
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/70 text-sm leading-[1.55] m-0 mb-7", children: description }),
|
|
2770
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2771
|
+
CimplifySignInButton,
|
|
2772
|
+
{
|
|
2773
|
+
clientId,
|
|
2774
|
+
redirectUri,
|
|
2775
|
+
fullWidth: true,
|
|
2776
|
+
onSuccess
|
|
2777
|
+
}
|
|
2778
|
+
),
|
|
2779
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1.5 mt-5 text-[11.5px] text-foreground/55", children: [
|
|
2780
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
2781
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "7", width: "10", height: "7", rx: "1" }),
|
|
2782
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })
|
|
2783
|
+
] }),
|
|
2784
|
+
"One identity for every Cimplify shop"
|
|
2785
|
+
] }),
|
|
2786
|
+
lastEmail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[12.5px] text-foreground/55 mt-4 pt-4 border-t border-border/60", children: [
|
|
2787
|
+
"Returning? Last signed in as ",
|
|
2788
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: lastEmail })
|
|
2789
|
+
] })
|
|
2790
|
+
] })
|
|
2791
|
+
}
|
|
2792
|
+
);
|
|
2793
|
+
}
|
|
2794
|
+
function MobileAccountShell({
|
|
2795
|
+
storeName,
|
|
2796
|
+
leading,
|
|
2797
|
+
trailing,
|
|
2798
|
+
tabBar,
|
|
2799
|
+
children,
|
|
2800
|
+
className
|
|
2801
|
+
}) {
|
|
2802
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2803
|
+
"div",
|
|
2804
|
+
{
|
|
2805
|
+
"data-cimplify-mobile-shell": true,
|
|
2806
|
+
className: cn(
|
|
2807
|
+
"md:hidden flex flex-col min-h-screen bg-background",
|
|
2808
|
+
className
|
|
2809
|
+
),
|
|
2810
|
+
children: [
|
|
2811
|
+
/* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between px-[18px] py-3.5 border-b border-border/60 flex-shrink-0", children: [
|
|
2812
|
+
leading ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9" }),
|
|
2813
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-serif font-semibold text-[17px] tracking-[-0.015em]", children: storeName }),
|
|
2814
|
+
trailing ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9" })
|
|
2815
|
+
] }),
|
|
2816
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-y-auto px-[18px] py-6", children }),
|
|
2817
|
+
tabBar
|
|
2818
|
+
]
|
|
2819
|
+
}
|
|
2820
|
+
);
|
|
2821
|
+
}
|
|
2822
|
+
function MobileTabBar({ items, activeHref, className }) {
|
|
2823
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2824
|
+
"nav",
|
|
2825
|
+
{
|
|
2826
|
+
"data-cimplify-mobile-tabbar": true,
|
|
2827
|
+
"aria-label": "Account",
|
|
2828
|
+
className: cn("grid grid-cols-3 border-t border-border bg-background flex-shrink-0", className),
|
|
2829
|
+
children: items.map((item) => {
|
|
2830
|
+
const active = item.href === activeHref;
|
|
2831
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2832
|
+
"a",
|
|
2833
|
+
{
|
|
2834
|
+
href: item.href,
|
|
2835
|
+
"aria-current": active ? "page" : void 0,
|
|
2836
|
+
className: cn(
|
|
2837
|
+
"flex flex-col items-center gap-1 py-3 pb-3.5 no-underline text-[10.5px] font-medium",
|
|
2838
|
+
active ? "text-primary" : "text-foreground/55"
|
|
2839
|
+
),
|
|
2840
|
+
children: [
|
|
2841
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-5", children: item.icon }),
|
|
2842
|
+
item.label
|
|
2843
|
+
]
|
|
2844
|
+
},
|
|
2845
|
+
item.href
|
|
2846
|
+
);
|
|
2847
|
+
})
|
|
2848
|
+
}
|
|
2849
|
+
);
|
|
2850
|
+
}
|
|
2851
|
+
function MobileBackButton({ href, label = "Back" }) {
|
|
2852
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2853
|
+
"a",
|
|
2854
|
+
{
|
|
2855
|
+
href,
|
|
2856
|
+
className: "inline-flex items-center gap-1 text-foreground/70 text-[13.5px] font-medium no-underline",
|
|
2857
|
+
children: [
|
|
2858
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 2L3.5 6l4 4" }) }),
|
|
2859
|
+
label
|
|
2860
|
+
]
|
|
2861
|
+
}
|
|
2862
|
+
);
|
|
2863
|
+
}
|
|
2864
|
+
function MobileMoreButton({ onClick }) {
|
|
2865
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2866
|
+
"button",
|
|
2867
|
+
{
|
|
2868
|
+
type: "button",
|
|
2869
|
+
onClick,
|
|
2870
|
+
"aria-label": "Menu",
|
|
2871
|
+
className: "size-9 rounded-[12px] bg-card border border-border grid place-items-center text-foreground/70",
|
|
2872
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
2873
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "4", r: "1" }),
|
|
2874
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "1" }),
|
|
2875
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "12", r: "1" })
|
|
2876
|
+
] })
|
|
2877
|
+
}
|
|
2878
|
+
);
|
|
2879
|
+
}
|
|
2880
|
+
var I = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 16 16", ...props });
|
|
2881
|
+
var I20 = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 20 20", ...props });
|
|
2882
|
+
var DashboardIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2883
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "1" }),
|
|
2884
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "2", width: "5", height: "5", rx: "1" }),
|
|
2885
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "9", width: "5", height: "5", rx: "1" }),
|
|
2886
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "1" })
|
|
2887
|
+
] });
|
|
2888
|
+
var OrdersIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2889
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4l5-2 5 2v8l-5 2-5-2V4z" }),
|
|
2890
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4l5 2 5-2M8 6v8" })
|
|
2891
|
+
] });
|
|
2892
|
+
var SubscriptionsIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2893
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 6a5 5 0 1 0-1.5 3.5L13 11" }),
|
|
2894
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 4v3h-3" })
|
|
2895
|
+
] });
|
|
2896
|
+
var IdentityIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2897
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "6", r: "2.5" }),
|
|
2898
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 13.5a4.5 4.5 0 0 1 9 0" })
|
|
2899
|
+
] });
|
|
2900
|
+
var SignOutIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2901
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 3.5h-3v9h3" }),
|
|
2902
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 5l3 3-3 3" }),
|
|
2903
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8H6" })
|
|
2904
|
+
] });
|
|
2905
|
+
var DashboardIcon20 = () => /* @__PURE__ */ jsxRuntime.jsxs(I20, { children: [
|
|
2906
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "6", height: "6", rx: "1" }),
|
|
2907
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "3", width: "6", height: "6", rx: "1" }),
|
|
2908
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "6", height: "6", rx: "1" }),
|
|
2909
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "6", height: "6", rx: "1" })
|
|
2910
|
+
] });
|
|
2911
|
+
var OrdersIcon20 = () => /* @__PURE__ */ jsxRuntime.jsxs(I20, { children: [
|
|
2912
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 5l6-2 6 2v10l-6 2-6-2V5z" }),
|
|
2913
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 5l6 2 6-2M10 7v10" })
|
|
2914
|
+
] });
|
|
2915
|
+
var SubscriptionsIcon20 = () => /* @__PURE__ */ jsxRuntime.jsx(I20, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 8a6 6 0 1 0-1.5 4M16 5v3h-3" }) });
|
|
2916
|
+
var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(I, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M3 8l3.5 3.5L13 5" }) });
|
|
2917
|
+
var OvenIcon = () => /* @__PURE__ */ jsxRuntime.jsx(I, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M3 11h10M3 8l1.5-4.5h7L13 8M5 11v2M11 11v2" }) });
|
|
2918
|
+
var DeliveryTruckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(I, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M2 6h9v6H2zM11 9h2l1 2v1h-3M5 14v-1M11 14v-1" }) });
|
|
2919
|
+
var PackageIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(I, { children: [
|
|
2920
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M3 6l5-3 5 3v6l-5 3-5-3V6z" }),
|
|
2921
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M3 6l5 3 5-3M8 9v6" })
|
|
2922
|
+
] });
|
|
2923
|
+
var BoxIcon24 = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
2924
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6l7-3 7 3v10l-7 3-7-3V6z" }),
|
|
2925
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6l7 3 7-3M12 9v10" })
|
|
2926
|
+
] });
|
|
2927
|
+
function defaultNavItems(opts) {
|
|
2928
|
+
const items = [
|
|
2929
|
+
{ label: "Dashboard", href: "/account", icon: /* @__PURE__ */ jsxRuntime.jsx(DashboardIcon, {}) },
|
|
2930
|
+
{ label: opts.ordersLabel ?? "Orders", href: "/account/orders", icon: /* @__PURE__ */ jsxRuntime.jsx(OrdersIcon, {}) }
|
|
2931
|
+
];
|
|
2932
|
+
if (opts.showSubscriptions !== false) {
|
|
2933
|
+
items.push({
|
|
2934
|
+
label: opts.subscriptionsLabel ?? "Subscriptions",
|
|
2935
|
+
href: "/account/subscriptions",
|
|
2936
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(SubscriptionsIcon, {})
|
|
2937
|
+
});
|
|
2938
|
+
}
|
|
2939
|
+
items.push({ label: "Cimplify identity", href: "https://link.cimplify.io", icon: /* @__PURE__ */ jsxRuntime.jsx(IdentityIcon, {}), external: true });
|
|
2940
|
+
items.push({ label: "Sign out", href: "/auth/signout", icon: /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}) });
|
|
2941
|
+
return items;
|
|
2942
|
+
}
|
|
2943
|
+
function timeOfDayGreeting(name) {
|
|
2944
|
+
if (typeof window === "undefined") return `Hi, ${name}`;
|
|
2945
|
+
const h = (/* @__PURE__ */ new Date()).getHours();
|
|
2946
|
+
if (h < 5) return `Up late, ${name}`;
|
|
2947
|
+
if (h < 12) return `Good morning, ${name}`;
|
|
2948
|
+
if (h < 17) return `Good afternoon, ${name}`;
|
|
2949
|
+
return `Good evening, ${name}`;
|
|
2950
|
+
}
|
|
2951
|
+
function AccountDashboardPage({
|
|
2952
|
+
customerName,
|
|
2953
|
+
customerEmail,
|
|
2954
|
+
customerId,
|
|
2955
|
+
merchantName,
|
|
2956
|
+
nav,
|
|
2957
|
+
activeHref = "/account",
|
|
2958
|
+
scopeNote,
|
|
2959
|
+
greeting,
|
|
2960
|
+
activePane,
|
|
2961
|
+
upcomingPane,
|
|
2962
|
+
continuity,
|
|
2963
|
+
recentOrders,
|
|
2964
|
+
identitySummary,
|
|
2965
|
+
welcomeCta
|
|
2966
|
+
}) {
|
|
2967
|
+
const navItems = nav ?? defaultNavItems({});
|
|
2968
|
+
const hasHero = !!activePane || !!upcomingPane;
|
|
2969
|
+
const hasOrders = !!recentOrders && recentOrders.length > 0;
|
|
2970
|
+
const isNewCustomer = !hasHero && !hasOrders;
|
|
2971
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2972
|
+
AccountShell,
|
|
2973
|
+
{
|
|
2974
|
+
sidebar: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2975
|
+
AccountSidebar,
|
|
2976
|
+
{
|
|
2977
|
+
scopeNote: scopeNote ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
2978
|
+
"Your orders and subscriptions with ",
|
|
2979
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
|
|
2980
|
+
"."
|
|
2981
|
+
] }),
|
|
2982
|
+
children: [
|
|
2983
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
|
|
2984
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountNav, { items: navItems, activeHref })
|
|
2985
|
+
]
|
|
2986
|
+
}
|
|
2987
|
+
),
|
|
2988
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AccountContent, { children: [
|
|
2989
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountHero, { title: greeting ?? timeOfDayGreeting(customerName.split(" ")[0] ?? customerName) }),
|
|
2990
|
+
continuity && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2991
|
+
ContinuityCard,
|
|
2992
|
+
{
|
|
2993
|
+
glyph: continuity.glyph,
|
|
2994
|
+
title: continuity.title,
|
|
2995
|
+
description: continuity.description,
|
|
2996
|
+
badge: continuity.badge
|
|
2997
|
+
}
|
|
2998
|
+
),
|
|
2999
|
+
isNewCustomer ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3000
|
+
WelcomeCard,
|
|
3001
|
+
{
|
|
3002
|
+
title: `Welcome to ${merchantName}`,
|
|
3003
|
+
description: "Your orders and subscriptions will appear here. Start with something fresh?",
|
|
3004
|
+
action: welcomeCta ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", children: "Browse" })
|
|
3005
|
+
}
|
|
3006
|
+
) : hasHero && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3007
|
+
HappeningCard,
|
|
3008
|
+
{
|
|
3009
|
+
left: activePane ? { ...activePane, variant: "live" } : void 0,
|
|
3010
|
+
right: upcomingPane ? { ...upcomingPane, variant: "next" } : void 0
|
|
3011
|
+
}
|
|
3012
|
+
),
|
|
3013
|
+
hasOrders && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3014
|
+
Section,
|
|
3015
|
+
{
|
|
3016
|
+
title: "Recent orders",
|
|
3017
|
+
action: /* @__PURE__ */ jsxRuntime.jsx(SectionMore, { href: "/account/orders", children: "View all \u2192" }),
|
|
3018
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(OrderList, { orders: recentOrders })
|
|
3019
|
+
}
|
|
3020
|
+
),
|
|
3021
|
+
/* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Identity", children: /* @__PURE__ */ jsxRuntime.jsx(IdentityOfframp, { summary: identitySummary }) })
|
|
3022
|
+
] })
|
|
3023
|
+
}
|
|
3024
|
+
);
|
|
3025
|
+
}
|
|
3026
|
+
function AccountOrdersPage({
|
|
3027
|
+
customerName,
|
|
3028
|
+
customerEmail,
|
|
3029
|
+
customerId,
|
|
3030
|
+
merchantName,
|
|
3031
|
+
nav,
|
|
3032
|
+
activeHref = "/account/orders",
|
|
3033
|
+
scopeNote,
|
|
3034
|
+
title = "Orders",
|
|
3035
|
+
description,
|
|
3036
|
+
orders,
|
|
3037
|
+
filterTabs,
|
|
3038
|
+
loadMore,
|
|
3039
|
+
emptyAction,
|
|
3040
|
+
emptyTitle = "No orders yet",
|
|
3041
|
+
emptyDescription
|
|
3042
|
+
}) {
|
|
3043
|
+
const navItems = nav ?? defaultNavItems({});
|
|
3044
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3045
|
+
AccountShell,
|
|
3046
|
+
{
|
|
3047
|
+
sidebar: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3048
|
+
AccountSidebar,
|
|
3049
|
+
{
|
|
3050
|
+
scopeNote: scopeNote ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3051
|
+
"Your activity with ",
|
|
3052
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
|
|
3053
|
+
"."
|
|
3054
|
+
] }),
|
|
3055
|
+
children: [
|
|
3056
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
|
|
3057
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountNav, { items: navItems, activeHref })
|
|
3058
|
+
]
|
|
3059
|
+
}
|
|
3060
|
+
),
|
|
3061
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AccountContent, { children: [
|
|
3062
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3063
|
+
AccountHero,
|
|
3064
|
+
{
|
|
3065
|
+
title,
|
|
3066
|
+
subtitle: description ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3067
|
+
orders.length,
|
|
3068
|
+
" orders with ",
|
|
3069
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: merchantName }),
|
|
3070
|
+
"."
|
|
3071
|
+
] })
|
|
3072
|
+
}
|
|
3073
|
+
),
|
|
3074
|
+
orders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3075
|
+
filterTabs,
|
|
3076
|
+
/* @__PURE__ */ jsxRuntime.jsx(OrderList, { orders }),
|
|
3077
|
+
loadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mt-8", children: loadMore })
|
|
3078
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3079
|
+
EmptyState,
|
|
3080
|
+
{
|
|
3081
|
+
glyph: /* @__PURE__ */ jsxRuntime.jsx(BoxIcon24, {}),
|
|
3082
|
+
title: emptyTitle,
|
|
3083
|
+
description: emptyDescription ?? `Your first order from ${merchantName} will show up here.`,
|
|
3084
|
+
action: emptyAction
|
|
3085
|
+
}
|
|
3086
|
+
)
|
|
3087
|
+
] })
|
|
3088
|
+
}
|
|
3089
|
+
);
|
|
3090
|
+
}
|
|
3091
|
+
function AccountOrderDetailPage({
|
|
3092
|
+
customerName,
|
|
3093
|
+
customerEmail,
|
|
3094
|
+
customerId,
|
|
3095
|
+
merchantName,
|
|
3096
|
+
nav,
|
|
3097
|
+
activeHref = "/account/orders",
|
|
3098
|
+
scopeNote,
|
|
3099
|
+
title,
|
|
3100
|
+
metaText,
|
|
3101
|
+
orderId,
|
|
3102
|
+
status,
|
|
3103
|
+
timelineSteps,
|
|
3104
|
+
itemsTitle = "Items",
|
|
3105
|
+
itemsRightLabel,
|
|
3106
|
+
items,
|
|
3107
|
+
totals,
|
|
3108
|
+
contextRows,
|
|
3109
|
+
primaryAction,
|
|
3110
|
+
secondaryAction,
|
|
3111
|
+
continuity
|
|
3112
|
+
}) {
|
|
3113
|
+
const navItems = nav ?? defaultNavItems({});
|
|
3114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3115
|
+
AccountShell,
|
|
3116
|
+
{
|
|
3117
|
+
sidebar: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3118
|
+
AccountSidebar,
|
|
3119
|
+
{
|
|
3120
|
+
scopeNote: scopeNote ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3121
|
+
"Your activity with ",
|
|
3122
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
|
|
3123
|
+
"."
|
|
3124
|
+
] }),
|
|
3125
|
+
children: [
|
|
3126
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
|
|
3127
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountNav, { items: navItems, activeHref })
|
|
3128
|
+
]
|
|
3129
|
+
}
|
|
3130
|
+
),
|
|
3131
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AccountContent, { children: [
|
|
3132
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "/account/orders", className: "text-foreground/55 text-[13px] no-underline hover:text-primary inline-block mb-7", children: "\u2190 All orders" }),
|
|
3133
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3134
|
+
OrderDetailHeader,
|
|
3135
|
+
{
|
|
3136
|
+
title,
|
|
3137
|
+
meta: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3138
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: metaText }),
|
|
3139
|
+
/* @__PURE__ */ jsxRuntime.jsx(OrderDetailMetaPipe, {}),
|
|
3140
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-[11.5px]", children: [
|
|
3141
|
+
"#",
|
|
3142
|
+
orderId
|
|
3143
|
+
] }),
|
|
3144
|
+
/* @__PURE__ */ jsxRuntime.jsx(OrderDetailMetaPipe, {}),
|
|
3145
|
+
/* @__PURE__ */ jsxRuntime.jsx(Status, { status })
|
|
3146
|
+
] })
|
|
3147
|
+
}
|
|
3148
|
+
),
|
|
3149
|
+
continuity && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3150
|
+
ContinuityCard,
|
|
3151
|
+
{
|
|
3152
|
+
glyph: continuity.glyph,
|
|
3153
|
+
title: continuity.title,
|
|
3154
|
+
description: continuity.description,
|
|
3155
|
+
className: "mt-0 mb-6"
|
|
3156
|
+
}
|
|
3157
|
+
),
|
|
3158
|
+
/* @__PURE__ */ jsxRuntime.jsx(OrderTimeline, { steps: timelineSteps }),
|
|
3159
|
+
/* @__PURE__ */ jsxRuntime.jsx(ItemsCard, { title: itemsTitle, rightLabel: itemsRightLabel, items, totals, className: "mb-4" }),
|
|
3160
|
+
contextRows && contextRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3161
|
+
ContextCard,
|
|
3162
|
+
{
|
|
3163
|
+
rows: contextRows.map((r) => ({
|
|
3164
|
+
label: r.label,
|
|
3165
|
+
value: r.value,
|
|
3166
|
+
manageHref: r.manageHref,
|
|
3167
|
+
manageLabel: "Manage"
|
|
3168
|
+
}))
|
|
3169
|
+
}
|
|
3170
|
+
),
|
|
3171
|
+
(primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 mt-8", children: [
|
|
3172
|
+
primaryAction,
|
|
3173
|
+
secondaryAction
|
|
3174
|
+
] })
|
|
3175
|
+
] })
|
|
3176
|
+
}
|
|
3177
|
+
);
|
|
3178
|
+
}
|
|
3179
|
+
function AccountSubscriptionsPage({
|
|
3180
|
+
customerName,
|
|
3181
|
+
customerEmail,
|
|
3182
|
+
customerId,
|
|
3183
|
+
merchantName,
|
|
3184
|
+
nav,
|
|
3185
|
+
activeHref = "/account/subscriptions",
|
|
3186
|
+
scopeNote,
|
|
3187
|
+
active,
|
|
3188
|
+
paused,
|
|
3189
|
+
past,
|
|
3190
|
+
emptyAction,
|
|
3191
|
+
emptyTitle = "No subscriptions yet",
|
|
3192
|
+
emptyDescription
|
|
3193
|
+
}) {
|
|
3194
|
+
const navItems = nav ?? defaultNavItems({});
|
|
3195
|
+
const isEmpty = (!active || active.length === 0) && (!paused || paused.length === 0) && (!past || past.length === 0);
|
|
3196
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3197
|
+
AccountShell,
|
|
3198
|
+
{
|
|
3199
|
+
sidebar: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3200
|
+
AccountSidebar,
|
|
3201
|
+
{
|
|
3202
|
+
scopeNote: scopeNote ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3203
|
+
"Your activity with ",
|
|
3204
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
|
|
3205
|
+
"."
|
|
3206
|
+
] }),
|
|
3207
|
+
children: [
|
|
3208
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
|
|
3209
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountNav, { items: navItems, activeHref })
|
|
3210
|
+
]
|
|
3211
|
+
}
|
|
3212
|
+
),
|
|
3213
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AccountContent, { children: [
|
|
3214
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3215
|
+
AccountHero,
|
|
3216
|
+
{
|
|
3217
|
+
title: "Subscriptions",
|
|
3218
|
+
subtitle: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3219
|
+
"Recurring orders from ",
|
|
3220
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: merchantName }),
|
|
3221
|
+
"."
|
|
3222
|
+
] })
|
|
3223
|
+
}
|
|
3224
|
+
),
|
|
3225
|
+
isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3226
|
+
EmptyState,
|
|
3227
|
+
{
|
|
3228
|
+
title: emptyTitle,
|
|
3229
|
+
description: emptyDescription ?? `Set up a recurring delivery from ${merchantName} and it'll show up here.`,
|
|
3230
|
+
action: emptyAction
|
|
3231
|
+
}
|
|
3232
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3233
|
+
active && active.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Active", meta: `${active.length}`, children: /* @__PURE__ */ jsxRuntime.jsx(SubscriptionList, { subscriptions: active }) }),
|
|
3234
|
+
paused && paused.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Paused", meta: `${paused.length}`, children: /* @__PURE__ */ jsxRuntime.jsx(SubscriptionList, { subscriptions: paused }) }),
|
|
3235
|
+
past && past.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Past", meta: `${past.length}`, children: /* @__PURE__ */ jsxRuntime.jsx(SubscriptionList, { subscriptions: past }) })
|
|
3236
|
+
] })
|
|
3237
|
+
] })
|
|
3238
|
+
}
|
|
3239
|
+
);
|
|
3240
|
+
}
|
|
3241
|
+
function AccountSubscriptionDetailPage({
|
|
3242
|
+
customerName,
|
|
3243
|
+
customerEmail,
|
|
3244
|
+
customerId,
|
|
3245
|
+
merchantName,
|
|
3246
|
+
nav,
|
|
3247
|
+
activeHref = "/account/subscriptions",
|
|
3248
|
+
scopeNote,
|
|
3249
|
+
title,
|
|
3250
|
+
metaText,
|
|
3251
|
+
status,
|
|
3252
|
+
paused,
|
|
3253
|
+
nextDeliveryLabel,
|
|
3254
|
+
nextDeliveryDate,
|
|
3255
|
+
nextDeliveryMeta,
|
|
3256
|
+
nextDeliveryActions,
|
|
3257
|
+
nextDeliveryFootnote,
|
|
3258
|
+
nextDeliveryRightFootnote,
|
|
3259
|
+
itemsTitle = "What's in each delivery",
|
|
3260
|
+
items,
|
|
3261
|
+
totals,
|
|
3262
|
+
contextRows,
|
|
3263
|
+
toast,
|
|
3264
|
+
cancelAction
|
|
3265
|
+
}) {
|
|
3266
|
+
const navItems = nav ?? defaultNavItems({});
|
|
3267
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3268
|
+
AccountShell,
|
|
3269
|
+
{
|
|
3270
|
+
sidebar: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3271
|
+
AccountSidebar,
|
|
3272
|
+
{
|
|
3273
|
+
scopeNote: scopeNote ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3274
|
+
"Your activity with ",
|
|
3275
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground font-semibold", children: merchantName }),
|
|
3276
|
+
"."
|
|
3277
|
+
] }),
|
|
3278
|
+
children: [
|
|
3279
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountIdentityStrip, { name: customerName, email: customerEmail, customerId }),
|
|
3280
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccountNav, { items: navItems, activeHref })
|
|
3281
|
+
]
|
|
3282
|
+
}
|
|
3283
|
+
),
|
|
3284
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AccountContent, { children: [
|
|
3285
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "/account/subscriptions", className: "text-foreground/55 text-[13px] no-underline hover:text-primary inline-block mb-7", children: "\u2190 All subscriptions" }),
|
|
3286
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3287
|
+
OrderDetailHeader,
|
|
3288
|
+
{
|
|
3289
|
+
title,
|
|
3290
|
+
meta: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3291
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: metaText }),
|
|
3292
|
+
/* @__PURE__ */ jsxRuntime.jsx(OrderDetailMetaPipe, {}),
|
|
3293
|
+
/* @__PURE__ */ jsxRuntime.jsx(Status, { status })
|
|
3294
|
+
] })
|
|
3295
|
+
}
|
|
3296
|
+
),
|
|
3297
|
+
toast,
|
|
3298
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3299
|
+
NextDeliveryCard,
|
|
3300
|
+
{
|
|
3301
|
+
label: nextDeliveryLabel,
|
|
3302
|
+
date: nextDeliveryDate,
|
|
3303
|
+
meta: nextDeliveryMeta,
|
|
3304
|
+
actions: nextDeliveryActions,
|
|
3305
|
+
footnote: nextDeliveryFootnote,
|
|
3306
|
+
rightFootnote: nextDeliveryRightFootnote,
|
|
3307
|
+
paused
|
|
3308
|
+
}
|
|
3309
|
+
),
|
|
3310
|
+
/* @__PURE__ */ jsxRuntime.jsx(ItemsCard, { title: itemsTitle, items, totals, className: "mb-4" }),
|
|
3311
|
+
contextRows && contextRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3312
|
+
ContextCard,
|
|
3313
|
+
{
|
|
3314
|
+
rows: contextRows.map((r) => ({
|
|
3315
|
+
label: r.label,
|
|
3316
|
+
value: r.value,
|
|
3317
|
+
manageHref: r.manageHref,
|
|
3318
|
+
manageLabel: "Manage"
|
|
3319
|
+
}))
|
|
3320
|
+
}
|
|
3321
|
+
),
|
|
3322
|
+
cancelAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-9 pt-7 border-t border-border", children: cancelAction })
|
|
3323
|
+
] })
|
|
3324
|
+
}
|
|
3325
|
+
);
|
|
3326
|
+
}
|
|
1809
3327
|
function useCimplifySession(options) {
|
|
1810
3328
|
const sessionUri = options?.sessionUri ?? "/auth/session";
|
|
1811
|
-
const [session, setSession] =
|
|
1812
|
-
const [loading, setLoading] =
|
|
1813
|
-
const fetchSession =
|
|
3329
|
+
const [session, setSession] = React12.useState(null);
|
|
3330
|
+
const [loading, setLoading] = React12.useState(true);
|
|
3331
|
+
const fetchSession = React12.useCallback(async () => {
|
|
1814
3332
|
setLoading(true);
|
|
1815
3333
|
try {
|
|
1816
3334
|
const res = await fetch(sessionUri, { credentials: "include" });
|
|
@@ -1826,7 +3344,7 @@ function useCimplifySession(options) {
|
|
|
1826
3344
|
setLoading(false);
|
|
1827
3345
|
}
|
|
1828
3346
|
}, [sessionUri]);
|
|
1829
|
-
|
|
3347
|
+
React12.useEffect(() => {
|
|
1830
3348
|
void fetchSession();
|
|
1831
3349
|
}, [fetchSession]);
|
|
1832
3350
|
return { session, loading, refresh: fetchSession };
|
|
@@ -1865,9 +3383,9 @@ function createCachedQuery(config) {
|
|
|
1865
3383
|
}
|
|
1866
3384
|
const enabled = options.enabled ?? true;
|
|
1867
3385
|
const locationId = client.getLocationId();
|
|
1868
|
-
const previousLocationRef =
|
|
1869
|
-
const requestIdRef =
|
|
1870
|
-
const optionsRef =
|
|
3386
|
+
const previousLocationRef = React12.useRef(locationId);
|
|
3387
|
+
const requestIdRef = React12.useRef(0);
|
|
3388
|
+
const optionsRef = React12.useRef(options);
|
|
1871
3389
|
optionsRef.current = options;
|
|
1872
3390
|
if (config.locationSensitive && previousLocationRef.current !== locationId) {
|
|
1873
3391
|
cache.clear();
|
|
@@ -1877,10 +3395,10 @@ function createCachedQuery(config) {
|
|
|
1877
3395
|
sweep();
|
|
1878
3396
|
const cacheKey2 = config.key(client, options);
|
|
1879
3397
|
const cached = cache.get(cacheKey2);
|
|
1880
|
-
const [data, setData] =
|
|
1881
|
-
const [isLoading, setIsLoading] =
|
|
1882
|
-
const [error, setError] =
|
|
1883
|
-
const load =
|
|
3398
|
+
const [data, setData] = React12.useState(cached?.data ?? null);
|
|
3399
|
+
const [isLoading, setIsLoading] = React12.useState(enabled && !cached);
|
|
3400
|
+
const [error, setError] = React12.useState(null);
|
|
3401
|
+
const load = React12.useCallback(
|
|
1884
3402
|
async (force = false) => {
|
|
1885
3403
|
if (!enabled) {
|
|
1886
3404
|
setIsLoading(false);
|
|
@@ -1923,10 +3441,10 @@ function createCachedQuery(config) {
|
|
|
1923
3441
|
},
|
|
1924
3442
|
[cacheKey2, client, enabled]
|
|
1925
3443
|
);
|
|
1926
|
-
|
|
3444
|
+
React12.useEffect(() => {
|
|
1927
3445
|
void load(false);
|
|
1928
3446
|
}, [load]);
|
|
1929
|
-
const refetch =
|
|
3447
|
+
const refetch = React12.useCallback(async () => {
|
|
1930
3448
|
cache.delete(cacheKey2);
|
|
1931
3449
|
await load(true);
|
|
1932
3450
|
}, [cacheKey2, load]);
|
|
@@ -2056,25 +3574,25 @@ function useOrder(orderId, options = {}) {
|
|
|
2056
3574
|
if (!client) {
|
|
2057
3575
|
throw new Error("useOrder must be used within CimplifyProvider or passed { client }.");
|
|
2058
3576
|
}
|
|
2059
|
-
const normalizedOrderId =
|
|
3577
|
+
const normalizedOrderId = React12.useMemo(() => (orderId || "").trim(), [orderId]);
|
|
2060
3578
|
const enabled = options.enabled ?? true;
|
|
2061
3579
|
const poll = options.poll ?? false;
|
|
2062
3580
|
const pollInterval = options.pollInterval ?? 5e3;
|
|
2063
|
-
const requestIdRef =
|
|
2064
|
-
const previousStatusRef =
|
|
2065
|
-
const onStatusChangeRef =
|
|
3581
|
+
const requestIdRef = React12.useRef(0);
|
|
3582
|
+
const previousStatusRef = React12.useRef(null);
|
|
3583
|
+
const onStatusChangeRef = React12.useRef(options.onStatusChange);
|
|
2066
3584
|
onStatusChangeRef.current = options.onStatusChange;
|
|
2067
|
-
const cacheKey2 =
|
|
3585
|
+
const cacheKey2 = React12.useMemo(
|
|
2068
3586
|
() => buildOrderCacheKey(client, normalizedOrderId),
|
|
2069
3587
|
[client, normalizedOrderId]
|
|
2070
3588
|
);
|
|
2071
3589
|
const cached = orderCache.get(cacheKey2);
|
|
2072
|
-
const [order, setOrder] =
|
|
2073
|
-
const [isLoading, setIsLoading] =
|
|
3590
|
+
const [order, setOrder] = React12.useState(cached?.order ?? null);
|
|
3591
|
+
const [isLoading, setIsLoading] = React12.useState(
|
|
2074
3592
|
enabled && normalizedOrderId.length > 0 && !cached
|
|
2075
3593
|
);
|
|
2076
|
-
const [error, setError] =
|
|
2077
|
-
const load =
|
|
3594
|
+
const [error, setError] = React12.useState(null);
|
|
3595
|
+
const load = React12.useCallback(
|
|
2078
3596
|
async (force = false) => {
|
|
2079
3597
|
if (!enabled || normalizedOrderId.length === 0) {
|
|
2080
3598
|
setOrder(null);
|
|
@@ -2133,11 +3651,11 @@ function useOrder(orderId, options = {}) {
|
|
|
2133
3651
|
},
|
|
2134
3652
|
[cacheKey2, client, enabled, normalizedOrderId]
|
|
2135
3653
|
);
|
|
2136
|
-
|
|
3654
|
+
React12.useEffect(() => {
|
|
2137
3655
|
void load(false);
|
|
2138
3656
|
}, [load]);
|
|
2139
3657
|
const isTerminal = order ? TERMINAL_STATUSES.has(order.status) : false;
|
|
2140
|
-
|
|
3658
|
+
React12.useEffect(() => {
|
|
2141
3659
|
if (!poll || !enabled || normalizedOrderId.length === 0 || isTerminal) {
|
|
2142
3660
|
return;
|
|
2143
3661
|
}
|
|
@@ -2148,7 +3666,7 @@ function useOrder(orderId, options = {}) {
|
|
|
2148
3666
|
window.clearInterval(timer);
|
|
2149
3667
|
};
|
|
2150
3668
|
}, [enabled, isTerminal, load, normalizedOrderId, poll, pollInterval]);
|
|
2151
|
-
const refetch =
|
|
3669
|
+
const refetch = React12.useCallback(async () => {
|
|
2152
3670
|
orderCache.delete(cacheKey2);
|
|
2153
3671
|
await load(true);
|
|
2154
3672
|
}, [cacheKey2, load]);
|
|
@@ -2199,10 +3717,10 @@ function useLocations(options = {}) {
|
|
|
2199
3717
|
};
|
|
2200
3718
|
}
|
|
2201
3719
|
const client = options.client;
|
|
2202
|
-
const [locations, setLocations] =
|
|
2203
|
-
const [currentLocation, setCurrentLocationState] =
|
|
2204
|
-
const [isLoading, setIsLoading] =
|
|
2205
|
-
const setCurrentLocation =
|
|
3720
|
+
const [locations, setLocations] = React12.useState([]);
|
|
3721
|
+
const [currentLocation, setCurrentLocationState] = React12.useState(null);
|
|
3722
|
+
const [isLoading, setIsLoading] = React12.useState(true);
|
|
3723
|
+
const setCurrentLocation = React12.useCallback(
|
|
2206
3724
|
(location) => {
|
|
2207
3725
|
setCurrentLocationState(location);
|
|
2208
3726
|
if (client) {
|
|
@@ -2212,7 +3730,7 @@ function useLocations(options = {}) {
|
|
|
2212
3730
|
},
|
|
2213
3731
|
[client]
|
|
2214
3732
|
);
|
|
2215
|
-
|
|
3733
|
+
React12.useEffect(() => {
|
|
2216
3734
|
if (!client) {
|
|
2217
3735
|
setLocations([]);
|
|
2218
3736
|
setCurrentLocationState(null);
|
|
@@ -2316,14 +3834,14 @@ function useSearch(options = {}) {
|
|
|
2316
3834
|
const minLength = Math.max(0, options.minLength ?? 2);
|
|
2317
3835
|
const debounceMs = Math.max(0, options.debounceMs ?? 300);
|
|
2318
3836
|
const limit = Math.max(1, options.limit ?? 20);
|
|
2319
|
-
const [query, setQueryState] =
|
|
2320
|
-
const [results, setResults] =
|
|
2321
|
-
const [isLoading, setIsLoading] =
|
|
2322
|
-
const [error, setError] =
|
|
2323
|
-
const requestIdRef =
|
|
2324
|
-
const timerRef =
|
|
3837
|
+
const [query, setQueryState] = React12.useState("");
|
|
3838
|
+
const [results, setResults] = React12.useState([]);
|
|
3839
|
+
const [isLoading, setIsLoading] = React12.useState(false);
|
|
3840
|
+
const [error, setError] = React12.useState(null);
|
|
3841
|
+
const requestIdRef = React12.useRef(0);
|
|
3842
|
+
const timerRef = React12.useRef(null);
|
|
2325
3843
|
const tagsSignature = options.tags?.join(",") ?? "";
|
|
2326
|
-
|
|
3844
|
+
React12.useEffect(() => {
|
|
2327
3845
|
if (timerRef.current) {
|
|
2328
3846
|
clearTimeout(timerRef.current);
|
|
2329
3847
|
timerRef.current = null;
|
|
@@ -2378,10 +3896,10 @@ function useSearch(options = {}) {
|
|
|
2378
3896
|
}
|
|
2379
3897
|
};
|
|
2380
3898
|
}, [client, debounceMs, limit, minLength, options.category, options.taxonomy, tagsSignature, options.featured, options.in_stock, options.min_price, options.max_price, options.sort_by, options.sort_order, query]);
|
|
2381
|
-
const setQuery =
|
|
3899
|
+
const setQuery = React12.useCallback((nextQuery) => {
|
|
2382
3900
|
setQueryState(nextQuery);
|
|
2383
3901
|
}, []);
|
|
2384
|
-
const clear =
|
|
3902
|
+
const clear = React12.useCallback(() => {
|
|
2385
3903
|
requestIdRef.current += 1;
|
|
2386
3904
|
if (timerRef.current) {
|
|
2387
3905
|
clearTimeout(timerRef.current);
|
|
@@ -2472,34 +3990,34 @@ function useQuote(input, options = {}) {
|
|
|
2472
3990
|
const autoRefresh = options.autoRefresh ?? true;
|
|
2473
3991
|
const refreshBeforeExpiryMs = Math.max(0, options.refreshBeforeExpiryMs ?? 3e4);
|
|
2474
3992
|
const locationId = client.getLocationId();
|
|
2475
|
-
const requestIdRef =
|
|
2476
|
-
const debounceTimerRef =
|
|
3993
|
+
const requestIdRef = React12.useRef(0);
|
|
3994
|
+
const debounceTimerRef = React12.useRef(null);
|
|
2477
3995
|
const inputSignature = buildQuoteInputSignature(input);
|
|
2478
|
-
const normalizedInput =
|
|
3996
|
+
const normalizedInput = React12.useMemo(() => {
|
|
2479
3997
|
if (!input) {
|
|
2480
3998
|
return null;
|
|
2481
3999
|
}
|
|
2482
4000
|
const normalized = normalizeInput(input, locationId);
|
|
2483
4001
|
return normalized.product_id.length > 0 ? normalized : null;
|
|
2484
4002
|
}, [inputSignature, locationId]);
|
|
2485
|
-
const cacheKey2 =
|
|
4003
|
+
const cacheKey2 = React12.useMemo(
|
|
2486
4004
|
() => buildQuoteCacheKey(client, locationId, inputSignature),
|
|
2487
4005
|
[client, inputSignature, locationId]
|
|
2488
4006
|
);
|
|
2489
4007
|
const cached = quoteCache.get(cacheKey2);
|
|
2490
|
-
const [quote, setQuote] =
|
|
2491
|
-
const [isLoading, setIsLoading] =
|
|
2492
|
-
const [error, setError] =
|
|
2493
|
-
const [isExpired, setIsExpired] =
|
|
2494
|
-
const [messages, setMessages] =
|
|
2495
|
-
const quoteExpiryTimestamp =
|
|
4008
|
+
const [quote, setQuote] = React12.useState(cached?.quote ?? null);
|
|
4009
|
+
const [isLoading, setIsLoading] = React12.useState(enabled && normalizedInput !== null && !cached);
|
|
4010
|
+
const [error, setError] = React12.useState(null);
|
|
4011
|
+
const [isExpired, setIsExpired] = React12.useState(isQuoteExpired(cached?.quote ?? null));
|
|
4012
|
+
const [messages, setMessages] = React12.useState(cached?.quote?.ui_messages ?? []);
|
|
4013
|
+
const quoteExpiryTimestamp = React12.useMemo(() => {
|
|
2496
4014
|
if (!quote?.expires_at) {
|
|
2497
4015
|
return Number.NaN;
|
|
2498
4016
|
}
|
|
2499
4017
|
const expiresAt = Date.parse(quote.expires_at);
|
|
2500
4018
|
return Number.isFinite(expiresAt) ? expiresAt : Number.NaN;
|
|
2501
4019
|
}, [quote?.expires_at]);
|
|
2502
|
-
const load =
|
|
4020
|
+
const load = React12.useCallback(
|
|
2503
4021
|
async (force = false) => {
|
|
2504
4022
|
if (!enabled || !normalizedInput) {
|
|
2505
4023
|
setQuote(null);
|
|
@@ -2559,7 +4077,7 @@ function useQuote(input, options = {}) {
|
|
|
2559
4077
|
},
|
|
2560
4078
|
[cacheKey2, client, enabled, normalizedInput]
|
|
2561
4079
|
);
|
|
2562
|
-
|
|
4080
|
+
React12.useEffect(() => {
|
|
2563
4081
|
if (debounceTimerRef.current) {
|
|
2564
4082
|
clearTimeout(debounceTimerRef.current);
|
|
2565
4083
|
}
|
|
@@ -2578,7 +4096,7 @@ function useQuote(input, options = {}) {
|
|
|
2578
4096
|
}
|
|
2579
4097
|
};
|
|
2580
4098
|
}, [load, cacheKey2, enabled, normalizedInput]);
|
|
2581
|
-
const refresh =
|
|
4099
|
+
const refresh = React12.useCallback(async () => {
|
|
2582
4100
|
if (!enabled || !normalizedInput) {
|
|
2583
4101
|
return;
|
|
2584
4102
|
}
|
|
@@ -2615,7 +4133,7 @@ function useQuote(input, options = {}) {
|
|
|
2615
4133
|
}
|
|
2616
4134
|
}
|
|
2617
4135
|
}, [cacheKey2, client, enabled, load, normalizedInput, quote]);
|
|
2618
|
-
|
|
4136
|
+
React12.useEffect(() => {
|
|
2619
4137
|
if (!Number.isFinite(quoteExpiryTimestamp)) {
|
|
2620
4138
|
setIsExpired(false);
|
|
2621
4139
|
return;
|
|
@@ -2791,9 +4309,9 @@ function useValidateDiscount(options = {}) {
|
|
|
2791
4309
|
if (!client) {
|
|
2792
4310
|
throw new Error("useValidateDiscount must be used within CimplifyProvider or passed { client }.");
|
|
2793
4311
|
}
|
|
2794
|
-
const [isValidating, setIsValidating] =
|
|
2795
|
-
const [error, setError] =
|
|
2796
|
-
const validate =
|
|
4312
|
+
const [isValidating, setIsValidating] = React12.useState(false);
|
|
4313
|
+
const [error, setError] = React12.useState(null);
|
|
4314
|
+
const validate = React12.useCallback(
|
|
2797
4315
|
async (code, orderSubtotal, locationId) => {
|
|
2798
4316
|
setError(null);
|
|
2799
4317
|
setIsValidating(true);
|
|
@@ -2840,7 +4358,7 @@ function useProductPrice(input) {
|
|
|
2840
4358
|
compositePrice,
|
|
2841
4359
|
bundleTotalPrice
|
|
2842
4360
|
} = input;
|
|
2843
|
-
return
|
|
4361
|
+
return React12.useMemo(() => {
|
|
2844
4362
|
let unitPrice;
|
|
2845
4363
|
if (bundleTotalPrice != null) {
|
|
2846
4364
|
unitPrice = bundleTotalPrice;
|
|
@@ -2889,10 +4407,10 @@ function useOrders(options = {}) {
|
|
|
2889
4407
|
function useSubscriptions(options = {}) {
|
|
2890
4408
|
const { client } = useCimplifyClient();
|
|
2891
4409
|
const { status, enabled = true } = options;
|
|
2892
|
-
const [subscriptions, setSubscriptions] =
|
|
2893
|
-
const [isLoading, setIsLoading] =
|
|
2894
|
-
const [error, setError] =
|
|
2895
|
-
const fetch2 =
|
|
4410
|
+
const [subscriptions, setSubscriptions] = React12.useState([]);
|
|
4411
|
+
const [isLoading, setIsLoading] = React12.useState(false);
|
|
4412
|
+
const [error, setError] = React12.useState(null);
|
|
4413
|
+
const fetch2 = React12.useCallback(async () => {
|
|
2896
4414
|
if (!enabled) return;
|
|
2897
4415
|
setIsLoading(true);
|
|
2898
4416
|
setError(null);
|
|
@@ -2910,7 +4428,7 @@ function useSubscriptions(options = {}) {
|
|
|
2910
4428
|
setIsLoading(false);
|
|
2911
4429
|
}
|
|
2912
4430
|
}, [client, enabled, status]);
|
|
2913
|
-
|
|
4431
|
+
React12.useEffect(() => {
|
|
2914
4432
|
void fetch2();
|
|
2915
4433
|
}, [fetch2]);
|
|
2916
4434
|
return { subscriptions, isLoading, error, refetch: fetch2 };
|
|
@@ -2919,10 +4437,10 @@ function useSubscription(id, options = {}) {
|
|
|
2919
4437
|
const { client } = useCimplifyClient();
|
|
2920
4438
|
const { enabled = true } = options;
|
|
2921
4439
|
const normalizedId = (id || "").trim();
|
|
2922
|
-
const [subscription, setSubscription] =
|
|
2923
|
-
const [isLoading, setIsLoading] =
|
|
2924
|
-
const [error, setError] =
|
|
2925
|
-
const fetch2 =
|
|
4440
|
+
const [subscription, setSubscription] = React12.useState(null);
|
|
4441
|
+
const [isLoading, setIsLoading] = React12.useState(false);
|
|
4442
|
+
const [error, setError] = React12.useState(null);
|
|
4443
|
+
const fetch2 = React12.useCallback(async () => {
|
|
2926
4444
|
if (!enabled || !normalizedId) return;
|
|
2927
4445
|
setIsLoading(true);
|
|
2928
4446
|
setError(null);
|
|
@@ -2939,25 +4457,25 @@ function useSubscription(id, options = {}) {
|
|
|
2939
4457
|
setIsLoading(false);
|
|
2940
4458
|
}
|
|
2941
4459
|
}, [client, enabled, normalizedId]);
|
|
2942
|
-
|
|
4460
|
+
React12.useEffect(() => {
|
|
2943
4461
|
void fetch2();
|
|
2944
4462
|
}, [fetch2]);
|
|
2945
|
-
const cancel =
|
|
4463
|
+
const cancel = React12.useCallback(async (reason) => {
|
|
2946
4464
|
if (!normalizedId) return;
|
|
2947
4465
|
await client.subscriptions.cancel(normalizedId, reason);
|
|
2948
4466
|
void fetch2();
|
|
2949
4467
|
}, [client, normalizedId, fetch2]);
|
|
2950
|
-
const pause =
|
|
4468
|
+
const pause = React12.useCallback(async () => {
|
|
2951
4469
|
if (!normalizedId) return;
|
|
2952
4470
|
await client.subscriptions.pause(normalizedId);
|
|
2953
4471
|
void fetch2();
|
|
2954
4472
|
}, [client, normalizedId, fetch2]);
|
|
2955
|
-
const resume =
|
|
4473
|
+
const resume = React12.useCallback(async () => {
|
|
2956
4474
|
if (!normalizedId) return;
|
|
2957
4475
|
await client.subscriptions.resume(normalizedId);
|
|
2958
4476
|
void fetch2();
|
|
2959
4477
|
}, [client, normalizedId, fetch2]);
|
|
2960
|
-
const skipNext =
|
|
4478
|
+
const skipNext = React12.useCallback(async () => {
|
|
2961
4479
|
if (!normalizedId) return;
|
|
2962
4480
|
await client.subscriptions.skipNextRenewal(normalizedId);
|
|
2963
4481
|
void fetch2();
|
|
@@ -3061,7 +4579,7 @@ function useBookings(options = {}) {
|
|
|
3061
4579
|
const context = useOptionalCimplifyClient();
|
|
3062
4580
|
const client = options.client ?? context?.client;
|
|
3063
4581
|
const { data, isLoading, error, refetch } = bookingsQuery(options);
|
|
3064
|
-
const cancelBooking =
|
|
4582
|
+
const cancelBooking = React12.useCallback(
|
|
3065
4583
|
async (bookingId, reason) => {
|
|
3066
4584
|
if (!client) throw new Error("useBookings must be used within CimplifyProvider or passed { client }.");
|
|
3067
4585
|
const result = await client.scheduling.cancelBooking({
|
|
@@ -3117,14 +4635,14 @@ function useBillingPlans(productId, options = {}) {
|
|
|
3117
4635
|
throw new Error("useBillingPlans must be used within CimplifyProvider or passed { client }.");
|
|
3118
4636
|
}
|
|
3119
4637
|
const enabled = options.enabled ?? true;
|
|
3120
|
-
const requestIdRef =
|
|
3121
|
-
const [plans, setPlans] =
|
|
3122
|
-
const [isLoading, setIsLoading] =
|
|
3123
|
-
const [error, setError] =
|
|
4638
|
+
const requestIdRef = React12.useRef(0);
|
|
4639
|
+
const [plans, setPlans] = React12.useState([]);
|
|
4640
|
+
const [isLoading, setIsLoading] = React12.useState(enabled && !!productId);
|
|
4641
|
+
const [error, setError] = React12.useState(null);
|
|
3124
4642
|
const customerId = options.customerId;
|
|
3125
4643
|
const quantity = options.quantity;
|
|
3126
4644
|
const orderValue = options.orderValue;
|
|
3127
|
-
const load =
|
|
4645
|
+
const load = React12.useCallback(
|
|
3128
4646
|
async (force = false) => {
|
|
3129
4647
|
if (!enabled || !productId) {
|
|
3130
4648
|
setPlans([]);
|
|
@@ -3159,17 +4677,17 @@ function useBillingPlans(productId, options = {}) {
|
|
|
3159
4677
|
},
|
|
3160
4678
|
[client, enabled, productId, customerId, quantity, orderValue]
|
|
3161
4679
|
);
|
|
3162
|
-
|
|
4680
|
+
React12.useEffect(() => {
|
|
3163
4681
|
void load(false);
|
|
3164
4682
|
}, [load]);
|
|
3165
|
-
const refetch =
|
|
4683
|
+
const refetch = React12.useCallback(async () => {
|
|
3166
4684
|
await load(true);
|
|
3167
4685
|
}, [load]);
|
|
3168
|
-
const subscriptionPlans =
|
|
4686
|
+
const subscriptionPlans = React12.useMemo(
|
|
3169
4687
|
() => plans.filter((p) => p.plan_type === "subscription"),
|
|
3170
4688
|
[plans]
|
|
3171
4689
|
);
|
|
3172
|
-
const installmentPlans =
|
|
4690
|
+
const installmentPlans = React12.useMemo(
|
|
3173
4691
|
() => plans.filter((p) => p.plan_type === "installment"),
|
|
3174
4692
|
[plans]
|
|
3175
4693
|
);
|
|
@@ -3204,8 +4722,8 @@ function computeAvailableValues(variants, axes, selections) {
|
|
|
3204
4722
|
}
|
|
3205
4723
|
function useVariantSelector(options) {
|
|
3206
4724
|
const { variants, axes } = options;
|
|
3207
|
-
const [selectedValues, setSelectedValues] =
|
|
3208
|
-
const selectValue =
|
|
4725
|
+
const [selectedValues, setSelectedValues] = React12.useState({});
|
|
4726
|
+
const selectValue = React12.useCallback(
|
|
3209
4727
|
(axisId, valueId) => {
|
|
3210
4728
|
setSelectedValues((prev) => {
|
|
3211
4729
|
if (prev[axisId] === valueId) {
|
|
@@ -3218,16 +4736,16 @@ function useVariantSelector(options) {
|
|
|
3218
4736
|
},
|
|
3219
4737
|
[]
|
|
3220
4738
|
);
|
|
3221
|
-
const reset =
|
|
3222
|
-
const selectedVariant =
|
|
4739
|
+
const reset = React12.useCallback(() => setSelectedValues({}), []);
|
|
4740
|
+
const selectedVariant = React12.useMemo(
|
|
3223
4741
|
() => findMatchingVariant(variants, selectedValues),
|
|
3224
4742
|
[variants, selectedValues]
|
|
3225
4743
|
);
|
|
3226
|
-
const variantImage =
|
|
4744
|
+
const variantImage = React12.useMemo(
|
|
3227
4745
|
() => selectedVariant?.images?.[0] ?? null,
|
|
3228
4746
|
[selectedVariant]
|
|
3229
4747
|
);
|
|
3230
|
-
const availableValues =
|
|
4748
|
+
const availableValues = React12.useMemo(
|
|
3231
4749
|
() => computeAvailableValues(variants, axes, selectedValues),
|
|
3232
4750
|
[variants, axes, selectedValues]
|
|
3233
4751
|
);
|
|
@@ -3253,7 +4771,7 @@ function useActivityState(options = {}) {
|
|
|
3253
4771
|
const context = useOptionalCimplifyClient();
|
|
3254
4772
|
const client = options.client ?? context?.client;
|
|
3255
4773
|
const { data, isLoading, error, refetch } = activityStateQuery(options);
|
|
3256
|
-
const dismissMessage =
|
|
4774
|
+
const dismissMessage = React12.useCallback(
|
|
3257
4775
|
async (code) => {
|
|
3258
4776
|
if (!client) return;
|
|
3259
4777
|
const result = await client.activity.dismissMessage(code);
|
|
@@ -3355,31 +4873,31 @@ var WS_PATH = "/api/v1/support/conversation/ws";
|
|
|
3355
4873
|
function useChat(options = {}) {
|
|
3356
4874
|
const context = useOptionalCimplifyClient();
|
|
3357
4875
|
const client = options.client ?? context?.client;
|
|
3358
|
-
const [messages, setMessages] =
|
|
3359
|
-
const [isLoading, setIsLoading] =
|
|
3360
|
-
const [isSending, setIsSending] =
|
|
3361
|
-
const [error, setError] =
|
|
3362
|
-
const [conversationOpened, setConversationOpened] =
|
|
3363
|
-
const pollRef =
|
|
3364
|
-
const lastActivityRef =
|
|
3365
|
-
const openedRef =
|
|
3366
|
-
const messagesRef =
|
|
3367
|
-
const clientRef =
|
|
3368
|
-
const wsRef =
|
|
3369
|
-
const wsReconnectAttemptRef =
|
|
3370
|
-
const wsReconnectTimerRef =
|
|
4876
|
+
const [messages, setMessages] = React12.useState([]);
|
|
4877
|
+
const [isLoading, setIsLoading] = React12.useState(false);
|
|
4878
|
+
const [isSending, setIsSending] = React12.useState(false);
|
|
4879
|
+
const [error, setError] = React12.useState(null);
|
|
4880
|
+
const [conversationOpened, setConversationOpened] = React12.useState(false);
|
|
4881
|
+
const pollRef = React12.useRef(null);
|
|
4882
|
+
const lastActivityRef = React12.useRef(Date.now());
|
|
4883
|
+
const openedRef = React12.useRef(false);
|
|
4884
|
+
const messagesRef = React12.useRef([]);
|
|
4885
|
+
const clientRef = React12.useRef(client);
|
|
4886
|
+
const wsRef = React12.useRef(null);
|
|
4887
|
+
const wsReconnectAttemptRef = React12.useRef(0);
|
|
4888
|
+
const wsReconnectTimerRef = React12.useRef(null);
|
|
3371
4889
|
messagesRef.current = messages;
|
|
3372
4890
|
clientRef.current = client;
|
|
3373
4891
|
const pollInterval = options.pollInterval ?? POLL_INTERVAL_MS;
|
|
3374
4892
|
const pollIdleInterval = options.pollIdleInterval ?? POLL_IDLE_INTERVAL_MS;
|
|
3375
|
-
const appendMessages =
|
|
4893
|
+
const appendMessages = React12.useCallback((incoming) => {
|
|
3376
4894
|
setMessages((prev) => {
|
|
3377
4895
|
const ids = new Set(prev.map((m) => m.id));
|
|
3378
4896
|
const fresh = incoming.filter((m) => !ids.has(m.id));
|
|
3379
4897
|
return fresh.length > 0 ? [...prev, ...fresh] : prev;
|
|
3380
4898
|
});
|
|
3381
4899
|
}, []);
|
|
3382
|
-
const pollMessages =
|
|
4900
|
+
const pollMessages = React12.useCallback(async () => {
|
|
3383
4901
|
const c = clientRef.current;
|
|
3384
4902
|
if (!c) return;
|
|
3385
4903
|
if (Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS) return;
|
|
@@ -3392,18 +4910,18 @@ function useChat(options = {}) {
|
|
|
3392
4910
|
appendMessages(result.value);
|
|
3393
4911
|
}
|
|
3394
4912
|
}, [appendMessages]);
|
|
3395
|
-
const startPolling =
|
|
4913
|
+
const startPolling = React12.useCallback(() => {
|
|
3396
4914
|
if (pollRef.current) clearInterval(pollRef.current);
|
|
3397
4915
|
const interval = Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS ? pollIdleInterval : pollInterval;
|
|
3398
4916
|
pollRef.current = setInterval(pollMessages, interval);
|
|
3399
4917
|
}, [pollMessages, pollInterval, pollIdleInterval]);
|
|
3400
|
-
const stopPolling =
|
|
4918
|
+
const stopPolling = React12.useCallback(() => {
|
|
3401
4919
|
if (pollRef.current) {
|
|
3402
4920
|
clearInterval(pollRef.current);
|
|
3403
4921
|
pollRef.current = null;
|
|
3404
4922
|
}
|
|
3405
4923
|
}, []);
|
|
3406
|
-
const connectWebSocket =
|
|
4924
|
+
const connectWebSocket = React12.useCallback(() => {
|
|
3407
4925
|
const c = clientRef.current;
|
|
3408
4926
|
if (!c || typeof WebSocket === "undefined") {
|
|
3409
4927
|
startPolling();
|
|
@@ -3444,7 +4962,7 @@ function useChat(options = {}) {
|
|
|
3444
4962
|
};
|
|
3445
4963
|
wsRef.current = ws;
|
|
3446
4964
|
}, [appendMessages, startPolling, stopPolling, pollMessages]);
|
|
3447
|
-
|
|
4965
|
+
React12.useEffect(() => {
|
|
3448
4966
|
return () => {
|
|
3449
4967
|
if (pollRef.current) clearInterval(pollRef.current);
|
|
3450
4968
|
if (wsReconnectTimerRef.current) clearTimeout(wsReconnectTimerRef.current);
|
|
@@ -3454,7 +4972,7 @@ function useChat(options = {}) {
|
|
|
3454
4972
|
}
|
|
3455
4973
|
};
|
|
3456
4974
|
}, []);
|
|
3457
|
-
const openConversation =
|
|
4975
|
+
const openConversation = React12.useCallback(async () => {
|
|
3458
4976
|
if (openedRef.current || !client) return;
|
|
3459
4977
|
openedRef.current = true;
|
|
3460
4978
|
setIsLoading(true);
|
|
@@ -3470,7 +4988,7 @@ function useChat(options = {}) {
|
|
|
3470
4988
|
}
|
|
3471
4989
|
setIsLoading(false);
|
|
3472
4990
|
}, [client, connectWebSocket]);
|
|
3473
|
-
const send =
|
|
4991
|
+
const send = React12.useCallback(
|
|
3474
4992
|
async (content) => {
|
|
3475
4993
|
if (!client || !content.trim()) return;
|
|
3476
4994
|
setError(null);
|
|
@@ -3504,7 +5022,7 @@ function useChat(options = {}) {
|
|
|
3504
5022
|
},
|
|
3505
5023
|
[client, openConversation]
|
|
3506
5024
|
);
|
|
3507
|
-
const startConversation =
|
|
5025
|
+
const startConversation = React12.useCallback(
|
|
3508
5026
|
async (starterText) => {
|
|
3509
5027
|
await openConversation();
|
|
3510
5028
|
if (starterText) {
|
|
@@ -3523,15 +5041,15 @@ function useChat(options = {}) {
|
|
|
3523
5041
|
startConversation
|
|
3524
5042
|
};
|
|
3525
5043
|
}
|
|
3526
|
-
var ElementsContext =
|
|
5044
|
+
var ElementsContext = React12.createContext({
|
|
3527
5045
|
elements: null,
|
|
3528
5046
|
isReady: false
|
|
3529
5047
|
});
|
|
3530
5048
|
function useElements() {
|
|
3531
|
-
return
|
|
5049
|
+
return React12.useContext(ElementsContext).elements;
|
|
3532
5050
|
}
|
|
3533
5051
|
function useElementsReady() {
|
|
3534
|
-
return
|
|
5052
|
+
return React12.useContext(ElementsContext).isReady;
|
|
3535
5053
|
}
|
|
3536
5054
|
function ElementsProvider({
|
|
3537
5055
|
client,
|
|
@@ -3539,10 +5057,10 @@ function ElementsProvider({
|
|
|
3539
5057
|
options,
|
|
3540
5058
|
children
|
|
3541
5059
|
}) {
|
|
3542
|
-
const [elements, setElements] =
|
|
3543
|
-
const [isReady, setIsReady] =
|
|
3544
|
-
const initialOptionsRef =
|
|
3545
|
-
|
|
5060
|
+
const [elements, setElements] = React12.useState(null);
|
|
5061
|
+
const [isReady, setIsReady] = React12.useState(false);
|
|
5062
|
+
const initialOptionsRef = React12.useRef(options);
|
|
5063
|
+
React12.useEffect(() => {
|
|
3546
5064
|
let cancelled = false;
|
|
3547
5065
|
let instance = null;
|
|
3548
5066
|
setIsReady(false);
|
|
@@ -3583,20 +5101,20 @@ function AuthElement({
|
|
|
3583
5101
|
onRequiresOtp,
|
|
3584
5102
|
onError
|
|
3585
5103
|
}) {
|
|
3586
|
-
const containerRef =
|
|
3587
|
-
const elementRef =
|
|
5104
|
+
const containerRef = React12.useRef(null);
|
|
5105
|
+
const elementRef = React12.useRef(null);
|
|
3588
5106
|
const elements = useElements();
|
|
3589
|
-
const onReadyRef =
|
|
3590
|
-
const onAuthenticatedRef =
|
|
3591
|
-
const onRequiresOtpRef =
|
|
3592
|
-
const onErrorRef =
|
|
3593
|
-
|
|
5107
|
+
const onReadyRef = React12.useRef(onReady);
|
|
5108
|
+
const onAuthenticatedRef = React12.useRef(onAuthenticated);
|
|
5109
|
+
const onRequiresOtpRef = React12.useRef(onRequiresOtp);
|
|
5110
|
+
const onErrorRef = React12.useRef(onError);
|
|
5111
|
+
React12.useEffect(() => {
|
|
3594
5112
|
onReadyRef.current = onReady;
|
|
3595
5113
|
onAuthenticatedRef.current = onAuthenticated;
|
|
3596
5114
|
onRequiresOtpRef.current = onRequiresOtp;
|
|
3597
5115
|
onErrorRef.current = onError;
|
|
3598
5116
|
}, [onReady, onAuthenticated, onRequiresOtp, onError]);
|
|
3599
|
-
|
|
5117
|
+
React12.useEffect(() => {
|
|
3600
5118
|
if (!elements || !containerRef.current) return;
|
|
3601
5119
|
const element = elements.create(chunkJGBDWEPJ_js.ELEMENT_TYPES.AUTH, { prefillEmail });
|
|
3602
5120
|
elementRef.current = element;
|
|
@@ -3626,18 +5144,18 @@ function AddressElement({
|
|
|
3626
5144
|
onChange,
|
|
3627
5145
|
onError
|
|
3628
5146
|
}) {
|
|
3629
|
-
const containerRef =
|
|
3630
|
-
const elementRef =
|
|
5147
|
+
const containerRef = React12.useRef(null);
|
|
5148
|
+
const elementRef = React12.useRef(null);
|
|
3631
5149
|
const elements = useElements();
|
|
3632
|
-
const onReadyRef =
|
|
3633
|
-
const onChangeRef =
|
|
3634
|
-
const onErrorRef =
|
|
3635
|
-
|
|
5150
|
+
const onReadyRef = React12.useRef(onReady);
|
|
5151
|
+
const onChangeRef = React12.useRef(onChange);
|
|
5152
|
+
const onErrorRef = React12.useRef(onError);
|
|
5153
|
+
React12.useEffect(() => {
|
|
3636
5154
|
onReadyRef.current = onReady;
|
|
3637
5155
|
onChangeRef.current = onChange;
|
|
3638
5156
|
onErrorRef.current = onError;
|
|
3639
5157
|
}, [onReady, onChange, onError]);
|
|
3640
|
-
|
|
5158
|
+
React12.useEffect(() => {
|
|
3641
5159
|
if (!elements || !containerRef.current) return;
|
|
3642
5160
|
const element = elements.create(chunkJGBDWEPJ_js.ELEMENT_TYPES.ADDRESS, { mode });
|
|
3643
5161
|
elementRef.current = element;
|
|
@@ -3664,18 +5182,18 @@ function PaymentElement({
|
|
|
3664
5182
|
onChange,
|
|
3665
5183
|
onError
|
|
3666
5184
|
}) {
|
|
3667
|
-
const containerRef =
|
|
3668
|
-
const elementRef =
|
|
5185
|
+
const containerRef = React12.useRef(null);
|
|
5186
|
+
const elementRef = React12.useRef(null);
|
|
3669
5187
|
const elements = useElements();
|
|
3670
|
-
const onReadyRef =
|
|
3671
|
-
const onChangeRef =
|
|
3672
|
-
const onErrorRef =
|
|
3673
|
-
|
|
5188
|
+
const onReadyRef = React12.useRef(onReady);
|
|
5189
|
+
const onChangeRef = React12.useRef(onChange);
|
|
5190
|
+
const onErrorRef = React12.useRef(onError);
|
|
5191
|
+
React12.useEffect(() => {
|
|
3674
5192
|
onReadyRef.current = onReady;
|
|
3675
5193
|
onChangeRef.current = onChange;
|
|
3676
5194
|
onErrorRef.current = onError;
|
|
3677
5195
|
}, [onReady, onChange, onError]);
|
|
3678
|
-
|
|
5196
|
+
React12.useEffect(() => {
|
|
3679
5197
|
if (!elements || !containerRef.current) return;
|
|
3680
5198
|
const element = elements.create(chunkJGBDWEPJ_js.ELEMENT_TYPES.PAYMENT, { amount, currency });
|
|
3681
5199
|
elementRef.current = element;
|
|
@@ -3695,8 +5213,8 @@ function PaymentElement({
|
|
|
3695
5213
|
}
|
|
3696
5214
|
function useCheckout() {
|
|
3697
5215
|
const elements = useElements();
|
|
3698
|
-
const [isLoading, setIsLoading] =
|
|
3699
|
-
const submit =
|
|
5216
|
+
const [isLoading, setIsLoading] = React12.useState(false);
|
|
5217
|
+
const submit = React12.useCallback(
|
|
3700
5218
|
async (data) => {
|
|
3701
5219
|
if (!elements) {
|
|
3702
5220
|
return { success: false, error: { code: "NO_ELEMENTS", message: "Elements not initialized" } };
|
|
@@ -3710,7 +5228,7 @@ function useCheckout() {
|
|
|
3710
5228
|
},
|
|
3711
5229
|
[elements]
|
|
3712
5230
|
);
|
|
3713
|
-
const process =
|
|
5231
|
+
const process = React12.useCallback(
|
|
3714
5232
|
async (options) => {
|
|
3715
5233
|
if (!elements) {
|
|
3716
5234
|
return {
|
|
@@ -3804,13 +5322,13 @@ function VariantSelector({
|
|
|
3804
5322
|
className,
|
|
3805
5323
|
classNames
|
|
3806
5324
|
}) {
|
|
3807
|
-
const [axisSelections, setAxisSelections] =
|
|
3808
|
-
const initialized =
|
|
3809
|
-
const idPrefix =
|
|
3810
|
-
|
|
5325
|
+
const [axisSelections, setAxisSelections] = React12.useState({});
|
|
5326
|
+
const initialized = React12.useRef(false);
|
|
5327
|
+
const idPrefix = React12.useId();
|
|
5328
|
+
React12.useEffect(() => {
|
|
3811
5329
|
initialized.current = false;
|
|
3812
5330
|
}, [variants]);
|
|
3813
|
-
|
|
5331
|
+
React12.useEffect(() => {
|
|
3814
5332
|
if (initialized.current) return;
|
|
3815
5333
|
if (!variants || variants.length === 0) return;
|
|
3816
5334
|
const defaultVariant = variants.find((v) => v.is_default) || variants[0];
|
|
@@ -3825,7 +5343,7 @@ function VariantSelector({
|
|
|
3825
5343
|
setAxisSelections(initial);
|
|
3826
5344
|
}
|
|
3827
5345
|
}, [variants, onVariantChange]);
|
|
3828
|
-
|
|
5346
|
+
React12.useEffect(() => {
|
|
3829
5347
|
if (!initialized.current) return;
|
|
3830
5348
|
if (!variantAxes || variantAxes.length === 0) return;
|
|
3831
5349
|
const match = variants.find((v) => {
|
|
@@ -3968,12 +5486,12 @@ function AddOnSelector({
|
|
|
3968
5486
|
className,
|
|
3969
5487
|
classNames
|
|
3970
5488
|
}) {
|
|
3971
|
-
const selectedSet =
|
|
3972
|
-
const isOptionSelected =
|
|
5489
|
+
const selectedSet = React12.useMemo(() => new Set(selectedOptions), [selectedOptions]);
|
|
5490
|
+
const isOptionSelected = React12.useCallback(
|
|
3973
5491
|
(optionId) => selectedSet.has(optionId),
|
|
3974
5492
|
[selectedSet]
|
|
3975
5493
|
);
|
|
3976
|
-
const handleCheckedChange =
|
|
5494
|
+
const handleCheckedChange = React12.useCallback(
|
|
3977
5495
|
(addOn, optionId, checked) => {
|
|
3978
5496
|
const isSelected = selectedSet.has(optionId);
|
|
3979
5497
|
if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {
|
|
@@ -4149,9 +5667,9 @@ function BundleSelector({
|
|
|
4149
5667
|
className,
|
|
4150
5668
|
classNames
|
|
4151
5669
|
}) {
|
|
4152
|
-
const [variantChoices, setVariantChoices] =
|
|
4153
|
-
const lastComponentIds =
|
|
4154
|
-
|
|
5670
|
+
const [variantChoices, setVariantChoices] = React12.useState({});
|
|
5671
|
+
const lastComponentIds = React12.useRef("");
|
|
5672
|
+
React12.useEffect(() => {
|
|
4155
5673
|
const ids = components.map((c) => c.id).sort().join();
|
|
4156
5674
|
if (ids === lastComponentIds.current) return;
|
|
4157
5675
|
lastComponentIds.current = ids;
|
|
@@ -4168,20 +5686,20 @@ function BundleSelector({
|
|
|
4168
5686
|
}
|
|
4169
5687
|
setVariantChoices(defaults);
|
|
4170
5688
|
}, [components]);
|
|
4171
|
-
const selections =
|
|
5689
|
+
const selections = React12.useMemo(() => {
|
|
4172
5690
|
return components.map((comp) => ({
|
|
4173
5691
|
component_id: comp.id,
|
|
4174
5692
|
variant_id: variantChoices[comp.id],
|
|
4175
5693
|
quantity: comp.quantity
|
|
4176
5694
|
}));
|
|
4177
5695
|
}, [components, variantChoices]);
|
|
4178
|
-
|
|
5696
|
+
React12.useEffect(() => {
|
|
4179
5697
|
onSelectionsChange(selections);
|
|
4180
5698
|
}, [selections, onSelectionsChange]);
|
|
4181
|
-
|
|
5699
|
+
React12.useEffect(() => {
|
|
4182
5700
|
onReady?.(components.length > 0 && selections.length > 0);
|
|
4183
5701
|
}, [components, selections, onReady]);
|
|
4184
|
-
const totalPrice =
|
|
5702
|
+
const totalPrice = React12.useMemo(() => {
|
|
4185
5703
|
if (pricingType === "fixed" && bundlePrice) {
|
|
4186
5704
|
return chunk7Y2O3E4D_js.parsePrice(bundlePrice);
|
|
4187
5705
|
}
|
|
@@ -4196,10 +5714,10 @@ function BundleSelector({
|
|
|
4196
5714
|
}
|
|
4197
5715
|
return componentsTotal;
|
|
4198
5716
|
}, [components, variantChoices, pricingType, bundlePrice, discountValue]);
|
|
4199
|
-
|
|
5717
|
+
React12.useEffect(() => {
|
|
4200
5718
|
onPriceChange?.(totalPrice);
|
|
4201
5719
|
}, [totalPrice, onPriceChange]);
|
|
4202
|
-
const handleVariantChange =
|
|
5720
|
+
const handleVariantChange = React12.useCallback(
|
|
4203
5721
|
(componentId, variantId) => {
|
|
4204
5722
|
setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));
|
|
4205
5723
|
},
|
|
@@ -4280,9 +5798,9 @@ function BundleComponentCard({
|
|
|
4280
5798
|
onVariantChange,
|
|
4281
5799
|
classNames
|
|
4282
5800
|
}) {
|
|
4283
|
-
const idPrefix =
|
|
5801
|
+
const idPrefix = React12.useId();
|
|
4284
5802
|
const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
|
|
4285
|
-
const displayPrice =
|
|
5803
|
+
const displayPrice = React12.useMemo(
|
|
4286
5804
|
() => getComponentPrice(component, selectedVariantId),
|
|
4287
5805
|
[component, selectedVariantId]
|
|
4288
5806
|
);
|
|
@@ -4430,11 +5948,11 @@ function CompositeSelector({
|
|
|
4430
5948
|
classNames
|
|
4431
5949
|
}) {
|
|
4432
5950
|
const { client } = useCimplifyClient();
|
|
4433
|
-
const [groupSelections, setGroupSelections] =
|
|
4434
|
-
const [priceResult, setPriceResult] =
|
|
4435
|
-
const [isPriceLoading, setIsPriceLoading] =
|
|
4436
|
-
const [priceError, setPriceError] =
|
|
4437
|
-
const selections =
|
|
5951
|
+
const [groupSelections, setGroupSelections] = React12.useState({});
|
|
5952
|
+
const [priceResult, setPriceResult] = React12.useState(null);
|
|
5953
|
+
const [isPriceLoading, setIsPriceLoading] = React12.useState(false);
|
|
5954
|
+
const [priceError, setPriceError] = React12.useState(false);
|
|
5955
|
+
const selections = React12.useMemo(() => {
|
|
4438
5956
|
const result = [];
|
|
4439
5957
|
for (const groupSels of Object.values(groupSelections)) {
|
|
4440
5958
|
for (const [componentId, qty] of Object.entries(groupSels)) {
|
|
@@ -4445,13 +5963,13 @@ function CompositeSelector({
|
|
|
4445
5963
|
}
|
|
4446
5964
|
return result;
|
|
4447
5965
|
}, [groupSelections]);
|
|
4448
|
-
|
|
5966
|
+
React12.useEffect(() => {
|
|
4449
5967
|
onSelectionsChange(selections);
|
|
4450
5968
|
}, [selections, onSelectionsChange]);
|
|
4451
|
-
|
|
5969
|
+
React12.useEffect(() => {
|
|
4452
5970
|
onPriceChange?.(priceResult);
|
|
4453
5971
|
}, [priceResult, onPriceChange]);
|
|
4454
|
-
const allGroupsSatisfied =
|
|
5972
|
+
const allGroupsSatisfied = React12.useMemo(() => {
|
|
4455
5973
|
for (const group of groups) {
|
|
4456
5974
|
const groupSels = groupSelections[group.id] || {};
|
|
4457
5975
|
const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
|
|
@@ -4459,17 +5977,17 @@ function CompositeSelector({
|
|
|
4459
5977
|
}
|
|
4460
5978
|
return true;
|
|
4461
5979
|
}, [groups, groupSelections]);
|
|
4462
|
-
const sortedGroups =
|
|
5980
|
+
const sortedGroups = React12.useMemo(
|
|
4463
5981
|
() => [...groups].sort((a, b) => a.display_order - b.display_order).map((group) => ({
|
|
4464
5982
|
...group,
|
|
4465
5983
|
_sortedComponents: group.components.filter((component) => component.is_available && !component.is_archived).sort((a, b) => a.display_order - b.display_order)
|
|
4466
5984
|
})),
|
|
4467
5985
|
[groups]
|
|
4468
5986
|
);
|
|
4469
|
-
|
|
5987
|
+
React12.useEffect(() => {
|
|
4470
5988
|
onReady?.(allGroupsSatisfied);
|
|
4471
5989
|
}, [allGroupsSatisfied, onReady]);
|
|
4472
|
-
|
|
5990
|
+
React12.useEffect(() => {
|
|
4473
5991
|
if (skipPriceFetch || !allGroupsSatisfied || selections.length === 0) return;
|
|
4474
5992
|
let cancelled = false;
|
|
4475
5993
|
const timer = setTimeout(() => {
|
|
@@ -4496,7 +6014,7 @@ function CompositeSelector({
|
|
|
4496
6014
|
clearTimeout(timer);
|
|
4497
6015
|
};
|
|
4498
6016
|
}, [selections, allGroupsSatisfied, compositeId, client, skipPriceFetch]);
|
|
4499
|
-
const toggleComponent =
|
|
6017
|
+
const toggleComponent = React12.useCallback(
|
|
4500
6018
|
(group, component) => {
|
|
4501
6019
|
setGroupSelections((prev) => {
|
|
4502
6020
|
const groupSels = { ...prev[group.id] || {} };
|
|
@@ -4524,7 +6042,7 @@ function CompositeSelector({
|
|
|
4524
6042
|
},
|
|
4525
6043
|
[]
|
|
4526
6044
|
);
|
|
4527
|
-
const updateQuantity =
|
|
6045
|
+
const updateQuantity = React12.useCallback(
|
|
4528
6046
|
(group, componentId, newValue) => {
|
|
4529
6047
|
setGroupSelections((prev) => {
|
|
4530
6048
|
const groupSels = { ...prev[group.id] || {} };
|
|
@@ -5103,7 +6621,7 @@ function DatePicker({
|
|
|
5103
6621
|
classNames,
|
|
5104
6622
|
"aria-label": ariaLabel
|
|
5105
6623
|
}) {
|
|
5106
|
-
const [open, setOpen] =
|
|
6624
|
+
const [open, setOpen] = React12.useState(false);
|
|
5107
6625
|
const selected = parseValue(value);
|
|
5108
6626
|
const disabledMatchers = [];
|
|
5109
6627
|
if (minDate) disabledMatchers.push({ before: minDate });
|
|
@@ -5257,9 +6775,9 @@ function TimePicker({
|
|
|
5257
6775
|
classNames,
|
|
5258
6776
|
"aria-label": ariaLabel
|
|
5259
6777
|
}) {
|
|
5260
|
-
const [open, setOpen] =
|
|
6778
|
+
const [open, setOpen] = React12.useState(false);
|
|
5261
6779
|
const parsed = parseHHmm(value);
|
|
5262
|
-
const options =
|
|
6780
|
+
const options = React12.useMemo(
|
|
5263
6781
|
() => buildOptions(minTime, maxTime, stepMinutes),
|
|
5264
6782
|
[minTime, maxTime, stepMinutes]
|
|
5265
6783
|
);
|
|
@@ -5348,13 +6866,13 @@ function CustomerInputFields({
|
|
|
5348
6866
|
const clientContext = useOptionalCimplifyClient();
|
|
5349
6867
|
if (fields.length === 0) return null;
|
|
5350
6868
|
const sorted = [...fields].sort((a, b) => a.display_order - b.display_order);
|
|
5351
|
-
const setValue =
|
|
6869
|
+
const setValue = React12.useCallback(
|
|
5352
6870
|
(fieldId, value) => {
|
|
5353
6871
|
onChange({ ...values, [fieldId]: value });
|
|
5354
6872
|
},
|
|
5355
6873
|
[values, onChange]
|
|
5356
6874
|
);
|
|
5357
|
-
const defaultFileUpload =
|
|
6875
|
+
const defaultFileUpload = React12.useCallback(
|
|
5358
6876
|
async (file) => {
|
|
5359
6877
|
if (onFileUpload) return onFileUpload(file, {});
|
|
5360
6878
|
if (!clientContext?.client) throw new Error("No upload provider available");
|
|
@@ -5689,7 +7207,7 @@ function FileUploadInput({
|
|
|
5689
7207
|
onFileUpload,
|
|
5690
7208
|
classNames
|
|
5691
7209
|
}) {
|
|
5692
|
-
const [isUploading, setIsUploading] =
|
|
7210
|
+
const [isUploading, setIsUploading] = React12__default.default.useState(false);
|
|
5693
7211
|
const fileUrl = typeof value === "string" ? value : void 0;
|
|
5694
7212
|
const acceptedFormats = field.validation?.accepted_formats;
|
|
5695
7213
|
const accept = acceptedFormats ? acceptedFormats.map((f) => `.${f}`).join(",") : field.field_type === chunkJYPLT56O_js.INPUT_FIELD_TYPE.Image ? "image/*" : void 0;
|
|
@@ -5839,22 +7357,22 @@ function AddressInput({
|
|
|
5839
7357
|
}) {
|
|
5840
7358
|
const clientContext = useOptionalCimplifyClient();
|
|
5841
7359
|
const addr = value && typeof value === "object" ? value : null;
|
|
5842
|
-
const [inputText, setInputText] =
|
|
5843
|
-
const [suggestions, setSuggestions] =
|
|
5844
|
-
const [isOpen, setIsOpen] =
|
|
5845
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5846
|
-
const debounceRef =
|
|
5847
|
-
const seqRef =
|
|
5848
|
-
const sessionTokenRef =
|
|
5849
|
-
const blurTimeoutRef =
|
|
5850
|
-
|
|
7360
|
+
const [inputText, setInputText] = React12__default.default.useState(addr?.formatted_address ?? "");
|
|
7361
|
+
const [suggestions, setSuggestions] = React12__default.default.useState([]);
|
|
7362
|
+
const [isOpen, setIsOpen] = React12__default.default.useState(false);
|
|
7363
|
+
const [highlightedIndex, setHighlightedIndex] = React12__default.default.useState(-1);
|
|
7364
|
+
const debounceRef = React12__default.default.useRef(null);
|
|
7365
|
+
const seqRef = React12__default.default.useRef(0);
|
|
7366
|
+
const sessionTokenRef = React12__default.default.useRef(createSessionToken());
|
|
7367
|
+
const blurTimeoutRef = React12__default.default.useRef(null);
|
|
7368
|
+
React12__default.default.useEffect(() => {
|
|
5851
7369
|
return () => {
|
|
5852
7370
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5853
7371
|
if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
|
|
5854
7372
|
seqRef.current += 1;
|
|
5855
7373
|
};
|
|
5856
7374
|
}, []);
|
|
5857
|
-
const fetchSuggestions =
|
|
7375
|
+
const fetchSuggestions = React12__default.default.useCallback(async (query) => {
|
|
5858
7376
|
const client = clientContext?.client;
|
|
5859
7377
|
if (!client || query.length < 3) {
|
|
5860
7378
|
setSuggestions([]);
|
|
@@ -5878,7 +7396,7 @@ function AddressInput({
|
|
|
5878
7396
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5879
7397
|
debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
|
|
5880
7398
|
};
|
|
5881
|
-
const selectSuggestion =
|
|
7399
|
+
const selectSuggestion = React12__default.default.useCallback(async (suggestion) => {
|
|
5882
7400
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5883
7401
|
if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
|
|
5884
7402
|
const fallback = suggestion.description.split(",")[0]?.trim() || suggestion.description;
|
|
@@ -5981,22 +7499,22 @@ function LocationInput({
|
|
|
5981
7499
|
}) {
|
|
5982
7500
|
const clientContext = useOptionalCimplifyClient();
|
|
5983
7501
|
const loc = value && typeof value === "object" ? value : null;
|
|
5984
|
-
const [inputText, setInputText] =
|
|
5985
|
-
const [suggestions, setSuggestions] =
|
|
5986
|
-
const [isOpen, setIsOpen] =
|
|
5987
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5988
|
-
const debounceRef =
|
|
5989
|
-
const seqRef =
|
|
5990
|
-
const sessionTokenRef =
|
|
5991
|
-
const blurTimeoutRef =
|
|
5992
|
-
|
|
7502
|
+
const [inputText, setInputText] = React12__default.default.useState(loc?.label ?? "");
|
|
7503
|
+
const [suggestions, setSuggestions] = React12__default.default.useState([]);
|
|
7504
|
+
const [isOpen, setIsOpen] = React12__default.default.useState(false);
|
|
7505
|
+
const [highlightedIndex, setHighlightedIndex] = React12__default.default.useState(-1);
|
|
7506
|
+
const debounceRef = React12__default.default.useRef(null);
|
|
7507
|
+
const seqRef = React12__default.default.useRef(0);
|
|
7508
|
+
const sessionTokenRef = React12__default.default.useRef(createSessionToken());
|
|
7509
|
+
const blurTimeoutRef = React12__default.default.useRef(null);
|
|
7510
|
+
React12__default.default.useEffect(() => {
|
|
5993
7511
|
return () => {
|
|
5994
7512
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5995
7513
|
if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
|
|
5996
7514
|
seqRef.current += 1;
|
|
5997
7515
|
};
|
|
5998
7516
|
}, []);
|
|
5999
|
-
const fetchSuggestions =
|
|
7517
|
+
const fetchSuggestions = React12__default.default.useCallback(async (query) => {
|
|
6000
7518
|
const client = clientContext?.client;
|
|
6001
7519
|
if (!client || query.length < 3) {
|
|
6002
7520
|
setSuggestions([]);
|
|
@@ -6020,7 +7538,7 @@ function LocationInput({
|
|
|
6020
7538
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
6021
7539
|
debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
|
|
6022
7540
|
};
|
|
6023
|
-
const selectSuggestion =
|
|
7541
|
+
const selectSuggestion = React12__default.default.useCallback(async (suggestion) => {
|
|
6024
7542
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
6025
7543
|
if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
|
|
6026
7544
|
const label = suggestion.description.split(",")[0]?.trim() || suggestion.description;
|
|
@@ -6109,8 +7627,8 @@ function PhoneInput({
|
|
|
6109
7627
|
inputClass
|
|
6110
7628
|
}) {
|
|
6111
7629
|
const phone = value && typeof value === "object" ? value : null;
|
|
6112
|
-
const [code, setCode] =
|
|
6113
|
-
const [number, setNumber] =
|
|
7630
|
+
const [code, setCode] = React12__default.default.useState(phone?.country_code ?? "+1");
|
|
7631
|
+
const [number, setNumber] = React12__default.default.useState(phone?.number ?? "");
|
|
6114
7632
|
const update = (nextCode, nextNumber) => {
|
|
6115
7633
|
setCode(nextCode);
|
|
6116
7634
|
setNumber(nextNumber);
|
|
@@ -6155,8 +7673,8 @@ function SignatureInput({
|
|
|
6155
7673
|
classNames
|
|
6156
7674
|
}) {
|
|
6157
7675
|
const sig = value && typeof value === "object" ? value : null;
|
|
6158
|
-
const canvasRef =
|
|
6159
|
-
const isDrawing =
|
|
7676
|
+
const canvasRef = React12__default.default.useRef(null);
|
|
7677
|
+
const isDrawing = React12__default.default.useRef(false);
|
|
6160
7678
|
const getCtx = () => canvasRef.current?.getContext("2d") ?? null;
|
|
6161
7679
|
const startDraw = (e) => {
|
|
6162
7680
|
const ctx = getCtx();
|
|
@@ -6332,7 +7850,7 @@ function SlotPicker({
|
|
|
6332
7850
|
}
|
|
6333
7851
|
);
|
|
6334
7852
|
const rawSlots = slotsProp ?? fetched;
|
|
6335
|
-
const slots =
|
|
7853
|
+
const slots = React12.useMemo(() => {
|
|
6336
7854
|
if (!hideElapsedSlots) return rawSlots;
|
|
6337
7855
|
const cutoff = Date.now() + minLeadMinutes * 6e4;
|
|
6338
7856
|
return rawSlots.filter((slot) => {
|
|
@@ -6470,9 +7988,9 @@ function DateSlotPicker({
|
|
|
6470
7988
|
className,
|
|
6471
7989
|
classNames
|
|
6472
7990
|
}) {
|
|
6473
|
-
const [offset, setOffset] =
|
|
6474
|
-
const [selectedDate, setSelectedDate] =
|
|
6475
|
-
const dateRange =
|
|
7991
|
+
const [offset, setOffset] = React12.useState(0);
|
|
7992
|
+
const [selectedDate, setSelectedDate] = React12.useState(toDateString(/* @__PURE__ */ new Date()));
|
|
7993
|
+
const dateRange = React12.useMemo(() => {
|
|
6476
7994
|
const today = /* @__PURE__ */ new Date();
|
|
6477
7995
|
const start = addDays(today, offset);
|
|
6478
7996
|
const dates = [];
|
|
@@ -6495,25 +8013,25 @@ function DateSlotPicker({
|
|
|
6495
8013
|
}
|
|
6496
8014
|
);
|
|
6497
8015
|
const days = availabilityProp ?? fetchedDays;
|
|
6498
|
-
const availabilityMap =
|
|
8016
|
+
const availabilityMap = React12.useMemo(() => {
|
|
6499
8017
|
const map = /* @__PURE__ */ new Map();
|
|
6500
8018
|
for (const day of days) {
|
|
6501
8019
|
map.set(day.date, day);
|
|
6502
8020
|
}
|
|
6503
8021
|
return map;
|
|
6504
8022
|
}, [days]);
|
|
6505
|
-
const handlePrev =
|
|
8023
|
+
const handlePrev = React12.useCallback(() => {
|
|
6506
8024
|
setOffset((prev) => Math.max(0, prev - daysToShow));
|
|
6507
8025
|
}, [daysToShow]);
|
|
6508
|
-
const handleNext =
|
|
8026
|
+
const handleNext = React12.useCallback(() => {
|
|
6509
8027
|
setOffset((prev) => prev + daysToShow);
|
|
6510
8028
|
}, [daysToShow]);
|
|
6511
|
-
const handleDateChange =
|
|
8029
|
+
const handleDateChange = React12.useCallback((value) => {
|
|
6512
8030
|
if (typeof value === "string") {
|
|
6513
8031
|
setSelectedDate(value);
|
|
6514
8032
|
}
|
|
6515
8033
|
}, []);
|
|
6516
|
-
const handleSlotSelect =
|
|
8034
|
+
const handleSlotSelect = React12.useCallback(
|
|
6517
8035
|
(slot) => {
|
|
6518
8036
|
onSlotSelect?.(slot, selectedDate);
|
|
6519
8037
|
},
|
|
@@ -6629,22 +8147,22 @@ function ProductCustomizer({
|
|
|
6629
8147
|
className,
|
|
6630
8148
|
classNames
|
|
6631
8149
|
}) {
|
|
6632
|
-
const [quantity, setQuantity] =
|
|
6633
|
-
const [isAdded, setIsAdded] =
|
|
6634
|
-
const [isSubmitting, setIsSubmitting] =
|
|
6635
|
-
const [selectedVariantId, setSelectedVariantId] =
|
|
6636
|
-
const [selectedVariant, setSelectedVariant] =
|
|
6637
|
-
const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] =
|
|
6638
|
-
const [compositeSelections, setCompositeSelections] =
|
|
6639
|
-
const [compositePrice, setCompositePrice] =
|
|
6640
|
-
const [compositeReady, setCompositeReady] =
|
|
6641
|
-
const [bundleSelections, setBundleSelections] =
|
|
6642
|
-
const [bundleTotalPrice, setBundleTotalPrice] =
|
|
6643
|
-
const [bundleReady, setBundleReady] =
|
|
6644
|
-
const [selectedBillingPlan, setSelectedBillingPlan] =
|
|
6645
|
-
const [customerInputValues, setCustomerInputValues] =
|
|
6646
|
-
const [specialInstructions, setSpecialInstructions] =
|
|
6647
|
-
const [selectedSlot, setSelectedSlot] =
|
|
8150
|
+
const [quantity, setQuantity] = React12.useState(product.min_order_quantity ?? 1);
|
|
8151
|
+
const [isAdded, setIsAdded] = React12.useState(false);
|
|
8152
|
+
const [isSubmitting, setIsSubmitting] = React12.useState(false);
|
|
8153
|
+
const [selectedVariantId, setSelectedVariantId] = React12.useState();
|
|
8154
|
+
const [selectedVariant, setSelectedVariant] = React12.useState();
|
|
8155
|
+
const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = React12.useState([]);
|
|
8156
|
+
const [compositeSelections, setCompositeSelections] = React12.useState([]);
|
|
8157
|
+
const [compositePrice, setCompositePrice] = React12.useState(null);
|
|
8158
|
+
const [compositeReady, setCompositeReady] = React12.useState(false);
|
|
8159
|
+
const [bundleSelections, setBundleSelections] = React12.useState([]);
|
|
8160
|
+
const [bundleTotalPrice, setBundleTotalPrice] = React12.useState(null);
|
|
8161
|
+
const [bundleReady, setBundleReady] = React12.useState(false);
|
|
8162
|
+
const [selectedBillingPlan, setSelectedBillingPlan] = React12.useState(null);
|
|
8163
|
+
const [customerInputValues, setCustomerInputValues] = React12.useState({});
|
|
8164
|
+
const [specialInstructions, setSpecialInstructions] = React12.useState("");
|
|
8165
|
+
const [selectedSlot, setSelectedSlot] = React12.useState(null);
|
|
6648
8166
|
const cart = useCart();
|
|
6649
8167
|
const productType = product.type || "product";
|
|
6650
8168
|
const isComposite = productType === "composite";
|
|
@@ -6654,7 +8172,7 @@ function ProductCustomizer({
|
|
|
6654
8172
|
const isStandard = !isComposite && !isBundle;
|
|
6655
8173
|
const hasVariants = isStandard && product.variants && product.variants.length > 0;
|
|
6656
8174
|
const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;
|
|
6657
|
-
|
|
8175
|
+
React12.useEffect(() => {
|
|
6658
8176
|
setQuantity(product.min_order_quantity ?? 1);
|
|
6659
8177
|
setIsAdded(false);
|
|
6660
8178
|
setIsSubmitting(false);
|
|
@@ -6672,7 +8190,7 @@ function ProductCustomizer({
|
|
|
6672
8190
|
setSpecialInstructions("");
|
|
6673
8191
|
setSelectedSlot(null);
|
|
6674
8192
|
}, [product.id, product.min_order_quantity]);
|
|
6675
|
-
const selectedAddOnOptions =
|
|
8193
|
+
const selectedAddOnOptions = React12.useMemo(() => {
|
|
6676
8194
|
if (!product.add_ons) return [];
|
|
6677
8195
|
const options = [];
|
|
6678
8196
|
for (const addOn of product.add_ons) {
|
|
@@ -6684,11 +8202,11 @@ function ProductCustomizer({
|
|
|
6684
8202
|
}
|
|
6685
8203
|
return options;
|
|
6686
8204
|
}, [product.add_ons, selectedAddOnOptionIds]);
|
|
6687
|
-
const normalizedAddOnOptionIds =
|
|
8205
|
+
const normalizedAddOnOptionIds = React12.useMemo(() => {
|
|
6688
8206
|
if (selectedAddOnOptionIds.length === 0) return [];
|
|
6689
8207
|
return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();
|
|
6690
8208
|
}, [selectedAddOnOptionIds]);
|
|
6691
|
-
const localTotalPrice =
|
|
8209
|
+
const localTotalPrice = React12.useMemo(() => {
|
|
6692
8210
|
if (isComposite && compositePrice) {
|
|
6693
8211
|
return chunk7Y2O3E4D_js.parsePrice(compositePrice.final_price) * quantity;
|
|
6694
8212
|
}
|
|
@@ -6706,7 +8224,7 @@ function ProductCustomizer({
|
|
|
6706
8224
|
}
|
|
6707
8225
|
return price * quantity;
|
|
6708
8226
|
}, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);
|
|
6709
|
-
const requiredAddOnsSatisfied =
|
|
8227
|
+
const requiredAddOnsSatisfied = React12.useMemo(() => {
|
|
6710
8228
|
if (!product.add_ons) return true;
|
|
6711
8229
|
for (const addOn of product.add_ons) {
|
|
6712
8230
|
if (addOn.is_required) {
|
|
@@ -6721,7 +8239,7 @@ function ProductCustomizer({
|
|
|
6721
8239
|
}
|
|
6722
8240
|
return true;
|
|
6723
8241
|
}, [product.add_ons, selectedAddOnOptionIds]);
|
|
6724
|
-
const quoteInput =
|
|
8242
|
+
const quoteInput = React12.useMemo(
|
|
6725
8243
|
() => ({
|
|
6726
8244
|
productId: product.id,
|
|
6727
8245
|
quantity,
|
|
@@ -6732,7 +8250,7 @@ function ProductCustomizer({
|
|
|
6732
8250
|
}),
|
|
6733
8251
|
[product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections]
|
|
6734
8252
|
);
|
|
6735
|
-
const requiredInputsSatisfied =
|
|
8253
|
+
const requiredInputsSatisfied = React12.useMemo(() => {
|
|
6736
8254
|
if (!product.input_fields || product.input_fields.length === 0) return true;
|
|
6737
8255
|
return product.input_fields.every((field) => {
|
|
6738
8256
|
if (!field.is_required) return true;
|
|
@@ -6745,7 +8263,7 @@ function ProductCustomizer({
|
|
|
6745
8263
|
enabled: quoteEnabled
|
|
6746
8264
|
});
|
|
6747
8265
|
const quoteId = quote?.quote_id;
|
|
6748
|
-
const quotedTotalPrice =
|
|
8266
|
+
const quotedTotalPrice = React12.useMemo(() => {
|
|
6749
8267
|
if (!quote) return void 0;
|
|
6750
8268
|
const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;
|
|
6751
8269
|
const perUnit = priceInfo.pre_tax_price;
|
|
@@ -6753,7 +8271,7 @@ function ProductCustomizer({
|
|
|
6753
8271
|
return chunk7Y2O3E4D_js.parsePrice(perUnit) * quantity;
|
|
6754
8272
|
}, [quote, quantity]);
|
|
6755
8273
|
const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;
|
|
6756
|
-
const handleVariantChange =
|
|
8274
|
+
const handleVariantChange = React12.useCallback(
|
|
6757
8275
|
(variantId, variant) => {
|
|
6758
8276
|
setSelectedVariantId(variantId);
|
|
6759
8277
|
setSelectedVariant(variant);
|
|
@@ -6761,9 +8279,9 @@ function ProductCustomizer({
|
|
|
6761
8279
|
},
|
|
6762
8280
|
[onVariantChange]
|
|
6763
8281
|
);
|
|
6764
|
-
const addedTimerRef =
|
|
6765
|
-
|
|
6766
|
-
const handleAddToCart =
|
|
8282
|
+
const addedTimerRef = React12.useRef(void 0);
|
|
8283
|
+
React12.useEffect(() => () => clearTimeout(addedTimerRef.current), []);
|
|
8284
|
+
const handleAddToCart = React12.useCallback(async () => {
|
|
6767
8285
|
if (isSubmitting) return;
|
|
6768
8286
|
setIsSubmitting(true);
|
|
6769
8287
|
const options = {
|
|
@@ -6988,14 +8506,14 @@ function ProductImageGallery({
|
|
|
6988
8506
|
aspectRatio = "4/3",
|
|
6989
8507
|
className
|
|
6990
8508
|
}) {
|
|
6991
|
-
const normalizedImages =
|
|
8509
|
+
const normalizedImages = React12.useMemo(
|
|
6992
8510
|
() => images.filter(
|
|
6993
8511
|
(image) => typeof image === "string" && image.trim().length > 0
|
|
6994
8512
|
),
|
|
6995
8513
|
[images]
|
|
6996
8514
|
);
|
|
6997
|
-
const [selectedImage, setSelectedImage] =
|
|
6998
|
-
|
|
8515
|
+
const [selectedImage, setSelectedImage] = React12.useState(0);
|
|
8516
|
+
React12.useEffect(() => {
|
|
6999
8517
|
setSelectedImage(0);
|
|
7000
8518
|
}, [normalizedImages.length, productName]);
|
|
7001
8519
|
if (normalizedImages.length === 0) {
|
|
@@ -7078,9 +8596,9 @@ function StoreVideo({
|
|
|
7078
8596
|
lazy = true,
|
|
7079
8597
|
className
|
|
7080
8598
|
}) {
|
|
7081
|
-
const ref =
|
|
7082
|
-
const [inView, setInView] =
|
|
7083
|
-
|
|
8599
|
+
const ref = React12.useRef(null);
|
|
8600
|
+
const [inView, setInView] = React12.useState(!lazy);
|
|
8601
|
+
React12.useEffect(() => {
|
|
7084
8602
|
if (!lazy || inView) return;
|
|
7085
8603
|
const node = ref.current;
|
|
7086
8604
|
if (!node || typeof IntersectionObserver === "undefined") {
|
|
@@ -7168,8 +8686,8 @@ function ProductModel3D({
|
|
|
7168
8686
|
cameraControls = true,
|
|
7169
8687
|
className
|
|
7170
8688
|
}) {
|
|
7171
|
-
const [ready, setReady] =
|
|
7172
|
-
|
|
8689
|
+
const [ready, setReady] = React12.useState(false);
|
|
8690
|
+
React12.useEffect(() => {
|
|
7173
8691
|
let cancelled = false;
|
|
7174
8692
|
ensureModelViewer().then(
|
|
7175
8693
|
() => {
|
|
@@ -7188,7 +8706,7 @@ function ProductModel3D({
|
|
|
7188
8706
|
"data-cimplify-product-model-3d": true,
|
|
7189
8707
|
className,
|
|
7190
8708
|
style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES3[aspectRatio] },
|
|
7191
|
-
children: ready ?
|
|
8709
|
+
children: ready ? React12__default.default.createElement("model-viewer", {
|
|
7192
8710
|
src,
|
|
7193
8711
|
"ios-src": iosSrc,
|
|
7194
8712
|
alt,
|
|
@@ -7199,12 +8717,12 @@ function ProductModel3D({
|
|
|
7199
8717
|
"auto-rotate": autoRotate || void 0,
|
|
7200
8718
|
"shadow-intensity": "1",
|
|
7201
8719
|
style: { width: "100%", height: "100%", backgroundColor: "transparent" }
|
|
7202
|
-
}) : poster ?
|
|
8720
|
+
}) : poster ? React12__default.default.createElement("img", {
|
|
7203
8721
|
src: poster,
|
|
7204
8722
|
alt: alt ?? "",
|
|
7205
8723
|
"data-cimplify-product-model-3d-loading": true,
|
|
7206
8724
|
style: { width: "100%", height: "100%", objectFit: "cover" }
|
|
7207
|
-
}) :
|
|
8725
|
+
}) : React12__default.default.createElement("div", {
|
|
7208
8726
|
"data-cimplify-product-model-3d-loading": true,
|
|
7209
8727
|
style: { width: "100%", height: "100%", backgroundColor: "var(--muted, #f3f4f6)" }
|
|
7210
8728
|
})
|
|
@@ -7232,12 +8750,12 @@ function MediaGallery({
|
|
|
7232
8750
|
aspectRatio = "4/3",
|
|
7233
8751
|
className
|
|
7234
8752
|
}) {
|
|
7235
|
-
const validItems =
|
|
8753
|
+
const validItems = React12.useMemo(
|
|
7236
8754
|
() => items.filter((i) => typeof i.src === "string" && i.src.trim().length > 0),
|
|
7237
8755
|
[items]
|
|
7238
8756
|
);
|
|
7239
|
-
const [selected, setSelected] =
|
|
7240
|
-
|
|
8757
|
+
const [selected, setSelected] = React12.useState(0);
|
|
8758
|
+
React12.useEffect(() => {
|
|
7241
8759
|
setSelected(0);
|
|
7242
8760
|
}, [validItems.length, productName]);
|
|
7243
8761
|
if (validItems.length === 0) return null;
|
|
@@ -7802,7 +9320,7 @@ function ProductSheet({
|
|
|
7802
9320
|
}
|
|
7803
9321
|
);
|
|
7804
9322
|
}
|
|
7805
|
-
const [selectedVariant, setSelectedVariant] =
|
|
9323
|
+
const [selectedVariant, setSelectedVariant] = React12.useState(
|
|
7806
9324
|
void 0
|
|
7807
9325
|
);
|
|
7808
9326
|
const variantImages = selectedVariant?.images?.filter(Boolean) ?? [];
|
|
@@ -8821,22 +10339,22 @@ function ProductCard({
|
|
|
8821
10339
|
classNames
|
|
8822
10340
|
}) {
|
|
8823
10341
|
const mode = displayMode ?? product.display_mode ?? "card";
|
|
8824
|
-
const [isOpen, setIsOpen] =
|
|
8825
|
-
const [shouldFetch, setShouldFetch] =
|
|
10342
|
+
const [isOpen, setIsOpen] = React12.useState(false);
|
|
10343
|
+
const [shouldFetch, setShouldFetch] = React12.useState(false);
|
|
8826
10344
|
const { product: productDetails } = useProduct(
|
|
8827
10345
|
product.slug ?? product.id,
|
|
8828
10346
|
{ enabled: shouldFetch || isOpen }
|
|
8829
10347
|
);
|
|
8830
|
-
const handlePrefetch =
|
|
10348
|
+
const handlePrefetch = React12.useCallback(() => {
|
|
8831
10349
|
setShouldFetch(true);
|
|
8832
10350
|
}, []);
|
|
8833
|
-
const handleOpenChange =
|
|
10351
|
+
const handleOpenChange = React12.useCallback((open) => {
|
|
8834
10352
|
setIsOpen(open);
|
|
8835
10353
|
if (open) {
|
|
8836
10354
|
setShouldFetch(true);
|
|
8837
10355
|
}
|
|
8838
10356
|
}, []);
|
|
8839
|
-
const handleClose =
|
|
10357
|
+
const handleClose = React12.useCallback(() => {
|
|
8840
10358
|
setIsOpen(false);
|
|
8841
10359
|
}, []);
|
|
8842
10360
|
const imageUrl = product.image_url || product.images?.[0];
|
|
@@ -8965,13 +10483,13 @@ function ProductGrid({
|
|
|
8965
10483
|
className,
|
|
8966
10484
|
classNames
|
|
8967
10485
|
}) {
|
|
8968
|
-
const rawId =
|
|
10486
|
+
const rawId = React12__default.default.useId();
|
|
8969
10487
|
const gridId = `cimplify-grid-${rawId.replace(/:/g, "")}`;
|
|
8970
10488
|
const sm = columns?.sm ?? 1;
|
|
8971
10489
|
const md = columns?.md ?? 2;
|
|
8972
10490
|
const lg = columns?.lg ?? 3;
|
|
8973
10491
|
const xl = columns?.xl ?? 4;
|
|
8974
|
-
const css =
|
|
10492
|
+
const css = React12__default.default.useMemo(
|
|
8975
10493
|
() => [
|
|
8976
10494
|
`#${gridId}{display:grid;grid-template-columns:repeat(${sm},1fr);gap:1rem}`,
|
|
8977
10495
|
`@media(min-width:768px){#${gridId}{grid-template-columns:repeat(${md},1fr)}}`,
|
|
@@ -9049,12 +10567,12 @@ function SearchInput({
|
|
|
9049
10567
|
className,
|
|
9050
10568
|
classNames
|
|
9051
10569
|
}) {
|
|
9052
|
-
const mergedOptions =
|
|
10570
|
+
const mergedOptions = React12.useMemo(
|
|
9053
10571
|
() => categoryId ? { ...searchOptions, category: categoryId } : searchOptions ?? {},
|
|
9054
10572
|
[searchOptions, categoryId]
|
|
9055
10573
|
);
|
|
9056
10574
|
const { results, isLoading, query, setQuery, clear } = useSearch(mergedOptions);
|
|
9057
|
-
const handleValueChange =
|
|
10575
|
+
const handleValueChange = React12.useCallback(
|
|
9058
10576
|
(value) => {
|
|
9059
10577
|
setQuery(value);
|
|
9060
10578
|
},
|
|
@@ -9153,7 +10671,7 @@ function CategoryFilter({
|
|
|
9153
10671
|
classNames
|
|
9154
10672
|
}) {
|
|
9155
10673
|
const { categories, isLoading } = useCategories();
|
|
9156
|
-
const handleValueChange =
|
|
10674
|
+
const handleValueChange = React12.useCallback(
|
|
9157
10675
|
(value) => {
|
|
9158
10676
|
onSelect(value === ALL_VALUE ? null : String(value));
|
|
9159
10677
|
},
|
|
@@ -9220,10 +10738,10 @@ function DiscountInput({
|
|
|
9220
10738
|
className,
|
|
9221
10739
|
classNames
|
|
9222
10740
|
}) {
|
|
9223
|
-
const [code, setCode] =
|
|
9224
|
-
const [appliedValidation, setAppliedValidation] =
|
|
10741
|
+
const [code, setCode] = React12.useState("");
|
|
10742
|
+
const [appliedValidation, setAppliedValidation] = React12.useState(null);
|
|
9225
10743
|
const { validate, isValidating, error } = useValidateDiscount();
|
|
9226
|
-
const handleApply =
|
|
10744
|
+
const handleApply = React12.useCallback(async () => {
|
|
9227
10745
|
const trimmed = code.trim();
|
|
9228
10746
|
if (!trimmed) return;
|
|
9229
10747
|
const result = await validate(trimmed, orderSubtotal, locationId);
|
|
@@ -9236,12 +10754,12 @@ function DiscountInput({
|
|
|
9236
10754
|
}
|
|
9237
10755
|
}
|
|
9238
10756
|
}, [code, validate, orderSubtotal, locationId, onApply]);
|
|
9239
|
-
const handleClear =
|
|
10757
|
+
const handleClear = React12.useCallback(() => {
|
|
9240
10758
|
setCode("");
|
|
9241
10759
|
setAppliedValidation(null);
|
|
9242
10760
|
onClear?.();
|
|
9243
10761
|
}, [onClear]);
|
|
9244
|
-
const handleKeyDown =
|
|
10762
|
+
const handleKeyDown = React12.useCallback(
|
|
9245
10763
|
(e) => {
|
|
9246
10764
|
if (e.key === "Enter") {
|
|
9247
10765
|
void handleApply();
|
|
@@ -9332,7 +10850,7 @@ function CategoryGrid({
|
|
|
9332
10850
|
enabled: categoriesProp === void 0
|
|
9333
10851
|
});
|
|
9334
10852
|
const categories = categoriesProp ?? fetched;
|
|
9335
|
-
const rawId =
|
|
10853
|
+
const rawId = React12__default.default.useId();
|
|
9336
10854
|
const gridId = `cimplify-cat-grid-${rawId.replace(/:/g, "")}`;
|
|
9337
10855
|
const sm = columns?.sm ?? 2;
|
|
9338
10856
|
const md = columns?.md ?? 3;
|
|
@@ -9558,7 +11076,7 @@ function OrderSummary({
|
|
|
9558
11076
|
/* @__PURE__ */ jsxRuntime.jsx("p", { children: order.delivery_address })
|
|
9559
11077
|
] }),
|
|
9560
11078
|
/* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-order-items": true, className: classNames?.items, children: order.items.map(
|
|
9561
|
-
(item) => renderLineItem ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
11079
|
+
(item) => renderLineItem ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderLineItem(item) }, item.id) : /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-line-item": true, className: classNames?.lineItem, children: [
|
|
9562
11080
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-line-info": true, children: [
|
|
9563
11081
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-order-line-qty": true, children: [
|
|
9564
11082
|
item.quantity,
|
|
@@ -10216,13 +11734,13 @@ function BookingPage({
|
|
|
10216
11734
|
const { addItem } = useCart();
|
|
10217
11735
|
const { client } = useCimplifyClient();
|
|
10218
11736
|
const isReschedule = existingBooking !== void 0;
|
|
10219
|
-
const [step, setStep] =
|
|
10220
|
-
const [selectedSlot, setSelectedSlot] =
|
|
10221
|
-
const [selectedDate, setSelectedDate] =
|
|
10222
|
-
const [selectedStaffId, setSelectedStaffId] =
|
|
10223
|
-
const [selectedResourceId, setSelectedResourceId] =
|
|
10224
|
-
const [isSubmitting, setIsSubmitting] =
|
|
10225
|
-
const [error, setError] =
|
|
11737
|
+
const [step, setStep] = React12.useState(STEP.SELECT_SLOT);
|
|
11738
|
+
const [selectedSlot, setSelectedSlot] = React12.useState(null);
|
|
11739
|
+
const [selectedDate, setSelectedDate] = React12.useState(null);
|
|
11740
|
+
const [selectedStaffId, setSelectedStaffId] = React12.useState(null);
|
|
11741
|
+
const [selectedResourceId, setSelectedResourceId] = React12.useState(null);
|
|
11742
|
+
const [isSubmitting, setIsSubmitting] = React12.useState(false);
|
|
11743
|
+
const [error, setError] = React12.useState(null);
|
|
10226
11744
|
const hasResourceStep = resources && resources.length > 0;
|
|
10227
11745
|
const hasStaffStep = staff && staff.length > 0;
|
|
10228
11746
|
const depositType = product?.deposit_type;
|
|
@@ -10230,7 +11748,7 @@ function BookingPage({
|
|
|
10230
11748
|
const hasDeposit = depositType !== void 0 && depositType !== "none" && depositAmount !== void 0 && chunk7Y2O3E4D_js.parsePrice(depositAmount) !== 0;
|
|
10231
11749
|
const cancellationMinutes = product?.cancellation_window_minutes;
|
|
10232
11750
|
const noShowFee = product?.no_show_fee;
|
|
10233
|
-
const handleSlotSelect =
|
|
11751
|
+
const handleSlotSelect = React12.useCallback(
|
|
10234
11752
|
(slot, date) => {
|
|
10235
11753
|
setSelectedSlot(slot);
|
|
10236
11754
|
setSelectedDate(date);
|
|
@@ -10245,7 +11763,7 @@ function BookingPage({
|
|
|
10245
11763
|
},
|
|
10246
11764
|
[hasResourceStep, hasStaffStep]
|
|
10247
11765
|
);
|
|
10248
|
-
const handleResourceSelect =
|
|
11766
|
+
const handleResourceSelect = React12.useCallback(
|
|
10249
11767
|
(resourceId) => {
|
|
10250
11768
|
setSelectedResourceId(resourceId);
|
|
10251
11769
|
if (hasStaffStep) {
|
|
@@ -10256,11 +11774,11 @@ function BookingPage({
|
|
|
10256
11774
|
},
|
|
10257
11775
|
[hasStaffStep]
|
|
10258
11776
|
);
|
|
10259
|
-
const handleStaffSelect =
|
|
11777
|
+
const handleStaffSelect = React12.useCallback((staffId) => {
|
|
10260
11778
|
setSelectedStaffId(staffId);
|
|
10261
11779
|
setStep(STEP.CONFIRM);
|
|
10262
11780
|
}, []);
|
|
10263
|
-
const handleBack =
|
|
11781
|
+
const handleBack = React12.useCallback(() => {
|
|
10264
11782
|
setError(null);
|
|
10265
11783
|
if (step === STEP.CONFIRM && hasStaffStep) {
|
|
10266
11784
|
setStep(STEP.SELECT_STAFF);
|
|
@@ -10274,7 +11792,7 @@ function BookingPage({
|
|
|
10274
11792
|
onBack?.();
|
|
10275
11793
|
}
|
|
10276
11794
|
}, [step, hasStaffStep, hasResourceStep, onBack]);
|
|
10277
|
-
const handleConfirm =
|
|
11795
|
+
const handleConfirm = React12.useCallback(async () => {
|
|
10278
11796
|
if (!selectedSlot || !selectedDate) return;
|
|
10279
11797
|
setIsSubmitting(true);
|
|
10280
11798
|
setError(null);
|
|
@@ -10476,9 +11994,9 @@ function BookingsPage({
|
|
|
10476
11994
|
className,
|
|
10477
11995
|
classNames
|
|
10478
11996
|
}) {
|
|
10479
|
-
const [filter, setFilter] =
|
|
10480
|
-
const [selectedBooking, setSelectedBooking] =
|
|
10481
|
-
const handleBookingClick =
|
|
11997
|
+
const [filter, setFilter] = React12.useState("all");
|
|
11998
|
+
const [selectedBooking, setSelectedBooking] = React12.useState(null);
|
|
11999
|
+
const handleBookingClick = React12.useCallback(
|
|
10482
12000
|
(booking) => {
|
|
10483
12001
|
if (onBookingNavigate) {
|
|
10484
12002
|
onBookingNavigate(booking);
|
|
@@ -10488,7 +12006,7 @@ function BookingsPage({
|
|
|
10488
12006
|
},
|
|
10489
12007
|
[onBookingNavigate]
|
|
10490
12008
|
);
|
|
10491
|
-
const handleBack =
|
|
12009
|
+
const handleBack = React12.useCallback(() => {
|
|
10492
12010
|
setSelectedBooking(null);
|
|
10493
12011
|
}, []);
|
|
10494
12012
|
if (selectedBooking && !onBookingNavigate) {
|
|
@@ -10718,7 +12236,7 @@ function DefaultCatalogueLayout({
|
|
|
10718
12236
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No products found" }),
|
|
10719
12237
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your filters" })
|
|
10720
12238
|
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: products.map(
|
|
10721
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
12239
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10722
12240
|
ProductCard,
|
|
10723
12241
|
{
|
|
10724
12242
|
product,
|
|
@@ -10825,7 +12343,7 @@ function CompactCatalogueLayout({
|
|
|
10825
12343
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No items found" }),
|
|
10826
12344
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different category or search" })
|
|
10827
12345
|
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: products.map(
|
|
10828
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
12346
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10829
12347
|
ProductCard,
|
|
10830
12348
|
{
|
|
10831
12349
|
product,
|
|
@@ -10848,8 +12366,8 @@ var BUILT_IN_LAYOUTS = {
|
|
|
10848
12366
|
["compact" /* Compact */]: CompactCatalogueLayout
|
|
10849
12367
|
};
|
|
10850
12368
|
function useDebounce(value, delay) {
|
|
10851
|
-
const [debounced, setDebounced] =
|
|
10852
|
-
|
|
12369
|
+
const [debounced, setDebounced] = React12__default.default.useState(value);
|
|
12370
|
+
React12__default.default.useEffect(() => {
|
|
10853
12371
|
const timer = setTimeout(() => setDebounced(value), delay);
|
|
10854
12372
|
return () => clearTimeout(timer);
|
|
10855
12373
|
}, [value, delay]);
|
|
@@ -10873,15 +12391,15 @@ function CataloguePage({
|
|
|
10873
12391
|
className,
|
|
10874
12392
|
classNames
|
|
10875
12393
|
}) {
|
|
10876
|
-
const [selectedCategory, setSelectedCategory] =
|
|
10877
|
-
const [searchQuery, setSearchQuery] =
|
|
10878
|
-
const [sortBy, setSortBy] =
|
|
10879
|
-
const [sortOrder, setSortOrder] =
|
|
10880
|
-
const [inStockOnly, setInStockOnly] =
|
|
10881
|
-
const [selectedTags, setSelectedTags] =
|
|
10882
|
-
const [minPrice, setMinPrice] =
|
|
10883
|
-
const [maxPrice, setMaxPrice] =
|
|
10884
|
-
const [page, setPage] =
|
|
12394
|
+
const [selectedCategory, setSelectedCategory] = React12.useState(null);
|
|
12395
|
+
const [searchQuery, setSearchQuery] = React12.useState("");
|
|
12396
|
+
const [sortBy, setSortBy] = React12.useState(defaultSort?.by ?? "created_at");
|
|
12397
|
+
const [sortOrder, setSortOrder] = React12.useState(defaultSort?.order ?? "desc");
|
|
12398
|
+
const [inStockOnly, setInStockOnly] = React12.useState(false);
|
|
12399
|
+
const [selectedTags, setSelectedTags] = React12.useState([]);
|
|
12400
|
+
const [minPrice, setMinPrice] = React12.useState("");
|
|
12401
|
+
const [maxPrice, setMaxPrice] = React12.useState("");
|
|
12402
|
+
const [page, setPage] = React12.useState(1);
|
|
10885
12403
|
const debouncedSearch = useDebounce(searchQuery, 300);
|
|
10886
12404
|
const { products: fetchedProducts, isLoading, pagination } = useProducts({
|
|
10887
12405
|
enabled: productsProp === void 0,
|
|
@@ -10902,22 +12420,22 @@ function CataloguePage({
|
|
|
10902
12420
|
const products = productsProp ?? fetchedProducts;
|
|
10903
12421
|
const categories = categoriesProp ?? fetchedCategories;
|
|
10904
12422
|
const totalPages = pagination?.total_pages ?? 1;
|
|
10905
|
-
const handleCategoryChange =
|
|
12423
|
+
const handleCategoryChange = React12.useCallback((id) => {
|
|
10906
12424
|
setSelectedCategory(id);
|
|
10907
12425
|
setPage(1);
|
|
10908
12426
|
}, []);
|
|
10909
|
-
const handleSortChange =
|
|
12427
|
+
const handleSortChange = React12.useCallback((by, order) => {
|
|
10910
12428
|
setSortBy(by);
|
|
10911
12429
|
setSortOrder(order);
|
|
10912
12430
|
setPage(1);
|
|
10913
12431
|
}, []);
|
|
10914
|
-
const handleTagToggle =
|
|
12432
|
+
const handleTagToggle = React12.useCallback((tag) => {
|
|
10915
12433
|
setSelectedTags(
|
|
10916
12434
|
(prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
|
|
10917
12435
|
);
|
|
10918
12436
|
setPage(1);
|
|
10919
12437
|
}, []);
|
|
10920
|
-
const handlePriceRangeChange =
|
|
12438
|
+
const handlePriceRangeChange = React12.useCallback((min, max) => {
|
|
10921
12439
|
setMinPrice(min);
|
|
10922
12440
|
setMaxPrice(max);
|
|
10923
12441
|
setPage(1);
|
|
@@ -12021,36 +13539,36 @@ function CartPage({
|
|
|
12021
13539
|
}
|
|
12022
13540
|
) });
|
|
12023
13541
|
}
|
|
12024
|
-
var CartDrawerContext =
|
|
13542
|
+
var CartDrawerContext = React12.createContext(null);
|
|
12025
13543
|
function useCartDrawer() {
|
|
12026
|
-
const ctx =
|
|
13544
|
+
const ctx = React12.useContext(CartDrawerContext);
|
|
12027
13545
|
if (!ctx) {
|
|
12028
13546
|
throw new Error("useCartDrawer must be used within <CartDrawerProvider>");
|
|
12029
13547
|
}
|
|
12030
13548
|
return ctx;
|
|
12031
13549
|
}
|
|
12032
13550
|
function CartDrawerProvider({ children, openOnAdd = true }) {
|
|
12033
|
-
const [isOpen, setIsOpen] =
|
|
13551
|
+
const [isOpen, setIsOpen] = React12.useState(false);
|
|
12034
13552
|
const cart = useCart();
|
|
12035
|
-
const lastPendingRef =
|
|
12036
|
-
const open =
|
|
12037
|
-
const close =
|
|
12038
|
-
const toggle =
|
|
12039
|
-
|
|
13553
|
+
const lastPendingRef = React12.useRef(0);
|
|
13554
|
+
const open = React12.useCallback(() => setIsOpen(true), []);
|
|
13555
|
+
const close = React12.useCallback(() => setIsOpen(false), []);
|
|
13556
|
+
const toggle = React12.useCallback(() => setIsOpen((v) => !v), []);
|
|
13557
|
+
React12.useEffect(() => {
|
|
12040
13558
|
if (!openOnAdd) return;
|
|
12041
13559
|
if (cart.pendingOpCount > lastPendingRef.current && cart.pendingOpCount > 0) {
|
|
12042
13560
|
setIsOpen(true);
|
|
12043
13561
|
}
|
|
12044
13562
|
lastPendingRef.current = cart.pendingOpCount;
|
|
12045
13563
|
}, [cart.pendingOpCount, openOnAdd]);
|
|
12046
|
-
const value =
|
|
13564
|
+
const value = React12.useMemo(() => ({ isOpen, open, close, toggle }), [isOpen, open, close, toggle]);
|
|
12047
13565
|
return /* @__PURE__ */ jsxRuntime.jsx(CartDrawerContext.Provider, { value, children });
|
|
12048
13566
|
}
|
|
12049
13567
|
function useAnimatedNumber(target, durationMs = 250) {
|
|
12050
|
-
const [value, setValue] =
|
|
12051
|
-
const fromRef =
|
|
12052
|
-
const startRef =
|
|
12053
|
-
|
|
13568
|
+
const [value, setValue] = React12.useState(target);
|
|
13569
|
+
const fromRef = React12.useRef(target);
|
|
13570
|
+
const startRef = React12.useRef(null);
|
|
13571
|
+
React12.useEffect(() => {
|
|
12054
13572
|
fromRef.current = value;
|
|
12055
13573
|
startRef.current = null;
|
|
12056
13574
|
let raf = 0;
|
|
@@ -12078,7 +13596,7 @@ function CartDrawer({
|
|
|
12078
13596
|
const cart = useCart();
|
|
12079
13597
|
const subtotalNum = chunk7Y2O3E4D_js.parsePrice(cart.subtotal);
|
|
12080
13598
|
const animatedSubtotal = useAnimatedNumber(subtotalNum);
|
|
12081
|
-
|
|
13599
|
+
React12.useEffect(() => {
|
|
12082
13600
|
if (!isOpen) return;
|
|
12083
13601
|
const original = document.body.style.overflow;
|
|
12084
13602
|
document.body.style.overflow = "hidden";
|
|
@@ -12176,7 +13694,7 @@ function CartDrawer({
|
|
|
12176
13694
|
}
|
|
12177
13695
|
) })
|
|
12178
13696
|
] }),
|
|
12179
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
13697
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { onShop: handleShop }) : /* @__PURE__ */ jsxRuntime.jsx(CartSummary, { showTotals: false, showCheckoutButton: false }) }),
|
|
12180
13698
|
!cart.isEmpty && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "border-t border-border px-6 py-5 shrink-0 space-y-3 bg-background", children: [
|
|
12181
13699
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
|
|
12182
13700
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Subtotal" }),
|
|
@@ -12216,7 +13734,7 @@ function CartDrawer({
|
|
|
12216
13734
|
}
|
|
12217
13735
|
);
|
|
12218
13736
|
}
|
|
12219
|
-
function
|
|
13737
|
+
function EmptyState2({ onShop }) {
|
|
12220
13738
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-empty": true, className: "h-full grid place-items-center text-center py-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5 max-w-[260px]", children: [
|
|
12221
13739
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-20 h-20 mx-auto", children: [
|
|
12222
13740
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-muted" }),
|
|
@@ -12283,9 +13801,9 @@ function DefaultCollectionLayout({
|
|
|
12283
13801
|
onQuickAdd,
|
|
12284
13802
|
className
|
|
12285
13803
|
}) {
|
|
12286
|
-
const [searchQuery, setSearchQuery] =
|
|
12287
|
-
const [activeTag, setActiveTag] =
|
|
12288
|
-
const collectionTags =
|
|
13804
|
+
const [searchQuery, setSearchQuery] = React12.useState("");
|
|
13805
|
+
const [activeTag, setActiveTag] = React12.useState(null);
|
|
13806
|
+
const collectionTags = React12.useMemo(() => {
|
|
12289
13807
|
const tagSet = /* @__PURE__ */ new Set();
|
|
12290
13808
|
for (const p of products) {
|
|
12291
13809
|
if (p.tags) {
|
|
@@ -12294,7 +13812,7 @@ function DefaultCollectionLayout({
|
|
|
12294
13812
|
}
|
|
12295
13813
|
return Array.from(tagSet).slice(0, 6);
|
|
12296
13814
|
}, [products]);
|
|
12297
|
-
const filtered =
|
|
13815
|
+
const filtered = React12.useMemo(() => {
|
|
12298
13816
|
let result = products;
|
|
12299
13817
|
if (searchQuery.trim().length >= 2) {
|
|
12300
13818
|
const q = searchQuery.toLowerCase();
|
|
@@ -12369,7 +13887,7 @@ function DefaultCollectionLayout({
|
|
|
12369
13887
|
] })
|
|
12370
13888
|
] }),
|
|
12371
13889
|
filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
|
|
12372
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
13890
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12373
13891
|
ProductCard,
|
|
12374
13892
|
{
|
|
12375
13893
|
product,
|
|
@@ -12422,7 +13940,7 @@ function FeaturedCollectionLayout({
|
|
|
12422
13940
|
] })
|
|
12423
13941
|
] }),
|
|
12424
13942
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: products.map(
|
|
12425
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
13943
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12426
13944
|
ProductCard,
|
|
12427
13945
|
{
|
|
12428
13946
|
product,
|
|
@@ -12444,10 +13962,10 @@ function CatalogueCollectionLayout({
|
|
|
12444
13962
|
onQuickAdd,
|
|
12445
13963
|
className
|
|
12446
13964
|
}) {
|
|
12447
|
-
const [searchQuery, setSearchQuery] =
|
|
12448
|
-
const [activeCategory, setActiveCategory] =
|
|
12449
|
-
const [sortBy, setSortBy] =
|
|
12450
|
-
const categories =
|
|
13965
|
+
const [searchQuery, setSearchQuery] = React12.useState("");
|
|
13966
|
+
const [activeCategory, setActiveCategory] = React12.useState(null);
|
|
13967
|
+
const [sortBy, setSortBy] = React12.useState("default");
|
|
13968
|
+
const categories = React12.useMemo(() => {
|
|
12451
13969
|
const cats = /* @__PURE__ */ new Map();
|
|
12452
13970
|
for (const p of products) {
|
|
12453
13971
|
if (p.category_id && p.tags) {
|
|
@@ -12458,7 +13976,7 @@ function CatalogueCollectionLayout({
|
|
|
12458
13976
|
}
|
|
12459
13977
|
return Array.from(cats.values()).slice(0, 8);
|
|
12460
13978
|
}, [products]);
|
|
12461
|
-
const filtered =
|
|
13979
|
+
const filtered = React12.useMemo(() => {
|
|
12462
13980
|
let result = products;
|
|
12463
13981
|
if (searchQuery.trim().length >= 2) {
|
|
12464
13982
|
const q = searchQuery.toLowerCase();
|
|
@@ -12546,7 +14064,7 @@ function CatalogueCollectionLayout({
|
|
|
12546
14064
|
] })
|
|
12547
14065
|
] }),
|
|
12548
14066
|
filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
|
|
12549
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14067
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12550
14068
|
ProductCard,
|
|
12551
14069
|
{
|
|
12552
14070
|
product,
|
|
@@ -12725,13 +14243,13 @@ function OrderHistoryPage({
|
|
|
12725
14243
|
className,
|
|
12726
14244
|
classNames
|
|
12727
14245
|
}) {
|
|
12728
|
-
const [statusFilter, setStatusFilter] =
|
|
12729
|
-
const [selectedOrder, setSelectedOrder] =
|
|
12730
|
-
const handleTabChange =
|
|
14246
|
+
const [statusFilter, setStatusFilter] = React12.useState(void 0);
|
|
14247
|
+
const [selectedOrder, setSelectedOrder] = React12.useState(null);
|
|
14248
|
+
const handleTabChange = React12.useCallback((value) => {
|
|
12731
14249
|
const filter = STATUS_FILTERS.find((f) => f.tabValue === value);
|
|
12732
14250
|
setStatusFilter(filter?.value);
|
|
12733
14251
|
}, []);
|
|
12734
|
-
const handleOrderClick =
|
|
14252
|
+
const handleOrderClick = React12.useCallback(
|
|
12735
14253
|
(order) => {
|
|
12736
14254
|
if (onOrderNavigate) {
|
|
12737
14255
|
onOrderNavigate(order);
|
|
@@ -12741,7 +14259,7 @@ function OrderHistoryPage({
|
|
|
12741
14259
|
},
|
|
12742
14260
|
[onOrderNavigate]
|
|
12743
14261
|
);
|
|
12744
|
-
const handleBack =
|
|
14262
|
+
const handleBack = React12.useCallback(() => {
|
|
12745
14263
|
setSelectedOrder(null);
|
|
12746
14264
|
}, []);
|
|
12747
14265
|
const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? "all";
|
|
@@ -12926,7 +14444,7 @@ function DefaultSearchLayout({
|
|
|
12926
14444
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
|
|
12927
14445
|
/* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
|
|
12928
14446
|
] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: results.map(
|
|
12929
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14447
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12930
14448
|
ProductCard,
|
|
12931
14449
|
{
|
|
12932
14450
|
product,
|
|
@@ -13028,7 +14546,7 @@ function CompactSearchLayout({
|
|
|
13028
14546
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
|
|
13029
14547
|
/* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
|
|
13030
14548
|
] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: results.map(
|
|
13031
|
-
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14549
|
+
(product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
13032
14550
|
ProductCard,
|
|
13033
14551
|
{
|
|
13034
14552
|
product,
|
|
@@ -13359,11 +14877,11 @@ function DeliveryEstimate({
|
|
|
13359
14877
|
}) {
|
|
13360
14878
|
const context = useOptionalCimplifyClient();
|
|
13361
14879
|
const client = context?.client ?? null;
|
|
13362
|
-
const [result, setResult] =
|
|
13363
|
-
const [isLoading, setIsLoading] =
|
|
13364
|
-
const [error, setError] =
|
|
13365
|
-
const requestIdRef =
|
|
13366
|
-
|
|
14880
|
+
const [result, setResult] = React12.useState(null);
|
|
14881
|
+
const [isLoading, setIsLoading] = React12.useState(true);
|
|
14882
|
+
const [error, setError] = React12.useState(null);
|
|
14883
|
+
const requestIdRef = React12.useRef(0);
|
|
14884
|
+
React12.useEffect(() => {
|
|
13367
14885
|
if (!client) return;
|
|
13368
14886
|
const nextRequestId = ++requestIdRef.current;
|
|
13369
14887
|
setIsLoading(true);
|
|
@@ -13444,10 +14962,10 @@ function CurrencySelector({
|
|
|
13444
14962
|
}) {
|
|
13445
14963
|
const context = useOptionalCimplifyClient();
|
|
13446
14964
|
const client = context?.client ?? null;
|
|
13447
|
-
const [rates, setRates] =
|
|
13448
|
-
const [isLoadingRates, setIsLoadingRates] =
|
|
13449
|
-
const requestIdRef =
|
|
13450
|
-
|
|
14965
|
+
const [rates, setRates] = React12.useState({});
|
|
14966
|
+
const [isLoadingRates, setIsLoadingRates] = React12.useState(false);
|
|
14967
|
+
const requestIdRef = React12.useRef(0);
|
|
14968
|
+
React12.useEffect(() => {
|
|
13451
14969
|
if (!showRate || !baseCurrency || !client) return;
|
|
13452
14970
|
const targets = currencies.filter((c) => c !== baseCurrency);
|
|
13453
14971
|
if (targets.length === 0) return;
|
|
@@ -13510,11 +15028,11 @@ function ChatWidget({
|
|
|
13510
15028
|
}) {
|
|
13511
15029
|
const context = useOptionalCimplifyClient();
|
|
13512
15030
|
const client = clientProp ?? context?.client;
|
|
13513
|
-
const [open, setOpen] =
|
|
13514
|
-
const [unread, setUnread] =
|
|
15031
|
+
const [open, setOpen] = React12.useState(defaultOpen);
|
|
15032
|
+
const [unread, setUnread] = React12.useState(0);
|
|
13515
15033
|
const { messages, isLoading, isSending, error, isActive, send, startConversation } = useChat({ client, pollInterval });
|
|
13516
|
-
const prevCountRef =
|
|
13517
|
-
|
|
15034
|
+
const prevCountRef = React12.useRef(messages.length);
|
|
15035
|
+
React12.useEffect(() => {
|
|
13518
15036
|
if (!open && messages.length > prevCountRef.current) {
|
|
13519
15037
|
const newMessages = messages.slice(prevCountRef.current);
|
|
13520
15038
|
const incomingCount = newMessages.filter(
|
|
@@ -13524,11 +15042,11 @@ function ChatWidget({
|
|
|
13524
15042
|
}
|
|
13525
15043
|
prevCountRef.current = messages.length;
|
|
13526
15044
|
}, [messages, open]);
|
|
13527
|
-
const handleOpen =
|
|
15045
|
+
const handleOpen = React12.useCallback(() => {
|
|
13528
15046
|
setOpen(true);
|
|
13529
15047
|
setUnread(0);
|
|
13530
15048
|
}, []);
|
|
13531
|
-
const handleClose =
|
|
15049
|
+
const handleClose = React12.useCallback(() => setOpen(false), []);
|
|
13532
15050
|
const isLeft = position === "bottom-left";
|
|
13533
15051
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13534
15052
|
"div",
|
|
@@ -13770,8 +15288,8 @@ function MessageList({
|
|
|
13770
15288
|
isSending,
|
|
13771
15289
|
className
|
|
13772
15290
|
}) {
|
|
13773
|
-
const bottomRef =
|
|
13774
|
-
|
|
15291
|
+
const bottomRef = React12.useRef(null);
|
|
15292
|
+
React12.useEffect(() => {
|
|
13775
15293
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
13776
15294
|
}, [messages.length, isSending]);
|
|
13777
15295
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -13831,9 +15349,9 @@ function ChatInput({
|
|
|
13831
15349
|
onSend,
|
|
13832
15350
|
className
|
|
13833
15351
|
}) {
|
|
13834
|
-
const [value, setValue] =
|
|
13835
|
-
const textareaRef =
|
|
13836
|
-
const handleSend =
|
|
15352
|
+
const [value, setValue] = React12.useState("");
|
|
15353
|
+
const textareaRef = React12.useRef(null);
|
|
15354
|
+
const handleSend = React12.useCallback(() => {
|
|
13837
15355
|
const trimmed = value.trim();
|
|
13838
15356
|
if (!trimmed || isSending) return;
|
|
13839
15357
|
setValue("");
|
|
@@ -13842,7 +15360,7 @@ function ChatInput({
|
|
|
13842
15360
|
}
|
|
13843
15361
|
onSend(trimmed);
|
|
13844
15362
|
}, [value, isSending, onSend]);
|
|
13845
|
-
const handleKeyDown =
|
|
15363
|
+
const handleKeyDown = React12.useCallback(
|
|
13846
15364
|
(e) => {
|
|
13847
15365
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
13848
15366
|
e.preventDefault();
|
|
@@ -13851,7 +15369,7 @@ function ChatInput({
|
|
|
13851
15369
|
},
|
|
13852
15370
|
[handleSend]
|
|
13853
15371
|
);
|
|
13854
|
-
const handleInput =
|
|
15372
|
+
const handleInput = React12.useCallback(() => {
|
|
13855
15373
|
const el = textareaRef.current;
|
|
13856
15374
|
if (!el) return;
|
|
13857
15375
|
el.style.height = "auto";
|
|
@@ -13987,20 +15505,35 @@ Object.defineProperty(exports, "getVariantDisplayName", {
|
|
|
13987
15505
|
get: function () { return chunkJYPLT56O_js.getVariantDisplayName; }
|
|
13988
15506
|
});
|
|
13989
15507
|
exports.AccommodationCard = AccommodationCard;
|
|
15508
|
+
exports.AccountContent = AccountContent;
|
|
15509
|
+
exports.AccountDashboardPage = AccountDashboardPage;
|
|
15510
|
+
exports.AccountHero = AccountHero;
|
|
15511
|
+
exports.AccountIdentityStrip = AccountIdentityStrip;
|
|
15512
|
+
exports.AccountNav = AccountNav;
|
|
15513
|
+
exports.AccountOrderDetailPage = AccountOrderDetailPage;
|
|
15514
|
+
exports.AccountOrdersPage = AccountOrdersPage;
|
|
15515
|
+
exports.AccountShell = AccountShell;
|
|
15516
|
+
exports.AccountSidebar = AccountSidebar;
|
|
15517
|
+
exports.AccountSignedOutPrompt = AccountSignedOutPrompt;
|
|
15518
|
+
exports.AccountSubscriptionDetailPage = AccountSubscriptionDetailPage;
|
|
15519
|
+
exports.AccountSubscriptionsPage = AccountSubscriptionsPage;
|
|
13990
15520
|
exports.Ad = Ad;
|
|
13991
15521
|
exports.AdProvider = AdProvider;
|
|
13992
15522
|
exports.AddOnSelector = AddOnSelector;
|
|
13993
15523
|
exports.AddressElement = AddressElement;
|
|
13994
15524
|
exports.AuthElement = AuthElement;
|
|
13995
15525
|
exports.AvailabilityBadge = AvailabilityBadge;
|
|
15526
|
+
exports.BackLink = BackLink;
|
|
13996
15527
|
exports.BillingPlanSelector = BillingPlanSelector;
|
|
13997
15528
|
exports.BookingCard = BookingCard;
|
|
13998
15529
|
exports.BookingList = BookingList;
|
|
13999
15530
|
exports.BookingPage = BookingPage;
|
|
14000
15531
|
exports.BookingsPage = BookingsPage;
|
|
15532
|
+
exports.BoxIcon24 = BoxIcon24;
|
|
14001
15533
|
exports.BundleProductCard = BundleProductCard;
|
|
14002
15534
|
exports.BundleProductLayout = BundleProductLayout;
|
|
14003
15535
|
exports.BundleSelector = BundleSelector;
|
|
15536
|
+
exports.Button = Button;
|
|
14004
15537
|
exports.CardImage = CardImage;
|
|
14005
15538
|
exports.CardShell = CardShell;
|
|
14006
15539
|
exports.CardVariant = CardVariant;
|
|
@@ -14015,6 +15548,7 @@ exports.CatalogueTemplate = CatalogueTemplate;
|
|
|
14015
15548
|
exports.CategoryFilter = CategoryFilter;
|
|
14016
15549
|
exports.CategoryGrid = CategoryGrid;
|
|
14017
15550
|
exports.ChatWidget = ChatWidget;
|
|
15551
|
+
exports.CheckIcon = CheckIcon;
|
|
14018
15552
|
exports.CheckoutPage = CheckoutPage;
|
|
14019
15553
|
exports.CimplifyAccount = CimplifyAccount;
|
|
14020
15554
|
exports.CimplifyCheckout = CimplifyCheckout;
|
|
@@ -14029,9 +15563,13 @@ exports.CompactServiceCard = CompactServiceCard;
|
|
|
14029
15563
|
exports.CompositeProductCard = CompositeProductCard;
|
|
14030
15564
|
exports.CompositeProductLayout = CompositeProductLayout;
|
|
14031
15565
|
exports.CompositeSelector = CompositeSelector;
|
|
15566
|
+
exports.ContextCard = ContextCard;
|
|
15567
|
+
exports.ContinuityCard = ContinuityCard;
|
|
14032
15568
|
exports.CurrencySelector = CurrencySelector;
|
|
14033
15569
|
exports.CustomAttributesTable = CustomAttributesTable;
|
|
14034
15570
|
exports.CustomerInputFields = CustomerInputFields;
|
|
15571
|
+
exports.DashboardIcon = DashboardIcon;
|
|
15572
|
+
exports.DashboardIcon20 = DashboardIcon20;
|
|
14035
15573
|
exports.DatePicker = DatePicker;
|
|
14036
15574
|
exports.DateSlotPicker = DateSlotPicker;
|
|
14037
15575
|
exports.DealBanner = DealBanner;
|
|
@@ -14042,22 +15580,45 @@ exports.DefaultCollectionLayout = DefaultCollectionLayout;
|
|
|
14042
15580
|
exports.DefaultProductLayout = DefaultProductLayout;
|
|
14043
15581
|
exports.DefaultSearchLayout = DefaultSearchLayout;
|
|
14044
15582
|
exports.DeliveryEstimate = DeliveryEstimate;
|
|
15583
|
+
exports.DeliveryTruckIcon = DeliveryTruckIcon;
|
|
14045
15584
|
exports.DigitalProductCard = DigitalProductCard;
|
|
14046
15585
|
exports.DigitalProductLayout = DigitalProductLayout;
|
|
14047
15586
|
exports.DiscountInput = DiscountInput;
|
|
14048
15587
|
exports.ElementsProvider = ElementsProvider;
|
|
15588
|
+
exports.EmptyState = EmptyState;
|
|
15589
|
+
exports.ErrorState = ErrorState;
|
|
14049
15590
|
exports.FeaturedCollectionLayout = FeaturedCollectionLayout;
|
|
15591
|
+
exports.FilterTabs = FilterTabs;
|
|
14050
15592
|
exports.FoodProductCard = FoodProductCard;
|
|
14051
15593
|
exports.FoodProductLayout = FoodProductLayout;
|
|
15594
|
+
exports.HappeningCard = HappeningCard;
|
|
15595
|
+
exports.IdentityIcon = IdentityIcon;
|
|
15596
|
+
exports.IdentityOfframp = IdentityOfframp;
|
|
14052
15597
|
exports.InventoryBadge = InventoryBadge;
|
|
15598
|
+
exports.ItemsCard = ItemsCard;
|
|
14053
15599
|
exports.LeaseServiceCard = LeaseServiceCard;
|
|
14054
15600
|
exports.LocationPicker = LocationPicker;
|
|
14055
15601
|
exports.MediaGallery = MediaGallery;
|
|
14056
15602
|
exports.MetadataStringList = MetadataStringList;
|
|
15603
|
+
exports.MobileAccountShell = MobileAccountShell;
|
|
15604
|
+
exports.MobileBackButton = MobileBackButton;
|
|
15605
|
+
exports.MobileMoreButton = MobileMoreButton;
|
|
15606
|
+
exports.MobileTabBar = MobileTabBar;
|
|
15607
|
+
exports.NextDeliveryCard = NextDeliveryCard;
|
|
15608
|
+
exports.OrderDetailHeader = OrderDetailHeader;
|
|
15609
|
+
exports.OrderDetailMetaPipe = OrderDetailMetaPipe;
|
|
14057
15610
|
exports.OrderDetailPage = OrderDetailPage;
|
|
14058
15611
|
exports.OrderHistory = OrderHistory;
|
|
14059
15612
|
exports.OrderHistoryPage = OrderHistoryPage;
|
|
15613
|
+
exports.OrderList = OrderList;
|
|
15614
|
+
exports.OrderRow = OrderRow;
|
|
14060
15615
|
exports.OrderSummary = OrderSummary;
|
|
15616
|
+
exports.OrderTimeline = OrderTimeline;
|
|
15617
|
+
exports.OrderTotals = OrderTotals;
|
|
15618
|
+
exports.OrdersIcon = OrdersIcon;
|
|
15619
|
+
exports.OrdersIcon20 = OrdersIcon20;
|
|
15620
|
+
exports.OvenIcon = OvenIcon;
|
|
15621
|
+
exports.PackageIcon = PackageIcon;
|
|
14061
15622
|
exports.PaymentElement = PaymentElement;
|
|
14062
15623
|
exports.Price = Price;
|
|
14063
15624
|
exports.PriceRange = PriceRange;
|
|
@@ -14083,20 +15644,31 @@ exports.ScheduleServiceCard = ScheduleServiceCard;
|
|
|
14083
15644
|
exports.SearchInput = SearchInput;
|
|
14084
15645
|
exports.SearchPage = SearchPage;
|
|
14085
15646
|
exports.SearchTemplate = SearchTemplate;
|
|
15647
|
+
exports.Section = Section;
|
|
15648
|
+
exports.SectionMore = SectionMore;
|
|
14086
15649
|
exports.ServiceProductLayout = ServiceProductLayout;
|
|
14087
15650
|
exports.SessionMessageBanner = SessionMessageBanner;
|
|
15651
|
+
exports.SignOutIcon = SignOutIcon;
|
|
15652
|
+
exports.Skeleton = Skeleton;
|
|
14088
15653
|
exports.SlotPicker = SlotPicker;
|
|
14089
15654
|
exports.SoldOutOverlay = SoldOutOverlay;
|
|
14090
15655
|
exports.StaffPicker = StaffPicker;
|
|
14091
15656
|
exports.StandardServiceCard = StandardServiceCard;
|
|
15657
|
+
exports.Status = Status;
|
|
14092
15658
|
exports.StoreNav = StoreNav;
|
|
14093
15659
|
exports.StoreVideo = StoreVideo;
|
|
14094
15660
|
exports.SubscriptionCard = SubscriptionCard;
|
|
15661
|
+
exports.SubscriptionList = SubscriptionList;
|
|
15662
|
+
exports.SubscriptionRow = SubscriptionRow;
|
|
15663
|
+
exports.SubscriptionsIcon = SubscriptionsIcon;
|
|
15664
|
+
exports.SubscriptionsIcon20 = SubscriptionsIcon20;
|
|
14095
15665
|
exports.TagPills = TagPills;
|
|
14096
15666
|
exports.TimePicker = TimePicker;
|
|
15667
|
+
exports.Toast = Toast;
|
|
14097
15668
|
exports.TwoColumnGrid = TwoColumnGrid;
|
|
14098
15669
|
exports.VariantSelector = VariantSelector;
|
|
14099
15670
|
exports.VolumePricing = VolumePricing;
|
|
15671
|
+
exports.WelcomeCard = WelcomeCard;
|
|
14100
15672
|
exports.WholesaleProductCard = WholesaleProductCard;
|
|
14101
15673
|
exports.WholesaleProductLayout = WholesaleProductLayout;
|
|
14102
15674
|
exports.WishlistButton = WishlistButton;
|