@onside/install-widget 1.0.3 → 1.1.0

package/dist-lib/cdn-BmfyFccQ.js

@@ -0,0 +1,99 @@
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import { c as u } from "./install-package-CZGZODly.js";
+import { useRef as g, useEffect as m } from "react";
+const v = "data:image/svg+xml,%3csvg%20width='10'%20height='16'%20viewBox='0%200%2010%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.9375%2012.25L6.35539%209.83211C6.74592%209.44158%206.74592%208.80842%206.35539%208.41789L3.9375%206'%20stroke='%231E1C1F'%20stroke-opacity='0.6'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", j = ({ breadcrumbs: e, className: i }) => /* @__PURE__ */ s("ul", { className: i, children: e.map((n, o) => /* @__PURE__ */ p("li", { className: "inline-flex", children: [
+  /* @__PURE__ */ s("p", { className: "rounded-3xl bg-lightGray px-2 py-0.5 text-sm", children: n }),
+  o < e.length - 1 && /* @__PURE__ */ s(
+    "img",
+    {
+      alt: "Arrow icon",
+      "aria-hidden": "true",
+      className: "ml-1",
+      height: 16,
+      src: v,
+      width: 10
+    }
+  )
+] }, n)) }), x = (e) => {
+  const { ariaLabel: i, children: n, className: o, poster: r } = e, t = g(null);
+  return m(() => {
+    const a = () => {
+      t.current && t.current.paused && (t.current.muted = !0, t.current.play());
+    }, d = () => {
+      t.current && (document.visibilityState === "hidden" ? t.current.pause() : document.visibilityState === "visible" && a());
+    }, c = () => {
+      t.current && t.current.pause();
+    };
+    return document.addEventListener("visibilitychange", d), window.addEventListener("focus", a), window.addEventListener("blur", c), () => {
+      document.removeEventListener("visibilitychange", d), window.removeEventListener("focus", a), window.removeEventListener("blur", c);
+    };
+  }, []), /* @__PURE__ */ s(
+    "video",
+    {
+      "aria-label": i,
+      autoPlay: !0,
+      className: u(
+        "mt-2 transform-gpu rounded-2xl object-contain object-top",
+        o
+      ),
+      controls: !1,
+      disablePictureInPicture: !0,
+      disableRemotePlayback: !0,
+      draggable: !1,
+      loop: !0,
+      muted: !0,
+      playsInline: !0,
+      poster: r,
+      ref: t,
+      "webkit-playsinline": "true",
+      "x-webkit-airplay": "deny",
+      children: n
+    },
+    i
+  );
+}, l = {
+  "images/.gitkeep": "images/.gitkeep.e3b0c442",
+  "images/install-sad-android.png": "images/install-sad-android.8b24a6e1.png",
+  "scripts/1.0.0/install-package.cjs": "scripts/1.0.0/install-package.7ac30417.cjs",
+  "scripts/1.0.0/install-package.js": "scripts/1.0.0/install-package.65685adc.js",
+  "video/.gitkeep": "video/.gitkeep.e3b0c442",
+  "video/change-region-poster.png": "video/change-region-poster.bc6bda65.png",
+  "video/change-region.h264.mp4": "video/change-region.h264.c47b9282.mp4",
+  "video/get-approved-poster.jpg": "video/get-approved-poster.4e7177ac.jpg",
+  "video/get-approved.mp4": "video/get-approved.5b7b5f4a.mp4",
+  "video/open-onside-poster.jpg": "video/open-onside-poster.6b71cae6.jpg",
+  "video/open-onside.av1.mp4": "video/open-onside.av1.32f1aa51.mp4",
+  "video/open-onside.h264.mp4": "video/open-onside.h264.6df2feb6.mp4",
+  "video/update-ios-poster.png": "video/update-ios-poster.e59e58f8.png",
+  "video/update-ios.h264.mp4": "video/update-ios.h264.8054177e.mp4"
+}, f = "https://cdn.onside.io/assets/onside-install-widget/";
+function h(e) {
+  return e.replace(/^\//, "");
+}
+function b(e) {
+  const i = h(e), n = i.split("/").pop() ?? i, o = [
+    i,
+    `/${i}`,
+    n,
+    `/${n}`
+  ];
+  for (const r of o)
+    if (l[r])
+      return l[r];
+  return null;
+}
+function E(e) {
+  if (!e || /^https?:\/\//i.test(e) || e.endsWith(".svg")) return e;
+  const i = b(e);
+  if (!i) return e;
+  try {
+    return new URL(i, f).toString();
+  } catch {
+    return e;
+  }
+}
+export {
+  j as B,
+  x as V,
+  E as c
+};

package/dist-lib/cdn-BonUyxCA.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),u=require("./install-package-Dkv3eM_d.cjs"),l=require("react"),g="data:image/svg+xml,%3csvg%20width='10'%20height='16'%20viewBox='0%200%2010%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.9375%2012.25L6.35539%209.83211C6.74592%209.44158%206.74592%208.80842%206.35539%208.41789L3.9375%206'%20stroke='%231E1C1F'%20stroke-opacity='0.6'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e",v=({breadcrumbs:e,className:i})=>r.jsx("ul",{className:i,children:e.map((n,s)=>r.jsxs("li",{className:"inline-flex",children:[r.jsx("p",{className:"rounded-3xl bg-lightGray px-2 py-0.5 text-sm",children:n}),s<e.length-1&&r.jsx("img",{alt:"Arrow icon","aria-hidden":"true",className:"ml-1",height:16,src:g,width:10})]},n))}),m=e=>{const{ariaLabel:i,children:n,className:s,poster:o}=e,t=l.useRef(null);return l.useEffect(()=>{const a=()=>{t.current&&t.current.paused&&(t.current.muted=!0,t.current.play())},d=()=>{t.current&&(document.visibilityState==="hidden"?t.current.pause():document.visibilityState==="visible"&&a())},c=()=>{t.current&&t.current.pause()};return document.addEventListener("visibilitychange",d),window.addEventListener("focus",a),window.addEventListener("blur",c),()=>{document.removeEventListener("visibilitychange",d),window.removeEventListener("focus",a),window.removeEventListener("blur",c)}},[]),r.jsx("video",{"aria-label":i,autoPlay:!0,className:u.clsx("mt-2 transform-gpu rounded-2xl object-contain object-top",s),controls:!1,disablePictureInPicture:!0,disableRemotePlayback:!0,draggable:!1,loop:!0,muted:!0,playsInline:!0,poster:o,ref:t,"webkit-playsinline":"true","x-webkit-airplay":"deny",children:n},i)},p={"images/.gitkeep":"images/.gitkeep.e3b0c442","images/install-sad-android.png":"images/install-sad-android.8b24a6e1.png","scripts/1.0.0/install-package.cjs":"scripts/1.0.0/install-package.7ac30417.cjs","scripts/1.0.0/install-package.js":"scripts/1.0.0/install-package.65685adc.js","video/.gitkeep":"video/.gitkeep.e3b0c442","video/change-region-poster.png":"video/change-region-poster.bc6bda65.png","video/change-region.h264.mp4":"video/change-region.h264.c47b9282.mp4","video/get-approved-poster.jpg":"video/get-approved-poster.4e7177ac.jpg","video/get-approved.mp4":"video/get-approved.5b7b5f4a.mp4","video/open-onside-poster.jpg":"video/open-onside-poster.6b71cae6.jpg","video/open-onside.av1.mp4":"video/open-onside.av1.32f1aa51.mp4","video/open-onside.h264.mp4":"video/open-onside.h264.6df2feb6.mp4","video/update-ios-poster.png":"video/update-ios-poster.e59e58f8.png","video/update-ios.h264.mp4":"video/update-ios.h264.8054177e.mp4"},f="https://cdn.onside.io/assets/onside-install-widget/";function h(e){return e.replace(/^\//,"")}function b(e){const i=h(e),n=i.split("/").pop()??i,s=[i,`/${i}`,n,`/${n}`];for(const o of s)if(p[o])return p[o];return null}function w(e){if(!e||/^https?:\/\//i.test(e)||e.endsWith(".svg"))return e;const i=b(e);if(!i)return e;try{return new URL(i,f).toString()}catch{return e}}exports.Breadcrumbs=v;exports.VideoAutoplay=m;exports.cdn=w;

package/dist-lib/hooks.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./useInstallUrl-CjUspi0p.cjs");exports.useInstallUrl=l.useInstallUrl;exports.useInstallUrlStore=l.useInstallUrlStore;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./useInstallUrl-iPCPqYWB.cjs");exports.useInstallUrl=l.useInstallUrl;exports.useInstallUrlStore=l.useInstallUrlStore;

package/dist-lib/hooks.js

@@ -1,5 +1,6 @@
-import { u as a, a as r } from "./useInstallUrl-JIdkWpgj.js";
+"use client";
+import { u as e, a } from "./useInstallUrl-McaAuMPK.js";
 export {
-  a as useInstallUrl,
-  r as useInstallUrlStore
+  e as useInstallUrl,
+  a as useInstallUrlStore
 };

package/dist-lib/index-BzQo1EMv.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),C=require("./Dialog-BRBYK08a.cjs"),M=require("./FaqModal-BspE3dHf.cjs"),o=require("./install-package-Dkv3eM_d.cjs"),p=require("./utils.cjs"),r=require("./cdn-BonUyxCA.cjs"),q=()=>{const[t,s]=l.useState(!1),n=l.useCallback(()=>{s(!1)},[]),a=l.useCallback(()=>{s(!0)},[]);return{isOpenFaq:t,onCloseFaqModal:n,onOpenFaqModal:a,setIsOpenFaq:s}},g=({openFaq:t})=>{const{modal:s}=o.useMessages();return e.jsxs("div",{className:"flex flex-row items-center justify-center gap-2",children:[e.jsx("p",{className:"font-sans text-lg font-medium",children:s.faq.needHelp}),e.jsx(o.Button,{className:"px-0! font-sans text-lg font-normal",color:"blue",onClick:t,variant:"transparent",children:s.faq.faqLink})]})},_=({onSubmit:t,openFaq:s,step:n,openAppHref:a="#"})=>{const{modal:d}=o.useMessages();return n===1?e.jsxs(e.Fragment,{children:[e.jsx(o.InstallAppButton,{className:"w-full",handleCustomStep:t,location:"get_approved"}),e.jsx(g,{openFaq:s})]}):n===2?e.jsxs(e.Fragment,{children:[e.jsx(o.Button,{className:"w-full text-center",color:"blue",href:a,onClick:t,size:"lg",variant:"primary",children:d.getApproved.openAppButton}),e.jsx(g,{openFaq:s})]}):e.jsx(e.Fragment,{})},b=t=>{const{className:s,spinnerClasses:n,title:a="Loading..."}=t;return e.jsxs("div",{className:o.clsx("flex flex-col items-center justify-center gap-12",s),children:[e.jsx("h2",{className:"text-center !leading-10 text-lg font-medium",children:a}),e.jsx(o.SvgSpinner,{className:o.clsx("size-16 stroke-blue",n)})]})},S=r.cdn("/video/get-approved-poster.jpg"),k=r.cdn("/video/get-approved.mp4"),y=r.cdn("/video/open-onside-poster.jpg"),F=r.cdn("/video/open-onside.av1.mp4"),I=r.cdn("/video/open-onside.h264.mp4"),D=({step:t})=>{const{modal:s}=o.useMessages();return t===1?e.jsxs("div",{className:"mt-4 flex flex-col items-center",children:[e.jsx("h2",{className:"text-center font-sans text-lg font-normal",id:"get-approved",children:s.getApproved.title}),e.jsx("ol",{className:"mt-5 flex list-decimal flex-col gap-2 ps-6 font-sans text-base font-normal",children:s.getApproved.steps.map(n=>e.jsx("li",{children:n},n))}),e.jsx(r.VideoAutoplay,{ariaLabel:"Instruction demonstrating how to get approved for Onside",className:"w-[calc(100%-8px)] self-start",poster:S,children:e.jsx("source",{src:k,type:"video/mp4"})})]}):t===2?e.jsx(b,{className:"flex items-center justify-center",title:s.getApproved.installing}):t===3?e.jsxs("div",{className:"mt-4 flex flex-col items-center",children:[e.jsx("h2",{className:"text-center font-sans text-lg font-normal",id:"open-onside-app",children:s.getApproved.openApp}),e.jsx("div",{className:"mt-5 font-sans text-base font-normal",children:e.jsx("p",{children:s.getApproved.openAppDescription})}),e.jsxs(r.VideoAutoplay,{ariaLabel:"Instruction demonstrating how to open the Onside app",className:"mt-10! w-[calc(100%-8px)] self-start",poster:y,children:[e.jsx("source",{src:F,type:"video/mp4; codecs=av01.0.05M.08"}),e.jsx("source",{src:I,type:"video/mp4"})]})]}):null},P=t=>{const{open:s,onClose:n,onStep3Complete:a,openAppHref:d}=t,[i,u]=l.useState(1),{isOpenFaq:v,onCloseFaqModal:j,onOpenFaqModal:h}=q(),{installState:N}=p.resolveInstallConditions(p.getDeviceInfo()),m=N==="install_available",x=l.useMemo(()=>({2:{delay:o.AVERAGE_INSTALL_TIME,action:()=>u(3)},3:{delay:o.AVERAGE_CHECK_TIME,action:()=>a?.(),skip:!m||!a}}),[a,m]);l.useEffect(()=>{const c=x[i];if(!c||c?.skip)return;const O=setTimeout(c.action,c.delay);return()=>clearTimeout(O)},[i,x]);const f=l.useCallback(()=>{p.trackModalEvent("get_approved","click","close"),n(),setTimeout(()=>{u(1)},500)},[n]),E=l.useCallback(()=>{u(2),p.trackModalEvent("get_approved","click","install")},[]),A=l.useCallback(c=>{c||f()},[f]);return e.jsxs(e.Fragment,{children:[e.jsx(C.Dialog,{"aria-labelledby":"get-approved",className:"outline-hidden",footerContent:e.jsx(_,{openAppHref:d,onSubmit:E,openFaq:h,step:i}),isDisplayingMargins:!0,open:s,onOpenChange:A,children:e.jsx(D,{step:i})}),e.jsx(M.FaqModal,{isOpen:v,onClose:j})]})};exports.GetApprovedModal=P;

package/dist-lib/index-fWIxOyUM.js

@@ -0,0 +1,194 @@
+import { jsxs as a, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { useState as A, useCallback as r, useMemo as F, useEffect as b } from "react";
+import { D as q } from "./Dialog-B1D2BvMl.js";
+import { F as k } from "./FaqModal-J1y4DGzd.js";
+import { u as f, B as O, I as T, c as h, S as V, A as P, b as j } from "./install-package-CZGZODly.js";
+import { resolveInstallConditions as w, getDeviceInfo as L, trackModalEvent as x } from "./utils.js";
+import { V as N, c as i } from "./cdn-BmfyFccQ.js";
+const R = () => {
+  const [n, t] = A(!1), o = r(() => {
+    t(!1);
+  }, []), s = r(() => {
+    t(!0);
+  }, []);
+  return {
+    isOpenFaq: n,
+    onCloseFaqModal: o,
+    onOpenFaqModal: s,
+    setIsOpenFaq: t
+  };
+}, E = ({ openFaq: n }) => {
+  const { modal: t } = f();
+  return /* @__PURE__ */ a("div", { className: "flex flex-row items-center justify-center gap-2", children: [
+    /* @__PURE__ */ e("p", { className: "font-sans text-lg font-medium", children: t.faq.needHelp }),
+    /* @__PURE__ */ e(
+      O,
+      {
+        className: "px-0! font-sans text-lg font-normal",
+        color: "blue",
+        onClick: n,
+        variant: "transparent",
+        children: t.faq.faqLink
+      }
+    )
+  ] });
+}, B = ({
+  onSubmit: n,
+  openFaq: t,
+  step: o,
+  openAppHref: s = "#"
+}) => {
+  const { modal: d } = f();
+  return o === 1 ? /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      T,
+      {
+        className: "w-full",
+        handleCustomStep: n,
+        location: "get_approved"
+      }
+    ),
+    /* @__PURE__ */ e(E, { openFaq: t })
+  ] }) : o === 2 ? /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        className: "w-full text-center",
+        color: "blue",
+        href: s,
+        onClick: n,
+        size: "lg",
+        variant: "primary",
+        children: d.getApproved.openAppButton
+      }
+    ),
+    /* @__PURE__ */ e(E, { openFaq: t })
+  ] }) : /* @__PURE__ */ e(p, {});
+}, G = (n) => {
+  const { className: t, spinnerClasses: o, title: s = "Loading..." } = n;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: h(
+        "flex flex-col items-center justify-center gap-12",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e("h2", { className: "text-center !leading-10 text-lg font-medium", children: s }),
+        /* @__PURE__ */ e(V, { className: h("size-16 stroke-blue", o) })
+      ]
+    }
+  );
+}, H = i("/video/get-approved-poster.jpg"), z = i("/video/get-approved.mp4"), K = i("/video/open-onside-poster.jpg"), Q = i("/video/open-onside.av1.mp4"), J = i("/video/open-onside.h264.mp4"), U = ({ step: n }) => {
+  const { modal: t } = f();
+  return n === 1 ? /* @__PURE__ */ a("div", { className: "mt-4 flex flex-col items-center", children: [
+    /* @__PURE__ */ e(
+      "h2",
+      {
+        className: "text-center font-sans text-lg font-normal",
+        id: "get-approved",
+        children: t.getApproved.title
+      }
+    ),
+    /* @__PURE__ */ e("ol", { className: "mt-5 flex list-decimal flex-col gap-2 ps-6 font-sans text-base font-normal", children: t.getApproved.steps.map((o) => /* @__PURE__ */ e("li", { children: o }, o)) }),
+    /* @__PURE__ */ e(
+      N,
+      {
+        ariaLabel: "Instruction demonstrating how to get approved for Onside",
+        className: "w-[calc(100%-8px)] self-start",
+        poster: H,
+        children: /* @__PURE__ */ e("source", { src: z, type: "video/mp4" })
+      }
+    )
+  ] }) : n === 2 ? /* @__PURE__ */ e(
+    G,
+    {
+      className: "flex items-center justify-center",
+      title: t.getApproved.installing
+    }
+  ) : n === 3 ? /* @__PURE__ */ a("div", { className: "mt-4 flex flex-col items-center", children: [
+    /* @__PURE__ */ e(
+      "h2",
+      {
+        className: "text-center font-sans text-lg font-normal",
+        id: "open-onside-app",
+        children: t.getApproved.openApp
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "mt-5 font-sans text-base font-normal", children: /* @__PURE__ */ e("p", { children: t.getApproved.openAppDescription }) }),
+    /* @__PURE__ */ a(
+      N,
+      {
+        ariaLabel: "Instruction demonstrating how to open the Onside app",
+        className: "mt-10! w-[calc(100%-8px)] self-start",
+        poster: K,
+        children: [
+          /* @__PURE__ */ e(
+            "source",
+            {
+              src: Q,
+              type: "video/mp4; codecs=av01.0.05M.08"
+            }
+          ),
+          /* @__PURE__ */ e("source", { src: J, type: "video/mp4" })
+        ]
+      }
+    )
+  ] }) : null;
+}, ne = (n) => {
+  const { open: t, onClose: o, onStep3Complete: s, openAppHref: d } = n, [c, m] = A(1), { isOpenFaq: _, onCloseFaqModal: C, onOpenFaqModal: I } = R(), { installState: M } = w(L()), u = M === "install_available", g = F(
+    () => ({
+      2: { delay: j, action: () => m(3) },
+      3: {
+        delay: P,
+        action: () => s?.(),
+        skip: !u || !s
+      }
+    }),
+    [s, u]
+  );
+  b(() => {
+    const l = g[c];
+    if (!l || l?.skip) return;
+    const D = setTimeout(l.action, l.delay);
+    return () => clearTimeout(D);
+  }, [c, g]);
+  const v = r(() => {
+    x("get_approved", "click", "close"), o(), setTimeout(() => {
+      m(1);
+    }, 500);
+  }, [o]), S = r(() => {
+    m(2), x("get_approved", "click", "install");
+  }, []), y = r(
+    (l) => {
+      l || v();
+    },
+    [v]
+  );
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      q,
+      {
+        "aria-labelledby": "get-approved",
+        className: "outline-hidden",
+        footerContent: /* @__PURE__ */ e(
+          B,
+          {
+            openAppHref: d,
+            onSubmit: S,
+            openFaq: I,
+            step: c
+          }
+        ),
+        isDisplayingMargins: !0,
+        open: t,
+        onOpenChange: y,
+        children: /* @__PURE__ */ e(U, { step: c })
+      }
+    ),
+    /* @__PURE__ */ e(k, { isOpen: _, onClose: C })
+  ] });
+};
+export {
+  ne as GetApprovedModal
+};