@onside/install-widget 1.0.3 → 1.1.0

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.
Files changed (41) hide show
  1. package/dist-lib/AndroidPlatformModal-3kGO8HxK.js +48 -0
  2. package/dist-lib/AndroidPlatformModal-B_uF1M7D.cjs +1 -0
  3. package/dist-lib/CheckInstallModal-ClGHu6XA.cjs +1 -0
  4. package/dist-lib/CheckInstallModal-Do2gfb9L.js +76 -0
  5. package/dist-lib/Dialog-B1D2BvMl.js +95 -0
  6. package/dist-lib/Dialog-BRBYK08a.cjs +1 -0
  7. package/dist-lib/FaqModal-BspE3dHf.cjs +1 -0
  8. package/dist-lib/FaqModal-J1y4DGzd.js +103 -0
  9. package/dist-lib/{GoToSafariModal-C_KBizh8.js → GoToSafariModal-BSuOwGJ3.js} +36 -36
  10. package/dist-lib/GoToSafariModal-Be-O5A-M.cjs +1 -0
  11. package/dist-lib/UpdateIOSModal-CF7lFNfI.js +81 -0
  12. package/dist-lib/UpdateIOSModal-Mxvo1zPl.cjs +1 -0
  13. package/dist-lib/cdn-BmfyFccQ.js +99 -0
  14. package/dist-lib/cdn-BonUyxCA.cjs +1 -0
  15. package/dist-lib/hooks.cjs +1 -1
  16. package/dist-lib/hooks.js +4 -3
  17. package/dist-lib/index-BzQo1EMv.cjs +1 -0
  18. package/dist-lib/index-fWIxOyUM.js +194 -0
  19. package/dist-lib/install-package-CZGZODly.js +451 -0
  20. package/dist-lib/install-package-Dkv3eM_d.cjs +1 -0
  21. package/dist-lib/install-package.cjs +1 -1
  22. package/dist-lib/install-package.d.ts +83 -19
  23. package/dist-lib/install-package.js +14 -12
  24. package/dist-lib/install-widget.css +1 -1
  25. package/dist-lib/useInstallUrl-McaAuMPK.js +65 -0
  26. package/dist-lib/useInstallUrl-iPCPqYWB.cjs +1 -0
  27. package/dist-lib/utils.cjs +1 -1
  28. package/dist-lib/utils.d.ts +1 -2
  29. package/dist-lib/utils.js +89 -79
  30. package/package.json +4 -4
  31. package/dist-lib/AndroidPlatformModal-2Ykjo2V7.js +0 -48
  32. package/dist-lib/AndroidPlatformModal-DTglyxUG.cjs +0 -1
  33. package/dist-lib/Dialog-yEP-7Deb.js +0 -1399
  34. package/dist-lib/Dialog-yZ9bWtK1.cjs +0 -45
  35. package/dist-lib/GoToSafariModal-Cgx0X0rg.cjs +0 -1
  36. package/dist-lib/UpdateIOSModal-BGWvssyd.js +0 -170
  37. package/dist-lib/UpdateIOSModal-CE-d3YCr.cjs +0 -1
  38. package/dist-lib/install-package-B17QfMPy.cjs +0 -1
  39. package/dist-lib/install-package-DowlG4hO.js +0 -3036
  40. package/dist-lib/useInstallUrl-CjUspi0p.cjs +0 -1
  41. package/dist-lib/useInstallUrl-JIdkWpgj.js +0 -87
@@ -0,0 +1,48 @@
1
+ import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
+ import { useCallback as n } from "react";
3
+ import { u as d, B as m } from "./install-package-CZGZODly.js";
4
+ import { D as f } from "./Dialog-B1D2BvMl.js";
5
+ import { trackModalEvent as p } from "./utils.js";
6
+ const b = ({
7
+ open: i,
8
+ onClose: o
9
+ }) => {
10
+ const { modal: a } = d(), t = "is_android", l = n(() => {
11
+ p(t, "click", "close"), o();
12
+ }, [o]), r = n(
13
+ (c) => {
14
+ c || l();
15
+ },
16
+ [l]
17
+ );
18
+ return /* @__PURE__ */ e(
19
+ f,
20
+ {
21
+ "aria-labelledby": t,
22
+ className: "outline-hidden",
23
+ isDisplayingMargins: !0,
24
+ open: i,
25
+ onOpenChange: r,
26
+ children: /* @__PURE__ */ s("div", { className: "flex h-full flex-col items-center justify-between text-center", children: [
27
+ /* @__PURE__ */ s("div", { className: "m-auto", children: [
28
+ /* @__PURE__ */ e("p", { className: "text-2xl font-bold", children: a.android.title }),
29
+ /* @__PURE__ */ e("p", { className: "mt-3 px-10 font-sans text-xs font-normal", children: a.android.description })
30
+ ] }),
31
+ /* @__PURE__ */ e(
32
+ m,
33
+ {
34
+ className: "mt-2 w-full",
35
+ onClick: l,
36
+ size: "lg",
37
+ type: "button",
38
+ variant: "secondary",
39
+ children: a.close
40
+ }
41
+ )
42
+ ] })
43
+ }
44
+ );
45
+ };
46
+ export {
47
+ b as AndroidPlatformModal
48
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),o=require("./install-package-Dkv3eM_d.cjs"),d=require("./Dialog-BRBYK08a.cjs"),u=require("./utils.cjs"),m=({open:i,onClose:t})=>{const{modal:s}=o.useMessages(),a="is_android",l=n.useCallback(()=>{u.trackModalEvent(a,"click","close"),t()},[t]),c=n.useCallback(r=>{r||l()},[l]);return e.jsx(d.Dialog,{"aria-labelledby":a,className:"outline-hidden",isDisplayingMargins:!0,open:i,onOpenChange:c,children:e.jsxs("div",{className:"flex h-full flex-col items-center justify-between text-center",children:[e.jsxs("div",{className:"m-auto",children:[e.jsx("p",{className:"text-2xl font-bold",children:s.android.title}),e.jsx("p",{className:"mt-3 px-10 font-sans text-xs font-normal",children:s.android.description})]}),e.jsx(o.Button,{className:"mt-2 w-full",onClick:l,size:"lg",type:"button",variant:"secondary",children:s.close})]})})};exports.AndroidPlatformModal=m;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),c=require("./install-package-Dkv3eM_d.cjs"),h=require("./Dialog-BRBYK08a.cjs"),f=require("./FaqModal-BspE3dHf.cjs"),a=require("./utils.cjs"),m=({open:o,onClose:l})=>{const{modal:t}=c.useMessages(),[r,n]=s.useState(!1),i=s.useCallback(()=>{a.trackModalEvent("check_install","click","close"),l()},[l]),u=s.useCallback(()=>{a.trackModalEvent("check_install","click","success"),l()},[l]),d=s.useCallback(()=>{a.trackModalEvent("check_install","click","help"),n(!0)},[]),x=s.useCallback(k=>{k||i()},[i]);return e.jsxs(h.Dialog,{"aria-labelledby":"check-install",className:"outline-hidden",isDisplayingMargins:!0,open:o,onOpenChange:x,children:[e.jsxs("div",{className:"flex h-full flex-col items-center justify-center text-center",children:[e.jsxs("div",{className:"mb-8 flex flex-col gap-3",children:[e.jsx("p",{className:"font-serif text-3xl font-medium text-black",children:t.checkInstall.title}),e.jsx("p",{className:"font-sans text-sm font-normal text-black/60",children:t.checkInstall.description})]}),e.jsxs("div",{className:"flex w-full flex-col gap-2",children:[e.jsx(c.Button,{className:"text-2xs w-full font-mono",onClick:u,size:"lg",type:"button",children:t.checkInstall.yes}),e.jsx(c.Button,{className:"text-2xs w-full font-mono",onClick:d,size:"lg",type:"button",variant:"secondary",children:t.checkInstall.no})]})]}),e.jsx(f.FaqModal,{isOpen:r,onClose:()=>{n(!1),l()}})]})};exports.CheckInstallModal=m;
@@ -0,0 +1,76 @@
1
+ import { jsxs as t, jsx as l } from "react/jsx-runtime";
2
+ import { useState as u, useCallback as c } from "react";
3
+ import { u as x, B as i } from "./install-package-CZGZODly.js";
4
+ import { D as k } from "./Dialog-B1D2BvMl.js";
5
+ import { F as g } from "./FaqModal-J1y4DGzd.js";
6
+ import { trackModalEvent as a } from "./utils.js";
7
+ const C = ({
8
+ open: r,
9
+ onClose: e
10
+ }) => {
11
+ const { modal: s } = x(), [m, n] = u(!1), o = c(() => {
12
+ a("check_install", "click", "close"), e();
13
+ }, [e]), f = c(() => {
14
+ a("check_install", "click", "success"), e();
15
+ }, [e]), d = c(() => {
16
+ a("check_install", "click", "help"), n(!0);
17
+ }, []), h = c(
18
+ (p) => {
19
+ p || o();
20
+ },
21
+ [o]
22
+ );
23
+ return /* @__PURE__ */ t(
24
+ k,
25
+ {
26
+ "aria-labelledby": "check-install",
27
+ className: "outline-hidden",
28
+ isDisplayingMargins: !0,
29
+ open: r,
30
+ onOpenChange: h,
31
+ children: [
32
+ /* @__PURE__ */ t("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
33
+ /* @__PURE__ */ t("div", { className: "mb-8 flex flex-col gap-3", children: [
34
+ /* @__PURE__ */ l("p", { className: "font-serif text-3xl font-medium text-black", children: s.checkInstall.title }),
35
+ /* @__PURE__ */ l("p", { className: "font-sans text-sm font-normal text-black/60", children: s.checkInstall.description })
36
+ ] }),
37
+ /* @__PURE__ */ t("div", { className: "flex w-full flex-col gap-2", children: [
38
+ /* @__PURE__ */ l(
39
+ i,
40
+ {
41
+ className: "text-2xs w-full font-mono",
42
+ onClick: f,
43
+ size: "lg",
44
+ type: "button",
45
+ children: s.checkInstall.yes
46
+ }
47
+ ),
48
+ /* @__PURE__ */ l(
49
+ i,
50
+ {
51
+ className: "text-2xs w-full font-mono",
52
+ onClick: d,
53
+ size: "lg",
54
+ type: "button",
55
+ variant: "secondary",
56
+ children: s.checkInstall.no
57
+ }
58
+ )
59
+ ] })
60
+ ] }),
61
+ /* @__PURE__ */ l(
62
+ g,
63
+ {
64
+ isOpen: m,
65
+ onClose: () => {
66
+ n(!1), e();
67
+ }
68
+ }
69
+ )
70
+ ]
71
+ }
72
+ );
73
+ };
74
+ export {
75
+ C as CheckInstallModal
76
+ };
@@ -0,0 +1,95 @@
1
+ import { jsx as t, jsxs as o } from "react/jsx-runtime";
2
+ import * as a from "@radix-ui/react-dialog";
3
+ import * as l from "react";
4
+ import { forwardRef as y, useState as k, useEffect as C } from "react";
5
+ import { a as i, B as N } from "./install-package-CZGZODly.js";
6
+ const B = (e) => /* @__PURE__ */ l.createElement("svg", { fill: "none", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("path", { d: "m4 12 8-8m-8 0 8 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5 })), z = (e) => /* @__PURE__ */ l.createElement("svg", { fill: "none", height: 16, viewBox: "0 0 16 16", width: 16, xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("path", { d: "m9.7002 13-4.2929-4.29289c-.39052-.39053-.39052-1.02369 0-1.41422l4.2929-4.29289", stroke: "#1e1c1f", strokeLinecap: "round", strokeLinejoin: "round", strokeOpacity: 0.84, strokeWidth: 1.5 })), d = "provider-widget-portal-root";
7
+ function D() {
8
+ let e = document.getElementById(d);
9
+ return e || (e = document.createElement("div"), e.id = d, e.style.zIndex = "2147483647", e.style.position = "relative", document.body.appendChild(e)), e;
10
+ }
11
+ const E = y((e, c) => {
12
+ const {
13
+ "aria-labelledby": m,
14
+ "aria-describedby": u,
15
+ children: p,
16
+ className: f,
17
+ footerContent: n,
18
+ headerContent: h,
19
+ isDisplayingMargins: x = !0,
20
+ open: g,
21
+ onOpenChange: b,
22
+ showCloseButton: w = !0,
23
+ onBackClick: r
24
+ } = e, [s, v] = k(
25
+ null
26
+ );
27
+ return C(() => {
28
+ v(D());
29
+ }, []), /* @__PURE__ */ t(a.Root, { open: g, onOpenChange: b, children: s && /* @__PURE__ */ o(a.Portal, { container: s, children: [
30
+ /* @__PURE__ */ t(
31
+ a.Overlay,
32
+ {
33
+ "aria-hidden": !0,
34
+ className: i(
35
+ "fixed inset-0 bg-black/50 backdrop-blur-sm",
36
+ "!z-[2147483647] pointer-events-auto",
37
+ "data-[state=open]:animate-in data-[state=closed]:animate-out",
38
+ "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
39
+ "duration-300"
40
+ )
41
+ }
42
+ ),
43
+ /* @__PURE__ */ t(
44
+ a.Content,
45
+ {
46
+ ref: c,
47
+ "aria-labelledby": m,
48
+ "aria-describedby": u,
49
+ "aria-modal": "true",
50
+ className: i(
51
+ "fixed left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 outline-none",
52
+ "!z-[2147483647]",
53
+ "data-[state=open]:animate-in data-[state=closed]:animate-out",
54
+ "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
55
+ "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
56
+ "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
57
+ "duration-300",
58
+ x && "h-dvh max-h-[calc(100dvh-8px)] max-w-[calc(100dvw-8px)] rounded-2xl bg-white p-4",
59
+ f
60
+ ),
61
+ children: /* @__PURE__ */ o("div", { className: "flex h-full flex-col", children: [
62
+ /* @__PURE__ */ o(a.Title, { className: "flex flex-shrink-0 flex-row items-center justify-between", children: [
63
+ /* @__PURE__ */ o("div", { className: "flex items-center", children: [
64
+ r && /* @__PURE__ */ t(
65
+ N,
66
+ {
67
+ className: "mr-auto rounded-full !bg-lightGray !p-[10px]",
68
+ onClick: r,
69
+ children: /* @__PURE__ */ t(z, { className: "size-4" })
70
+ }
71
+ ),
72
+ h
73
+ ] }),
74
+ w && /* @__PURE__ */ t(a.Close, { asChild: !0, children: /* @__PURE__ */ t(
75
+ "button",
76
+ {
77
+ "aria-label": "Close modal",
78
+ className: "hover:bg-gray-200 ml-auto rounded-full bg-lightGray p-[10px] outline-none",
79
+ type: "button",
80
+ children: /* @__PURE__ */ t(B, { className: "size-4" })
81
+ }
82
+ ) })
83
+ ] }),
84
+ /* @__PURE__ */ t("div", { className: "min-h-0 flex-1 overflow-y-auto", children: p }),
85
+ n && /* @__PURE__ */ t("footer", { className: "flex flex-shrink-0 flex-col gap-2.5", children: n })
86
+ ] })
87
+ }
88
+ )
89
+ ] }) });
90
+ });
91
+ E.displayName = "Dialog";
92
+ export {
93
+ E as D,
94
+ z as S
95
+ };
@@ -0,0 +1 @@
1
+ "use strict";const t=require("react/jsx-runtime"),C=require("@radix-ui/react-dialog"),s=require("react"),i=require("./install-package-Dkv3eM_d.cjs");function f(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const o=f(C),r=f(s),N=e=>r.createElement("svg",{fill:"none",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",...e},r.createElement("path",{d:"m4 12 8-8m-8 0 8 8",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})),p=e=>r.createElement("svg",{fill:"none",height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",...e},r.createElement("path",{d:"m9.7002 13-4.2929-4.29289c-.39052-.39053-.39052-1.02369 0-1.41422l4.2929-4.29289",stroke:"#1e1c1f",strokeLinecap:"round",strokeLinejoin:"round",strokeOpacity:.84,strokeWidth:1.5})),m="provider-widget-portal-root";function D(){let e=document.getElementById(m);return e||(e=document.createElement("div"),e.id=m,e.style.zIndex="2147483647",e.style.position="relative",document.body.appendChild(e)),e}const x=s.forwardRef((e,n)=>{const{"aria-labelledby":a,"aria-describedby":l,children:h,className:g,footerContent:c,headerContent:b,isDisplayingMargins:w=!0,open:y,onOpenChange:v,showCloseButton:j=!0,onBackClick:d}=e,[u,k]=s.useState(null);return s.useEffect(()=>{k(D())},[]),t.jsx(o.Root,{open:y,onOpenChange:v,children:u&&t.jsxs(o.Portal,{container:u,children:[t.jsx(o.Overlay,{"aria-hidden":!0,className:i.cn("fixed inset-0 bg-black/50 backdrop-blur-sm","!z-[2147483647] pointer-events-auto","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","duration-300")}),t.jsx(o.Content,{ref:n,"aria-labelledby":a,"aria-describedby":l,"aria-modal":"true",className:i.cn("fixed left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 outline-none","!z-[2147483647]","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]","data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]","duration-300",w&&"h-dvh max-h-[calc(100dvh-8px)] max-w-[calc(100dvw-8px)] rounded-2xl bg-white p-4",g),children:t.jsxs("div",{className:"flex h-full flex-col",children:[t.jsxs(o.Title,{className:"flex flex-shrink-0 flex-row items-center justify-between",children:[t.jsxs("div",{className:"flex items-center",children:[d&&t.jsx(i.Button,{className:"mr-auto rounded-full !bg-lightGray !p-[10px]",onClick:d,children:t.jsx(p,{className:"size-4"})}),b]}),j&&t.jsx(o.Close,{asChild:!0,children:t.jsx("button",{"aria-label":"Close modal",className:"hover:bg-gray-200 ml-auto rounded-full bg-lightGray p-[10px] outline-none",type:"button",children:t.jsx(N,{className:"size-4"})})})]}),t.jsx("div",{className:"min-h-0 flex-1 overflow-y-auto",children:h}),c&&t.jsx("footer",{className:"flex flex-shrink-0 flex-col gap-2.5",children:c})]})})]})})});x.displayName="Dialog";exports.Dialog=x;exports.SvgArrowBackIcon=p;
@@ -0,0 +1 @@
1
+ "use strict";const e=require("react/jsx-runtime"),i=require("./cdn-BonUyxCA.cjs"),c=require("./install-package-Dkv3eM_d.cjs"),x=require("./Dialog-BRBYK08a.cjs"),r=require("react"),p=s=>{const{className:a,text:t="hello@onside.io"}=s;return e.jsx("a",{className:a,href:"mailto:hello@onside.io",rel:"noreferrer noopener",target:"_blank",children:t})},f=({action:s,onClick:a})=>{if(s.event==="change_region")return e.jsx(c.Button,{className:"!px-1.5 !py-0",onClick:a,variant:"transparent",children:s.word});if(s.event==="support")return e.jsx(p,{className:"px-1.5 font-medium text-blue",text:s.word})},j=s=>{const{action:a,answer:t,changeDisplay:n,question:l}=s,o=r.useCallback(()=>{n("changeRegion")},[n]);return e.jsxs("li",{className:"flex flex-col gap-6 rounded-3xl bg-lightGray p-6",children:[e.jsx("h3",{className:"leading-7 text-sm font-medium",children:l}),e.jsxs("p",{className:"text-base",children:[t,a?f({action:a,onClick:o}):null]})]})},N=({changeDisplay:s,className:a})=>{const{modal:t}=c.useMessages();return e.jsx("ul",{className:c.clsx("flex flex-col gap-2",a),children:t.faq.items.map((n,l)=>e.jsx(j,{action:n.action,answer:n.answer,changeDisplay:s,question:n.question},`faq-item-${l}`))})},q=i.cdn("/video/change-region.h264.mp4"),b=i.cdn("/video/change-region-poster.png"),g=s=>{const{isOpen:a,onClose:t}=s,{modal:n}=c.useMessages(),[l,o]=r.useState("generic"),m=r.useCallback(()=>{o("generic")},[]),u=r.useCallback(()=>{t(),setTimeout(()=>{o("generic")},500)},[t]);let d=e.jsxs(e.Fragment,{children:[e.jsx("h2",{className:"mt-4 text-center text-xl font-medium",children:n.faq.title}),e.jsx(N,{changeDisplay:o,className:"mt-8"})]});return l==="changeRegion"&&(d=e.jsxs("div",{className:"flex flex-col overflow-x-scroll",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx("h2",{className:"mt-4 text-center text-lg font-medium",children:n.faq.changeRegion.title}),e.jsx("p",{className:"text-sm",children:n.faq.changeRegion.label}),e.jsx(i.Breadcrumbs,{breadcrumbs:n.faq.changeRegion.breadcrumbs,className:"flex max-w-[85%] flex-wrap justify-center gap-x-1 gap-y-2"}),e.jsx("p",{className:"text-sm",children:n.faq.changeRegion.caption})]}),e.jsx("div",{className:"mt-6 flex w-full justify-center rounded-2xl bg-lightGray px-7 py-5",children:e.jsx(i.VideoAutoplay,{ariaLabel:"Instruction demonstrating how to change the App Store region",className:"w-full rounded-2xl border-8 border-white",poster:b,children:e.jsx("source",{src:q,type:"video/mp4"})})})]})),e.jsx(x.Dialog,{"aria-labelledby":"faq-modal",headerContent:l==="changeRegion"&&e.jsx(c.Button,{className:"mr-auto rounded-full bg-lightGray !p-[10px]",onClick:m,children:e.jsx(x.SvgArrowBackIcon,{className:"size-4"})}),open:a,onOpenChange:h=>{h||u()},children:d})};g.displayName="FaqModal";exports.FaqModal=g;
@@ -0,0 +1,103 @@
1
+ import { jsx as e, jsxs as r, Fragment as u } from "react/jsx-runtime";
2
+ import { B as x, V as N, c as m } from "./cdn-BmfyFccQ.js";
3
+ import { u as d, c as b, B as g } from "./install-package-CZGZODly.js";
4
+ import { D as y, S as q } from "./Dialog-B1D2BvMl.js";
5
+ import { useCallback as c, useState as w } from "react";
6
+ const C = (a) => {
7
+ const { className: t, text: o = "hello@onside.io" } = a;
8
+ return /* @__PURE__ */ e(
9
+ "a",
10
+ {
11
+ className: t,
12
+ href: "mailto:hello@onside.io",
13
+ rel: "noreferrer noopener",
14
+ target: "_blank",
15
+ children: o
16
+ }
17
+ );
18
+ }, R = ({ action: a, onClick: t }) => {
19
+ if (a.event === "change_region")
20
+ return /* @__PURE__ */ e(g, { className: "!px-1.5 !py-0", onClick: t, variant: "transparent", children: a.word });
21
+ if (a.event === "support")
22
+ return /* @__PURE__ */ e(C, { className: "px-1.5 font-medium text-blue", text: a.word });
23
+ }, v = (a) => {
24
+ const { action: t, answer: o, changeDisplay: n, question: l } = a, s = c(() => {
25
+ n("changeRegion");
26
+ }, [n]);
27
+ return /* @__PURE__ */ r("li", { className: "flex flex-col gap-6 rounded-3xl bg-lightGray p-6", children: [
28
+ /* @__PURE__ */ e("h3", { className: "leading-7 text-sm font-medium", children: l }),
29
+ /* @__PURE__ */ r("p", { className: "text-base", children: [
30
+ o,
31
+ t ? R({ action: t, onClick: s }) : null
32
+ ] })
33
+ ] });
34
+ }, k = ({ changeDisplay: a, className: t }) => {
35
+ const { modal: o } = d();
36
+ return /* @__PURE__ */ e("ul", { className: b("flex flex-col gap-2", t), children: o.faq.items.map((n, l) => /* @__PURE__ */ e(
37
+ v,
38
+ {
39
+ action: n.action,
40
+ answer: n.answer,
41
+ changeDisplay: a,
42
+ question: n.question
43
+ },
44
+ `faq-item-${l}`
45
+ )) });
46
+ }, E = m("/video/change-region.h264.mp4"), _ = m("/video/change-region-poster.png"), B = (a) => {
47
+ const { isOpen: t, onClose: o } = a, { modal: n } = d(), [l, s] = w("generic"), h = c(() => {
48
+ s("generic");
49
+ }, []), p = c(() => {
50
+ o(), setTimeout(() => {
51
+ s("generic");
52
+ }, 500);
53
+ }, [o]);
54
+ let i = /* @__PURE__ */ r(u, { children: [
55
+ /* @__PURE__ */ e("h2", { className: "mt-4 text-center text-xl font-medium", children: n.faq.title }),
56
+ /* @__PURE__ */ e(k, { changeDisplay: s, className: "mt-8" })
57
+ ] });
58
+ return l === "changeRegion" && (i = /* @__PURE__ */ r("div", { className: "flex flex-col overflow-x-scroll", children: [
59
+ /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
60
+ /* @__PURE__ */ e("h2", { className: "mt-4 text-center text-lg font-medium", children: n.faq.changeRegion.title }),
61
+ /* @__PURE__ */ e("p", { className: "text-sm", children: n.faq.changeRegion.label }),
62
+ /* @__PURE__ */ e(
63
+ x,
64
+ {
65
+ breadcrumbs: n.faq.changeRegion.breadcrumbs,
66
+ className: "flex max-w-[85%] flex-wrap justify-center gap-x-1 gap-y-2"
67
+ }
68
+ ),
69
+ /* @__PURE__ */ e("p", { className: "text-sm", children: n.faq.changeRegion.caption })
70
+ ] }),
71
+ /* @__PURE__ */ e("div", { className: "mt-6 flex w-full justify-center rounded-2xl bg-lightGray px-7 py-5", children: /* @__PURE__ */ e(
72
+ N,
73
+ {
74
+ ariaLabel: "Instruction demonstrating how to change the App Store region",
75
+ className: "w-full rounded-2xl border-8 border-white",
76
+ poster: _,
77
+ children: /* @__PURE__ */ e("source", { src: E, type: "video/mp4" })
78
+ }
79
+ ) })
80
+ ] })), /* @__PURE__ */ e(
81
+ y,
82
+ {
83
+ "aria-labelledby": "faq-modal",
84
+ headerContent: l === "changeRegion" && /* @__PURE__ */ e(
85
+ g,
86
+ {
87
+ className: "mr-auto rounded-full bg-lightGray !p-[10px]",
88
+ onClick: h,
89
+ children: /* @__PURE__ */ e(q, { className: "size-4" })
90
+ }
91
+ ),
92
+ open: t,
93
+ onOpenChange: (f) => {
94
+ f || p();
95
+ },
96
+ children: i
97
+ }
98
+ );
99
+ };
100
+ B.displayName = "FaqModal";
101
+ export {
102
+ B as F
103
+ };
@@ -1,57 +1,57 @@
1
1
  import { jsx as t, jsxs as i } from "react/jsx-runtime";
2
- import { B as p, c as k } from "./install-package-DowlG4hO.js";
2
+ import { u as w, B as p, c as b } from "./install-package-CZGZODly.js";
3
3
  import * as m from "react";
4
- import { useState as w, useCallback as a, useMemo as b } from "react";
5
- import { D as y } from "./Dialog-yEP-7Deb.js";
6
- import { getDeviceInfo as C, trackModalEvent as d } from "./utils.js";
7
- const v = 5e3, S = (n) => {
8
- const [o, e] = w(!1);
4
+ import { useState as y, useCallback as r, useMemo as C } from "react";
5
+ import { D as S } from "./Dialog-B1D2BvMl.js";
6
+ import { getDeviceInfo as v, trackModalEvent as d } from "./utils.js";
7
+ const T = 5e3, N = (o) => {
8
+ const [n, e] = y(!1);
9
9
  return {
10
- handleCopy: a(() => {
11
- navigator.clipboard.writeText(n), e(!0), setTimeout(() => e(!1), v);
12
- }, [n]),
13
- isCopied: o
10
+ handleCopy: r(() => {
11
+ navigator.clipboard.writeText(o), e(!0), setTimeout(() => e(!1), T);
12
+ }, [o]),
13
+ isCopied: n
14
14
  };
15
- }, 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" })), I = ({
16
- open: n,
17
- onClose: o
15
+ }, j = (o) => /* @__PURE__ */ m.createElement("svg", { width: 10, height: 16, viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__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" })), I = ({
16
+ open: o,
17
+ onClose: n
18
18
  }) => {
19
- const e = typeof window < "u" ? window.location.href.replace(/\/$/, "") : "", s = b(() => {
20
- const [r] = e.replace(/^https?:\/\//, "").split(/[?#]/);
21
- return r?.replace(/\/$/, "") ?? "";
22
- }, [e]), { handleCopy: l, isCopied: c } = S(e), f = C(), x = f.browser === "opera" && f.platform === "ios", h = a(
23
- (r) => {
24
- r || o();
19
+ const { modal: e } = w(), a = typeof window < "u" ? window.location.href.replace(/\/$/, "") : "", x = C(() => {
20
+ const [s] = a.replace(/^https?:\/\//, "").split(/[?#]/);
21
+ return s?.replace(/\/$/, "") ?? "";
22
+ }, [a]), { handleCopy: l, isCopied: c } = N(a), f = v(), g = f.browser === "opera" && f.platform === "ios", h = r(
23
+ (s) => {
24
+ s || n();
25
25
  },
26
- [o]
27
- ), u = a(() => {
28
- d("go_to_safari", "click", "button"), window.location.href = `x-safari-${e}`;
29
- }, [e]), g = a(() => {
26
+ [n]
27
+ ), u = r(() => {
28
+ d("go_to_safari", "click", "button"), window.location.href = `x-safari-${a}`;
29
+ }, [a]), k = r(() => {
30
30
  d("go_to_safari", "click", "link"), l();
31
31
  }, [l]);
32
32
  return /* @__PURE__ */ t(
33
- y,
33
+ S,
34
34
  {
35
35
  "aria-labelledby": "go-to-safari-modal",
36
36
  isDisplayingMargins: !0,
37
- open: n,
37
+ open: o,
38
38
  onOpenChange: h,
39
39
  showCloseButton: !1,
40
- onBackClick: o,
40
+ onBackClick: n,
41
41
  children: /* @__PURE__ */ i("div", { className: "flex flex-1 flex-col items-center justify-center", children: [
42
- /* @__PURE__ */ t("h1", { className: "mt-8 text-center font-sans text-5xl font-medium", children: "Open in Safari" }),
43
- /* @__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." }),
44
- /* @__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." }),
42
+ /* @__PURE__ */ t("h1", { className: "mt-8 text-center font-sans text-5xl font-medium", children: e.goToSafari.title }),
43
+ /* @__PURE__ */ t("p", { className: "text-tertiary mt-5 w-11/12 text-center font-sans text-lg font-normal", children: e.goToSafari.caption }),
44
+ /* @__PURE__ */ t("p", { className: "text-tertiary w-11/12 text-center font-sans text-lg font-normal", children: e.goToSafari.description }),
45
45
  /* @__PURE__ */ i("div", { className: "mt-10 flex w-full flex-col items-center gap-5", children: [
46
- !x && /* @__PURE__ */ i(
46
+ !g && /* @__PURE__ */ i(
47
47
  p,
48
48
  {
49
49
  className: "flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal text-white!",
50
50
  onClick: u,
51
51
  size: "lg",
52
52
  children: [
53
- "Open in Safari",
54
- /* @__PURE__ */ t(N, {})
53
+ e.goToSafari.openButton,
54
+ /* @__PURE__ */ t(j, {})
55
55
  ]
56
56
  }
57
57
  ),
@@ -59,22 +59,22 @@ const v = 5e3, S = (n) => {
59
59
  p,
60
60
  {
61
61
  className: "flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal",
62
- onClick: g,
62
+ onClick: k,
63
63
  size: "lg",
64
64
  variant: "text",
65
- children: c ? "Link copied" : s
65
+ children: c ? e.goToSafari.linkCopied : x
66
66
  }
67
67
  )
68
68
  ] }),
69
69
  /* @__PURE__ */ t(
70
70
  "p",
71
71
  {
72
- className: k(
72
+ className: b(
73
73
  "relative mt-3 rounded-xl bg-black px-4 py-3 font-sans text-xs font-normal text-white transition-[opacity,transform] duration-300",
74
74
  "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",
75
75
  c ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
76
76
  ),
77
- children: "Paste the link in Safari"
77
+ children: e.goToSafari.linkPaste
78
78
  }
79
79
  )
80
80
  ] })
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("./install-package-Dkv3eM_d.cjs"),s=require("react"),h=require("./Dialog-BRBYK08a.cjs"),l=require("./utils.cjs");function k(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(a,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return a.default=t,Object.freeze(a)}const u=k(s),w=5e3,y=t=>{const[a,e]=s.useState(!1);return{handleCopy:s.useCallback(()=>{navigator.clipboard.writeText(t),e(!0),setTimeout(()=>e(!1),w)},[t]),isCopied:a}},C=t=>u.createElement("svg",{width:10,height:16,viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},u.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"})),j=({open:t,onClose:a})=>{const{modal:e}=r.useMessages(),n=typeof window<"u"?window.location.href.replace(/\/$/,""):"",p=s.useMemo(()=>{const[i]=n.replace(/^https?:\/\//,"").split(/[?#]/);return i?.replace(/\/$/,"")??""},[n]),{handleCopy:c,isCopied:f}=y(n),d=l.getDeviceInfo(),x=d.browser==="opera"&&d.platform==="ios",g=s.useCallback(i=>{i||a()},[a]),m=s.useCallback(()=>{l.trackModalEvent("go_to_safari","click","button"),window.location.href=`x-safari-${n}`},[n]),b=s.useCallback(()=>{l.trackModalEvent("go_to_safari","click","link"),c()},[c]);return o.jsx(h.Dialog,{"aria-labelledby":"go-to-safari-modal",isDisplayingMargins:!0,open:t,onOpenChange:g,showCloseButton:!1,onBackClick:a,children:o.jsxs("div",{className:"flex flex-1 flex-col items-center justify-center",children:[o.jsx("h1",{className:"mt-8 text-center font-sans text-5xl font-medium",children:e.goToSafari.title}),o.jsx("p",{className:"text-tertiary mt-5 w-11/12 text-center font-sans text-lg font-normal",children:e.goToSafari.caption}),o.jsx("p",{className:"text-tertiary w-11/12 text-center font-sans text-lg font-normal",children:e.goToSafari.description}),o.jsxs("div",{className:"mt-10 flex w-full flex-col items-center gap-5",children:[!x&&o.jsxs(r.Button,{className:"flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal text-white!",onClick:m,size:"lg",children:[e.goToSafari.openButton,o.jsx(C,{})]}),o.jsx(r.Button,{className:"flex min-w-[206px] items-center justify-center gap-[6px] font-sans text-lg font-normal",onClick:b,size:"lg",variant:"text",children:f?e.goToSafari.linkCopied:p})]}),o.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",f?"translate-y-0 opacity-100":"-translate-y-2 opacity-0"),children:e.goToSafari.linkPaste})]})})};exports.GoToSafariModal=j;
@@ -0,0 +1,81 @@
1
+ import { jsx as e, jsxs as r } from "react/jsx-runtime";
2
+ import { useEffect as n, useCallback as l } from "react";
3
+ import { B as m, V as u, c as i } from "./cdn-BmfyFccQ.js";
4
+ import { u as p, B as f } from "./install-package-CZGZODly.js";
5
+ import { D as h } from "./Dialog-B1D2BvMl.js";
6
+ import { trackModalEvent as b } from "./utils.js";
7
+ const x = i("/video/update-ios-poster.png"), g = i("/video/update-ios.h264.mp4"), k = ({
8
+ open: o,
9
+ onClose: t
10
+ }) => {
11
+ const { modal: s } = p();
12
+ n(() => {
13
+ let a;
14
+ return o && (a = setTimeout(() => {
15
+ document.querySelector("video")?.play();
16
+ }, 600)), () => {
17
+ clearTimeout(a);
18
+ };
19
+ }, [o]);
20
+ const c = l(
21
+ (a) => {
22
+ a || t();
23
+ },
24
+ [t]
25
+ ), d = l(() => {
26
+ b("update_ios", "click", "close"), t();
27
+ }, [t]);
28
+ return /* @__PURE__ */ e(
29
+ h,
30
+ {
31
+ "aria-labelledby": "update-ios",
32
+ open: o,
33
+ onOpenChange: c,
34
+ showCloseButton: !1,
35
+ onBackClick: t,
36
+ children: /* @__PURE__ */ r("div", { className: "flex h-full flex-col items-center justify-center", children: [
37
+ /* @__PURE__ */ e(
38
+ "h2",
39
+ {
40
+ className: "mt-3 text-center font-sans text-3xl font-medium",
41
+ id: "update-ios",
42
+ children: s.updateIos.title
43
+ }
44
+ ),
45
+ /* @__PURE__ */ r("section", { className: "mt-2", children: [
46
+ /* @__PURE__ */ e("p", { className: "mt-3 text-center font-sans text-xs font-normal", children: s.updateIos.description }),
47
+ /* @__PURE__ */ e(
48
+ m,
49
+ {
50
+ breadcrumbs: s.updateIos.breadcrumbs,
51
+ className: "mt-2 flex gap-1"
52
+ }
53
+ )
54
+ ] }),
55
+ /* @__PURE__ */ e("div", { className: "relative mt-4 flex w-full grow justify-center overflow-hidden rounded-t-2xl bg-lightGray px-7 pt-7", children: /* @__PURE__ */ e(
56
+ u,
57
+ {
58
+ ariaLabel: "Instruction demonstrating the update process",
59
+ className: "shadow-14-50-98 rounded-t-[20px] border-8 border-b-0 border-white",
60
+ poster: x,
61
+ children: /* @__PURE__ */ e("source", { src: g, type: "video/mp4" })
62
+ }
63
+ ) }),
64
+ /* @__PURE__ */ e(
65
+ f,
66
+ {
67
+ "aria-label": s.close,
68
+ className: "mt-4 w-full",
69
+ onClick: d,
70
+ size: "lg",
71
+ type: "button",
72
+ children: s.close
73
+ }
74
+ )
75
+ ] })
76
+ }
77
+ );
78
+ };
79
+ export {
80
+ k as UpdateIOSModal
81
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),l=require("./cdn-BonUyxCA.cjs"),c=require("./install-package-Dkv3eM_d.cjs"),d=require("./Dialog-BRBYK08a.cjs"),u=require("./utils.cjs"),m=l.cdn("/video/update-ios-poster.png"),p=l.cdn("/video/update-ios.h264.mp4"),x=({open:r,onClose:t})=>{const{modal:s}=c.useMessages();o.useEffect(()=>{let a;return r&&(a=setTimeout(()=>{document.querySelector("video")?.play()},600)),()=>{clearTimeout(a)}},[r]);const i=o.useCallback(a=>{a||t()},[t]),n=o.useCallback(()=>{u.trackModalEvent("update_ios","click","close"),t()},[t]);return e.jsx(d.Dialog,{"aria-labelledby":"update-ios",open:r,onOpenChange:i,showCloseButton:!1,onBackClick:t,children:e.jsxs("div",{className:"flex h-full flex-col items-center justify-center",children:[e.jsx("h2",{className:"mt-3 text-center font-sans text-3xl font-medium",id:"update-ios",children:s.updateIos.title}),e.jsxs("section",{className:"mt-2",children:[e.jsx("p",{className:"mt-3 text-center font-sans text-xs font-normal",children:s.updateIos.description}),e.jsx(l.Breadcrumbs,{breadcrumbs:s.updateIos.breadcrumbs,className:"mt-2 flex gap-1"})]}),e.jsx("div",{className:"relative mt-4 flex w-full grow justify-center overflow-hidden rounded-t-2xl bg-lightGray px-7 pt-7",children:e.jsx(l.VideoAutoplay,{ariaLabel:"Instruction demonstrating the update process",className:"shadow-14-50-98 rounded-t-[20px] border-8 border-b-0 border-white",poster:m,children:e.jsx("source",{src:p,type:"video/mp4"})})}),e.jsx(c.Button,{"aria-label":s.close,className:"mt-4 w-full",onClick:n,size:"lg",type:"button",children:s.close})]})})};exports.UpdateIOSModal=x;