@zenpatient-org/healthspan-marketing-ui 0.1.103 → 0.1.105

package/dist/modules/HSModal/components/MailchimpModal/MailchimpModal.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../../components/Typography/Typography.cjs.js"),s=require("../../../../utils/cn/cn.cjs.js"),y=require("./components/Newsletter/Newsletter.cjs.js"),a=require("./mailchimpModal.module.css.cjs.js"),f=({title:r,description:c,buttonText:d,image:n,layout:i="plain-column",colorScheme:t="light",onCloseCallback:o,onClickCallback:u,cancelButtonText:p="no, thanks",tags:m})=>{const h=g=>{g.stopPropagation()};return e.jsxs("div",{className:s.cn(a.default.contentWrapper,a.default[t]),"data-image-position":i,onClick:h,children:[e.jsxs("div",{className:s.cn(a.default.content,a.default[t]),children:[e.jsxs("div",{className:a.default.text,children:[e.jsx(l.Typography,{defaultVariant:"headingLg",children:r}),e.jsx(l.Typography,{defaultVariant:"bodySm",children:c})]}),e.jsx(y.Newsletter,{buttonText:d,cancelButtonText:p,colorScheme:t,onCloseCallback:o,onClickCallback:u,tags:m})]}),n&&i!=="plain-column"&&e.jsx("div",{className:a.default.imageWrapper,children:e.jsx("div",{style:{backgroundImage:`url(${n})`},className:a.default.image})})]})};exports.MailchimpModal=f;

package/dist/modules/HSModal/components/MailchimpModal/MailchimpModal.d.ts

@@ -0,0 +1,3 @@
+import { TMailchimpModal } from '../../types';
+
+export declare const MailchimpModal: ({ title, description, buttonText, image, layout, colorScheme, onCloseCallback, onClickCallback, cancelButtonText, tags, }: Omit<TMailchimpModal, "id" | "type">) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/HSModal/components/MailchimpModal/MailchimpModal.es.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Typography as l } from "../../../../components/Typography/Typography.es.js";
+import { cn as o } from "../../../../utils/cn/cn.es.js";
+import { Newsletter as N } from "./components/Newsletter/Newsletter.es.js";
+import a from "./mailchimpModal.module.css.es.js";
+const b = ({
+  title: s,
+  description: m,
+  buttonText: c,
+  image: e,
+  layout: r = "plain-column",
+  colorScheme: n = "light",
+  onCloseCallback: d,
+  onClickCallback: p,
+  cancelButtonText: h = "no, thanks",
+  tags: g
+}) => {
+  const f = (u) => {
+    u.stopPropagation();
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: o(a.contentWrapper, a[n]),
+      "data-image-position": r,
+      onClick: f,
+      children: [
+        /* @__PURE__ */ t("div", { className: o(a.content, a[n]), children: [
+          /* @__PURE__ */ t("div", { className: a.text, children: [
+            /* @__PURE__ */ i(l, { defaultVariant: "headingLg", children: s }),
+            /* @__PURE__ */ i(l, { defaultVariant: "bodySm", children: m })
+          ] }),
+          /* @__PURE__ */ i(
+            N,
+            {
+              buttonText: c,
+              cancelButtonText: h,
+              colorScheme: n,
+              onCloseCallback: d,
+              onClickCallback: p,
+              tags: g
+            }
+          )
+        ] }),
+        e && r !== "plain-column" && /* @__PURE__ */ i("div", { className: a.imageWrapper, children: /* @__PURE__ */ i("div", { style: { backgroundImage: `url(${e})` }, className: a.image }) })
+      ]
+    }
+  );
+};
+export {
+  b as MailchimpModal
+};

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/Newsletter.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),_=require("../../../../../../components/TextInput/TextInput.cjs.js"),I=require("../../../../../../node_modules/react-mailchimp-subscribe/es/index.cjs.js"),B=require("../../../../../../utils/isValidEmail.cjs.js"),v=require("../../../../../../components/Button/Button.cjs.js"),x=require("./newsletter.module.css.cjs.js"),M=e=>`//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54ec243b3582164cf116&id=2483a4d606&f_id=0050e6e6f0&tags=${e}`,N=({status:e,message:o,subscribe:c,buttonText:l,colorScheme:d,onCloseCallback:r,cancelButtonText:m,onClickCallback:a})=>{const[i,f]=u.useState(""),[p,s]=u.useState(!1),[y,n]=u.useState(""),[j,g]=u.useState(!1),q=h=>{f(h.target.value),p&&(s(!1),n("")),g(h.target.value.length>0)},E=()=>{if(!i){s(!0),n("Please enter your email address");return}if(!B.isValidEmail(i)){s(!0),n("Please enter a valid email address");return}s(!1),n(""),c({EMAIL:i}),a==null||a()};u.useEffect(()=>{e==="success"&&(f(""),s(!1),n(""),g(!1),r==null||r()),e==="error"&&typeof o=="string"&&(s(!0),n("Subscription failed. Please try again."))},[e,o]);const S=d==="light"?"primary":"primary-invert",T=d==="light"?"primary":"primary-invert";return t.jsxs("div",{className:x.default.interface,children:[t.jsx(_.TextInput,{placeholder:"Email",variant:S,value:i,handleChange:q,error:p,errorText:y,active:j}),t.jsxs("div",{className:x.default.buttonContainer,children:[t.jsx(v.Button,{size:"md",variant:T,onClick:E,children:e==="sending"?"submitting…":l}),t.jsx(v.Button,{size:"md",variant:"ghost",onClick:r,children:m})]})]})},P=({buttonText:e,colorScheme:o,onCloseCallback:c,cancelButtonText:l,tags:d,onClickCallback:r})=>t.jsx(I.default,{url:M(d),render:({subscribe:m,status:a,message:i})=>t.jsx(N,{status:a,message:i,subscribe:m,buttonText:e,colorScheme:o,onCloseCallback:c,onClickCallback:r,cancelButtonText:l})});exports.Newsletter=P;

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/Newsletter.d.ts

@@ -0,0 +1,8 @@
+export declare const Newsletter: ({ buttonText, colorScheme, onCloseCallback, cancelButtonText, tags, onClickCallback, }: {
+    buttonText: string;
+    colorScheme: "light" | "dark";
+    onCloseCallback?: () => void;
+    cancelButtonText: string;
+    tags: string;
+    onClickCallback?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/Newsletter.es.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { useState as u, useEffect as T } from "react";
+import { TextInput as V } from "../../../../../../components/TextInput/TextInput.es.js";
+import j from "../../../../../../node_modules/react-mailchimp-subscribe/es/index.es.js";
+import { isValidEmail as z } from "../../../../../../utils/isValidEmail.es.js";
+import { Button as y } from "../../../../../../components/Button/Button.es.js";
+import E from "./newsletter.module.css.es.js";
+const A = (e) => `//gethealthspan.us21.list-manage.com/subscribe/post?u=664ad54ec243b3582164cf116&id=2483a4d606&f_id=0050e6e6f0&tags=${e}`, b = ({
+  status: e,
+  message: m,
+  subscribe: f,
+  buttonText: d,
+  colorScheme: o,
+  onCloseCallback: r,
+  cancelButtonText: p,
+  onClickCallback: a
+}) => {
+  const [t, c] = u(""), [l, i] = u(!1), [x, s] = u(""), [M, h] = u(!1), I = (g) => {
+    c(g.target.value), l && (i(!1), s("")), h(g.target.value.length > 0);
+  }, N = () => {
+    if (!t) {
+      i(!0), s("Please enter your email address");
+      return;
+    }
+    if (!z(t)) {
+      i(!0), s("Please enter a valid email address");
+      return;
+    }
+    i(!1), s(""), f({
+      EMAIL: t
+    }), a == null || a();
+  };
+  T(() => {
+    e === "success" && (c(""), i(!1), s(""), h(!1), r == null || r()), e === "error" && typeof m == "string" && (i(!0), s("Subscription failed. Please try again."));
+  }, [e, m]);
+  const P = o === "light" ? "primary" : "primary-invert", S = o === "light" ? "primary" : "primary-invert";
+  return /* @__PURE__ */ v("div", { className: E.interface, children: [
+    /* @__PURE__ */ n(
+      V,
+      {
+        placeholder: "Email",
+        variant: P,
+        value: t,
+        handleChange: I,
+        error: l,
+        errorText: x,
+        active: M
+      }
+    ),
+    /* @__PURE__ */ v("div", { className: E.buttonContainer, children: [
+      /* @__PURE__ */ n(y, { size: "md", variant: S, onClick: N, children: e === "sending" ? "submitting…" : d }),
+      /* @__PURE__ */ n(y, { size: "md", variant: "ghost", onClick: r, children: p })
+    ] })
+  ] });
+}, q = ({
+  buttonText: e,
+  colorScheme: m,
+  onCloseCallback: f,
+  cancelButtonText: d,
+  tags: o,
+  onClickCallback: r
+}) => /* @__PURE__ */ n(
+  j,
+  {
+    url: A(o),
+    render: ({
+      subscribe: p,
+      status: a,
+      message: t
+    }) => /* @__PURE__ */ n(
+      b,
+      {
+        status: a,
+        message: t,
+        subscribe: p,
+        buttonText: e,
+        colorScheme: m,
+        onCloseCallback: f,
+        onClickCallback: r,
+        cancelButtonText: d
+      }
+    )
+  }
+);
+export {
+  q as Newsletter
+};

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/index.d.ts

@@ -0,0 +1 @@
+export { Newsletter } from './Newsletter';

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/newsletter.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="newsletter-module__buttonContainer___Jn0WJ",t={interface:"newsletter-module__interface___dgwMa",buttonContainer:e};exports.buttonContainer=e;exports.default=t;

package/dist/modules/HSModal/components/MailchimpModal/components/Newsletter/newsletter.module.css.es.js

@@ -0,0 +1,8 @@
+const t = "newsletter-module__buttonContainer___Jn0WJ", e = {
+  interface: "newsletter-module__interface___dgwMa",
+  buttonContainer: t
+};
+export {
+  t as buttonContainer,
+  e as default
+};

package/dist/modules/HSModal/components/MailchimpModal/components/index.d.ts

@@ -0,0 +1 @@
+export { Newsletter } from './Newsletter';

package/dist/modules/HSModal/components/MailchimpModal/index.d.ts

@@ -0,0 +1 @@
+export { MailchimpModal } from './MailchimpModal';

package/dist/modules/HSModal/components/MailchimpModal/mailchimpModal.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="mailchimpModal-module__overlay___peQPr",t="mailchimpModal-module__contentWrapper___HpcOd",a="mailchimpModal-module__light___-lF5m",o="mailchimpModal-module__dark___7FKcx",_="mailchimpModal-module__content___xscO6",l="mailchimpModal-module__imageWrapper___lBCUP",m="mailchimpModal-module__text___t5kPi",i="mailchimpModal-module__image___2R979",c={overlay:e,contentWrapper:t,light:a,dark:o,content:_,imageWrapper:l,text:m,image:i};exports.content=_;exports.contentWrapper=t;exports.dark=o;exports.default=c;exports.image=i;exports.imageWrapper=l;exports.light=a;exports.overlay=e;exports.text=m;

package/dist/modules/HSModal/components/MailchimpModal/mailchimpModal.module.css.es.js

@@ -0,0 +1,21 @@
+const _ = "mailchimpModal-module__overlay___peQPr", a = "mailchimpModal-module__contentWrapper___HpcOd", e = "mailchimpModal-module__light___-lF5m", o = "mailchimpModal-module__dark___7FKcx", l = "mailchimpModal-module__content___xscO6", t = "mailchimpModal-module__imageWrapper___lBCUP", m = "mailchimpModal-module__text___t5kPi", c = "mailchimpModal-module__image___2R979", i = {
+  overlay: _,
+  contentWrapper: a,
+  light: e,
+  dark: o,
+  content: l,
+  imageWrapper: t,
+  text: m,
+  image: c
+};
+export {
+  l as content,
+  a as contentWrapper,
+  o as dark,
+  i as default,
+  c as image,
+  t as imageWrapper,
+  e as light,
+  _ as overlay,
+  m as text
+};

package/dist/modules/HSModal/components/index.d.ts

@@ -0,0 +1 @@
+export { MailchimpModal } from './MailchimpModal';

package/dist/modules/HSModal/hsModal.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="hsModal-module__overlay___kdLCe",l={overlay:e};exports.default=l;exports.overlay=e;

package/dist/modules/HSModal/hsModal.module.css.es.js

@@ -0,0 +1,7 @@
+const e = "hsModal-module__overlay___kdLCe", o = {
+  overlay: e
+};
+export {
+  o as default,
+  e as overlay
+};

package/dist/modules/HSModal/index.d.ts

@@ -0,0 +1,3 @@
+export { HSModal } from './HSModal';
+export { useHSModal, shouldShowPopup, getDaysUntilNextShow } from './useHSModal';
+export type { TMailchimpModal, THSModal } from './types';

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

@@ -0,0 +1,23 @@
+type TimerTrigger = {
+    type: 'timer';
+    delay: number;
+};
+type THSModal = {
+    id: string;
+    title: string;
+    description: string;
+    buttonText: string;
+    trigger?: TimerTrigger;
+    layout?: 'plain-column' | 'header-image' | 'side-image';
+    cancelButtonText?: string;
+    colorScheme?: 'light' | 'dark';
+    image?: string;
+    onCloseCallback?: () => void;
+    onClickCallback?: () => void;
+    initiallyOpen?: boolean;
+};
+export type TMailchimpModal = THSModal & {
+    type: 'mailchimp';
+    tags: string;
+};
+export type { THSModal };

package/dist/modules/HSModal/useHSModal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),m=7,i=24*60*60*1e3,w=o=>{try{const n=localStorage.getItem(`popup_${o}_lastShown`);if(!n)return!0;const e=parseInt(n,10);return(new Date().getTime()-e)/i>=m}catch(n){return console.warn("Error checking popup cooldown:",n),!0}},E=({id:o,initiallyOpen:n=!1,trigger:e,onCloseCallback:r,onClickCallback:u})=>{const[c,S]=t.useState(n),a=t.useCallback(()=>{w(o)&&S(!0)},[o]),d=t.useCallback(()=>{S(!1),r==null||r()},[r]),y=t.useCallback(()=>{u==null||u()},[u]);t.useEffect(()=>{if((e==null?void 0:e.type)==="timer"&&!c){const s=setTimeout(()=>{a()},e.delay*1e3);return()=>clearTimeout(s)}},[e,c,a]),t.useEffect(()=>{if(!c)return;const s=new Date().getTime();localStorage.setItem(`popup_${o}_lastShown`,s.toString());const h=window.getComputedStyle(document.body).overflow;document.body.style.overflow="hidden";const p=l=>{l.key==="Escape"&&d()};return document.addEventListener("keydown",p),()=>{document.body.style.overflow=h,document.removeEventListener("keydown",p)}},[c,d,o]);const f=t.useCallback(s=>{s.target===s.currentTarget&&d()},[d]);return{isOpen:c,openModal:a,closeModal:d,handleClick:y,handleOverlayClick:f}};exports.shouldShowPopup=w;exports.useHSModal=E;

package/dist/modules/HSModal/useHSModal.d.ts

@@ -0,0 +1,20 @@
+export declare const shouldShowPopup: (id: string) => boolean;
+export declare const getDaysUntilNextShow: (id: string) => number;
+type UseHSModalProps = {
+    id: string;
+    initiallyOpen?: boolean;
+    trigger?: {
+        type: 'timer';
+        delay: number;
+    };
+    onCloseCallback?: () => void;
+    onClickCallback?: () => void;
+};
+export declare const useHSModal: ({ id, initiallyOpen, trigger, onCloseCallback, onClickCallback, }: UseHSModalProps) => {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+    handleClick: () => void;
+    handleOverlayClick: (e: React.MouseEvent) => void;
+};
+export {};

package/dist/modules/HSModal/useHSModal.es.js

@@ -0,0 +1,63 @@
+import { useState as i, useCallback as d, useEffect as a } from "react";
+const E = 7, _ = 24 * 60 * 60 * 1e3, v = (t) => {
+  try {
+    const o = localStorage.getItem(`popup_${t}_lastShown`);
+    if (!o)
+      return !0;
+    const e = parseInt(o, 10);
+    return ((/* @__PURE__ */ new Date()).getTime() - e) / _ >= E;
+  } catch (o) {
+    return console.warn("Error checking popup cooldown:", o), !0;
+  }
+}, T = ({
+  id: t,
+  initiallyOpen: o = !1,
+  trigger: e,
+  onCloseCallback: s,
+  onClickCallback: r
+}) => {
+  const [u, w] = i(o), p = d(() => {
+    v(t) && w(!0);
+  }, [t]), c = d(() => {
+    w(!1), s == null || s();
+  }, [s]), m = d(() => {
+    r == null || r();
+  }, [r]);
+  a(() => {
+    if ((e == null ? void 0 : e.type) === "timer" && !u) {
+      const n = setTimeout(() => {
+        p();
+      }, e.delay * 1e3);
+      return () => clearTimeout(n);
+    }
+  }, [e, u, p]), a(() => {
+    if (!u) return;
+    const n = (/* @__PURE__ */ new Date()).getTime();
+    localStorage.setItem(`popup_${t}_lastShown`, n.toString());
+    const f = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+    const S = (h) => {
+      h.key === "Escape" && c();
+    };
+    return document.addEventListener("keydown", S), () => {
+      document.body.style.overflow = f, document.removeEventListener("keydown", S);
+    };
+  }, [u, c, t]);
+  const y = d(
+    (n) => {
+      n.target === n.currentTarget && c();
+    },
+    [c]
+  );
+  return {
+    isOpen: u,
+    openModal: p,
+    closeModal: c,
+    handleClick: m,
+    handleOverlayClick: y
+  };
+};
+export {
+  v as shouldShowPopup,
+  T as useHSModal
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.103",
+    "version": "0.1.105",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -536,6 +536,11 @@
             "import": "./dist/modules/ContentHighlight/ContentHighlight.es.js",
             "require": "./dist/modules/ContentHighlight/ContentHighlight.cjs.js"
         },
+        "./HSModal": {
+            "types": "./dist/modules/HSModal/HSModal.d.ts",
+            "import": "./dist/modules/HSModal/HSModal.es.js",
+            "require": "./dist/modules/HSModal/HSModal.cjs.js"
+        },
         "./Bubbles": {
             "types": "./dist/pageComponents/Bubbles/Bubbles.d.ts",
             "import": "./dist/pageComponents/Bubbles/Bubbles.es.js",