@zenpatient-org/healthspan-marketing-ui 0.1.170 → 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/Pricing/types.d.ts +1 -3
- package/dist/modules/Compare/types.d.ts +2 -2
- package/dist/modules/IndividualProductCard/IndividualProductCard.cjs.js +1 -1
- package/dist/modules/IndividualProductCard/IndividualProductCard.d.ts +2 -6
- package/dist/modules/IndividualProductCard/IndividualProductCard.es.js +80 -91
- package/package.json +1 -1
|
@@ -13,9 +13,7 @@ export type PricingElementView = {
|
|
|
13
13
|
label: string;
|
|
14
14
|
}>;
|
|
15
15
|
price: number;
|
|
16
|
-
button: ButtonProps
|
|
17
|
-
onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
|
|
18
|
-
};
|
|
16
|
+
button: ButtonProps;
|
|
19
17
|
link: string;
|
|
20
18
|
element: 'left_card' | 'right_card';
|
|
21
19
|
};
|
|
@@ -4,6 +4,6 @@ import { PricingElementView } from '../../components/Pricing';
|
|
|
4
4
|
export type CompareView = {
|
|
5
5
|
label?: string;
|
|
6
6
|
title: ReactNode;
|
|
7
|
-
leftElement: PricingElementView
|
|
8
|
-
rightElement: PricingElementView
|
|
7
|
+
leftElement: Omit<PricingElementView, 'element'>;
|
|
8
|
+
rightElement: Omit<PricingElementView, 'element'>;
|
|
9
9
|
};
|
|
@@ -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"),S=require("../../utils/cn/cn.cjs.js"),j=require("../../components/Button/Button.cjs.js"),f=require("../../components/TextButton/TextButton.cjs.js"),E=require("../../components/ImageGallery/ImageGallery.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),w=require("../../components/SmartCallout/SmartCallout.cjs.js"),k=require("../../components/RatingStars/RatingStars.cjs.js"),A=require("./components/Features/Features.cjs.js"),I=require("./components/PlanCard/PlanCard.cjs.js"),c=require("../../types/analytics/analytics.cjs.js"),a=require("./individualProductCard.module.css.cjs.js"),R=({zenpatientId:_,name:u,description:y,features:C,images:x,label:b,rating:l,plans:t,button:n,textButton:s,selectedPlanId:p,onSelectPlan:o,trackingEvent:T,trackingLocation:h})=>{const m=t&&t.length>0&&o,q=i=>{if(o==null||o(i),T){const r=t==null?void 0:t.find(N=>N.id===i);c.EAnalyticsEventType.interaction,r==null||r.price,r==null||r.duration}},v=()=>{var r;const i={event:c.EAnalyticsEvent.ctaClicked,location:h||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"primary_button",payload:{productId:_,ctaLabel:n.label,productName:u,selectedPlanId:p||"none"}};(r=window.eventBus)==null||r.emit("analytics",i)},g=()=>{var i;(i=window.eventBus)==null||i.emit("analytics",{event:c.EAnalyticsEvent.ctaClicked,location:h||"not_set",type:c.EAnalyticsEventType.interaction,component:"IndividualProductCard",element:"secondary_button",payload:{ctaLabel:s==null?void 0:s.label,productName:u}})};return e.jsx("section",{className:a.default.root,children:e.jsxs("div",{className:S.cn(a.default.container,!m&&a.default.noPlans),children:[e.jsxs("div",{className:a.default.info,children:[e.jsxs("div",{className:a.default.infoHeader,children:[e.jsx(d.Typography,{as:"h3",defaultVariant:"displayXs",mobileVariant:"headingLg",weight:"regular",children:u}),!!y&&e.jsx(d.Typography,{as:"p",defaultVariant:"bodySm",className:a.default.infoDescription,weight:"regular",children:y}),l&&e.jsxs("div",{className:a.default.ratingContainer,children:[!!l.stars&&e.jsx(k.RatingStars,{rating:l.stars,size:"sm"}),!!l.totalReviews&&e.jsxs(d.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:[l.totalReviews," reviews"]})]})]}),e.jsx(A.Features,{features:C}),e.jsxs("div",{className:a.default.actions,children:[e.jsx(w.SmartCallout,{label:"HSA/FSA Eligible"}),!m&&e.jsxs(e.Fragment,{children:[e.jsx(j.Button,{variant:"primary",size:"lg",...n,onClick:v,children:n.label}),s&&e.jsx(f.TextButton,{...s,onClick:g,children:s.label})]})]})]}),e.jsx(E.ImageGallery,{className:a.default.gallery,images:x,label:b}),m&&e.jsxs("div",{className:a.default.plansSection,children:[e.jsxs("div",{className:a.default.plans,children:[e.jsx(d.Typography,{as:"h4",defaultVariant:"labelSm",emphasis:!0,weight:"regular",children:"Subscribe & Save"}),t.map(i=>e.jsx(I.PlanCard,{plan:i,onSelect:q,isActive:p===i.id},i.id))]}),e.jsxs("div",{className:a.default.actions,children:[e.jsx(j.Button,{variant:"primary",size:"lg",...n,onClick:v,children:n.label}),s&&e.jsx(f.TextButton,{...s,onClick:g,children:s.label})]})]})]})})};exports.IndividualProductCard=R;
|
|
@@ -16,14 +16,10 @@ type IndividualProductCardProps = {
|
|
|
16
16
|
};
|
|
17
17
|
button: {
|
|
18
18
|
label: string;
|
|
19
|
-
} & ButtonProps
|
|
20
|
-
onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
|
|
21
|
-
};
|
|
19
|
+
} & ButtonProps;
|
|
22
20
|
textButton?: {
|
|
23
21
|
label: string;
|
|
24
|
-
} & TextButtonProps
|
|
25
|
-
onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
|
|
26
|
-
};
|
|
22
|
+
} & TextButtonProps;
|
|
27
23
|
plans?: Array<TProductPlan>;
|
|
28
24
|
selectedPlanId?: TProductPlan['id'];
|
|
29
25
|
onSelectPlan?: (planId: TProductPlan['id']) => void;
|
|
@@ -1,129 +1,118 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { cn as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { TextButton as
|
|
5
|
-
import { ImageGallery as
|
|
6
|
-
import { Typography as
|
|
7
|
-
import { SmartCallout as
|
|
8
|
-
import { RatingStars as
|
|
9
|
-
import { Features as
|
|
10
|
-
import { PlanCard as
|
|
11
|
-
import { EAnalyticsEventType as
|
|
12
|
-
import
|
|
13
|
-
const
|
|
14
|
-
zenpatientId:
|
|
15
|
-
name:
|
|
16
|
-
description:
|
|
17
|
-
features:
|
|
18
|
-
images:
|
|
19
|
-
label:
|
|
20
|
-
rating:
|
|
1
|
+
import { jsx as i, jsxs as r, Fragment as T } from "react/jsx-runtime";
|
|
2
|
+
import { cn as _ } from "../../utils/cn/cn.es.js";
|
|
3
|
+
import { Button as b } from "../../components/Button/Button.es.js";
|
|
4
|
+
import { TextButton as g } from "../../components/TextButton/TextButton.es.js";
|
|
5
|
+
import { ImageGallery as z } from "../../components/ImageGallery/ImageGallery.es.js";
|
|
6
|
+
import { Typography as t } from "../../components/Typography/Typography.es.js";
|
|
7
|
+
import { SmartCallout as F } from "../../components/SmartCallout/SmartCallout.es.js";
|
|
8
|
+
import { RatingStars as R } from "../../components/RatingStars/RatingStars.es.js";
|
|
9
|
+
import { Features as j } from "./components/Features/Features.es.js";
|
|
10
|
+
import { PlanCard as D } from "./components/PlanCard/PlanCard.es.js";
|
|
11
|
+
import { EAnalyticsEventType as p, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
|
|
12
|
+
import a from "./individualProductCard.module.css.es.js";
|
|
13
|
+
const Y = ({
|
|
14
|
+
zenpatientId: w,
|
|
15
|
+
name: m,
|
|
16
|
+
description: v,
|
|
17
|
+
features: k,
|
|
18
|
+
images: S,
|
|
19
|
+
label: E,
|
|
20
|
+
rating: n,
|
|
21
21
|
plans: o,
|
|
22
22
|
button: s,
|
|
23
|
-
textButton:
|
|
24
|
-
selectedPlanId:
|
|
25
|
-
onSelectPlan:
|
|
26
|
-
trackingEvent:
|
|
27
|
-
trackingLocation:
|
|
23
|
+
textButton: l,
|
|
24
|
+
selectedPlanId: y,
|
|
25
|
+
onSelectPlan: d,
|
|
26
|
+
trackingEvent: A,
|
|
27
|
+
trackingLocation: f
|
|
28
28
|
}) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
event: w,
|
|
34
|
-
location: y || "",
|
|
35
|
-
type: C.interaction,
|
|
36
|
-
payload: {
|
|
37
|
-
productId: t,
|
|
38
|
-
planId: l,
|
|
39
|
-
planPrice: e == null ? void 0 : e.price,
|
|
40
|
-
planDuration: e == null ? void 0 : e.duration
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
(d = window.eventBus) == null || d.emit("analytics", h);
|
|
29
|
+
const h = o && o.length > 0 && d, V = (e) => {
|
|
30
|
+
if (d == null || d(e), A) {
|
|
31
|
+
const c = o == null ? void 0 : o.find((I) => I.id === e);
|
|
32
|
+
p.interaction, c == null || c.price, c == null || c.duration;
|
|
44
33
|
}
|
|
45
|
-
},
|
|
46
|
-
var
|
|
47
|
-
const
|
|
48
|
-
event:
|
|
49
|
-
location:
|
|
50
|
-
type:
|
|
34
|
+
}, u = () => {
|
|
35
|
+
var c;
|
|
36
|
+
const e = {
|
|
37
|
+
event: N.ctaClicked,
|
|
38
|
+
location: f || "not_set",
|
|
39
|
+
type: p.interaction,
|
|
51
40
|
component: "IndividualProductCard",
|
|
52
41
|
element: "primary_button",
|
|
53
42
|
payload: {
|
|
54
|
-
productId:
|
|
43
|
+
productId: w,
|
|
55
44
|
ctaLabel: s.label,
|
|
56
|
-
productName:
|
|
57
|
-
selectedPlanId:
|
|
45
|
+
productName: m,
|
|
46
|
+
selectedPlanId: y || "none"
|
|
58
47
|
}
|
|
59
48
|
};
|
|
60
|
-
(
|
|
61
|
-
},
|
|
62
|
-
var
|
|
63
|
-
(
|
|
64
|
-
event:
|
|
65
|
-
location:
|
|
66
|
-
type:
|
|
49
|
+
(c = window.eventBus) == null || c.emit("analytics", e);
|
|
50
|
+
}, C = () => {
|
|
51
|
+
var e;
|
|
52
|
+
(e = window.eventBus) == null || e.emit("analytics", {
|
|
53
|
+
event: N.ctaClicked,
|
|
54
|
+
location: f || "not_set",
|
|
55
|
+
type: p.interaction,
|
|
67
56
|
component: "IndividualProductCard",
|
|
68
57
|
element: "secondary_button",
|
|
69
58
|
payload: {
|
|
70
|
-
ctaLabel:
|
|
71
|
-
productName:
|
|
59
|
+
ctaLabel: l == null ? void 0 : l.label,
|
|
60
|
+
productName: m
|
|
72
61
|
}
|
|
73
|
-
})
|
|
62
|
+
});
|
|
74
63
|
};
|
|
75
|
-
return /* @__PURE__ */
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
!!
|
|
80
|
-
|
|
64
|
+
return /* @__PURE__ */ i("section", { className: a.root, children: /* @__PURE__ */ r("div", { className: _(a.container, !h && a.noPlans), children: [
|
|
65
|
+
/* @__PURE__ */ r("div", { className: a.info, children: [
|
|
66
|
+
/* @__PURE__ */ r("div", { className: a.infoHeader, children: [
|
|
67
|
+
/* @__PURE__ */ i(t, { as: "h3", defaultVariant: "displayXs", mobileVariant: "headingLg", weight: "regular", children: m }),
|
|
68
|
+
!!v && /* @__PURE__ */ i(
|
|
69
|
+
t,
|
|
81
70
|
{
|
|
82
71
|
as: "p",
|
|
83
72
|
defaultVariant: "bodySm",
|
|
84
|
-
className:
|
|
73
|
+
className: a.infoDescription,
|
|
85
74
|
weight: "regular",
|
|
86
|
-
children:
|
|
75
|
+
children: v
|
|
87
76
|
}
|
|
88
77
|
),
|
|
89
|
-
|
|
90
|
-
!!
|
|
91
|
-
!!
|
|
92
|
-
|
|
78
|
+
n && /* @__PURE__ */ r("div", { className: a.ratingContainer, children: [
|
|
79
|
+
!!n.stars && /* @__PURE__ */ i(R, { rating: n.stars, size: "sm" }),
|
|
80
|
+
!!n.totalReviews && /* @__PURE__ */ r(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: [
|
|
81
|
+
n.totalReviews,
|
|
93
82
|
" reviews"
|
|
94
83
|
] })
|
|
95
84
|
] })
|
|
96
85
|
] }),
|
|
97
|
-
/* @__PURE__ */
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
-
/* @__PURE__ */
|
|
100
|
-
!
|
|
101
|
-
/* @__PURE__ */
|
|
102
|
-
|
|
86
|
+
/* @__PURE__ */ i(j, { features: k }),
|
|
87
|
+
/* @__PURE__ */ r("div", { className: a.actions, children: [
|
|
88
|
+
/* @__PURE__ */ i(F, { label: "HSA/FSA Eligible" }),
|
|
89
|
+
!h && /* @__PURE__ */ r(T, { children: [
|
|
90
|
+
/* @__PURE__ */ i(b, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
|
|
91
|
+
l && /* @__PURE__ */ i(g, { ...l, onClick: C, children: l.label })
|
|
103
92
|
] })
|
|
104
93
|
] })
|
|
105
94
|
] }),
|
|
106
|
-
/* @__PURE__ */
|
|
107
|
-
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
-
o.map((
|
|
111
|
-
|
|
95
|
+
/* @__PURE__ */ i(z, { className: a.gallery, images: S, label: E }),
|
|
96
|
+
h && /* @__PURE__ */ r("div", { className: a.plansSection, children: [
|
|
97
|
+
/* @__PURE__ */ r("div", { className: a.plans, children: [
|
|
98
|
+
/* @__PURE__ */ i(t, { as: "h4", defaultVariant: "labelSm", emphasis: !0, weight: "regular", children: "Subscribe & Save" }),
|
|
99
|
+
o.map((e) => /* @__PURE__ */ i(
|
|
100
|
+
D,
|
|
112
101
|
{
|
|
113
|
-
plan:
|
|
114
|
-
onSelect:
|
|
115
|
-
isActive:
|
|
102
|
+
plan: e,
|
|
103
|
+
onSelect: V,
|
|
104
|
+
isActive: y === e.id
|
|
116
105
|
},
|
|
117
|
-
|
|
106
|
+
e.id
|
|
118
107
|
))
|
|
119
108
|
] }),
|
|
120
|
-
/* @__PURE__ */
|
|
121
|
-
/* @__PURE__ */
|
|
122
|
-
|
|
109
|
+
/* @__PURE__ */ r("div", { className: a.actions, children: [
|
|
110
|
+
/* @__PURE__ */ i(b, { variant: "primary", size: "lg", ...s, onClick: u, children: s.label }),
|
|
111
|
+
l && /* @__PURE__ */ i(g, { ...l, onClick: C, children: l.label })
|
|
123
112
|
] })
|
|
124
113
|
] })
|
|
125
114
|
] }) });
|
|
126
115
|
};
|
|
127
116
|
export {
|
|
128
|
-
|
|
117
|
+
Y as IndividualProductCard
|
|
129
118
|
};
|