@zenpatient-org/healthspan-marketing-ui 0.1.169 → 0.1.171
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/components/Button/Button.cjs.js +1 -1
- package/dist/components/Button/Button.d.ts +3 -0
- package/dist/components/Button/Button.es.js +34 -28
- package/dist/components/Callback/Callback.d.ts +1 -0
- package/dist/components/Pricing/Pricing.cjs.js +1 -1
- package/dist/components/Pricing/Pricing.d.ts +1 -1
- package/dist/components/Pricing/Pricing.es.js +51 -37
- package/dist/components/Pricing/types.d.ts +2 -0
- package/dist/components/ProductGallery/ProductGallery.cjs.js +1 -1
- package/dist/components/ProductGallery/ProductGallery.es.js +4 -3
- package/dist/components/ProductGalleryCard/ProductGalleryCard.cjs.js +1 -1
- package/dist/components/ProductGalleryCard/ProductGalleryCard.d.ts +1 -1
- package/dist/components/ProductGalleryCard/ProductGalleryCard.es.js +51 -22
- package/dist/components/ProductGalleryCard/types.d.ts +1 -0
- package/dist/components/ProductListing/ProductListing.cjs.js +1 -1
- package/dist/components/ProductListing/ProductListing.d.ts +3 -1
- package/dist/components/ProductListing/ProductListing.es.js +48 -25
- package/dist/modules/CallToAction/CallToAction.cjs.js +1 -1
- package/dist/modules/CallToAction/CallToAction.es.js +86 -73
- package/dist/modules/Callback/Callback.cjs.js +1 -1
- package/dist/modules/Callback/Callback.d.ts +3 -1
- package/dist/modules/Callback/Callback.es.js +46 -24
- package/dist/modules/Compare/Compare.cjs.js +1 -1
- package/dist/modules/Compare/Compare.es.js +12 -12
- package/dist/modules/Compare/types.d.ts +2 -2
- package/dist/modules/FeaturedIn/FeaturedIn.cjs.js +1 -1
- package/dist/modules/FeaturedIn/FeaturedIn.es.js +23 -32
- package/dist/modules/FeaturedIn/components/CtaFeaturedIn.cjs.js +1 -0
- package/dist/modules/FeaturedIn/components/CtaFeaturedIn.d.ts +5 -0
- package/dist/modules/FeaturedIn/components/CtaFeaturedIn.es.js +22 -0
- package/dist/modules/HowItWorks/HowItWorks.cjs.js +1 -1
- package/dist/modules/HowItWorks/HowItWorks.es.js +61 -30
- package/dist/modules/IndividualProductCard/IndividualProductCard.cjs.js +1 -1
- package/dist/modules/IndividualProductCard/IndividualProductCard.d.ts +2 -1
- package/dist/modules/IndividualProductCard/IndividualProductCard.es.js +84 -64
- package/dist/modules/ProgramsDetailsHero/ProgramsDetailsHero.cjs.js +1 -1
- package/dist/modules/ProgramsDetailsHero/ProgramsDetailsHero.es.js +38 -26
- package/dist/modules/YourProtocol/YourProtocol.cjs.js +1 -1
- package/dist/modules/YourProtocol/YourProtocol.es.js +48 -35
- package/dist/pageComponents/HomepageHero/HomepageHero.cjs.js +1 -1
- package/dist/pageComponents/HomepageHero/HomepageHero.es.js +19 -28
- package/dist/pageComponents/LabsHero/LabsHero.cjs.js +1 -1
- package/dist/pageComponents/LabsHero/LabsHero.es.js +54 -43
- package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.cjs.js +1 -1
- package/dist/pageComponents/PersonalizedProtocolHero/PersonalizedProtocolHero.es.js +73 -60
- package/dist/types/analytics/analytics.cjs.js +1 -1
- package/dist/types/analytics/analytics.es.js +3 -3
- package/dist/types/analytics.d.ts +26 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),N=require("../../utils/cn/cn.cjs.js"),u=require("../Icon/Icon.cjs.js"),t=require("./button.module.css.cjs.js"),d=y.forwardRef(({variant:r="primary",size:m="md",as:f="button",disabled:a=!1,children:j,prefixIcon:s,suffixIcon:c,analyticsProps:l,...n},b)=>{const v=t.default[r]||"",q=t.default[m]||"",C=a?t.default.disabled:"",h=x=>{var i,o;l&&((i=window.eventBus)==null||i.emit("analytics",l)),(o=n.onClick)==null||o.call(n,x)};return e.jsx(f,{ref:b,...n,className:N.cn(t.default.button,v,q,C),disabled:a,onClick:h,"data-type":"button",children:e.jsxs("div",{className:t.default.content,children:[s&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:s})}),e.jsx("div",{children:j}),c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:c})})]})})});d.displayName="Button";exports.Button=d;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { default as React, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { EIconName } from '../Icon';
|
|
3
|
+
import { TAnalyticsEvent } from '../../types/analytics';
|
|
3
4
|
|
|
4
5
|
type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
|
|
5
6
|
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
@@ -9,6 +10,8 @@ interface BaseButtonProps {
|
|
|
9
10
|
as?: ElementType;
|
|
10
11
|
prefixIcon?: EIconName;
|
|
11
12
|
suffixIcon?: EIconName;
|
|
13
|
+
analyticsProps?: TAnalyticsEvent;
|
|
14
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
|
|
12
15
|
}
|
|
13
16
|
export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
14
17
|
export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "className"> & React.RefAttributes<HTMLElement>>;
|
|
@@ -1,38 +1,44 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
2
|
+
import { jsx as n, jsxs as k } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as w } from "react";
|
|
4
|
+
import { cn as B } from "../../utils/cn/cn.es.js";
|
|
5
|
+
import { Icon as m } from "../Icon/Icon.es.js";
|
|
6
|
+
import t from "./button.module.css.es.js";
|
|
7
|
+
const j = w(
|
|
8
8
|
({
|
|
9
|
-
variant:
|
|
10
|
-
size:
|
|
11
|
-
as:
|
|
12
|
-
disabled:
|
|
13
|
-
children:
|
|
14
|
-
prefixIcon:
|
|
15
|
-
suffixIcon:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
variant: r = "primary",
|
|
10
|
+
size: d = "md",
|
|
11
|
+
as: u = "button",
|
|
12
|
+
disabled: e = !1,
|
|
13
|
+
children: f,
|
|
14
|
+
prefixIcon: i,
|
|
15
|
+
suffixIcon: s,
|
|
16
|
+
analyticsProps: o,
|
|
17
|
+
...a
|
|
18
|
+
}, v) => {
|
|
19
|
+
const C = t[r] || "", h = t[d] || "", N = e ? t.disabled : "", b = (y) => {
|
|
20
|
+
var c, l;
|
|
21
|
+
o && ((c = window.eventBus) == null || c.emit("analytics", o)), (l = a.onClick) == null || l.call(a, y);
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ n(
|
|
24
|
+
u,
|
|
21
25
|
{
|
|
22
|
-
ref:
|
|
23
|
-
...
|
|
24
|
-
className:
|
|
25
|
-
disabled:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
ref: v,
|
|
27
|
+
...a,
|
|
28
|
+
className: B(t.button, C, h, N),
|
|
29
|
+
disabled: e,
|
|
30
|
+
onClick: b,
|
|
31
|
+
"data-type": "button",
|
|
32
|
+
children: /* @__PURE__ */ k("div", { className: t.content, children: [
|
|
33
|
+
i && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: i }) }),
|
|
34
|
+
/* @__PURE__ */ n("div", { children: f }),
|
|
35
|
+
s && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: s }) })
|
|
30
36
|
] })
|
|
31
37
|
}
|
|
32
38
|
);
|
|
33
39
|
}
|
|
34
40
|
);
|
|
35
|
-
|
|
41
|
+
j.displayName = "Button";
|
|
36
42
|
export {
|
|
37
|
-
|
|
43
|
+
j as Button
|
|
38
44
|
};
|
|
@@ -9,5 +9,6 @@ export type CallbackProps = {
|
|
|
9
9
|
button: ButtonProps;
|
|
10
10
|
size: CallbackSize;
|
|
11
11
|
shape?: CallbackShape;
|
|
12
|
+
onClick?: () => void;
|
|
12
13
|
};
|
|
13
14
|
export declare const Callback: ({ image, title, description, price, button, size, shape, }: CallbackProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),l=require("../Button/Button.cjs.js"),o=require("../Label/Label.cjs.js"),d=require("../Typography/Typography.cjs.js"),h=require("./components/BenefitItem/BenefitItem.cjs.js"),a=require("./pricing.module.css.cjs.js"),p=require("../../types/analytics/analytics.cjs.js"),b=({label:i,price:u,items:m,link:t,button:n,zenpatientId:g,element:y})=>{const s={event:p.EAnalyticsEvent.ctaClicked,type:p.EAnalyticsEventType.interaction,component:"Pricing",element:y,payload:{ctaLabel:"GET STARTED",ctaLink:t,productId:g}};return e.jsxs("div",{className:a.default.root,children:[e.jsx(o.Label,{size:"lg",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelDesktop),children:i.label}),e.jsx(o.Label,{size:"sm",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelMobile),children:i.label}),e.jsxs("p",{className:a.default.pricing,children:[e.jsx(d.Typography,{as:"span",defaultVariant:"displayMd",mobileVariant:"displaySm",className:a.default.pricingTextPrimary,children:`$${u}`}),e.jsx(d.Typography,{as:"span",defaultVariant:"headingSm",mobileVariant:"headingXs",className:a.default.pricingTextSecondary,children:"/ mo"})]}),e.jsx("div",{className:a.default.benefits,children:m.map((r,f)=>e.jsx(h.BenefitItem,{badge:r.badge,label:r.label},f))}),e.jsx("div",{className:a.default.pricingButtonContainerDesktop,children:e.jsx(l.Button,{...n,size:"lg",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.pricingButtonContainerMobile,children:e.jsx(l.Button,{...n,size:"md",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]})};exports.Pricing=b;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { PricingElementView } from './types';
|
|
2
2
|
|
|
3
|
-
export declare const Pricing: ({ label, price, items, link, button }: PricingElementView) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const Pricing: ({ label, price, items, link, button, zenpatientId, element }: PricingElementView) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,41 +1,55 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { cn as
|
|
3
|
-
import { Button as
|
|
1
|
+
import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { cn as o } from "../../utils/cn/cn.es.js";
|
|
3
|
+
import { Button as l } from "../Button/Button.es.js";
|
|
4
4
|
import { Label as m } from "../Label/Label.es.js";
|
|
5
|
-
import { Typography as
|
|
6
|
-
import { BenefitItem as
|
|
5
|
+
import { Typography as p } from "../Typography/Typography.es.js";
|
|
6
|
+
import { BenefitItem as b } from "./components/BenefitItem/BenefitItem.es.js";
|
|
7
7
|
import i from "./pricing.module.css.es.js";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* @__PURE__ */ e(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
8
|
+
import { EAnalyticsEventType as T, EAnalyticsEvent as E } from "../../types/analytics/analytics.es.js";
|
|
9
|
+
const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h, element: f }) => {
|
|
10
|
+
const c = {
|
|
11
|
+
event: E.ctaClicked,
|
|
12
|
+
type: T.interaction,
|
|
13
|
+
component: "Pricing",
|
|
14
|
+
element: f,
|
|
15
|
+
payload: {
|
|
16
|
+
ctaLabel: "GET STARTED",
|
|
17
|
+
ctaLink: r,
|
|
18
|
+
productId: h
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return /* @__PURE__ */ t("div", { className: i.root, children: [
|
|
22
|
+
/* @__PURE__ */ a(m, { size: "lg", color: e.color, className: o(i.pricingLabel, i.pricingLabelDesktop), children: e.label }),
|
|
23
|
+
/* @__PURE__ */ a(m, { size: "sm", color: e.color, className: o(i.pricingLabel, i.pricingLabelMobile), children: e.label }),
|
|
24
|
+
/* @__PURE__ */ t("p", { className: i.pricing, children: [
|
|
25
|
+
/* @__PURE__ */ a(
|
|
26
|
+
p,
|
|
27
|
+
{
|
|
28
|
+
as: "span",
|
|
29
|
+
defaultVariant: "displayMd",
|
|
30
|
+
mobileVariant: "displaySm",
|
|
31
|
+
className: i.pricingTextPrimary,
|
|
32
|
+
children: `$${d}`
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ a(
|
|
36
|
+
p,
|
|
37
|
+
{
|
|
38
|
+
as: "span",
|
|
39
|
+
defaultVariant: "headingSm",
|
|
40
|
+
mobileVariant: "headingXs",
|
|
41
|
+
className: i.pricingTextSecondary,
|
|
42
|
+
children: "/ mo"
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
] }),
|
|
46
|
+
/* @__PURE__ */ a("div", { className: i.benefits, children: g.map((s, y) => /* @__PURE__ */ a(b, { badge: s.badge, label: s.label }, y)) }),
|
|
47
|
+
/* @__PURE__ */ a("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ a(l, { ...n, size: "lg", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
|
|
48
|
+
/* @__PURE__ */ a("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ a(l, { ...n, size: "md", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
|
|
49
|
+
/* @__PURE__ */ a("div", { className: i.leftBorder }),
|
|
50
|
+
/* @__PURE__ */ a("div", { className: i.rightBorder })
|
|
51
|
+
] });
|
|
52
|
+
};
|
|
39
53
|
export {
|
|
40
|
-
|
|
54
|
+
D as Pricing
|
|
41
55
|
};
|
|
@@ -3,6 +3,7 @@ import { LabelColor } from '../Label';
|
|
|
3
3
|
import { ETypeBadge } from '../TypeBadge';
|
|
4
4
|
|
|
5
5
|
export type PricingElementView = {
|
|
6
|
+
zenpatientId: string;
|
|
6
7
|
label: {
|
|
7
8
|
label: string;
|
|
8
9
|
color: LabelColor;
|
|
@@ -14,4 +15,5 @@ export type PricingElementView = {
|
|
|
14
15
|
price: number;
|
|
15
16
|
button: ButtonProps;
|
|
16
17
|
link: string;
|
|
18
|
+
element: 'left_card' | 'right_card';
|
|
17
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),p=require("../../node_modules/swiper/swiper-react.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),h=require("../ProgressButton/ProgressButton.cjs.js"),j=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css */;/* empty css */;/* empty css */const r=require("./productGallery.module.css.cjs.js"),b=[q.default],v=({slides:
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),p=require("../../node_modules/swiper/swiper-react.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),h=require("../ProgressButton/ProgressButton.cjs.js"),j=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css */;/* empty css */;/* empty css */const r=require("./productGallery.module.css.cjs.js"),b=[q.default],v=({slides:n,header:m,isTabbed:i=!1})=>{const{swiper:s,activeIndex:a,isEnd:l,setIsEnd:w,hideNav:S,handleSlideChange:g,handlePrevClick:o,handleNextClick:d,onSwiperInit:C,handleSwiperResize:P,handleSlideTo:c}=x.useSwiper();return u.useEffect(()=>{s==null||s.setProgress(0,300)},[s]),u.useEffect(()=>{n.length&&c(0)},[n,c]),e.jsxs("div",{className:r.default.root,children:[e.jsxs("div",{className:f.cn(r.default.topRow,{[r.default.topRowTabbed]:i}),children:[e.jsx("div",{className:r.default.headerWrapper,children:m}),e.jsx("div",{className:f.cn(r.default.swiperControlsDesktop,{[r.default.swiperControlsHidden]:S,[r.default.swiperControlsTabbed]:i}),children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]}),e.jsx("div",{className:r.default.carouselArea,children:e.jsx(p.Swiper,{onSwiper:C,onResize:P,onSlideChange:g,onReachEnd:()=>w(!0),modules:b,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:n.map(t=>e.jsx(p.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx(j.ProductGalleryCard,{name:t.name,price:t.price,image:t.image,link:t.link,buttons:t.buttons,zenpatientId:t.zenpatientId})},`${t.name}_${t.link}`))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]})};exports.ProductGallery=v;
|
|
@@ -11,7 +11,7 @@ import { ProductGalleryCard as E } from "../ProductGalleryCard/ProductGalleryCar
|
|
|
11
11
|
/* empty css */
|
|
12
12
|
/* empty css */
|
|
13
13
|
import e from "./productGallery.module.css.es.js";
|
|
14
|
-
const
|
|
14
|
+
const I = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
|
|
15
15
|
const {
|
|
16
16
|
swiper: o,
|
|
17
17
|
activeIndex: a,
|
|
@@ -70,7 +70,7 @@ const R = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
|
|
|
70
70
|
onResize: g,
|
|
71
71
|
onSlideChange: S,
|
|
72
72
|
onReachEnd: () => u(!0),
|
|
73
|
-
modules:
|
|
73
|
+
modules: I,
|
|
74
74
|
spaceBetween: 0,
|
|
75
75
|
slidesPerView: "auto",
|
|
76
76
|
className: e.swiper,
|
|
@@ -81,7 +81,8 @@ const R = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
|
|
|
81
81
|
price: i.price,
|
|
82
82
|
image: i.image,
|
|
83
83
|
link: i.link,
|
|
84
|
-
buttons: i.buttons
|
|
84
|
+
buttons: i.buttons,
|
|
85
|
+
zenpatientId: i.zenpatientId
|
|
85
86
|
}
|
|
86
87
|
) }, `${i.name}_${i.link}`))
|
|
87
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("../Button/Button.cjs.js"),p=require("../Typography/Typography.cjs.js"),y=require("../../utils/cn/cn.cjs.js"),l=require("./productGalleryCard.module.css.cjs.js"),r=require("../../types/analytics/analytics.cjs.js"),v=({name:n,price:m,image:h,zenpatientId:c,link:o,buttons:s,isHoverable:i=!0})=>{const f=()=>{var t;const e={event:r.EAnalyticsEvent.productGalleryCardClicked,type:r.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:"card",payload:{zenpatientId:c,link:o,productName:n}};(t=window.eventBus)==null||t.emit("analytics",e)},d=(e,t)=>({event:r.EAnalyticsEvent.ctaClicked,type:r.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:`button_${t}`,payload:{ctaLabel:e.label,productId:c,productName:n}});return a.jsxs("a",{href:o,rel:"noopener noreferrer",className:l.default.root,onClick:f,children:[a.jsxs("div",{className:l.default.productInfo,children:[a.jsx(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.title,children:n}),a.jsx(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.price,children:m})]}),a.jsx("img",{src:h,alt:"product image",className:l.default.productImage}),a.jsx("div",{className:y.cn(l.default.buttonContainerDesktop,i&&l.default.hoverableButtons),children:s.map((e,t)=>a.jsx(u.Button,{size:"sm",...e,analyticsProps:d(e,t),children:e.label},t))}),a.jsx("div",{className:y.cn(l.default.buttonContainerMobile,i&&l.default.hoverableButtons),children:s.map((e,t)=>a.jsx(u.Button,{size:"xs",...e,analyticsProps:d(e,t),children:e.label},t))})]})};exports.ProductGalleryCard=v;
|
|
@@ -3,5 +3,5 @@ import { TProductGalleryCardView } from './types';
|
|
|
3
3
|
type ProductGalleryCardProps = {
|
|
4
4
|
isHoverable?: boolean;
|
|
5
5
|
} & TProductGalleryCardView;
|
|
6
|
-
export declare const ProductGalleryCard: ({ name, price, image, link, buttons, isHoverable, }: ProductGalleryCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ProductGalleryCard: ({ name, price, image, zenpatientId, link, buttons, isHoverable, }: ProductGalleryCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -1,25 +1,54 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { Typography as
|
|
5
|
-
import { cn as
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
2
|
+
import { jsxs as d, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { Button as m } from "../Button/Button.es.js";
|
|
4
|
+
import { Typography as p } from "../Typography/Typography.es.js";
|
|
5
|
+
import { cn as u } from "../../utils/cn/cn.es.js";
|
|
6
|
+
import r from "./productGalleryCard.module.css.es.js";
|
|
7
|
+
import { EAnalyticsEventType as y, EAnalyticsEvent as h } from "../../types/analytics/analytics.es.js";
|
|
8
|
+
const k = ({
|
|
9
|
+
name: l,
|
|
10
|
+
price: f,
|
|
11
|
+
image: v,
|
|
12
|
+
zenpatientId: o,
|
|
13
|
+
link: c,
|
|
14
|
+
buttons: n,
|
|
15
|
+
isHoverable: i = !0
|
|
16
|
+
}) => {
|
|
17
|
+
const C = () => {
|
|
18
|
+
var a;
|
|
19
|
+
const e = {
|
|
20
|
+
event: h.productGalleryCardClicked,
|
|
21
|
+
type: y.interaction,
|
|
22
|
+
component: "ProductGalleryCard",
|
|
23
|
+
element: "card",
|
|
24
|
+
payload: {
|
|
25
|
+
zenpatientId: o,
|
|
26
|
+
link: c,
|
|
27
|
+
productName: l
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
(a = window.eventBus) == null || a.emit("analytics", e);
|
|
31
|
+
}, s = (e, a) => ({
|
|
32
|
+
event: h.ctaClicked,
|
|
33
|
+
type: y.interaction,
|
|
34
|
+
component: "ProductGalleryCard",
|
|
35
|
+
element: `button_${a}`,
|
|
36
|
+
payload: {
|
|
37
|
+
ctaLabel: e.label,
|
|
38
|
+
productId: o,
|
|
39
|
+
productName: l
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return /* @__PURE__ */ d("a", { href: c, rel: "noopener noreferrer", className: r.root, onClick: C, children: [
|
|
43
|
+
/* @__PURE__ */ d("div", { className: r.productInfo, children: [
|
|
44
|
+
/* @__PURE__ */ t(p, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.title, children: l }),
|
|
45
|
+
/* @__PURE__ */ t(p, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.price, children: f })
|
|
46
|
+
] }),
|
|
47
|
+
/* @__PURE__ */ t("img", { src: v, alt: "product image", className: r.productImage }),
|
|
48
|
+
/* @__PURE__ */ t("div", { className: u(r.buttonContainerDesktop, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(m, { size: "sm", ...e, analyticsProps: s(e, a), children: e.label }, a)) }),
|
|
49
|
+
/* @__PURE__ */ t("div", { className: u(r.buttonContainerMobile, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(m, { size: "xs", ...e, analyticsProps: s(e, a), children: e.label }, a)) })
|
|
50
|
+
] });
|
|
51
|
+
};
|
|
23
52
|
export {
|
|
24
|
-
|
|
53
|
+
k as ProductGalleryCard
|
|
25
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../types/analytics/analytics.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),u=require("../Button/Button.cjs.js"),f=require("../Label/Label.cjs.js"),j=require("../TypeBadge/TypeBadge.cjs.js"),l=require("../Typography/Typography.cjs.js"),a=require("./productListing.module.css.cjs.js"),b=({name:i,description:p,image:y,price:m,buttons:c,features:h,label:n,zenpatientId:g})=>{const r=(s,t)=>({event:d.EAnalyticsEvent.ctaClicked,type:d.EAnalyticsEventType.interaction,component:"ProductListing",element:`button_${t}`,payload:{ctaLabel:s.label,productId:g,productName:i}});return e.jsxs("section",{className:a.default.root,children:[e.jsxs("div",{className:a.default.imageWrapper,children:[e.jsx("img",{src:y,alt:i,className:a.default.image}),n&&e.jsx(f.Label,{color:"black",size:"sm",className:a.default.label,children:n})]}),e.jsxs("div",{className:a.default.content,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(l.Typography,{as:"h3",defaultVariant:"headingXl",mobileVariant:"headingMd",children:i}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodySm",children:p})]}),e.jsx("div",{className:a.default.features,children:h.map((s,t)=>e.jsxs("div",{className:a.default.feature,children:[e.jsx(j.TypeBadge,{type:s.type},t),e.jsx(l.Typography,{as:"span",defaultVariant:"bodyMd",className:a.default.featureLabel,children:s.label})]},`${s.label}-${t}`))}),e.jsx("div",{className:a.default.divider}),e.jsx(l.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodyMd",emphasis:!0,children:m}),e.jsx("div",{className:o.cn(a.default.actions,a.default.desktop),children:c.map((s,t)=>e.jsx(u.Button,{...s,size:"lg",analyticsProps:r(s,t),children:s.label},t))}),e.jsx("div",{className:o.cn(a.default.actions,a.default.mobile),children:c.map((s,t)=>e.jsx(u.Button,{...s,size:"md",analyticsProps:r(s,t),children:s.label},t))})]})]})};exports.ProductListing=b;
|
|
@@ -14,6 +14,8 @@ type ProductListingProps = {
|
|
|
14
14
|
label: string;
|
|
15
15
|
} & ButtonProps>;
|
|
16
16
|
label?: string;
|
|
17
|
+
zenpatientId?: string;
|
|
18
|
+
analyticsLocation: string;
|
|
17
19
|
};
|
|
18
|
-
export declare const ProductListing: ({ name, description, image, price, buttons, features, label }: ProductListingProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const ProductListing: ({ name, description, image, price, buttons, features, label, zenpatientId, }: ProductListingProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
21
|
export {};
|
|
@@ -1,30 +1,53 @@
|
|
|
1
|
-
import { jsxs as r, jsx as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { jsxs as r, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { EAnalyticsEventType as N, EAnalyticsEvent as b } from "../../types/analytics/analytics.es.js";
|
|
3
|
+
import { cn as m } from "../../utils/cn/cn.es.js";
|
|
4
|
+
import { Button as n } from "../Button/Button.es.js";
|
|
5
|
+
import { Label as g } from "../Label/Label.es.js";
|
|
6
|
+
import { TypeBadge as u } from "../TypeBadge/TypeBadge.es.js";
|
|
6
7
|
import { Typography as s } from "../Typography/Typography.es.js";
|
|
7
8
|
import a from "./productListing.module.css.es.js";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
const T = ({
|
|
10
|
+
name: t,
|
|
11
|
+
description: p,
|
|
12
|
+
image: h,
|
|
13
|
+
price: y,
|
|
14
|
+
buttons: c,
|
|
15
|
+
features: f,
|
|
16
|
+
label: d,
|
|
17
|
+
zenpatientId: v
|
|
18
|
+
}) => {
|
|
19
|
+
const o = (e, l) => ({
|
|
20
|
+
event: b.ctaClicked,
|
|
21
|
+
type: N.interaction,
|
|
22
|
+
component: "ProductListing",
|
|
23
|
+
element: `button_${l}`,
|
|
24
|
+
payload: {
|
|
25
|
+
ctaLabel: e.label,
|
|
26
|
+
productId: v,
|
|
27
|
+
productName: t
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return /* @__PURE__ */ r("section", { className: a.root, children: [
|
|
31
|
+
/* @__PURE__ */ r("div", { className: a.imageWrapper, children: [
|
|
32
|
+
/* @__PURE__ */ i("img", { src: h, alt: t, className: a.image }),
|
|
33
|
+
d && /* @__PURE__ */ i(g, { color: "black", size: "sm", className: a.label, children: d })
|
|
17
34
|
] }),
|
|
18
|
-
/* @__PURE__ */
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
/* @__PURE__ */ r("div", { className: a.content, children: [
|
|
36
|
+
/* @__PURE__ */ r("div", { className: a.header, children: [
|
|
37
|
+
/* @__PURE__ */ i(s, { as: "h3", defaultVariant: "headingXl", mobileVariant: "headingMd", children: t }),
|
|
38
|
+
/* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodySm", children: p })
|
|
39
|
+
] }),
|
|
40
|
+
/* @__PURE__ */ i("div", { className: a.features, children: f.map((e, l) => /* @__PURE__ */ r("div", { className: a.feature, children: [
|
|
41
|
+
/* @__PURE__ */ i(u, { type: e.type }, l),
|
|
42
|
+
/* @__PURE__ */ i(s, { as: "span", defaultVariant: "bodyMd", className: a.featureLabel, children: e.label })
|
|
43
|
+
] }, `${e.label}-${l}`)) }),
|
|
44
|
+
/* @__PURE__ */ i("div", { className: a.divider }),
|
|
45
|
+
/* @__PURE__ */ i(s, { defaultVariant: "bodyLg", mobileVariant: "bodyMd", emphasis: !0, children: y }),
|
|
46
|
+
/* @__PURE__ */ i("div", { className: m(a.actions, a.desktop), children: c.map((e, l) => /* @__PURE__ */ i(n, { ...e, size: "lg", analyticsProps: o(e, l), children: e.label }, l)) }),
|
|
47
|
+
/* @__PURE__ */ i("div", { className: m(a.actions, a.mobile), children: c.map((e, l) => /* @__PURE__ */ i(n, { ...e, size: "md", analyticsProps: o(e, l), children: e.label }, l)) })
|
|
48
|
+
] })
|
|
49
|
+
] });
|
|
50
|
+
};
|
|
28
51
|
export {
|
|
29
|
-
|
|
52
|
+
T as ProductListing
|
|
30
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),J=require("../../components/Button/Button.cjs.js"),m=require("../../components/Typography/Typography.cjs.js"),I=require("../../components/Icon/Icon.cjs.js"),k=require("../../components/Icon/constants.cjs.js"),j=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../node_modules/gsap/index.cjs.js"),Q=require("../../node_modules/@gsap/react/src/index.cjs.js"),M=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),U=require("../../utils/debounce.cjs.js"),t=require("./callToAction.module.css.cjs.js"),L=require("../../types/analytics/analytics.cjs.js");a.gsap.registerPlugin(M.ScrollTrigger);const Y=({subtitle:B,titleTop:P,scrollableLabels:R,titleBottom:W,description:$,hsaText:O,buttonText:X,buttonLink:u,backgroundImage:z})=>{const d=r.useRef(null),c=r.useRef(null),T=r.useRef(null),h=r.useRef(null),g=r.useRef(null),N=r.useRef(null),y=r.useRef(null),b=r.useRef(null),v=r.useRef(null),F=()=>{var n;(n=window.eventBus)==null||n.emit("analytics",{event:L.EAnalyticsEvent.ctaClicked,type:L.EAnalyticsEventType.interaction,component:"CallToAction",element:"primary_button",payload:{link:u}})};return Q.useGSAP(()=>{var C,H,S;const n=d.current&&d.current.getBoundingClientRect().top<window.innerHeight*.8,p=(C=T.current)==null?void 0:C.querySelector("p"),q=(H=N.current)==null?void 0:H.querySelector("p"),D=[p,h.current,c.current,g.current,q,y.current,b.current,v.current].filter(Boolean);a.gsap.set(D,{clipPath:"inset(0% 0% 100% 0%)",yPercent:100});const f=a.gsap.to([p,h.current,c.current,g.current,q,y.current,b.current,v.current],{clipPath:"inset(0% 0% 0% 0%)",yPercent:0,duration:1,ease:"power2.out",delay:.3,stagger:{amount:1,from:"start"},paused:!0});M.ScrollTrigger.create({trigger:d.current,start:"top 80%",end:"+=500",onEnter:()=>f.play(),onEnterBack:()=>f.play(),onLeaveBack:()=>f.reverse()}),n&&a.gsap.delayedCall(.1,()=>{f.play()});const l=(S=c.current)==null?void 0:S.querySelector("ul");if(!l)return;const _=l.innerHTML;let s=null,w=!0;const E=()=>{s&&s.kill(),l.innerHTML=_,a.gsap.set(l,{y:0});const i=Array.from(l.querySelectorAll("li"));if(i.length<=1)return;const x=i[0].clientHeight;if(!x)return;a.gsap.set(c.current,{height:()=>x,overflow:"hidden"});const V=Array.from(i);V.forEach(A=>{l.appendChild(A.cloneNode(!0))});const G=w&&!n?.3:0;s=a.gsap.timeline({repeat:-1,delay:G,onRepeat:()=>{a.gsap.set(l,{y:0})}}),V.forEach((A,K)=>{s&&s.to({},{duration:2}).to(l,{y:`-${(K+1)*x}`,duration:.5,ease:"power1.inOut"})}),w=!1},o=U.default(E,200);return E(),window.addEventListener("resize",o),()=>{var i;window.removeEventListener("resize",o),(i=o.kill)==null||i.call(o),s&&s.kill(),l&&(l.innerHTML=_,a.gsap.set(l,{y:0}))}},[R]),e.jsxs("section",{ref:d,className:t.default.root,children:[e.jsx("div",{className:t.default.backgroundImage,style:{backgroundImage:`url(${z})`}}),e.jsxs("div",{className:t.default.container,children:[e.jsx("div",{className:t.default.leftContent,children:e.jsxs("div",{className:t.default.content,children:[e.jsx("div",{ref:h,children:e.jsx(j.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:P})}),e.jsx("div",{ref:c,className:t.default.scrollableLabelsWrapper,children:e.jsx("ul",{className:t.default.scrollableLabels,children:R.map((n,p)=>e.jsx("li",{className:t.default.scrollableLabel,children:e.jsx(m.Typography,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"span",children:n})},p))})}),e.jsx("div",{ref:g,children:e.jsx(j.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:W})})]})}),e.jsx("div",{ref:T,className:t.default.subtitleWrapper,children:e.jsx(j.HighlightedTitle,{defaultVariant:"labelMd",mobileVariant:"labelSm",as:"div",className:t.default.subtitle,title:B})}),e.jsx("div",{ref:N,className:t.default.arrowWrapper,children:e.jsxs(m.Typography,{defaultVariant:"labelMd",mobileVariant:"labelXs",emphasis:!0,className:t.default.arrow,as:"p",children:["(",e.jsx(I.Icon,{name:k.EIconName.ARROW_FORWARD}),")"]})}),e.jsx("div",{className:t.default.rightContent,children:e.jsxs("div",{className:t.default.descriptionWrapper,children:[e.jsx("div",{ref:y,children:e.jsx(m.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:t.default.description,children:$})}),e.jsx("div",{ref:b,className:t.default.buttonWrapper,children:u&&e.jsx(J.Button,{as:u?"a":"button",href:u,variant:"secondary",size:"lg",onClick:F,children:X})}),e.jsxs("div",{ref:v,className:t.default.hsaEligible,children:[e.jsx(I.Icon,{name:k.EIconName.CIRCLE_CHECK_FILL,className:t.default.checkIcon}),e.jsx(m.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodySm",className:t.default.hsaText,children:O})]})]})})]})]})};exports.CallToAction=Y;
|