@neowhale/storefront 0.2.34 → 0.2.35
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/landing.global.js +170 -128
- package/package.json +1 -1
package/dist/landing.global.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var WhaleStorefront = (function (exports
|
|
1
|
+
var WhaleStorefront = (function (exports) {
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
@@ -345,14 +345,54 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
345
345
|
};
|
|
346
346
|
}
|
|
347
347
|
});
|
|
348
|
+
|
|
349
|
+
// src/shims/react-global.ts
|
|
350
|
+
var R = globalThis.React;
|
|
351
|
+
var {
|
|
352
|
+
createElement,
|
|
353
|
+
createContext,
|
|
354
|
+
forwardRef,
|
|
355
|
+
memo,
|
|
356
|
+
lazy,
|
|
357
|
+
useCallback,
|
|
358
|
+
useContext,
|
|
359
|
+
useEffect,
|
|
360
|
+
useId,
|
|
361
|
+
useImperativeHandle,
|
|
362
|
+
useLayoutEffect,
|
|
363
|
+
useMemo,
|
|
364
|
+
useReducer,
|
|
365
|
+
useRef,
|
|
366
|
+
useState,
|
|
367
|
+
Fragment,
|
|
368
|
+
Children,
|
|
369
|
+
cloneElement,
|
|
370
|
+
isValidElement,
|
|
371
|
+
Suspense,
|
|
372
|
+
startTransition,
|
|
373
|
+
useTransition,
|
|
374
|
+
useDeferredValue,
|
|
375
|
+
useSyncExternalStore,
|
|
376
|
+
useInsertionEffect,
|
|
377
|
+
useDebugValue
|
|
378
|
+
} = R;
|
|
379
|
+
|
|
380
|
+
// src/shims/jsx-runtime-global.ts
|
|
381
|
+
var R2 = globalThis.React;
|
|
382
|
+
var jsx = R2.createElement;
|
|
383
|
+
var jsxs = R2.createElement;
|
|
384
|
+
R2.createElement;
|
|
385
|
+
var Fragment2 = R2.Fragment;
|
|
386
|
+
|
|
387
|
+
// src/react/components/section-renderer.tsx
|
|
348
388
|
var NUM_PATTERN = /(\$?[\d,]+\.?\d*[+★%]?)/g;
|
|
349
389
|
function easeOutQuart(t) {
|
|
350
390
|
return 1 - Math.pow(1 - t, 4);
|
|
351
391
|
}
|
|
352
392
|
function useCountUp(target, duration, start) {
|
|
353
|
-
const [value, setValue] =
|
|
354
|
-
const raf =
|
|
355
|
-
|
|
393
|
+
const [value, setValue] = useState(0);
|
|
394
|
+
const raf = useRef(0);
|
|
395
|
+
useEffect(() => {
|
|
356
396
|
if (!start) return;
|
|
357
397
|
const t0 = performance.now();
|
|
358
398
|
function tick(now) {
|
|
@@ -367,9 +407,9 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
367
407
|
return value;
|
|
368
408
|
}
|
|
369
409
|
function AnimatedNumber({ raw }) {
|
|
370
|
-
const ref =
|
|
371
|
-
const [visible, setVisible] =
|
|
372
|
-
|
|
410
|
+
const ref = useRef(null);
|
|
411
|
+
const [visible, setVisible] = useState(false);
|
|
412
|
+
useEffect(() => {
|
|
373
413
|
const el = ref.current;
|
|
374
414
|
if (!el || typeof IntersectionObserver === "undefined") {
|
|
375
415
|
setVisible(true);
|
|
@@ -395,7 +435,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
395
435
|
visible
|
|
396
436
|
);
|
|
397
437
|
const display = decimals > 0 ? (count / Math.pow(10, decimals)).toFixed(decimals) : hasCommas ? count.toLocaleString() : String(count);
|
|
398
|
-
return /* @__PURE__ */
|
|
438
|
+
return /* @__PURE__ */ jsxs("span", { ref, children: [
|
|
399
439
|
prefix,
|
|
400
440
|
display,
|
|
401
441
|
suffix
|
|
@@ -403,8 +443,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
403
443
|
}
|
|
404
444
|
function AnimatedText({ text }) {
|
|
405
445
|
const parts = text.split(NUM_PATTERN);
|
|
406
|
-
return /* @__PURE__ */
|
|
407
|
-
(part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */
|
|
446
|
+
return /* @__PURE__ */ jsx(Fragment2, { children: parts.map(
|
|
447
|
+
(part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */ jsx(AnimatedNumber, { raw: part }, i) : part
|
|
408
448
|
) });
|
|
409
449
|
}
|
|
410
450
|
function trackClick(tracking, label, url, position) {
|
|
@@ -424,39 +464,39 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
424
464
|
tracking,
|
|
425
465
|
onEvent
|
|
426
466
|
}) {
|
|
427
|
-
const [showCOA, setShowCOA] =
|
|
467
|
+
const [showCOA, setShowCOA] = useState(false);
|
|
428
468
|
const el = (() => {
|
|
429
469
|
switch (section.type) {
|
|
430
470
|
case "hero":
|
|
431
|
-
return /* @__PURE__ */
|
|
471
|
+
return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
|
|
432
472
|
case "text":
|
|
433
|
-
return /* @__PURE__ */
|
|
473
|
+
return /* @__PURE__ */ jsx(TextSection, { section, theme });
|
|
434
474
|
case "image":
|
|
435
|
-
return /* @__PURE__ */
|
|
475
|
+
return /* @__PURE__ */ jsx(ImageSection, { section, theme });
|
|
436
476
|
case "video":
|
|
437
|
-
return /* @__PURE__ */
|
|
477
|
+
return /* @__PURE__ */ jsx(VideoSection, { section, theme });
|
|
438
478
|
case "gallery":
|
|
439
|
-
return /* @__PURE__ */
|
|
479
|
+
return /* @__PURE__ */ jsx(GallerySection, { section, theme });
|
|
440
480
|
case "cta":
|
|
441
|
-
return /* @__PURE__ */
|
|
481
|
+
return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking, onEvent });
|
|
442
482
|
case "stats":
|
|
443
|
-
return /* @__PURE__ */
|
|
483
|
+
return /* @__PURE__ */ jsx(StatsSection, { section, theme });
|
|
444
484
|
case "product_card":
|
|
445
|
-
return /* @__PURE__ */
|
|
485
|
+
return /* @__PURE__ */ jsx(ProductCardSection, { section, data, theme, tracking });
|
|
446
486
|
case "coa_viewer":
|
|
447
|
-
return /* @__PURE__ */
|
|
487
|
+
return /* @__PURE__ */ jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
|
|
448
488
|
case "social_links":
|
|
449
|
-
return /* @__PURE__ */
|
|
489
|
+
return /* @__PURE__ */ jsx(SocialLinksSection, { section, theme });
|
|
450
490
|
case "lead_capture":
|
|
451
|
-
return /* @__PURE__ */
|
|
491
|
+
return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme, onEvent });
|
|
452
492
|
case "divider":
|
|
453
|
-
return /* @__PURE__ */
|
|
493
|
+
return /* @__PURE__ */ jsx(DividerSection, { theme });
|
|
454
494
|
default:
|
|
455
495
|
return null;
|
|
456
496
|
}
|
|
457
497
|
})();
|
|
458
|
-
const sectionRef =
|
|
459
|
-
|
|
498
|
+
const sectionRef = useRef(null);
|
|
499
|
+
useEffect(() => {
|
|
460
500
|
const el2 = sectionRef.current;
|
|
461
501
|
if (!el2 || typeof IntersectionObserver === "undefined") return;
|
|
462
502
|
const obs = new IntersectionObserver(
|
|
@@ -474,14 +514,14 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
474
514
|
obs.observe(el2);
|
|
475
515
|
return () => obs.disconnect();
|
|
476
516
|
}, [section.id, section.type, onEvent]);
|
|
477
|
-
return /* @__PURE__ */
|
|
517
|
+
return /* @__PURE__ */ jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
|
|
478
518
|
el,
|
|
479
|
-
showCOA && data?.coa && /* @__PURE__ */
|
|
519
|
+
showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
|
|
480
520
|
] });
|
|
481
521
|
}
|
|
482
522
|
function HeroSection({ section, theme, tracking, onEvent }) {
|
|
483
523
|
const { title, subtitle, background_image, cta_text, cta_url } = section.content;
|
|
484
|
-
return /* @__PURE__ */
|
|
524
|
+
return /* @__PURE__ */ jsxs(
|
|
485
525
|
"div",
|
|
486
526
|
{
|
|
487
527
|
style: {
|
|
@@ -498,9 +538,9 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
498
538
|
backgroundPosition: "center"
|
|
499
539
|
},
|
|
500
540
|
children: [
|
|
501
|
-
background_image && /* @__PURE__ */
|
|
502
|
-
/* @__PURE__ */
|
|
503
|
-
title && /* @__PURE__ */
|
|
541
|
+
background_image && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" } }),
|
|
542
|
+
/* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, maxWidth: 640 }, children: [
|
|
543
|
+
title && /* @__PURE__ */ jsx("h1", { style: {
|
|
504
544
|
fontSize: "clamp(2rem, 8vw, 3rem)",
|
|
505
545
|
fontWeight: 300,
|
|
506
546
|
fontFamily: theme.fontDisplay || "inherit",
|
|
@@ -508,8 +548,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
508
548
|
lineHeight: 1.15,
|
|
509
549
|
letterSpacing: "-0.02em",
|
|
510
550
|
color: theme.fg
|
|
511
|
-
}, children: /* @__PURE__ */
|
|
512
|
-
subtitle && /* @__PURE__ */
|
|
551
|
+
}, children: /* @__PURE__ */ jsx(AnimatedText, { text: title }) }),
|
|
552
|
+
subtitle && /* @__PURE__ */ jsx("p", { style: {
|
|
513
553
|
fontSize: "0.85rem",
|
|
514
554
|
color: theme.accent,
|
|
515
555
|
margin: "0 0 2rem",
|
|
@@ -517,7 +557,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
517
557
|
textTransform: "uppercase",
|
|
518
558
|
letterSpacing: "0.15em"
|
|
519
559
|
}, children: subtitle }),
|
|
520
|
-
cta_text && cta_url && /* @__PURE__ */
|
|
560
|
+
cta_text && cta_url && /* @__PURE__ */ jsx(
|
|
521
561
|
"a",
|
|
522
562
|
{
|
|
523
563
|
href: cta_url,
|
|
@@ -547,8 +587,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
547
587
|
function TextSection({ section, theme }) {
|
|
548
588
|
const { heading, body } = section.content;
|
|
549
589
|
const align = section.config?.align || "left";
|
|
550
|
-
return /* @__PURE__ */
|
|
551
|
-
heading && /* @__PURE__ */
|
|
590
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 640, margin: "0 auto", textAlign: align }, children: [
|
|
591
|
+
heading && /* @__PURE__ */ jsx("h2", { style: {
|
|
552
592
|
fontSize: 11,
|
|
553
593
|
fontWeight: 500,
|
|
554
594
|
textTransform: "uppercase",
|
|
@@ -556,15 +596,15 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
556
596
|
color: `${theme.fg}40`,
|
|
557
597
|
margin: "0 0 0.75rem"
|
|
558
598
|
}, children: heading }),
|
|
559
|
-
body && /* @__PURE__ */
|
|
599
|
+
body && /* @__PURE__ */ jsx("div", { style: { color: `${theme.fg}99`, lineHeight: 1.7, fontSize: "0.9rem", fontWeight: 300, whiteSpace: "pre-wrap" }, children: body })
|
|
560
600
|
] });
|
|
561
601
|
}
|
|
562
602
|
function ImageSection({ section, theme }) {
|
|
563
603
|
const { url, alt, caption } = section.content;
|
|
564
604
|
const contained = section.config?.contained !== false;
|
|
565
605
|
if (!url) return null;
|
|
566
|
-
return /* @__PURE__ */
|
|
567
|
-
/* @__PURE__ */
|
|
606
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: contained ? "1.5rem" : 0, maxWidth: contained ? 640 : void 0, margin: contained ? "0 auto" : void 0 }, children: [
|
|
607
|
+
/* @__PURE__ */ jsx(
|
|
568
608
|
"img",
|
|
569
609
|
{
|
|
570
610
|
src: url,
|
|
@@ -572,14 +612,14 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
572
612
|
style: { width: "100%", display: "block", objectFit: "cover" }
|
|
573
613
|
}
|
|
574
614
|
),
|
|
575
|
-
caption && /* @__PURE__ */
|
|
615
|
+
caption && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, textAlign: "center", marginTop: "0.75rem" }, children: caption })
|
|
576
616
|
] });
|
|
577
617
|
}
|
|
578
618
|
function VideoSection({ section, theme }) {
|
|
579
619
|
const { url, poster } = section.content;
|
|
580
620
|
if (!url) return null;
|
|
581
621
|
const isEmbed = url.includes("youtube") || url.includes("youtu.be") || url.includes("vimeo");
|
|
582
|
-
return /* @__PURE__ */
|
|
622
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsx(
|
|
583
623
|
"iframe",
|
|
584
624
|
{
|
|
585
625
|
src: toEmbedUrl(url),
|
|
@@ -587,7 +627,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
587
627
|
allow: "autoplay; fullscreen",
|
|
588
628
|
title: "Video"
|
|
589
629
|
}
|
|
590
|
-
) }) : /* @__PURE__ */
|
|
630
|
+
) }) : /* @__PURE__ */ jsx(
|
|
591
631
|
"video",
|
|
592
632
|
{
|
|
593
633
|
src: url,
|
|
@@ -601,7 +641,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
601
641
|
const { images } = section.content;
|
|
602
642
|
const columns = section.config?.columns || 3;
|
|
603
643
|
if (!images || images.length === 0) return null;
|
|
604
|
-
return /* @__PURE__ */
|
|
644
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx(
|
|
605
645
|
"img",
|
|
606
646
|
{
|
|
607
647
|
src: img.url,
|
|
@@ -613,8 +653,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
613
653
|
function CTASection({ section, theme, tracking, onEvent }) {
|
|
614
654
|
const { title, subtitle, buttons } = section.content;
|
|
615
655
|
if (!buttons || buttons.length === 0) return null;
|
|
616
|
-
return /* @__PURE__ */
|
|
617
|
-
title && /* @__PURE__ */
|
|
656
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
657
|
+
title && /* @__PURE__ */ jsx("h2", { style: {
|
|
618
658
|
fontSize: "clamp(1.25rem, 4vw, 1.5rem)",
|
|
619
659
|
fontWeight: 300,
|
|
620
660
|
fontFamily: theme.fontDisplay || "inherit",
|
|
@@ -624,7 +664,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
624
664
|
color: theme.fg,
|
|
625
665
|
textAlign: "center"
|
|
626
666
|
}, children: title }),
|
|
627
|
-
subtitle && /* @__PURE__ */
|
|
667
|
+
subtitle && /* @__PURE__ */ jsx("p", { style: {
|
|
628
668
|
fontSize: "0.8rem",
|
|
629
669
|
color: theme.accent,
|
|
630
670
|
margin: "0 0 0.75rem",
|
|
@@ -635,7 +675,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
635
675
|
}, children: subtitle }),
|
|
636
676
|
buttons.map((btn, i) => {
|
|
637
677
|
const isPrimary = btn.style !== "outline";
|
|
638
|
-
return /* @__PURE__ */
|
|
678
|
+
return /* @__PURE__ */ jsx(
|
|
639
679
|
"a",
|
|
640
680
|
{
|
|
641
681
|
href: btn.url,
|
|
@@ -670,42 +710,42 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
670
710
|
const layout = section.config?.layout;
|
|
671
711
|
if (!stats || stats.length === 0) return null;
|
|
672
712
|
if (layout === "list") {
|
|
673
|
-
return /* @__PURE__ */
|
|
674
|
-
/* @__PURE__ */
|
|
713
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: stats.map((stat, i) => /* @__PURE__ */ jsxs("div", { children: [
|
|
714
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
675
715
|
display: "flex",
|
|
676
716
|
justifyContent: "space-between",
|
|
677
717
|
alignItems: "baseline",
|
|
678
718
|
padding: "0.625rem 0"
|
|
679
719
|
}, children: [
|
|
680
|
-
/* @__PURE__ */
|
|
720
|
+
/* @__PURE__ */ jsx("span", { style: {
|
|
681
721
|
fontSize: 12,
|
|
682
722
|
textTransform: "uppercase",
|
|
683
723
|
letterSpacing: "0.15em",
|
|
684
724
|
color: `${theme.fg}66`
|
|
685
725
|
}, children: stat.label }),
|
|
686
|
-
/* @__PURE__ */
|
|
726
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) })
|
|
687
727
|
] }),
|
|
688
|
-
i < stats.length - 1 && /* @__PURE__ */
|
|
728
|
+
i < stats.length - 1 && /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } })
|
|
689
729
|
] }, i)) });
|
|
690
730
|
}
|
|
691
731
|
const columns = Math.min(stats.length, 4);
|
|
692
|
-
return /* @__PURE__ */
|
|
732
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: {
|
|
693
733
|
display: "grid",
|
|
694
734
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
695
735
|
border: `1px solid ${theme.fg}0F`
|
|
696
|
-
}, children: stats.map((stat, i) => /* @__PURE__ */
|
|
736
|
+
}, children: stats.map((stat, i) => /* @__PURE__ */ jsxs("div", { style: {
|
|
697
737
|
padding: "1.25rem 0.5rem",
|
|
698
738
|
textAlign: "center",
|
|
699
739
|
borderRight: i < stats.length - 1 ? `1px solid ${theme.fg}0F` : void 0
|
|
700
740
|
}, children: [
|
|
701
|
-
/* @__PURE__ */
|
|
741
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
702
742
|
fontFamily: theme.fontDisplay || "inherit",
|
|
703
743
|
fontSize: "clamp(1.5rem, 5vw, 2rem)",
|
|
704
744
|
fontWeight: 300,
|
|
705
745
|
lineHeight: 1,
|
|
706
746
|
color: theme.fg
|
|
707
|
-
}, children: /* @__PURE__ */
|
|
708
|
-
/* @__PURE__ */
|
|
747
|
+
}, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) }),
|
|
748
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
709
749
|
fontSize: 11,
|
|
710
750
|
fontWeight: 500,
|
|
711
751
|
textTransform: "uppercase",
|
|
@@ -722,12 +762,12 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
722
762
|
const description = c.description || product?.description || "";
|
|
723
763
|
const imageUrl = c.image_url || product?.featured_image || null;
|
|
724
764
|
const url = c.url || null;
|
|
725
|
-
return /* @__PURE__ */
|
|
726
|
-
imageUrl && /* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
description && /* @__PURE__ */
|
|
730
|
-
url && /* @__PURE__ */
|
|
765
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("div", { style: { background: theme.surface, overflow: "hidden" }, children: [
|
|
766
|
+
imageUrl && /* @__PURE__ */ jsx("div", { style: { width: "100%", aspectRatio: "1", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt: name, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }),
|
|
767
|
+
/* @__PURE__ */ jsxs("div", { style: { padding: "1.25rem" }, children: [
|
|
768
|
+
/* @__PURE__ */ jsx("h3", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 0.5rem", color: theme.fg }, children: name }),
|
|
769
|
+
description && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9rem", color: theme.muted, margin: "0 0 1rem", lineHeight: 1.5 }, children: description }),
|
|
770
|
+
url && /* @__PURE__ */ jsx(
|
|
731
771
|
"a",
|
|
732
772
|
{
|
|
733
773
|
href: url,
|
|
@@ -780,7 +820,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
780
820
|
};
|
|
781
821
|
const buttonLabel = c.button_text || "View Lab Results";
|
|
782
822
|
if (coa.viewer_url) {
|
|
783
|
-
return /* @__PURE__ */
|
|
823
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx(
|
|
784
824
|
"a",
|
|
785
825
|
{
|
|
786
826
|
href: coa.viewer_url,
|
|
@@ -792,18 +832,18 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
792
832
|
}
|
|
793
833
|
) });
|
|
794
834
|
}
|
|
795
|
-
return /* @__PURE__ */
|
|
835
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx("button", { onClick: () => {
|
|
796
836
|
trackClick(tracking, buttonLabel, coa.url);
|
|
797
837
|
onShowCOA();
|
|
798
838
|
}, style: buttonStyle, children: buttonLabel }) });
|
|
799
839
|
}
|
|
800
840
|
function LeadCaptureSection({ section, data, theme, onEvent }) {
|
|
801
841
|
const c = section.content;
|
|
802
|
-
const [firstName, setFirstName] =
|
|
803
|
-
const [email, setEmail] =
|
|
804
|
-
const [newsletterOptIn, setNewsletterOptIn] =
|
|
805
|
-
const [status, setStatus] =
|
|
806
|
-
const [errorMsg, setErrorMsg] =
|
|
842
|
+
const [firstName, setFirstName] = useState("");
|
|
843
|
+
const [email, setEmail] = useState("");
|
|
844
|
+
const [newsletterOptIn, setNewsletterOptIn] = useState(false);
|
|
845
|
+
const [status, setStatus] = useState("idle");
|
|
846
|
+
const [errorMsg, setErrorMsg] = useState("");
|
|
807
847
|
const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
|
|
808
848
|
const storeId = c.store_id || data.store?.id;
|
|
809
849
|
const slug = c.landing_page_slug || data.landing_page?.slug;
|
|
@@ -867,14 +907,14 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
867
907
|
fontFamily: "inherit",
|
|
868
908
|
transition: "border-color 0.2s"
|
|
869
909
|
};
|
|
870
|
-
return /* @__PURE__ */
|
|
871
|
-
/* @__PURE__ */
|
|
872
|
-
/* @__PURE__ */
|
|
910
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
|
|
911
|
+
/* @__PURE__ */ jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
|
|
912
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
873
913
|
background: theme.surface,
|
|
874
914
|
border: `1px solid ${theme.fg}12`,
|
|
875
915
|
padding: "clamp(2rem, 6vw, 3rem)"
|
|
876
|
-
}, children: status === "success" ? /* @__PURE__ */
|
|
877
|
-
/* @__PURE__ */
|
|
916
|
+
}, children: status === "success" ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
|
|
917
|
+
/* @__PURE__ */ jsx("h2", { style: {
|
|
878
918
|
fontSize: "clamp(1.5rem, 5vw, 2rem)",
|
|
879
919
|
fontWeight: 300,
|
|
880
920
|
fontFamily: theme.fontDisplay || "inherit",
|
|
@@ -883,14 +923,14 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
883
923
|
letterSpacing: "-0.02em",
|
|
884
924
|
color: theme.fg
|
|
885
925
|
}, children: successHeading }),
|
|
886
|
-
/* @__PURE__ */
|
|
926
|
+
/* @__PURE__ */ jsx("p", { style: {
|
|
887
927
|
fontSize: "0.9rem",
|
|
888
928
|
color: `${theme.fg}99`,
|
|
889
929
|
margin: "0 0 1.5rem",
|
|
890
930
|
lineHeight: 1.6,
|
|
891
931
|
fontWeight: 300
|
|
892
932
|
}, children: successMessage }),
|
|
893
|
-
c.coupon_code && /* @__PURE__ */
|
|
933
|
+
c.coupon_code && /* @__PURE__ */ jsx("div", { style: {
|
|
894
934
|
display: "inline-block",
|
|
895
935
|
padding: "0.75rem 2rem",
|
|
896
936
|
background: `${theme.fg}08`,
|
|
@@ -901,9 +941,9 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
901
941
|
letterSpacing: "0.12em",
|
|
902
942
|
color: theme.accent
|
|
903
943
|
}, children: c.coupon_code })
|
|
904
|
-
] }) : /* @__PURE__ */
|
|
905
|
-
/* @__PURE__ */
|
|
906
|
-
/* @__PURE__ */
|
|
944
|
+
] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
945
|
+
/* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "clamp(1.5rem, 4vw, 2rem)" }, children: [
|
|
946
|
+
/* @__PURE__ */ jsx("h2", { style: {
|
|
907
947
|
fontSize: "clamp(1.5rem, 5vw, 2.25rem)",
|
|
908
948
|
fontWeight: 300,
|
|
909
949
|
fontFamily: theme.fontDisplay || "inherit",
|
|
@@ -912,7 +952,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
912
952
|
letterSpacing: "-0.02em",
|
|
913
953
|
color: theme.fg
|
|
914
954
|
}, children: heading }),
|
|
915
|
-
/* @__PURE__ */
|
|
955
|
+
/* @__PURE__ */ jsx("p", { style: {
|
|
916
956
|
fontSize: "0.85rem",
|
|
917
957
|
color: theme.accent,
|
|
918
958
|
margin: 0,
|
|
@@ -921,9 +961,9 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
921
961
|
letterSpacing: "0.15em"
|
|
922
962
|
}, children: subtitle })
|
|
923
963
|
] }),
|
|
924
|
-
/* @__PURE__ */
|
|
925
|
-
/* @__PURE__ */
|
|
926
|
-
/* @__PURE__ */
|
|
964
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
965
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
|
|
966
|
+
/* @__PURE__ */ jsx(
|
|
927
967
|
"input",
|
|
928
968
|
{
|
|
929
969
|
type: "text",
|
|
@@ -933,7 +973,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
933
973
|
style: inputStyle
|
|
934
974
|
}
|
|
935
975
|
),
|
|
936
|
-
/* @__PURE__ */
|
|
976
|
+
/* @__PURE__ */ jsx(
|
|
937
977
|
"input",
|
|
938
978
|
{
|
|
939
979
|
type: "email",
|
|
@@ -945,7 +985,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
945
985
|
}
|
|
946
986
|
)
|
|
947
987
|
] }),
|
|
948
|
-
c.show_newsletter_opt_in !== false && /* @__PURE__ */
|
|
988
|
+
c.show_newsletter_opt_in !== false && /* @__PURE__ */ jsxs("label", { style: {
|
|
949
989
|
display: "flex",
|
|
950
990
|
alignItems: "center",
|
|
951
991
|
gap: "0.5rem",
|
|
@@ -955,7 +995,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
955
995
|
fontWeight: 300,
|
|
956
996
|
lineHeight: 1.4
|
|
957
997
|
}, children: [
|
|
958
|
-
/* @__PURE__ */
|
|
998
|
+
/* @__PURE__ */ jsx(
|
|
959
999
|
"input",
|
|
960
1000
|
{
|
|
961
1001
|
type: "checkbox",
|
|
@@ -972,8 +1012,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
972
1012
|
),
|
|
973
1013
|
c.newsletter_label || "Also sign me up for the newsletter \u2014 new drops, deals, and company news."
|
|
974
1014
|
] }),
|
|
975
|
-
status === "error" && errorMsg && /* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
1015
|
+
status === "error" && errorMsg && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "#e55", margin: 0, fontWeight: 400 }, children: errorMsg }),
|
|
1016
|
+
/* @__PURE__ */ jsxs(
|
|
977
1017
|
"button",
|
|
978
1018
|
{
|
|
979
1019
|
type: "submit",
|
|
@@ -998,7 +1038,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
998
1038
|
transition: "opacity 0.2s"
|
|
999
1039
|
},
|
|
1000
1040
|
children: [
|
|
1001
|
-
status === "loading" && /* @__PURE__ */
|
|
1041
|
+
status === "loading" && /* @__PURE__ */ jsx("span", { style: {
|
|
1002
1042
|
display: "inline-block",
|
|
1003
1043
|
width: 16,
|
|
1004
1044
|
height: 16,
|
|
@@ -1018,7 +1058,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1018
1058
|
function SocialLinksSection({ section, theme }) {
|
|
1019
1059
|
const { links } = section.content;
|
|
1020
1060
|
if (!links || links.length === 0) return null;
|
|
1021
|
-
return /* @__PURE__ */
|
|
1061
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center", gap: "1.5rem", flexWrap: "wrap" }, children: links.map((link, i) => /* @__PURE__ */ jsx(
|
|
1022
1062
|
"a",
|
|
1023
1063
|
{
|
|
1024
1064
|
href: link.url,
|
|
@@ -1038,19 +1078,19 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1038
1078
|
)) });
|
|
1039
1079
|
}
|
|
1040
1080
|
function DividerSection({ theme }) {
|
|
1041
|
-
return /* @__PURE__ */
|
|
1081
|
+
return /* @__PURE__ */ jsx("div", { style: { padding: "1rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } }) });
|
|
1042
1082
|
}
|
|
1043
1083
|
function COAModal({ coa, theme, onClose }) {
|
|
1044
|
-
return /* @__PURE__ */
|
|
1045
|
-
/* @__PURE__ */
|
|
1084
|
+
return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.95)", display: "flex", flexDirection: "column" }, children: [
|
|
1085
|
+
/* @__PURE__ */ jsxs("div", { style: {
|
|
1046
1086
|
display: "flex",
|
|
1047
1087
|
justifyContent: "space-between",
|
|
1048
1088
|
alignItems: "center",
|
|
1049
1089
|
padding: "0.75rem 1rem",
|
|
1050
1090
|
borderBottom: `1px solid ${theme.fg}10`
|
|
1051
1091
|
}, children: [
|
|
1052
|
-
/* @__PURE__ */
|
|
1053
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 500, fontSize: "0.85rem" }, children: coa.document_name || "Lab Results" }),
|
|
1093
|
+
/* @__PURE__ */ jsx(
|
|
1054
1094
|
"button",
|
|
1055
1095
|
{
|
|
1056
1096
|
onClick: onClose,
|
|
@@ -1066,7 +1106,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1066
1106
|
}
|
|
1067
1107
|
)
|
|
1068
1108
|
] }),
|
|
1069
|
-
/* @__PURE__ */
|
|
1109
|
+
/* @__PURE__ */ jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
|
|
1070
1110
|
] });
|
|
1071
1111
|
}
|
|
1072
1112
|
function toEmbedUrl(url) {
|
|
@@ -1076,6 +1116,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1076
1116
|
if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
|
|
1077
1117
|
return url;
|
|
1078
1118
|
}
|
|
1119
|
+
|
|
1120
|
+
// src/react/components/landing-page.tsx
|
|
1079
1121
|
function LandingPage({
|
|
1080
1122
|
slug,
|
|
1081
1123
|
gatewayUrl = "https://whale-gateway.fly.dev",
|
|
@@ -1086,10 +1128,10 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1086
1128
|
analyticsContext,
|
|
1087
1129
|
enableAnalytics = true
|
|
1088
1130
|
}) {
|
|
1089
|
-
const [state, setState] =
|
|
1090
|
-
const [data, setData] =
|
|
1091
|
-
const [errorMsg, setErrorMsg] =
|
|
1092
|
-
|
|
1131
|
+
const [state, setState] = useState("loading");
|
|
1132
|
+
const [data, setData] = useState(null);
|
|
1133
|
+
const [errorMsg, setErrorMsg] = useState("");
|
|
1134
|
+
useEffect(() => {
|
|
1093
1135
|
if (!slug) return;
|
|
1094
1136
|
let cancelled = false;
|
|
1095
1137
|
if (typeof window !== "undefined" && window.__LANDING_DATA__) {
|
|
@@ -1134,12 +1176,12 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1134
1176
|
cancelled = true;
|
|
1135
1177
|
};
|
|
1136
1178
|
}, [slug, gatewayUrl]);
|
|
1137
|
-
if (state === "loading") return /* @__PURE__ */
|
|
1138
|
-
if (state === "not_found") return /* @__PURE__ */
|
|
1139
|
-
if (state === "expired") return /* @__PURE__ */
|
|
1140
|
-
if (state === "error") return /* @__PURE__ */
|
|
1179
|
+
if (state === "loading") return /* @__PURE__ */ jsx(DefaultLoading, {});
|
|
1180
|
+
if (state === "not_found") return /* @__PURE__ */ jsx(DefaultNotFound, {});
|
|
1181
|
+
if (state === "expired") return /* @__PURE__ */ jsx(DefaultExpired, {});
|
|
1182
|
+
if (state === "error") return /* @__PURE__ */ jsx(DefaultError, { message: errorMsg });
|
|
1141
1183
|
if (!data) return null;
|
|
1142
|
-
return /* @__PURE__ */
|
|
1184
|
+
return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent, analyticsContext, enableAnalytics });
|
|
1143
1185
|
}
|
|
1144
1186
|
function isSectionVisible(section, urlParams) {
|
|
1145
1187
|
const vis = section.config?.visibility;
|
|
@@ -1159,8 +1201,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1159
1201
|
enableAnalytics
|
|
1160
1202
|
}) {
|
|
1161
1203
|
const { landing_page: lp, store } = data;
|
|
1162
|
-
const trackerRef =
|
|
1163
|
-
|
|
1204
|
+
const trackerRef = useRef(null);
|
|
1205
|
+
useEffect(() => {
|
|
1164
1206
|
if (!enableAnalytics || typeof window === "undefined") return;
|
|
1165
1207
|
const analyticsConfig = window.__LANDING_ANALYTICS__;
|
|
1166
1208
|
if (!analyticsConfig?.slug) return;
|
|
@@ -1260,17 +1302,17 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1260
1302
|
const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
|
|
1261
1303
|
const sorted = [...lp.sections].sort((a, b) => a.order - b.order).filter((s) => isSectionVisible(s, urlParams));
|
|
1262
1304
|
const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
|
|
1263
|
-
return /* @__PURE__ */
|
|
1264
|
-
lp.custom_css && /* @__PURE__ */
|
|
1265
|
-
logoUrl && /* @__PURE__ */
|
|
1305
|
+
return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
|
|
1306
|
+
lp.custom_css && /* @__PURE__ */ jsx("style", { children: lp.custom_css }),
|
|
1307
|
+
logoUrl && /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
|
|
1266
1308
|
sorted.map((section) => {
|
|
1267
|
-
const defaultRenderer = () => /* @__PURE__ */
|
|
1309
|
+
const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
|
|
1268
1310
|
if (renderSection) {
|
|
1269
|
-
return /* @__PURE__ */
|
|
1311
|
+
return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
|
|
1270
1312
|
}
|
|
1271
|
-
return /* @__PURE__ */
|
|
1313
|
+
return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
|
|
1272
1314
|
}),
|
|
1273
|
-
store?.name && /* @__PURE__ */
|
|
1315
|
+
store?.name && /* @__PURE__ */ jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
|
|
1274
1316
|
"Powered by ",
|
|
1275
1317
|
store.name
|
|
1276
1318
|
] }) })
|
|
@@ -1288,27 +1330,27 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1288
1330
|
padding: "2rem"
|
|
1289
1331
|
};
|
|
1290
1332
|
function DefaultLoading() {
|
|
1291
|
-
return /* @__PURE__ */
|
|
1292
|
-
/* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1333
|
+
return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { children: [
|
|
1334
|
+
/* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, border: "2px solid #333", borderTopColor: "#fafafa", borderRadius: "50%", animation: "spin 0.8s linear infinite", margin: "0 auto 1rem" } }),
|
|
1335
|
+
/* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg) } }` })
|
|
1294
1336
|
] }) });
|
|
1295
1337
|
}
|
|
1296
1338
|
function DefaultNotFound() {
|
|
1297
|
-
return /* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1299
|
-
/* @__PURE__ */
|
|
1339
|
+
return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { children: [
|
|
1340
|
+
/* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Not Found" }),
|
|
1341
|
+
/* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "This page does not exist or has been removed." })
|
|
1300
1342
|
] }) });
|
|
1301
1343
|
}
|
|
1302
1344
|
function DefaultExpired() {
|
|
1303
|
-
return /* @__PURE__ */
|
|
1304
|
-
/* @__PURE__ */
|
|
1305
|
-
/* @__PURE__ */
|
|
1345
|
+
return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { children: [
|
|
1346
|
+
/* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Expired" }),
|
|
1347
|
+
/* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "This page is no longer active." })
|
|
1306
1348
|
] }) });
|
|
1307
1349
|
}
|
|
1308
1350
|
function DefaultError({ message }) {
|
|
1309
|
-
return /* @__PURE__ */
|
|
1310
|
-
/* @__PURE__ */
|
|
1311
|
-
/* @__PURE__ */
|
|
1351
|
+
return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { children: [
|
|
1352
|
+
/* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Something Went Wrong" }),
|
|
1353
|
+
/* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: message || "Please try again later." })
|
|
1312
1354
|
] }) });
|
|
1313
1355
|
}
|
|
1314
1356
|
|
|
@@ -1320,4 +1362,4 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
|
|
|
1320
1362
|
|
|
1321
1363
|
return exports;
|
|
1322
1364
|
|
|
1323
|
-
})({}
|
|
1365
|
+
})({});
|