userflow.js-self-hosted 0.1.1016424 → 0.1.1016437
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.
- package/BuilderBar.js +1 -1
- package/ChecklistApp.js +1 -1
- package/ChecklistUI.js +1 -1
- package/DebuggerUI.js +1 -1
- package/EmbedApp.js +1 -1
- package/FlowApp.js +2 -2
- package/FlowChrome.js +2 -2
- package/LauncherApp.js +1 -1
- package/ResourceCenterAssistantChat.js +1 -1
- package/SmartFlowRecordingApp.js +2 -0
- package/builder-ui-frame.css +122 -0
- package/flow-condition-types.js +1 -1
- package/hash.txt +1 -1
- package/package.json +1 -1
- package/roots.js +1 -1
- package/stylesheets.js +1 -1
- package/ui.js +2 -2
- package/use-selector-element-monitoring.js +2 -2
- package/userflow.js +3 -3
- package/vendor.core-js.js +1 -1
- package/vendor.fortawesome.pro-light-svg-icons.js +1 -1
- package/vendor.uuid.js +1 -1
package/BuilderBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as t}from"./vendor.react.js";import{F as I}from"./Frame.js";import{S as v}from"./logomark.js";import{o as F}from"./vendor.obj-str.js";import{
|
|
1
|
+
import{R as e,r as t}from"./vendor.react.js";import{F as I}from"./Frame.js";import{S as v}from"./logomark.js";import{o as F}from"./vendor.obj-str.js";import{a as L,b as k}from"./vendor.fortawesome.pro-light-svg-icons.js";import{H as b}from"./userflow.js";import{a as B,D}from"./stylesheets.js";import{u as N}from"./use-window-resize.js";import"./vendor.core-js.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[n]="e686a895-8869-4a20-92c7-501b684a98a0",r._sentryDebugIdIdentifier="sentry-dbid-e686a895-8869-4a20-92c7-501b684a98a0")}catch{}})();const _=new URL("builder-ui-host.css",import.meta.url).href,H=new URL("builder-ui-frame.css",import.meta.url).href,p="builderBarPos",q=e.forwardRef(({onReadyChange:r,children:n,buttons:c},y)=>{const{loaded:h}=B(window,_),[E,S]=t.useState(!1),o=h&&E,u=t.useRef(!1);t.useEffect(()=>{o&&!u.current&&r&&(u.current=!0,r(!0))},[o,r]);const i=t.useRef(null),[s,g]=t.useState(null),[l,w]=t.useState(()=>b.getItem(p)==="top"?"top":"bottom"),R=t.useCallback(a=>{w(a),b.setItem(p,a)},[]),d=t.useRef(0),f=t.useCallback(()=>{const a=i.current;if(!a||!s||!o)return;const m=s.clientHeight;m!==d.current&&(d.current=m,a.style.setProperty("height",m+"px","important"))},[o,s]);return t.useLayoutEffect(()=>{f()}),N(f),t.useImperativeHandle(y,()=>({getFrame:()=>i.current,getRootEl:()=>s}),[s]),e.createElement(e.Fragment,null,e.createElement(I,{className:F({"userflowjs-builder-bar":!0,"userflowjs-builder-bar--top":l==="top"}),style:{visibility:o?void 0:"hidden",animation:o?void 0:"none"},elRef:i,stylesheet:H,onStylesheetsLoad:S,title:"Builder bar"},o&&e.createElement("div",{className:"root",ref:g},e.createElement("div",{className:"logomark"},e.createElement(v,null)),e.createElement("div",{className:"main"},n),e.createElement("div",{className:"buttons"},c,e.createElement("button",{key:l,className:"btn btn--square btn--plain-on-dark",onClick:()=>R(l==="top"?"bottom":"top")},e.createElement(D,{icon:l==="top"?L:k,size:20}))))))});export{q as B};
|
|
2
2
|
//# sourceMappingURL=BuilderBar.js.map
|
package/ChecklistApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as s,R as c}from"./vendor.react.js";import{
|
|
1
|
+
import{r as s,R as c}from"./vendor.react.js";import{N as b,L as R,q as F,m as B}from"./userflow.js";import{F as N,B as _}from"./FlowChrome.js";import{i as D,u as C}from"./client-context.js";import{f as P,w as j,C as U,S as A}from"./flow-host.styl.js";import{a as H,D as O,u as I}from"./stylesheets.js";import{F as Z}from"./Frame.js";import{o as z}from"./vendor.obj-str.js";import{z as W}from"./roots.js";import{o as X}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.core-js.js";import{u as M}from"./vendor.react-i18next.js";import{C as Y}from"./ChecklistUI.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./use-selector-element-monitoring.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./use-window-resize.js";import"./logomark.js";import"./vendor.canvas-confetti.js";import"./vendor.i18next.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="c23218c3-df54-4231-87ea-86b96087a8d4",t._sentryDebugIdIdentifier="sentry-dbid-c23218c3-df54-4231-87ea-86b96087a8d4")}catch{}})();const G=new URL("checklist-launcher-frame.css",import.meta.url).href,K=({position:t,theme:e,onClick:l,onVisibleChange:o,buttonRef:a,text:u,uncompletedCount:r})=>{const d=t||"absolute",{i18n:n}=M(),m=n.dir(),{loaded:i}=H(window,P,e),[h,k]=s.useState(!1),f=i&&h;s.useEffect(()=>{o&&o(f)},[o,f]);const w=s.useRef(null),L=s.useRef(0),[v,S]=s.useState(null);s.useLayoutEffect(()=>{const E=w.current;if(!E||!v)return;const y=v.clientWidth;y!==L.current&&(L.current=y,E.style.setProperty("width",W(y)+"px","important"),E.style.setProperty("height",e.checklistLauncherHeight+"px","important"))});const p=e.checklistLauncherPlacement,x=p===b.TOP_LEFT||p===b.TOP_RIGHT,g=p===b.TOP_LEFT||p===b.BOTTOM_LEFT,T={zIndex:d==="fixed"?e.checklistZIndex!=null?e.checklistZIndex:j(U):1,top:x?e.checklistLauncherY+"px":void 0,bottom:x?void 0:e.checklistLauncherY+"px",[m==="ltr"?"left":"right"]:g?e.checklistLauncherX+"px":void 0,[m==="ltr"?"right":"left"]:g?void 0:e.checklistLauncherX+"px",height:e.checklistLauncherHeight+"px",borderRadius:e.checklistLauncherBorderRadius+"px",position:f?void 0:"absolute",visibility:f?void 0:"hidden",animation:f?void 0:"none"};return c.createElement(Z,{elRef:w,testId:"checklist-launcher-app",className:z({"userflowjs-checklist-launcher":!0,[`userflowjs-checklist-launcher--position-${d}`]:!0}),style:T,stylesheet:G,theme:e,onStylesheetsLoad:k,title:"Checklist launcher"},c.createElement("button",{ref:a,className:"userflowjs-checklist-launcher-frame-root",onClick:l},c.createElement("div",{ref:S,className:"userflowjs-checklist-launcher-content"},c.createElement("div",{className:"userflowjs-checklist-launcher-text"},u||"Get Started"),c.createElement("div",{"data-testid":"checklist-launcher-uncompleted-count",className:"userflowjs-checklist-launcher-uncompleted-count"},r===0?c.createElement(O,{icon:X}):r,c.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},ge=({session:t,checklistExpanded:e})=>{const{version:l}=t,o=l.checklist,a=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;s.useEffect(()=>{D.changeLanguage(a)},[a]);const[u,r]=s.useState(!1);return e?c.createElement(q,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):o.launcherEnabled?c.createElement(V,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):null},q=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(null),{version:r}=t,d=r.checklist,n=I(r.theme),m=s.useMemo(()=>({...n,avatarType:R.NONE,bubblePlacement:n.checklistPlacement,bubbleX:n.checklistX,bubbleY:n.checklistY,bubbleWidth:n.checklistWidth}),[n]);return s.useEffect(()=>{const i=a?.ownerDocument.defaultView;if(!i)return;const h=k=>{k.key==="Escape"&&(l(!0),o.hideChecklist())};return i.addEventListener("keydown",h),()=>i.removeEventListener("keydown",h)},[a,l,o]),c.createElement(A,null,c.createElement(N,{company:t.flow.company,theme:m,position:"fixed",stepAppearance:F.BUBBLE,zIndex:n.checklistZIndex,autoHide3pEnabled:!0,backgroundImageUrl:d.backgroundAsset&&d.backgroundAsset.assetUrl,bubbleFrameRootRef:u},c.createElement("div",{role:"dialog","aria-label":"Checklist"},c.createElement(Y,{session:t,initialAutoFocus:e}),c.createElement(_,{draftMode:t.draftMode,minimize:i=>{l(i.detail===0),o.hideChecklist()}}))))},V=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(!1),[r,d]=s.useState(null),{version:n}=t,m=n.checklist,i=I(n.theme);return s.useEffect(()=>{!a||!r||!e||r.focus()},[o,r,a,e]),c.createElement(K,{position:"fixed",theme:i,onClick:h=>{l(h.detail===0),o.showChecklist()},onVisibleChange:u,buttonRef:d,text:m.launcherText,uncompletedCount:B(t)})};export{ge as ChecklistApp,ge as default};
|
|
2
2
|
//# sourceMappingURL=ChecklistApp.js.map
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as l}from"./vendor.react.js";import{E as I,
|
|
1
|
+
import{R as e,r as l}from"./vendor.react.js";import{E as I,H as _}from"./userflow.js";import{u as v}from"./client-context.js";import"./vendor.core-js.js";import{u as T}from"./vendor.react-i18next.js";import{o as F}from"./vendor.obj-str.js";import{D as C}from"./stylesheets.js";import{c as P,d as L}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{h as M,a as x,f as B,R as H}from"./use-selector-element-monitoring.js";import{g}from"./flow-condition-types.js";import{K as $,N as K}from"./vendor.fortawesome.pro-regular-svg-icons.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new Error().stack;s&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[s]="5c11cf44-a9d3-4e96-8472-c2dd1d22cfc0",t._sentryDebugIdIdentifier="sentry-dbid-5c11cf44-a9d3-4e96-8472-c2dd1d22cfc0")}catch{}})();const W=e.forwardRef(({elProps:t,onClick:s,onCheckmarkClick:n,completed:o,disabled:u,name:c,text:b,active:m,htmlAttributes:a,children:i},w)=>{const d=l.useRef(o);return e.createElement("button",{...t,ref:w,"data-testid":"bubble-task",tabIndex:s?0:-1,className:F({"userflowjs-bubble-task":!0,"userflowjs-bubble-task--completed":!!o,"userflowjs-bubble-task--just-completed":!d.current&&!!o,"userflowjs-bubble-task--disabled":!o&&!!u,"userflowjs-bubble-task--clickable":!!s,"userflowjs-bubble-task--active":!!m}),onClick:s,...a},e.createElement("div",{className:"userflowjs-bubble-task__checkmark",onClick:n},o&&e.createElement(C,{icon:P})),e.createElement("div",{className:"userflowjs-bubble-task__content"},e.createElement("div",{className:"userflowjs-bubble-task__name"},c),e.createElement("div",{className:"userflowjs-bubble-task__text"},b)),e.createElement("div",{className:"userflowjs-bubble-task__arrow"},!o&&e.createElement("div",{className:"userflowjs-rtl-mirrored"},e.createElement(C,{icon:L}))),i)}),z=({task:t,previousTasksCompleted:s})=>{const n=v(),{session:o}=S(),u=o.version.checklist,[c,b]=l.useState(()=>n.taskIsUnacked(t.cvid));l.useEffect(()=>{if(!c)return;const d=window.setTimeout(()=>b(!1),500);return()=>window.clearTimeout(d)},[c]);const m=o.taskCompletions.some(({taskCvid:d})=>d===t.cvid),a=!c&&m;l.useEffect(()=>{a&&n.ackCompletedTask(t.cvid)},[n,a,t.cvid]);const i=u.completeInOrder&&!s,w=i||t.actions.length===0&&a?void 0:()=>{n.send({kind:"ClickChecklistTask",sessionId:o.id,taskCvid:t.cvid},{batch:!0}),t.actions.length>0&&(a||!t.completesOnClick)&&n.hideChecklist(),M(n,o,t.actions)};return e.createElement(W,{onClick:w,name:e.createElement(x,{doc:t.name,lookupAttribute:g(o.data)}),text:e.createElement(x,{doc:t.text,lookupAttribute:g(o.data)}),completed:a,disabled:i})},G=({completedCount:t,taskCount:s})=>{const n=s===0?0:Math.min(100,Math.round(t/s*100));return e.createElement("div",{className:"userflowjs-bubble-checklist-progress"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-bg"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")),e.createElement("div",{className:"userflowjs-bubble-checklist-progress-fill",style:{width:`${n}%`}},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")))},D=5e3,J=({active:t,onComplete:s})=>{const n=l.useRef(null);return l.useEffect(()=>{if(!t||!n.current)return;n.current.style.width="0%",n.current.offsetWidth,n.current.style.transition=`width ${D}ms linear`,n.current.style.width="100%";const o=setTimeout(s,D);return()=>clearTimeout(o)},[t,s]),e.createElement("div",{className:"userflowjs-bubble-progress--default userflowjs-bubble-progress-container--checklist"},t&&e.createElement("div",{className:"userflowjs-bubble-progress-background--checklist"}),e.createElement("div",{className:"userflowjs-bubble-progress__fill userflowjs-bubble-progress-fill--checklist",ref:n}))},Q=()=>{const{t}=T(),s=v(),n=S(),{session:o}=n,{version:u}=o,c=u.checklist,{dispatch:b}=U(),m=o.taskCompletions.length,a=c.tasks.length,i=m===a,w=l.useCallback(()=>{s.endFlow(o,{endReason:I.USER_CLOSED})},[s,o]);let d=!0,N=c.tasks,h=[],p=n.currentSectionName,y=!1;if(c.sectionsEnabled){let f=null;const k=Array.from(c.tasks).sort((r,E)=>r.sectionName.localeCompare(E.sectionName));for(const r of k)r.sectionName!==f&&(h.push(r.sectionName),f=r.sectionName);(!p||!h.includes(p))&&(p=h[0]),N=k.filter(r=>r.sectionName===p),y=N.some(r=>{const E=o.taskCompletions.some(({taskCvid:O})=>O===r.cvid);return r.blocksNextSection&&!E})}const j=p==null?-1:h.indexOf(p),R=f=>{const k=j+f;if(k>=0&&k<=h.length-1){const r=h[k];_.setItem("currentChecklistSectionName:"+o.id,r),b({kind:"setCurrentSection",sectionName:r})}};return e.createElement(e.Fragment,null,!B(c.content)&&e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement(H,{doc:c.content,lookupAttribute:g(o.data)})),e.createElement(G,{completedCount:m,taskCount:a}),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-name"},p||"First section"),e.createElement("div",{className:"userflowjs-bubble-tasks"},N.map(f=>{const k=d;return o.taskCompletions.some(({taskCvid:E})=>E===f.cvid)||(d=!1),e.createElement(z,{key:f.id,task:f,previousTasksCompleted:k})})),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-buttons"},e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>R(-1),disabled:j<=0},e.createElement(C,{icon:$}),e.createElement("span",null,t("checklist.previousSection"))),e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>R(1),disabled:j>=h.length-1||y},e.createElement("span",null,t("checklist.nextSection")),e.createElement(C,{icon:K}))),e.createElement("div",{className:"userflowjs-bubble-dismiss-row userflowjs-bubble-dismiss-row--checklist"},u.closeDisabled?e.createElement("div",{className:"userflowjs-bubble-checklist-dismiss-button-placeholder"}):e.createElement("button",{className:F({"userflowjs-bubble-dismiss-button":!0,"userflowjs-bubble-dismiss-button--completed":i}),onClick:()=>i?w():b({kind:"showClose"})},t("checklistDismiss.button")),c.autoDismissEnabled&&e.createElement(J,{active:i,onComplete:w})))},V=()=>{const{t}=T(),s=v(),{dispatch:n}=U(),{session:o}=S();return e.createElement("div",{role:"alert"},e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("p",null,e.createElement("b",null,t("checklistDismiss.title")))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>s.endFlow(o,{endReason:I.USER_CLOSED})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.yes"))),e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:()=>n({kind:"showFlow"})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.cancel")))))};function X(t){const s=t?.querySelector(".userflowjs-bubble-task--clickable:not(.userflowjs-bubble-task--completed)")||t?.querySelector(".userflowjs-bubble-task--clickable")||t?.querySelector('button:not([tabIndex="-1"])');s&&typeof s.focus=="function"&&s.focus()}const be=({session:t,initialAutoFocus:s})=>{const n=v(),o=l.useRef(null),[u,c]=l.useReducer(Z,void 0,()=>({...Y,session:t,currentSectionName:_.getItem("currentChecklistSectionName:"+t.id),autoFocusRequested:!!s})),{session:b,contentType:m}=u;l.useEffect(()=>{b!==t&&c({kind:"updateSession",session:t})},[b,t]);const a=l.useMemo(()=>({dispatch:c}),[c]);return l.useEffect(()=>{if(!u.autoFocusRequested)return;const i=o.current;i&&X(i),c({kind:"autoFocused"})},[n,u.autoFocusRequested]),e.createElement(A.Provider,{value:a},e.createElement(q.Provider,{value:u},e.createElement("div",{ref:o},m==="close"?e.createElement(V,null):e.createElement(Q,null))))},Y={contentType:"flow"};function Z(t,s){switch(s.kind){case"updateSession":return{...t,session:s.session};case"showFlow":return{...t,contentType:"flow",autoFocusRequested:!0};case"showClose":return{...t,contentType:"close",autoFocusRequested:!0};case"setCurrentSection":return{...t,currentSectionName:s.sectionName};case"autoFocused":return{...t,autoFocusRequested:!1}}}const A=l.createContext(null),q=l.createContext(null);function U(){return l.useContext(A)}function S(){return l.useContext(q)}export{be as C,X as f};
|
|
2
2
|
//# sourceMappingURL=ChecklistUI.js.map
|
package/DebuggerUI.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["flow-condition-types.js","userflow.js","vendor.core-js.js","vendor.phoenix.js","vendor.uuid.js","vendor.date-fns.js","vendor.babel.runtime.js","roots.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{r as i,R as e}from"./vendor.react.js";import{r as ue}from"./vendor.react-dom.js";import{u as P,U as Re}from"./client-context.js";import{d as ne,a as L,b as O,c as U,e as H,f as u,A as de,W as T,g as R,h as N,S as Ue,i as Ae,_ as Me,j as ke}from"./userflow.js";import{F as Ve}from"./Frame.js";import{S as He}from"./logomark.js";import{f as A,a as Be,b as re,c as Ee,d as I,e as qe,g as he,h as se,i as Ge,j as We,k as be,l as je,m as ze,n as F,o as D,p as Ye,q as ve,r as Xe,s as Ke,t as $e,u as Ze,v as Qe,w as Je,x as M,y as et,z as _e,A as tt,B as nt,C as rt,D as st,E as at,F as ot,G as lt,H as $,I as it}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{f as ct,a as ut}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as d}from"./stylesheets.js";import{o as p}from"./vendor.obj-str.js";import"./vendor.core-js.js";import{_ as ee,l as we}from"./vendor.lodash.js";import{F as G}from"./vendor.fortawesome.react-fontawesome.js";import{P as Ce}from"./Popover.js";import"./vendor.react-day-picker.js";import{f as ae,p as dt,a as mt}from"./vendor.date-fns.js";import{m as pt}from"./vendor.memoize-one.js";import{c as gt}from"./roots.js";import"./vendor.object-assign.js";import"./vendor.scheduler.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-i18next.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./flow-condition-types.js";import"./vendor.fortawesome.fontawesome-svg-core.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[n]="19306ccd-5a34-4dc5-a73c-9e32c19b1766",t._sentryDebugIdIdentifier="sentry-dbid-19306ccd-5a34-4dc5-a73c-9e32c19b1766")}catch{}})();const ft=new URL("debugger.css",import.meta.url).href,ye=i.createContext(void 0),x=()=>i.useContext(ye),Ne=i.createContext(null),oe=()=>i.useContext(Ne),xe=i.createContext({debuggerClientConditions:new Map,meta:void 0,buildId:void 0}),k=()=>i.useContext(xe),B={verifySetup:{name:"Verify setup",icon:A},checkAutoStart:{name:"Check auto-start",icon:Be},currentUser:{name:"Current user",icon:re}},Se=i.createContext(void 0),Et=({children:t})=>{const n=P(),[s,r]=i.useState(n.getSessionStorageState().debuggerApp?.selectedTab??"verifySetup");return i.useEffect(()=>{n.setSessionStorageState(a=>!a.debuggerApp||!a.debuggerApp.x?a:{...a,debuggerApp:{...a.debuggerApp,selectedTab:s}}),ne("Debugger Route changed to",s)},[s]),e.createElement(Se.Provider,{value:{debuggerRoute:s,setDebuggerRoute:r}},t)},le=()=>{const t=i.useContext(Se);if(t===void 0)throw new Error("useDebuggerRouteHandler must be used within a DebuggerRouteProvider");return{debuggerRoute:t.debuggerRoute,setDebuggerRoute:t.setDebuggerRoute}},ht=t=>{const n=i.useRef(null),s=oe();return i.useEffect(()=>{const r=s?.current,a=o=>{n.current&&!n.current.contains(o.target)&&t(o)};return document.addEventListener("mousedown",a),r?.contentDocument?.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a),r?.contentDocument?.removeEventListener("mousedown",a)}},[t,s,n]),n},bt=()=>e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M18.4393 5.56066C18.158 5.27936 18 4.89782 18 4.5C18 4.10218 18.158 3.72064 18.4393 3.43934C18.7206 3.15804 19.1022 3 19.5 3C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5C21 4.89782 20.842 5.27936 20.5607 5.56066C20.2794 5.84196 19.8978 6 19.5 6C19.1022 6 18.7206 5.84196 18.4393 5.56066Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 5.56066C3.15804 5.27936 3 4.89782 3 4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3C4.89782 3 5.27936 3.15804 5.56066 3.43934C5.84196 3.72064 6 4.10218 6 4.5C6 4.89782 5.84196 5.27936 5.56066 5.56066C5.27936 5.84196 4.89782 6 4.5 6C4.10218 6 3.72064 5.84196 3.43934 5.56066Z",fill:"#537388"}),e.createElement("path",{d:"M10.9393 13.0607C10.658 12.7794 10.5 12.3978 10.5 12C10.5 11.6022 10.658 11.2206 10.9393 10.9393C11.2206 10.658 11.6022 10.5 12 10.5C12.3978 10.5 12.7794 10.658 13.0607 10.9393C13.342 11.2206 13.5 11.6022 13.5 12C13.5 12.3978 13.342 12.7794 13.0607 13.0607C12.7794 13.342 12.3978 13.5 12 13.5C11.6022 13.5 11.2206 13.342 10.9393 13.0607Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 20.5607C3.15804 20.2794 3 19.8978 3 19.5C3 19.1022 3.15804 18.7206 3.43934 18.4393C3.72064 18.158 4.10218 18 4.5 18C4.89782 18 5.27936 18.158 5.56066 18.4393C5.84196 18.7206 6 19.1022 6 19.5C6 19.8978 5.84196 20.2794 5.56066 20.5607C5.27936 20.842 4.89782 21 4.5 21C4.10218 21 3.72064 20.842 3.43934 20.5607Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 13.0607C3.15804 12.7794 3 12.3978 3 12C3 11.6022 3.15804 11.2206 3.43934 10.9393C3.72064 10.658 4.10218 10.5 4.5 10.5C4.89782 10.5 5.27936 10.658 5.56066 10.9393C5.84196 11.2206 6 11.6022 6 12C6 12.3978 5.84196 12.7794 5.56066 13.0607C5.27936 13.342 4.89782 13.5 4.5 13.5C4.10218 13.5 3.72064 13.342 3.43934 13.0607Z",fill:"#537388"}),e.createElement("path",{d:"M10.9393 5.56066C10.658 5.27936 10.5 4.89782 10.5 4.5C10.5 4.10218 10.658 3.72064 10.9393 3.43934C11.2206 3.15804 11.6022 3 12 3C12.3978 3 12.7794 3.15804 13.0607 3.43934C13.342 3.72064 13.5 4.10218 13.5 4.5C13.5 4.89782 13.342 5.27936 13.0607 5.56066C12.7794 5.84196 12.3978 6 12 6C11.6022 6 11.2206 5.84196 10.9393 5.56066Z",fill:"#537388"})),vt={prefix:"far",iconName:"custom-hand-pointer-slash",icon:[641,512,[],"???","M185.554191,59.5126699 C189.248662,26.0794907 217.382589,0 251.429,0 C287.979,0 317.715,30.056 317.715,67 L317.715,140.634 C338.128,137.776 359.183,144.576 374.31,160.263 C401.503,147.416 434.689,154.593 454.182,179.361 C497.375,162.727 544,195.156 544,242 L544,326 C544,330.296189 543.590626,334.580726 542.780274,338.796073 L495.999,302.221942 L495.999,242 C495.999,216.84 459.428,216.879 459.428,242 C459.428,250.836 452.265,258 443.428,258 L439.435556,258 L420.622383,243.291649 C420.588346,242.865584 420.571,242.434817 420.571,242 L420.571,221 C420.571,197.943344 389.858993,196.049429 384.724023,215.225903 L269.713,125.308981 L269.713,67 C269.713,41.84 233.142,41.88 233.142,67 L233.142,96.717359 L185.554191,59.5126699 Z M162.172457,223.995642 L233.142,279.479508 L233.142,308.493 C233.142,324.063 213.106,330.402 204.111,317.776 L176.985,279.697 C162.585,259.485 133.185,282.08 147.591,302.303 L257.303,456.303 C260.737,461.122 266.231,464 272,464 L450.285,464 C455.041109,464 459.427079,462.119816 462.713129,458.957818 L500.616335,488.590478 C488.331086,503.061811 470.146238,512 450.286,512 L272,512 C250.741,512 230.632,501.59 218.209,484.154 L108.51,330.153 C87.267,300.334 93.705,258.796 123.06,237.001 C134.952446,228.171597 148.664261,223.998532 162.172457,223.995642 Z M272.143,309.970422 L306.143,336.551563 L306.143,400 C306.143,408.837 299.875,416 292.143,416 L286.143,416 C278.41,416 272.143,408.837 272.143,400 L272.143,309.970422 Z M347.571,368.939901 L381.571,395.521042 L381.571,400 C381.571,408.837 375.303,416 367.571,416 L361.571,416 C353.839,416 347.571,408.837 347.571,400 L347.571,368.939901 Z M633.994211,471.020009 C640.904211,476.540009 642.014211,486.610009 636.494211,493.510009 L626.494211,506 C620.964211,512.890009 610.904211,514.010009 604.004211,508.490009 L6.00421069,40.9800088 C-0.895789309,35.4600088 -2.01578931,25.3900088 3.51421069,18.4900088 L13.5142107,6 C19.0342107,-0.899991212 29.1042107,-2.00999121 36.0042107,3.51000879 L633.994211,471.020009 Z"]},_t={CLICK:Ee,DISABLED:I,MOUSEDOWN:qe,NOT_CLICK:vt,NOT_DISABLED:A,NOT_PRESENT:he,PRESENT:se},wt={COMPLETED:A,NOT_COMPLETED:I,NOT_SEEN:he,ACTIVE:Ge,NOT_ACTIVE:We,SEEN:se},Ct={CLICK:"is clicked",DISABLED:"is disabled",MOUSEDOWN:"has mouse down on it",NOT_CLICK:"is not clicked",NOT_DISABLED:"is not disabled",NOT_PRESENT:"is not present",PRESENT:"is present"};function yt(t){return Ct[t]}const Nt={COMPLETED:"completed",NOT_COMPLETED:"not completed",NOT_SEEN:"not seen",ACTIVE:"is currently active",NOT_ACTIVE:"is not currently active",SEEN:"seen"};function xt(t){return Nt[t]}function St(t,n){let s=(n||"").toLowerCase();return(t.eventTimeOperator===O.RELATIVE_BETWEEN?t.eventRelativeValue2:t.eventRelativeValue)!==1&&(s+="s"),t.eventTimeOperator!==O.RELATIVE_GT&&(s+=" ago"),s}function Tt(t){return(t.eventFrequencyOperator===U.BETWEEN?t.eventFrequencyValue2:t.eventFrequencyValue)===1?"time":"times"}const Ot={CURRENT_USER:"by current user in any company",CURRENT_USER_CURRENT_GROUP:"by current user in current company",CURRENT_GROUP:"by any user in current company"};function Dt(t){return Ot[t]}function It(t){if(!t)return"";switch(t){case U.BETWEEN:return"between";case U.EQ:return"exactly";case U.GTE:return"at least";case U.LTE:return"at most"}}function Ft(t){if(!t)return"";switch(t){case O.ANY:return"at any point in time";case O.RELATIVE_BETWEEN:return"between";case O.RELATIVE_GT:return"in the last";case O.RELATIVE_LT:return"more than"}}const Pt={1:"Lowest",2:"Low",3:"Medium",4:"High",5:"Highest"};function Lt(t){return`${Pt[t]||String(t)} priority`}function te(t,n){switch(t){case H.DAY:return n===1?"day":"days";case H.HOUR:return n===1?"hour":"hours";case H.MINUTE:return n===1?"minute":"minutes";case H.SECOND:return n===1?"second":"seconds"}}function me(t){switch(t){case"USER":return re;case"GROUP":return ze;case"GROUP_MEMBERSHIP":return je;case"EVENT":return be}}function Rt(t){const n=t.split("/");if(n.length===1)return["USER",t];switch(n[0]){case"group":return["GROUP",n[1]];case"group_membership":return["GROUP_MEMBERSHIP",n[1]];case"event":return["EVENT",n[1]]}return console.warn("parseAttributeDefinitionFqn: Invalid attribute definition FQN",t),["USER",t]}const Ut={[L.BANNER]:"banner",[L.CHECKLIST]:"checklist",[L.FLOW]:"flow",[L.EMBED]:"embed",[L.LAUNCHER]:"launcher",[L.RESOURCE_CENTER]:"resource center"};function At(t,{title:n,plural:s}={}){let r=Ut[t];return n&&(r=ee.upperFirst(r)),s&&(r+="s"),r}const Mt=["yyyy-MM-dd","yyyy/MM/dd","MM-dd yyyy","MM/dd yyyy","MM-dd-yyyy","MM/dd/yyyy","MM-dd","MM/dd","dd MMM yyyy","dd MMMM yyyy","MMM dd yyyy","MMMM dd yyyy","dd MMM","dd MMMM","MMM dd","MMMM dd"],kt=["hh:mmaaa","hh.mmaaa","hh:mm aaa","hh.mm aaa","HH:mm","HH.mm","hhaaa","hh aaa","HH"];for(const t of Mt)for(const n of kt);const Vt="d MMM yyyy";function pe(t){if(t==null)return"";const n=Bt?t.getMinutes()===0?"h aaa":"h:mm aaa":"HH:mm";return ae(t,Vt+", "+n)}function Ht(t){if(!t)return null;const n=dt(t,"yyyy-MM-dd",new Date);return isNaN(n.valueOf())?null:n}function ge(t){if(!t)return null;const n=mt(t);return isNaN(n.valueOf())?null:n}const Bt=Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale,{hour:"numeric"}).resolvedOptions().hourCycle==="h12";var Te=(t=>(t.EVENT="EVENT",t.GROUP="GROUP",t.GROUP_MEMBERSHIP="GROUP_MEMBERSHIP",t.USER="USER",t))(Te||{});function j(){const[t,n]=i.useState(!1),s=i.useRef(null),r=i.useCallback(()=>n(!0),[]),a=i.useCallback(()=>n(!1),[]),o=i.useCallback(()=>n(!0),[]),l=i.useCallback(()=>n(!1),[]);return{ref:s,hovered:t,eventHandlers:{onPointerEnter:r,onPointerLeave:a,onFocus:o,onBlur:l}}}function fe(t){return({condition:n})=>{throw new Error(`conditionOperators.${n.operator}.${t} is not supported`)}}const Z={[u.ABSOLUTE_EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"on")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[u.ABSOLUTE_GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"after")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[u.ABSOLUTE_LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"before")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[u.AND]:{Preview:fe("Preview")},[u.BETWEEN]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is between")," ",e.createElement("b",null,t.value)," ",e.createElement("span",{className:"text-secondary"},"and")," ",e.createElement("b",null,t.value2))},[u.CONTAINS]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"contains")," ",e.createElement("b",null,t.value))},[u.EMPTY]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is empty")},[u.ENDS_WITH]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"ends with")," ",e.createElement("b",null,t.value))},[u.EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is")," ",e.createElement("b",null,t.dataType===de.FLOW&&t.value?e.createElement("span",null,t?.eventDisplayName??t.eventName):t.value))},[u.EXCLUDES_ALL]:{Preview:({condition:t})=>q(t,"does not include","all of")},[u.EXCLUDES_ANY]:{Preview:({condition:t})=>q(t,"does not include","at least one of")},[u.FALSE]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is false")},[u.GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is greater than")," ",e.createElement("b",null,t.value))},[u.GTE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is greater than or equal to")," ",e.createElement("b",null,t.value))},[u.INCLUDES_ALL]:{Preview:({condition:t})=>q(t,"includes","all of")},[u.INCLUDES_ANY]:{Preview:({condition:t})=>q(t,"includes","at least one of")},[u.LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is less than")," ",e.createElement("b",null,t.value))},[u.LTE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is less than or equal to")," ",e.createElement("b",null,t.value))},[u.NE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is not")," ",e.createElement("b",null,t.dataType===de.FLOW&&t.value?e.createElement("span",null," ",t?.eventDisplayName??t.eventName):t.value))},[u.NOT_CONTAINS]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not contain")," ",e.createElement("b",null,t.value))},[u.NOT_EMPTY]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"has any value")},[u.NOT_REGEX]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not match")," ",e.createElement("b",null,t.value))},[u.OR]:{Preview:fe("Preview")},[u.REGEX]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"matches")," ",e.createElement("b",null,t.value))},[u.RELATIVE_EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"exactly")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[u.RELATIVE_GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"less than")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[u.RELATIVE_LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"more than")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[u.STARTS_WITH]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"starts with")," ",e.createElement("b",null,t.value))},[u.TRUE]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is true")},[u.URL]:{Preview:({condition:t})=>{const{urlPattern:n}=t;if(!n)return e.createElement("span",{className:"text-secondary"},"matches ...");const{includes:s,excludes:r}=n;return e.createElement(e.Fragment,null,s.length>0&&e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"matches")," ",s.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",null,a)))),s.length>0&&r.length>0&&e.createElement("span",{className:"text-secondary"}," and "),r.length>0&&e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not match")," ",r.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",null,a)))))}}};function qt(t){return parseInt(t,10)}function Q(t){if(!t)return"days";const n=qt(t);return isNaN(n)?"days":n+" "+(n===1?"day":"days")}function J(t){if(!t)return"";const n=Ht(t);return n?ae(n,"PP"):""}function q(t,n,s){const r=t.values||[];return e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},n+(r.length>1?" "+s:""))," ",r.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",{key:o},a))))}const ie=t=>({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":t===!0,"userflow-debugger-condition__item__danger":t===!1,"userflow-debugger-condition__item__intermediate":t===null}),ce=t=>t===!0?D:t===!1?I:F,Oe=(t,n)=>{const s=x();return i.useMemo(()=>{const o=(n?s?.hiddenCondition?.breakdown:s?.startCondition?.breakdown)?.find(l=>l.conditionId===t.id);return{classes:ie(o?.match),icon:ce(o?.match)}},[t,s,n])},W=t=>{const{condition:n,isHideCond:s}=t,{classes:r,icon:a}=Oe(n,s),o=n.type;if(o===N.CLAUSE)return e.createElement(Wt,{...t});const l=Ie[o];return e.createElement("div",{className:p(r)},e.createElement("span",{className:"d-flex gap-8 align-center userflow-debugger-condition__item__icon"},l.icon?e.createElement(d,{icon:l.icon({condition:n})}):null,e.createElement(l.Preview,{...t})),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:a}))},Gt=()=>{const t=x(),[n,s]=i.useState(!1),r=i.useMemo(()=>t?.hiddenCondition?.breakdown.find(o=>o.conditionId===t?.hiddenCondition?.condition.id),[t?.hiddenCondition]);return t?.hiddenCondition?.condition?e.createElement("div",{role:"button",className:p({"d-flex gap-8 flex-column margin-8":!0,"userflow-debugger-condition__clause":!0,"userflow-debugger-hide-condition__clause__success":r?.match===!0,"userflow-debugger-hide-condition__clause__danger":r?.match===!1,"userflow-debugger-hide-condition__clause__expanded":n}),onClick:a=>{s(!n),a.stopPropagation()}},e.createElement("div",{className:"d-flex gap-8 justify-space-between align-center"},e.createElement("span",null,"Termporarily hide flow"," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to ",n?"collapse":"expand")),e.createElement(d,{icon:M})),n&&e.createElement(W,{isRoot:!0,isHideCond:!0,condition:t?.hiddenCondition?.condition})):null},Wt=({condition:t,isRoot:n=!1,isHideCond:s=!1})=>{const[r,a]=i.useState(!1),{classes:o,icon:l}=Oe(t,s);return n?e.createElement(e.Fragment,null,t.conditions.map((c,m)=>e.createElement(W,{isHideCond:s,key:m,condition:c}))):e.createElement("div",{role:"button",className:p({"d-flex flex-column gap-8":!0,"userflow-debugger-condition__clause":r,...r?{"userflow-debugger-condition__item__success__expanded":o["userflow-debugger-condition__item__success"],"userflow-debugger-condition__item__danger__expanded":o["userflow-debugger-condition__item__danger"],"userflow-debugger-condition__item__intermediate__expanded":o["userflow-debugger-condition__item__intermediate"]}:o}),onClick:c=>{a(!r),c.stopPropagation()}},e.createElement("div",{className:"d-flex justify-space-between align-center w-full"},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:et})," ",e.createElement("strong",null,"Logic Group")," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to ",r?"collapse":"expand")),!r&&e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:l})),r&&e.createElement(e.Fragment,null,t.conditions.map((c,m)=>e.createElement("div",{key:m,className:p({"userflow-debugger-condition__clause__operator__wrapper":!0})},m>0&&e.createElement("div",{className:p({"userflow-debugger-condition__clause__operator":!0})},e.createElement(De,{condition:t})),e.createElement(W,{isHideCond:s,condition:c})))))},De=({condition:t})=>{const n=t.operator;return n?e.createElement("span",{className:p({"userflow-debugger-condition__item__operator":!0,"userflow-debugger-condition__item__operator__and":n===u.AND,"userflow-debugger-condition__item__operator__or":n===u.OR})},n===u.AND&&"AND",n===u.OR&&"OR"):null},jt={[T.NONE]:I,[T.PENDING_SCHEDULE]:I,[T.SCHEDULED]:F,[T.FIRED]:D},zt=e.memo(()=>{const t=x(),{waitTimer:n}=t||{},s=t?.startCondition?.condition.waitTime,{ref:r,hovered:a,eventHandlers:o}=j();return!s||!n||n===T.NONE?null:e.createElement("div",{ref:r,...o,className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__danger":n===T.PENDING_SCHEDULE,"userflow-debugger-condition__item__intermediate":n===T.SCHEDULED,"userflow-debugger-condition__item__success":n===T.FIRED})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:Ye}),e.createElement("span",null,"Wait ",e.createElement("strong",null,s)," seconds")),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:jt[n]}),e.createElement(z,{target:r,hovered:a&&n===T.PENDING_SCHEDULE},"Timer activates once all conditions are satisfied"))}),Yt=e.memo(()=>{const t=x(),[n,s]=i.useState(!1),{startFrequency:r,listFlowLatestVersion:a}=t||{startFrequency:{}};if(!r||!a?.startFrequency||a?.startFrequency===R.NEVER)return null;const{currentFlowIntervalThrottle:o,frequency:l,frequencyUsage:c}=r,m=ce(l),_=ie(l);if(a.startFrequency===R.ONCE||a.startFrequency===R.ONCE_PER_GROUP)return e.createElement("div",{className:p(_)},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:ve}),e.createElement("strong",null,"Once per user"," ",a.startFrequency===R.ONCE_PER_GROUP&&"per company")),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:m}));if(a.startFrequency===R.ALWAYS&&a.startIntervalValue&&a.startIntervalUnit)return e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":o===!0,"userflow-debugger-condition__item__intermediate":o===!1})},e.createElement("span",null,"Every ",e.createElement("strong",null,a.startIntervalValue)," ",e.createElement("span",{className:"userflow-debugger-info-text"},te(a.startIntervalUnit,a.startIntervalValue)," ","apart")),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:o===!1?F:D}));if(a.startFrequency===R.MULTIPLE){const E=l===!0&&o===!0,b=l===!0&&o===!1,y=l===!1;return e.createElement("div",{className:p({"d-flex flex-column gap-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__clause":n,...n?{"userflow-debugger-condition-frequency__success__expanded":E,"userflow-debugger-condition-frequency__intermediate__expanded":b,"userflow-debugger-condition-frequency__danger__expanded":y}:{"userflow-debugger-condition-frequency__success":E,"userflow-debugger-condition-frequency__intermediate":b,"userflow-debugger-condition-frequency__danger":y}}),onClick:g=>{s(!n),g.stopPropagation()}},e.createElement("div",{className:"d-flex gap-8 justify-space-between"},e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement("strong",null,"Start multiple times")," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to expand")),!n&&e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:E?D:b?F:I})),n&&e.createElement(e.Fragment,null,e.createElement("div",{className:p(_)},e.createElement("span",null,e.createElement("strong",null,a.startLimit)," ",e.createElement("span",{className:"userflow-debugger-info-text"},"(started ",c," times)")),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:m})),a.startIntervalUnit&&a.startIntervalValue&&e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":o===!0,"userflow-debugger-condition__item__intermediate":o===!1})},e.createElement("span",null,e.createElement("strong",null,a.startIntervalValue)," ",e.createElement("span",{className:"userflow-debugger-info-text"},te(a.startIntervalUnit,a.startIntervalValue)," ","apart")),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:o===!1?F:D}))))}return null}),Xt=()=>{const t=x(),{priority:n}=t||{};return n?.priority?e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__priority":!0})},e.createElement("span",null,e.createElement("strong",null,Lt(n?.priority))," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to learn more")),e.createElement("a",{href:"https://docs.userflow.com/docs/trouble/using-the-debugger#flow-trigger-precedence",target:"_blank",rel:"noreferrer noopener"},e.createElement(d,{icon:_e}))):null},Kt=()=>{const t=x(),{startFrequency:n}=t||{},{onlyIfNotCompleted:s}=n||{};return s==null?null:e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":s===!0,"userflow-debugger-condition__item__danger":s===!1})},"Only if not completed",e.createElement(d,{icon:s===!0?D:I}))},$t=()=>{const t=x(),{startFrequency:n}=t||{},{hovered:s,eventHandlers:r,ref:a}=j();return!n||n?.scopeByGroup===null||n.scopeByGroup===void 0||n.scopeByGroup===!0?null:e.createElement("div",{ref:a,...r,className:p({"d-flex align-center margin-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__danger":!0})},"Constrain to current company",e.createElement(d,{icon:ce(n.scopeByGroup)}),e.createElement(z,{target:a,hovered:s},"User is not associated with a company"))},Zt=()=>{const t=x(),{startFrequency:n,listFlowLatestVersion:s}=t||{},{anyFlowIntervalThrottle:r}=n||{},{throttleUnit:a,throttleValue:o}=s||{};return r===null||a===null||o===null||a===void 0||o===void 0?null:e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":r===!0,"userflow-debugger-condition__item__intermediate":r===!1})},e.createElement("span",null,"Atleast ",e.createElement("strong",null,s?.throttleValue)," ",te(a,o)," after any flow"),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:r===!0?D:F}))},Qt=e.memo(()=>{const{hovered:t,eventHandlers:n,ref:s}=j(),r=x(),{snoozed:a}=r||{},o=i.useMemo(()=>{if(a?.until)return ae(new Date(a.until),"MMM do, h:mm a")},[a?.until]);return a?e.createElement("div",{ref:s,...n,className:p({"d-flex align-center margin-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__intermediate":!0})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:Xe}),e.createElement("span",null,"This flow is currently ",e.createElement("strong",null,"snoozed"))),e.createElement(d,{dataAttrs:{"data-condition-status":"true"},icon:F}),e.createElement(z,{target:s,hovered:t},"Snoozed until ",o)):null}),Ie={[N.PAGE]:{icon:()=>Ke,Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,"URL"," ",e.createElement("strong",null,n&&e.createElement(n.Preview,{condition:t})))}},[N.ATTRIBUTE]:{icon:({condition:t})=>{if(!t||!t.attributeName)return me(Te.EVENT);const[n]=Rt(t.attributeName);return me(n)},Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,e.createElement("strong",null,t.attributeDisplayName?t.attributeDisplayName:"Attribute")," ",e.createElement("span",{className:"userflow-debugger-info-text"},n&&e.createElement(n.Preview,{condition:t})))}},[N.SEGMENT]:{icon:()=>$e,Preview:({condition:t})=>{const{segment:n}=t;return e.createElement("span",null,e.createElement("strong",null,n?.subjectType===Ue.GROUP?"Company":"User")," ",e.createElement("span",{className:"text-secondary"},t.operator===u.FALSE?"is not in":"is in")," ",e.createElement("strong",null,n?.name||"Segment"))}},[N.ELEMENT]:{icon:({condition:t})=>t.elementState?_t[t.elementState]:Ze,Preview:({condition:t})=>e.createElement("span",null,"Element"," ",t.elementState&&e.createElement("strong",null,yt(t.elementState)))},[N.INPUT_VALUE]:{icon:()=>Qe,Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,"The value of input"," ",e.createElement("strong",null,n&&e.createElement(n.Preview,{condition:t})))}},[N.FILLED_IN_INPUT]:{icon:()=>Je,Preview:()=>e.createElement("span",null,"User fills an input")},[N.FLOW]:{icon:({condition:t})=>t.flowState?wt[t.flowState]:se,Preview:({condition:t})=>e.createElement("span",null,t.flow?e.createElement(e.Fragment,null,At(t.flow.type,{title:!0})," ",e.createElement("strong",null,t.flow.name)):"Flow/checklist"," ",t.flowState&&xt(t.flowState))},[N.TIME]:{icon:()=>ve,Preview:({condition:t})=>{const n=t.value?ge(t.value):null,s=n&&e.createElement("strong",{style:{whiteSpace:"nowrap"}},pe(n)),r=t.value2?ge(t.value2):null,a=r&&e.createElement("strong",{style:{whiteSpace:"nowrap"}},pe(r));return s&&a?e.createElement("span",null,"Current time is between ",s," and ",a):s?e.createElement(e.Fragment,null,"Current time is after ",s):a?e.createElement(e.Fragment,null,"Current time is before ",a):e.createElement(e.Fragment,null,"Current time is ...")}},[N.EVENT]:{icon:()=>be,Preview:({condition:t})=>{const{ref:n,hovered:s,eventHandlers:r}=j();return e.createElement("div",{ref:n,...r},e.createElement("strong",null,t.eventDisplayName?t.eventDisplayName:"Event")," ",e.createElement("span",{className:"userflow-debugger-info-text"},It(t.eventFrequencyOperator))," ",e.createElement("strong",null,t.eventFrequencyValue),t.eventFrequencyOperator===U.BETWEEN&&e.createElement(e.Fragment,null," ",e.createElement("span",{className:"userflow-debugger-info-text"},"and")," ",e.createElement("strong",null,t.eventFrequencyValue2))," ",e.createElement("span",{className:"userflow-debugger-info-text"},Tt(t),","," ",Ft(t.eventTimeOperator)),t.eventTimeOperator!==O.ANY&&e.createElement(e.Fragment,null," ",e.createElement("strong",null,t.eventRelativeValue),t.eventTimeOperator===O.RELATIVE_BETWEEN&&e.createElement(e.Fragment,null," ",e.createElement("span",{className:"userflow-debugger-info-text"},"and")," ",e.createElement("strong",null,t.eventRelativeValue2))," ",e.createElement("span",{className:"userflow-debugger-info-text"},St(t,t.eventRelativeUnit))),t.eventActor&&t.eventActor!==Ae.CURRENT_USER?e.createElement(e.Fragment,null," ",e.createElement("strong",null,Dt(t.eventActor))):"",t.whereCondition&&s&&e.createElement(z,{hovered:!0,target:n},"Where ",e.createElement("br",null),e.createElement(Fe,{condition:t.whereCondition})))}},[N.ALWAYS_TRUE]:{icon:()=>D,Preview:()=>e.createElement("span",null,"Water is wet")},[N.CHECKLIST_TASK_CLICKED]:{icon:()=>Ee,Preview:()=>e.createElement("span",null,"Task is clicked")}},Fe=t=>e.createElement("div",null,t.condition.conditions.map((n,s)=>e.createElement("div",{key:n.id}," ",s===0?null:e.createElement("span",{className:"userflow-debugger-info-text"},t.condition.operator?.toLowerCase())," ",n.type==="ATTRIBUTE"&&Ie.ATTRIBUTE.Preview({condition:n,isRoot:!0,isHideCond:!1}),n.type==="CLAUSE"&&e.createElement(e.Fragment,null,"(",e.createElement(Fe,{condition:n}),")")))),z=({hovered:t,children:n,target:s})=>{const r=oe();return t?e.createElement(Ce,{className:"userflow-debugger-popover",target:s.current,placement:"top",horizontalAlign:"center",verticalAlign:"center",document:r?.current?.contentDocument||void 0},n):null};class Jt extends e.PureComponent{constructor(n){super(n),this.rootRef=e.createRef(),this.optionsElRef=e.createRef(),this.input=null,this.popoverRef=e.createRef(),this.isMouseDown=!1,this.isCreateOpen=!1,this.setInput=s=>{this.input=s;const{inputRef:r}=this.props;r&&(typeof r=="function"?r(s):r.current=s)},this.onInputChange=s=>{s.stopPropagation();const{value:r}=s.target;r!==""&&this.openPopover();const a=this.memoizedFilterOptions(this.props.options,r);this.setState({inputValue:r,q:r,highlightedIndex:a.length>0?0:-1,createHighlighted:a.length===0}),r===""&&!this.props.noEmpty&&this.triggerOnChange(null),this.props.onSearchChange&&this.props.onSearchChange(r)},this.onPopoverPlacementChange=s=>this.setState({popoverPlacement:s}),this.onMouseDown=s=>{s.preventDefault(),this.isMouseDown=!0;const r=()=>{this.isMouseDown=!1,this.props.document?.removeEventListener("mouseup",r),document.body.removeEventListener("mouseup",r)};this.props.document?.addEventListener("mouseup",r),document.body.addEventListener("mouseup",r)},this.onFocus=s=>{this.input&&!this.props.noSearch&&this.input.select(),this.props.onFocus&&this.props.onFocus(s)},this.onBlur=s=>{this.isMouseDown||this.closePopover(),this.props.onBlur&&!this.isCreateOpen&&this.props.onBlur(s)},this.onClose=()=>{this.state.popoverOpen&&this.closePopover(),this.props.onClose&&this.props.onClose()},this.onTriggerClick=()=>{this.props.readOnly||this.props.disabled||(this.state.popoverOpen?this.closePopover():(this.input&&this.input.focus(),this.openPopover()))},this.onKeyDown=s=>{const{popoverOpen:r,highlightedIndex:a,createHighlighted:o}=this.state,l=this.getFilteredOptions(),c=l.length-1;switch(s.key){case"ArrowUp":s.preventDefault(),r&&(o?this.setState({highlightedIndex:c,createHighlighted:!1}):a>0&&this.setState({highlightedIndex:a-1}));break;case"ArrowDown":s.preventDefault(),r?this.props.onCreate&&(a===c||o)?this.setState({highlightedIndex:-1,createHighlighted:!0}):a<c&&this.setState({highlightedIndex:a+1}):this.props.noOpenOnDown||this.openPopover();break;case"Enter":if(r)if(s.preventDefault(),o&&!this.props.disableCreate)this.fireOnCreate();else{const m=l[a];m||!this.props.noEmpty?this.selectOption(m):!m&&this.props.hideOnEmpty&&this.props.onEnter&&this.props.onEnter()}else this.props.onEnter?this.props.onEnter():this.openPopover();break;case"Tab":r&&!this.props.ignoreTab&&this.selectOption(l[a]);break;case"Escape":r&&(s.preventDefault(),s.stopPropagation(),this.setState({popoverOpen:!1}));break}},this.selectOption=s=>{s===this.props.value?this.setState({popoverOpen:!1,inputValue:this.renderOptionText(s),q:""}):(this.setState({popoverOpen:!1,inputValue:"",q:""}),this.triggerOnChange(s))},this.highlightOption=s=>{this.setState({highlightedIndex:s,createHighlighted:!1})},this.highlightCreate=()=>{this.setState({highlightedIndex:-1,createHighlighted:!0})},this.fireOnCreate=()=>{const{onCreate:s}=this.props;if(s){this.isCreateOpen=!0;const r={q:ee.upperFirst(this.state.q),callback:a=>{this.isCreateOpen=!1,a!=null&&this.selectOption(a),this.input&&this.input.focus()}};s(r),this.closePopover()}},this.openPopover=()=>{if(!this.state.popoverOpen){const s=this.getFilteredOptions();let r=0,a=!1;if(s.length===0)r=-1,a=!0;else{const{value:o}=this.props,l=s.findIndex(c=>c===o);l!==-1&&(r=l)}this.setState({popoverOpen:!0,highlightedIndex:r,createHighlighted:a})}},this.memoizedFilterOptions=pt((s,r)=>(s=s||[],r?s.filter(a=>this.filter(a,r)):s)),this.state={inputValue:this.renderOptionText(n.value==null?null:n.value),q:"",popoverOpen:!1,popoverPlacement:null,highlightedIndex:-1,createHighlighted:!1}}componentDidUpdate(n,s){const{value:r}=this.props;if(r!==n.value){const a=this.renderOptionText(r??null);a!==this.state.inputValue&&this.setState({inputValue:a})}s.highlightedIndex!==this.state.highlightedIndex&&this.scrollHighlightedOptionIntoView()}render(){let n,s=!1;const{props:r}=this,a=this.state,o=a.popoverPlacement==="top"?"above":"below";if(a.popoverOpen&&this.rootRef.current){const c=this.getFilteredOptions();if(this.props.hideOnEmpty&&c.length===0)s=!0;else{let m;if(c.length>0){let _=null;m=c.reduce((E,b,y)=>{const g=this.getOptionGroup(b);g&&g!==_&&E.push(e.createElement("div",{key:"group:"+g,className:"combo-box__group-header"},g)),_=g;const h=["combo-box__option"];return y===a.highlightedIndex&&h.push("combo-box__option--highlighted"),this.props.optionClassName&&h.push(this.props.optionClassName),E.push(e.createElement(en,{key:this.getOptionKey(b,y),className:h.join(" "),option:b,idx:y,renderOptionText:r.renderOptionText,renderOptionItem:r.renderOptionItem,getOptionIcon:r.getOptionIcon,onClick:this.selectOption,onHover:this.highlightOption})),r.hasSeparatorAfter&&r.hasSeparatorAfter(b)&&E.push(e.createElement("div",{key:"sep-"+y,className:"combo-box__option-sep"})),E},[])}else r.loading?m=e.createElement("div",{className:"combo-box__no-results"},"Loading..."):m=e.createElement("div",{className:"combo-box__no-results"},"No matching ",r.nounPlural||"items");n=e.createElement(Ce,{ref:this.popoverRef,className:"combo-box-popover"+(r.popoverNotch?"":` combo-box-popover--${o}`),noNotch:!r.popoverNotch,target:this.rootRef.current,forceDimension:!0,matchWidth:!0,minWidth:r.popoverMinWidth,onMouseDown:this.onMouseDown,onPlacementChange:this.onPopoverPlacementChange,document:r.document},e.createElement("div",{ref:this.optionsElRef,className:p({"combo-box__options":!0,"combo-box__options--with-create":!!r.onCreate})},m),r.onCreate&&e.createElement("div",{key:"create",className:p({"combo-box__option":!0,"combo-box__option--create":!0,"combo-box__option--highlighted":a.createHighlighted}),onClick:this.fireOnCreate,onMouseMove:this.highlightCreate},e.createElement("div",{className:"combo-box__create-icon"},e.createElement(G,{icon:tt})),e.createElement("div",{className:"combo-box__create-text"},"Create"," ",a.q===""?"new"+(r.noun?` ${r.noun}`:""):e.createElement("b",null,ee.upperFirst(a.inputValue)))))}}const l=["input-group","combo-box"];return a.popoverOpen&&!s&&(l.push("combo-box--open"),r.popoverNotch||l.push(`combo-box--with-popover-${o}`)),r.disabled&&l.push("input-group--disabled"),r.noSearch&&l.push("combo-box--no-search"),r.className&&l.push(r.className),e.createElement(e.Fragment,null,e.createElement("div",{className:l.join(" "),style:{width:r.width?r.width+"px":void 0},ref:this.rootRef,onClick:r.readOnly||r.disabled?void 0:()=>{this.input?.focus(),this.openPopover()}},r.childrenBefore,r.value&&r.getOptionIcon&&e.createElement("div",{className:"combobox__input-icon"},Le(r.value,r.getOptionIcon)),e.createElement("input",{type:"text",className:r.inputClassName,name:r.name,value:a.inputValue,onChange:this.onInputChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onMouseDown:this.openPopover,placeholder:r.placeholder,readOnly:r.readOnly||r.noSearch,disabled:r.disabled,autoComplete:"off",ref:this.setInput,...r.inputHtmlAttributes}),!r.noTrigger&&e.createElement("div",{"data-testid":r.triggerTestId||"combo-box-trigger",className:"input-group__append input-group__trigger",onClick:this.onTriggerClick,onMouseDown:this.onMouseDown},e.createElement(G,{icon:nt})),r.onClose&&e.createElement("div",{className:"input-group__append input-group__trigger",onClick:this.onClose},e.createElement(G,{icon:rt})),r.childrenAfter),n)}scrollHighlightedOptionIntoView(){const n=this.optionsElRef.current;if(this.state.popoverOpen&&n){const s=n.querySelector(".combo-box__option--highlighted");if(s){const r=n.getBoundingClientRect(),a=s.getBoundingClientRect();a.top<r.top?n.scrollTop+=a.top-r.top:a.bottom>r.bottom&&(n.scrollTop+=a.bottom-r.bottom)}}}triggerOnChange(n){const{onChange:s}=this.props;s&&s(n)}closePopover(){this.setState({popoverOpen:!1,inputValue:this.renderOptionText(this.props.value==null?null:this.props.value),q:""})}renderOptionText(n){return n==null?"":Pe(n,this.props.renderOptionText)}getFilteredOptions(){return this.memoizedFilterOptions(this.props.options,this.state.q)}filter(n,s){return this.props.filter?this.props.filter(n,s):this.renderOptionText(n).toLowerCase().includes(s.toLowerCase())}getOptionKey(n,s){return n&&n.id||s}getOptionGroup(n){return this.props.getOptionGroup?this.props.getOptionGroup(n):n&&n.group||null}}class en extends e.PureComponent{constructor(){super(...arguments),this.state={isOptionDisabled:!1},this.onClick=()=>{this.state.isOptionDisabled||this.props.onClick(this.props.option)},this.onHover=()=>{this.state.isOptionDisabled||this.props.onHover(this.props.idx)}}componentDidMount(){const n=this.props.option!==void 0&&typeof this.props.option=="object"&&this.props.option!==null&&"disabled"in this.props.option&&this.props.option.disabled===!0;this.setState({isOptionDisabled:n})}componentDidUpdate(){const n=this.props.option!==void 0&&typeof this.props.option=="object"&&this.props.option!==null&&"disabled"in this.props.option&&this.props.option.disabled===!0;this.setState({isOptionDisabled:n})}render(){const{isOptionDisabled:n}=this.state,{props:s}=this;return e.createElement("div",{className:p({[s.className]:!0,"combo-box__option--disabled":n}),onClick:this.onClick,onMouseMove:this.onHover},tn(s.option,s.renderOptionText,s.renderOptionItem,s.getOptionIcon))}}function Pe(t,n){return n?n(t):typeof t=="string"||typeof t=="number"?t:t?t.name:"?"}function tn(t,n,s,r){if(s)return s(t);{let a=Pe(t,n);return r?e.createElement("div",{className:"d-flex align-flex-start"},e.createElement("div",{className:"combobox__option-icon"},Le(t,r)),e.createElement("div",{className:"flex-1"},a)):a}}function Le(t,n){const s=n(t);return nn(s)?e.createElement(G,{icon:s}):s}function nn(t){return gt(t)&&"iconName"in t}const rn=({selectedFlow:t,setSelectedFlow:n,flows:s,debugAutoStartCondition:r})=>{const a=P(),o=oe();i.useEffect(()=>{if(!t)return;r(t.latestVersion);const c=()=>{r(t.latestVersion)};return a.on("private:checkSessionsAck",c),document.addEventListener("visibilitychange",c),()=>{a.off("private:checkSessionsAck",c),document.removeEventListener("visibilitychange",c)}},[t]);const l=i.useCallback(c=>{!c||t?.latestVersion?.id===c.latestVersion.id||n(c)},[t]);return e.createElement(e.Fragment,null,e.createElement("div",{className:"d-flex align-center justify-space-between"},e.createElement("div",{className:"d-flex justify-space-between align-center"},"Select Flow"),e.createElement(Jt,{className:"userflow-debugger__flow__selector",value:t,options:s,placeholder:"Select flow",document:o?.current?.contentDocument||void 0,onChange:l,renderOptionItem:c=>c.name})),e.createElement(sn,{selectedFlow:t,selectedFlowVersionsId:t?.latestVersion?.id}))},sn=({selectedFlowVersionsId:t,selectedFlow:n})=>{const s=P(),[r,a]=i.useState(!1),o=x(),l=o&&o?.activeFlow?.id===n?.id;return i.useEffect(()=>(a(!1),s.on("private:setFlowSession",c=>{a(c===t)}),()=>{s.off("private:setFlowSession",()=>a(!1))}),[t]),i.useEffect(()=>{l||a(!1)},[l]),o?.activeFlow===null?null:e.createElement(e.Fragment,null,o?.locale?.match===!1&&e.createElement("div",{className:p(ie(!1))},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:I}),e.createElement("span",null,"The flow will not auto start ",e.createElement("br",null)," ",e.createElement("b",null,"User locale (",o?.locale?.code,") is not enabled.")))),r?e.createElement("div",{className:p({"d-flex align-center fade-in":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex align-center gap-8"},e.createElement(d,{icon:M}),e.createElement("span",null,"This flow ",e.createElement("strong",null,"just")," started"))):null,l&&!r&&e.createElement("div",{className:p({"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex align-center gap-8"},e.createElement(d,{icon:M}),e.createElement("span",null,"This flow is currently active"))),!l&&o&&e.createElement("div",{className:p({"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(d,{icon:M,size:16}),e.createElement("span",null,"Another flow is currently active"))))},an=t=>{const[n,s]=i.useState(document.visibilityState==="visible"),r=i.useRef(t);return i.useEffect(()=>{r.current=t},[t]),i.useEffect(()=>{const a=()=>{const o=document.visibilityState==="visible";s(o),r.current?.(o)};return document.addEventListener("visibilitychange",a),()=>{document.removeEventListener("visibilitychange",a)}},[]),n},on=({close:t})=>{const n=P(),s=i.useRef(null),[r,a]=i.useState(!!n.clientToken),[o,l]=i.useState(()=>{const f=n.getSessionStorageState(),w=f?.debuggerApp?.x,S=f?.debuggerApp?.y||50;return{x:w??(document.body.clientWidth?Number(document.body.clientWidth)-450:50),y:S}}),[c,m]=i.useState(!1),_=i.useRef(null),{meta:E}=k(),{debuggerRoute:b}=le(),[y,g]=i.useState(!1),h=i.useRef(null),v=i.useRef({mouseX:0,mouseY:0,elementX:0,elementY:0});i.useEffect(()=>{o&&n.setSessionStorageState(f=>({...f,debuggerApp:{...f.debuggerApp,x:o.x,y:o.y}}))},[o]),i.useEffect(()=>{if(!c)return;const f=S=>{const V=S.clientX-v.current.mouseX,Y=S.clientY-v.current.mouseY,X=Math.min(v.current.elementX+V,window.document.body.clientWidth-200),K=Math.max(v.current.elementY+Y,0);h.current||(h.current=requestAnimationFrame(()=>{l({x:X,y:K}),h.current=null}))},w=()=>{m(!1)};return document.addEventListener("mousemove",f),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",w),h.current&&(cancelAnimationFrame(h.current),h.current=null)}},[c,o]),i.useEffect(()=>{const f=()=>{l(S=>{const V=document.body.clientWidth-500,Y=document.body.clientHeight-100,X=Math.max(Math.min(S.x,V),0),K=Math.max(Math.min(S.y,Y),0);return{x:X,y:K}})},w=()=>{a(!!n.clientToken)};return window.addEventListener("resize",f),n.on("private:initialised",w),()=>{window.removeEventListener("resize",f),n.off("private:initialised",w)}},[]);const C=f=>{s.current&&(m(!0),f.preventDefault())};return e.createElement("div",{ref:s,style:{left:"0",top:"0",position:"absolute",willChange:"transform",transform:`translate3d(${o.x}px, ${o.y}px, 0)`,zIndex:1234620}},e.createElement("div",{onMouseDown:C,style:{height:"50px",cursor:"move",userSelect:"none",position:"absolute",width:"50px"}}),e.createElement(Ve,{title:"Debugger",stylesheet:ft,style:{borderRadius:"8px",width:"400px",height:b==="checkAutoStart"?"600px":r?"500px":"400px"},elRef:_,onStylesheetsLoad:g},e.createElement(Ne.Provider,{value:_},e.createElement("div",{className:"d-flex flex-column userflow-debugger-app",style:{visibility:y?"visible":"hidden"}},e.createElement("div",{className:"d-flex justify-space-between userflow-debugger-app__header"},e.createElement(bt,null),e.createElement("div",{className:"d-flex align-center userflow-debugger-app__title"},e.createElement(He,null),e.createElement("span",null,"Userflow debugger")),e.createElement("button",{role:"button",className:"userflow-debugger-app__close",onClick:()=>{n.getSessionStorageState().debuggerApp&&n.setSessionStorageState(f=>({...f,debuggerApp:null})),t()}},e.createElement("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M12.1836 4.49609L8.90234 7.77734L12.1562 11.0312C12.4297 11.2773 12.4297 11.6875 12.1562 11.9336C11.9102 12.207 11.5 12.207 11.2539 11.9336L7.97266 8.67969L4.71875 11.9336C4.47266 12.207 4.0625 12.207 3.81641 11.9336C3.54297 11.6875 3.54297 11.2773 3.81641 11.0039L7.07031 7.75L3.81641 4.49609C3.54297 4.25 3.54297 3.83984 3.81641 3.56641C4.0625 3.32031 4.47266 3.32031 4.74609 3.56641L8 6.84766L11.2539 3.59375C11.5 3.32031 11.9102 3.32031 12.1836 3.59375C12.4297 3.83984 12.4297 4.25 12.1836 4.49609Z",fill:"white"})))),e.createElement(ln,null),b==="verifySetup"&&e.createElement(cn,null),E?.endUser?.debuggerEnabled&&b==="checkAutoStart"&&e.createElement(un,null),b==="currentUser"&&e.createElement(dn,null)))))},ln=()=>{const t=P(),{meta:n}=k(),[s,r]=i.useState(!1),{debuggerRoute:a,setDebuggerRoute:o}=le(),l=t.isIdentified(),c=ht(()=>r(!1));return i.useEffect(()=>{n&&n?.endUser.debuggerEnabled===!1&&a==="checkAutoStart"&&o("verifySetup")},[n]),l?e.createElement("div",{ref:c},e.createElement("div",{className:"d-flex align-center justify-space-between userflow-debugger-menu",onClick:()=>r(!s)},e.createElement("div",{className:p({"d-flex align-center":!0,"userflow-debugger-menu__title":!0,"userflow-debugger-menu__title--open":s})},e.createElement(d,{icon:B[a].icon}),e.createElement("span",null,B[a].name)),e.createElement("button",{className:"userflow-debugger-menu__toggle"},e.createElement(d,{icon:st}))),s&&e.createElement("ul",{className:"userflow-debugger-menu__list"},Object.keys(B).map(m=>{if(!n?.endUser?.debuggerEnabled&&m==="checkAutoStart")return null;const _=B[m];return e.createElement("li",{key:m,className:"d-flex align-center userflow-debugger-app__item",onClick:()=>{o&&o(m),r(!1)}},e.createElement(d,{icon:_.icon}),_.name)}))):null},cn=()=>{const{meta:t,buildId:n}=k(),s=P(),[r,a]=i.useState(!!s.clientToken),o=i.useMemo(()=>s.isIdentified(),[s,t]),{setDebuggerRoute:l}=le();i.useEffect(()=>{const E=()=>{a(!!s.clientToken)};return s.on("private:initialised",E),()=>{s.off("private:initialised",E)}},[]);const c=i.useMemo(()=>{let E=$;const b={"d-flex flex-column gap-8":!0,"userflow-debugger-installation__step":!0};return r?(E=A,b["userflow-debugger-installation__step__success"]=!0):(E=it,b["userflow-debugger-installation__step__danger"]=!0),{icon:E,classes:b}},[r]),m=i.useMemo(()=>{let E=$;const b={"d-flex flex-column gap-8":!0,"userflow-debugger-installation__step":!0};return!r&&!o&&(E=$,b["userflow-debugger-installation__step__failed"]=!0),r&&!o&&(E=M,b["userflow-debugger-installation__step__warning"]=!0),r&&o&&(E=A,b["userflow-debugger-installation__step__success"]=!0),{icon:E,classes:b}},[r,o]),_=()=>o?t?.endUser.debuggerEnabled?e.createElement(e.Fragment,null,e.createElement("span",{className:"userflow-debugger-details"},t?.env.company.name),e.createElement("span",{className:"userflow-debugger-details"},t?.env.name)):e.createElement("div",{className:"userflow-debugger-details__access__denied"},"The"," ",e.createElement("button",{onClick:()=>l("currentUser")},"currently signed-in user")," ","does not have debugger access"):e.createElement(e.Fragment,null,e.createElement("span",{className:"userflow-debugger-details"},"Unknown company"),e.createElement("span",{className:"userflow-debugger-details"},"Unknown environment"));return e.createElement("div",{className:"space-evenly userflow-debugger-app__content"},e.createElement("div",{className:"userflow-debugger-installation__steps"},e.createElement("div",{className:p({"d-flex gap-8 flex-column":!0,"userflow-debugger-installation__step":!0,"userflow-debugger-installation__step__success":!0})},e.createElement(d,{icon:A,size:32}),"Userflow ",e.createElement("br",null),"installed"),e.createElement("div",{className:p(c.classes)},e.createElement(d,{icon:c.icon,size:32}),"Userflow ",e.createElement("br",null)," ",r?"":"not"," initialized"),e.createElement("div",{className:p(m.classes)},e.createElement(d,{icon:m.icon,size:32}),"User ",e.createElement("br",null)," ",o&&r?"":"not"," ","identified")),!r&&!o&&e.createElement("div",{className:p({"d-flex gap-8 flex-column":!0,"userflow-debugger-installation__not__initialized":!0})},"Remember to initialize Userflow by calling",e.createElement("div",null,"userflow.init('YOUR_USERFLOW_TOKEN')")),r&&e.createElement("div",{className:"d-flex gap-8 flex-column userflow-debugger-details__wrapper"},e.createElement("div",{className:"userflow-debugger-details__env__details"},e.createElement("div",{className:"d-flex gap-8 flex-column justify-space-around"},e.createElement(d,{size:20,icon:at}),e.createElement(d,{size:20,icon:ot})),e.createElement("div",{className:"d-flex flex-column align-flex-start gap-8"},_())),e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement(d,{size:20,icon:lt}),e.createElement("span",{className:"userflow-debugger-details"},s.getInitToken())),e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement(d,{size:20,icon:re}),e.createElement("span",{className:"userflow-debugger-details"},o?s.getIdentifiedUser()?.externalId:"User not identified"))),e.createElement("div",{className:"userflow-debugger-installation__version"},e.createElement("a",{href:"https://docs.userflow.com/docs/dev/userflow-js-installation",target:"_blank",rel:"noreferrer"},"Visit the Userflow Developer Docs for help")," ",e.createElement("br",null),"Userflow.js version 0.1.",n))},un=()=>{const t=P(),{debuggerClientConditions:n}=k(),[s,r]=i.useState(void 0),[a,o]=i.useState([]),[l,c]=i.useState(),m=i.useMemo(()=>{if(l?.startCondition?.match===!1||l?.hiddenCondition?.match===!0||l?.locale?.match===!1)return!1;const g=l?.startFrequency;return!(g&&(g.onlyIfNotCompleted===!1||g.scopeByGroup===!1||g.frequency===!1))},[l]);an(g=>{g&&y().then(h=>{if(h?.length&&(o(h),!s)){const v=t.getSessionStorageState()?.debuggerApp?.selectedFlowVersionId,C=h.find(f=>f.latestVersion.id===v);E(C??h[0])}})}),i.useEffect(()=>{s&&b(s.latestVersion)},[s]);const _=we.debounce(async g=>{const h=[];for(const[f,w]of n.entries())h.push({conditionId:f,isTrue:w.isTrue});const v={kind:"DebugFlowAutostartCondition",flowVersionId:g.id,clientConditions:h},C=await t.send(v);c({...C,listFlowLatestVersion:g}),C.latestVersion?.id&&g.id!==C.latestVersion?.id&&(y().then(f=>{if(!f)return;o(f);const w=f?.find(S=>S.latestVersion.id===C.latestVersion?.id);w&&E(w)}),_(C.latestVersion))},300),E=g=>{r(g);const h=t.getSessionStorageState().debuggerApp;h&&h?.x&&t.setSessionStorageState(v=>({...v,debuggerApp:{...h,selectedFlowVersionId:g.latestVersion.id}}))},b=async g=>{n.forEach(v=>{v.untrack?.()}),n.clear();const{conditionTypes:h}=await Me(async()=>{const{conditionTypes:v}=await import("./flow-condition-types.js").then(C=>C.f);return{conditionTypes:v}},__vite__mapDeps([0,1,2,3,4,5,6,7]));for(const v of g.clientConditions){n.set(v.id,{condition:v,isTrue:null});const C=h[v.type];if(!C){console.error(`Unknown condition type ${v.type}`);continue}const f=n.get(v.id);f&&(f.untrack=C.track({sessionData:new ke([]),condition:v,callback:w=>{f.isTrue!==w&&(f.isTrue=w,_(g))}}))}},y=async()=>{try{return(await t.send({kind:"ListFlows",hasAutostartCondition:!0},{handlesRejection:!0})).flows?.filter(v=>v.type==="FLOW")}catch(g){g.code==="debugger_access_denied"&&ne("Access defined for List Flows");return}};return e.createElement("div",{className:"userflow-debugger-app__content"},e.createElement(ye.Provider,{value:l},e.createElement(rn,{flows:a,selectedFlow:s,setSelectedFlow:E,debugAutoStartCondition:_}),e.createElement("div",{className:"d-flex flex-column gap-8 userflow-debugger-app__wrapper"},l?.startCondition?.condition&&e.createElement("div",null,e.createElement("div",{className:p({"d-flex gap-8 align-center":!0,"userflow-debugger-app__wrapper__passing":m,"userflow-debugger-app__wrapper__failed":!m})},e.createElement(d,{icon:m?ct:ut}),e.createElement("strong",null,"Auto-start conditions")),e.createElement("span",null,"These are"," ",e.createElement(De,{condition:l.startCondition.condition}),e.createElement("b",null,"-conditions"),", meaning"," ",l.startCondition.condition.type==="CLAUSE"&&l.startCondition.condition.operator==="AND"&&e.createElement(e.Fragment,null,"all conditions must pass for the flow to start."),l.startCondition?.condition.type==="CLAUSE"&&l.startCondition.condition.operator==="OR"&&e.createElement(e.Fragment,null,"only one condition must pass for the flow to start."))),l?.startCondition?.condition&&e.createElement(W,{isRoot:!0,isHideCond:!1,condition:l.startCondition.condition}),e.createElement(zt,null),e.createElement(Yt,null),e.createElement(Kt,null),e.createElement(Zt,null),e.createElement(Xt,null),e.createElement(Gt,null),e.createElement($t,null),e.createElement(Qt,null))))},dn=e.memo(()=>{const{meta:t,buildId:n}=k();if(!t)return null;const r="https://app.userflow.com/app/"+(t.env.primary?t.env.company.slug:`${t.env.company.slug}@${t.env.slug}`)+"/settings/debugger?external_id="+t.endUser.externalId;return e.createElement("div",{className:"d-flex flex-column space-evenly flex-1"},e.createElement("div",{className:"d-flex flex-column gap-8"},e.createElement("div",{className:"d-flex flex-column"},t.endUser.avatarUrl?e.createElement("img",{src:t.endUser.avatarUrl,className:"userflow-debugger-user__image"}):e.createElement("div",{className:"userflow-debugger-user__image"}),e.createElement("span",{className:"userflow-debugger-user__name"},t.endUser?.name||"Unknown name"),e.createElement("span",{className:"userflow-debugger-user__email"},t?.endUser?.email||"Unknown email address"),(!t.endUser.email||!t.endUser.name)&&e.createElement("span",{className:"userflow-debugger__external__id"},t.endUser.externalId)),!t.endUser.debuggerEnabled&&e.createElement(e.Fragment,null,e.createElement("div",{className:"userflow-debugger-user__info"},"This user doesn't have access to the Userflow debugger. You can grant access through the debugger settings in Userflow."),e.createElement("a",{className:"userflow-debugger-user__button",href:r,target:"_blank",rel:"noreferrer"},"Grant access in Userflow ",e.createElement(d,{icon:_e})))),e.createElement("div",{className:"userflow-debugger-installation__version"},e.createElement("a",{href:"https://docs.userflow.com/docs/dev/userflow-js-installation",target:"_blank",rel:"noreferrer"},"Visit the Userflow Developer Docs for help")," ",e.createElement("br",null),"Userflow.js version 0.1.",n))});class Hn{constructor(n,s){this.client=n,this.buildId=s,this.debuggerClientConditions=new Map}mount(){if(this.container)throw new Error("UI has already been mounted");this.container=document.createElement("div"),this.container.id="userflow-debugger-ui",document.body.appendChild(this.container),ue.render(e.createElement(mn,{client:this.client,debuggerClientConditions:this.debuggerClientConditions,buildId:this.buildId,unmount:()=>this.unmount()}),this.container)}unmount(){this.container&&(ue.unmountComponentAtNode(this.container),document.body.contains(this.container)&&document.body.removeChild(this.container),this.client.unMountDebugger(),delete this.container)}}const mn=({client:t,debuggerClientConditions:n,buildId:s,unmount:r})=>{const[a,o]=i.useState(void 0),l=we.debounce(async()=>{try{const c=await t.send({kind:"GetCurrentEndUser"},{handlesRejection:!0});o(c)}catch(c){c.code==="debugger_access_denied"&&ne("debugger access denied"),o(void 0)}},300);return i.useEffect(()=>(l(),document.addEventListener("visibilitychange",l),t.on("private:identified",l),()=>{document.removeEventListener("visibilitychange",l),t.off("private:identified",l)}),[]),e.createElement(Re.Provider,{value:t},e.createElement(xe.Provider,{value:{meta:a,debuggerClientConditions:n,buildId:s}},e.createElement(Et,null,e.createElement(on,{close:r}))))};export{Hn as DebuggerUI};
|
|
2
|
+
import{r as i,R as e}from"./vendor.react.js";import{r as ue}from"./vendor.react-dom.js";import{u as L,U as Re}from"./client-context.js";import{d as ne,a as R,b as O,c as A,e as H,f as d,A as de,W as T,g as U,h as N,S as Ue,i as Ae,_ as Me,j as ke}from"./userflow.js";import{F as Ve}from"./Frame.js";import{S as He}from"./logomark.js";import{f as M,a as Be,b as re,c as Ee,d as I,e as qe,g as he,h as se,i as Ge,j as We,k as be,l as je,m as ze,n as F,o as D,p as Ye,q as ve,r as Xe,s as Ke,t as $e,u as Ze,v as Qe,w as Je,x as k,y as et,z as _e,A as tt,B as nt,C as rt,D as st,E as at,F as ot,G as lt,H as $,I as it}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{f as ct,a as ut}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as m}from"./stylesheets.js";import{o as g}from"./vendor.obj-str.js";import"./vendor.core-js.js";import{_ as ee,l as we}from"./vendor.lodash.js";import{F as G}from"./vendor.fortawesome.react-fontawesome.js";import{P as Ce}from"./Popover.js";import"./vendor.react-day-picker.js";import{f as ae,p as dt,a as mt}from"./vendor.date-fns.js";import{m as pt}from"./vendor.memoize-one.js";import{c as gt}from"./roots.js";import"./vendor.object-assign.js";import"./vendor.scheduler.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-i18next.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./flow-condition-types.js";import"./vendor.fortawesome.fontawesome-svg-core.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[n]="24089078-4319-4dea-9f8d-db161676eb78",t._sentryDebugIdIdentifier="sentry-dbid-24089078-4319-4dea-9f8d-db161676eb78")}catch{}})();const ft=new URL("debugger.css",import.meta.url).href,ye=i.createContext(void 0),S=()=>i.useContext(ye),Ne=i.createContext(null),oe=()=>i.useContext(Ne),xe=i.createContext({debuggerClientConditions:new Map,meta:void 0,buildId:void 0}),V=()=>i.useContext(xe),B={verifySetup:{name:"Verify setup",icon:M},checkAutoStart:{name:"Check auto-start",icon:Be},currentUser:{name:"Current user",icon:re}},Se=i.createContext(void 0),Et=({children:t})=>{const n=L(),[s,r]=i.useState(n.getSessionStorageState().debuggerApp?.selectedTab??"verifySetup");return i.useEffect(()=>{n.setSessionStorageState(a=>!a.debuggerApp||!a.debuggerApp.x?a:{...a,debuggerApp:{...a.debuggerApp,selectedTab:s}}),ne("Debugger Route changed to",s)},[s]),e.createElement(Se.Provider,{value:{debuggerRoute:s,setDebuggerRoute:r}},t)},le=()=>{const t=i.useContext(Se);if(t===void 0)throw new Error("useDebuggerRouteHandler must be used within a DebuggerRouteProvider");return{debuggerRoute:t.debuggerRoute,setDebuggerRoute:t.setDebuggerRoute}},ht=t=>{const n=i.useRef(null),s=oe();return i.useEffect(()=>{const r=s?.current,a=o=>{n.current&&!n.current.contains(o.target)&&t(o)};return document.addEventListener("mousedown",a),r?.contentDocument?.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a),r?.contentDocument?.removeEventListener("mousedown",a)}},[t,s,n]),n},bt=()=>e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M18.4393 5.56066C18.158 5.27936 18 4.89782 18 4.5C18 4.10218 18.158 3.72064 18.4393 3.43934C18.7206 3.15804 19.1022 3 19.5 3C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5C21 4.89782 20.842 5.27936 20.5607 5.56066C20.2794 5.84196 19.8978 6 19.5 6C19.1022 6 18.7206 5.84196 18.4393 5.56066Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 5.56066C3.15804 5.27936 3 4.89782 3 4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3C4.89782 3 5.27936 3.15804 5.56066 3.43934C5.84196 3.72064 6 4.10218 6 4.5C6 4.89782 5.84196 5.27936 5.56066 5.56066C5.27936 5.84196 4.89782 6 4.5 6C4.10218 6 3.72064 5.84196 3.43934 5.56066Z",fill:"#537388"}),e.createElement("path",{d:"M10.9393 13.0607C10.658 12.7794 10.5 12.3978 10.5 12C10.5 11.6022 10.658 11.2206 10.9393 10.9393C11.2206 10.658 11.6022 10.5 12 10.5C12.3978 10.5 12.7794 10.658 13.0607 10.9393C13.342 11.2206 13.5 11.6022 13.5 12C13.5 12.3978 13.342 12.7794 13.0607 13.0607C12.7794 13.342 12.3978 13.5 12 13.5C11.6022 13.5 11.2206 13.342 10.9393 13.0607Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 20.5607C3.15804 20.2794 3 19.8978 3 19.5C3 19.1022 3.15804 18.7206 3.43934 18.4393C3.72064 18.158 4.10218 18 4.5 18C4.89782 18 5.27936 18.158 5.56066 18.4393C5.84196 18.7206 6 19.1022 6 19.5C6 19.8978 5.84196 20.2794 5.56066 20.5607C5.27936 20.842 4.89782 21 4.5 21C4.10218 21 3.72064 20.842 3.43934 20.5607Z",fill:"#537388"}),e.createElement("path",{d:"M3.43934 13.0607C3.15804 12.7794 3 12.3978 3 12C3 11.6022 3.15804 11.2206 3.43934 10.9393C3.72064 10.658 4.10218 10.5 4.5 10.5C4.89782 10.5 5.27936 10.658 5.56066 10.9393C5.84196 11.2206 6 11.6022 6 12C6 12.3978 5.84196 12.7794 5.56066 13.0607C5.27936 13.342 4.89782 13.5 4.5 13.5C4.10218 13.5 3.72064 13.342 3.43934 13.0607Z",fill:"#537388"}),e.createElement("path",{d:"M10.9393 5.56066C10.658 5.27936 10.5 4.89782 10.5 4.5C10.5 4.10218 10.658 3.72064 10.9393 3.43934C11.2206 3.15804 11.6022 3 12 3C12.3978 3 12.7794 3.15804 13.0607 3.43934C13.342 3.72064 13.5 4.10218 13.5 4.5C13.5 4.89782 13.342 5.27936 13.0607 5.56066C12.7794 5.84196 12.3978 6 12 6C11.6022 6 11.2206 5.84196 10.9393 5.56066Z",fill:"#537388"})),vt={prefix:"far",iconName:"custom-hand-pointer-slash",icon:[641,512,[],"???","M185.554191,59.5126699 C189.248662,26.0794907 217.382589,0 251.429,0 C287.979,0 317.715,30.056 317.715,67 L317.715,140.634 C338.128,137.776 359.183,144.576 374.31,160.263 C401.503,147.416 434.689,154.593 454.182,179.361 C497.375,162.727 544,195.156 544,242 L544,326 C544,330.296189 543.590626,334.580726 542.780274,338.796073 L495.999,302.221942 L495.999,242 C495.999,216.84 459.428,216.879 459.428,242 C459.428,250.836 452.265,258 443.428,258 L439.435556,258 L420.622383,243.291649 C420.588346,242.865584 420.571,242.434817 420.571,242 L420.571,221 C420.571,197.943344 389.858993,196.049429 384.724023,215.225903 L269.713,125.308981 L269.713,67 C269.713,41.84 233.142,41.88 233.142,67 L233.142,96.717359 L185.554191,59.5126699 Z M162.172457,223.995642 L233.142,279.479508 L233.142,308.493 C233.142,324.063 213.106,330.402 204.111,317.776 L176.985,279.697 C162.585,259.485 133.185,282.08 147.591,302.303 L257.303,456.303 C260.737,461.122 266.231,464 272,464 L450.285,464 C455.041109,464 459.427079,462.119816 462.713129,458.957818 L500.616335,488.590478 C488.331086,503.061811 470.146238,512 450.286,512 L272,512 C250.741,512 230.632,501.59 218.209,484.154 L108.51,330.153 C87.267,300.334 93.705,258.796 123.06,237.001 C134.952446,228.171597 148.664261,223.998532 162.172457,223.995642 Z M272.143,309.970422 L306.143,336.551563 L306.143,400 C306.143,408.837 299.875,416 292.143,416 L286.143,416 C278.41,416 272.143,408.837 272.143,400 L272.143,309.970422 Z M347.571,368.939901 L381.571,395.521042 L381.571,400 C381.571,408.837 375.303,416 367.571,416 L361.571,416 C353.839,416 347.571,408.837 347.571,400 L347.571,368.939901 Z M633.994211,471.020009 C640.904211,476.540009 642.014211,486.610009 636.494211,493.510009 L626.494211,506 C620.964211,512.890009 610.904211,514.010009 604.004211,508.490009 L6.00421069,40.9800088 C-0.895789309,35.4600088 -2.01578931,25.3900088 3.51421069,18.4900088 L13.5142107,6 C19.0342107,-0.899991212 29.1042107,-2.00999121 36.0042107,3.51000879 L633.994211,471.020009 Z"]},_t={CLICK:Ee,DISABLED:I,MOUSEDOWN:qe,NOT_CLICK:vt,NOT_DISABLED:M,NOT_PRESENT:he,PRESENT:se},wt={COMPLETED:M,NOT_COMPLETED:I,NOT_SEEN:he,ACTIVE:Ge,NOT_ACTIVE:We,SEEN:se},Ct={CLICK:"is clicked",DISABLED:"is disabled",MOUSEDOWN:"has mouse down on it",NOT_CLICK:"is not clicked",NOT_DISABLED:"is not disabled",NOT_PRESENT:"is not present",PRESENT:"is present"};function yt(t){return Ct[t]}const Nt={COMPLETED:"completed",NOT_COMPLETED:"not completed",NOT_SEEN:"not seen",ACTIVE:"is currently active",NOT_ACTIVE:"is not currently active",SEEN:"seen"};function xt(t){return Nt[t]}function St(t,n){let s=(n||"").toLowerCase();return(t.eventTimeOperator===O.RELATIVE_BETWEEN?t.eventRelativeValue2:t.eventRelativeValue)!==1&&(s+="s"),t.eventTimeOperator!==O.RELATIVE_GT&&(s+=" ago"),s}function Tt(t){return(t.eventFrequencyOperator===A.BETWEEN?t.eventFrequencyValue2:t.eventFrequencyValue)===1?"time":"times"}const Ot={CURRENT_USER:"by current user in any company",CURRENT_USER_CURRENT_GROUP:"by current user in current company",CURRENT_GROUP:"by any user in current company"};function Dt(t){return Ot[t]}function It(t){if(!t)return"";switch(t){case A.BETWEEN:return"between";case A.EQ:return"exactly";case A.GTE:return"at least";case A.LTE:return"at most"}}function Ft(t){if(!t)return"";switch(t){case O.ANY:return"at any point in time";case O.RELATIVE_BETWEEN:return"between";case O.RELATIVE_GT:return"in the last";case O.RELATIVE_LT:return"more than"}}const Lt={1:"Lowest",2:"Low",3:"Medium",4:"High",5:"Highest"};function Pt(t){return`${Lt[t]||String(t)} priority`}function te(t,n){switch(t){case H.DAY:return n===1?"day":"days";case H.HOUR:return n===1?"hour":"hours";case H.MINUTE:return n===1?"minute":"minutes";case H.SECOND:return n===1?"second":"seconds"}}function me(t){switch(t){case"USER":return re;case"GROUP":return ze;case"GROUP_MEMBERSHIP":return je;case"EVENT":return be}}function Rt(t){const n=t.split("/");if(n.length===1)return["USER",t];switch(n[0]){case"group":return["GROUP",n[1]];case"group_membership":return["GROUP_MEMBERSHIP",n[1]];case"event":return["EVENT",n[1]]}return console.warn("parseAttributeDefinitionFqn: Invalid attribute definition FQN",t),["USER",t]}const Ut={[R.BANNER]:"banner",[R.CHECKLIST]:"checklist",[R.FLOW]:"flow",[R.EMBED]:"embed",[R.LAUNCHER]:"launcher",[R.RESOURCE_CENTER]:"resource center"};function At(t,{title:n,plural:s}={}){let r=Ut[t];return n&&(r=ee.upperFirst(r)),s&&(r+="s"),r}const Mt=["yyyy-MM-dd","yyyy/MM/dd","MM-dd yyyy","MM/dd yyyy","MM-dd-yyyy","MM/dd/yyyy","MM-dd","MM/dd","dd MMM yyyy","dd MMMM yyyy","MMM dd yyyy","MMMM dd yyyy","dd MMM","dd MMMM","MMM dd","MMMM dd"],kt=["hh:mmaaa","hh.mmaaa","hh:mm aaa","hh.mm aaa","HH:mm","HH.mm","hhaaa","hh aaa","HH"];for(const t of Mt)for(const n of kt);const Vt="d MMM yyyy";function pe(t){if(t==null)return"";const n=Bt?t.getMinutes()===0?"h aaa":"h:mm aaa":"HH:mm";return ae(t,Vt+", "+n)}function Ht(t){if(!t)return null;const n=dt(t,"yyyy-MM-dd",new Date);return isNaN(n.valueOf())?null:n}function ge(t){if(!t)return null;const n=mt(t);return isNaN(n.valueOf())?null:n}const Bt=Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale,{hour:"numeric"}).resolvedOptions().hourCycle==="h12";var Te=(t=>(t.EVENT="EVENT",t.GROUP="GROUP",t.GROUP_MEMBERSHIP="GROUP_MEMBERSHIP",t.USER="USER",t))(Te||{});function j(){const[t,n]=i.useState(!1),s=i.useRef(null),r=i.useCallback(()=>n(!0),[]),a=i.useCallback(()=>n(!1),[]),o=i.useCallback(()=>n(!0),[]),l=i.useCallback(()=>n(!1),[]);return{ref:s,hovered:t,eventHandlers:{onPointerEnter:r,onPointerLeave:a,onFocus:o,onBlur:l}}}function fe(t){return({condition:n})=>{throw new Error(`conditionOperators.${n.operator}.${t} is not supported`)}}const Z={[d.ABSOLUTE_EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"on")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[d.ABSOLUTE_GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"after")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[d.ABSOLUTE_LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"before")," ",e.createElement("span",{className:"nowrap text-bold"},J(t.value)))},[d.AND]:{Preview:fe("Preview")},[d.BETWEEN]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is between")," ",e.createElement("b",null,t.value)," ",e.createElement("span",{className:"text-secondary"},"and")," ",e.createElement("b",null,t.value2))},[d.CONTAINS]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"contains")," ",e.createElement("b",null,t.value))},[d.EMPTY]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is empty")},[d.ENDS_WITH]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"ends with")," ",e.createElement("b",null,t.value))},[d.EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is")," ",e.createElement("b",null,t.dataType===de.FLOW&&t.value?e.createElement("span",null,t?.eventDisplayName??t.eventName):t.value))},[d.EXCLUDES_ALL]:{Preview:({condition:t})=>q(t,"does not include","all of")},[d.EXCLUDES_ANY]:{Preview:({condition:t})=>q(t,"does not include","at least one of")},[d.FALSE]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is false")},[d.GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is greater than")," ",e.createElement("b",null,t.value))},[d.GTE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is greater than or equal to")," ",e.createElement("b",null,t.value))},[d.INCLUDES_ALL]:{Preview:({condition:t})=>q(t,"includes","all of")},[d.INCLUDES_ANY]:{Preview:({condition:t})=>q(t,"includes","at least one of")},[d.LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is less than")," ",e.createElement("b",null,t.value))},[d.LTE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is less than or equal to")," ",e.createElement("b",null,t.value))},[d.NE]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"is not")," ",e.createElement("b",null,t.dataType===de.FLOW&&t.value?e.createElement("span",null," ",t?.eventDisplayName??t.eventName):t.value))},[d.NOT_CONTAINS]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not contain")," ",e.createElement("b",null,t.value))},[d.NOT_EMPTY]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"has any value")},[d.NOT_REGEX]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not match")," ",e.createElement("b",null,t.value))},[d.OR]:{Preview:fe("Preview")},[d.REGEX]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"matches")," ",e.createElement("b",null,t.value))},[d.RELATIVE_EQ]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"exactly")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[d.RELATIVE_GT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"less than")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[d.RELATIVE_LT]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"more than")," ",e.createElement("span",{className:"nowrap text-bold"},Q(t.value))," ",e.createElement("span",{className:"text-secondary"},"ago"))},[d.STARTS_WITH]:{Preview:({condition:t})=>e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"starts with")," ",e.createElement("b",null,t.value))},[d.TRUE]:{Preview:()=>e.createElement("span",{className:"text-secondary"},"is true")},[d.URL]:{Preview:({condition:t})=>{const{urlPattern:n}=t;if(!n)return e.createElement("span",{className:"text-secondary"},"matches ...");const{includes:s,excludes:r}=n;return e.createElement(e.Fragment,null,s.length>0&&e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"matches")," ",s.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",null,a)))),s.length>0&&r.length>0&&e.createElement("span",{className:"text-secondary"}," and "),r.length>0&&e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},"does not match")," ",r.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",null,a)))))}}};function qt(t){return parseInt(t,10)}function Q(t){if(!t)return"days";const n=qt(t);return isNaN(n)?"days":n+" "+(n===1?"day":"days")}function J(t){if(!t)return"";const n=Ht(t);return n?ae(n,"PP"):""}function q(t,n,s){const r=t.values||[];return e.createElement(e.Fragment,null,e.createElement("span",{className:"text-secondary"},n+(r.length>1?" "+s:""))," ",r.map((a,o)=>e.createElement(e.Fragment,{key:o},o>0&&e.createElement("span",{className:"text-secondary"},", "),e.createElement("b",{key:o},a))))}const ie=t=>({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":t===!0,"userflow-debugger-condition__item__danger":t===!1,"userflow-debugger-condition__item__intermediate":t===null}),ce=t=>t===!0?D:t===!1?I:F,Oe=(t,n)=>{const s=S();return i.useMemo(()=>{const o=(n?s?.hiddenCondition?.breakdown:s?.startCondition?.breakdown)?.find(l=>l.conditionId===t.id);return{classes:ie(o?.match),icon:ce(o?.match)}},[t,s,n])},W=t=>{const{condition:n,isHideCond:s}=t,{classes:r,icon:a}=Oe(n,s),o=n.type;if(o===N.CLAUSE)return e.createElement(Wt,{...t});const l=Ie[o];return e.createElement("div",{className:g(r)},e.createElement("span",{className:"d-flex gap-8 align-center userflow-debugger-condition__item__icon"},l.icon?e.createElement(m,{icon:l.icon({condition:n})}):null,e.createElement(l.Preview,{...t})),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:a}))},Gt=()=>{const t=S(),[n,s]=i.useState(!1),r=i.useMemo(()=>t?.hiddenCondition?.breakdown.find(o=>o.conditionId===t?.hiddenCondition?.condition.id),[t?.hiddenCondition]);return t?.hiddenCondition?.condition?e.createElement("div",{role:"button",className:g({"d-flex gap-8 flex-column margin-8":!0,"userflow-debugger-condition__clause":!0,"userflow-debugger-hide-condition__clause__success":r?.match===!0,"userflow-debugger-hide-condition__clause__danger":r?.match===!1,"userflow-debugger-hide-condition__clause__expanded":n}),onClick:a=>{s(!n),a.stopPropagation()}},e.createElement("div",{className:"d-flex gap-8 justify-space-between align-center"},e.createElement("span",null,"Termporarily hide flow"," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to ",n?"collapse":"expand")),e.createElement(m,{icon:k})),n&&e.createElement(W,{isRoot:!0,isHideCond:!0,condition:t?.hiddenCondition?.condition})):null},Wt=({condition:t,isRoot:n=!1,isHideCond:s=!1})=>{const[r,a]=i.useState(!1),{classes:o,icon:l}=Oe(t,s);return n?e.createElement(e.Fragment,null,t.conditions.map((c,p)=>e.createElement(W,{isHideCond:s,key:p,condition:c}))):e.createElement("div",{role:"button",className:g({"d-flex flex-column gap-8":!0,"userflow-debugger-condition__clause":r,...r?{"userflow-debugger-condition__item__success__expanded":o["userflow-debugger-condition__item__success"],"userflow-debugger-condition__item__danger__expanded":o["userflow-debugger-condition__item__danger"],"userflow-debugger-condition__item__intermediate__expanded":o["userflow-debugger-condition__item__intermediate"]}:o}),onClick:c=>{a(!r),c.stopPropagation()}},e.createElement("div",{className:"d-flex justify-space-between align-center w-full"},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:et})," ",e.createElement("strong",null,"Logic Group")," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to ",r?"collapse":"expand")),!r&&e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:l})),r&&e.createElement(e.Fragment,null,t.conditions.map((c,p)=>e.createElement("div",{key:p,className:g({"userflow-debugger-condition__clause__operator__wrapper":!0})},p>0&&e.createElement("div",{className:g({"userflow-debugger-condition__clause__operator":!0})},e.createElement(De,{condition:t})),e.createElement(W,{isHideCond:s,condition:c})))))},De=({condition:t})=>{const n=t.operator;return n?e.createElement("span",{className:g({"userflow-debugger-condition__item__operator":!0,"userflow-debugger-condition__item__operator__and":n===d.AND,"userflow-debugger-condition__item__operator__or":n===d.OR})},n===d.AND&&"AND",n===d.OR&&"OR"):null},jt={[T.NONE]:I,[T.PENDING_SCHEDULE]:I,[T.SCHEDULED]:F,[T.FIRED]:D},zt=e.memo(()=>{const t=S(),{waitTimer:n}=t||{},s=t?.startCondition?.condition.waitTime,{ref:r,hovered:a,eventHandlers:o}=j();return!s||!n||n===T.NONE?null:e.createElement("div",{ref:r,...o,className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__danger":n===T.PENDING_SCHEDULE,"userflow-debugger-condition__item__intermediate":n===T.SCHEDULED,"userflow-debugger-condition__item__success":n===T.FIRED})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:Ye}),e.createElement("span",null,"Wait ",e.createElement("strong",null,s)," seconds")),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:jt[n]}),e.createElement(z,{target:r,hovered:a&&n===T.PENDING_SCHEDULE},"Timer activates once all conditions are satisfied"))}),Yt=e.memo(()=>{const t=S(),[n,s]=i.useState(!1),{startFrequency:r,listFlowLatestVersion:a}=t||{startFrequency:{}};if(!r||!a?.startFrequency||a?.startFrequency===U.NEVER)return null;const{currentFlowIntervalThrottle:o,frequency:l,frequencyUsage:c}=r,p=ce(l),_=ie(l);if(a.startFrequency===U.ONCE||a.startFrequency===U.ONCE_PER_GROUP)return e.createElement("div",{className:g(_)},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:ve}),e.createElement("strong",null,"Once per user"," ",a.startFrequency===U.ONCE_PER_GROUP&&"per company")),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:p}));if(a.startFrequency===U.ALWAYS&&a.startIntervalValue&&a.startIntervalUnit)return e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":o===!0,"userflow-debugger-condition__item__intermediate":o===!1})},e.createElement("span",null,"Every ",e.createElement("strong",null,a.startIntervalValue)," ",e.createElement("span",{className:"userflow-debugger-info-text"},te(a.startIntervalUnit,a.startIntervalValue)," ","apart")),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:o===!1?F:D}));if(a.startFrequency===U.MULTIPLE){const E=l===!0&&o===!0,h=l===!0&&o===!1,x=l===!1;return e.createElement("div",{className:g({"d-flex flex-column gap-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__clause":n,...n?{"userflow-debugger-condition-frequency__success__expanded":E,"userflow-debugger-condition-frequency__intermediate__expanded":h,"userflow-debugger-condition-frequency__danger__expanded":x}:{"userflow-debugger-condition-frequency__success":E,"userflow-debugger-condition-frequency__intermediate":h,"userflow-debugger-condition-frequency__danger":x}}),onClick:y=>{s(!n),y.stopPropagation()}},e.createElement("div",{className:"d-flex gap-8 justify-space-between"},e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement("strong",null,"Start multiple times")," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to expand")),!n&&e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:E?D:h?F:I})),n&&e.createElement(e.Fragment,null,e.createElement("div",{className:g(_)},e.createElement("span",null,e.createElement("strong",null,a.startLimit)," ",e.createElement("span",{className:"userflow-debugger-info-text"},"(started ",c," times)")),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:p})),a.startIntervalUnit&&a.startIntervalValue&&e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":o===!0,"userflow-debugger-condition__item__intermediate":o===!1})},e.createElement("span",null,e.createElement("strong",null,a.startIntervalValue)," ",e.createElement("span",{className:"userflow-debugger-info-text"},te(a.startIntervalUnit,a.startIntervalValue)," ","apart")),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:o===!1?F:D}))))}return null}),Xt=()=>{const t=S(),{priority:n}=t||{};return n?.priority?e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__priority":!0})},e.createElement("span",null,e.createElement("strong",null,Pt(n?.priority))," ",e.createElement("span",{className:"userflow-debugger-info-text"},"Click to learn more")),e.createElement("a",{href:"https://docs.userflow.com/docs/trouble/using-the-debugger#flow-trigger-precedence",target:"_blank",rel:"noreferrer noopener"},e.createElement(m,{icon:_e}))):null},Kt=()=>{const t=S(),{startFrequency:n}=t||{},{onlyIfNotCompleted:s}=n||{};return s==null?null:e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":s===!0,"userflow-debugger-condition__item__danger":s===!1})},"Only if not completed",e.createElement(m,{icon:s===!0?D:I}))},$t=()=>{const t=S(),{startFrequency:n}=t||{},{hovered:s,eventHandlers:r,ref:a}=j();return!n||n?.scopeByGroup===null||n.scopeByGroup===void 0||n.scopeByGroup===!0?null:e.createElement("div",{ref:a,...r,className:g({"d-flex align-center margin-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__danger":!0})},"Constrain to current company",e.createElement(m,{icon:ce(n.scopeByGroup)}),e.createElement(z,{target:a,hovered:s},"User is not associated with a company"))},Zt=()=>{const t=S(),{startFrequency:n,listFlowLatestVersion:s}=t||{},{anyFlowIntervalThrottle:r}=n||{},{throttleUnit:a,throttleValue:o}=s||{};return r===null||a===null||o===null||a===void 0||o===void 0?null:e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__success":r===!0,"userflow-debugger-condition__item__intermediate":r===!1})},e.createElement("span",null,"Atleast ",e.createElement("strong",null,s?.throttleValue)," ",te(a,o)," after any flow"),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:r===!0?D:F}))},Qt=e.memo(()=>{const{hovered:t,eventHandlers:n,ref:s}=j(),r=S(),{snoozed:a}=r||{},o=i.useMemo(()=>{if(a?.until)return ae(new Date(a.until),"MMM do, h:mm a")},[a?.until]);return a?e.createElement("div",{ref:s,...n,className:g({"d-flex align-center margin-8":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__item__intermediate":!0})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:Xe}),e.createElement("span",null,"This flow is currently ",e.createElement("strong",null,"snoozed"))),e.createElement(m,{dataAttrs:{"data-condition-status":"true"},icon:F}),e.createElement(z,{target:s,hovered:t},"Snoozed until ",o)):null}),Ie={[N.PAGE]:{icon:()=>Ke,Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,"URL"," ",e.createElement("strong",null,n&&e.createElement(n.Preview,{condition:t})))}},[N.ATTRIBUTE]:{icon:({condition:t})=>{if(!t||!t.attributeName)return me(Te.EVENT);const[n]=Rt(t.attributeName);return me(n)},Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,e.createElement("strong",null,t.attributeDisplayName?t.attributeDisplayName:"Attribute")," ",e.createElement("span",{className:"userflow-debugger-info-text"},n&&e.createElement(n.Preview,{condition:t})))}},[N.SEGMENT]:{icon:()=>$e,Preview:({condition:t})=>{const{segment:n}=t;return e.createElement("span",null,e.createElement("strong",null,n?.subjectType===Ue.GROUP?"Company":"User")," ",e.createElement("span",{className:"text-secondary"},t.operator===d.FALSE?"is not in":"is in")," ",e.createElement("strong",null,n?.name||"Segment"))}},[N.ELEMENT]:{icon:({condition:t})=>t.elementState?_t[t.elementState]:Ze,Preview:({condition:t})=>e.createElement("span",null,"Element"," ",t.elementState&&e.createElement("strong",null,yt(t.elementState)))},[N.INPUT_VALUE]:{icon:()=>Qe,Preview:({condition:t})=>{const n=t.operator&&Z[t.operator];return e.createElement("span",null,"The value of input"," ",e.createElement("strong",null,n&&e.createElement(n.Preview,{condition:t})))}},[N.FILLED_IN_INPUT]:{icon:()=>Je,Preview:()=>e.createElement("span",null,"User fills an input")},[N.FLOW]:{icon:({condition:t})=>t.flowState?wt[t.flowState]:se,Preview:({condition:t})=>e.createElement("span",null,t.flow?e.createElement(e.Fragment,null,At(t.flow.type,{title:!0})," ",e.createElement("strong",null,t.flow.name)):"Flow/checklist"," ",t.flowState&&xt(t.flowState))},[N.TIME]:{icon:()=>ve,Preview:({condition:t})=>{const n=t.value?ge(t.value):null,s=n&&e.createElement("strong",{style:{whiteSpace:"nowrap"}},pe(n)),r=t.value2?ge(t.value2):null,a=r&&e.createElement("strong",{style:{whiteSpace:"nowrap"}},pe(r));return s&&a?e.createElement("span",null,"Current time is between ",s," and ",a):s?e.createElement(e.Fragment,null,"Current time is after ",s):a?e.createElement(e.Fragment,null,"Current time is before ",a):e.createElement(e.Fragment,null,"Current time is ...")}},[N.EVENT]:{icon:()=>be,Preview:({condition:t})=>{const{ref:n,hovered:s,eventHandlers:r}=j();return e.createElement("div",{ref:n,...r},e.createElement("strong",null,t.eventDisplayName?t.eventDisplayName:"Event")," ",e.createElement("span",{className:"userflow-debugger-info-text"},It(t.eventFrequencyOperator))," ",e.createElement("strong",null,t.eventFrequencyValue),t.eventFrequencyOperator===A.BETWEEN&&e.createElement(e.Fragment,null," ",e.createElement("span",{className:"userflow-debugger-info-text"},"and")," ",e.createElement("strong",null,t.eventFrequencyValue2))," ",e.createElement("span",{className:"userflow-debugger-info-text"},Tt(t),","," ",Ft(t.eventTimeOperator)),t.eventTimeOperator!==O.ANY&&e.createElement(e.Fragment,null," ",e.createElement("strong",null,t.eventRelativeValue),t.eventTimeOperator===O.RELATIVE_BETWEEN&&e.createElement(e.Fragment,null," ",e.createElement("span",{className:"userflow-debugger-info-text"},"and")," ",e.createElement("strong",null,t.eventRelativeValue2))," ",e.createElement("span",{className:"userflow-debugger-info-text"},St(t,t.eventRelativeUnit))),t.eventActor&&t.eventActor!==Ae.CURRENT_USER?e.createElement(e.Fragment,null," ",e.createElement("strong",null,Dt(t.eventActor))):"",t.whereCondition&&s&&e.createElement(z,{hovered:!0,target:n},"Where ",e.createElement("br",null),e.createElement(Fe,{condition:t.whereCondition})))}},[N.ALWAYS_TRUE]:{icon:()=>D,Preview:()=>e.createElement("span",null,"Water is wet")},[N.CHECKLIST_TASK_CLICKED]:{icon:()=>Ee,Preview:()=>e.createElement("span",null,"Task is clicked")}},Fe=t=>e.createElement("div",null,t.condition.conditions.map((n,s)=>e.createElement("div",{key:n.id}," ",s===0?null:e.createElement("span",{className:"userflow-debugger-info-text"},t.condition.operator?.toLowerCase())," ",n.type==="ATTRIBUTE"&&Ie.ATTRIBUTE.Preview({condition:n,isRoot:!0,isHideCond:!1}),n.type==="CLAUSE"&&e.createElement(e.Fragment,null,"(",e.createElement(Fe,{condition:n}),")")))),z=({hovered:t,children:n,target:s})=>{const r=oe();return t?e.createElement(Ce,{className:"userflow-debugger-popover",target:s.current,placement:"top",horizontalAlign:"center",verticalAlign:"center",document:r?.current?.contentDocument||void 0},n):null};class Jt extends e.PureComponent{constructor(n){super(n),this.rootRef=e.createRef(),this.optionsElRef=e.createRef(),this.input=null,this.popoverRef=e.createRef(),this.isMouseDown=!1,this.isCreateOpen=!1,this.setInput=s=>{this.input=s;const{inputRef:r}=this.props;r&&(typeof r=="function"?r(s):r.current=s)},this.onInputChange=s=>{s.stopPropagation();const{value:r}=s.target;r!==""&&this.openPopover();const a=this.memoizedFilterOptions(this.props.options,r);this.setState({inputValue:r,q:r,highlightedIndex:a.length>0?0:-1,createHighlighted:a.length===0}),r===""&&!this.props.noEmpty&&this.triggerOnChange(null),this.props.onSearchChange&&this.props.onSearchChange(r)},this.onPopoverPlacementChange=s=>this.setState({popoverPlacement:s}),this.onMouseDown=s=>{s.preventDefault(),this.isMouseDown=!0;const r=()=>{this.isMouseDown=!1,this.props.document?.removeEventListener("mouseup",r),document.body.removeEventListener("mouseup",r)};this.props.document?.addEventListener("mouseup",r),document.body.addEventListener("mouseup",r)},this.onFocus=s=>{this.input&&!this.props.noSearch&&this.input.select(),this.props.onFocus&&this.props.onFocus(s)},this.onBlur=s=>{this.isMouseDown||this.closePopover(),this.props.onBlur&&!this.isCreateOpen&&this.props.onBlur(s)},this.onClose=()=>{this.state.popoverOpen&&this.closePopover(),this.props.onClose&&this.props.onClose()},this.onTriggerClick=()=>{this.props.readOnly||this.props.disabled||(this.state.popoverOpen?this.closePopover():(this.input&&this.input.focus(),this.openPopover()))},this.onKeyDown=s=>{const{popoverOpen:r,highlightedIndex:a,createHighlighted:o}=this.state,l=this.getFilteredOptions(),c=l.length-1;switch(s.key){case"ArrowUp":s.preventDefault(),r&&(o?this.setState({highlightedIndex:c,createHighlighted:!1}):a>0&&this.setState({highlightedIndex:a-1}));break;case"ArrowDown":s.preventDefault(),r?this.props.onCreate&&(a===c||o)?this.setState({highlightedIndex:-1,createHighlighted:!0}):a<c&&this.setState({highlightedIndex:a+1}):this.props.noOpenOnDown||this.openPopover();break;case"Enter":if(r)if(s.preventDefault(),o&&!this.props.disableCreate)this.fireOnCreate();else{const p=l[a];p||!this.props.noEmpty?this.selectOption(p):!p&&this.props.hideOnEmpty&&this.props.onEnter&&this.props.onEnter()}else this.props.onEnter?this.props.onEnter():this.openPopover();break;case"Tab":r&&!this.props.ignoreTab&&this.selectOption(l[a]);break;case"Escape":r&&(s.preventDefault(),s.stopPropagation(),this.setState({popoverOpen:!1}));break}},this.selectOption=s=>{s===this.props.value?this.setState({popoverOpen:!1,inputValue:this.renderOptionText(s),q:""}):(this.setState({popoverOpen:!1,inputValue:"",q:""}),this.triggerOnChange(s))},this.highlightOption=s=>{this.setState({highlightedIndex:s,createHighlighted:!1})},this.highlightCreate=()=>{this.setState({highlightedIndex:-1,createHighlighted:!0})},this.fireOnCreate=()=>{const{onCreate:s}=this.props;if(s){this.isCreateOpen=!0;const r={q:ee.upperFirst(this.state.q),callback:a=>{this.isCreateOpen=!1,a!=null&&this.selectOption(a),this.input&&this.input.focus()}};s(r),this.closePopover()}},this.openPopover=()=>{if(!this.state.popoverOpen){const s=this.getFilteredOptions();let r=0,a=!1;if(s.length===0)r=-1,a=!0;else{const{value:o}=this.props,l=s.findIndex(c=>c===o);l!==-1&&(r=l)}this.setState({popoverOpen:!0,highlightedIndex:r,createHighlighted:a})}},this.memoizedFilterOptions=pt((s,r)=>(s=s||[],r?s.filter(a=>this.filter(a,r)):s)),this.state={inputValue:this.renderOptionText(n.value==null?null:n.value),q:"",popoverOpen:!1,popoverPlacement:null,highlightedIndex:-1,createHighlighted:!1}}componentDidUpdate(n,s){const{value:r}=this.props;if(r!==n.value){const a=this.renderOptionText(r??null);a!==this.state.inputValue&&this.setState({inputValue:a})}s.highlightedIndex!==this.state.highlightedIndex&&this.scrollHighlightedOptionIntoView()}render(){let n,s=!1;const{props:r}=this,a=this.state,o=a.popoverPlacement==="top"?"above":"below";if(a.popoverOpen&&this.rootRef.current){const c=this.getFilteredOptions();if(this.props.hideOnEmpty&&c.length===0)s=!0;else{let p;if(c.length>0){let _=null;p=c.reduce((E,h,x)=>{const y=this.getOptionGroup(h);y&&y!==_&&E.push(e.createElement("div",{key:"group:"+y,className:"combo-box__group-header"},y)),_=y;const u=["combo-box__option"];return x===a.highlightedIndex&&u.push("combo-box__option--highlighted"),this.props.optionClassName&&u.push(this.props.optionClassName),E.push(e.createElement(en,{key:this.getOptionKey(h,x),className:u.join(" "),option:h,idx:x,renderOptionText:r.renderOptionText,renderOptionItem:r.renderOptionItem,getOptionIcon:r.getOptionIcon,onClick:this.selectOption,onHover:this.highlightOption})),r.hasSeparatorAfter&&r.hasSeparatorAfter(h)&&E.push(e.createElement("div",{key:"sep-"+x,className:"combo-box__option-sep"})),E},[])}else r.loading?p=e.createElement("div",{className:"combo-box__no-results"},"Loading..."):p=e.createElement("div",{className:"combo-box__no-results"},"No matching ",r.nounPlural||"items");n=e.createElement(Ce,{ref:this.popoverRef,className:"combo-box-popover"+(r.popoverNotch?"":` combo-box-popover--${o}`),noNotch:!r.popoverNotch,target:this.rootRef.current,forceDimension:!0,matchWidth:!0,minWidth:r.popoverMinWidth,onMouseDown:this.onMouseDown,onPlacementChange:this.onPopoverPlacementChange,document:r.document},e.createElement("div",{ref:this.optionsElRef,className:g({"combo-box__options":!0,"combo-box__options--with-create":!!r.onCreate})},p),r.onCreate&&e.createElement("div",{key:"create",className:g({"combo-box__option":!0,"combo-box__option--create":!0,"combo-box__option--highlighted":a.createHighlighted}),onClick:this.fireOnCreate,onMouseMove:this.highlightCreate},e.createElement("div",{className:"combo-box__create-icon"},e.createElement(G,{icon:tt})),e.createElement("div",{className:"combo-box__create-text"},"Create"," ",a.q===""?"new"+(r.noun?` ${r.noun}`:""):e.createElement("b",null,ee.upperFirst(a.inputValue)))))}}const l=["input-group","combo-box"];return a.popoverOpen&&!s&&(l.push("combo-box--open"),r.popoverNotch||l.push(`combo-box--with-popover-${o}`)),r.disabled&&l.push("input-group--disabled"),r.noSearch&&l.push("combo-box--no-search"),r.className&&l.push(r.className),e.createElement(e.Fragment,null,e.createElement("div",{className:l.join(" "),style:{width:r.width?r.width+"px":void 0},ref:this.rootRef,onClick:r.readOnly||r.disabled?void 0:()=>{this.input?.focus(),this.openPopover()}},r.childrenBefore,r.value&&r.getOptionIcon&&e.createElement("div",{className:"combobox__input-icon"},Pe(r.value,r.getOptionIcon)),e.createElement("input",{type:"text",className:r.inputClassName,name:r.name,value:a.inputValue,onChange:this.onInputChange,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,onMouseDown:this.openPopover,placeholder:r.placeholder,readOnly:r.readOnly||r.noSearch,disabled:r.disabled,autoComplete:"off",ref:this.setInput,...r.inputHtmlAttributes}),!r.noTrigger&&e.createElement("div",{"data-testid":r.triggerTestId||"combo-box-trigger",className:"input-group__append input-group__trigger",onClick:this.onTriggerClick,onMouseDown:this.onMouseDown},e.createElement(G,{icon:nt})),r.onClose&&e.createElement("div",{className:"input-group__append input-group__trigger",onClick:this.onClose},e.createElement(G,{icon:rt})),r.childrenAfter),n)}scrollHighlightedOptionIntoView(){const n=this.optionsElRef.current;if(this.state.popoverOpen&&n){const s=n.querySelector(".combo-box__option--highlighted");if(s){const r=n.getBoundingClientRect(),a=s.getBoundingClientRect();a.top<r.top?n.scrollTop+=a.top-r.top:a.bottom>r.bottom&&(n.scrollTop+=a.bottom-r.bottom)}}}triggerOnChange(n){const{onChange:s}=this.props;s&&s(n)}closePopover(){this.setState({popoverOpen:!1,inputValue:this.renderOptionText(this.props.value==null?null:this.props.value),q:""})}renderOptionText(n){return n==null?"":Le(n,this.props.renderOptionText)}getFilteredOptions(){return this.memoizedFilterOptions(this.props.options,this.state.q)}filter(n,s){return this.props.filter?this.props.filter(n,s):this.renderOptionText(n).toLowerCase().includes(s.toLowerCase())}getOptionKey(n,s){return n&&n.id||s}getOptionGroup(n){return this.props.getOptionGroup?this.props.getOptionGroup(n):n&&n.group||null}}class en extends e.PureComponent{constructor(){super(...arguments),this.state={isOptionDisabled:!1},this.onClick=()=>{this.state.isOptionDisabled||this.props.onClick(this.props.option)},this.onHover=()=>{this.state.isOptionDisabled||this.props.onHover(this.props.idx)}}componentDidMount(){const n=this.props.option!==void 0&&typeof this.props.option=="object"&&this.props.option!==null&&"disabled"in this.props.option&&this.props.option.disabled===!0;this.setState({isOptionDisabled:n})}componentDidUpdate(){const n=this.props.option!==void 0&&typeof this.props.option=="object"&&this.props.option!==null&&"disabled"in this.props.option&&this.props.option.disabled===!0;this.setState({isOptionDisabled:n})}render(){const{isOptionDisabled:n}=this.state,{props:s}=this;return e.createElement("div",{className:g({[s.className]:!0,"combo-box__option--disabled":n}),onClick:this.onClick,onMouseMove:this.onHover},tn(s.option,s.renderOptionText,s.renderOptionItem,s.getOptionIcon))}}function Le(t,n){return n?n(t):typeof t=="string"||typeof t=="number"?t:t?t.name:"?"}function tn(t,n,s,r){if(s)return s(t);{let a=Le(t,n);return r?e.createElement("div",{className:"d-flex align-flex-start"},e.createElement("div",{className:"combobox__option-icon"},Pe(t,r)),e.createElement("div",{className:"flex-1"},a)):a}}function Pe(t,n){const s=n(t);return nn(s)?e.createElement(G,{icon:s}):s}function nn(t){return gt(t)&&"iconName"in t}const rn=({selectedFlow:t,setSelectedFlow:n,flows:s,debugAutoStartCondition:r})=>{const a=L(),o=oe();i.useEffect(()=>{if(!t)return;r(t.latestVersion);const c=()=>{r(t.latestVersion)};return a.on("private:checkSessionsAck",c),document.addEventListener("visibilitychange",c),()=>{a.off("private:checkSessionsAck",c),document.removeEventListener("visibilitychange",c)}},[t]);const l=i.useCallback(c=>{!c||t?.latestVersion?.id===c.latestVersion.id||n(c)},[t]);return e.createElement(e.Fragment,null,e.createElement("div",{className:"d-flex align-center justify-space-between"},e.createElement("div",{className:"d-flex justify-space-between align-center"},"Select Flow"),e.createElement(Jt,{className:"userflow-debugger__flow__selector",value:t,options:s,placeholder:"Select flow",document:o?.current?.contentDocument||void 0,onChange:l,renderOptionItem:c=>c.name})),e.createElement(sn,{selectedFlow:t,selectedFlowVersionsId:t?.latestVersion?.id}))},sn=({selectedFlowVersionsId:t,selectedFlow:n})=>{const s=L(),[r,a]=i.useState(!1),o=S(),l=o&&o?.activeFlow?.id===n?.id;return i.useEffect(()=>(a(!1),s.on("private:setFlowSession",c=>{a(c===t)}),()=>{s.off("private:setFlowSession",()=>a(!1))}),[t]),i.useEffect(()=>{l||a(!1)},[l]),o?.activeFlow===null?null:e.createElement(e.Fragment,null,o?.locale?.match===!1&&e.createElement("div",{className:g(ie(!1))},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:I}),e.createElement("span",null,"The flow will not auto start ",e.createElement("br",null)," ",e.createElement("b",null,"User locale (",o?.locale?.code,") is not enabled.")))),r?e.createElement("div",{className:g({"d-flex align-center fade-in":!0,"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex align-center gap-8"},e.createElement(m,{icon:k}),e.createElement("span",null,"This flow ",e.createElement("strong",null,"just")," started"))):null,l&&!r&&e.createElement("div",{className:g({"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex align-center gap-8"},e.createElement(m,{icon:k}),e.createElement("span",null,"This flow is currently active"))),!l&&o&&e.createElement("div",{className:g({"userflow-debugger-condition__item":!0,"userflow-debugger-condition__flow__status":!0})},e.createElement("span",{className:"d-flex gap-8 align-center"},e.createElement(m,{icon:k,size:16}),e.createElement("span",null,"Another flow is currently active"))))},an=t=>{const[n,s]=i.useState(document.visibilityState==="visible"),r=i.useRef(t);return i.useEffect(()=>{r.current=t},[t]),i.useEffect(()=>{const a=()=>{const o=document.visibilityState==="visible";s(o),r.current?.(o)};return document.addEventListener("visibilitychange",a),()=>{document.removeEventListener("visibilitychange",a)}},[]),n},on=({close:t})=>{const n=L(),s=i.useRef(null),[r,a]=i.useState(!!n.clientToken),[o,l]=i.useState(()=>{const f=n.getSessionStorageState(),v=f?.debuggerApp?.x,C=f?.debuggerApp?.y||50;return{x:v??(document.body.clientWidth?Number(document.body.clientWidth)-450:50),y:C}}),[c,p]=i.useState(!1),_=i.useRef(null),{meta:E}=V(),{debuggerRoute:h}=le(),[x,y]=i.useState(!1),u=i.useRef(null),w=i.useRef({mouseX:0,mouseY:0,elementX:0,elementY:0});i.useEffect(()=>{o&&n.setSessionStorageState(f=>({...f,debuggerApp:{...f.debuggerApp,x:o.x,y:o.y}}))},[o]),i.useEffect(()=>{if(!c)return;const f=C=>{const P=C.clientX-w.current.mouseX,Y=C.clientY-w.current.mouseY,X=Math.min(w.current.elementX+P,window.document.body.clientWidth-200),K=Math.max(w.current.elementY+Y,0);u.current||(u.current=requestAnimationFrame(()=>{l({x:X,y:K}),u.current=null}))},v=()=>{p(!1)};return document.addEventListener("mousemove",f),document.addEventListener("mouseup",v),()=>{document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",v),u.current&&(cancelAnimationFrame(u.current),u.current=null)}},[c,o]),i.useEffect(()=>{const f=()=>{l(C=>{const P=document.body.clientWidth-500,Y=document.body.clientHeight-100,X=Math.max(Math.min(C.x,P),0),K=Math.max(Math.min(C.y,Y),0);return{x:X,y:K}})},v=()=>{a(!!n.clientToken)};return window.addEventListener("resize",f),n.on("private:initialised",v),()=>{window.removeEventListener("resize",f),n.off("private:initialised",v)}},[]);const b=f=>{s.current&&(p(!0),f.preventDefault())};return e.createElement("div",{ref:s,style:{left:"0",top:"0",position:"absolute",willChange:"transform",transform:`translate3d(${o.x}px, ${o.y}px, 0)`,zIndex:1234620}},e.createElement("div",{onMouseDown:b,style:{height:"50px",cursor:"move",userSelect:"none",position:"absolute",width:"50px"}}),e.createElement(Ve,{title:"Debugger",stylesheet:ft,style:{borderRadius:"8px",width:"400px",height:h==="checkAutoStart"?"600px":r?"500px":"400px"},elRef:_,onStylesheetsLoad:y},e.createElement(Ne.Provider,{value:_},e.createElement("div",{className:"d-flex flex-column userflow-debugger-app",style:{visibility:x?"visible":"hidden"}},e.createElement("div",{className:"d-flex justify-space-between userflow-debugger-app__header"},e.createElement(bt,null),e.createElement("div",{className:"d-flex align-center userflow-debugger-app__title"},e.createElement(He,null),e.createElement("span",null,"Userflow debugger")),e.createElement("button",{role:"button",className:"userflow-debugger-app__close",onClick:()=>{n.getSessionStorageState().debuggerApp&&n.setSessionStorageState(f=>({...f,debuggerApp:null})),t()}},e.createElement("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M12.1836 4.49609L8.90234 7.77734L12.1562 11.0312C12.4297 11.2773 12.4297 11.6875 12.1562 11.9336C11.9102 12.207 11.5 12.207 11.2539 11.9336L7.97266 8.67969L4.71875 11.9336C4.47266 12.207 4.0625 12.207 3.81641 11.9336C3.54297 11.6875 3.54297 11.2773 3.81641 11.0039L7.07031 7.75L3.81641 4.49609C3.54297 4.25 3.54297 3.83984 3.81641 3.56641C4.0625 3.32031 4.47266 3.32031 4.74609 3.56641L8 6.84766L11.2539 3.59375C11.5 3.32031 11.9102 3.32031 12.1836 3.59375C12.4297 3.83984 12.4297 4.25 12.1836 4.49609Z",fill:"white"})))),e.createElement(ln,null),h==="verifySetup"&&e.createElement(cn,null),E?.endUser?.debuggerEnabled&&h==="checkAutoStart"&&e.createElement(un,null),h==="currentUser"&&e.createElement(dn,null)))))},ln=()=>{const t=L(),{meta:n}=V(),[s,r]=i.useState(!1),{debuggerRoute:a,setDebuggerRoute:o}=le(),l=t.isIdentified(),c=ht(()=>r(!1));return i.useEffect(()=>{n&&n?.endUser.debuggerEnabled===!1&&a==="checkAutoStart"&&o("verifySetup")},[n]),l?e.createElement("div",{ref:c},e.createElement("div",{className:"d-flex align-center justify-space-between userflow-debugger-menu",onClick:()=>r(!s)},e.createElement("div",{className:g({"d-flex align-center":!0,"userflow-debugger-menu__title":!0,"userflow-debugger-menu__title--open":s})},e.createElement(m,{icon:B[a].icon}),e.createElement("span",null,B[a].name)),e.createElement("button",{className:"userflow-debugger-menu__toggle"},e.createElement(m,{icon:st}))),s&&e.createElement("ul",{className:"userflow-debugger-menu__list"},Object.keys(B).map(p=>{if(!n?.endUser?.debuggerEnabled&&p==="checkAutoStart")return null;const _=B[p];return e.createElement("li",{key:p,className:"d-flex align-center userflow-debugger-app__item",onClick:()=>{o&&o(p),r(!1)}},e.createElement(m,{icon:_.icon}),_.name)}))):null},cn=()=>{const{meta:t,buildId:n}=V(),s=L(),[r,a]=i.useState(!!s.clientToken),o=i.useMemo(()=>s.isIdentified(),[s,t]),{setDebuggerRoute:l}=le();i.useEffect(()=>{const E=()=>{a(!!s.clientToken)};return s.on("private:initialised",E),()=>{s.off("private:initialised",E)}},[]);const c=i.useMemo(()=>{let E=$;const h={"d-flex flex-column gap-8":!0,"userflow-debugger-installation__step":!0};return r?(E=M,h["userflow-debugger-installation__step__success"]=!0):(E=it,h["userflow-debugger-installation__step__danger"]=!0),{icon:E,classes:h}},[r]),p=i.useMemo(()=>{let E=$;const h={"d-flex flex-column gap-8":!0,"userflow-debugger-installation__step":!0};return!r&&!o&&(E=$,h["userflow-debugger-installation__step__failed"]=!0),r&&!o&&(E=k,h["userflow-debugger-installation__step__warning"]=!0),r&&o&&(E=M,h["userflow-debugger-installation__step__success"]=!0),{icon:E,classes:h}},[r,o]),_=()=>o?t?.endUser.debuggerEnabled?e.createElement(e.Fragment,null,e.createElement("span",{className:"userflow-debugger-details"},t?.env.company.name),e.createElement("span",{className:"userflow-debugger-details"},t?.env.name)):e.createElement("div",{className:"userflow-debugger-details__access__denied"},"The"," ",e.createElement("button",{onClick:()=>l("currentUser")},"currently signed-in user")," ","does not have debugger access"):e.createElement(e.Fragment,null,e.createElement("span",{className:"userflow-debugger-details"},"Unknown company"),e.createElement("span",{className:"userflow-debugger-details"},"Unknown environment"));return e.createElement("div",{className:"space-evenly userflow-debugger-app__content"},e.createElement("div",{className:"userflow-debugger-installation__steps"},e.createElement("div",{className:g({"d-flex gap-8 flex-column":!0,"userflow-debugger-installation__step":!0,"userflow-debugger-installation__step__success":!0})},e.createElement(m,{icon:M,size:32}),"Userflow ",e.createElement("br",null),"installed"),e.createElement("div",{className:g(c.classes)},e.createElement(m,{icon:c.icon,size:32}),"Userflow ",e.createElement("br",null)," ",r?"":"not"," initialized"),e.createElement("div",{className:g(p.classes)},e.createElement(m,{icon:p.icon,size:32}),"User ",e.createElement("br",null)," ",o&&r?"":"not"," ","identified")),!r&&!o&&e.createElement("div",{className:g({"d-flex gap-8 flex-column":!0,"userflow-debugger-installation__not__initialized":!0})},"Remember to initialize Userflow by calling",e.createElement("div",null,"userflow.init('YOUR_USERFLOW_TOKEN')")),r&&e.createElement("div",{className:"d-flex gap-8 flex-column userflow-debugger-details__wrapper"},e.createElement("div",{className:"userflow-debugger-details__env__details"},e.createElement("div",{className:"d-flex gap-8 flex-column justify-space-around"},e.createElement(m,{size:20,icon:at}),e.createElement(m,{size:20,icon:ot})),e.createElement("div",{className:"d-flex flex-column align-flex-start gap-8"},_())),e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement(m,{size:20,icon:lt}),e.createElement("span",{className:"userflow-debugger-details"},s.getInitToken())),e.createElement("div",{className:"d-flex gap-8 align-center"},e.createElement(m,{size:20,icon:re}),e.createElement("span",{className:"userflow-debugger-details"},o?s.getIdentifiedUser()?.externalId:"User not identified"))),e.createElement("div",{className:"userflow-debugger-installation__version"},e.createElement("a",{href:"https://docs.userflow.com/docs/dev/userflow-js-installation",target:"_blank",rel:"noreferrer"},"Visit the Userflow Developer Docs for help")," ",e.createElement("br",null),"Userflow.js version 0.1.",n))},un=()=>{const t=L(),{debuggerClientConditions:n}=V(),[s,r]=i.useState(void 0),[a,o]=i.useState([]),[l,c]=i.useState(),p=i.useMemo(()=>{if(l?.startCondition?.match===!1||l?.hiddenCondition?.match===!0||l?.locale?.match===!1)return!1;const u=l?.startFrequency;return!(u&&(u.onlyIfNotCompleted===!1||u.scopeByGroup===!1||u.frequency===!1))},[l]);i.useEffect(()=>{_()},[]),an(u=>{u&&_()}),i.useEffect(()=>{s&&x(s.latestVersion)},[s]);const _=async()=>{y().then(u=>{if(u?.length&&(o(u),!s)){const w=t.getSessionStorageState()?.debuggerApp?.selectedFlowVersionId,b=u.find(f=>f.latestVersion.id===w);h(b??u[0])}})},E=we.debounce(async u=>{const w=[];for(const[v,C]of n.entries())w.push({conditionId:v,isTrue:C.isTrue});const b={kind:"DebugFlowAutostartCondition",flowVersionId:u.id,clientConditions:w},f=await t.send(b);c({...f,listFlowLatestVersion:u}),f.latestVersion?.id&&u.id!==f.latestVersion?.id&&(y().then(v=>{if(!v)return;o(v);const C=v?.find(P=>P.latestVersion.id===f.latestVersion?.id);C&&h(C)}),E(f.latestVersion))},300),h=u=>{r(u);const w=t.getSessionStorageState().debuggerApp;w&&w?.x&&t.setSessionStorageState(b=>({...b,debuggerApp:{...w,selectedFlowVersionId:u.latestVersion.id}}))},x=async u=>{n.forEach(b=>{b.untrack?.()}),n.clear();const{conditionTypes:w}=await Me(async()=>{const{conditionTypes:b}=await import("./flow-condition-types.js").then(f=>f.f);return{conditionTypes:b}},__vite__mapDeps([0,1,2,3,4,5,6,7]));for(const b of u.clientConditions){n.set(b.id,{condition:b,isTrue:null});const f=w[b.type];if(!f){console.error(`Unknown condition type ${b.type}`);continue}const v=n.get(b.id);v&&(v.untrack=f.track({sessionData:new ke([]),condition:b,callback:C=>{v.isTrue!==C&&(v.isTrue=C,E(u))}}))}},y=async()=>{try{return(await t.send({kind:"ListFlows",hasAutostartCondition:!0},{handlesRejection:!0})).flows?.filter(b=>b.type==="FLOW")}catch(u){u.code==="debugger_access_denied"&&ne("Access defined for List Flows");return}};return e.createElement("div",{className:"userflow-debugger-app__content"},e.createElement(ye.Provider,{value:l},e.createElement(rn,{flows:a,selectedFlow:s,setSelectedFlow:h,debugAutoStartCondition:E}),e.createElement("div",{className:"d-flex flex-column gap-8 userflow-debugger-app__wrapper"},l?.startCondition?.condition&&e.createElement("div",null,e.createElement("div",{className:g({"d-flex gap-8 align-center":!0,"userflow-debugger-app__wrapper__passing":p,"userflow-debugger-app__wrapper__failed":!p})},e.createElement(m,{icon:p?ct:ut}),e.createElement("strong",null,"Auto-start conditions")),e.createElement("span",null,"These are"," ",e.createElement(De,{condition:l.startCondition.condition}),e.createElement("b",null,"-conditions"),", meaning"," ",l.startCondition.condition.type==="CLAUSE"&&l.startCondition.condition.operator==="AND"&&e.createElement(e.Fragment,null,"all conditions must pass for the flow to start."),l.startCondition?.condition.type==="CLAUSE"&&l.startCondition.condition.operator==="OR"&&e.createElement(e.Fragment,null,"only one condition must pass for the flow to start."))),l?.startCondition?.condition&&e.createElement(W,{isRoot:!0,isHideCond:!1,condition:l.startCondition.condition}),e.createElement(zt,null),e.createElement(Yt,null),e.createElement(Kt,null),e.createElement(Zt,null),e.createElement(Xt,null),e.createElement(Gt,null),e.createElement($t,null),e.createElement(Qt,null))))},dn=e.memo(()=>{const{meta:t,buildId:n}=V();if(!t)return null;const r="https://app.userflow.com/app/"+(t.env.primary?t.env.company.slug:`${t.env.company.slug}@${t.env.slug}`)+"/settings/debugger?external_id="+t.endUser.externalId;return e.createElement("div",{className:"d-flex flex-column space-evenly flex-1"},e.createElement("div",{className:"d-flex flex-column gap-8"},e.createElement("div",{className:"d-flex flex-column"},t.endUser.avatarUrl?e.createElement("img",{src:t.endUser.avatarUrl,className:"userflow-debugger-user__image"}):e.createElement("div",{className:"userflow-debugger-user__image"}),e.createElement("span",{className:"userflow-debugger-user__name"},t.endUser?.name||"Unknown name"),e.createElement("span",{className:"userflow-debugger-user__email"},t?.endUser?.email||"Unknown email address"),(!t.endUser.email||!t.endUser.name)&&e.createElement("span",{className:"userflow-debugger__external__id"},t.endUser.externalId)),!t.endUser.debuggerEnabled&&e.createElement(e.Fragment,null,e.createElement("div",{className:"userflow-debugger-user__info"},"This user doesn't have access to the Userflow debugger. You can grant access through the debugger settings in Userflow."),e.createElement("a",{className:"userflow-debugger-user__button",href:r,target:"_blank",rel:"noreferrer"},"Grant access in Userflow ",e.createElement(m,{icon:_e})))),e.createElement("div",{className:"userflow-debugger-installation__version"},e.createElement("a",{href:"https://docs.userflow.com/docs/dev/userflow-js-installation",target:"_blank",rel:"noreferrer"},"Visit the Userflow Developer Docs for help")," ",e.createElement("br",null),"Userflow.js version 0.1.",n))});class Hn{constructor(n,s){this.client=n,this.buildId=s,this.debuggerClientConditions=new Map}mount(){if(this.container)throw new Error("UI has already been mounted");this.container=document.createElement("div"),this.container.id="userflow-debugger-ui",document.body.appendChild(this.container),ue.render(e.createElement(mn,{client:this.client,debuggerClientConditions:this.debuggerClientConditions,buildId:this.buildId,unmount:()=>this.unmount()}),this.container)}unmount(){this.container&&(ue.unmountComponentAtNode(this.container),document.body.contains(this.container)&&document.body.removeChild(this.container),this.client.unMountDebugger(),delete this.container)}}const mn=({client:t,debuggerClientConditions:n,buildId:s,unmount:r})=>{const[a,o]=i.useState(void 0),l=we.debounce(async()=>{try{const c=await t.send({kind:"GetCurrentEndUser"},{handlesRejection:!0});o(c)}catch(c){c.code==="debugger_access_denied"&&ne("debugger access denied"),o(void 0)}},300);return i.useEffect(()=>(l(),document.addEventListener("visibilitychange",l),t.on("private:identified",l),()=>{document.removeEventListener("visibilitychange",l),t.off("private:identified",l)}),[]),e.createElement(Re.Provider,{value:t},e.createElement(xe.Provider,{value:{meta:a,debuggerClientConditions:n,buildId:s}},e.createElement(Et,null,e.createElement(on,{close:r}))))};export{Hn as DebuggerUI};
|
|
3
3
|
//# sourceMappingURL=DebuggerUI.js.map
|
package/EmbedApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,R as l}from"./vendor.react.js";import{
|
|
1
|
+
import{r as o,R as l}from"./vendor.react.js";import{O as m,E as K}from"./userflow.js";import{u as P,i as k}from"./client-context.js";import{o as M}from"./vendor.obj-str.js";import{u as U,a as Y,g as q,D as Z}from"./stylesheets.js";import{C as G}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{u as J,S as Q,b as V}from"./use-selector-element-monitoring.js";import{w as X,f as ee}from"./flow-host.styl.js";import{r as te}from"./vendor.react-dom.js";import{F as re}from"./Frame.js";import{h as d}from"./roots.js";import{u as ne}from"./use-element-rect.js";import{C as oe}from"./ChecklistUI.js";import"./vendor.core-js.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-i18next.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.scheduler.js";import"./use-window-resize.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},a=new Error().stack;a&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[a]="b4025ec3-876c-46f3-93d7-e7e6086d9943",r._sentryDebugIdIdentifier="sentry-dbid-b4025ec3-876c-46f3-93d7-e7e6086d9943")}catch{}})();const ke=({session:r,checklistSession:a})=>{const p=P(),{version:i}=r,t=i.embed,y=U(i.theme),L=r.locale?r.locale.standardLocaleId:r.version.theme.languageId,b=r.version.embed?.blocks||[],S=b.length===1&&b[0]?.type==="CHECKLIST";o.useEffect(()=>{k.changeLanguage(L)},[L]);const e=o.useRef(null);o.useLayoutEffect(()=>{e.current=document.createElement("div")},[]);const[N,v]=o.useState(!1),{loaded:D}=Y(window,ee,y),[F,I]=o.useState(!1),h=D&&F,[A,_]=o.useState(0),j=o.useCallback(()=>{I(!1),_(n=>n+1)},[]),E=![m.BODY_FIRST,m.BODY_LAST].includes(t.embedMode),[f,x]=o.useState(null),B=o.useCallback(({targetEl:n})=>{x(n)},[]),O=o.useCallback(()=>{E&&console.warn(`Userflow.js: Could not find embed element for banner "${r.flow.name||r.flow.id}"`),x(null)},[E,r.flow.name,r.flow.id]);J({selector:t.embedSelector,targetMoved:B,targetLost:O});const[T,$]=o.useState(!1),c=o.useCallback(()=>{const n=e.current;n&&n.parentElement&&(n.parentElement.removeChild(n),v(!1))},[e]),W=o.useCallback(()=>{r.kind==="embed"&&($(!0),p.endFlow(r,{endReason:K.USER_CLOSED}),c())},[c,r,p]);o.useLayoutEffect(()=>{try{if(S&&!a){c();return}if(!e.current?.parentElement){if(E&&!f){c();return}switch(t.embedMode){case m.BODY_FIRST:document.body.insertAdjacentElement("afterbegin",e.current);break;case m.BODY_LAST:document.body.insertAdjacentElement("beforeend",e.current);break;case m.ELEMENT_FIRST:f.insertAdjacentElement("afterbegin",e.current);break;case m.ELEMENT_LAST:f.insertAdjacentElement("beforeend",e.current);break;case m.ELEMENT_BEFORE:f.insertAdjacentElement("beforebegin",e.current);break;case m.ELEMENT_AFTER:f.insertAdjacentElement("afterend",e.current);break;default:document.body.insertAdjacentElement("afterbegin",e.current)}v(!0),j()}}catch(n){console.error("Error during element insertion:",n)}},[c,e,E,f,i.embed?.overlay,i.embed?.sticky,t.embedMode,j,a]);const g=n=>M({"userflowjs-embed":!0,[`userflowjs-embed--embed-mode-${t.embedMode}`]:!0,[`userflowjs-embed--animate-${String(t.animate)}`]:n&&t.animate});o.useLayoutEffect(()=>{e.current&&(e.current.className=g(!1))},[e,t.embedMode,t.animate]);const w=t.zIndex||X(0);o.useLayoutEffect(()=>{e.current&&(e.current.style.zIndex=w==null?"":String(w),e.current.style.position=h?"":"absolute",e.current.style.visibility=h?"":"hidden")},[e,w,h]);const{height:u,setEl:H}=ne();o.useLayoutEffect(()=>{e.current&&e.current.style.setProperty("--userflowjs-embed-height",u&&d(u+(t.marginTop||0)+(t.marginBottom||0))||"0px")},[e,u,t.marginTop,t.marginBottom]);const z=()=>{if(!r.version.embed?.blocks?.length)return null;const n=(s,C)=>l.createElement("div",{className:"userflowjs-embed-wrapper",key:C},l.createElement("div",{className:"userflowjs-bubble-toolbar"},r.draftMode&&l.createElement("div",{className:"userflowjs-bubble-draft"},"Preview"),!i.closeDisabled&&l.createElement("button",{"data-testid":"userflow-embed-dismiss",className:"userflowjs-bubble-toolbar-button",onClick:W,"aria-label":"Close embed"},l.createElement(Z,{icon:G}))),s);return b.map(s=>{switch(s.type){case"CHECKLIST":return a?n(l.createElement("div",{style:{...q(y),paddingTop:i.closeDisabled?"0px":"32px"},className:"userflowjs-embedded-checklist"},l.createElement(oe,{session:a})),s.id):null;default:return console.warn(`Unknown embed block type: ${s.type}`),null}})};return o.useLayoutEffect(()=>{const n=`userflow-${r.id}`;return e.current.id=n,()=>{T||document.getElementById(n)===e.current&&c()}},[e,r.id,c,T]),o.useLayoutEffect(()=>{const n=r.version.embed?.blocks?.length&&r.version.embed.blocks.some(s=>s.type==="CHECKLIST"?a:!1);u&&u>0&&n?(e.current.style.height=`${u}px`,e.current.className=g(t.animate)):(e.current.style.height="0px",e.current.className=g(!1))},[e,u,a,t.animate]),o.useEffect(()=>{if(!e.current)return;const n=new ResizeObserver(C=>{for(const R of C)R.contentRect&&!t.embedMode&&(e.current.style.height=`${R.contentRect.height}px`)}),s=e.current.querySelector("iframe");return s&&n.observe(s),()=>{n.disconnect()}},[e,t.embedMode]),!N||!b.length||S&&!a?null:te.createPortal(l.createElement(Q.Provider,{value:r},l.createElement(re,{key:A,className:"userflowjs-embed-frame",style:{maxWidth:t.maxWidth?d(t.maxWidth):"100%",width:"100%",height:r.version.embed?.blocks?.length?"100%":"auto",minHeight:0,marginTop:d(t.marginTop),marginRight:d(t.marginRight),marginBottom:d(t.marginBottom),marginLeft:d(t.marginLeft),borderRadius:d(t.borderRadius)},stylesheet:V,theme:y,onStylesheetsLoad:I,title:"Embedded Content"},l.createElement("div",{ref:H,className:M({"userflowjs-embed-root":!0,[`userflowjs-embed-root--content-layout-${t.contentLayout}`]:!0,"userflowjs-theme-root":!0,"userflowjs-embed-root-blocks":b.length>0}),dir:k.dir(),style:{width:"100%",maxWidth:t.maxContentWidth?d(t.maxContentWidth):"100%",margin:"0 auto"}},z()))),e.current)};export{ke as EmbedApp,ke as default};
|
|
2
2
|
//# sourceMappingURL=EmbedApp.js.map
|
package/FlowApp.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{R as n,r as d}from"./vendor.react.js";import{E as B,P as ce,
|
|
1
|
+
import{R as n,r as d}from"./vendor.react.js";import{E as B,P as ce,I as F,q as k,V as P,J as ue,F as de,T as x,H as C,K as pe,L as fe,M as me,U as G}from"./userflow.js";import{l as be}from"./vendor.lodash.js";import"./vendor.core-js.js";import{u as _}from"./vendor.react-i18next.js";import{B as K,F as Ee}from"./FlowChrome.js";import{m as ge,d as X,R as we,i as he,g as ve,c as Te,u as Se,r as ye,e as W,h as ke,S as Me}from"./use-selector-element-monitoring.js";import{g as Q,i as Z}from"./flow-condition-types.js";import{u as D,i as Be}from"./client-context.js";import{z as Ie,e as Fe,r as De}from"./roots.js";import{a as J,S as Le}from"./flow-host.styl.js";import{b as Re}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as Ne,u as Ce}from"./stylesheets.js";import{T as Ae}from"./Trigger.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./Frame.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./use-window-resize.js";import"./logomark.js";import"./vendor.obj-str.js";import"./vendor.canvas-confetti.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new Error().stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="eb5bfd54-4739-4872-aa81-e40719773367",e._sentryDebugIdIdentifier="sentry-dbid-eb5bfd54-4739-4872-aa81-e40719773367")}catch{}})();const Pe=()=>{const{t:e}=_(),s=D(),{dispatch:t,restart:o}=R(),{session:l,step:p}=M(),a="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return n.createElement("div",{role:"dialog","aria-modal":L(p)?"true":void 0,"aria-label":"Guide menu"},n.createElement("div",{className:"userflowjs-bubble-menu__title"},e("menu.title")),n.createElement("button",{className:a,onClick:()=>s.endFlow(l,{endReason:B.USER_CLOSED})},e("menu.close")),l.version.restartEnabled&&n.createElement("button",{className:a,onClick:o},e("menu.restart")),n.createElement("button",{className:a,onClick:()=>t({kind:"showFlow"})},e("menu.back")))},z=({progress:e,type:s,position:t,totalSteps:o})=>{const{t:l}=_(),p=d.useMemo(()=>parseFloat(e||"0"),[e]),a=d.useMemo(()=>({width:`${p*100}%`}),[p]),c=d.useMemo(()=>s===ce.DEFAULT?F.TOP:t,[s,t]),u=c===F.BOTTOM?"userflowjs-bubble-progress--bottom":"",m=d.useMemo(()=>`userflowjs-bubble-progress--${be.kebabCase(s||"DEFAULT").toLowerCase()} ${u}`,[s,u]),i=o||0,r=d.useMemo(()=>Math.min(Math.floor(p*i),i),[p,i]);return n.createElement(n.Fragment,null,(s==="CHAINED_ROUNDED"||s==="CHAINED_SQUARED"||s==="DOTTED")&&n.createElement("div",{className:m},Array.from({length:3}).map((E,b)=>n.createElement("div",{key:b,className:`userflowjs-bubble-progress-step ${b<Math.floor(p*3)?"userflowjs-bubble-progress-step_completed":""}`}))),s==="NARROW"&&n.createElement("div",{className:m},n.createElement("div",{className:"linear-progress-bar"},n.createElement("div",{className:"userflowjs-bubble-progress--narrow-fill",style:a}))),s==="NUMBERED"&&n.createElement("div",{className:m},n.createElement("span",{className:"numbered-progress"},l("of",{replace:{range:i,selected:r}}))),!["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW","NUMBERED"].includes(s)&&n.createElement("div",{className:`${m} ${c===F.BOTTOM?"userflowjs-bubble-progress--bottom":""}`},n.createElement("div",{className:"userflowjs-bubble-progress__fill",style:a})))},xe=({theme:e})=>{const s=D(),{session:t,step:o,muted:l,shouldLabelDialog:p}=M(),{version:a}=t,{dispatch:c}=R(),u=a.steps[0],m=u&&u.id===o.id,i=m&&o.progress==="1",r=d.useMemo(()=>o.content&&ge(X(o.content),{buttons:o.buttons,questions:o.questions}),[o.content,o.buttons,o.questions]),E=a.steps.filter(T=>T.appearance!==k.HIDDEN),b=E.findIndex(T=>T.id===o.id),w=E.length,h=w>0?((b+1)/w).toString():"0";return n.createElement("div",{key:o.id,role:"alertdialog","aria-modal":L(o)?"true":void 0,"aria-label":p?"Guide":void 0},!i&&e.progressBarPosition==="TOP"&&e.progressBarEnabled&&n.createElement(z,{progress:h,type:e.progressBarType,position:o.appearance===k.MODAL?void 0:F.TOP,totalSteps:w}),n.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content","data-progress-position":e.progressBarPosition,"data-progress-type":e.progressBarType},n.createElement(we,{doc:r,lookupAttribute:Q(t.data),buttons:o.buttons,questions:o.questions})),n.createElement(K,{draftMode:t.draftMode,muted:l,toggleMuted:e.voiceType!==P.NONE?()=>c({kind:"toggleMuted"}):void 0,close:a.closeDisabled?void 0:()=>e.flowXButtonBehavior===ue.DISMISS||m?s.endFlow(t,{endReason:B.USER_CLOSED}):c({kind:"showMenu"})}),!i&&e.progressBarPosition==="BOTTOM"&&e.progressBarEnabled&&n.createElement(z,{progress:h,type:e.progressBarType,position:F.BOTTOM,totalSteps:w}))};function Oe(e,s){if(!e)return"";typeof e=="string"&&(e=X(e));const t=[],o=/[.!?;,]$/;function l(){const c=(t[t.length-1]||"").trim();c&&!c.match(o)&&t.push(".")}function p(c){if(he(c)){if(c.text&&!c.silent){const u=c.text.split(`
|
|
2
2
|
`);u.forEach((m,i)=>{t.push(m),i<u.length-1&&(l(),t.push(`
|
|
3
3
|
`))})}return}switch(c.type){case"attribute":{const u=ve(c,s);u&&t.push(u);break}default:a(c.children),["link"].includes(c.type)||(l(),t.push(`
|
|
4
4
|
|
|
5
|
-
`));break}}function a(c){c.forEach(u=>p(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=F(),{dispatch:o}=L(),{muted:l,session:p,step:a}=M(),c=t.getAudio();d.useEffect(()=>{const r=()=>{o({kind:"speechPlaying"})},E=()=>{o({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",E),c.addEventListener("pause",E),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",E),c.removeEventListener("pause",E),c.pause(),c.src="",o({kind:"speechStopped"})}},[o,c]),d.useEffect(()=>{if(t.audioReady)return;const r=e&&Ue(e)?e.contentWindow:null,E=()=>{window.removeEventListener("mousedown",b),r&&r.removeEventListener("mousedown",b)},b=()=>{E(),t.playAudio(null)};return window.addEventListener("mousedown",b),r&&r.addEventListener("mousedown",b),E},[e,t]);const u=d.useRef(p),m=d.useRef(s),i=d.useRef(a);return d.useEffect(()=>{u.current=p,m.current=s,i.current=a},[p,s,a]),d.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(w=>setTimeout(w,1)),r)return;const b=await je(t,u.current,m.current,i.current);r||b&&t.playAudio(b)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function je(e,s,t,o){if(t.voiceType===P.SYNTHETIC&&typeof t.syntheticVoice=="string"&&o.content){e.ensureIdentified();const l=Q(s.data),p=Oe(o.content,l);return e.getStepSpeech(t.syntheticVoice,p)}else if(t.voiceType===P.MANUAL&&o.speechAsset)return o.speechAsset.assetUrl;return null}function Ue(e){return e.tagName==="IFRAME"}const qe="userflowjs-out-of-viewport-pointer--visible",Ve="userflowjs-out-of-viewport-pointer--visible-up",He="userflowjs-out-of-viewport-pointer--visible-down",We=n.forwardRef((e,s)=>{const t=J();return n.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},n.createElement(Ne,{icon:Le}))});function ze({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const o=s.current;if(!o)return null;const l=o.getBoundingClientRect(),p=Ie(De());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>p&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function Y(e,s){const t=e.current;t&&(t.classList.toggle(qe,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ve,s.direction==="up"),t.classList.toggle(He,s.direction==="down")))}const Ye="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=M();return n.createElement(n.Fragment,null,s.beacons.map(t=>n.createElement(Ge,{key:t.id,beacon:t,theme:e})))},Ge=({beacon:e,theme:s})=>{const{session:t}=M(),o=J(),l=d.useRef(null),p=d.useRef(null),a=Te(e.hiddenCondition),c=d.useMemo(()=>Z(e.selector,t.data),[e.selector,t.data]),u=d.useCallback(({targetRect:i,clipEl:r,viewportClipRect:E})=>{const b=Xe({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:E,targetRect:i,theme:s}),w=b&&ze({subjectPosition:b.pointerSubjectPosition,pointerRef:p,viewportClipRect:E});ye(()=>{$(l,b),Y(p,w)})},[e]),m=d.useCallback(()=>{$(l,null),Y(p,null)},[]);return Se({selector:a?null:c,targetMoved:u,targetLost:m}),n.createElement(n.Fragment,null,n.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:o+2}},n.createElement("div",{className:"userflowjs-beacon__ring"}),n.createElement("div",{className:"userflowjs-beacon__ring"})),n.createElement(We,{ref:p}))};function Xe({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:o,targetRect:l,theme:p}){if(!s.current||l.width===0||l.height===0)return null;const c=p.beaconSize,u=p.beaconSize,m=Fe(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const E=i+c,b=r+u,w=Math.min(32,.5*u);let h;b<o.top+w?h="up":r>o.bottom-w?h="down":h=null;const T=h==null;return{top:r,right:E,bottom:b,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:T}}function $(e,s){const t=e.current;t&&(t.classList.toggle(Ye,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Ke=()=>{const{t:e}=_(),s=F(),{restart:t}=L(),{session:o,step:l}=M(),p=l.theme||o.version.theme,a=l.selector,c=!a||a.type===de.AUTO&&!a.autoData,u=()=>s.endFlow(o,{endReason:B.USER_CLOSED});return n.createElement(n.Fragment,null,n.createElement(X,{draftMode:o.draftMode,close:u}),o.draftMode&&c?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name),".")):o.draftMode&&p.tooltipMissingBehavior===x.END?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("p",null,n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found within"," ",p.tooltipMissingToleranceSeconds," ",parseFloat(p.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),n.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),n.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,"Read more in our"," ",n.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):n.createElement(n.Fragment,null,n.createElement("div",{className:"userflowjs-bubble-content"},o.draftMode&&n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,n.createElement("b",null,e("tooltipTargetMissing.line1"))),n.createElement("p",null,e("tooltipTargetMissing.line2"))),n.createElement("div",{className:"userflowjs-bubble-buttons"},n.createElement(W,{appearance:"primary",onClick:t,text:e("menu.restart")}),n.createElement(W,{appearance:"default",onClick:u,text:e("menu.close")}))))},A="flowsMuted",Ft=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const o=F(),[l,p]=d.useState(!1),[a,c]=d.useState(null),[u,m]=d.useReducer(Je,void 0,()=>{const f=e,g=O(f);return{...Ze,session:f,step:g,muted:!!C.getItem(A),autoFocusRequested:te(g)}}),{session:i,step:r,speechPlaying:E,contentType:b}=u,{version:w}=i,h=R(r);let T=0;r.questions.some(f=>f.type===pe.NPS)&&(T=420);const v=Ce(r.theme||w.theme),S=d.useMemo(()=>{let f=v.bubbleY;const g=s?.version.theme;return!t&&s&&g&&s.version.checklist?.launcherEnabled&&r.appearance===k.BUBBLE&&g.checklistLauncherPlacement===v.bubblePlacement&&(v.avatarType===fe.NONE||g.checklistLauncherX<v.bubbleX+v.avatarSize)&&(f=Math.max(v.bubbleY,g.checklistLauncherY+g.checklistLauncherHeight+v.bubbleY)),{...v,bubbleWidth:Math.max(v.bubbleWidth,T),bubbleY:f}},[t,s,r.appearance,v,T]);d.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const f=g=>{g.session.id===i.id&&m({kind:"goToStep",stepId:g.step.id})};return o.on("gotostep",f),()=>{o.off("gotostep",f)}},[o,i,e]);const se=d.useMemo(()=>({dispatch:m,restart:()=>{o.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[o,m,i]),re=d.useMemo(()=>r.selector&&Z(r.selector,i.data),[r.selector,i.data]),le=d.useCallback(()=>{ke(o,i,r.actions)},[o,i,r.actions]);d.useEffect(()=>{u.muted?C.setItem(A,"true"):C.removeItem(A)},[u.muted]);const j=i.locale?i.locale.standardLocaleId:S.languageId;d.useEffect(()=>{Be.changeLanguage(j)},[j]);const[U,ae]=d.useState(!1),ie=d.useCallback(f=>{ae(f),f&&o.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),f&&S.tooltipMissingBehavior===x.END&&!i.draftMode&&o.endFlow(i,{endReason:B.TOOLTIP_TARGET_MISSING})},[o,i,r.id,S.tooltipMissingBehavior]);return d.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!o.originalActiveElement&&o.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(o.originalActiveElement=document.activeElement);let f=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(f&&f.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const g=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");g&&(f=g)}f&&typeof f.focus=="function"&&f.focus({preventScroll:!0}),m({kind:"autoFocused"})},[o,a,l,u.autoFocusRequested]),d.useEffect(()=>{const f=a?.ownerDocument.defaultView;if(!f)return;const g=()=>{m({kind:"focusOut"}),delete o.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",g),f.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",g),f.removeEventListener("focusin",y)}},[a,o]),d.useEffect(()=>{if(!h||!a)return;const f=a.ownerDocument.defaultView,g=f?f.document:document,y=I=>{if(I.key==="Escape"&&!w.closeDisabled)o.endFlow(i,{endReason:B.USER_CLOSED});else if(I.key==="Tab"){const N=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),q=N[0],V=N[N.length-1],H=g.activeElement;I.shiftKey?H===q&&(I.preventDefault(),V.focus()):H===V&&(I.preventDefault(),q.focus())}};return window.addEventListener("keydown",y),f?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),f?.removeEventListener("keydown",y)}},[h,o,i,a,w.closeDisabled]),d.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const f=a?.ownerDocument.body;f&&(f.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),n.createElement(oe.Provider,{value:se},n.createElement(ne.Provider,{value:u},n.createElement(Me.Provider,{value:i},n.createElement(Re,null,n.createElement(Ee,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:b==="flow"&&!U&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===k.MODAL&&S.modalBackdropOnclick===me.DISMISS&&!w.closeDisabled?()=>o.endFlow(i,{endReason:B.USER_CLOSED}):void 0,speaking:E,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:p,bubbleFrameRootRef:c,confettiEnabled:r.confettiEnabled,rootChildren:f=>n.createElement(Qe,{...f,theme:S})},b==="menu"?n.createElement(Pe,null):U&&S.tooltipMissingBehavior!==x.BUBBLE?n.createElement(Ke,null):n.createElement(xe,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const o=M(),{step:l}=o,p=o.session.currentStep&&o.session.currentStep.id,[a,c]=d.useState(!1),u=d.useRef(p);return d.useEffect(()=>{e?c(!0):u.current!==p&&c(!1),u.current=p},[p,e]),n.createElement(n.Fragment,null,(e||a)&&o.contentType==="flow"&&n.createElement(n.Fragment,null,n.createElement(_e,{bubbleFrame:s,theme:t}),n.createElement($e,{theme:t})),l.triggers.map(m=>n.createElement(Ae,{key:m.id,trigger:m})))},Ze={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Je(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:o})=>o===e.step.crossVersionId)||O(s.session):t=O(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(o=>o.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function O(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const o=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!o)throw new G("Session points to an unknown step: "+s.crossVersionId);return o}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new G("Session has no current step and its version has no start step");return s}function te(e){return R(e)}function R(e){return e.appearance===k.MODAL||e.appearance===k.BUBBLE&&e.backdrop||e.appearance===k.TOOLTIP&&e.tooltipTargetBlocked}const oe=d.createContext(null),ne=d.createContext(null);function L(){return d.useContext(oe)}function M(){return d.useContext(ne)}export{Ft as FlowApp,ne as FlowStateContext,Ft as default,Ze as initialFlowState,R as isStepModal,L as useFlowDispatch,M as useFlowState};
|
|
5
|
+
`));break}}function a(c){c.forEach(u=>p(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=D(),{dispatch:o}=R(),{muted:l,session:p,step:a}=M(),c=t.getAudio();d.useEffect(()=>{const r=()=>{o({kind:"speechPlaying"})},E=()=>{o({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",E),c.addEventListener("pause",E),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",E),c.removeEventListener("pause",E),c.pause(),c.src="",o({kind:"speechStopped"})}},[o,c]),d.useEffect(()=>{if(t.audioReady)return;const r=e&&Ue(e)?e.contentWindow:null,E=()=>{window.removeEventListener("mousedown",b),r&&r.removeEventListener("mousedown",b)},b=()=>{E(),t.playAudio(null)};return window.addEventListener("mousedown",b),r&&r.addEventListener("mousedown",b),E},[e,t]);const u=d.useRef(p),m=d.useRef(s),i=d.useRef(a);return d.useEffect(()=>{u.current=p,m.current=s,i.current=a},[p,s,a]),d.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(w=>setTimeout(w,1)),r)return;const b=await je(t,u.current,m.current,i.current);r||b&&t.playAudio(b)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function je(e,s,t,o){if(t.voiceType===P.SYNTHETIC&&typeof t.syntheticVoice=="string"&&o.content){e.ensureIdentified();const l=Q(s.data),p=Oe(o.content,l);return e.getStepSpeech(t.syntheticVoice,p)}else if(t.voiceType===P.MANUAL&&o.speechAsset)return o.speechAsset.assetUrl;return null}function Ue(e){return e.tagName==="IFRAME"}const qe="userflowjs-out-of-viewport-pointer--visible",Ve="userflowjs-out-of-viewport-pointer--visible-up",He="userflowjs-out-of-viewport-pointer--visible-down",We=n.forwardRef((e,s)=>{const t=J();return n.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},n.createElement(Ne,{icon:Re}))});function ze({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const o=s.current;if(!o)return null;const l=o.getBoundingClientRect(),p=Ie(Fe());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>p&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function Y(e,s){const t=e.current;t&&(t.classList.toggle(qe,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ve,s.direction==="up"),t.classList.toggle(He,s.direction==="down")))}const Ye="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=M();return n.createElement(n.Fragment,null,s.beacons.map(t=>n.createElement(Ge,{key:t.id,beacon:t,theme:e})))},Ge=({beacon:e,theme:s})=>{const{session:t}=M(),o=J(),l=d.useRef(null),p=d.useRef(null),a=Te(e.hiddenCondition),c=d.useMemo(()=>Z(e.selector,t.data),[e.selector,t.data]),u=d.useCallback(({targetRect:i,clipEl:r,viewportClipRect:E})=>{const b=Ke({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:E,targetRect:i,theme:s}),w=b&&ze({subjectPosition:b.pointerSubjectPosition,pointerRef:p,viewportClipRect:E});ye(()=>{$(l,b),Y(p,w)})},[e]),m=d.useCallback(()=>{$(l,null),Y(p,null)},[]);return Se({selector:a?null:c,targetMoved:u,targetLost:m}),n.createElement(n.Fragment,null,n.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:o+2}},n.createElement("div",{className:"userflowjs-beacon__ring"}),n.createElement("div",{className:"userflowjs-beacon__ring"})),n.createElement(We,{ref:p}))};function Ke({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:o,targetRect:l,theme:p}){if(!s.current||l.width===0||l.height===0)return null;const c=p.beaconSize,u=p.beaconSize,m=De(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const E=i+c,b=r+u,w=Math.min(32,.5*u);let h;b<o.top+w?h="up":r>o.bottom-w?h="down":h=null;const T=h==null;return{top:r,right:E,bottom:b,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:T}}function $(e,s){const t=e.current;t&&(t.classList.toggle(Ye,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Xe=()=>{const{t:e}=_(),s=D(),{restart:t}=R(),{session:o,step:l}=M(),p=l.theme||o.version.theme,a=l.selector,c=!a||a.type===de.AUTO&&!a.autoData,u=()=>s.endFlow(o,{endReason:B.USER_CLOSED});return n.createElement(n.Fragment,null,n.createElement(K,{draftMode:o.draftMode,close:u}),o.draftMode&&c?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name),".")):o.draftMode&&p.tooltipMissingBehavior===x.END?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("p",null,n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found within"," ",p.tooltipMissingToleranceSeconds," ",parseFloat(p.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),n.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),n.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,"Read more in our"," ",n.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):n.createElement(n.Fragment,null,n.createElement("div",{className:"userflowjs-bubble-content"},o.draftMode&&n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,n.createElement("b",null,e("tooltipTargetMissing.line1"))),n.createElement("p",null,e("tooltipTargetMissing.line2"))),n.createElement("div",{className:"userflowjs-bubble-buttons"},n.createElement(W,{appearance:"primary",onClick:t,text:e("menu.restart")}),n.createElement(W,{appearance:"default",onClick:u,text:e("menu.close")}))))},A="flowsMuted",Dt=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const o=D(),[l,p]=d.useState(!1),[a,c]=d.useState(null),[u,m]=d.useReducer(Je,void 0,()=>{const f=e,g=O(f);return{...Ze,session:f,step:g,muted:!!C.getItem(A),autoFocusRequested:te(g)}}),{session:i,step:r,speechPlaying:E,contentType:b}=u,{version:w}=i,h=L(r);let T=0;r.questions.some(f=>f.type===pe.NPS)&&(T=420);const v=Ce(r.theme||w.theme),S=d.useMemo(()=>{let f=v.bubbleY;const g=s?.version.theme;return!t&&s&&g&&s.version.checklist?.launcherEnabled&&r.appearance===k.BUBBLE&&g.checklistLauncherPlacement===v.bubblePlacement&&(v.avatarType===fe.NONE||g.checklistLauncherX<v.bubbleX+v.avatarSize)&&(f=Math.max(v.bubbleY,g.checklistLauncherY+g.checklistLauncherHeight+v.bubbleY)),{...v,bubbleWidth:Math.max(v.bubbleWidth,T),bubbleY:f}},[t,s,r.appearance,v,T]);d.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const f=g=>{g.session.id===i.id&&m({kind:"goToStep",stepId:g.step.id})};return o.on("gotostep",f),()=>{o.off("gotostep",f)}},[o,i,e]);const se=d.useMemo(()=>({dispatch:m,restart:()=>{o.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[o,m,i]),re=d.useMemo(()=>r.selector&&Z(r.selector,i.data),[r.selector,i.data]),le=d.useCallback(()=>{ke(o,i,r.actions)},[o,i,r.actions]);d.useEffect(()=>{u.muted?C.setItem(A,"true"):C.removeItem(A)},[u.muted]);const j=i.locale?i.locale.standardLocaleId:S.languageId;d.useEffect(()=>{Be.changeLanguage(j)},[j]);const[U,ae]=d.useState(!1),ie=d.useCallback(f=>{ae(f),f&&o.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),f&&S.tooltipMissingBehavior===x.END&&!i.draftMode&&o.endFlow(i,{endReason:B.TOOLTIP_TARGET_MISSING})},[o,i,r.id,S.tooltipMissingBehavior]);return d.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!o.originalActiveElement&&o.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(o.originalActiveElement=document.activeElement);let f=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(f&&f.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const g=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");g&&(f=g)}f&&typeof f.focus=="function"&&f.focus({preventScroll:!0}),m({kind:"autoFocused"})},[o,a,l,u.autoFocusRequested]),d.useEffect(()=>{const f=a?.ownerDocument.defaultView;if(!f)return;const g=()=>{m({kind:"focusOut"}),delete o.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",g),f.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",g),f.removeEventListener("focusin",y)}},[a,o]),d.useEffect(()=>{if(!h||!a)return;const f=a.ownerDocument.defaultView,g=f?f.document:document,y=I=>{if(I.key==="Escape"&&!w.closeDisabled)o.endFlow(i,{endReason:B.USER_CLOSED});else if(I.key==="Tab"){const N=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),q=N[0],V=N[N.length-1],H=g.activeElement;I.shiftKey?H===q&&(I.preventDefault(),V.focus()):H===V&&(I.preventDefault(),q.focus())}};return window.addEventListener("keydown",y),f?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),f?.removeEventListener("keydown",y)}},[h,o,i,a,w.closeDisabled]),d.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const f=a?.ownerDocument.body;f&&(f.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),n.createElement(oe.Provider,{value:se},n.createElement(ne.Provider,{value:u},n.createElement(Me.Provider,{value:i},n.createElement(Le,null,n.createElement(Ee,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:b==="flow"&&!U&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===k.MODAL&&S.modalBackdropOnclick===me.DISMISS&&!w.closeDisabled?()=>o.endFlow(i,{endReason:B.USER_CLOSED}):void 0,speaking:E,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:p,bubbleFrameRootRef:c,confettiEnabled:r.confettiEnabled,rootChildren:f=>n.createElement(Qe,{...f,theme:S})},b==="menu"?n.createElement(Pe,null):U&&S.tooltipMissingBehavior!==x.BUBBLE?n.createElement(Xe,null):n.createElement(xe,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const o=M(),{step:l}=o,p=o.session.currentStep&&o.session.currentStep.id,[a,c]=d.useState(!1),u=d.useRef(p);return d.useEffect(()=>{e?c(!0):u.current!==p&&c(!1),u.current=p},[p,e]),n.createElement(n.Fragment,null,(e||a)&&o.contentType==="flow"&&n.createElement(n.Fragment,null,n.createElement(_e,{bubbleFrame:s,theme:t}),n.createElement($e,{theme:t})),l.triggers.map(m=>n.createElement(Ae,{key:m.id,trigger:m})))},Ze={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Je(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:o})=>o===e.step.crossVersionId)||O(s.session):t=O(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(o=>o.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function O(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const o=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!o)throw new G("Session points to an unknown step: "+s.crossVersionId);return o}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new G("Session has no current step and its version has no start step");return s}function te(e){return L(e)}function L(e){return e.appearance===k.MODAL||e.appearance===k.BUBBLE&&e.backdrop||e.appearance===k.TOOLTIP&&e.tooltipTargetBlocked}const oe=d.createContext(null),ne=d.createContext(null);function R(){return d.useContext(oe)}function M(){return d.useContext(ne)}export{Dt as FlowApp,ne as FlowStateContext,Dt as default,Ze as initialFlowState,L as isStepModal,R as useFlowDispatch,M as useFlowState};
|
|
6
6
|
//# sourceMappingURL=FlowApp.js.map
|