@flows/react/dist/index.js

Flows React SDK – Build native product growth experiences, your way

"use client"
"use strict";var _=Object.defineProperty,Qo=Object.defineProperties,Yo=Object.getOwnPropertyDescriptor,Zo=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertyNames,mo=Object.getOwnPropertySymbols;var co=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;var ao=(o,e,t)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,d=(o,e)=>{for(var t in e||(e={}))co.call(e,t)&&ao(o,t,e[t]);if(mo)for(var t of mo(e))ee.call(e,t)&&ao(o,t,e[t]);return o},I=(o,e)=>Qo(o,Zo(e));var te=(o,e)=>{for(var t in e)_(o,t,{get:e[t],enumerable:!0})},re=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of oe(e))!co.call(o,r)&&r!==t&&_(o,r,{get:()=>e[r],enumerable:!(n=Yo(e,r))||n.enumerable});return o};var ne=o=>re(_({},"__esModule",{value:!0}),o);var ke={};te(ke,{FlowsProvider:()=>Ho,FlowsSlot:()=>de,resetAllWorkflowsProgress:()=>xe,resetWorkflowProgress:()=>ge,startWorkflow:()=>ye,useCurrentFloatingBlocks:()=>q,useCurrentSlotBlocks:()=>j});module.exports=ne(ke);var U=require("react"),uo=()=>{},J=(0,U.createContext)({blocks:[],components:{},tourComponents:{},runningTours:[],removeBlock:uo,updateBlock:uo}),b=()=>(0,U.useContext)(J);var O=require("react");var lo=(o,{body:e,method:t,version:n})=>fetch(o,{method:t,headers:{"Content-Type":"application/json","x-flows-version":n},body:e?JSON.stringify(e):void 0}).then(async r=>{var s;let i=await r.text(),p=i?JSON.parse(i):void 0;if(!r.ok){let f=p;throw new Error((s=f==null?void 0:f.message)!=null?s:r.statusText)}return p}),$=(o,e)=>({getBlocks:t=>lo(`${o}/v2/sdk/blocks`,{method:"POST",body:t,version:e}),sendEvent:t=>lo(`${o}/v2/sdk/events`,{method:"POST",body:t,version:e})});var X=(o,e)=>{let t=new Set([...e.exitedBlockIds,...e.updatedBlocks.map(n=>n.id)]);return[...o.filter(n=>!t.has(n.id)),...e.updatedBlocks]};function xo(o){var e;return typeof o=="string"||typeof o=="symbol"?o:Object.is((e=o==null?void 0:o.valueOf)==null?void 0:e.call(o),-0)?"-0":String(o)}function go(o){let e=[],t=o.length;if(t===0)return e;let n=0,r="",i="",p=!1;for(o.charCodeAt(0)===46&&(e.push(""),n++);n<t;){let s=o[n];i?s==="\\"&&n+1<t?(n++,r+=o[n]):s===i?i="":r+=s:p?s==='"'||s==="'"?i=s:s==="]"?(p=!1,e.push(r),r=""):r+=s:s==="["?(p=!0,r&&(e.push(r),r="")):s==="."?r&&(e.push(r),r=""):r+=s,n++}return r&&e.push(r),e}function H(o){return o!==null&&(typeof o=="object"||typeof o=="function")}function yo(o,e){return o===e||Number.isNaN(o)&&Number.isNaN(e)}var se=/^(?:0|[1-9]\d*)$/;function ko(o,e=Number.MAX_SAFE_INTEGER){switch(typeof o){case"number":return Number.isInteger(o)&&o>=0&&o<e;case"symbol":return!1;case"string":return se.test(o)}}function ho(o){return typeof o=="symbol"||o instanceof Symbol}var ie=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,pe=/^\w*$/;function Bo(o,e){return Array.isArray(o)?!1:typeof o=="number"||typeof o=="boolean"||o==null||ho(o)?!0:typeof o=="string"&&(pe.test(o)||!ie.test(o))||e!=null&&Object.hasOwn(e,o)}var vo=(o,e,t)=>{let n=o[e];(!(Object.hasOwn(o,e)&&yo(n,t))||t===void 0&&!(e in o))&&(o[e]=t)};function wo(o,e,t,n){if(o==null&&!H(o))return o;let r=Bo(e,o)?[e]:Array.isArray(e)?e:typeof e=="string"?go(e):[e],i=o;for(let p=0;p<r.length&&i!=null;p++){let s=xo(r[p]),f;if(p===r.length-1)f=t(i[s]);else{let m=i[s],c=n(m);f=c!==void 0?c:H(m)?m:ko(r[p+1])?[]:{}}vo(i,s,f),i=i[s]}return o}function Q(o,e,t){return wo(o,e,()=>t,()=>{})}var bo=({block:o,exitNodeCb:e,removeBlock:t,setStateMemory:n})=>{var s,f,m;let r=({properties:c,parentKey:l})=>{var h;let a=d({},c);return Object.entries(c).forEach(([v,C])=>{Array.isArray(C)&&(a[v]=C.map((k,E)=>typeof k=="object"?r({properties:k,parentKey:[l,v,E].filter(F=>F!==void 0).join(".")}):k))}),delete a.f__exit_nodes,(h=c.f__exit_nodes)==null||h.forEach(v=>{let C=()=>e([l,v].filter(k=>k!==void 0).join("."));a[v]=C}),a},i=r({properties:o.data});for(let c of(s=o.propertyMeta)!=null?s:[])if(c.type==="state-memory"){let l={value:(f=c.value)!=null?f:!1,setValue:a=>{n(c.key,a)},triggers:(m=c.triggers)!=null?m:[]};Q(i,c.key,l)}let p=o.exitNodes.reduce((c,l)=>{let a=()=>(t(o.id),e(l));return c[l]=a,c},{});return d(d({__flows:{id:o.id,key:o.key,workflowId:o.workflowId}},i),p)};var fe="#22262d",me="#fff",Po="%cFlows%c",Co=`color:${me};background:${fe};padding:2px 4px;border-radius:4px`,S={error:(o,...e)=>{console.error(`${Po} ${o}`,Co,"",...e)},warn:(o,...e)=>{console.warn(`${Po} ${o}`,Co,"",...e)}};var Y=(o,e)=>e?Array.isArray(e)?e.some(t=>Y(o,t)):typeof o!="string"?!1:new RegExp(e).test(o):!0,Z=(o,e)=>e===void 0?!0:Array.isArray(e)?e.some(t=>Z(o,t)):o===e,oo=(o,e)=>e===void 0?!0:Array.isArray(e)?e.every(t=>oo(o,t)):o!==e;var eo=(o,e)=>e?Array.isArray(e)?e.some(t=>eo(o,t)):typeof o!="string"?!1:o.includes(e):!0,to=(o,e)=>e?Array.isArray(e)?e.every(t=>to(o,t)):typeof o!="string"?!1:!o.includes(e):!0;var M=({operator:o,pathname:e,value:t})=>o==="eq"?Z(e,t):o==="ne"?oo(e,t):o==="contains"?eo(e,t):o==="notContains"?to(e,t):o==="regex"?Y(e,t):!0,Io=({eventTarget:o,value:e})=>e?Array.from(document.querySelectorAll(e)).some(t=>t.contains(o)):!1;var L=()=>window.location.pathname+window.location.search;var So=o=>{var e;if(!(!o||o==="disabled"))return o==="automatic"?(e=navigator.languages.at(0))!=null?e:navigator.language:o};var ro=(o,e)=>new Proxy(o,{get(t,n,r){return n==="props"&&e(o.id),Reflect.get(t,n,r)}});var T={};var Ro="@flows/react",Ao="1.10.3";var V=`${Ro}@${Ao}`;var w=async o=>{let{apiUrl:e,environment:t,organizationId:n,userId:r}=T;!e||!t||!n||!r||await $(e,V).sendEvent(I(d({},o),{environment:t,organizationId:n,userId:r}))},Eo=new Set,no=async o=>{Eo.has(o)||(Eo.add(o),await w({name:"block-activated",blockId:o}))};var Fo=({blocks:o,removeBlock:e})=>{let[t,n]=(0,O.useState)([]);return(0,O.useEffect)(()=>{n(i=>{let p=o.filter(m=>m.type==="tour"),s=new Map(i.map(m=>[m.blockId,m]));return p.map(m=>{var a,h;let c=s.get(m.id),l=(h=(a=c==null?void 0:c.currentBlockIndex)!=null?a:m.currentTourIndex)!=null?h:0;return{blockId:m.id,currentBlockIndex:l}})})},[o]),(0,O.useMemo)(()=>{let i=(s,f)=>{n(m=>m.map(c=>c.blockId===s?f(c):c))},p=(s,f)=>{i(s,m=>I(d({},m),{currentBlockIndex:f}))};return t.map(({blockId:s,currentBlockIndex:f})=>{var k,E,F;let m=o.find(u=>u.id===s);if(!m)return;let c=(k=m.tourBlocks)==null?void 0:k[f],l=f===((F=(E=m.tourBlocks)==null?void 0:E.length)!=null?F:0)-1,a=u=>{w({name:"tour-update",blockId:s,properties:{currentTourIndex:u}})};return{block:m,currentBlockIndex:f,activeStep:c,continue:()=>{if(l)e(s),w({name:"transition",propertyKey:"complete",blockId:s});else{let u=f+1;p(s,u),a(u)}},previous:()=>{var g;let u=f===0?f:f-1;for(;u>0&&m.tourBlocks&&!((g=m.tourBlocks.at(u))!=null&&g.componentType);)u-=1;p(s,u),a(u)},cancel:()=>{e(s),w({name:"transition",blockId:s,propertyKey:"cancel"})}}}).filter(s=>!!s)},[o,e,t])};var x=require("react");var y=require("react"),Mo=({url:o,onMessage:e,onOpen:t})=>{let[n,r]=(0,y.useState)(),i=(0,y.useRef)(void 0),[p,s]=(0,y.useState)(0),f=(0,y.useRef)(t);(0,y.useEffect)(()=>{f.current=t},[t]);let m=(0,y.useRef)(e);(0,y.useEffect)(()=>{m.current=e},[e]);let c=(0,y.useCallback)(a=>{m.current(a)},[]),l=(0,y.useCallback)(()=>{if(i.current&&(i.current(),i.current=void 0),!o)return;let a=new WebSocket(o);r(a);let h=()=>{var k;(k=f.current)==null||k.call(f),s(0)},v=()=>{r(void 0),s(k=>k+1)};a.addEventListener("open",h),a.addEventListener("close",v),a.addEventListener("message",c);let C=()=>{a.removeEventListener("open",h),a.removeEventListener("close",v),a.removeEventListener("message",c),a.readyState===WebSocket.CONNECTING?a.addEventListener("open",()=>{a.close()}):a.close(),r(void 0)};return i.current=C,C},[c,o]);(0,y.useEffect)(()=>{let a=l();return()=>{a==null||a()}},[l]),(0,y.useEffect)(()=>{if(n)return;let a=setTimeout(()=>{l()},Math.min(1e3*4**p,12e4));return()=>{clearTimeout(a)}},[p,n,l]),(0,y.useEffect)(()=>()=>{i.current&&i.current()},[])};var Wo=({apiUrl:o,environment:e,organizationId:t,userId:n,userProperties:r,language:i})=>{let[p,s]=(0,x.useState)(null),f=(0,x.useMemo)(()=>p!=null?p:[],[p]),[m,c]=(0,x.useState)(!1),l=(0,x.useRef)([]),a=(0,x.useMemo)(()=>({environment:e,organizationId:t,userId:n}),[e,t,n]),h=(0,x.useRef)(r);(0,x.useEffect)(()=>{h.current=r},[r]);let v=(0,x.useCallback)(()=>{$(o,V).getBlocks(I(d({},a),{language:So(i),userProperties:h.current})).then(u=>{var B;let g=l.current.reduce(X,u.blocks);s(g),l.current=[],(B=u.meta)!=null&&B.usage_limited&&c(!0)}).catch(u=>{S.error("Failed to load blocks",u)})},[o,i,a]),C=(0,x.useMemo)(()=>m?void 0:`${o.replace("https://","wss://").replace("http://","ws://")}/ws/sdk/block-updates?${new URLSearchParams(a).toString()}`,[o,a,m]),k=(0,x.useCallback)(u=>{let g=JSON.parse(u.data);s(B=>B?X(B,g):(l.current.push(g),B))},[]);Mo({url:C,onMessage:k,onOpen:v}),(0,x.useEffect)(()=>{f.forEach(u=>{var g;Oo(u),(g=u.tourBlocks)==null||g.forEach(B=>{Oo(B)})})},[f]);let E=(0,x.useCallback)(u=>{s(g=>g&&g.filter(B=>B.id!==u))},[]),F=(0,x.useCallback)((u,g)=>{s(B=>B&&B.map(G=>G.id===u?g(G):G))},[]);return{blocks:f,removeBlock:E,updateBlock:F}},Oo=o=>{o.slottable&&!o.slotId&&S.error(`Encountered workflow block "${o.componentType}" that is slottable but has no slotId`)};var P=require("react"),Do=require("react/jsx-runtime"),ae=200,ce=()=>{let[o,e]=(0,P.useState)(),t=(0,P.useRef)(o);return(0,P.useEffect)(()=>{t.current=o},[o]),(0,P.useEffect)(()=>{let n=window.setInterval(()=>{let r=L();t.current!==r&&e(r)},ae);return()=>{clearInterval(n)}}),o},No=(0,P.createContext)(void 0),D=()=>{if((0,P.useContext)(No)!==void 0)return L()},Lo=({children:o})=>{let e=ce();return(0,Do.jsx)(No.Provider,{value:e,children:o})};var R=require("react");var _o=require("react");var Uo=()=>{let{runningTours:o}=b(),e=D(),[t]=(0,_o.useState)(new Map),n=(0,R.useMemo)(()=>o.filter(r=>{var i;return!!((i=r.activeStep)!=null&&i.tourWait)}),[o]);return(0,R.useEffect)(()=>{n.forEach(r=>{var p,s,f;let i=(p=r.activeStep)==null?void 0:p.tourWait;(i==null?void 0:i.interaction)==="navigation"&&M({pathname:e,operator:(s=i.page)==null?void 0:s.operator,value:(f=i.page)==null?void 0:f.value})&&r.continue()})},[e,n]),(0,R.useEffect)(()=>{let r=i=>{let p=i.target;if(!p||!(p instanceof Element))return;let s=L();n.forEach(f=>{var c,l,a;let m=(c=f.activeStep)==null?void 0:c.tourWait;if((m==null?void 0:m.interaction)==="click"){let h=M({pathname:s,operator:(l=m.page)==null?void 0:l.operator,value:(a=m.page)==null?void 0:a.value});Io({eventTarget:p,value:m.element})&&h&&f.continue()}})};return addEventListener("click",r),()=>{removeEventListener("click",r)}},[e,n]),(0,R.useEffect)(()=>{o.forEach(r=>{let i=r.activeStep,p=t.get(r.block.id);p&&p.stepId!==(i==null?void 0:i.id)&&(clearTimeout(p.timeoutId),t.delete(r.block.id))})},[o,t]),(0,R.useEffect)(()=>{n.forEach(r=>{let i=r.activeStep,p=i==null?void 0:i.tourWait;if(i&&(p==null?void 0:p.interaction)==="delay"&&p.ms!==void 0&&!t.has(r.block.id)){let s=window.setTimeout(()=>{r.continue(),t.delete(r.block.id)},p.ms);t.set(r.block.id,{timeoutId:s,stepId:i.id})}})},[n,t]),null};var W=require("react");var so=({block:o,removeBlock:e,updateBlock:t})=>{if(!o.componentType)return[];let r=bo({block:o,removeBlock:e,exitNodeCb:p=>w({name:"transition",blockId:o.id,propertyKey:p}),setStateMemory:async(p,s)=>{t(o.id,f=>{var m;return I(d({},f),{propertyMeta:(m=f.propertyMeta)==null?void 0:m.map(c=>c.type==="state-memory"&&c.key===p?I(d({},c),{value:s}):c)})}),await w({name:"set-state-memory",blockId:o.id,propertyKey:p,properties:{value:s}})}}),i={id:o.id,type:"component",component:o.componentType,props:r};return ro(i,no)},io=o=>{let e=o.activeStep;if(!(e!=null&&e.componentType))return[];let t=o.currentBlockIndex===0,n={id:e.id,tourBlockId:o.block.id,type:"tour-component",component:e.componentType,props:I(d({__flows:{id:e.id,key:e.key,workflowId:e.workflowId}},e.data),{continue:o.continue,previous:t?void 0:o.previous,cancel:o.cancel})};return ro(n,no)};var po=o=>o==null?void 0:o.slotId;var Vo=()=>{let{blocks:o}=b(),e=D();return(0,W.useMemo)(()=>o.filter(t=>M({pathname:e,operator:t.page_targeting_operator,value:t.page_targeting_values})),[o,e])},qo=()=>{let{runningTours:o}=b(),e=D();return(0,W.useMemo)(()=>o.filter(t=>{let n=t.activeStep;return n&&M({pathname:e,operator:n.page_targeting_operator,value:n.page_targeting_values})}),[e,o])},q=()=>{let o=Vo(),e=qo(),{removeBlock:t,updateBlock:n}=b(),r=(0,W.useMemo)(()=>o.filter(p=>!p.slottable).flatMap(p=>so({block:p,removeBlock:t,updateBlock:n})),[t,n,o]),i=(0,W.useMemo)(()=>e.filter(p=>{let s=p.activeStep;return s&&!s.slottable}).flatMap(io),[e]);return[...r,...i]},jo=o=>"type"in o,$o=o=>{var e,t,n;return jo(o)?(e=o.slotIndex)!=null?e:0:(n=(t=o.activeStep)==null?void 0:t.slotIndex)!=null?n:0},j=o=>{let e=Vo(),t=qo(),{removeBlock:n,updateBlock:r}=b();return(0,W.useMemo)(()=>{let p=e.filter(f=>f.slottable&&po(f)===o),s=t.filter(f=>{var m;return((m=f.activeStep)==null?void 0:m.slottable)&&po(f.activeStep)===o});return[...p,...s].sort((f,m)=>$o(f)-$o(m)).flatMap(f=>jo(f)?so({block:f,removeBlock:n,updateBlock:r}):io(f))},[n,o,r,e,t])};var zo=require("react");var Ko=require("react/jsx-runtime"),z=({block:o})=>{let{components:e}=b(),t=e[o.component];return(0,zo.useEffect)(()=>{t||S.error(`Component not found for workflow block "${o.component}"`)},[t,o.component]),t?(0,Ko.jsx)(t,d({},o.props)):null};var Go=require("react");var Jo=require("react/jsx-runtime"),K=({block:o})=>{let{tourComponents:e}=b(),t=e[o.component];return(0,Go.useEffect)(()=>{t||S.error(`Tour Component not found for tour block "${o.component}"`)},[t,o.component]),t?(0,Jo.jsx)(t,d({},o.props)):null};var N=require("react/jsx-runtime"),Xo=()=>{let o=q();return(0,N.jsx)(N.Fragment,{children:o.map(e=>e.type==="component"?(0,N.jsx)(z,{block:e},e.id):e.type==="tour-component"?(0,N.jsx)(K,{block:e},e.tourBlockId):null)})};var A=require("react/jsx-runtime"),Ho=o=>ue(o)?(0,A.jsx)(le,d({},o)):o.children,ue=o=>typeof o.userId=="string",le=({children:o,apiUrl:e="https://api.flows-cloud.com",environment:t,organizationId:n,userId:r,components:i,tourComponents:p,userProperties:s,language:f})=>{T.apiUrl=e,T.environment=t,T.organizationId=n,T.userId=r;let{blocks:m,removeBlock:c,updateBlock:l}=Wo({apiUrl:e,environment:t,organizationId:n,userId:r,userProperties:s,language:f}),a=Fo({blocks:m,removeBlock:c});return(0,A.jsx)(Lo,{children:(0,A.jsxs)(J.Provider,{value:{blocks:m,components:i,runningTours:a,tourComponents:p,removeBlock:c,updateBlock:l},children:[o,(0,A.jsx)(Xo,{}),(0,A.jsx)(Uo,{})]})})};var fo=require("react/jsx-runtime"),de=({id:o,placeholder:e})=>{let t=j(o);return t.length?t.map(n=>n.type==="component"?(0,fo.jsx)(z,{block:n},n.id):n.type==="tour-component"?(0,fo.jsx)(K,{block:n},n.id):null):e!=null?e:null};var xe=()=>w({name:"reset-progress"}),ge=o=>w({name:"reset-progress",workflowId:o}),ye=o=>w({name:"workflow-start",blockKey:o});