@onside/install-widget 1.0.0 → 1.0.2

package/dist-lib/GoToSafariModal-CLxmpCng.js

@@ -0,0 +1,85 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { g as k, t as p, B as d, c as w } from "./install-package-CyWo-B7v.js";
+import * as m from "react";
+import { useState as b, useCallback as a, useMemo as y } from "react";
+import { D as C } from "./Dialog-DXOEeh8t.js";
+const v = 5e3, S = (n) => {
+  const [o, e] = b(!1);
+  return {
+    handleCopy: a(() => {
+      navigator.clipboard.writeText(n), e(!0), setTimeout(() => e(!1), v);
+    }, [n]),
+    isCopied: o
+  };
+}, N = (n) => /* @__PURE__ */ m.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ m.createElement("path", { d: "M3.9375 12.25L6.35539 9.83211C6.74592 9.44158 6.74592 8.80842 6.35539 8.41789L3.9375 6", stroke: "#1E1C1F", strokeOpacity: 0.6, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), D = ({
+  open: n,
+  onClose: o
+}) => {
+  const e = typeof window < "u" ? window.location.href.replace(/\/$/, "") : "", s = y(() => {
+    const [i] = e.replace(/^https?:\/\//, "").split(/[?#]/);
+    return i?.replace(/\/$/, "") ?? "";
+  }, [e]), { handleCopy: l, isCopied: c } = S(e), f = k(), x = f.browser === "opera" && f.platform === "ios", h = a(
+    (i) => {
+      i || o();
+    },
+    [o]
+  ), g = a(() => {
+    p("go_to_safari", "click", "button"), window.location.href = `x-safari-${e}`;
+  }, [e]), u = a(() => {
+    p("go_to_safari", "click", "link"), l();
+  }, [l]);
+  return /* @__PURE__ */ t(
+    C,
+    {
+      "aria-labelledby": "go-to-safari-modal",
+      isDisplayingMargins: !0,
+      open: n,
+      onOpenChange: h,
+      showCloseButton: !1,
+      onBackClick: o,
+      children: /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col items-center justify-center", children: [
+        /* @__PURE__ */ t("h1", { className: "mt-8 text-center font-sans text-5xl font-medium", children: "Open in Safari" }),
+        /* @__PURE__ */ t("p", { className: "text-tertiary mt-5 w-11/12 text-center font-sans text-lg font-normal", children: "Copy the link and open it in Safari to continue." }),
+        /* @__PURE__ */ t("p", { className: "text-tertiary w-11/12 text-center font-sans text-lg font-normal", children: "Onside can only be installed from the Safari browser on your device." }),
+        /* @__PURE__ */ r("div", { className: "mt-10 flex w-full flex-col items-center gap-5", children: [
+          !x && /* @__PURE__ */ r(
+            d,
+            {
+              className: "flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal text-white!",
+              onClick: g,
+              size: "lg",
+              children: [
+                "Open in Safari",
+                /* @__PURE__ */ t(N, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            d,
+            {
+              className: "flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal",
+              onClick: u,
+              size: "lg",
+              variant: "text",
+              children: c ? "Link copied" : s
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(
+          "p",
+          {
+            className: w(
+              "relative mt-3 rounded-xl bg-black px-4 py-3 font-sans text-xs font-normal text-white transition-[opacity,transform] duration-300",
+              "before:absolute before:-top-1 before:left-1/2 before:block before:size-2 before:-translate-x-1/2 before:rotate-45 before:rounded-xs before:bg-black",
+              c ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
+            ),
+            children: "Paste the link in Safari"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  D as GoToSafariModal
+};

package/dist-lib/GoToSafariModal-DJDoZzSN.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("./install-package-q3ncGygt.cjs"),o=require("react"),g=require("./Dialog-D53Br-Xy.cjs");function h(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>t[e]})}}return a.default=t,Object.freeze(a)}const d=h(o),b=5e3,k=t=>{const[a,e]=o.useState(!1);return{handleCopy:o.useCallback(()=>{navigator.clipboard.writeText(t),e(!0),setTimeout(()=>e(!1),b)},[t]),isCopied:a}},y=t=>d.createElement("svg",{width:10,height:16,viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},d.createElement("path",{d:"M3.9375 12.25L6.35539 9.83211C6.74592 9.44158 6.74592 8.80842 6.35539 8.41789L3.9375 6",stroke:"#1E1C1F",strokeOpacity:.6,strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),w=({open:t,onClose:a})=>{const e=typeof window<"u"?window.location.href.replace(/\/$/,""):"",s=o.useMemo(()=>{const[i]=e.replace(/^https?:\/\//,"").split(/[?#]/);return i?.replace(/\/$/,"")??""},[e]),{handleCopy:l,isCopied:c}=k(e),f=r.getDeviceInfo(),p=f.browser==="opera"&&f.platform==="ios",u=o.useCallback(i=>{i||a()},[a]),x=o.useCallback(()=>{r.trackModalEvent("go_to_safari","click","button"),window.location.href=`x-safari-${e}`},[e]),m=o.useCallback(()=>{r.trackModalEvent("go_to_safari","click","link"),l()},[l]);return n.jsx(g.Dialog,{"aria-labelledby":"go-to-safari-modal",isDisplayingMargins:!0,open:t,onOpenChange:u,showCloseButton:!1,onBackClick:a,children:n.jsxs("div",{className:"flex flex-1 flex-col items-center justify-center",children:[n.jsx("h1",{className:"mt-8 text-center font-sans text-5xl font-medium",children:"Open in Safari"}),n.jsx("p",{className:"text-tertiary mt-5 w-11/12 text-center font-sans text-lg font-normal",children:"Copy the link and open it in Safari to continue."}),n.jsx("p",{className:"text-tertiary w-11/12 text-center font-sans text-lg font-normal",children:"Onside can only be installed from the Safari browser on your device."}),n.jsxs("div",{className:"mt-10 flex w-full flex-col items-center gap-5",children:[!p&&n.jsxs(r.Button,{className:"flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal text-white!",onClick:x,size:"lg",children:["Open in Safari",n.jsx(y,{})]}),n.jsx(r.Button,{className:"flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal",onClick:m,size:"lg",variant:"text",children:c?"Link copied":s})]}),n.jsx("p",{className:r.clsx("relative mt-3 rounded-xl bg-black px-4 py-3 font-sans text-xs font-normal text-white transition-[opacity,transform] duration-300","before:absolute before:-top-1 before:left-1/2 before:block before:size-2 before:-translate-x-1/2 before:rotate-45 before:rounded-xs before:bg-black",c?"translate-y-0 opacity-100":"-translate-y-2 opacity-0"),children:"Paste the link in Safari"})]})})};exports.GoToSafariModal=w;

package/dist-lib/UpdateIOSModal-Cd2FI2Dl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),d=require("./install-package-q3ncGygt.cjs"),m=require("./Dialog-D53Br-Xy.cjs"),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",f=({breadcrumbs:e,className:t})=>i.jsx("ul",{className:t,children:e.map((n,r)=>i.jsxs("li",{className:"inline-flex",children:[i.jsx("p",{className:"rounded-3xl bg-lightGray px-2 py-0.5 text-sm",children:n}),r<e.length-1&&i.jsx("img",{alt:"Arrow icon","aria-hidden":"true",className:"ml-1",height:16,src:v,width:10})]},n))}),h=e=>{const{ariaLabel:t,children:n,className:r,poster:s}=e,o=a.useRef(null);return a.useEffect(()=>{const l=()=>{o.current&&o.current.paused&&(o.current.muted=!0,o.current.play())},c=()=>{o.current&&(document.visibilityState==="hidden"?o.current.pause():document.visibilityState==="visible"&&l())},u=()=>{o.current&&o.current.pause()};return document.addEventListener("visibilitychange",c),window.addEventListener("focus",l),window.addEventListener("blur",u),()=>{document.removeEventListener("visibilitychange",c),window.removeEventListener("focus",l),window.removeEventListener("blur",u)}},[]),i.jsx("video",{"aria-label":t,autoPlay:!0,className:d.clsx("mt-2 transform-gpu rounded-2xl object-contain object-top",r),controls:!1,disablePictureInPicture:!0,disableRemotePlayback:!0,draggable:!1,loop:!0,muted:!0,playsInline:!0,poster:s,ref:o,"webkit-playsinline":"true","x-webkit-airplay":"deny",children:n},t)},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"},b="https://cdn.onside.io/assets/onside-install-widget/";function x(e){return e.replace(/^\//,"")}function y(e){const t=x(e),n=t.split("/").pop()??t,r=[t,`/${t}`,n,`/${n}`];for(const s of r)if(p[s])return p[s];return null}function g(e){if(!e||/^https?:\/\//i.test(e)||e.endsWith(".svg"))return e;const t=y(e);if(!t)return e;try{return new URL(t,b).toString()}catch{return e}}const w=["Settings","General","Software Update"],j=g("/video/update-ios-poster.png"),k=g("/video/update-ios.h264.mp4"),S=({open:e,onClose:t})=>{a.useEffect(()=>{let s;return e&&(s=setTimeout(()=>{document.querySelector("video")?.play()},600)),()=>{clearTimeout(s)}},[e]);const n=a.useCallback(s=>{s||t()},[t]),r=a.useCallback(()=>{d.trackModalEvent("update_ios","click","close"),t()},[t]);return i.jsx(m.Dialog,{"aria-labelledby":"update-ios",open:e,onOpenChange:n,showCloseButton:!1,onBackClick:t,children:i.jsxs("div",{className:"flex h-full flex-col items-center justify-center",children:[i.jsx("h2",{className:"mt-3 text-center font-sans text-3xl font-medium",id:"update-ios",children:"Update your iOS"}),i.jsxs("section",{className:"mt-2",children:[i.jsx("p",{className:"mt-3 text-center font-sans text-xs font-normal",children:"To install Onside, update your iPhone or iPad to the latest version of iOS."}),i.jsx(f,{breadcrumbs:w,className:"mt-2 flex gap-1"})]}),i.jsx("div",{className:"relative mt-4 flex w-full grow justify-center overflow-hidden rounded-t-2xl bg-lightGray px-7 pt-7",children:i.jsx(h,{ariaLabel:"Instruction demonstrating the update process",className:"shadow-14-50-98 rounded-t-[20px] border-8 border-b-0 border-white",poster:j,children:i.jsx("source",{src:k,type:"video/mp4"})})}),i.jsx(d.Button,{"aria-label":"Close",className:"mt-4 w-full",onClick:r,size:"lg",type:"button",children:"Close"})]})})};exports.UpdateIOSModal=S;

package/dist-lib/UpdateIOSModal-ms1UJmHc.js

@@ -0,0 +1,169 @@
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { useRef as f, useEffect as m, useCallback as p } from "react";
+import { c as v, t as h, B as b } from "./install-package-CyWo-B7v.js";
+import { D as w } from "./Dialog-DXOEeh8t.js";
+const y = "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", x = ({ breadcrumbs: e, className: t }) => /* @__PURE__ */ i("ul", { className: t, children: e.map((n, r) => /* @__PURE__ */ d("li", { className: "inline-flex", children: [
+  /* @__PURE__ */ i("p", { className: "rounded-3xl bg-lightGray px-2 py-0.5 text-sm", children: n }),
+  r < e.length - 1 && /* @__PURE__ */ i(
+    "img",
+    {
+      alt: "Arrow icon",
+      "aria-hidden": "true",
+      className: "ml-1",
+      height: 16,
+      src: y,
+      width: 10
+    }
+  )
+] }, n)) }), k = (e) => {
+  const { ariaLabel: t, children: n, className: r, poster: o } = e, s = f(null);
+  return m(() => {
+    const a = () => {
+      s.current && s.current.paused && (s.current.muted = !0, s.current.play());
+    }, l = () => {
+      s.current && (document.visibilityState === "hidden" ? s.current.pause() : document.visibilityState === "visible" && a());
+    }, c = () => {
+      s.current && s.current.pause();
+    };
+    return document.addEventListener("visibilitychange", l), window.addEventListener("focus", a), window.addEventListener("blur", c), () => {
+      document.removeEventListener("visibilitychange", l), window.removeEventListener("focus", a), window.removeEventListener("blur", c);
+    };
+  }, []), /* @__PURE__ */ i(
+    "video",
+    {
+      "aria-label": t,
+      autoPlay: !0,
+      className: v(
+        "mt-2 transform-gpu rounded-2xl object-contain object-top",
+        r
+      ),
+      controls: !1,
+      disablePictureInPicture: !0,
+      disableRemotePlayback: !0,
+      draggable: !1,
+      loop: !0,
+      muted: !0,
+      playsInline: !0,
+      poster: o,
+      ref: s,
+      "webkit-playsinline": "true",
+      "x-webkit-airplay": "deny",
+      children: n
+    },
+    t
+  );
+}, u = {
+  "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"
+}, E = "https://cdn.onside.io/assets/onside-install-widget/";
+function N(e) {
+  return e.replace(/^\//, "");
+}
+function S(e) {
+  const t = N(e), n = t.split("/").pop() ?? t, r = [
+    t,
+    `/${t}`,
+    n,
+    `/${n}`
+  ];
+  for (const o of r)
+    if (u[o])
+      return u[o];
+  return null;
+}
+function g(e) {
+  if (!e || /^https?:\/\//i.test(e) || e.endsWith(".svg")) return e;
+  const t = S(e);
+  if (!t) return e;
+  try {
+    return new URL(t, E).toString();
+  } catch {
+    return e;
+  }
+}
+const j = ["Settings", "General", "Software Update"], L = g("/video/update-ios-poster.png"), P = g("/video/update-ios.h264.mp4"), R = ({
+  open: e,
+  onClose: t
+}) => {
+  m(() => {
+    let o;
+    return e && (o = setTimeout(() => {
+      document.querySelector("video")?.play();
+    }, 600)), () => {
+      clearTimeout(o);
+    };
+  }, [e]);
+  const n = p(
+    (o) => {
+      o || t();
+    },
+    [t]
+  ), r = p(() => {
+    h("update_ios", "click", "close"), t();
+  }, [t]);
+  return /* @__PURE__ */ i(
+    w,
+    {
+      "aria-labelledby": "update-ios",
+      open: e,
+      onOpenChange: n,
+      showCloseButton: !1,
+      onBackClick: t,
+      children: /* @__PURE__ */ d("div", { className: "flex h-full flex-col items-center justify-center", children: [
+        /* @__PURE__ */ i(
+          "h2",
+          {
+            className: "mt-3 text-center font-sans text-3xl font-medium",
+            id: "update-ios",
+            children: "Update your iOS"
+          }
+        ),
+        /* @__PURE__ */ d("section", { className: "mt-2", children: [
+          /* @__PURE__ */ i("p", { className: "mt-3 text-center font-sans text-xs font-normal", children: "To install Onside, update your iPhone or iPad to the latest version of iOS." }),
+          /* @__PURE__ */ i(
+            x,
+            {
+              breadcrumbs: j,
+              className: "mt-2 flex gap-1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "relative mt-4 flex w-full grow justify-center overflow-hidden rounded-t-2xl bg-lightGray px-7 pt-7", children: /* @__PURE__ */ i(
+          k,
+          {
+            ariaLabel: "Instruction demonstrating the update process",
+            className: "shadow-14-50-98 rounded-t-[20px] border-8 border-b-0 border-white",
+            poster: L,
+            children: /* @__PURE__ */ i("source", { src: P, type: "video/mp4" })
+          }
+        ) }),
+        /* @__PURE__ */ i(
+          b,
+          {
+            "aria-label": "Close",
+            className: "mt-4 w-full",
+            onClick: r,
+            size: "lg",
+            type: "button",
+            children: "Close"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  R as UpdateIOSModal
+};