@flows/react
Version:
Flows React SDK – Build native product growth experiences, your way
350 lines (315 loc) • 18 kB
JavaScript
"use client"
import{a as i,b as d,d as I,e as B,g as F,h as M,i as O,j as P,l as U,m as z,n as N,r as J,s as X,u as v}from"./chunk-PN47OKM4.mjs";import{useState as S,useCallback as Ve}from"react";var H=`:root {
--flows-debug-bg-default: #ffffff;
--flows-debug-bg-subtle: #f9fafc;
--flows-debug-bg-hover: #ebeef3;
--flows-debug-fg-default: #15181c;
--flows-debug-fg-subtle: #6b727b;
--flows-debug-border: 1px solid #d9dde2;
--flows-debug-fg-success: #188635;
--flows-debug-fg-error: #cf2320;
--flows-debug-overlay: hsla(0, 0%, 100%, 0.2);
--flows-debug-overlay-hover: hsla(0, 0%, 100%, 0.3);
--flows-debug-small-shadow: 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 4px 4px -1px rgba(0, 0, 0, 0.02);
--flows-debug-shadow:
0px 3px 8px rgba(0, 0, 0, 0.07), 0px 2px 5px rgba(0, 0, 0, 0.07),
0px 1px 1px rgba(0, 0, 0, 0.07);
--flows-debug-system-font:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
--flows-debug-mono-font:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
}
.dark {
--flows-debug-bg-default: #15181c;
--flows-debug-bg-subtle: #22262d;
--flows-debug-bg-hover: #2b313a;
--flows-debug-fg-default: #f9fafc;
--flows-debug-fg-subtle: #8b929b;
--flows-debug-border: 1px solid #353c46;
--flows-debug-fg-success: #33a449;
--flows-debug-fg-error: #ea6369;
--flows-debug-overlay: hsla(0, 0%, 100%, 0.1);
--flows-debug-overlay-hover: hsla(0, 0%, 100%, 0.2);
--flows-debug-small-shadow:
0px 4px 4px -1px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
--flows-debug-shadow:
0px 3px 8px rgba(0, 0, 0, 0.188), 0px 2px 5px rgba(0, 0, 0, 0.188),
0px 1px 1px rgba(0, 0, 0, 0.188);
}
@keyframes flows-debug-fadeIn {
from {
opacity: 0;
scale: 0.5;
}
80% {
opacity: 1;
scale: 1.2;
}
to {
scale: 1;
}
}
.flows-debug {
position: fixed;
z-index: 10000;
color: var(--flows-debug-fg-default);
}
:where(.flows-debug) hr {
border-top: var(--flows-debug-border);
}
:where(.flows-debug) a {
color: inherit;
text-decoration: none;
}
:where(.flows-debug) p {
margin: 0;
}
.flows-debug-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
color: var(--flows-debug-fg-default);
}
.flows-debug-top-left {
top: 16px;
left: 16px;
}
.flows-debug-bottom-right {
bottom: 16px;
right: 16px;
}
.flows-debug-bottom-left {
bottom: 16px;
left: 16px;
}
.flows-debug-top-right {
top: 16px;
right: 16px;
}
.flows-debug-menu {
background: var(--flows-debug-bg-default);
display: flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
border-radius: 99px;
margin: 0;
cursor: pointer;
border: var(--flows-debug-border);
box-shadow: var(--flows-debug-small-shadow);
animation: flows-debug-fadeIn 120ms ease-out;
}
.flows-debug-menu-inset {
color: var(--flows-debug-fg-default);
transition: background 120ms ease-in-out;
padding: 7px;
border-radius: 99px;
display: flex;
}
.flows-debug-menu:hover .flows-debug-menu-inset {
background: var(--flows-debug-bg-hover);
}
.flows-debug-menu-error {
background: var(--flows-debug-fg-error) !important;
}
.flows-debug-menu-inset-error {
background: var(--flows-debug-overlay) !important;
color: var(--flows-debug-bg-default) !important;
&:hover {
background: var(--flows-debug-overlay-hover) !important;
}
}
.flows-debug-popover {
position: absolute;
margin-top: 8px;
margin-bottom: 8px;
background: var(--flows-debug-bg-default);
border: var(--flows-debug-border);
border-radius: 8px;
box-shadow: var(--flows-debug-shadow);
font-size: 13px;
font-family: var(--flows-debug-system-font);
}
.flows-debug-popover-wide {
width: 360px;
}
.flows-debug-popover-narrow {
width: 260px;
}
.flows-debug-top-right .flows-debug-popover {
right: 0;
top: 100%;
}
.flows-debug-bottom-right .flows-debug-popover {
right: 0;
bottom: 100%;
}
.flows-debug-top-left .flows-debug-popover {
left: 0;
top: 100%;
}
.flows-debug-bottom-left .flows-debug-popover {
left: 0;
bottom: 100%;
}
.flows-debug-section-header {
display: flex;
gap: 4px;
align-items: center;
border-bottom: var(--flows-debug-border);
padding: 12px 16px 12px 8px;
}
.flows-debug-section-label {
font-weight: 600;
}
.flows-debug-section-content {
padding: 16px;
}
.flows-debug-code-block {
padding: 8px;
border-radius: 4px;
background: var(--flows-debug-bg-subtle);
font-size: 12px;
font-family: var(--flows-debug-mono-font);
overflow-x: auto;
max-height: 480px;
border: var(--flows-debug-border);
scrollbar-width: thin;
scrollbar-color: var(--flows-debug-fg-subtle) transparent;
}
.flows-debug-inline-code {
font-family: var(--flows-debug-mono-font);
font-size: 12px;
}
.flows-debug-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 6px;
border-radius: 6px;
transition: background 120ms ease-in-out;
}
.flows-debug-item-interactive {
cursor: pointer;
&:hover {
background: var(--flows-debug-bg-hover);
}
}
.flows-debug-item-info {
font-size: 12px;
color: var(--flows-debug-fg-subtle);
margin-top: 2px;
}
.flows-debug-item-label {
font-weight: 600;
}
.flows-debug-item-secondary {
color: var(--flows-debug-fg-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flows-debug-item-list {
display: flex;
flex-direction: column;
padding: 6px;
}
.flows-debug-info-line {
margin-bottom: 4px;
}
.flows-debug-button-secondary {
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
border: var(--flows-debug-border);
cursor: pointer;
transition: all 80ms ease-in-out;
flex-shrink: 0;
&:hover {
background-color: var(--flows-debug-bg-hover);
}
&:active {
background-color: var(--flows-debug-bg-default);
}
}
.flows-debug-section-close {
padding: 4px;
border-radius: 6px;
width: 24px;
height: 24px;
&:hover {
background-color: var(--flows-debug-bg-hover);
}
}
.flows-debug-select-wrap {
position: relative;
svg {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}
.flows-debug-select {
all: unset;
border-radius: 6px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
border: var(--flows-debug-border);
padding: 4px 8px;
padding-right: 28px;
cursor: pointer;
transition: all 80ms ease-in-out;
&:focus {
outline: none;
}
&:hover {
background-color: var(--flows-debug-bg-hover);
}
}
.flows-debug-shortcut-list {
display: flex;
gap: 4px;
}
.flows-debug-shortcut {
display: flex;
align-items: center;
font-size: 12px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
min-width: 20px;
height: 20px;
padding: 0 4px;
border-radius: 4px;
justify-content: center;
border: var(--flows-debug-border);
}
.flows-debug-validation-item {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.flows-debug-validation-valid {
color: var(--flows-debug-fg-success);
flex-shrink: 0;
}
.flows-debug-validation-invalid {
color: var(--flows-debug-fg-error);
flex-shrink: 0;
}
.flows-debug-print-button {
margin-top: 8px;
}
`;import{clsx as L}from"clsx";import{jsx as T}from"react/jsx-runtime";var Z=e=>T("svg",d(i({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"currentColor",viewBox:"0 0 40 40"},e),{children:T("path",{d:"M38.02 12.24C36.7 10 34.87 8.22 32.56 6.94C30.38 5.74 27.83 5.08 25 5H16C12.97 5 9.76 5.66 7.45 6.94C5.14 8.22 3.3 10 1.99 12.23C0.67 14.46 0 17.08 0 20.02C0 22.96 0.67 25.53 1.99 27.76C3.3 29.99 5.15 31.78 7.47 33.05C9.8 34.33 12.94 35 16 35H25C27.81 34.94 30.4 34.26 32.6 33.05C34.91 31.77 36.74 29.99 38.04 27.76C39.34 25.52 40 22.92 40 20.01C40 17.1 39.33 14.48 38.02 12.24ZM30.3 19.89L27.37 22.82C26.63 23.56 25.62 24 24.58 24H19.95C18.9 24 17.9 24.39 17.16 25.13L16.12 26C13.19 28.46 8.72 26.37 8.72 22.55C8.72 21.65 9.08 20.79 9.71 20.16L12.64 17.23C13.38 16.49 14.4 16 15.45 16H20.08C21.13 16 22.12 15.66 22.86 14.92L23.79 14.09C26.65 11.53 31.2 13.5 31.29 17.34V17.5C31.29 18.4 30.94 19.26 30.3 19.89Z"})}));import{Fragment as Pe,jsx as m,jsxs as A}from"react/jsx-runtime";var K=({userProperties:e,userId:o})=>A(Pe,{children:[A("p",{className:"flows-debug-info-line",children:[m("strong",{children:"User ID:"})," ",m("code",{className:"flows-debug-inline-code",children:o})]}),m("p",{className:"flows-debug-info-line",children:m("strong",{children:"User properties:"})}),m("pre",{className:"flows-debug-code-block",children:JSON.stringify(e!=null?e:{},null,2)})]});import{Fragment as Ne,jsx as b,jsxs as C}from"react/jsx-runtime";var _=({organizationId:e,environment:o,statusItems:l})=>C(Ne,{children:[C("p",{className:"flows-debug-info-line",children:[b("strong",{children:"Organization ID:"})," ",b("code",{className:"flows-debug-inline-code",children:e||b("span",{className:"flows-debug-validation-invalid",children:"Not set"})})]}),C("p",{className:"flows-debug-info-line",children:[b("strong",{children:"Environment:"})," ",b("code",{className:"flows-debug-inline-code",children:o||b("span",{className:"flows-debug-validation-invalid",children:"Not set"})})]}),b("p",{className:"flows-debug-info-line",children:b("strong",{children:"Validation:"})}),l]});import{Fragment as Ce,jsx as w,jsxs as $}from"react/jsx-runtime";var Y=({blocks:e})=>$(Ce,{children:[$("p",{className:"flows-debug-info-line",children:[w("strong",{children:"Loaded blocks:"})," ",e.length]}),w("p",{className:"flows-debug-info-line",children:w("strong",{children:"Blocks JSON:"})}),w("pre",{className:"flows-debug-code-block",children:JSON.stringify(e,null,2)}),w("button",{className:"flows-debug-btn flows-debug-button-secondary flows-debug-print-button",onClick:()=>{console.log(e)},type:"button",children:"Print to console"})]});import{jsx as q,jsxs as ke}from"react/jsx-runtime";var f=({label:e,secondary:o,onClick:l})=>ke("button",{className:"flows-debug-btn flows-debug-item flows-debug-item-interactive",onClick:l,type:"button",children:[q("span",{className:"flows-debug-item-label",children:e}),o?q("span",{className:"flows-debug-item-secondary",children:o}):null]});import{jsx as p,jsxs as k}from"react/jsx-runtime";var Q=({userId:e,setPanelPage:o,sdkSetupValid:l,blocks:a,pathname:g,organizationId:c})=>k("div",{className:"flows-debug-popover-narrow",children:[k("div",{className:"flows-debug-item-list",children:[p(f,{label:"User",secondary:e?p("code",{className:"flows-debug-inline-code",children:e}):"Not set",onClick:()=>{o("user")}}),p(f,{label:"SDK setup",secondary:l?"Valid":p("span",{className:"flows-debug-validation-invalid",children:"Error"}),onClick:()=>{o("sdk-setup")}}),p(f,{label:"Blocks",secondary:`${a.length} loaded`,onClick:()=>{o("blocks")}}),p(f,{label:"Pathname",secondary:g,onClick:()=>{o("pathname")}})]}),p("hr",{}),k("div",{className:"flows-debug-item-list",children:[p(f,{label:"Settings",secondary:v,onClick:()=>{o("settings")}}),p("a",{href:U(c),target:"_blank",rel:"noopener noreferrer",className:"flows-debug-item flows-debug-item-interactive flows-debug-item-label",children:"Open Flows dashboard"})]})]});import{jsx as W}from"react/jsx-runtime";function j(e){return W("svg",d(i({fill:"currentColor",height:16,width:16,xmlns:"http://www.w3.org/2000/svg"},e),{children:W("path",{d:"M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"})}))}import{Fragment as Se,jsx as s,jsxs as n}from"react/jsx-runtime";var ee=({position:e,onPositionChange:o})=>n(Se,{children:[n("div",{className:"flows-debug-item",children:[n("div",{children:[s("label",{className:"flows-debug-item-label",htmlFor:"debug-panel-position",children:"Position"}),s("p",{className:"flows-debug-item-info",children:"Sets the position of the debug panel on the screen."})]}),n("div",{className:"flows-debug-select-wrap",children:[s("select",{className:"flows-debug-select",value:e,id:"debug-panel-position",onChange:a=>{let g=a.target.value;o(g)},children:M.map(a=>s("option",{value:a.value,children:a.label},a.value))}),s(j,{})]})]}),n("div",{className:"flows-debug-item",children:[n("div",{children:[s("p",{className:"flows-debug-item-label",children:"Debug panel shortcut"}),s("p",{className:"flows-debug-item-info",children:"Used to toggle the panel visibility even when debug mode is not active."})]}),n("div",{className:"flows-debug-shortcut-list",children:[s("p",{className:"flows-debug-shortcut",children:N()?"Cmd":"Ctrl"}),s("p",{className:"flows-debug-shortcut",children:N()?"Option":"Alt"}),s("p",{className:"flows-debug-shortcut",children:"Shift"}),s("p",{className:"flows-debug-shortcut",children:"F"})]})]}),n("div",{className:"flows-debug-item",children:[n("div",{children:[s("p",{className:"flows-debug-item-label",children:"Docs"}),s("p",{className:"flows-debug-item-info",children:"Learn more about the debug panel and its features."})]}),s("a",{className:"flows-debug-button-secondary",href:z,target:"_blank",rel:"noopener noreferrer",children:"Open docs"})]}),n("div",{className:"flows-debug-item",children:[n("div",{children:[s("p",{className:"flows-debug-item-label",children:"SDK version"}),s("p",{className:"flows-debug-item-info",children:"Make sure to keep your SDK up to date for the best experience."})]}),s("p",{children:v})]})]});import{jsx as oe}from"react/jsx-runtime";var se=e=>oe("svg",d(i({fill:"currentColor",height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg"},e),{children:oe("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.03 5.22032C12.1705 5.36094 12.2494 5.55157 12.2494 5.75032C12.2494 5.94907 12.1705 6.13969 12.03 6.28032L7.53003 10.7803C7.38941 10.9208 7.19878 10.9997 7.00003 10.9997C6.80128 10.9997 6.61066 10.9208 6.47003 10.7803L4.22003 8.53032C4.14634 8.46165 4.08724 8.37885 4.04625 8.28685C4.00526 8.19486 3.98322 8.09554 3.98144 7.99484C3.97966 7.89414 3.99819 7.79411 4.03591 7.70072C4.07363 7.60733 4.12977 7.5225 4.20099 7.45128C4.27221 7.38006 4.35705 7.32391 4.45043 7.28619C4.54382 7.24847 4.64385 7.22995 4.74455 7.23172C4.84526 7.2335 4.94457 7.25554 5.03657 7.29654C5.12857 7.33753 5.21137 7.39663 5.28003 7.47032L7.00003 9.19032L10.97 5.22032C11.1107 5.07987 11.3013 5.00098 11.5 5.00098C11.6988 5.00098 11.8894 5.07987 12.03 5.22032Z"})}));import{jsx as te}from"react/jsx-runtime";function le(e){return te("svg",d(i({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},e),{children:te("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}import{jsx as ae}from"react/jsx-runtime";function re(e){return ae("svg",d(i({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg"},e),{children:ae("path",{d:"M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z",fill:"currentColor"})}))}import{jsx as h,jsxs as ne}from"react/jsx-runtime";var ie=({label:e,children:o,onClose:l})=>ne("div",{className:"flows-debug-popover-wide",children:[ne("div",{className:"flows-debug-section-header",children:[h("button",{className:"flows-debug-btn flows-debug-section-close",onClick:l,type:"button",children:h(re,{})}),h("p",{className:"flows-debug-section-label",children:e})]}),h("div",{className:"flows-debug-section-content",children:o})]});import{Fragment as Le,jsx as x,jsxs as De}from"react/jsx-runtime";var de=({pathname:e})=>De(Le,{children:[x("p",{className:"flows-debug-info-line",children:x("strong",{children:"Pathname:"})}),x("p",{className:"flows-debug-code-block flows-debug-info-line",children:e}),x("p",{className:"flows-debug-info-line",children:"This pathname is used when evaluating page targeting conditions."})]});import{jsx as t,jsxs as ge}from"react/jsx-runtime";var Re=({forceOpen:e,blocksError:o,wsError:l,environment:a,organizationId:g,userId:c,userProperties:pe})=>{let[be,ue]=S(e),fe=()=>{ue(r=>!r)},[u,D]=S(),ce=()=>{D(void 0)},[V,me]=S(O()),we=Ve(r=>{me(r),localStorage.setItem(F,r)},[]),R=X(),{blocks:E}=J(),G=[{key:"organizationId",valid:g&&I.test(g)},{key:"userId",valid:!!c},{key:"environment",valid:!!a},{key:"apiError",valid:!o&&!l}],y=G.every(r=>r.valid),ve=u==="user"?t(K,{userProperties:pe,userId:c}):u==="sdk-setup"?t(_,{organizationId:g,environment:a,statusItems:G.map(r=>{let he=r.valid?t(se,{className:"flows-debug-validation-valid"}):t(le,{className:"flows-debug-validation-invalid"}),xe=P[r.key][B(r.valid)];return ge("div",{className:"flows-debug-validation-item",children:[he," ",t("p",{children:xe})]},r.key)})}):u==="blocks"?t(Y,{blocks:E}):u==="pathname"?t(de,{pathname:R}):u==="settings"?t(ee,{position:V,onPositionChange:we}):t(Q,{pathname:R,userId:c,setPanelPage:D,sdkSetupValid:y,blocks:E,organizationId:g});return ge("div",{className:L("flows-debug",`flows-debug-${V}`),children:[t("button",{className:L("flows-debug-btn","flows-debug-menu",!y&&"flows-debug-menu-error"),type:"button",onClick:fe,children:t("div",{className:L("flows-debug-menu-inset",!y&&"flows-debug-menu-inset-error"),children:t(Z,{})})}),be?t("div",{className:"flows-debug-popover",children:t(Ee,{page:u,onClose:ce,children:ve})}):null,t("style",{children:H})]})},Ee=({children:e,page:o,onClose:l})=>o?t(ie,{label:P.title[o],onClose:l,children:e}):e,Bo=Re;export{Bo as default};