@zenpatient-org/healthspan-marketing-ui 0.2.47 → 0.2.49

package/dist/modules/IndividualProductCardV2/IndividualProductCardV2.es.js

@@ -1,65 +1,67 @@
 import { jsx as i, jsxs as o } from "react/jsx-runtime";
-import { EAnalyticsEventType as S, EAnalyticsEvent as N } from "../../types/analytics/analytics.es.js";
-import { cn as C } from "../../utils/cn/cn.es.js";
+import { EAnalyticsEventType as A, EAnalyticsEvent as C } from "../../types/analytics/analytics.es.js";
+import { cn as E } from "../../utils/cn/cn.es.js";
 import e from "../../modules/IndividualProductCardV2/individualProductCardV2.module.css";
-import { ImageGallery as G } from "../../components/ImageGallery/ImageGallery.es.js";
-import { RatingPreview as A } from "../../components/RatingPreview/RatingPreview.es.js";
+import { AdvancedGallery as F } from "../../components/AdvancedGallery/AdvancedGallery.es.js";
+import { ImageGallery as L } from "../../components/ImageGallery/ImageGallery.es.js";
+import { RatingPreview as b } from "../../components/RatingPreview/RatingPreview.es.js";
 import { Typography as m } from "../../components/Typography/Typography.es.js";
-import { Features as F } from "../IndividualProductCard/components/Features/Features.es.js";
-import { PlainFeaturesGroup as L } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
-import { PriceDisplay as j } from "../../components/PriceDisplay/PriceDisplay.es.js";
-import { PlanCard as q } from "../IndividualProductCard/components/PlanCard/PlanCard.es.js";
-import { Button as z } from "../../components/Button/Button.es.js";
-import { Quote as B } from "../../components/Quote/Quote.es.js";
-const ii = (r) => {
+import { Features as j } from "../IndividualProductCard/components/Features/Features.es.js";
+import { PlainFeaturesGroup as q } from "../../components/PlainFeaturesGroup/PlainFeaturesGroup.es.js";
+import { PriceDisplay as z } from "../../components/PriceDisplay/PriceDisplay.es.js";
+import { PlanCard as B } from "../IndividualProductCard/components/PlanCard/PlanCard.es.js";
+import { Button as M } from "../../components/Button/Button.es.js";
+import { Quote as O } from "../../components/Quote/Quote.es.js";
+const ti = (r) => {
   const {
-    zenpatientId: p,
+    zenpatientId: h,
     signupUrl: c,
-    name: E,
-    description: b,
-    label: V,
+    name: G,
+    description: V,
+    label: v,
     images: k,
+    advancedGallery: p,
     features: w,
-    quote: h,
-    featuresGroup: u,
-    ratingPreview: v,
+    quote: u,
+    featuresGroup: y,
+    ratingPreview: f,
     view: l,
     button: a
-  } = r, t = l === "plans_list" ? r.plans : void 0, x = t && t.length > 0, f = l === "plans_list" ? r.selectedPlanId : void 0, d = t == null ? void 0 : t.find((n) => n.id === f), y = d ? `${(a == null ? void 0 : a.link) || c}?defaultDurationSelection=${d == null ? void 0 : d.durationAmount}` : (a == null ? void 0 : a.link) || c, g = l === "pricing_display" ? r.priceDisplay : void 0, D = {
-    event: N.ctaClicked,
-    type: S.interaction,
+  } = r, t = l === "plans_list" ? r.plans : void 0, x = t && t.length > 0, g = l === "plans_list" ? r.selectedPlanId : void 0, d = t == null ? void 0 : t.find((n) => n.id === g), P = d ? `${(a == null ? void 0 : a.link) || c}?defaultDurationSelection=${d == null ? void 0 : d.durationAmount}` : (a == null ? void 0 : a.link) || c, S = l === "pricing_display" ? r.priceDisplay : void 0, D = {
+    event: C.ctaClicked,
+    type: A.interaction,
     component: "Pricing",
     payload: {
       ctaLabel: (a == null ? void 0 : a.text) || "GET STARTED",
-      ctaLink: y || c,
-      productId: p
+      ctaLink: P || c,
+      productId: h
     }
   }, I = (n) => {
-    var P;
+    var N;
     if (l !== "plans_list" || !r.onSelectPlan) return;
     r.onSelectPlan(n);
     const s = t == null ? void 0 : t.find((_) => _.id === n), T = {
-      event: N.userSelectedPlan,
+      event: C.userSelectedPlan,
       location: "IPCv2",
-      type: S.interaction,
+      type: A.interaction,
       payload: {
-        productId: p,
+        productId: h,
         planId: n,
         planPrice: s == null ? void 0 : s.price,
         planDuration: s == null ? void 0 : s.duration
       }
     };
-    (P = window.eventBus) == null || P.emit("analytics", T);
+    (N = window.eventBus) == null || N.emit("analytics", T);
   };
   return /* @__PURE__ */ i("section", { className: e.root, children: /* @__PURE__ */ o("div", { className: e.mainContainer, children: [
     /* @__PURE__ */ o("div", { className: e.leftColumn, children: [
-      /* @__PURE__ */ i(G, { images: k, label: V }),
-      /* @__PURE__ */ i("div", { className: C(e.ratingContainer, e.mobileOnly), children: /* @__PURE__ */ i(A, { ...v }) }),
-      h && /* @__PURE__ */ i("div", { className: e.quoteWrapper, children: /* @__PURE__ */ i(B, { ...h }) })
+      p && p.items.length > 0 ? /* @__PURE__ */ i(F, { items: p.items, label: v }) : /* @__PURE__ */ i(L, { images: k, label: v }),
+      /* @__PURE__ */ i("div", { className: E(e.ratingContainer, e.mobileOnly), children: /* @__PURE__ */ i(b, { ...f }) }),
+      u && /* @__PURE__ */ i("div", { className: e.quoteWrapper, children: /* @__PURE__ */ i(O, { ...u }) })
     ] }),
     /* @__PURE__ */ o("div", { className: e.rightColumn, children: [
       /* @__PURE__ */ o("div", { className: e.header, children: [
-        /* @__PURE__ */ i(m, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: E }),
+        /* @__PURE__ */ i(m, { as: "h1", defaultVariant: "displayXs", mobileVariant: "headingLg", children: G }),
         /* @__PURE__ */ i(
           m,
           {
@@ -67,34 +69,34 @@ const ii = (r) => {
             defaultVariant: "bodyMd",
             mobileVariant: "bodySm",
             className: e.description,
-            children: b
+            children: V
           }
         )
       ] }),
-      /* @__PURE__ */ i(F, { features: w }),
-      u && /* @__PURE__ */ i(L, { ...u }),
-      l === "pricing_display" && g && /* @__PURE__ */ i(j, { items: g }),
+      /* @__PURE__ */ i(j, { features: w }),
+      y && /* @__PURE__ */ i(q, { ...y }),
+      l === "pricing_display" && S && /* @__PURE__ */ i(z, { items: S }),
       l === "plans_list" && x && /* @__PURE__ */ i("div", { className: e.plansSection, children: /* @__PURE__ */ o("div", { className: e.plans, children: [
         /* @__PURE__ */ i(m, { as: "h4", defaultVariant: "labelSm", emphasis: !0, weight: "regular", children: "Subscribe & Save" }),
         t.map((n) => /* @__PURE__ */ i(
-          q,
+          B,
           {
             plan: n,
             onSelect: I,
-            isActive: f === n.id
+            isActive: g === n.id
           },
           n.id
         ))
       ] }) }),
-      /* @__PURE__ */ i("div", { className: C(e.ratingContainer, e.desktopOnly), children: /* @__PURE__ */ i(A, { ...v }) }),
+      /* @__PURE__ */ i("div", { className: E(e.ratingContainer, e.desktopOnly), children: /* @__PURE__ */ i(b, { ...f }) }),
       /* @__PURE__ */ o("div", { className: e.actions, children: [
         /* @__PURE__ */ i(
-          z,
+          M,
           {
             as: "a",
             variant: "primary",
             size: "lg",
-            href: y || c,
+            href: P || c,
             analyticsProps: D,
             children: (a == null ? void 0 : a.text) || "Get started"
           }
@@ -105,5 +107,5 @@ const ii = (r) => {
   ] }) });
 };
 export {
-  ii as IndividualProductCardV2
+  ti as IndividualProductCardV2
 };

package/dist/modules/IndividualProductCardV2/types.d.ts

@@ -1,5 +1,6 @@
 import { ETypeBadge } from '../../components/TypeBadge';
 import { EIconName } from '../../components/Icon/constants';
+import { TAdvancedGalleryView } from '../../components/AdvancedGallery';
 
 export type TTypeBadge = 'senescence' | 'supplements' | 'outline' | 'energy' | 'metabolism' | 'labs';
 export type TProductFeature = {
@@ -43,6 +44,7 @@ export type TIndividualProductCardV2Base = {
     signupUrl: string;
     name: string;
     images: Array<string>;
+    advancedGallery?: TAdvancedGalleryView;
     features: Array<TProductFeature>;
     description?: string;
     label?: string;

package/dist/utils/useSwiper/useSwiper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),h=()=>{const[n,s]=e.useState(null),[u,r]=e.useState(0),[a,l]=e.useState(!0),[f,c]=e.useState(!1),[d,o]=e.useState(!1),i=e.useCallback(t=>{r(t.activeIndex),c(t.isEnd),l(t.isBeginning)},[]),b=e.useCallback(()=>{n&&(n.slidePrev(),i(n))},[n,i]),v=e.useCallback(()=>{n&&(n.slideNext(),i(n))},[n,i]),S=e.useCallback(t=>{n&&(n.slideTo(t),i(n))},[n,i]),g=t=>{s(t),o(t==null?void 0:t.isLocked),i(t)},k=e.useCallback(t=>{c(t.isEnd),o(t==null?void 0:t.isLocked),i(t)},[i]),C=e.useCallback(()=>{c(!0),l(!1)},[]),E=e.useCallback(()=>{l(!0),c(!1)},[]);return{swiper:n,setSwiper:s,activeIndex:u,setActiveIndex:r,isEnd:f,setIsEnd:c,hideNav:d,handleSlideChange:i,handlePrevClick:b,handleNextClick:v,handleSlideTo:S,onSwiperInit:g,handleSwiperResize:k,isBeginning:a,setIsBeginning:l,handleReachEnd:C,handleReachBeginning:E}},y=(n=3e3)=>{const s=h(),[u,r]=e.useState(!0),a=e.useRef(null),l=e.useCallback(()=>{r(!1),a.current&&(clearInterval(a.current),a.current=null)},[]),f=e.useCallback(()=>{r(!0)},[]),c=e.useCallback(()=>{l()},[l]);return e.useEffect(()=>{if(!(!u||!s.swiper||s.swiper.slides.length<=1))return a.current=setInterval(()=>{s.swiper&&(s.isEnd?s.swiper.slideTo(0):s.swiper.slideNext())},n),()=>{a.current&&(clearInterval(a.current),a.current=null)}},[u,s.swiper,s.isEnd,n]),e.useEffect(()=>{const d=()=>l(),o=()=>{document.hidden&&l()};return window.addEventListener("beforeunload",d),document.addEventListener("visibilitychange",o),()=>{window.removeEventListener("beforeunload",d),document.removeEventListener("visibilitychange",o)}},[l]),{...s,isAutoPlay:u,stopAutoPlay:l,startAutoPlay:f,handleUserInteraction:c}};exports.useSwiper=h;exports.useSwiperWithAutoPlay=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),S=()=>{const[n,s]=t.useState(null),[u,o]=t.useState(0),[c,l]=t.useState(!0),[f,i]=t.useState(!1),[r,d]=t.useState(!1),[b,h]=t.useState(!1),a=t.useCallback(e=>{o(e.activeIndex),i(e.isEnd),l(e.isBeginning)},[]),k=t.useCallback(()=>{n&&(n.slidePrev(),a(n))},[n,a]),v=t.useCallback(()=>{n&&(n.slideNext(),a(n))},[n,a]),g=t.useCallback(e=>{n&&(n.slideTo(e),a(n))},[n,a]),C=e=>{s(e),d(e==null?void 0:e.isLocked),h(e==null?void 0:e.isLocked),a(e)},E=t.useCallback(e=>{i(e.isEnd),d(e==null?void 0:e.isLocked),h(e==null?void 0:e.isLocked),a(e)},[a]),y=t.useCallback(()=>{i(!0),l(!1)},[]),L=t.useCallback(()=>{l(!0),i(!1)},[]);return{swiper:n,setSwiper:s,activeIndex:u,setActiveIndex:o,isEnd:f,setIsEnd:i,hideNav:r,handleSlideChange:a,handlePrevClick:k,handleNextClick:v,handleSlideTo:g,onSwiperInit:C,handleSwiperResize:E,isBeginning:c,isLocked:b,setIsBeginning:l,handleReachEnd:y,handleReachBeginning:L}},I=(n=3e3)=>{const s=S(),[u,o]=t.useState(!0),c=t.useRef(null),l=t.useCallback(()=>{o(!1),c.current&&(clearInterval(c.current),c.current=null)},[]),f=t.useCallback(()=>{o(!0)},[]),i=t.useCallback(()=>{l()},[l]);return t.useEffect(()=>{if(!(!u||!s.swiper||s.swiper.slides.length<=1))return c.current=setInterval(()=>{s.swiper&&(s.isEnd?s.swiper.slideTo(0):s.swiper.slideNext())},n),()=>{c.current&&(clearInterval(c.current),c.current=null)}},[u,s.swiper,s.isEnd,n]),t.useEffect(()=>{const r=()=>l(),d=()=>{document.hidden&&l()};return window.addEventListener("beforeunload",r),document.addEventListener("visibilitychange",d),()=>{window.removeEventListener("beforeunload",r),document.removeEventListener("visibilitychange",d)}},[l]),{...s,isAutoPlay:u,stopAutoPlay:l,startAutoPlay:f,handleUserInteraction:i}};exports.useSwiper=S;exports.useSwiperWithAutoPlay=I;

package/dist/utils/useSwiper/useSwiper.es.js

@@ -1,78 +1,79 @@
-import { useState as c, useCallback as r, useRef as y, useEffect as v } from "react";
+import { useState as d, useCallback as o, useRef as y, useEffect as g } from "react";
 const A = () => {
-  const [n, t] = c(null), [d, a] = c(0), [l, i] = c(!0), [h, o] = c(!1), [f, u] = c(!1), s = r((e) => {
-    a(e.activeIndex), o(e.isEnd), i(e.isBeginning);
-  }, []), g = r(() => {
-    n && (n.slidePrev(), s(n));
-  }, [n, s]), E = r(() => {
-    n && (n.slideNext(), s(n));
-  }, [n, s]), S = r(
+  const [n, t] = d(null), [r, a] = d(0), [c, s] = d(!0), [h, l] = d(!1), [f, u] = d(!1), [E, v] = d(!1), i = o((e) => {
+    a(e.activeIndex), l(e.isEnd), s(e.isBeginning);
+  }, []), L = o(() => {
+    n && (n.slidePrev(), i(n));
+  }, [n, i]), k = o(() => {
+    n && (n.slideNext(), i(n));
+  }, [n, i]), I = o(
     (e) => {
-      n && (n.slideTo(e), s(n));
+      n && (n.slideTo(e), i(n));
     },
-    [n, s]
-  ), m = (e) => {
-    t(e), u(e == null ? void 0 : e.isLocked), s(e);
-  }, I = r(
+    [n, i]
+  ), S = (e) => {
+    t(e), u(e == null ? void 0 : e.isLocked), v(e == null ? void 0 : e.isLocked), i(e);
+  }, m = o(
     (e) => {
-      o(e.isEnd), u(e == null ? void 0 : e.isLocked), s(e);
+      l(e.isEnd), u(e == null ? void 0 : e.isLocked), v(e == null ? void 0 : e.isLocked), i(e);
     },
-    [s]
-  ), b = r(() => {
-    o(!0), i(!1);
-  }, []), x = r(() => {
-    i(!0), o(!1);
+    [i]
+  ), b = o(() => {
+    l(!0), s(!1);
+  }, []), x = o(() => {
+    s(!0), l(!1);
   }, []);
   return {
     swiper: n,
     setSwiper: t,
-    activeIndex: d,
+    activeIndex: r,
     setActiveIndex: a,
     isEnd: h,
-    setIsEnd: o,
+    setIsEnd: l,
     hideNav: f,
-    handleSlideChange: s,
-    handlePrevClick: g,
-    handleNextClick: E,
-    handleSlideTo: S,
-    onSwiperInit: m,
-    handleSwiperResize: I,
-    isBeginning: l,
-    setIsBeginning: i,
+    handleSlideChange: i,
+    handlePrevClick: L,
+    handleNextClick: k,
+    handleSlideTo: I,
+    onSwiperInit: S,
+    handleSwiperResize: m,
+    isBeginning: c,
+    isLocked: E,
+    setIsBeginning: s,
     handleReachEnd: b,
     handleReachBeginning: x
   };
-}, P = (n = 3e3) => {
-  const t = A(), [d, a] = c(!0), l = y(null), i = r(() => {
-    a(!1), l.current && (clearInterval(l.current), l.current = null);
-  }, []), h = r(() => {
+}, B = (n = 3e3) => {
+  const t = A(), [r, a] = d(!0), c = y(null), s = o(() => {
+    a(!1), c.current && (clearInterval(c.current), c.current = null);
+  }, []), h = o(() => {
     a(!0);
-  }, []), o = r(() => {
-    i();
-  }, [i]);
-  return v(() => {
-    if (!(!d || !t.swiper || t.swiper.slides.length <= 1))
-      return l.current = setInterval(() => {
+  }, []), l = o(() => {
+    s();
+  }, [s]);
+  return g(() => {
+    if (!(!r || !t.swiper || t.swiper.slides.length <= 1))
+      return c.current = setInterval(() => {
         t.swiper && (t.isEnd ? t.swiper.slideTo(0) : t.swiper.slideNext());
       }, n), () => {
-        l.current && (clearInterval(l.current), l.current = null);
+        c.current && (clearInterval(c.current), c.current = null);
       };
-  }, [d, t.swiper, t.isEnd, n]), v(() => {
-    const f = () => i(), u = () => {
-      document.hidden && i();
+  }, [r, t.swiper, t.isEnd, n]), g(() => {
+    const f = () => s(), u = () => {
+      document.hidden && s();
     };
     return window.addEventListener("beforeunload", f), document.addEventListener("visibilitychange", u), () => {
       window.removeEventListener("beforeunload", f), document.removeEventListener("visibilitychange", u);
     };
-  }, [i]), {
+  }, [s]), {
     ...t,
-    isAutoPlay: d,
-    stopAutoPlay: i,
+    isAutoPlay: r,
+    stopAutoPlay: s,
     startAutoPlay: h,
-    handleUserInteraction: o
+    handleUserInteraction: l
   };
 };
 export {
   A as useSwiper,
-  P as useSwiperWithAutoPlay
+  B as useSwiperWithAutoPlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.47",
+    "version": "0.2.49",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -161,10 +161,10 @@
             "import": "./dist/components/Tabs/Tabs.es.js",
             "require": "./dist/components/Tabs/Tabs.cjs.js"
         },
-        "./Quotes": {
-            "types": "./dist/components/Quotes/index.d.ts",
-            "import": "./dist/components/Quotes/Quotes.es.js",
-            "require": "./dist/components/Quotes/Quotes.cjs.js"
+        "./Quote": {
+            "types": "./dist/components/Quote/index.d.ts",
+            "import": "./dist/components/Quote/Quote.es.js",
+            "require": "./dist/components/Quote/Quote.cjs.js"
         },
         "./StudyGridCard": {
             "types": "./dist/components/StudyGridCard/StudyGridCard.d.ts",
@@ -261,6 +261,11 @@
             "import": "./dist/components/Accordion/Accordion.es.js",
             "require": "./dist/components/Accordion/Accordion.cjs.js"
         },
+        "./AdvancedGallery": {
+            "types": "./dist/components/AdvancedGallery/AdvancedGallery.d.ts",
+            "import": "./dist/components/AdvancedGallery/AdvancedGallery.es.js",
+            "require": "./dist/components/AdvancedGallery/AdvancedGallery.cjs.js"
+        },
         "./FAQComponent": {
             "types": "./dist/components/FAQComponent/FAQComponent.d.ts",
             "import": "./dist/components/FAQComponent/FAQComponent.es.js",