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