@sonordev/site-kit 2.6.3 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5008,6 +5008,735 @@ function CheckoutForm({
5008
5008
  ] })
5009
5009
  ] }) });
5010
5010
  }
5011
+ function loadSquareSDK2(environment) {
5012
+ return new Promise((resolve, reject) => {
5013
+ if (typeof window === "undefined") return reject(new Error("No window"));
5014
+ if (window.Square) return resolve();
5015
+ const script = document.createElement("script");
5016
+ script.src = environment === "sandbox" ? "https://sandbox.web.squarecdn.com/v1/square.js" : "https://web.squarecdn.com/v1/square.js";
5017
+ script.onload = () => resolve();
5018
+ script.onerror = () => reject(new Error("Failed to load Square SDK"));
5019
+ document.head.appendChild(script);
5020
+ });
5021
+ }
5022
+ function resolveCssVar(name, fallback) {
5023
+ if (typeof window === "undefined") return fallback;
5024
+ const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
5025
+ return value || fallback;
5026
+ }
5027
+ var SINGLE_TICKET_KEY = "__single__";
5028
+ function EventCheckout({
5029
+ event,
5030
+ schedule: propSchedule,
5031
+ collectPhone = true,
5032
+ maxPerVariant = 10,
5033
+ cardLabel = "Card Details",
5034
+ submitText,
5035
+ onSuccess,
5036
+ onError,
5037
+ className = ""
5038
+ }) {
5039
+ const schedule = propSchedule || event.schedules?.[0] || event?.next_schedule;
5040
+ const variants = useMemo(
5041
+ () => event.variants ?? [],
5042
+ [event.variants]
5043
+ );
5044
+ const hasVariants = variants.length > 0;
5045
+ const currency = event.currency || "USD";
5046
+ const [qty, setQty] = useState(() => {
5047
+ if (hasVariants) {
5048
+ return Object.fromEntries(variants.map((v) => [v.id, 0]));
5049
+ }
5050
+ return { [SINGLE_TICKET_KEY]: 1 };
5051
+ });
5052
+ const [customer, setCustomer] = useState({
5053
+ email: "",
5054
+ name: "",
5055
+ phone: ""
5056
+ });
5057
+ const [loading, setLoading] = useState(false);
5058
+ const [error, setError] = useState(null);
5059
+ const [success, setSuccess] = useState(null);
5060
+ const [processorConfig, setProcessorConfig] = useState(null);
5061
+ const [squareCard, setSquareCard] = useState(null);
5062
+ const [cardReady, setCardReady] = useState(false);
5063
+ const cardContainerRef = useRef(null);
5064
+ const totalQuantity = useMemo(
5065
+ () => Object.values(qty).reduce((sum, n) => sum + (n || 0), 0),
5066
+ [qty]
5067
+ );
5068
+ const lineBreakdown = useMemo(() => {
5069
+ if (!hasVariants) {
5070
+ const q = qty[SINGLE_TICKET_KEY] || 0;
5071
+ const price = event.price ?? 0;
5072
+ return [
5073
+ {
5074
+ key: SINGLE_TICKET_KEY,
5075
+ name: "Ticket",
5076
+ unitPrice: price,
5077
+ quantity: q,
5078
+ subtotal: price * q,
5079
+ variantId: null
5080
+ }
5081
+ ];
5082
+ }
5083
+ return variants.map((v) => {
5084
+ const q = qty[v.id] || 0;
5085
+ const price = v.price ?? event.price ?? 0;
5086
+ return {
5087
+ key: v.id,
5088
+ name: v.name,
5089
+ unitPrice: price,
5090
+ quantity: q,
5091
+ subtotal: price * q,
5092
+ variantId: v.id
5093
+ };
5094
+ });
5095
+ }, [variants, qty, hasVariants, event.price]);
5096
+ const subtotal = lineBreakdown.reduce((s, l) => s + l.subtotal, 0);
5097
+ const spotsRemaining = schedule ? getSpotsRemaining(schedule.capacity, schedule.current_registrations ?? void 0) ?? schedule.spots_remaining ?? null : null;
5098
+ const soldOut = schedule ? isEventSoldOut(schedule.capacity, schedule.current_registrations ?? void 0) : false;
5099
+ const overCapacity = spotsRemaining !== null && totalQuantity > spotsRemaining;
5100
+ useEffect(() => {
5101
+ let cancelled = false;
5102
+ let attachedCard = null;
5103
+ fetchProcessorConfig().then(async (config) => {
5104
+ if (cancelled) return;
5105
+ setProcessorConfig(config);
5106
+ if (config?.processor !== "square" || !config.squareAppId || !config.squareLocationId) {
5107
+ return;
5108
+ }
5109
+ try {
5110
+ await loadSquareSDK2(config.squareEnvironment || "production");
5111
+ if (cancelled) return;
5112
+ const Square = window.Square;
5113
+ const payments = Square.payments(config.squareAppId, config.squareLocationId);
5114
+ const card = await payments.card({
5115
+ style: {
5116
+ ".input-container": {
5117
+ borderColor: resolveCssVar("--sk-border", "#d1d5db"),
5118
+ borderRadius: "6px"
5119
+ },
5120
+ ".input-container.is-focus": {
5121
+ borderColor: resolveCssVar("--sk-primary", "#2563eb")
5122
+ },
5123
+ ".input-container.is-error": {
5124
+ borderColor: "#dc2626"
5125
+ }
5126
+ }
5127
+ });
5128
+ if (cancelled) {
5129
+ await card.destroy?.().catch(() => {
5130
+ });
5131
+ return;
5132
+ }
5133
+ await card.attach("#sk-event-checkout-card");
5134
+ attachedCard = card;
5135
+ setSquareCard(card);
5136
+ setCardReady(true);
5137
+ } catch (err) {
5138
+ console.error("[EventCheckout] Square card init failed:", err);
5139
+ }
5140
+ });
5141
+ return () => {
5142
+ cancelled = true;
5143
+ if (attachedCard) {
5144
+ attachedCard.destroy?.().catch(() => {
5145
+ });
5146
+ }
5147
+ setSquareCard(null);
5148
+ setCardReady(false);
5149
+ };
5150
+ }, []);
5151
+ const updateQty = (key, delta) => {
5152
+ setQty((prev) => {
5153
+ const current = prev[key] ?? 0;
5154
+ const next = Math.max(0, Math.min(maxPerVariant, current + delta));
5155
+ return { ...prev, [key]: next };
5156
+ });
5157
+ setError(null);
5158
+ };
5159
+ const updateCustomer = (field, value) => {
5160
+ setCustomer((prev) => ({ ...prev, [field]: value }));
5161
+ };
5162
+ const handleSubmit = async (e) => {
5163
+ e.preventDefault();
5164
+ setError(null);
5165
+ if (!schedule) {
5166
+ setError("No event date available");
5167
+ return;
5168
+ }
5169
+ if (totalQuantity === 0) {
5170
+ setError("Select at least one ticket");
5171
+ return;
5172
+ }
5173
+ if (overCapacity) {
5174
+ setError(
5175
+ `Only ${spotsRemaining} spot${spotsRemaining === 1 ? "" : "s"} remaining. Please reduce quantity.`
5176
+ );
5177
+ return;
5178
+ }
5179
+ if (!customer.name || !customer.email) {
5180
+ setError("Name and email are required");
5181
+ return;
5182
+ }
5183
+ if (processorConfig?.processor !== "square") {
5184
+ setError("Inline checkout requires Square. Please contact support.");
5185
+ return;
5186
+ }
5187
+ if (!squareCard || !cardReady) {
5188
+ setError("Card form is still loading. Please wait a moment and try again.");
5189
+ return;
5190
+ }
5191
+ setLoading(true);
5192
+ try {
5193
+ const tokenResult = await squareCard.tokenize();
5194
+ if (tokenResult.status !== "OK") {
5195
+ const msg = tokenResult.errors?.[0]?.message || "Card verification failed. Please check your card details.";
5196
+ setError(msg);
5197
+ onError?.(msg);
5198
+ setLoading(false);
5199
+ return;
5200
+ }
5201
+ const lineItems = lineBreakdown.filter((l) => l.quantity > 0).map((l) => ({
5202
+ offeringId: event.id,
5203
+ variantId: l.variantId ?? void 0,
5204
+ scheduleId: schedule.id,
5205
+ quantity: l.quantity
5206
+ }));
5207
+ const result = await createCheckoutSession({
5208
+ offeringId: event.id,
5209
+ lineItems,
5210
+ customer,
5211
+ sourceId: tokenResult.token,
5212
+ successUrl: typeof window !== "undefined" ? window.location.href + "?registration=success" : void 0,
5213
+ cancelUrl: typeof window !== "undefined" ? window.location.href : void 0
5214
+ });
5215
+ if (result.success) {
5216
+ setSuccess(result);
5217
+ onSuccess?.(result);
5218
+ } else {
5219
+ setError(result.error || "Checkout failed");
5220
+ onError?.(result.error || "Checkout failed");
5221
+ }
5222
+ } catch (err) {
5223
+ const message = err instanceof Error ? err.message : "An error occurred";
5224
+ setError(message);
5225
+ onError?.(message);
5226
+ } finally {
5227
+ setLoading(false);
5228
+ }
5229
+ };
5230
+ if (success) {
5231
+ return /* @__PURE__ */ jsxs(
5232
+ "div",
5233
+ {
5234
+ className: `site-kit-event-checkout-success ${className}`,
5235
+ style: {
5236
+ padding: "2rem",
5237
+ textAlign: "center",
5238
+ background: "var(--sk-bg, #fff)",
5239
+ border: "1px solid var(--sk-border, #e5e7eb)",
5240
+ borderRadius: "12px"
5241
+ },
5242
+ children: [
5243
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "3rem", marginBottom: "0.75rem" }, children: "\u{1F39F}\uFE0F" }),
5244
+ /* @__PURE__ */ jsx(
5245
+ "h3",
5246
+ {
5247
+ style: {
5248
+ margin: "0 0 0.5rem",
5249
+ fontSize: "1.5rem",
5250
+ color: "var(--sk-text-primary, #111)"
5251
+ },
5252
+ children: "You're booked!"
5253
+ }
5254
+ ),
5255
+ /* @__PURE__ */ jsxs(
5256
+ "p",
5257
+ {
5258
+ style: {
5259
+ margin: "0 0 0.5rem",
5260
+ color: "var(--sk-text-secondary, #555)"
5261
+ },
5262
+ children: [
5263
+ "Confirmation #",
5264
+ success.confirmation_number || success.sale_id
5265
+ ]
5266
+ }
5267
+ ),
5268
+ /* @__PURE__ */ jsx(
5269
+ "p",
5270
+ {
5271
+ style: {
5272
+ margin: 0,
5273
+ color: "var(--sk-text-secondary, #555)",
5274
+ fontSize: "0.9rem"
5275
+ },
5276
+ children: "Check your email for ticket details."
5277
+ }
5278
+ )
5279
+ ]
5280
+ }
5281
+ );
5282
+ }
5283
+ if (soldOut) {
5284
+ return /* @__PURE__ */ jsxs(
5285
+ "div",
5286
+ {
5287
+ className: `site-kit-event-checkout-soldout ${className}`,
5288
+ style: {
5289
+ padding: "2rem",
5290
+ textAlign: "center",
5291
+ background: "var(--sk-surface, #f9fafb)",
5292
+ border: "1px solid var(--sk-border, #e5e7eb)",
5293
+ borderRadius: "12px"
5294
+ },
5295
+ children: [
5296
+ /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600, fontSize: "1.125rem" }, children: "This cruise is sold out" }),
5297
+ /* @__PURE__ */ jsx("p", { style: { margin: "0.5rem 0 0", color: "var(--sk-text-secondary, #555)" }, children: "Check back soon for additional dates." })
5298
+ ]
5299
+ }
5300
+ );
5301
+ }
5302
+ return /* @__PURE__ */ jsxs(
5303
+ "div",
5304
+ {
5305
+ className: `site-kit-event-checkout ${className}`,
5306
+ style: {
5307
+ background: "var(--sk-bg, #fff)",
5308
+ border: "1px solid var(--sk-border, #e5e7eb)",
5309
+ borderRadius: "12px",
5310
+ padding: "1.5rem"
5311
+ },
5312
+ children: [
5313
+ schedule && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem" }, children: [
5314
+ /* @__PURE__ */ jsx(
5315
+ "div",
5316
+ {
5317
+ style: {
5318
+ fontSize: "0.75rem",
5319
+ textTransform: "uppercase",
5320
+ letterSpacing: "0.08em",
5321
+ color: "var(--sk-text-secondary, #555)",
5322
+ marginBottom: "0.25rem"
5323
+ },
5324
+ children: "Date & Time"
5325
+ }
5326
+ ),
5327
+ /* @__PURE__ */ jsxs(
5328
+ "div",
5329
+ {
5330
+ style: {
5331
+ fontSize: "1.125rem",
5332
+ fontWeight: 600,
5333
+ color: "var(--sk-text-primary, #111)"
5334
+ },
5335
+ children: [
5336
+ formatDate(schedule.starts_at),
5337
+ " \xB7 ",
5338
+ formatTime(schedule.starts_at)
5339
+ ]
5340
+ }
5341
+ ),
5342
+ spotsRemaining !== null && spotsRemaining <= 10 && spotsRemaining > 0 && /* @__PURE__ */ jsxs(
5343
+ "div",
5344
+ {
5345
+ style: {
5346
+ marginTop: "0.5rem",
5347
+ fontSize: "0.875rem",
5348
+ color: "var(--sk-warning, #b45309)",
5349
+ fontWeight: 500
5350
+ },
5351
+ children: [
5352
+ "Only ",
5353
+ spotsRemaining,
5354
+ " spot",
5355
+ spotsRemaining === 1 ? "" : "s",
5356
+ " left"
5357
+ ]
5358
+ }
5359
+ )
5360
+ ] }),
5361
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
5362
+ /* @__PURE__ */ jsx(
5363
+ "div",
5364
+ {
5365
+ style: {
5366
+ display: "flex",
5367
+ flexDirection: "column",
5368
+ gap: "0.75rem",
5369
+ marginBottom: "1.25rem"
5370
+ },
5371
+ children: lineBreakdown.map((line) => /* @__PURE__ */ jsxs(
5372
+ "div",
5373
+ {
5374
+ style: {
5375
+ display: "flex",
5376
+ alignItems: "center",
5377
+ justifyContent: "space-between",
5378
+ gap: "1rem",
5379
+ padding: "0.875rem 1rem",
5380
+ background: "var(--sk-surface, #f9fafb)",
5381
+ borderRadius: "8px",
5382
+ border: "1px solid var(--sk-border, #e5e7eb)"
5383
+ },
5384
+ children: [
5385
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
5386
+ /* @__PURE__ */ jsx(
5387
+ "div",
5388
+ {
5389
+ style: {
5390
+ fontWeight: 600,
5391
+ color: "var(--sk-text-primary, #111)"
5392
+ },
5393
+ children: line.name
5394
+ }
5395
+ ),
5396
+ /* @__PURE__ */ jsxs(
5397
+ "div",
5398
+ {
5399
+ style: {
5400
+ fontSize: "0.875rem",
5401
+ color: "var(--sk-text-secondary, #555)"
5402
+ },
5403
+ children: [
5404
+ formatPrice(line.unitPrice, currency),
5405
+ " each"
5406
+ ]
5407
+ }
5408
+ )
5409
+ ] }),
5410
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
5411
+ /* @__PURE__ */ jsx(
5412
+ "button",
5413
+ {
5414
+ type: "button",
5415
+ onClick: () => updateQty(line.key, -1),
5416
+ disabled: line.quantity === 0,
5417
+ "aria-label": `Decrease ${line.name} quantity`,
5418
+ style: {
5419
+ width: "32px",
5420
+ height: "32px",
5421
+ borderRadius: "50%",
5422
+ border: "1px solid var(--sk-border, #d1d5db)",
5423
+ background: "var(--sk-bg, #fff)",
5424
+ color: "var(--sk-text-primary, #111)",
5425
+ cursor: line.quantity === 0 ? "not-allowed" : "pointer",
5426
+ opacity: line.quantity === 0 ? 0.4 : 1,
5427
+ fontSize: "1.25rem",
5428
+ lineHeight: 1,
5429
+ display: "flex",
5430
+ alignItems: "center",
5431
+ justifyContent: "center"
5432
+ },
5433
+ children: "\u2212"
5434
+ }
5435
+ ),
5436
+ /* @__PURE__ */ jsx(
5437
+ "div",
5438
+ {
5439
+ style: {
5440
+ minWidth: "2.5rem",
5441
+ textAlign: "center",
5442
+ fontWeight: 600,
5443
+ fontSize: "1.125rem"
5444
+ },
5445
+ children: line.quantity
5446
+ }
5447
+ ),
5448
+ /* @__PURE__ */ jsx(
5449
+ "button",
5450
+ {
5451
+ type: "button",
5452
+ onClick: () => updateQty(line.key, 1),
5453
+ disabled: line.quantity >= maxPerVariant,
5454
+ "aria-label": `Increase ${line.name} quantity`,
5455
+ style: {
5456
+ width: "32px",
5457
+ height: "32px",
5458
+ borderRadius: "50%",
5459
+ border: "1px solid var(--sk-border, #d1d5db)",
5460
+ background: "var(--sk-bg, #fff)",
5461
+ color: "var(--sk-text-primary, #111)",
5462
+ cursor: line.quantity >= maxPerVariant ? "not-allowed" : "pointer",
5463
+ opacity: line.quantity >= maxPerVariant ? 0.4 : 1,
5464
+ fontSize: "1.25rem",
5465
+ lineHeight: 1,
5466
+ display: "flex",
5467
+ alignItems: "center",
5468
+ justifyContent: "center"
5469
+ },
5470
+ children: "+"
5471
+ }
5472
+ )
5473
+ ] })
5474
+ ]
5475
+ },
5476
+ line.key
5477
+ ))
5478
+ }
5479
+ ),
5480
+ /* @__PURE__ */ jsxs(
5481
+ "div",
5482
+ {
5483
+ style: {
5484
+ display: "flex",
5485
+ justifyContent: "space-between",
5486
+ alignItems: "baseline",
5487
+ padding: "0.75rem 0",
5488
+ borderTop: "1px solid var(--sk-border, #e5e7eb)",
5489
+ borderBottom: "1px solid var(--sk-border, #e5e7eb)",
5490
+ marginBottom: "1.25rem"
5491
+ },
5492
+ children: [
5493
+ /* @__PURE__ */ jsxs(
5494
+ "span",
5495
+ {
5496
+ style: {
5497
+ fontSize: "0.875rem",
5498
+ color: "var(--sk-text-secondary, #555)",
5499
+ textTransform: "uppercase",
5500
+ letterSpacing: "0.06em"
5501
+ },
5502
+ children: [
5503
+ "Total (",
5504
+ totalQuantity,
5505
+ " ",
5506
+ totalQuantity === 1 ? "ticket" : "tickets",
5507
+ ")"
5508
+ ]
5509
+ }
5510
+ ),
5511
+ /* @__PURE__ */ jsx(
5512
+ "span",
5513
+ {
5514
+ style: {
5515
+ fontSize: "1.5rem",
5516
+ fontWeight: 700,
5517
+ color: "var(--sk-text-primary, #111)"
5518
+ },
5519
+ children: formatPrice(subtotal, currency)
5520
+ }
5521
+ )
5522
+ ]
5523
+ }
5524
+ ),
5525
+ /* @__PURE__ */ jsxs(
5526
+ "div",
5527
+ {
5528
+ style: {
5529
+ display: "flex",
5530
+ flexDirection: "column",
5531
+ gap: "0.75rem",
5532
+ marginBottom: "1rem"
5533
+ },
5534
+ children: [
5535
+ /* @__PURE__ */ jsxs("div", { children: [
5536
+ /* @__PURE__ */ jsx(
5537
+ "label",
5538
+ {
5539
+ style: {
5540
+ display: "block",
5541
+ fontSize: "0.75rem",
5542
+ fontWeight: 600,
5543
+ textTransform: "uppercase",
5544
+ letterSpacing: "0.06em",
5545
+ color: "var(--sk-text-secondary, #555)",
5546
+ marginBottom: "0.25rem"
5547
+ },
5548
+ children: "Full Name"
5549
+ }
5550
+ ),
5551
+ /* @__PURE__ */ jsx(
5552
+ "input",
5553
+ {
5554
+ type: "text",
5555
+ required: true,
5556
+ value: customer.name,
5557
+ onChange: (e) => updateCustomer("name", e.target.value),
5558
+ placeholder: "John Smith",
5559
+ style: {
5560
+ width: "100%",
5561
+ padding: "0.625rem 0.75rem",
5562
+ borderRadius: "6px",
5563
+ border: "1px solid var(--sk-border, #d1d5db)",
5564
+ fontSize: "1rem",
5565
+ background: "var(--sk-bg, #fff)",
5566
+ color: "var(--sk-text-primary, #111)"
5567
+ }
5568
+ }
5569
+ )
5570
+ ] }),
5571
+ /* @__PURE__ */ jsxs("div", { children: [
5572
+ /* @__PURE__ */ jsx(
5573
+ "label",
5574
+ {
5575
+ style: {
5576
+ display: "block",
5577
+ fontSize: "0.75rem",
5578
+ fontWeight: 600,
5579
+ textTransform: "uppercase",
5580
+ letterSpacing: "0.06em",
5581
+ color: "var(--sk-text-secondary, #555)",
5582
+ marginBottom: "0.25rem"
5583
+ },
5584
+ children: "Email Address"
5585
+ }
5586
+ ),
5587
+ /* @__PURE__ */ jsx(
5588
+ "input",
5589
+ {
5590
+ type: "email",
5591
+ required: true,
5592
+ value: customer.email,
5593
+ onChange: (e) => updateCustomer("email", e.target.value),
5594
+ placeholder: "john@example.com",
5595
+ style: {
5596
+ width: "100%",
5597
+ padding: "0.625rem 0.75rem",
5598
+ borderRadius: "6px",
5599
+ border: "1px solid var(--sk-border, #d1d5db)",
5600
+ fontSize: "1rem",
5601
+ background: "var(--sk-bg, #fff)",
5602
+ color: "var(--sk-text-primary, #111)"
5603
+ }
5604
+ }
5605
+ )
5606
+ ] }),
5607
+ collectPhone && /* @__PURE__ */ jsxs("div", { children: [
5608
+ /* @__PURE__ */ jsx(
5609
+ "label",
5610
+ {
5611
+ style: {
5612
+ display: "block",
5613
+ fontSize: "0.75rem",
5614
+ fontWeight: 600,
5615
+ textTransform: "uppercase",
5616
+ letterSpacing: "0.06em",
5617
+ color: "var(--sk-text-secondary, #555)",
5618
+ marginBottom: "0.25rem"
5619
+ },
5620
+ children: "Phone Number"
5621
+ }
5622
+ ),
5623
+ /* @__PURE__ */ jsx(
5624
+ "input",
5625
+ {
5626
+ type: "tel",
5627
+ value: customer.phone || "",
5628
+ onChange: (e) => updateCustomer("phone", e.target.value),
5629
+ placeholder: "(555) 123-4567",
5630
+ style: {
5631
+ width: "100%",
5632
+ padding: "0.625rem 0.75rem",
5633
+ borderRadius: "6px",
5634
+ border: "1px solid var(--sk-border, #d1d5db)",
5635
+ fontSize: "1rem",
5636
+ background: "var(--sk-bg, #fff)",
5637
+ color: "var(--sk-text-primary, #111)"
5638
+ }
5639
+ }
5640
+ )
5641
+ ] })
5642
+ ]
5643
+ }
5644
+ ),
5645
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
5646
+ /* @__PURE__ */ jsx(
5647
+ "label",
5648
+ {
5649
+ style: {
5650
+ display: "block",
5651
+ fontSize: "0.75rem",
5652
+ fontWeight: 600,
5653
+ textTransform: "uppercase",
5654
+ letterSpacing: "0.06em",
5655
+ color: "var(--sk-text-secondary, #555)",
5656
+ marginBottom: "0.25rem"
5657
+ },
5658
+ children: cardLabel
5659
+ }
5660
+ ),
5661
+ /* @__PURE__ */ jsx(
5662
+ "div",
5663
+ {
5664
+ id: "sk-event-checkout-card",
5665
+ ref: cardContainerRef,
5666
+ style: {
5667
+ minHeight: "44px",
5668
+ border: "1px solid var(--sk-border, #d1d5db)",
5669
+ borderRadius: "6px",
5670
+ padding: "0.5rem 0.75rem",
5671
+ background: "var(--sk-bg, #fff)"
5672
+ }
5673
+ }
5674
+ ),
5675
+ !cardReady && /* @__PURE__ */ jsx(
5676
+ "p",
5677
+ {
5678
+ style: {
5679
+ fontSize: "0.75rem",
5680
+ color: "var(--sk-text-secondary, #555)",
5681
+ marginTop: "0.25rem"
5682
+ },
5683
+ children: "Loading card form..."
5684
+ }
5685
+ )
5686
+ ] }),
5687
+ error && /* @__PURE__ */ jsx(
5688
+ "div",
5689
+ {
5690
+ role: "alert",
5691
+ style: {
5692
+ marginBottom: "1rem",
5693
+ padding: "0.75rem 1rem",
5694
+ background: "rgba(220, 38, 38, 0.06)",
5695
+ border: "1px solid rgba(220, 38, 38, 0.25)",
5696
+ borderRadius: "6px",
5697
+ color: "#b91c1c",
5698
+ fontSize: "0.875rem"
5699
+ },
5700
+ children: error
5701
+ }
5702
+ ),
5703
+ /* @__PURE__ */ jsx(
5704
+ "button",
5705
+ {
5706
+ type: "submit",
5707
+ disabled: loading || totalQuantity === 0 || !cardReady || overCapacity,
5708
+ style: {
5709
+ width: "100%",
5710
+ padding: "0.875rem 1rem",
5711
+ fontSize: "1rem",
5712
+ fontWeight: 600,
5713
+ borderRadius: "8px",
5714
+ border: "none",
5715
+ background: loading || totalQuantity === 0 || !cardReady || overCapacity ? "var(--sk-primary-hover, #94a3b8)" : "var(--sk-primary, #2563eb)",
5716
+ color: "var(--sk-primary-text, #fff)",
5717
+ cursor: loading || totalQuantity === 0 || !cardReady || overCapacity ? "not-allowed" : "pointer",
5718
+ transition: "background 0.15s ease"
5719
+ },
5720
+ children: loading ? "Processing..." : submitText ? submitText : totalQuantity === 0 ? "Select tickets" : `Buy ${formatPrice(subtotal, currency)}`
5721
+ }
5722
+ ),
5723
+ /* @__PURE__ */ jsx(
5724
+ "p",
5725
+ {
5726
+ style: {
5727
+ textAlign: "center",
5728
+ fontSize: "0.75rem",
5729
+ color: "var(--sk-text-secondary, #888)",
5730
+ margin: "0.75rem 0 0"
5731
+ },
5732
+ children: "\u{1F512} Secure checkout powered by Square"
5733
+ }
5734
+ )
5735
+ ] })
5736
+ ]
5737
+ }
5738
+ );
5739
+ }
5011
5740
  function RegistrationForm({
5012
5741
  event,
5013
5742
  scheduleId,
@@ -5646,7 +6375,7 @@ function CalendarView({
5646
6375
  }, children: "Loading..." })
5647
6376
  ] });
5648
6377
  }
5649
- function loadSquareSDK2(environment) {
6378
+ function loadSquareSDK3(environment) {
5650
6379
  return new Promise((resolve, reject) => {
5651
6380
  if (typeof window === "undefined") return reject(new Error("No window"));
5652
6381
  if (window.Square) return resolve();
@@ -5693,7 +6422,7 @@ function EventModal({
5693
6422
  if (config?.processor) setProcessor(config.processor);
5694
6423
  if (config?.processor === "square" && config.squareAppId && config.squareLocationId) {
5695
6424
  try {
5696
- await loadSquareSDK2(config.squareEnvironment || "production");
6425
+ await loadSquareSDK3(config.squareEnvironment || "production");
5697
6426
  const Square = window.Square;
5698
6427
  const payments = Square.payments(config.squareAppId, config.squareLocationId);
5699
6428
  const card = await payments.card({
@@ -7009,6 +7738,6 @@ function groupEventsByOffering(events) {
7009
7738
  });
7010
7739
  }
7011
7740
 
7012
- export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, createPaymentIntent, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress, validateDiscountCode };
7013
- //# sourceMappingURL=chunk-HSSKX77P.mjs.map
7014
- //# sourceMappingURL=chunk-HSSKX77P.mjs.map
7741
+ export { CalendarView, CheckoutForm, EventCalendar, EventCheckout, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, createPaymentIntent, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress, validateDiscountCode };
7742
+ //# sourceMappingURL=chunk-MCIELZWP.mjs.map
7743
+ //# sourceMappingURL=chunk-MCIELZWP.mjs.map