@frigade/react 1.32.37 → 1.32.39
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/lib/index.d.ts +2 -1
- package/lib/index.js +264 -260
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +265 -261
- package/lib/index.mjs.map +1 -1
- package/package.json +3 -2
package/lib/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import{ThemeProvider as Ta}from"styled-components";import ct,{useContext as ya,useEffect as yo,useState as jo}from"react";import{useCallback as lt,useContext as qs,useEffect as Ys}from"react";import Io,{useMemo as Ds}from"react";var sr="1.32.37 ";var Se="https://api.frigade.com/v1/public/",Ee="NOT_STARTED_STEP",X="COMPLETED_FLOW",oo="ABORTED_FLOW",st="STARTED_FLOW",Ie="NOT_STARTED_FLOW",Ne="COMPLETED_STEP",ro="STARTED_STEP";function Oe(){let{publicApiKey:e,userId:t}=Io.useContext(K);return{config:Ds(()=>({headers:{Authorization:`Bearer ${e}`,"Content-Type":"application/json","X-Frigade-SDK-Version":sr,"X-Frigade-SDK-Platform":"React"}}),[e,t])}}var $s="frigade-last-call-at-",Ms="frigade-last-call-data-";function yt(){let{shouldGracefullyDegrade:e}=Io.useContext(K);return async(t,o)=>{if(e)return console.log(`Skipping ${t} call to Frigade due to error`),_t();let n=$s+t,r=Ms+t;if(window&&window.localStorage&&o&&o.body&&o.method==="POST"){let s=window.localStorage.getItem(n),p=window.localStorage.getItem(r);if(s&&p&&p==o.body){let d=new Date(s);if(new Date().getTime()-d.getTime()<1e3)return _t()}window.localStorage.setItem(n,new Date().toISOString()),window.localStorage.setItem(r,o.body)}let i;try{i=await fetch(t,o)}catch(s){return _t(s)}return i?i.ok?i:_t(i.statusText):_t()}}function _t(e){return e&&console.log("Call to Frigade failed",e),{json:()=>({})}}function bt(){let{publicApiKey:e,shouldGracefullyDegrade:t}=Io.useContext(K);function o(){if(t){console.error("Frigade hooks cannot be used when Frigade SDK has failed to initialize");return}e||console.error("Frigade hooks cannot be used outside the scope of FrigadeProvider")}return{verifySDKInitiated:o}}import{useContext as Gs,useState as lr}from"react";import{useContext as _s,useEffect as Ws,useState as zs}from"react";import Hs from"swr";import{useContext as Us}from"react";function Fe(){let{openFlowStates:e,setOpenFlowStates:t,hasActiveFullPageFlow:o,setCompletedFlowsToKeepOpenDuringSession:n,completedFlowsToKeepOpenDuringSession:r}=Us(K);function i(c,f=!1){return e[c]??f}function s(c,f){t(b=>({...b,[c]:f}))}function p(c){t(f=>{let{[c]:b,...w}=f;return{...w}})}function d(c){r.includes(c)||n(f=>[...f,c])}function a(c){return r.includes(c)}function u(){return Object.values(e).some(c=>c)||o}return{getOpenFlowState:i,setOpenFlowState:s,resetOpenFlowState:p,hasOpenModals:u,setKeepCompletedFlowOpenDuringSession:d,shouldKeepCompletedFlowOpenDuringSession:a}}var js="unknown";function Ae(){let{config:e}=Oe(),{publicApiKey:t,userId:o,flows:n,setShouldGracefullyDegrade:r}=_s(K),{resetOpenFlowState:i}=Fe(),[s,p]=zs(!1),d={data:n.map(k=>({flowId:k.id,flowState:X,lastStepId:null,userId:o,foreignUserId:o,stepStates:{},shouldTrigger:!1}))},a=k=>fetch(k,e).then(x=>{if(x.ok)return x.json();throw new Error("Failed to fetch user flow states")}).catch(x=>(console.log(`Error fetching ${k}: ${x}. Will gracefully degrade and hide Frigade`),r(!0),d)),{data:u,isLoading:c,mutate:f,error:b}=Hs(t&&n&&o?`${Se}userFlowStates?foreignUserId=${encodeURIComponent(o)}`:null,a,{revalidateIfStale:!0,keepPreviousData:!0,revalidateOnMount:!0,errorRetryInterval:1e4,errorRetryCount:3,onError:()=>d,onLoadingSlow:()=>d}),w=u==null?void 0:u.data;Ws(()=>{!s&&!c&&w&&p(!0)},[w,s,c]);async function S(k){if(w){let x=w.find(m=>m.flowId===k);x&&x.flowState!==X&&(x.flowState=X),await f(Promise.resolve({...u,data:w}),{optimisticData:{...u,data:w},revalidate:!1,rollbackOnError:!1})}}async function g(k,x,m){if(w){let C=w.find(E=>E.flowId===k);C&&(C.stepStates[x]=m,C.flowState=st),await f(Promise.resolve({...u,data:w}),{optimisticData:{...u,data:w},revalidate:!1,rollbackOnError:!1})}}async function P(k,x,m){if(w){let C=w.find(E=>E.flowId===k);C&&(C.lastStepId=x,C.stepStates[x]=m,C.flowState=st),await f({...u,data:w},{optimisticData:{...u,data:w},revalidate:!1,rollbackOnError:!1})}}async function T(k){if(w){let x=w.find(m=>m.flowId===k);x&&x.flowState!==Ie&&(x.flowState=Ie,x.lastStepId=js,Object.keys(x.stepStates).forEach(m=>{x.stepStates[m].actionType=Ee,x.stepStates[m].createdAt=new Date().toISOString()}),await f({...u,data:w},{optimisticData:{...u,data:w},revalidate:!1,rollbackOnError:!1}),i(k))}}async function A(k,x){if(w){let m=w.find(C=>C.flowId===k);m&&m.stepStates[x]!==Ee&&(m.stepStates[x]=Ee),await f({...u,data:w},{optimisticData:{...u,data:w},revalidate:!1,rollbackOnError:!1})}}return{userFlowStatesData:w,isLoadingUserFlowStateData:!s,mutateUserFlowState:f,optimisticallyMarkFlowCompleted:S,optimisticallyMarkFlowNotStarted:T,optimisticallyMarkStepCompleted:g,optimisticallyMarkStepNotStarted:A,optimisticallyMarkStepStarted:P,error:b}}function Wt(){let{config:e}=Oe(),{userFlowStatesData:t,mutateUserFlowState:o}=Ae(),{failedFlowResponses:n,setFailedFlowResponses:r,flowResponses:i,setFlowResponses:s}=Gs(K),[p,d]=lr(new Set),[a,u]=lr(new Set),c=yt();function f(S){let g=JSON.stringify(S);if(p.has(g))return null;p.add(g),d(p),a.add(S),u(a);let P=i==null?void 0:i.find(T=>T.flowSlug===S.flowSlug&&T.stepId===S.stepId&&T.actionType===S.actionType&&T.createdAt===S.createdAt);return c(`${Se}flowResponses`,{...e,method:"POST",body:g}).then(T=>{T.status!==200&&T.status!==201?(console.log("Failed to send flow response for step "+S.stepId+". Will retry again later."),r([...n,S])):P||s(A=>[...A??[],S])})}async function b(S){S.foreignUserId&&(S.actionType===st||S.actionType===Ie?await f(S):S.actionType===X?await f(S):S.actionType===ro?await f(S):S.actionType===Ne?await f(S):S.actionType===oo?await f(S):S.actionType===Ee&&await f(S))}function w(){let S=[];return t==null||t.forEach(g=>{if(g&&g.stepStates&&Object.keys(g.stepStates).length!==0)for(let P in g.stepStates){let T=g.stepStates[P];S.push({foreignUserId:g.foreignUserId,flowSlug:g.flowId,stepId:T.stepId,actionType:T.actionType,data:{},createdAt:new Date(T.createdAt),blocked:T.blocked,hidden:T.hidden})}}),[...S,...i]}return{addResponse:b,setFlowResponses:s,getFlowResponses:w}}import Xs from"swr";var Vs=/user.flow\(([^\)]+)\) == '?COMPLETED_FLOW'?/gm,ar=e=>{let t=Vs.exec(e);if(t===null)return null;let o=null;return t.forEach((n,r)=>{let i=Ks(n,"'","");i.startsWith("flow_")&&(o=i)}),o},Ks=function(e,t,o){return e.replace(new RegExp(t,"g"),o)};function J(){let{config:e}=Oe(),{flows:t,setFlows:o,userId:n,publicApiKey:r,customVariables:i,setCustomVariables:s,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:d,setFlowResponses:a,setShouldGracefullyDegrade:u}=qs(K),c={data:[]},{verifySDKInitiated:f}=bt(),{addResponse:b,getFlowResponses:w}=Wt(),S=h=>fetch(h,e).then(y=>y.ok?y.json():(console.log(`Error fetching ${h} (${y.status}): ${y.statusText}. .Will gracefully degrade and hide Frigade`),u(!0),c)).catch(y=>(console.log(`Error fetching ${h}: ${y}. Will gracefully degrade and hide Frigade`),u(!0),c)),{userFlowStatesData:g,isLoadingUserFlowStateData:P,optimisticallyMarkFlowCompleted:T,optimisticallyMarkFlowNotStarted:A,optimisticallyMarkStepCompleted:k,optimisticallyMarkStepNotStarted:x,optimisticallyMarkStepStarted:m}=Ae(),{data:C,error:E,isLoading:M}=Xs(r?`${Se}flows`:null,S,{keepPreviousData:!0});Ys(()=>{if(E){console.error(E);return}C&&C.data&&(C.data=o(C.data))},[C,E]);function $(h){if(M)return null;let y=t.find(v=>v.slug===h);return!y&&t.length>0&&!P&&!M?(console.log(`Flow with slug ${h} not found`),null):(y==null?void 0:y.active)===!1?null:y}function U(h){var j;if(!$(h))return[];let y=$(h).data;return y?(y=B(y),(((j=JSON.parse(y))==null?void 0:j.data)??[]).map(le=>{let z=Te(le);return{handleSecondaryButtonClick:()=>{le.skippable===!0&&W(h,le.id,{skipped:!0})},...le,complete:N(h,le.id)===Ne||z>=1,blocked:V(h,le.id),hidden:we(h,le.id),handlePrimaryButtonClick:()=>{(!le.completionCriteria&&(le.autoMarkCompleted||le.autoMarkCompleted===void 0)||le.completionCriteria&&le.autoMarkCompleted===!0)&&W(h,le.id)},progress:z}}).filter(le=>le.hidden!==!0)):[]}function B(h){return h.replace(/\${(.*?)}/g,(y,v)=>i[v]!==void 0?String(i[v]):"")}function H(h){if(!$(h))return[];let y=$(h).data;return y?(y=B(y),JSON.parse(y)??{}):[]}function I(h,y){s(v=>({...v,[h]:y}))}function _(h){!P&&!M&&h&&JSON.stringify(i)!=JSON.stringify({...i,...h})&&Object.keys(h).forEach(y=>{I(y,h[y])})}let te=lt(async(h,y,v)=>{f();let j={foreignUserId:n,flowSlug:h,stepId:y,actionType:ro,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(j)&&(await m(h,y,j),b(j))},[n,g]),q=lt(async(h,y,v)=>{f();let j={foreignUserId:n,flowSlug:h,stepId:y,actionType:Ee,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(j)&&(await x(h,y),b(j))},[n,g]),W=lt(async(h,y,v)=>{f();let j={foreignUserId:n,flowSlug:h,stepId:y,actionType:Ne,data:v??{},createdAt:new Date,blocked:!1,hidden:!1};oe(j)&&(await k(h,y,j),b(j))},[n,g]),be=lt(async(h,y)=>{if(f(),ce(h)===Ie)return;let v={foreignUserId:n,flowSlug:h,stepId:"unknown",actionType:Ie,data:y??{},createdAt:new Date,blocked:!1,hidden:!1};await A(h),oe(v)&&b(v)},[n,g]),me=lt(async(h,y)=>{f();let v={foreignUserId:n,flowSlug:h,stepId:"unknown",actionType:st,data:y??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&b(v)},[n,g]),G=lt(async(h,y)=>{f();let v={foreignUserId:n,flowSlug:h,stepId:"unknown",actionType:X,data:y??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await T(h),b(v))},[n,g]),L=lt(async(h,y)=>{f();let v={foreignUserId:n,flowSlug:h,stepId:"unknown",actionType:oo,data:y??{},createdAt:new Date,blocked:!1,hidden:!1};oe(v)&&(await T(h),b(v))},[n,g]);function oe(h){var y;if(!g&&h.actionType===Ee)return!1;if(g){let v=g.find(j=>j.flowId===h.flowSlug);if(h.actionType===Ee&&(!(v!=null&&v.stepStates[h.stepId])||v.stepStates[h.stepId].actionType===Ee)||v&&((y=v.stepStates[h.stepId])==null?void 0:y.actionType)===h.actionType||v&&v.flowState===X&&h.actionType===X)return!1}return!0}function N(h,y){let v=ve(h,y);return P?null:v?v.actionType:Ee}function V(h,y){let v=ve(h,y);return v?v.blocked:!1}function we(h,y){let v=ve(h,y);return v?v.hidden:!1}function ve(h,y){if(P)return null;let v=g==null?void 0:g.find(j=>j.flowId===h);return!v||!v.stepStates[y]?null:v.stepStates[y]??null}function St(h){var v;if(P||!g)return null;if(ce(h)===Ie)return U(h)[0]??null;let y=(v=g.find(j=>j.flowId===h))==null?void 0:v.lastStepId;return y?U(h).find(j=>j.id===y):null}function rt(h){let y=St(h);if(!y)return 0;let v=U(h).findIndex(j=>j.id===y.id)??0;return N(h,y.id)===Ne&&v<U(h).length-1?v+1:v}function Te(h){if(!h.completionCriteria)return;let y=ar(h.completionCriteria);if(y===null)return;let v=ze(y),j=He(y);return j===0?void 0:v/j}function ce(h){let y=g==null?void 0:g.find(v=>v.flowId===h);return y?y.flowState:null}function ze(h){let y=U(h);return y.length===0?0:y.filter(j=>N(h,j.id)===Ne).length}function He(h){return U(h).length}function Y(h){return JSON.parse(t.find(y=>y.slug===h).data)}function fe(h){if(P)return!0;if(h!=null&&h.targetingLogic&&g){let y=g.find(v=>v.flowId===h.slug);if(y)return y.shouldTrigger===!1}return!!(h!=null&&h.targetingLogic&&n&&n.startsWith("guest_"))}function it(h){return!fe($(h))}return{getFlow:$,getFlowData:Y,isLoading:P||M,getStepStatus:N,getFlowSteps:U,getCurrentStepIndex:rt,markStepStarted:te,markStepCompleted:W,markFlowNotStarted:be,markFlowStarted:me,markFlowCompleted:G,markFlowAborted:L,markStepNotStarted:q,getFlowStatus:ce,getNumberOfStepsCompleted:ze,getNumberOfSteps:He,targetingLogicShouldHideFlow:fe,setCustomVariable:I,updateCustomVariables:_,customVariables:i,getStepOptionalProgress:Te,getFlowMetadata:H,isStepBlocked:V,isStepHidden:we,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:d,isFlowAvailableToUser:it}}import{useCallback as pr,useContext as Js,useEffect as Qs}from"react";var wt="guest_";function No(){let{userId:e,organizationId:t,setUserId:o,setUserProperties:n,shouldGracefullyDegrade:r}=Js(K),{config:i}=Oe(),{mutateUserFlowState:s}=Ae(),p=yt(),{verifySDKInitiated:d}=bt();Qs(()=>{if(e&&!t){if(e.startsWith(wt))return;let c=`frigade-user-registered-${e}`;localStorage.getItem(c)||(p(`${Se}users`,{...i,method:"POST",body:JSON.stringify({foreignId:e})}),localStorage.setItem(c,"true"))}},[e,r,t]);let a=pr(async c=>{d();let f={foreignId:e,properties:c};await p(`${Se}users`,{...i,method:"POST",body:JSON.stringify(f)}),n(b=>({...b,...c})),s()},[e,i,r,s]),u=pr(async(c,f)=>{d();let w={foreignId:e,events:[{event:c,properties:f}]};await p(`${Se}users`,{...i,method:"POST",body:JSON.stringify(w)}),s()},[e,i,s]);return{userId:e,setUserId:o,addPropertiesToUser:a,trackEventForUser:u}}import{v4 as ba}from"uuid";import $e,{useEffect as ha,useState as xa}from"react";import je,{useEffect as rl}from"react";import no from"styled-components";import Zs from"react";import Rs from"styled-components";var dr="fr-",zt="cfr-";function l(e,t){let o=`${dr}${e}`;if(!t)return o;if(t.styleOverrides&&t.styleOverrides[e]){if(typeof t.styleOverrides[e]=="string")return o+" "+t.styleOverrides[e];if(typeof t.styleOverrides[e]=="object")return o+" "+zt+e}return o}function F(e){if(!e.className||e.className.indexOf(zt)!==-1)return"";let o=e.className.replace(/\s+/g," ").split(" ");return o.length==1&&o[0].startsWith(dr)?"":`:not(${o.map(n=>`.${n}`).join(", ")})`}function Lo(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}function at(e){return e!=null&&e.styleOverrides?Object.keys(e.styleOverrides).map(t=>`${Lo(t)}: ${e.styleOverrides[t]};`).join(" "):""}function ge(...e){return e.filter(Boolean).join(" ")}function cr(e){return e.charAt(0).toUpperCase()+e.slice(1)}var el=Rs.div`
|
|
2
|
+
import ut,{createContext as ka,useEffect as qo,useState as Be}from"react";import{ThemeProvider as Pa}from"styled-components";import mt,{useContext as Ta,useEffect as bo,useState as Ko}from"react";import{useCallback as at,useContext as Js,useEffect as Qs}from"react";import No,{useMemo as Us}from"react";var pr="1.32.39 ";var Te="https://api.frigade.com/v1/public/",Ie="NOT_STARTED_STEP",q="COMPLETED_FLOW",ro="ABORTED_FLOW",lt="STARTED_FLOW",Ne="NOT_STARTED_FLOW",Le="COMPLETED_STEP",io="STARTED_STEP";function De(){let{publicApiKey:e,userId:t}=No.useContext(V);return{config:Us(()=>({headers:{Authorization:`Bearer ${e}`,"Content-Type":"application/json","X-Frigade-SDK-Version":pr,"X-Frigade-SDK-Platform":"React"}}),[e,t])}}var _s="frigade-last-call-at-",Ws="frigade-last-call-data-";function yt(){let{shouldGracefullyDegrade:e}=No.useContext(V);return async(t,o)=>{if(e)return console.log(`Skipping ${t} call to Frigade due to error`),_t();let n=_s+t,r=Ws+t;if(window&&window.localStorage&&o&&o.body&&o.method==="POST"){let s=window.localStorage.getItem(n),p=window.localStorage.getItem(r);if(s&&p&&p==o.body){let d=new Date(s);if(new Date().getTime()-d.getTime()<1e3)return _t()}window.localStorage.setItem(n,new Date().toISOString()),window.localStorage.setItem(r,o.body)}let i;try{i=await fetch(t,o)}catch(s){return _t(s)}return i?i.ok?i:_t(i.statusText):_t()}}function _t(e){return e&&console.log("Call to Frigade failed",e),{json:()=>({})}}function bt(){let{publicApiKey:e,shouldGracefullyDegrade:t}=No.useContext(V);function o(){if(t){console.error("Frigade hooks cannot be used when Frigade SDK has failed to initialize");return}e||console.error("Frigade hooks cannot be used outside the scope of FrigadeProvider")}return{verifySDKInitiated:o}}import{useContext as qs,useState as dr}from"react";import{useContext as Hs,useEffect as Gs,useState as js}from"react";import Vs from"swr";import{useContext as zs}from"react";function Pe(){let{openFlowStates:e,setOpenFlowStates:t,hasActiveFullPageFlow:o,setCompletedFlowsToKeepOpenDuringSession:n,completedFlowsToKeepOpenDuringSession:r}=zs(V);function i(c,f=!1){return e[c]??f}function s(c,f){t(w=>({...w,[c]:f}))}function p(c){t(f=>{let{[c]:w,...T}=f;return{...T}})}function d(c){r.includes(c)||n(f=>[...f,c])}function a(c){return r.includes(c)}function u(){return Object.values(e).some(c=>c)||o}return{getOpenFlowState:i,setOpenFlowState:s,resetOpenFlowState:p,hasOpenModals:u,setKeepCompletedFlowOpenDuringSession:d,shouldKeepCompletedFlowOpenDuringSession:a}}var Ks="unknown";function Ae(){let{config:e}=De(),{publicApiKey:t,userId:o,flows:n,setShouldGracefullyDegrade:r}=Hs(V),{resetOpenFlowState:i}=Pe(),[s,p]=js(!1),d={data:n.map(F=>({flowId:F.id,flowState:q,lastStepId:null,userId:o,foreignUserId:o,stepStates:{},shouldTrigger:!1}))},a=F=>fetch(F,e).then(x=>{if(x.ok)return x.json();throw new Error("Failed to fetch user flow states")}).catch(x=>(console.log(`Error fetching ${F}: ${x}. Will gracefully degrade and hide Frigade`),r(!0),d)),{data:u,isLoading:c,mutate:f,error:w}=Vs(t&&n&&o?`${Te}userFlowStates?foreignUserId=${encodeURIComponent(o)}`:null,a,{revalidateIfStale:!0,keepPreviousData:!0,revalidateOnMount:!0,errorRetryInterval:1e4,errorRetryCount:3,onError:()=>d,onLoadingSlow:()=>d}),T=u==null?void 0:u.data;Gs(()=>{!s&&!c&&T&&p(!0)},[T,s,c]);async function S(F){if(T){let x=T.find(m=>m.flowId===F);x&&x.flowState!==q&&(x.flowState=q),await f(Promise.resolve({...u,data:T}),{optimisticData:{...u,data:T},revalidate:!1,rollbackOnError:!1})}}async function h(F,x,m){if(T){let C=T.find(v=>v.flowId===F);C&&(C.stepStates[x]=m,C.flowState=lt),await f(Promise.resolve({...u,data:T}),{optimisticData:{...u,data:T},revalidate:!1,rollbackOnError:!1})}}async function E(F,x,m){if(T){let C=T.find(v=>v.flowId===F);C&&(C.lastStepId=x,C.stepStates[x]=m,C.flowState=lt),await f({...u,data:T},{optimisticData:{...u,data:T},revalidate:!1,rollbackOnError:!1})}}async function y(F){if(T){let x=T.find(m=>m.flowId===F);x&&x.flowState!==Ne&&(x.flowState=Ne,x.lastStepId=Ks,Object.keys(x.stepStates).forEach(m=>{x.stepStates[m].actionType=Ie,x.stepStates[m].createdAt=new Date().toISOString()}),await f({...u,data:T},{optimisticData:{...u,data:T},revalidate:!1,rollbackOnError:!1}),i(F))}}async function I(F,x){if(T){let m=T.find(C=>C.flowId===F);m&&m.stepStates[x]!==Ie&&(m.stepStates[x]=Ie),await f({...u,data:T},{optimisticData:{...u,data:T},revalidate:!1,rollbackOnError:!1})}}return{userFlowStatesData:T,isLoadingUserFlowStateData:!s,mutateUserFlowState:f,optimisticallyMarkFlowCompleted:S,optimisticallyMarkFlowNotStarted:y,optimisticallyMarkStepCompleted:h,optimisticallyMarkStepNotStarted:I,optimisticallyMarkStepStarted:E,error:w}}function Wt(){let{config:e}=De(),{userFlowStatesData:t,mutateUserFlowState:o}=Ae(),{failedFlowResponses:n,setFailedFlowResponses:r,flowResponses:i,setFlowResponses:s}=qs(V),[p,d]=dr(new Set),[a,u]=dr(new Set),c=yt();function f(S){let h=JSON.stringify(S);if(p.has(h))return null;p.add(h),d(p),a.add(S),u(a);let E=i==null?void 0:i.find(y=>y.flowSlug===S.flowSlug&&y.stepId===S.stepId&&y.actionType===S.actionType&&y.createdAt===S.createdAt);return c(`${Te}flowResponses`,{...e,method:"POST",body:h}).then(y=>{y.status!==200&&y.status!==201?(console.log("Failed to send flow response for step "+S.stepId+". Will retry again later."),r([...n,S])):E||s(I=>[...I??[],S])})}async function w(S){S.foreignUserId&&(S.actionType===lt||S.actionType===Ne?await f(S):S.actionType===q?await f(S):S.actionType===io?await f(S):S.actionType===Le?await f(S):S.actionType===ro?await f(S):S.actionType===Ie&&await f(S))}function T(){let S=[];return t==null||t.forEach(h=>{if(h&&h.stepStates&&Object.keys(h.stepStates).length!==0)for(let E in h.stepStates){let y=h.stepStates[E];S.push({foreignUserId:h.foreignUserId,flowSlug:h.flowId,stepId:y.stepId,actionType:y.actionType,data:{},createdAt:new Date(y.createdAt),blocked:y.blocked,hidden:y.hidden})}}),[...S,...i]}return{addResponse:w,setFlowResponses:s,getFlowResponses:T}}import Zs from"swr";var Ys=/user.flow\(([^\)]+)\) == '?COMPLETED_FLOW'?/gm,cr=e=>{let t=Ys.exec(e);if(t===null)return null;let o=null;return t.forEach((n,r)=>{let i=Xs(n,"'","");i.startsWith("flow_")&&(o=i)}),o},Xs=function(e,t,o){return e.replace(new RegExp(t,"g"),o)};function Y(){let{config:e}=De(),{flows:t,setFlows:o,userId:n,publicApiKey:r,customVariables:i,setCustomVariables:s,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:d,setFlowResponses:a,setShouldGracefullyDegrade:u}=Js(V),c={data:[]},{verifySDKInitiated:f}=bt(),{addResponse:w,getFlowResponses:T}=Wt(),S=g=>fetch(g,e).then(b=>b.ok?b.json():(console.log(`Error fetching ${g} (${b.status}): ${b.statusText}. .Will gracefully degrade and hide Frigade`),u(!0),c)).catch(b=>(console.log(`Error fetching ${g}: ${b}. Will gracefully degrade and hide Frigade`),u(!0),c)),{userFlowStatesData:h,isLoadingUserFlowStateData:E,optimisticallyMarkFlowCompleted:y,optimisticallyMarkFlowNotStarted:I,optimisticallyMarkStepCompleted:F,optimisticallyMarkStepNotStarted:x,optimisticallyMarkStepStarted:m}=Ae(),{data:C,error:v,isLoading:U}=Zs(r?`${Te}flows`:null,S,{keepPreviousData:!0});Qs(()=>{if(v){console.error(v);return}C&&C.data&&(C.data=o(C.data))},[C,v]);function $(g){if(U)return null;let b=t.find(P=>P.slug===g);return!b&&t.length>0&&!E&&!U?(console.log(`Flow with slug ${g} not found`),null):(b==null?void 0:b.active)===!1?null:b}function _(g){var G;if(!$(g))return[];let b=$(g).data;return b?(b=A(b),(((G=JSON.parse(b))==null?void 0:G.data)??[]).map(ae=>{let z=ke(ae);return{handleSecondaryButtonClick:()=>{ae.skippable===!0&&W(g,ae.id,{skipped:!0})},...ae,complete:L(g,ae.id)===Le||z>=1,blocked:N(g,ae.id),hidden:ee(g,ae.id),handlePrimaryButtonClick:()=>{(!ae.completionCriteria&&(ae.autoMarkCompleted||ae.autoMarkCompleted===void 0)||ae.completionCriteria&&ae.autoMarkCompleted===!0)&&W(g,ae.id)},progress:z}}).filter(ae=>ae.hidden!==!0)):[]}function A(g){return g.replace(/\${(.*?)}/g,(b,P)=>i[P]!==void 0?String(i[P]):"")}function H(g){if(!$(g))return[];let b=$(g).data;return b?(b=A(b),JSON.parse(b)??{}):[]}function B(g,b){s(P=>({...P,[g]:b}))}function M(g){!E&&!U&&g&&JSON.stringify(i)!=JSON.stringify({...i,...g})&&Object.keys(g).forEach(b=>{B(b,g[b])})}let re=at(async(g,b,P)=>{f();let G={foreignUserId:n,flowSlug:g,stepId:b,actionType:io,data:P??{},createdAt:new Date,blocked:!1,hidden:!1};fe(G)&&(await m(g,b,G),w(G))},[n,h]),X=at(async(g,b,P)=>{f();let G={foreignUserId:n,flowSlug:g,stepId:b,actionType:Ie,data:P??{},createdAt:new Date,blocked:!1,hidden:!1};fe(G)&&(await x(g,b),w(G))},[n,h]),W=at(async(g,b,P)=>{f();let G={foreignUserId:n,flowSlug:g,stepId:b,actionType:Le,data:P??{},createdAt:new Date,blocked:!1,hidden:!1};fe(G)&&(await F(g,b,G),w(G))},[n,h]),be=at(async(g,b)=>{if(f(),ue(g)===Ne)return;let P={foreignUserId:n,flowSlug:g,stepId:"unknown",actionType:Ne,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};await I(g),fe(P)&&w(P)},[n,h]),me=at(async(g,b)=>{f();let P={foreignUserId:n,flowSlug:g,stepId:"unknown",actionType:lt,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};fe(P)&&w(P)},[n,h]),j=at(async(g,b)=>{f();let P={foreignUserId:n,flowSlug:g,stepId:"unknown",actionType:q,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};fe(P)&&(await y(g),w(P))},[n,h]),J=at(async(g,b)=>{f();let P={foreignUserId:n,flowSlug:g,stepId:"unknown",actionType:ro,data:b??{},createdAt:new Date,blocked:!1,hidden:!1};fe(P)&&(await y(g),w(P))},[n,h]);function fe(g){var b;if(!h&&g.actionType===Ie)return!1;if(h){let P=h.find(G=>G.flowId===g.flowSlug);if(g.actionType===Ie&&(!(P!=null&&P.stepStates[g.stepId])||P.stepStates[g.stepId].actionType===Ie)||P&&((b=P.stepStates[g.stepId])==null?void 0:b.actionType)===g.actionType||P&&P.flowState===q&&g.actionType===q)return!1}return!0}function L(g,b){let P=te(g,b);return E?null:P?P.actionType:Ie}function N(g,b){let P=te(g,b);return P?P.blocked:!1}function ee(g,b){let P=te(g,b);return P?P.hidden:!1}function te(g,b){if(E)return null;let P=h==null?void 0:h.find(G=>G.flowId===g);return!P||!P.stepStates[b]?null:P.stepStates[b]??null}function we(g){var P;if(E||!h)return null;if(ue(g)===Ne)return _(g)[0]??null;let b=(P=h.find(G=>G.flowId===g))==null?void 0:P.lastStepId;return b?_(g).find(G=>G.id===b):null}function it(g){let b=we(g);if(!b)return 0;let P=_(g).findIndex(G=>G.id===b.id)??0;return L(g,b.id)===Le&&P<_(g).length-1?P+1:P}function ke(g){if(!g.completionCriteria)return;let b=cr(g.completionCriteria);if(b===null)return;let P=He(b),G=Ge(b);return G===0?void 0:P/G}function ue(g){let b=h==null?void 0:h.find(P=>P.flowId===g);return b?b.flowState:null}function He(g){let b=_(g);return b.length===0?0:b.filter(G=>L(g,G.id)===Le).length}function Ge(g){return _(g).length}function K(g){return JSON.parse(t.find(b=>b.slug===g).data)}function he(g){if(E)return!0;if(g!=null&&g.targetingLogic&&h){let b=h.find(P=>P.flowId===g.slug);if(b)return b.shouldTrigger===!1}return!!(g!=null&&g.targetingLogic&&n&&n.startsWith("guest_"))}function nt(g){return!he($(g))}return{getFlow:$,getFlowData:K,isLoading:E||U,getStepStatus:L,getFlowSteps:_,getCurrentStepIndex:it,markStepStarted:re,markStepCompleted:W,markFlowNotStarted:be,markFlowStarted:me,markFlowCompleted:j,markFlowAborted:J,markStepNotStarted:X,getFlowStatus:ue,getNumberOfStepsCompleted:He,getNumberOfSteps:Ge,targetingLogicShouldHideFlow:he,setCustomVariable:B,updateCustomVariables:M,customVariables:i,getStepOptionalProgress:ke,getFlowMetadata:H,isStepBlocked:N,isStepHidden:ee,hasActiveFullPageFlow:p,setHasActiveFullPageFlow:d,isFlowAvailableToUser:nt}}import{useCallback as mr,useContext as Rs,useEffect as el}from"react";var wt="guest_";function Lo(){let{userId:e,organizationId:t,setUserId:o,setUserProperties:n,shouldGracefullyDegrade:r}=Rs(V),{config:i}=De(),{mutateUserFlowState:s}=Ae(),p=yt(),{verifySDKInitiated:d}=bt();el(()=>{if(e&&!t){if(e.startsWith(wt))return;let c=`frigade-user-registered-${e}`;localStorage.getItem(c)||(p(`${Te}users`,{...i,method:"POST",body:JSON.stringify({foreignId:e})}),localStorage.setItem(c,"true"))}},[e,r,t]);let a=mr(async c=>{d();let f={foreignId:e,properties:c};await p(`${Te}users`,{...i,method:"POST",body:JSON.stringify(f)}),n(w=>({...w,...c})),s()},[e,i,r,s]),u=mr(async(c,f)=>{d();let T={foreignId:e,events:[{event:c,properties:f}]};await p(`${Te}users`,{...i,method:"POST",body:JSON.stringify(T)}),s()},[e,i,s]);return{userId:e,setUserId:o,addPropertiesToUser:a,trackEventForUser:u}}import{v4 as Fa}from"uuid";import Me,{useEffect as Sa,useState as ya}from"react";import je,{useEffect as sl}from"react";import so from"styled-components";import tl from"react";import ol from"styled-components";var ur="fr-",zt="cfr-";function l(e,t){let o=`${ur}${e}`;if(!t)return o;if(t.styleOverrides&&t.styleOverrides[e]){if(typeof t.styleOverrides[e]=="string")return o+" "+t.styleOverrides[e];if(typeof t.styleOverrides[e]=="object")return o+" "+zt+e}return o}function k(e){if(!e.className||e.className.indexOf(zt)!==-1)return"";let o=e.className.replace(/\s+/g," ").split(" ");return o.length==1&&o[0].startsWith(ur)?"":`:not(${o.map(n=>`.${n}`).join(", ")})`}function Oo(e){return e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase()}function pt(e){return e!=null&&e.styleOverrides?Object.keys(e.styleOverrides).map(t=>`${Oo(t)}: ${e.styleOverrides[t]};`).join(" "):""}function xe(...e){return e.filter(Boolean).join(" ")}function fr(e){return e.charAt(0).toUpperCase()+e.slice(1)}var rl=ol.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
position: fixed;
|
|
@@ -7,7 +7,7 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
7
7
|
left: 0;
|
|
8
8
|
bottom: 0;
|
|
9
9
|
right: 0;
|
|
10
|
-
${e=>
|
|
10
|
+
${e=>k(e)} {
|
|
11
11
|
background-color: rgba(0, 0, 0, 0.6);
|
|
12
12
|
z-index: 1400;
|
|
13
13
|
}
|
|
@@ -23,12 +23,12 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
23
23
|
opacity: 1;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
`,
|
|
26
|
+
`,gr=({onClose:e,appearance:t})=>tl.createElement(rl,{className:l("modalBackground",t),onClick:()=>e()});import no from"react";import il from"styled-components";var nl=il.div`
|
|
27
27
|
:hover {
|
|
28
28
|
opacity: 0.8;
|
|
29
29
|
}
|
|
30
|
-
`,
|
|
31
|
-
${e=>
|
|
30
|
+
`,ve=()=>no.createElement(nl,null,no.createElement("svg",{width:"12",height:"12",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},no.createElement("rect",{y:"1.39844",width:"1.97669",height:"17.8213",rx:"0.988346",transform:"rotate(-45 0 1.39844)",fill:"currentColor"}),no.createElement("rect",{x:"12.6023",width:"1.97669",height:"17.8213",rx:"0.988346",transform:"rotate(45 12.6023 0)",fill:"currentColor"})));import{Portal as ll}from"react-portal";var al=so.div`
|
|
31
|
+
${e=>k(e)} {
|
|
32
32
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
33
33
|
background-color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBackground}};
|
|
34
34
|
/* Mobile */
|
|
@@ -45,7 +45,7 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
45
45
|
|
|
46
46
|
border-radius: ${e=>{var t,o;return((o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.borderRadius)??8}}px;
|
|
47
47
|
|
|
48
|
-
${e=>
|
|
48
|
+
${e=>pt(e)}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
padding: 32px;
|
|
@@ -72,28 +72,28 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
72
72
|
opacity: 1;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
`,
|
|
75
|
+
`,pl=so.div`
|
|
76
76
|
position: relative;
|
|
77
77
|
flex: 0 1 auto;
|
|
78
|
-
`,
|
|
78
|
+
`,dl=so.div`
|
|
79
79
|
position: absolute;
|
|
80
80
|
top: 24px;
|
|
81
81
|
right: 24px;
|
|
82
82
|
cursor: pointer;
|
|
83
83
|
z-index: 1501;
|
|
84
|
-
${e=>
|
|
84
|
+
${e=>k(e)} {
|
|
85
85
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
86
86
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
87
87
|
}
|
|
88
|
-
`,
|
|
88
|
+
`,cl=so.div`
|
|
89
89
|
overflow: scroll;
|
|
90
90
|
flex: 1 1;
|
|
91
91
|
display: flex;
|
|
92
92
|
::-webkit-scrollbar {
|
|
93
93
|
display: none;
|
|
94
94
|
}
|
|
95
|
-
`,
|
|
96
|
-
${e=>
|
|
95
|
+
`,Qe=({onClose:e,visible:t,headerContent:o=null,style:n=null,children:r,appearance:i,dismissible:s=!0})=>(sl(()=>{let p=d=>{d.key==="Escape"&&e()};return document.addEventListener("keydown",p),t?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset",document.removeEventListener("keydown",p)}},[e,t]),t?je.createElement(ll,null,je.createElement(gr,{appearance:i,onClose:()=>{s&&e()}}),je.createElement(al,{appearance:i,className:l("modalContainer",i),styleOverrides:n},s&&je.createElement(dl,{className:l("modalClose",i),onClick:()=>e(),appearance:i},je.createElement(ve,null)),o&&je.createElement(pl,null,o),je.createElement(cl,null,r))):je.createElement(je.Fragment,null));import Ze,{useEffect as ml}from"react";import lo from"styled-components";import{Portal as ul}from"react-portal";var fl=lo.div`
|
|
96
|
+
${e=>k(e)} {
|
|
97
97
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
98
98
|
background: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBackground}};
|
|
99
99
|
position: fixed;
|
|
@@ -110,41 +110,41 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
110
110
|
bottom: 0;
|
|
111
111
|
margin-right: 28px;
|
|
112
112
|
margin-bottom: 28px;
|
|
113
|
-
`,
|
|
113
|
+
`,gl=lo.div`
|
|
114
114
|
position: relative;
|
|
115
115
|
flex: 1;
|
|
116
|
-
`,
|
|
116
|
+
`,hl=lo.div`
|
|
117
117
|
position: absolute;
|
|
118
118
|
top: 24px;
|
|
119
119
|
right: 24px;
|
|
120
120
|
cursor: pointer;
|
|
121
121
|
z-index: 1501;
|
|
122
|
-
${e=>
|
|
122
|
+
${e=>k(e)} {
|
|
123
123
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
124
124
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
125
125
|
}
|
|
126
|
-
`,
|
|
126
|
+
`,xl=lo.div`
|
|
127
127
|
overflow: scroll;
|
|
128
128
|
flex: 5;
|
|
129
129
|
::-webkit-scrollbar {
|
|
130
130
|
display: none;
|
|
131
131
|
}
|
|
132
|
-
`,
|
|
133
|
-
${e=>
|
|
132
|
+
`,hr=({onClose:e,visible:t,headerContent:o=null,children:n,appearance:r})=>(ml(()=>{let i=s=>{s.key==="Escape"&&e()};return document.addEventListener("keydown",i),t?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset",document.removeEventListener("keydown",i)}},[e,t]),t?Ze.createElement(ul,null,Ze.createElement(fl,{appearance:r,className:l("cornerModalContainer",r)},Ze.createElement(hl,{className:l("cornerModalClose",r),onClick:()=>e()},Ze.createElement(ve,null)),o&&Ze.createElement(gl,null,o),Ze.createElement(xl,null,n))):Ze.createElement(Ze.Fragment,null));import{useContext as Cl}from"react";function Q(){let{defaultAppearance:e}=Cl(V);function t(o){let n=JSON.parse(JSON.stringify(e));return o?{styleOverrides:Object.assign(n.styleOverrides??{},o.styleOverrides??{}),theme:Object.assign(n.theme,o.theme??{})}:n}return{mergeAppearanceWithDefault:t}}import Ht,{useEffect as Il,useState as Uo}from"react";import _o from"styled-components";import co,{useEffect as Sl,useState as Tr}from"react";import $o from"styled-components";import ao from"styled-components";var xr=ao.label`
|
|
133
|
+
${e=>k(e)} {
|
|
134
134
|
font-size: 14px;
|
|
135
135
|
line-height: 20px;
|
|
136
136
|
margin-bottom: 5px;
|
|
137
137
|
margin-top: 10px;
|
|
138
138
|
}
|
|
139
139
|
display: flex;
|
|
140
|
-
`,
|
|
141
|
-
${e=>
|
|
140
|
+
`,Cr=ao.label`
|
|
141
|
+
${e=>k(e)} {
|
|
142
142
|
font-size: 12px;
|
|
143
143
|
line-height: 20px;
|
|
144
144
|
margin-bottom: 5px;
|
|
145
145
|
}
|
|
146
146
|
display: flex;
|
|
147
|
-
`,
|
|
147
|
+
`,Sr=ao.span`
|
|
148
148
|
font-weight: 400;
|
|
149
149
|
font-size: 14px;
|
|
150
150
|
line-height: 22px;
|
|
@@ -152,17 +152,17 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
152
152
|
display: flex;
|
|
153
153
|
margin-right: 5px;
|
|
154
154
|
margin-top: 10px;
|
|
155
|
-
`,ao
|
|
155
|
+
`,po=ao.div`
|
|
156
156
|
display: flex;
|
|
157
157
|
align-items: flex-start;
|
|
158
158
|
justify-content: left;
|
|
159
159
|
margin-bottom: 10px;
|
|
160
|
-
`;import
|
|
160
|
+
`;import Do from"react";function Re({title:e,required:t,appearance:o}){return Do.createElement(po,null,t?Do.createElement(Sr,null,"*"):null,Do.createElement(xr,{className:l("formLabel",o)},e))}import yr from"react";function Tt({title:e,appearance:t}){return e?yr.createElement(po,null,yr.createElement(Cr,{className:l("formSubLabel",t)},e)):null}import{z as br}from"zod";function wr(e,t){try{if(t){if(t.type=="number"){let o=br.number();if(t.props)for(let n of t.props)n.requirement=="min"?o=o.min(Number(n.value),n.message??"Value is too small"):n.requirement=="max"?o=o.max(Number(n.value),n.message??"Value is too large"):n.requirement=="positive"?o=o.positive(n.message??"Value must be positive"):n.requirement=="negative"&&(o=o.nonpositive(n.message??"Value must be negative"));o.parse(Number(e))}return}}catch(o){if(o instanceof br.ZodError)return o.issues&&o.issues.length>0?o.issues[0].message:null;console.error("Frigade Form validation failed for rule ",t,o)}return null}var yl=$o.div`
|
|
161
161
|
display: flex;
|
|
162
162
|
flex-direction: column;
|
|
163
163
|
width: 100%;
|
|
164
|
-
|
|
165
|
-
${e=>
|
|
164
|
+
`,Mo=$o.input`
|
|
165
|
+
${e=>k(e)} {
|
|
166
166
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
167
167
|
border: 1px solid ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
168
168
|
font-size: 14px;
|
|
@@ -177,8 +177,8 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
177
177
|
box-sizing: border-box;
|
|
178
178
|
padding: 0 10px;
|
|
179
179
|
margin-bottom: 10px;
|
|
180
|
-
`,
|
|
181
|
-
${e=>
|
|
180
|
+
`,bl=$o.textarea`
|
|
181
|
+
${e=>k(e)} {
|
|
182
182
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
183
183
|
border: 1px solid ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
184
184
|
font-size: 14px;
|
|
@@ -193,14 +193,14 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
193
193
|
min-height: 70px;
|
|
194
194
|
box-sizing: border-box;
|
|
195
195
|
margin-bottom: 10px;
|
|
196
|
-
`;function
|
|
196
|
+
`;function Fr({formInput:e,customFormTypeProps:t,onSaveInputData:o,setFormValidationErrors:n,inputData:r}){let i=e,[s,p]=Tr((r==null?void 0:r.text)||""),[d,a]=Tr(!1),u=Mo;Sl(()=>{s===""&&!d&&(a(!0),c(""))},[]);function c(w){if(p(w),i.required===!0&&w.trim()===""){n([{id:i.id,message:`${i.title} is required`}]);return}let T=wr(w,i.validation);if(T){n([{id:i.id,message:T}]);return}n([]),o({text:w})}i.multiline&&(u=bl);function f(){var w;switch((w=i==null?void 0:i.validation)==null?void 0:w.type){case"email":return"email";case"number":return"number";case"password":return"password"}return null}return co.createElement(yl,null,co.createElement(Re,{title:i.title,required:i.required,appearance:t.appearance}),co.createElement(u,{className:l("inputComponent",t.appearance),value:s,onChange:w=>{c(w.target.value)},appearance:t.appearance,placeholder:i.placeholder,type:f()}),co.createElement(Tt,{title:i.subtitle,appearance:t.appearance}))}import $e,{useEffect as kr,useState as Pr}from"react";import vr from"styled-components";var wl=vr.div`
|
|
197
197
|
display: flex;
|
|
198
198
|
flex-direction: column;
|
|
199
199
|
width: 100%;
|
|
200
200
|
-webkit-appearance: none;
|
|
201
201
|
appearance: none;
|
|
202
|
-
`,
|
|
203
|
-
${e=>
|
|
202
|
+
`,Tl=vr.select`
|
|
203
|
+
${e=>k(e)} {
|
|
204
204
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
205
205
|
border: 1px solid ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
206
206
|
font-size: 14px;
|
|
@@ -223,14 +223,14 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
223
223
|
background-repeat: no-repeat;
|
|
224
224
|
background-size: 1.5em 1.5em;
|
|
225
225
|
-webkit-print-color-adjust: exact;
|
|
226
|
-
`,
|
|
226
|
+
`,mo="null";function Er({formInput:e,customFormTypeProps:t,onSaveInputData:o,inputData:n,setFormValidationErrors:r}){var u,c,f,w,T,S;let i=e,[s,p]=Pr(((u=n==null?void 0:n.choice)==null?void 0:u[0])||""),[d,a]=Pr(!1);return kr(()=>{var h,E,y,I;if(s===""&&!d){if(a(!0),i.requireSelection){p(mo);return}if(i.defaultValue&&((h=i.props.options)!=null&&h.find(F=>F.id===i.defaultValue))){let F=(E=i.props.options)==null?void 0:E.find(x=>x.id===i.defaultValue);p(F.id),o({choice:[F.id]})}else p(((y=i.props.options)==null?void 0:y[0].id)||""),o({choice:[((I=i.props.options)==null?void 0:I[0].id)||""]})}},[]),kr(()=>{i.requireSelection&&s===mo?r([{message:"Please select an option",id:i.id}]):r([])},[s]),$e.createElement(wl,null,$e.createElement(Re,{title:i.title,required:!1,appearance:t.appearance}),$e.createElement(Tl,{value:s,onChange:h=>{p(h.target.value),o({choice:[h.target.value]})},placeholder:i.placeholder,appearance:t.appearance,className:l("multipleChoiceSelect",t.appearance)},i.requireSelection&&$e.createElement("option",{key:mo,value:mo},"Select an option"),(c=i.props.options)==null?void 0:c.map(h=>$e.createElement("option",{key:h.id,value:h.id},h.title))),((w=(f=i.props.options)==null?void 0:f.find(h=>h.id===s))==null?void 0:w.isOpenEnded)&&$e.createElement($e.Fragment,null,$e.createElement(Re,{title:((S=(T=i.props.options)==null?void 0:T.find(h=>h.id===s))==null?void 0:S.openEndedLabel)??"Please specify",required:!1,appearance:t.appearance}),$e.createElement(Mo,{type:"text",placeholder:"Enter your answer here",onChange:h=>{o({choice:[h.target.value]})},appearance:t.appearance})),$e.createElement(Tt,{title:i.subtitle,appearance:t.appearance}))}import uo,{useEffect as Ir,useState as Ar}from"react";import Br from"styled-components";var Fl=Br.div`
|
|
227
227
|
display: flex;
|
|
228
228
|
flex-direction: column;
|
|
229
229
|
width: 100%;
|
|
230
230
|
-webkit-appearance: none;
|
|
231
231
|
appearance: none;
|
|
232
|
-
`,
|
|
233
|
-
${e=>
|
|
232
|
+
`,kl=Br.button`
|
|
233
|
+
${e=>k(e)} {
|
|
234
234
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
235
235
|
border: 1px solid ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
236
236
|
font-size: 14px;
|
|
@@ -251,8 +251,8 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
251
251
|
height: 60px;
|
|
252
252
|
padding: 0 18px;
|
|
253
253
|
margin-bottom: 10px;
|
|
254
|
-
`;function
|
|
255
|
-
${e=>
|
|
254
|
+
`;function Nr({formInput:e,customFormTypeProps:t,onSaveInputData:o,inputData:n}){var a;let r=e,[i,s]=Ar((n==null?void 0:n.choice)||[]),[p,d]=Ar(!1);return Ir(()=>{i.length==0&&!p&&(d(!0),o({choice:[]}))},[]),Ir(()=>{o({choice:i})},[i]),uo.createElement(Fl,null,uo.createElement(Re,{title:r.title,required:r.required,appearance:t.appearance}),(a=r.props.options)==null?void 0:a.map(u=>uo.createElement(kl,{appearance:t.appearance,key:u.id,value:u.id,"data-selected":i.includes(u.id),onClick:()=>{if(i.includes(u.id)){s(i.filter(c=>c!==u.id));return}i.length<r.props.maxChoices?s([...i,u.id]):i.length==1&&r.props.maxChoices==1&&s([u.id])}},u.title)),uo.createElement(Tt,{title:r.subtitle,appearance:t.appearance}))}import fo from"react";import Lr from"styled-components";import Pl from"dompurify";function pe(e){return{__html:Pl.sanitize(e,{ALLOWED_TAGS:["b","i","a","span","div","p","pre","u","br","img"],ALLOWED_ATTR:["style","class","target","id","href","alt","src"]})}}var vl=Lr.h1`
|
|
255
|
+
${e=>k(e)} {
|
|
256
256
|
font-style: normal;
|
|
257
257
|
font-weight: 600;
|
|
258
258
|
font-size: ${e=>e.size=="small"?"15px":"18px"};
|
|
@@ -262,36 +262,40 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
262
262
|
margin-bottom: 4px;
|
|
263
263
|
color: ${e=>e.appearance.theme.colorText};
|
|
264
264
|
}
|
|
265
|
-
`,
|
|
266
|
-
${e=>
|
|
265
|
+
`,El=Lr.h2`
|
|
266
|
+
${e=>k(e)} {
|
|
267
267
|
font-style: normal;
|
|
268
268
|
font-weight: 400;
|
|
269
269
|
font-size: 15px;
|
|
270
270
|
line-height: 20px;
|
|
271
271
|
color: ${e=>e.appearance.theme.colorTextSecondary};
|
|
272
272
|
}
|
|
273
|
-
`;function
|
|
273
|
+
`;function Ce({appearance:e,title:t,subtitle:o,size:n="medium"}){return fo.createElement(fo.Fragment,null,fo.createElement(vl,{appearance:e,className:l(`${n}Title`,e),dangerouslySetInnerHTML:pe(t),size:n}),o&&fo.createElement(El,{appearance:e,className:l(`${n}Subtitle`,e),dangerouslySetInnerHTML:pe(o),size:n}))}var Al=_o.div`
|
|
274
274
|
display: flex;
|
|
275
275
|
flex-direction: column;
|
|
276
276
|
justify-content: flex-end;
|
|
277
277
|
padding-bottom: 14px;
|
|
278
278
|
overflow: visible;
|
|
279
|
-
`,
|
|
279
|
+
`,Bl=_o.div`
|
|
280
|
+
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextError}};
|
|
281
|
+
font-size: 12px;
|
|
282
|
+
margin-bottom: 12px;
|
|
283
|
+
`,Nl=_o.div`
|
|
280
284
|
padding-left: 1px;
|
|
281
285
|
padding-right: 1px;
|
|
282
|
-
`,
|
|
286
|
+
`,Ll={text:Fr,multipleChoice:Er,multipleChoiceList:Nr};function Or({stepData:e,canContinue:t,setCanContinue:o,onSaveData:n,appearance:r,customFormElements:i}){var E;let s=e.props,[p,d]=Uo(S()||{}),[a,u]=Uo([]),[c,f]=Uo([]),w={...Ll,...i};Il(()=>{o(a.length===0)},[a,o]);function T(y,I){let F={...p,[y.id]:I};d(F),n(F),window&&window.localStorage&&window.localStorage.setItem(h(),JSON.stringify(F))}function S(){if(window&&window.localStorage){let y=window.localStorage.getItem(h());if(y)return JSON.parse(y)}return{}}function h(){return`frigade-multiInputStepTypeData-${e.id}`}return Ht.createElement(Nl,{className:l("multiInput",r)},Ht.createElement(Ce,{appearance:r,title:e.title,subtitle:e.subtitle}),Ht.createElement(Al,{className:l("multiInputContainer",r)},(E=s.data)==null?void 0:E.map(y=>{var F;let I=(F=a.reverse().find(x=>x.id===y.id))==null?void 0:F.message;return w[y.type]?Ht.createElement("span",{key:y.id},w[y.type]({formInput:y,customFormTypeProps:{stepData:e,canContinue:t,setCanContinue:o,onSaveData:n,appearance:r},onSaveInputData:x=>{c.includes(y.id)||f(m=>[...m,y.id]),T(y,x)},inputData:p[y.id],setFormValidationErrors:x=>{u(m=>x.length===0?m.filter(C=>C.id!==y.id):[...m,...x])}}),I&&c.includes(y.id)&&Ht.createElement(Bl,{appearance:r,className:l("multiInputValidationError",r)},I)):null})))}import Ft from"styled-components";var Dr=Ft.div`
|
|
283
287
|
align-items: center;
|
|
284
288
|
display: flex;
|
|
285
289
|
justify-content: space-between;
|
|
286
290
|
padding-top: 14px;
|
|
287
|
-
|
|
291
|
+
`,$r=Ft.div`
|
|
288
292
|
display: flex;
|
|
289
293
|
gap: 12px;
|
|
290
|
-
`,
|
|
294
|
+
`,Mr=Ft.div`
|
|
291
295
|
display: flex;
|
|
292
296
|
flex-direction: row;
|
|
293
297
|
flex: 1 1;
|
|
294
|
-
`,
|
|
298
|
+
`,Ur=Ft.div`
|
|
295
299
|
display: flex;
|
|
296
300
|
// If type is set to large-modal, use padding 60px horizontal, 80px vertical
|
|
297
301
|
// Otherwise, use 4px padding
|
|
@@ -299,11 +303,11 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
299
303
|
flex-grow: 1;
|
|
300
304
|
flex-basis: 0;
|
|
301
305
|
position: relative;
|
|
302
|
-
|
|
306
|
+
`,_r=Ft.div`
|
|
303
307
|
padding: ${e=>e.type==="large-modal"?"50px":"0px"};
|
|
304
308
|
position: relative;
|
|
305
309
|
overflow-y: auto;
|
|
306
|
-
`,
|
|
310
|
+
`,Wr=Ft.div`
|
|
307
311
|
display: flex;
|
|
308
312
|
align-self: stretch;
|
|
309
313
|
flex-grow: 1;
|
|
@@ -315,10 +319,10 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
315
319
|
background-position: center;
|
|
316
320
|
border-top-right-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
317
321
|
border-bottom-right-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
318
|
-
`;import
|
|
322
|
+
`;import Gt from"react";import Ol from"react";import zr from"styled-components";var Dl=zr.button`
|
|
319
323
|
justify-content: center;
|
|
320
324
|
align-content: center;
|
|
321
|
-
${e=>
|
|
325
|
+
${e=>k(e)} {
|
|
322
326
|
display: flex;
|
|
323
327
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
324
328
|
width: ${e=>e.type==="full-width"?"100%":"auto"};
|
|
@@ -345,8 +349,8 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
345
349
|
opacity: 0.3;
|
|
346
350
|
cursor: not-allowed;
|
|
347
351
|
}
|
|
348
|
-
`,go=
|
|
349
|
-
${e=>
|
|
352
|
+
`,go=zr.div`
|
|
353
|
+
${e=>k(e)} {
|
|
350
354
|
display: flex;
|
|
351
355
|
flex-direction: row;
|
|
352
356
|
justify-content: flex-start;
|
|
@@ -355,14 +359,14 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
355
359
|
margin-right: 8px;
|
|
356
360
|
}
|
|
357
361
|
}
|
|
358
|
-
`,R=({onClick:e,title:t,style:o,disabled:n,type:r="inline",size:i="medium",secondary:s=!1,appearance:p,withMargin:d=!0,classPrefix:a=""})=>{function u(){let c=s?"buttonSecondary":"button";return a===""?c:`${a}${
|
|
362
|
+
`,R=({onClick:e,title:t,style:o,disabled:n,type:r="inline",size:i="medium",secondary:s=!1,appearance:p,withMargin:d=!0,classPrefix:a=""})=>{function u(){let c=s?"buttonSecondary":"button";return a===""?c:`${a}${fr(c)}`}return Ol.createElement(Dl,{secondary:s,appearance:p,disabled:n,onClick:e,style:o,type:r,withMargin:d,size:i,className:l(u(),p)},t)};var Hr=({step:e,canContinue:t,appearance:o,onPrimaryClick:n,onSecondaryClick:r,formType:i,selectedStep:s,steps:p,onBack:d,allowBackNavigation:a})=>{let u=i==="inline"?"inline":"full-width";return Gt.createElement(Dr,{className:l("formCTAContainer",o)},p.length>1&&s!=0&&a&&Gt.createElement(R,{title:"\u2190",onClick:d,secondary:!0,withMargin:!1,type:u,appearance:o}),Gt.createElement($r,{className:l("ctaWrapper",o)},e.secondaryButtonTitle?Gt.createElement(R,{title:e.secondaryButtonTitle,onClick:r,secondary:!0,withMargin:!1,type:u,appearance:o}):null," ",e.primaryButtonTitle?Gt.createElement(R,{disabled:!t,withMargin:!1,title:e.primaryButtonTitle,onClick:n,type:u,appearance:o}):null))};import Wo from"react";import $l from"styled-components";var Ml=$l.div`
|
|
359
363
|
text-align: center;
|
|
360
|
-
`,
|
|
364
|
+
`,Gr=({stepCount:e=0,currentStep:t=0,className:o,appearance:n})=>{let{theme:r}=Q().mergeAppearanceWithDefault(n);return Wo.createElement(Ml,{className:o},Wo.createElement("svg",{width:16*e-8,height:8,viewBox:`0 0 ${16*e-8} 8`,fill:"none"},Array(e).fill(null).map((i,s)=>Wo.createElement("rect",{key:s,x:16*s,y:0,width:8,height:8,rx:4,fill:t===s?r.colorPrimary:"#E6E6E6"}))))};import dt from"react";import kt from"styled-components";import{useContext as Ul}from"react";function ie(){let e=Ul(V);function t(r){n(r.primaryButtonUri,r.primaryButtonUriTarget)}function o(r){n(r.secondaryButtonUri,r.secondaryButtonUriTarget)}function n(r,i){if(!r)return;let s=r.startsWith("http")?"_blank":"_self";i&&i!=="_blank"&&(s="_self"),e.navigate(r,s)}return{primaryCTAClickSideEffects:t,secondaryCTAClickSideEffects:o,handleUrl:n}}var _l=kt.div`
|
|
361
365
|
display: flex;
|
|
362
366
|
flex-wrap: wrap;
|
|
363
367
|
align-content: center;
|
|
364
368
|
justify-content: center;
|
|
365
|
-
|
|
369
|
+
`,Wl=kt.div`
|
|
366
370
|
align-content: center;
|
|
367
371
|
align-items: center;
|
|
368
372
|
display: flex;
|
|
@@ -376,10 +380,10 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
376
380
|
flex-basis: 255px;
|
|
377
381
|
flex-grow: 0;
|
|
378
382
|
flex-shrink: 0;
|
|
379
|
-
`,
|
|
383
|
+
`,zl=kt.img`
|
|
380
384
|
width: 78px;
|
|
381
385
|
height: auto;
|
|
382
|
-
`,
|
|
386
|
+
`,Hl=kt.button`
|
|
383
387
|
font-style: normal;
|
|
384
388
|
font-weight: 600;
|
|
385
389
|
font-size: 13px;
|
|
@@ -392,11 +396,11 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
392
396
|
border-radius: 100px;
|
|
393
397
|
padding: 8px 12px;
|
|
394
398
|
margin-top: 16px;
|
|
395
|
-
`,
|
|
399
|
+
`,Gl=kt.h1`
|
|
396
400
|
font-weight: 700;
|
|
397
401
|
font-size: 28px;
|
|
398
402
|
line-height: 34px;
|
|
399
|
-
`,
|
|
403
|
+
`,jl=kt.h2`
|
|
400
404
|
font-style: normal;
|
|
401
405
|
font-weight: 400;
|
|
402
406
|
font-size: 16px;
|
|
@@ -405,7 +409,7 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
405
409
|
margin-top: 12px;
|
|
406
410
|
margin-bottom: 16px;
|
|
407
411
|
max-width: 70%;
|
|
408
|
-
`;function
|
|
412
|
+
`;function jr({stepData:e,appearance:t}){var n,r;let{handleUrl:o}=ie();return dt.createElement("div",null,dt.createElement(Gl,null,e.title),dt.createElement(jl,null,e.subtitle),dt.createElement(_l,null,(r=(n=e.props)==null?void 0:n.links)==null?void 0:r.map(i=>dt.createElement(Wl,{key:i.title},dt.createElement(zl,{src:i.imageUri}),dt.createElement(Hl,{style:{borderColor:t.theme.colorPrimary,color:t.theme.colorPrimary},onClick:()=>{i.uri&&o(i.uri,i.uriTarget??"_blank")}},i.title)))))}import vt,{useEffect as Ql}from"react";import Co from"styled-components";import zo from"react";var ho=({style:e,className:t})=>zo.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:t,style:e},zo.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}),zo.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z"}));import jt,{useRef as Vl,useState as Kl}from"react";import xo from"styled-components";var ql=xo.div`
|
|
409
413
|
display: flex;
|
|
410
414
|
align-items: center;
|
|
411
415
|
justify-content: flex-start;
|
|
@@ -413,7 +417,7 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
413
417
|
width: 100%;
|
|
414
418
|
height: 100%;
|
|
415
419
|
position: relative;
|
|
416
|
-
`,
|
|
420
|
+
`,Yl=xo.div`
|
|
417
421
|
position: absolute;
|
|
418
422
|
display: flex;
|
|
419
423
|
align-items: center;
|
|
@@ -432,59 +436,59 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
432
436
|
box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.06);
|
|
433
437
|
border-radius: 50%;
|
|
434
438
|
}
|
|
435
|
-
`,
|
|
439
|
+
`,Xl=xo.video`
|
|
436
440
|
width: 100%;
|
|
437
441
|
height: 100%;
|
|
438
442
|
min-height: 200px;
|
|
439
443
|
border-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
440
|
-
`,
|
|
444
|
+
`,Jl=xo.iframe`
|
|
441
445
|
width: 100%;
|
|
442
446
|
height: 100%;
|
|
443
447
|
min-height: 200px;
|
|
444
448
|
border-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
445
|
-
`;function Pt({appearance:e,videoUri:t}){let o=
|
|
446
|
-
${e=>
|
|
449
|
+
`;function Pt({appearance:e,videoUri:t}){let o=Vl(),[n,r]=Kl(!1);if(t.includes("youtube")){let i=t.split("v=")[1],s=i.indexOf("&");return s!==-1&&(i=i.substring(0,s)),jt.createElement(Jl,{width:"100%",height:"100%",src:`https://www.youtube.com/embed/${i}`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,appearance:e})}return jt.createElement(ql,{appearance:e},!n&&jt.createElement(Yl,{onClick:()=>{r(!0),o.current.play()},appearance:e},jt.createElement(ho,null)),jt.createElement(Xl,{appearance:e,controls:n,ref:o,play:n,src:t}))}var Zl=Co.div`
|
|
450
|
+
${e=>k(e)} {
|
|
447
451
|
display: flex;
|
|
448
452
|
flex-direction: column;
|
|
449
453
|
justify-content: center;
|
|
450
454
|
}
|
|
451
|
-
`,
|
|
452
|
-
${e=>
|
|
455
|
+
`,Rl=Co.img`
|
|
456
|
+
${e=>k(e)} {
|
|
453
457
|
width: 100%;
|
|
454
458
|
height: auto;
|
|
455
459
|
max-height: 250px;
|
|
456
460
|
margin-bottom: 24px;
|
|
457
461
|
}
|
|
458
|
-
`,
|
|
459
|
-
${e=>
|
|
462
|
+
`,ea=Co.div`
|
|
463
|
+
${e=>k(e)} {
|
|
460
464
|
margin-bottom: 24px;
|
|
461
465
|
}
|
|
462
|
-
`,
|
|
463
|
-
${e=>
|
|
466
|
+
`,ta=Co.div`
|
|
467
|
+
${e=>k(e)} {
|
|
464
468
|
width: 100%;
|
|
465
469
|
height: auto;
|
|
466
470
|
max-height: 250px;
|
|
467
471
|
margin-bottom: 24px;
|
|
468
472
|
}
|
|
469
|
-
`;function
|
|
470
|
-
${e=>
|
|
471
|
-
`,
|
|
473
|
+
`;function Vr({stepData:e,appearance:t,setCanContinue:o}){return Ql(()=>{o(!0)},[]),vt.createElement(Zl,{className:l("callToActionContainer",t)},vt.createElement(ea,{className:l("callToActionTextContainer",t)},vt.createElement(Ce,{appearance:t,title:e.title,subtitle:e.subtitle})),e.imageUri&&vt.createElement(Rl,{className:l("callToActionImage",t),src:e.imageUri}),!e.imageUri&&e.videoUri&&vt.createElement(ta,{appearance:t,className:l("callToActionVideo",t)},vt.createElement(Pt,{appearance:t,videoUri:e.videoUri})))}import Ve,{useEffect as Ho,useState as Go}from"react";import Kt from"react";import Vt from"react";import{motion as oa}from"framer-motion";var Kr=({color:e,percentage:t,size:o})=>{let n=o*.5-2,r=2*Math.PI*n,i=(1-t)*r,s={duration:.3,delay:0,ease:"easeIn"},p={hidden:{strokeDashoffset:r,transition:s},show:{strokeDashoffset:i,transition:s}};return Vt.createElement(oa.circle,{r:n,cx:o*.5,cy:o*.5,fill:"transparent",stroke:i!==r?e:"",strokeWidth:"3px",strokeDasharray:r,strokeDashoffset:t?i:0,variants:p,transition:s,initial:"hidden",animate:"show"})},ra=({fillColor:e,size:t,percentage:o,children:n,bgColor:r="#D9D9D9",className:i,style:s})=>Vt.createElement("svg",{style:s,className:i,width:t,height:t,overflow:"visible"},Vt.createElement("g",{transform:`rotate(-90 ${`${t*.5} ${t*.5}`})`},Vt.createElement(Kr,{color:r,size:t}),Vt.createElement(Kr,{color:e,percentage:o,size:t})),n),Et=ra;var It={theme:{colorPrimary:"#000000",colorText:"#000000",colorBackground:"#ffffff",colorBackgroundSecondary:"#d2d2d2",colorTextOnPrimaryBackground:"#ffffff",colorTextSecondary:"#505050",colorTextDisabled:"#999999",colorBorder:"#E5E5E5",colorTextError:"#c00000",borderRadius:20}};import ia from"styled-components";var na=({color:e="#FFFFFF"})=>Kt.createElement("svg",{width:10,height:8,viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Kt.createElement("path",{d:"M1 4.34815L3.4618 7L3.4459 6.98287L9 1",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})),sa={width:"22px",height:"22px",borderRadius:"8px",display:"flex",justifyContent:"center",alignItems:"center"},la={width:"22px",height:"22px",borderRadius:"40px",display:"flex",justifyContent:"center",alignItems:"center"},aa={border:"1px solid #000000",color:"#FFFFFF"},pa={border:"1px solid #E6E6E6"},da={color:"#FFFFFF"},ca={border:"3px solid #D9D9D9"},ma=e=>e==="square"?sa:la,ua=(e,t)=>e==="square"?t?aa:pa:t?da:ca,fa=ia.div`
|
|
474
|
+
${e=>pt(e)}
|
|
475
|
+
`,ct=({value:e,type:t="square",primaryColor:o="#000000",progress:n,appearance:r=It,style:i,className:s})=>{let p=ma(t),d=ua(t,e);return e===!0?p={...p,...d,backgroundColor:o,borderColor:t==="square"?o:"none"}:p={...p,...d},e!==!0&&t==="round"&&n!==void 0&&n!==1?Kt.createElement(Et,{fillColor:o,percentage:n,size:22}):Kt.createElement(fa,{styleOverrides:p,style:i,role:"checkbox",className:xe(l("checkIconContainer",r),l(e?"checkIconContainerChecked":"checkIconContainerUnchecked",r),e?"checkIconContainerChecked":"checkIconContainerUnchecked",s)},e&&Kt.createElement(na,{color:"#FFFFFF"}))};import et from"styled-components";var qr=et.div`
|
|
472
476
|
width: auto;
|
|
473
477
|
display: flex;
|
|
474
478
|
flex-direction: column;
|
|
475
479
|
justify-content: center;
|
|
476
480
|
align-items: center;
|
|
477
481
|
padding: 4px;
|
|
478
|
-
`,
|
|
482
|
+
`,Yr=et.div`
|
|
479
483
|
width: 100%;
|
|
480
484
|
text-align: left;
|
|
481
|
-
`,
|
|
485
|
+
`,Xr=et.h1`
|
|
482
486
|
font-style: normal;
|
|
483
487
|
font-weight: 700;
|
|
484
488
|
font-size: 32px;
|
|
485
489
|
line-height: 38px;
|
|
486
490
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
487
|
-
`,
|
|
491
|
+
`,Jr=et.h1`
|
|
488
492
|
font-style: normal;
|
|
489
493
|
font-weight: 400;
|
|
490
494
|
font-size: 16px;
|
|
@@ -492,7 +496,7 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
492
496
|
margin-top: 16px;
|
|
493
497
|
margin-bottom: 16px;
|
|
494
498
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary}};
|
|
495
|
-
`,
|
|
499
|
+
`,Qr=et.div`
|
|
496
500
|
padding-top: 12px;
|
|
497
501
|
padding-bottom: 12px;
|
|
498
502
|
flex-direction: row;
|
|
@@ -503,17 +507,17 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
503
507
|
cursor: pointer;
|
|
504
508
|
border-bottom: ${e=>e.hideBottomBorder?"none":"1px solid #D8D8D8"};
|
|
505
509
|
width: 100%;
|
|
506
|
-
`,
|
|
510
|
+
`,Zr=et.div`
|
|
507
511
|
padding-top: 10px;
|
|
508
512
|
padding-bottom: 10px;
|
|
509
513
|
flex-direction: row;
|
|
510
514
|
display: flex;
|
|
511
515
|
justify-content: flex-start;
|
|
512
|
-
`,
|
|
516
|
+
`,Rr=et.img`
|
|
513
517
|
width: 42px;
|
|
514
518
|
height: 42px;
|
|
515
519
|
margin-right: 12px;
|
|
516
|
-
`,
|
|
520
|
+
`,ei=et.p`
|
|
517
521
|
font-style: normal;
|
|
518
522
|
font-weight: 500;
|
|
519
523
|
font-size: 17px;
|
|
@@ -521,8 +525,8 @@ import mt,{createContext as wa,useEffect as Go,useState as Be}from"react";import
|
|
|
521
525
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
522
526
|
display: flex;
|
|
523
527
|
align-self: center;
|
|
524
|
-
`;var
|
|
525
|
-
${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map(([s,p])=>`${
|
|
528
|
+
`;var ti=({stepData:e,setCanContinue:t,onSaveData:o,appearance:n})=>{let r=e.props,[i,s]=Go([]),[p,d]=Go(!1),[a,u]=Go(e.id);return Ho(()=>{i.length==0&&!p&&(d(!0),o({choice:[]}))},[p]),Ho(()=>{a!==e.id&&(u(e.id),s([]))},[e]),Ho(()=>{o({choice:i}),i.length>=r.minChoices?t(!0):t(!1)},[i]),Ve.createElement(qr,{className:l("selectListContainer",n)},Ve.createElement(Yr,null,Ve.createElement(Xr,{className:l("selectListTitle",n)},e.title),Ve.createElement(Jr,{appearance:n,className:l("selectListSubtitle",n)},e.subtitle)),r.options.map((c,f)=>{let w=i.includes(c.id);return Ve.createElement(Qr,{key:`select-item-${f}`,onClick:()=>{if(i.includes(c.id)){s(i.filter(T=>T!==c.id));return}i.length<r.maxChoices?s([...i,c.id]):i.length==1&&r.maxChoices==1&&s([c.id])},hideBottomBorder:f===r.options.length-1,className:l("selectListSelectItem",n)},Ve.createElement(Zr,{className:l("selectListItemImage",n)},c.imageUri&&Ve.createElement(Rr,{src:c.imageUri,alt:`select-icon-${f}`}),Ve.createElement(ei,{appearance:n,className:l("selectListSelectItemText",n)},c.title)),Ve.createElement(ct,{appearance:n,value:w,primaryColor:n.theme.colorPrimary}))}))};import Se,{useEffect as jo,useState as So}from"react";import{AnimatePresence as ga,motion as ha}from"framer-motion";var xa=({children:e,id:t,shouldWrap:o=!1})=>Se.createElement(Se.Fragment,null,o?Se.createElement(ga,{initial:!1},Se.createElement(ha.div,{key:t,initial:{opacity:1,y:"100%"},animate:{opacity:1,y:0},exit:{opacity:0,y:"-100%"},transition:{duration:.5,ease:"easeInOut"},style:{width:"100%",height:"100%",position:"absolute",top:0,left:0,zIndex:1,overflowY:"auto"}},e)):e),yo=({appearance:e,steps:t,selectedStep:o,customStepTypes:n,customVariables:r,onButtonClick:i,onStepCompletion:s,flowId:p,type:d,hideOnFlowCompletion:a,onComplete:u,setVisible:c,setShowModal:f,onDismiss:w,showPagination:T=!1,customFormElements:S,allowBackNavigation:h})=>{var L;let y={...{linkCollection:jr,multiInput:Or,callToAction:Vr,selectList:ti},...n},{primaryCTAClickSideEffects:I,secondaryCTAClickSideEffects:F}=ie(),[x,m]=So(!1),[C,v]=So({}),[U,$]=So(!1),[_,A]=So(!1),H=t[o]??null,{markStepCompleted:B,markStepStarted:M,isLoading:re,updateCustomVariables:X,markFlowCompleted:W}=Y();jo(()=>{X(r)},[r,re]),jo(()=>{window&&h&&!_&&(window.location.hash=t[o].id,A(!0))},[h,_,A]),jo(()=>{var N;if(window&&((N=window==null?void 0:window.location)!=null&&N.hash)&&window.location.hash.replace("#","")!==t[o].id){let ee=window.location.hash.replace("#",""),te=t.findIndex(we=>we.id===ee);te!==-1&&M(p,t[te].id)}},[(L=window==null?void 0:window.location)==null?void 0:L.hash,M,o,t]);function be(){return{data:C[t[o].id]??{},stepId:t[o].id,customVariables:r}}function me(N,ee,te){let we=o+1<t.length?t[o+1]:null;i&&i(N,o,ee,we),s&&s(N,te,we,C,be())}function j(N,ee){v(te=>{let we={};return we[N.id]=ee,{...te,...we}})}function J(N){return N.selectedStep.imageUri?Se.createElement(Wr,{image:N.selectedStep.imageUri,appearance:e,className:l("formContainerSidebarImage",e)}):null}let fe=Se.createElement(Hr,{step:t[o],canContinue:x&&!U,formType:d,selectedStep:o,appearance:e,onPrimaryClick:async()=>{$(!0);let N={...be()};await B(p,t[o].id,N),o+1<t.length&&await M(p,t[o+1].id),me(t[o],"primary",o),o+1>=t.length&&(u&&u(),w&&w(),a&&(c&&c(!1),f(!1)),await W(p)),I(t[o]),$(!1),window&&h&&o+1<t.length&&(window.location.hash=t[o+1].id)},onSecondaryClick:()=>{me(t[o],"secondary",o),F(t[o])},onBack:async()=>{o-1>=0&&($(!0),await M(p,t[o-1].id),$(!1))},steps:t,allowBackNavigation:h});return Se.createElement(Se.Fragment,null,Se.createElement(Mr,{className:l("formContainer",e)},Se.createElement(Ur,null,Se.createElement(xa,{id:o,shouldWrap:d==="large-modal"},Se.createElement(_r,{key:H.id,type:d,className:l("formContent",e)},t.map(N=>{let ee=y[N.type];return H.id!==N.id?null:Se.createElement(ee,{key:N.id,stepData:N,canContinue:x,setCanContinue:m,onSaveData:te=>{j(N,te)},appearance:e,customFormElements:S})}),T&&Se.createElement(Gr,{className:l("formPagination",e),appearance:e,stepCount:t.length,currentStep:o}),fe))),d=="large-modal"&&Se.createElement(J,{selectedStep:t[o]})))};import qt from"react";import{createGlobalStyle as Ca}from"styled-components";function oe({appearance:e}){if(!e||!e.styleOverrides)return qt.createElement(qt.Fragment,null);let t=Object.entries(e.styleOverrides).filter(([n,r])=>typeof r=="object");if(t.length===0)return qt.createElement(qt.Fragment,null);let o=Ca`
|
|
529
|
+
${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map(([s,p])=>`${Oo(s)}: ${p};`).join(" ")} }`).join(" ")}`;return qt.createElement(o,{inlineStyles:t})}var oi=({flowId:e,customStepTypes:t={},type:o="inline",visible:n,setVisible:r,customVariables:i,customFormElements:s,onComplete:p,appearance:d,hideOnFlowCompletion:a=!0,onStepCompletion:u,onButtonClick:c,dismissible:f=!0,endFlowOnDismiss:w=!1,modalPosition:T="center",repeatable:S=!1,onDismiss:h,showPagination:E=!1,allowBackNavigation:y=!1})=>{let{getFlow:I,getFlowSteps:F,isLoading:x,targetingLogicShouldHideFlow:m,getFlowStatus:C,getCurrentStepIndex:v,markFlowCompleted:U,markFlowNotStarted:$}=Y(),_=v(e),{mergeAppearanceWithDefault:A}=Q(),[H,B]=ya(!1),{setOpenFlowState:M,getOpenFlowState:re}=Pe();d=A(d);let[X,W]=n!==void 0&&r!==void 0?[n,r]:[re(e,!0),J=>M(e,J)];if(Sa(()=>{!H&&!x&&(B(!0),C(e)===q&&S&&$(e),B(!0))},[H,B,x]),x)return null;let be=I(e);if(!be||m(be))return null;let me=F(e);if(!me||n!==void 0&&n===!1||C(e)===q&&a)return null;let j=()=>{W(!1),h&&h(),w===!0&&U(e)};if(T=="center"&&o==="modal"||o==="large-modal"){let J={padding:"24px"};return o==="large-modal"?(J.width="85%",J.height="90%",J.maxHeight="800px",J.minHeight="500px",J.padding="0"):J.width="400px",Me.createElement(Qe,{appearance:d,onClose:j,visible:X,style:J,dismissible:f},Me.createElement(oe,{appearance:d}),Me.createElement(yo,{appearance:d,steps:me,selectedStep:_,customStepTypes:t,customVariables:i,onButtonClick:c,onStepCompletion:u,flowId:e,type:o,hideOnFlowCompletion:a,onComplete:p,setVisible:r,setShowModal:W,onDismiss:h,showPagination:E,customFormElements:s,allowBackNavigation:y}))}return o==="modal"&&T!=="center"?Me.createElement(hr,{appearance:d,onClose:j,visible:X},Me.createElement(oe,{appearance:d}),Me.createElement(yo,{appearance:d,steps:me,selectedStep:_,customStepTypes:t,customVariables:i,onButtonClick:c,onStepCompletion:u,flowId:e,type:o,hideOnFlowCompletion:a,onComplete:p,setVisible:r,setShowModal:W,onDismiss:h,showPagination:E,customFormElements:s,allowBackNavigation:y})):Me.createElement(Me.Fragment,null,Me.createElement(oe,{appearance:d}),Me.createElement(yo,{appearance:d,steps:me,selectedStep:_,customStepTypes:t,customVariables:i,onButtonClick:c,onStepCompletion:u,flowId:e,type:o,hideOnFlowCompletion:a,onComplete:p,setVisible:r,setShowModal:W,onDismiss:h,showPagination:E,customFormElements:s,allowBackNavigation:y}))},ri=oi;import{useCallback as ii,useContext as ba,useEffect as wa}from"react";function Vo(){let{organizationId:e,userId:t,setOrganizationId:o}=ba(V),{mutateUserFlowState:n}=Ae(),{config:r}=De(),i=yt(),{verifySDKInitiated:s}=bt();wa(()=>{if(t&&e){if(t.startsWith(wt))return;let a=`frigade-user-group-registered-${t}-${e}`;localStorage.getItem(a)||(i(`${Te}userGroups`,{...r,method:"POST",body:JSON.stringify({foreignUserId:t,foreignUserGroupId:e})}),localStorage.setItem(a,"true"))}},[t,e]);let p=ii(async a=>{if(s(),!e||!t){console.error("Cannot add properties to organization: Organization ID and User ID must both be set.",{organizationId:e,userId:t});return}let u={foreignUserId:t,foreignUserGroupId:e,properties:a};await i(`${Te}userGroups`,{...r,method:"POST",body:JSON.stringify(u)}),n()},[e,t,r,n]),d=ii(async(a,u)=>{if(s(),!e||!t){console.error("Cannot track event for organization: Organization ID and User ID must both be set.",{organizationId:e,userId:t});return}let f={foreignUserId:t,foreignUserGroupId:e,events:[{event:a,properties:u}]};await i(`${Te}userGroups`,{...r,method:"POST",body:JSON.stringify(f)}),n()},[e,t,r,n]);return{organizationId:e,setOrganizationId:o,addPropertiesToOrganization:p,trackEventForOrganization:d}}var ni="xFrigade_guestUserId",si="xFrigade_userId",li=({})=>{let{setFlowResponses:e}=Wt(),{userFlowStatesData:t,isLoadingUserFlowStateData:o,mutateUserFlowState:n}=Ae(),{userId:r,setUserId:i}=Lo(),[s,p]=Ko(null),{getFlowStatus:d}=Y(),{flows:a,userProperties:u,setIsNewGuestUser:c,flowResponses:f}=Ta(V),[w,T]=Ko([]),[S,h]=Ko([]),{organizationId:E}=Vo();bo(()=>{if(!o&&t)for(let x=0;x<t.length;x++){let m=t[x],C=a.find(v=>v.slug===(m==null?void 0:m.flowId));if(C&&m&&m.shouldTrigger===!0&&C.type=="FORM"&&C.triggerType==="AUTOMATIC"&&!S.includes(C.slug)){setTimeout(()=>{y(m.flowId)},500);break}}},[o,t]),bo(()=>{f.length>0&&n()},[f]);function y(x){let m=a.find(C=>C.slug===x);m&&m.triggerType==="AUTOMATIC"&&!S.includes(m.slug)&&(h([...S,m.slug]),T([m]))}function I(){if(!r){let x=localStorage.getItem(si);if(x){i(x);return}let m=localStorage.getItem(ni);if(m){i(m);return}c(!0);let C=wt+Fa();try{localStorage.setItem(ni,C)}catch(v){console.log("Failed to save guest user id locally: Local storage unavailable",v)}i(v=>v||C)}}bo(()=>{try{if(a){let x=[];a.forEach(m=>{if(m.data){let C=m.data.match(/"imageUri":"(.*?)"/g);C&&C.forEach(v=>{let U=v.replace('"imageUri":"',"").replace('"',"");if(x.includes(U))return;let $=new Image;$.src=U,x.push(U)})}})}}catch{}},[a]),bo(()=>{if(r!==s&&e([]),p(r),r&&!r.startsWith(wt))try{localStorage.setItem(si,r)}catch(x){console.log("Failed to save user id locally: Local storage available",x)}r===null&&setTimeout(()=>{r===null&&I()},50)},[r,a,u]);function F(){return mt.createElement(mt.Fragment,null,w.map(x=>d(x.slug)!==Ne?null:mt.createElement("span",{key:x.slug},mt.createElement(ri,{flowId:x.slug,type:"modal",modalPosition:"center",endFlowOnDismiss:!0}))))}return mt.createElement(mt.Fragment,null,mt.createElement(F,null))};import{ErrorBoundary as va}from"react-error-boundary";var V=ka({publicApiKey:"",setUserId:()=>{},flows:[],setFlows:()=>{},failedFlowResponses:[],setFailedFlowResponses:()=>{},flowResponses:[],setFlowResponses:()=>{},userProperties:{},setUserProperties:()=>{},openFlowStates:{},setOpenFlowStates:()=>{},completedFlowsToKeepOpenDuringSession:[],setCompletedFlowsToKeepOpenDuringSession:()=>{},customVariables:{},setCustomVariables:()=>{},isNewGuestUser:!1,setIsNewGuestUser:()=>{},hasActiveFullPageFlow:!1,setHasActiveFullPageFlow:()=>{},organizationId:"",setOrganizationId:()=>{},navigate:()=>{},defaultAppearance:It,shouldGracefullyDegrade:!1,setShouldGracefullyDegrade:()=>{}}),Ea=({publicApiKey:e,userId:t,organizationId:o,config:n,children:r})=>{var re,X;let[i,s]=Be(t||null),[p,d]=Be(o||null),[a,u]=Be([]),[c,f]=Be([]),[w,T]=Be([]),[S,h]=Be({}),[E,y]=Be({}),[I,F]=Be([]),[x,m]=Be({}),[C,v]=Be(!1),[U,$]=Be(!1),[_,A]=Be(!M(e)),H=(W,be)=>{if(be==="_blank"){window.open(W,"_blank");return}setTimeout(()=>{window.location.href=W},50)},B={theme:{...It.theme,...((re=n==null?void 0:n.defaultAppearance)==null?void 0:re.theme)??{}},styleOverrides:{...It.styleOverrides,...((X=n==null?void 0:n.defaultAppearance)==null?void 0:X.styleOverrides)??{}}};function M(W){return!!(W&&W.length>10&&W.substring(0,10)==="api_public")}return qo(()=>{t&&s(t)},[t]),qo(()=>{o&&d(o)},[o]),qo(()=>{if(M(e))A(!1);else{console.error("Frigade SDK failed to initialize. API key provided is either missing or valid."),A(!0);return}},[e,A]),_?ut.createElement(V.Provider,{value:{publicApiKey:e,userId:i,setUserId:s,setFlows:u,flows:a,failedFlowResponses:c,setFailedFlowResponses:f,flowResponses:w,setFlowResponses:T,userProperties:S,setUserProperties:h,openFlowStates:E,setOpenFlowStates:y,completedFlowsToKeepOpenDuringSession:I,setCompletedFlowsToKeepOpenDuringSession:F,customVariables:x,setCustomVariables:m,isNewGuestUser:C,setIsNewGuestUser:v,hasActiveFullPageFlow:U,setHasActiveFullPageFlow:$,organizationId:p,setOrganizationId:d,navigate:n&&n.navigate?n.navigate:H,defaultAppearance:B,shouldGracefullyDegrade:_,setShouldGracefullyDegrade:A}},r):ut.createElement(va,{fallback:ut.createElement(ut.Fragment,null,r)},ut.createElement(V.Provider,{value:{publicApiKey:e,userId:i,setUserId:s,setFlows:u,flows:a,failedFlowResponses:c,setFailedFlowResponses:f,flowResponses:w,setFlowResponses:T,userProperties:S,setUserProperties:h,openFlowStates:E,setOpenFlowStates:y,completedFlowsToKeepOpenDuringSession:I,setCompletedFlowsToKeepOpenDuringSession:F,customVariables:x,setCustomVariables:m,isNewGuestUser:C,setIsNewGuestUser:v,hasActiveFullPageFlow:U,setHasActiveFullPageFlow:$,organizationId:p,setOrganizationId:d,navigate:n&&n.navigate?n.navigate:H,defaultAppearance:B,shouldGracefullyDegrade:_,setShouldGracefullyDegrade:A}},ut.createElement(Pa,{theme:B.theme},r,ut.createElement(li,null))))};import kp from"react";import le,{useEffect as Un,useState as _n}from"react";import Oe,{useState as Ja}from"react";import ht from"styled-components";import Fo from"react";import ft from"react";import pi from"styled-components";var ai=pi.span`
|
|
526
530
|
font-weight: 400;
|
|
527
531
|
font-size: 15px;
|
|
528
532
|
line-height: 20px;
|
|
@@ -531,7 +535,7 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
531
535
|
vertical-align: middle;
|
|
532
536
|
margin-left: 12px;
|
|
533
537
|
padding-right: 12px;
|
|
534
|
-
`,
|
|
538
|
+
`,Ia=pi.div`
|
|
535
539
|
flex-direction: row;
|
|
536
540
|
justify-content: space-between;
|
|
537
541
|
display: flex;
|
|
@@ -539,24 +543,24 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
539
543
|
padding-bottom: 20px;
|
|
540
544
|
border-top: 1px solid ${e=>e.theme.colorBorder};
|
|
541
545
|
width: 100%;
|
|
542
|
-
`,
|
|
546
|
+
`,wo=({label:e,value:t,labelStyle:o={},labelPosition:n="right",style:r,primaryColor:i="#000000",checkBoxType:s="square",appearance:p})=>ft.createElement(ft.Fragment,null,ft.createElement(Ia,{className:l("checklistStepsContainer",p),appearance:p,style:{...r}},n==="left"&&e&&ft.createElement(ai,{className:l("checklistStepLabel",p),style:o},e),ft.createElement(ct,{appearance:p,value:t,type:s,primaryColor:i}),n==="right"&&e&&ft.createElement(ai,{className:l("checklistStepLabel",p),style:o},e)),ft.createElement(oe,{appearance:p}));import{motion as Aa}from"framer-motion";import Yt from"styled-components";var di=Yt.div`
|
|
543
547
|
font-weight: 700;
|
|
544
548
|
font-size: 18px;
|
|
545
549
|
line-height: 22px;
|
|
546
|
-
`,
|
|
550
|
+
`,ci=Yt.p`
|
|
547
551
|
font-weight: 700;
|
|
548
552
|
font-size: 18px;
|
|
549
553
|
line-height: 22px;
|
|
550
554
|
margin: 20px 0px 0px 0px;
|
|
551
555
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
552
|
-
`,
|
|
556
|
+
`,mi=Yt.p`
|
|
553
557
|
font-weight: 400;
|
|
554
558
|
font-size: 15px;
|
|
555
559
|
line-height: 28px;
|
|
556
560
|
max-width: 540px;
|
|
557
561
|
margin: 8px 0px 0px 0px;
|
|
558
562
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary}};
|
|
559
|
-
`,
|
|
563
|
+
`,To=Yt.div`
|
|
560
564
|
width: 4px;
|
|
561
565
|
position: absolute;
|
|
562
566
|
left: 0;
|
|
@@ -564,35 +568,35 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
564
568
|
height: 80%;
|
|
565
569
|
border-top-right-radius: 8px;
|
|
566
570
|
border-bottom-right-radius: 8px;
|
|
567
|
-
`,
|
|
571
|
+
`,ui=Yt.div`
|
|
568
572
|
flex-direction: row;
|
|
569
573
|
justify-content: flex-start;
|
|
570
|
-
`;var
|
|
574
|
+
`;var fi=({data:e,index:t,isSelected:o,primaryColor:n,style:r,onClick:i,appearance:s})=>{var p,d;return Fo.createElement("div",{style:{position:"relative",paddingLeft:"20px"},onClick:()=>{i()}},o&&Fo.createElement(To,{className:l("checklistStepItemSelectedIndicator",s),as:Aa.div,layoutId:"checklis-step-selected",style:{backgroundColor:((p=s==null?void 0:s.theme)==null?void 0:p.colorPrimary)??n}}),Fo.createElement(ui,{className:l("checklistStepItem",s),key:`hero-checklist-step-${t}`,role:"listitem"},Fo.createElement(wo,{value:e.complete,labelPosition:"left",label:e.stepName,style:r,primaryColor:((d=s==null?void 0:s.theme)==null?void 0:d.colorPrimary)??n,appearance:s})))};import gt from"react";import{motion as Ba}from"framer-motion";import Yo from"styled-components";var Na={backgroundColor:"#E6E6E6"},La=Yo.div`
|
|
571
575
|
display: flex;
|
|
572
576
|
flex-direction: ${e=>e.textLocation=="top"?"column":"row"};
|
|
573
577
|
justify-content: flex-start;
|
|
574
578
|
align-items: ${e=>e.textLocation=="top"?"flex-end":"center"};
|
|
575
579
|
|
|
576
|
-
${e=>
|
|
577
|
-
`,
|
|
580
|
+
${e=>pt(e)}
|
|
581
|
+
`,Oa=Yo.div`
|
|
578
582
|
flex-grow: 1;
|
|
579
583
|
position: relative;
|
|
580
584
|
${e=>e.textLocation=="top"?"width: 100%;":""}
|
|
581
|
-
`,
|
|
585
|
+
`,Da=Yo.span`
|
|
582
586
|
font-weight: 500;
|
|
583
587
|
font-size: 15px;
|
|
584
588
|
line-height: 18px;
|
|
585
589
|
padding-right: ${e=>e.padding};
|
|
586
590
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary}};
|
|
587
591
|
margin-bottom: ${e=>e.textLocation=="top"?"8px":"0px"};
|
|
588
|
-
${e=>
|
|
589
|
-
|
|
592
|
+
${e=>pt(e)}
|
|
593
|
+
`,$a={position:"relative",left:0,top:0,width:"100%",minWidth:"40px",height:"10px",borderRadius:"20px"},Ma={position:"absolute",left:0,top:0,height:"10px",borderRadius:"20px"},Ue=({count:e,total:t,fillColor:o,bgColor:n=Na.backgroundColor,display:r="count",textLocation:i="left",style:s={},textStyle:p={},appearance:d})=>{var T,S;if(t===0)return gt.createElement(gt.Fragment,null);let a=e===0?"10px":`${e/t*100}%`,u=r==="compact"?"5px":"10px",c=Math.round(e/t*100),f=r==="compact"?"5px":"20px",w;return r==="count"?w=`${e} of ${t}`:r==="compact"?w=`${c}%`:r==="percent"&&(w=`${c}% complete`),i==="top"&&(f="0px"),gt.createElement(La,{className:l("progressBarContainer",d),textLocation:i,styleOverrides:s},gt.createElement(Da,{className:l("progressBarStepText",d),style:{...p,fontSize:r==="compact"?12:15,fontWeight:r==="compact"?400:500},appearance:d,padding:f,textLocation:i},w),gt.createElement(Oa,{textLocation:i,className:l("progressBar",d)},gt.createElement(Ba.div,{style:{...Ma,width:a,height:u,backgroundColor:((T=d==null?void 0:d.theme)==null?void 0:T.colorPrimary)??o,zIndex:r=="compact"?1:5},className:l("progressBarFill",d)}),gt.createElement("div",{className:l("progressBarBackground",d),style:{...$a,height:u,backgroundColor:((S=d==null?void 0:d.theme)==null?void 0:S.colorSecondary)??n}})))};import Jt from"react";import Ua from"styled-components";import Po from"react";import ko from"react";var At=({stepData:e,appearance:t})=>ko.createElement(ko.Fragment,null,ko.createElement(ci,{appearance:t,className:l("checklistStepTitle",t),dangerouslySetInnerHTML:pe(e.title)}),ko.createElement(mi,{appearance:t,className:l("checklistStepSubtitle",t),dangerouslySetInnerHTML:pe(e.subtitle)}));import Xt from"react";var Bt=({stepData:e,appearance:t})=>{let o=()=>{e.handlePrimaryButtonClick&&e.handlePrimaryButtonClick()},n=()=>{e.handleSecondaryButtonClick&&e.handleSecondaryButtonClick()};return Xt.createElement(Xt.Fragment,null,Xt.createElement(go,null,e.secondaryButtonTitle&&Xt.createElement(R,{appearance:t,secondary:!0,title:e.secondaryButtonTitle,onClick:n,style:{width:"auto",marginRight:"12px"}}),Xt.createElement(R,{appearance:t,title:e.primaryButtonTitle,onClick:o})))};var Nt=({stepData:e,appearance:t})=>Po.createElement(Po.Fragment,null,Po.createElement(At,{stepData:e,appearance:t}),Po.createElement(Bt,{stepData:e,appearance:t}));import gi from"react";function hi(e){if(e.videoUri.includes("youtube")){let t=e.videoUri.split("v=")[1],o=t.indexOf("&");return o!==-1&&(t=t.substring(0,o)),gi.createElement("iframe",{width:"480",height:"260",src:`https://www.youtube.com/embed/${t}`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,className:l("checklistStepVideo",e.appearance)})}else return gi.createElement("video",{width:"480",height:"260",controls:!0,src:e.videoUri})}var Xo="default",_a=Ua.img`
|
|
590
594
|
border-radius: 4px;
|
|
591
595
|
max-height: 260px;
|
|
592
596
|
min-height: 200px;
|
|
593
|
-
`,
|
|
597
|
+
`,xi=({stepData:e,appearance:t})=>{if(e!=null&&e.StepContent){let o=e.StepContent;return Jt.createElement("div",null,o)}return Jt.createElement(di,{className:l("checklistStepContent",t)},e.imageUri?Jt.createElement(_a,{className:l("checklistStepImage",t),src:e.imageUri,style:e.imageStyle}):null,e.videoUri?Jt.createElement(hi,{videoUri:e.videoUri,appearance:t}):null,Jt.createElement(Nt,{stepData:e,appearance:t}))};import Ee,{useRef as Wa,useState as za}from"react";import Lt from"styled-components";var Ci=Lt.div`
|
|
594
598
|
display: block;
|
|
595
|
-
`,
|
|
599
|
+
`,Ha=Lt.div`
|
|
596
600
|
display: flex;
|
|
597
601
|
flex-direction: row;
|
|
598
602
|
flex-wrap: wrap;
|
|
@@ -602,20 +606,20 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
602
606
|
align-content: center;
|
|
603
607
|
margin-top: 24px;
|
|
604
608
|
margin-bottom: 24px;
|
|
605
|
-
`,
|
|
609
|
+
`,Ga=Lt.div`
|
|
606
610
|
display: flex;
|
|
607
611
|
align-items: center;
|
|
608
612
|
justify-content: flex-start;
|
|
609
613
|
flex-direction: column;
|
|
610
614
|
margin-right: 16px;
|
|
611
|
-
`,
|
|
615
|
+
`,ja=Lt.video`
|
|
612
616
|
width: 200px;
|
|
613
617
|
height: 120px;
|
|
614
|
-
`,
|
|
618
|
+
`,Va=Lt.div`
|
|
615
619
|
font-size: 14px;
|
|
616
620
|
line-height: 20px;
|
|
617
621
|
text-align: center;
|
|
618
|
-
`,
|
|
622
|
+
`,Ka=Lt.div`
|
|
619
623
|
position: absolute;
|
|
620
624
|
width: 200px;
|
|
621
625
|
height: 120px;
|
|
@@ -635,9 +639,9 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
635
639
|
box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.06);
|
|
636
640
|
border-radius: 50%;
|
|
637
641
|
}
|
|
638
|
-
`,
|
|
642
|
+
`,Si="videoCarousel",yi=({stepData:e,appearance:t})=>{var r;if(!((r=e.props)!=null&&r.videos))return Ee.createElement(Ci,null,Ee.createElement(Nt,{stepData:e,appearance:t}));function o({video:i}){let s=Wa(),[p,d]=za(!1);return Ee.createElement(Ga,null,!p&&Ee.createElement(Ka,{onClick:()=>{d(!0),s.current.play()},appearance:t},Ee.createElement(ho,null)),Ee.createElement(ja,{controls:p,ref:s,play:p,src:i.uri}),Ee.createElement(Va,null,i.title))}let n=e.props;return n.videos?Ee.createElement(Ci,null,Ee.createElement(At,{stepData:e,appearance:t}),Ee.createElement(Ha,null,n.videos.map((i,s)=>Ee.createElement("span",{key:`${i.uri}-${s}`},Ee.createElement(o,{video:i})))),Ee.createElement(Bt,{stepData:e,appearance:t})):null};import Ke from"react";import vo from"styled-components";var bi=vo.div`
|
|
639
643
|
display: block;
|
|
640
|
-
`,
|
|
644
|
+
`,qa=vo.pre`
|
|
641
645
|
display: block;
|
|
642
646
|
background-color: #2a2a2a;
|
|
643
647
|
color: #f8f8f8;
|
|
@@ -653,69 +657,69 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
653
657
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
654
658
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
655
659
|
margin-bottom: 24px;
|
|
656
|
-
`,
|
|
660
|
+
`,Ya=vo.div`
|
|
657
661
|
font-size: 15px;
|
|
658
662
|
line-height: 20px;
|
|
659
663
|
margin-bottom: 12px;
|
|
660
664
|
margin-top: 12px;
|
|
661
|
-
`,
|
|
665
|
+
`,Xa=vo.div`
|
|
662
666
|
margin-top: 24px;
|
|
663
|
-
`,
|
|
667
|
+
`,wi="codeSnippet",Ti=({stepData:e,appearance:t})=>{var n;if(!((n=e.props)!=null&&n.codeSnippets))return Ke.createElement(bi,null,Ke.createElement(Nt,{stepData:e,appearance:t}));let o=e.props;return o.codeSnippets?Ke.createElement(bi,null,Ke.createElement(At,{stepData:e,appearance:t}),Ke.createElement(Xa,null,o.codeSnippets.map((r,i)=>Ke.createElement("div",{key:i},r.title?Ke.createElement(Ya,null,r.title):null,r.code?Ke.createElement(qa,null,r.code):null))),Ke.createElement(Bt,{stepData:e,appearance:t})):null};var Qa=ht.div`
|
|
664
668
|
display: flex;
|
|
665
669
|
flex-direction: row;
|
|
666
670
|
min-width: ${e=>e.type!="modal"?"1000px":"100%"};
|
|
667
671
|
background: ${e=>{var t;return(t=e.appearance)==null?void 0:t.theme.colorBackground}};
|
|
668
672
|
box-shadow: ${e=>e.type!="modal"?"0px 6px 25px rgba(0, 0, 0, 0.06)":"none"};
|
|
669
673
|
border-radius: 8px;
|
|
670
|
-
`,
|
|
674
|
+
`,Za=ht.h1`
|
|
671
675
|
font-size: 24px;
|
|
672
676
|
font-weight: 600;
|
|
673
677
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
674
|
-
`,
|
|
678
|
+
`,Ra=ht.h2`
|
|
675
679
|
font-size: 15px;
|
|
676
680
|
line-height: 20px;
|
|
677
681
|
color: ${e=>{var t,o;return((o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary)??"#4d4d4d"}};
|
|
678
682
|
margin: 10px 0px 0px 0px;
|
|
679
|
-
`,
|
|
683
|
+
`,Fi=ht.div`
|
|
680
684
|
padding-bottom: 16px;
|
|
681
|
-
`,
|
|
685
|
+
`,ep=ht.div`
|
|
682
686
|
list-style: none;
|
|
683
687
|
padding: 0;
|
|
684
688
|
margin: 0;
|
|
685
689
|
cursor: pointer;
|
|
686
690
|
width: 300px;
|
|
687
|
-
`,
|
|
691
|
+
`,tp=ht.div`
|
|
688
692
|
width: 1px;
|
|
689
693
|
margin: 40px;
|
|
690
694
|
background: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
691
|
-
`,
|
|
695
|
+
`,op=ht.div`
|
|
692
696
|
flex: 2;
|
|
693
697
|
padding: 2rem;
|
|
694
|
-
`,
|
|
698
|
+
`,rp=({title:e,subtitle:t,steps:o=[],style:n={},selectedStep:r,setSelectedStep:i,className:s="",customStepTypes:p=new Map,appearance:d,type:a})=>{let{mergeAppearanceWithDefault:u}=Q();d=u(d);let f={...{[Xo]:xi,[Si]:yi,[wi]:Ti},...p},[w,T]=Ja(0),S=r??w,h=i??T,E=o.filter(I=>I.complete===!0).length,y=()=>{var I;return!((I=o[S])!=null&&I.type)||!f[o[S].type]?f[Xo]({stepData:o[S],appearance:d}):f[o[S].type]({stepData:o[S],appearance:d})};return Oe.createElement(Qa,{type:a,style:n,className:s,appearance:d},Oe.createElement(Fi,{style:{flex:1}},Oe.createElement(Fi,{style:{padding:"30px 0px 30px 30px",borderBottom:"none"}},Oe.createElement(Za,{className:l("checklistTitle",d),appearance:d},e),Oe.createElement(Ra,{className:l("checklistSubtitle",d),appearance:d},t),Oe.createElement(Ue,{total:o.length,count:E,fillColor:d.theme.colorPrimary,style:{marginTop:"24px"},appearance:d})),Oe.createElement(ep,{className:l("checklistStepsContainer",d)},o.map((I,F)=>Oe.createElement(fi,{data:I,index:F,key:F,listLength:o.length,isSelected:F===S,primaryColor:d.theme.colorPrimary,style:{justifyContent:"space-between"},onClick:()=>{h(F)}})))),Oe.createElement(tp,{appearance:d,className:l("checklistDivider",d)}),Oe.createElement(op,null,Oe.createElement(y,null)))},Jo=rp;import O,{useState as pp}from"react";import ki from"react";import ip from"styled-components";var np=ip.svg`
|
|
695
699
|
transition: 'transform 0.35s ease-in-out';
|
|
696
|
-
`,Ot=({color:e="#323232",style:t,className:o})=>
|
|
700
|
+
`,Ot=({color:e="#323232",style:t,className:o})=>ki.createElement(np,{width:"7",height:"10",viewBox:"0 0 9 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:t,className:o},ki.createElement("path",{d:"M1 13L7.5 7L0.999999 1",stroke:e,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}));import{motion as dp}from"framer-motion";import de from"styled-components";var Qo={boxShadow:"0px 6px 25px rgba(0, 0, 0, 0.06)",padding:"32px",maxHeight:"700px",msOverflowStyle:"none",scrollbarWidth:"none",paddingBottom:"12px",minHeight:"610px"},Pi=de.div`
|
|
697
701
|
max-height: 350px;
|
|
698
702
|
padding-bottom: 40px;
|
|
699
|
-
`,
|
|
703
|
+
`,vi=de.div`
|
|
700
704
|
display: flex;
|
|
701
705
|
flex-direction: column;
|
|
702
706
|
margin-top: 20px;
|
|
703
|
-
`,
|
|
707
|
+
`,Ei=de.h1`
|
|
704
708
|
font-style: normal;
|
|
705
709
|
font-weight: 600;
|
|
706
710
|
font-size: 30px;
|
|
707
711
|
line-height: 36px;
|
|
708
712
|
margin-bottom: 16px;
|
|
709
713
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
710
|
-
`,
|
|
714
|
+
`,Ii=de.h2`
|
|
711
715
|
font-weight: 400;
|
|
712
716
|
font-size: 16px;
|
|
713
717
|
line-height: 20px;
|
|
714
718
|
margin-bottom: 16px;
|
|
715
719
|
padding-left: 1px;
|
|
716
720
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary}};
|
|
717
|
-
`,
|
|
718
|
-
${e=>
|
|
721
|
+
`,Ai=de.div`
|
|
722
|
+
${e=>k(e)} {
|
|
719
723
|
border: 1px solid #fafafa;
|
|
720
724
|
}
|
|
721
725
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
|
|
@@ -724,12 +728,12 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
724
728
|
flex-direction: column;
|
|
725
729
|
min-height: 240px;
|
|
726
730
|
overflow: hidden;
|
|
727
|
-
`,
|
|
731
|
+
`,Bi=de.div`
|
|
728
732
|
display: flex;
|
|
729
733
|
flex-direction: row;
|
|
730
734
|
justify-content: space-between;
|
|
731
|
-
`,
|
|
732
|
-
${e=>
|
|
735
|
+
`,Ni=de.p`
|
|
736
|
+
${e=>k(e)} {
|
|
733
737
|
font-weight: 400;
|
|
734
738
|
font-size: 10px;
|
|
735
739
|
line-height: 12px;
|
|
@@ -737,13 +741,13 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
737
741
|
color: #8c8c8c;
|
|
738
742
|
margin: 20px;
|
|
739
743
|
}
|
|
740
|
-
`,
|
|
744
|
+
`,Li=de.div`
|
|
741
745
|
display: flex;
|
|
742
746
|
flex-direction: row;
|
|
743
|
-
`,
|
|
747
|
+
`,Oi=de.div`
|
|
744
748
|
flex: 1;
|
|
745
|
-
`,
|
|
746
|
-
${e=>
|
|
749
|
+
`,Di=de.div`
|
|
750
|
+
${e=>k(e)} {
|
|
747
751
|
display: flex;
|
|
748
752
|
justify-content: center;
|
|
749
753
|
align-content: center;
|
|
@@ -752,8 +756,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
752
756
|
padding-left: 8px;
|
|
753
757
|
padding-right: 8px;
|
|
754
758
|
}
|
|
755
|
-
|
|
756
|
-
${e=>
|
|
759
|
+
`,$i=de.p`
|
|
760
|
+
${e=>k(e)} {
|
|
757
761
|
font-style: normal;
|
|
758
762
|
font-weight: 600;
|
|
759
763
|
font-size: 22px;
|
|
@@ -764,8 +768,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
764
768
|
margin-top: 20px;
|
|
765
769
|
margin-bottom: 16px;
|
|
766
770
|
}
|
|
767
|
-
`,
|
|
768
|
-
${e=>
|
|
771
|
+
`,Mi=de.p`
|
|
772
|
+
${e=>k(e)} {
|
|
769
773
|
font-weight: 400;
|
|
770
774
|
font-size: 14px;
|
|
771
775
|
line-height: 18px;
|
|
@@ -773,15 +777,15 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
773
777
|
color: ${e=>e.appearance.theme.colorTextSecondary};
|
|
774
778
|
margin-bottom: 8px;
|
|
775
779
|
}
|
|
776
|
-
`,
|
|
777
|
-
${e=>
|
|
780
|
+
`,Ui=de.div`
|
|
781
|
+
${e=>k(e)} {
|
|
778
782
|
display: flex;
|
|
779
783
|
flex-direction: row;
|
|
780
784
|
justify-content: center;
|
|
781
785
|
gap: 8px;
|
|
782
786
|
}
|
|
783
|
-
|
|
784
|
-
${e=>
|
|
787
|
+
`,_i=de.div`
|
|
788
|
+
${e=>k(e)} {
|
|
785
789
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
786
790
|
background-color: ${e=>e.selected?"#FAFAFA":"#FFFFFF"};
|
|
787
791
|
:hover {
|
|
@@ -800,8 +804,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
800
804
|
justify-content: space-between;
|
|
801
805
|
position: relative;
|
|
802
806
|
cursor: pointer;
|
|
803
|
-
`,
|
|
804
|
-
${e=>
|
|
807
|
+
`,Wi=de.p`
|
|
808
|
+
${e=>k(e)} {
|
|
805
809
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
806
810
|
color: ${e=>e.selected?"#434343":"#BFBFBF"};
|
|
807
811
|
}
|
|
@@ -809,12 +813,12 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
809
813
|
font-size: 14px;
|
|
810
814
|
line-height: 22px;
|
|
811
815
|
margin: 0;
|
|
812
|
-
`,
|
|
816
|
+
`,zi=de.div`
|
|
813
817
|
display: flex;
|
|
814
818
|
flex-direction: row;
|
|
815
819
|
justify-content: flex-end;
|
|
816
820
|
align-content: center;
|
|
817
|
-
`,
|
|
821
|
+
`,Hi=de.div`
|
|
818
822
|
display: flex;
|
|
819
823
|
flex: 1;
|
|
820
824
|
flex-direction: row;
|
|
@@ -822,14 +826,14 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
822
826
|
align-content: center;
|
|
823
827
|
align-items: center;
|
|
824
828
|
margin-right: 20px;
|
|
825
|
-
`,
|
|
829
|
+
`,Gi=de.div`
|
|
826
830
|
display: block;
|
|
827
831
|
width: 100%;
|
|
828
|
-
`;import
|
|
832
|
+
`;import sp from"styled-components";var ji=sp.div`
|
|
829
833
|
flex-direction: column;
|
|
830
834
|
justify-content: center;
|
|
831
835
|
display: flex;
|
|
832
|
-
`;import
|
|
836
|
+
`;import Ye from"react";import{motion as lp}from"framer-motion";import qe from"styled-components";var Vi=qe.div`
|
|
833
837
|
border: 1px solid #fafafa;
|
|
834
838
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
|
|
835
839
|
border-radius: 14px;
|
|
@@ -837,14 +841,14 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
837
841
|
display: flex;
|
|
838
842
|
flex-direction: column;
|
|
839
843
|
overflow: hidden;
|
|
840
|
-
`,
|
|
844
|
+
`,Ki=qe.div`
|
|
841
845
|
display: flex;
|
|
842
846
|
flex-wrap: wrap;
|
|
843
847
|
justify-content: space-between;
|
|
844
848
|
overflow: hidden;
|
|
845
849
|
row-gap: 10px;
|
|
846
|
-
`,
|
|
847
|
-
${e=>
|
|
850
|
+
`,qi=qe.div`
|
|
851
|
+
${e=>k(e)} {
|
|
848
852
|
color: #595959;
|
|
849
853
|
}
|
|
850
854
|
text-transform: uppercase;
|
|
@@ -853,8 +857,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
853
857
|
line-height: 12px;
|
|
854
858
|
letter-spacing: 0.09em;
|
|
855
859
|
margin-bottom: 12px;
|
|
856
|
-
`,
|
|
857
|
-
${e=>
|
|
860
|
+
`,Yi=qe.div`
|
|
861
|
+
${e=>k(e)} {
|
|
858
862
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
859
863
|
background: #ffffff;
|
|
860
864
|
border: 1px solid #fafafa;
|
|
@@ -866,8 +870,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
866
870
|
|
|
867
871
|
max-width: 150px;
|
|
868
872
|
min-width: 200px;
|
|
869
|
-
`,
|
|
870
|
-
${e=>
|
|
873
|
+
`,Xi=qe.div`
|
|
874
|
+
${e=>k(e)} {
|
|
871
875
|
background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #f7f7f7 100%);
|
|
872
876
|
}
|
|
873
877
|
width: 40px;
|
|
@@ -878,14 +882,14 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
878
882
|
justify-content: center;
|
|
879
883
|
align-content: center;
|
|
880
884
|
align-items: center;
|
|
881
|
-
`,
|
|
885
|
+
`,Ji=qe.div`
|
|
882
886
|
font-weight: 600;
|
|
883
887
|
font-size: 20px;
|
|
884
888
|
line-height: 24px;
|
|
885
889
|
width: 20px;
|
|
886
890
|
height: 20px;
|
|
887
|
-
`,
|
|
888
|
-
${e=>
|
|
891
|
+
`,Qi=qe.div`
|
|
892
|
+
${e=>k(e)} {
|
|
889
893
|
color: #434343;
|
|
890
894
|
}
|
|
891
895
|
font-weight: 600;
|
|
@@ -893,20 +897,20 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
893
897
|
line-height: 17px;
|
|
894
898
|
margin-top: 12px;
|
|
895
899
|
margin-bottom: 8px;
|
|
896
|
-
`,
|
|
897
|
-
${e=>
|
|
900
|
+
`,Zi=qe.div`
|
|
901
|
+
${e=>k(e)} {
|
|
898
902
|
color: #8c8c8c;
|
|
899
903
|
}
|
|
900
904
|
font-weight: 400;
|
|
901
905
|
font-size: 12px;
|
|
902
906
|
line-height: 14px;
|
|
903
|
-
`,
|
|
907
|
+
`,Ri=qe.a`
|
|
904
908
|
color: ${e=>e.color};
|
|
905
909
|
font-size: 12px;
|
|
906
910
|
line-height: 14px;
|
|
907
911
|
font-weight: 400;
|
|
908
912
|
cursor: pointer;
|
|
909
|
-
`;var
|
|
913
|
+
`;var ap=({steps:e,style:t,title:o,primaryColor:n,appearance:r,onButtonClick:i})=>{let{primaryCTAClickSideEffects:s}=ie();return Ye.createElement(Vi,{style:t,className:l("guideContainer",r)},Ye.createElement(qi,{className:l("guideTitle",r)},o),Ye.createElement(Ki,{className:l("guideItemContainer",r)},e.map((p,d)=>Ye.createElement(Yi,{key:`guide-${p.id??d}`,as:lp.div,whileHover:{boxShadow:"0px 2px 8px rgba(0, 0, 0, 0.05)",transition:{duration:.25}},className:l("guideItem",r)},p.icon&&Ye.createElement(Xi,{className:l("guideIcon",r)},Ye.createElement(Ji,null,p.icon)),Ye.createElement(Qi,{className:l("guideItemTitle",r),dangerouslySetInnerHTML:pe(p.title)}),Ye.createElement(Zi,{className:l("guideItemSubtitle",r),dangerouslySetInnerHTML:pe(p.subtitle)}),Ye.createElement(Ri,{className:l("guideItemLink",r),color:n,onClick:()=>{p.primaryButtonUri&&s(p),i&&i(p)}},p.primaryButtonTitle)))))},Qt=ap;var cp=({steps:e,title:t,subtitle:o,stepsTitle:n,visible:r,onClose:i,selectedStep:s,setSelectedStep:p,customStepTypes:d,appearance:a,guideData:u,guideTitle:c,onGuideButtonClick:f})=>{let w=({stepData:m,handleSecondaryCTAClick:C,handleCTAClick:v})=>m?O.createElement(Di,{className:l("checklistStepContainer",a),"data-testid":"checklistStepContainer"},O.createElement($i,{appearance:a,className:l("checklistStepTitle",a),dangerouslySetInnerHTML:pe(m.title)}),O.createElement(Mi,{appearance:a,className:l("checklistStepSubtitle",a),dangerouslySetInnerHTML:pe(m.subtitle)}),O.createElement(Ui,{className:l("checklistCTAContainer",a)},m.secondaryButtonTitle&&O.createElement(R,{title:m.secondaryButtonTitle,onClick:C,appearance:a,secondary:!0}),O.createElement(R,{title:m.primaryButtonTitle,onClick:v,appearance:a}))):O.createElement(O.Fragment,null),S={...{default:m=>{var $;if(($=e[y])!=null&&$.StepContent){let _=e[y].StepContent;return O.createElement("div",null,_)}let C=e[y];return O.createElement(w,{stepData:m,handleCTAClick:()=>{C.handlePrimaryButtonClick&&C.handlePrimaryButtonClick()},handleSecondaryCTAClick:()=>{C.handleSecondaryButtonClick&&C.handleSecondaryButtonClick()}})}},...d},[h,E]=pp(0),y=s??h,I=p??E,F=()=>{var m;return e?!((m=e[y])!=null&&m.type)||!S[e[y].type]?S.default(e[y]):S[e[y].type]({stepData:e[y],primaryColor:a.theme.colorPrimary}):O.createElement(O.Fragment,null)},x=e.filter(m=>m.complete).length;return r?(a.theme.modalContainer||(a.theme.borderRadius&&(Qo.borderRadius=a.theme.borderRadius+"px"),a.theme.modalContainer=Qo),O.createElement(Qe,{onClose:i,visible:r,appearance:a},O.createElement(Gi,null,O.createElement(vi,null,O.createElement(Ei,{appearance:a,className:l("checklistTitle",a)},t),O.createElement(Ii,{appearance:a,className:l("checklistSubtitle",a)},o)),O.createElement(Pi,null,e&&e.length>0&&O.createElement(Ai,{className:l("stepsContainer",a)},O.createElement(Bi,null,O.createElement("div",{style:{flex:3}},O.createElement(Ni,{className:l("stepsTitle",a)},n)),O.createElement(Hi,null,O.createElement(Ue,{fillColor:a.theme.colorPrimary,style:{width:"100%"},count:x,total:e.length,appearance:a}))),O.createElement(Li,null,O.createElement(Oi,{className:l("checklistStepListContainer",a),appearance:a},e.map((m,C)=>{let v=y===C;return O.createElement(_i,{selected:v,className:l(`checklistStepListItem${v?"Selected":""}`,a),key:`checklist-guide-step-${m.id??C}`,disabled:m.blocked,onClick:()=>{m.blocked||I(C)},title:m.blocked?"Finish remaining steps to continue":void 0},v&&O.createElement(To,{className:l("checklistStepItemSelectedIndicator",a),as:dp.div,layoutId:"checklist-step-selected",style:{backgroundColor:a.theme.colorPrimary,borderRadius:0,height:"100%",top:"0%",width:"2px"}}),O.createElement(Wi,{selected:v,className:l(`checklistStepListStepName${v?"Selected":""}`,a)},m.stepName),O.createElement(zi,null,O.createElement(ct,{value:m.complete,type:"round",primaryColor:a.theme.colorPrimary,progress:m.progress,appearance:a}),O.createElement(ji,null,O.createElement(Ot,{style:{marginLeft:"10px"},color:a.theme.colorBackgroundSecondary}))))})),O.createElement(F,null))),u&&u.length>0&&O.createElement(Qt,{steps:u,title:c,primaryColor:a.theme.colorPrimary,style:{border:"none",boxShadow:"none"},appearance:a,onButtonClick:m=>(f&&f(m),!0)}))))):O.createElement(O.Fragment,null)},Zo=cp;import{useEffect as mp,useState as up}from"react";var en=()=>{let e={isSmall:"(max-width: 480px)",isMedium:"(min-width: 481px) AND (max-width: 1023px)",isLarge:"(min-width: 1025px)"},t=Object.fromEntries(Object.entries(e).map(([p])=>[p,!1])),[o,n]=up(t),r=null,i=()=>{r!==null?clearTimeout(r):s(),r=setTimeout(()=>{s()},16)},s=()=>{let p=Object.fromEntries(Object.entries(e).map(([d,a])=>{if(!window)return[d,!1];let u=window.matchMedia(a);return u.addEventListener("change",i),[d,u.matches]}));n(p)};return mp(()=>{s()},[]),o};import Fe,{useEffect as hn,useState as hp}from"react";import ce from"react";import{AnimatePresence as fp,motion as gp}from"framer-motion";import Xe from"styled-components";var tn=Xe.div`
|
|
910
914
|
background-color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBackground}};
|
|
911
915
|
border: 1px solid;
|
|
912
916
|
border-color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBorder}};
|
|
@@ -918,42 +922,42 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
918
922
|
display: flex;
|
|
919
923
|
flex-direction: column;
|
|
920
924
|
transition: max-height 0.25s;
|
|
921
|
-
`,
|
|
925
|
+
`,on=Xe.div`
|
|
922
926
|
display: flex;
|
|
923
927
|
margin-bottom: 20px;
|
|
924
|
-
`,
|
|
928
|
+
`,rn=Xe.img`
|
|
925
929
|
border-radius: 4px;
|
|
926
930
|
max-height: 260px;
|
|
927
931
|
min-height: 200px;
|
|
928
|
-
`,
|
|
932
|
+
`,nn=Xe.div`
|
|
929
933
|
display: flex;
|
|
930
934
|
flex-direction: row;
|
|
931
935
|
justify-content: space-between;
|
|
932
936
|
align-items: center;
|
|
933
|
-
`,
|
|
937
|
+
`,sn=Xe.p`
|
|
934
938
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
935
939
|
font-style: normal;
|
|
936
940
|
font-weight: 500;
|
|
937
941
|
font-size: 16px;
|
|
938
942
|
line-height: 18px;
|
|
939
943
|
margin-left: 8px;
|
|
940
|
-
`,
|
|
944
|
+
`,ln=Xe.div`
|
|
941
945
|
padding: 20px;
|
|
942
946
|
cursor: pointer;
|
|
943
947
|
:hover {
|
|
944
948
|
opacity: 0.8;
|
|
945
949
|
}
|
|
946
|
-
`,
|
|
950
|
+
`,Mh=Xe.div``,an=Xe.p`
|
|
947
951
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
948
952
|
font-weight: 400;
|
|
949
953
|
font-size: 14px;
|
|
950
954
|
line-height: 22px;
|
|
951
|
-
`,
|
|
955
|
+
`,pn=Xe.div`
|
|
952
956
|
display: flex;
|
|
953
957
|
flex-direction: row;
|
|
954
958
|
justify-content: flex-start;
|
|
955
959
|
align-items: center;
|
|
956
|
-
`;var
|
|
960
|
+
`;var dn=({stepData:e,collapsed:t,onClick:o,onPrimaryButtonClick:n,onSecondaryButtonClick:r,appearance:i,customStepTypes:s})=>{var u,c;let p=t?{}:{transform:"rotate(90deg)"};function d(){return ce.createElement(ce.Fragment,null,e.imageUri||e.videoUri?ce.createElement(on,{className:l("stepMediaContainer",i)},e.imageUri?ce.createElement(rn,{className:l("stepImage",i),src:e.imageUri,style:e.imageStyle}):null,e.videoUri?ce.createElement(Pt,{appearance:i,videoUri:e.videoUri}):null):null,ce.createElement(an,{className:l("stepSubtitle",i),appearance:i,dangerouslySetInnerHTML:pe(e.subtitle)}),ce.createElement(go,{className:l("checklistCTAContainer",i)},e.secondaryButtonTitle?ce.createElement(R,{secondary:!0,title:e.secondaryButtonTitle,onClick:()=>r(),appearance:i}):null,ce.createElement(R,{title:e.primaryButtonTitle??"Continue",onClick:()=>n(),appearance:i})))}function a(){if(!s)return null;let f=s[e.type];return f?f(e,i):null}return ce.createElement(tn,{onClick:()=>t?o():null,"data-testid":`step-${e.id}`,className:l("checklistStepContainer",i),appearance:i},ce.createElement(nn,{className:l("stepHeader",i)},ce.createElement(pn,null,ce.createElement(wo,{value:e.complete,style:{width:"auto",borderTop:0},primaryColor:(u=i==null?void 0:i.theme)==null?void 0:u.colorPrimary,appearance:i}),ce.createElement(sn,{appearance:i,className:l("stepTitle",i),dangerouslySetInnerHTML:pe(e.title)})),ce.createElement(ln,{className:l("stepChevronContainer",i),onClick:()=>o()},ce.createElement(Ot,{style:{...p,transition:"transform 0.1s ease-in-out"},color:(c=i==null?void 0:i.theme)==null?void 0:c.colorTextSecondary}))),ce.createElement(fp,null,!t&&ce.createElement(gp.div,{initial:{opacity:1,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:1,height:0},key:e.id,style:{overflow:"hidden"}},a()??d())))};import Dt from"styled-components";var Qh=Dt.div`
|
|
957
961
|
background: #ffffff;
|
|
958
962
|
box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.06);
|
|
959
963
|
border-radius: 6px;
|
|
@@ -967,49 +971,49 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
967
971
|
|
|
968
972
|
max-width: 800px;
|
|
969
973
|
min-width: 350px;
|
|
970
|
-
`,
|
|
974
|
+
`,cn=Dt.div`
|
|
971
975
|
display: flex;
|
|
972
976
|
flex-direction: column;
|
|
973
|
-
`,
|
|
977
|
+
`,mn=Dt.h1`
|
|
974
978
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorText}};
|
|
975
979
|
font-style: normal;
|
|
976
980
|
font-weight: 700;
|
|
977
981
|
font-size: 20px;
|
|
978
982
|
line-height: 24px;
|
|
979
983
|
margin-bottom: 8px;
|
|
980
|
-
`,
|
|
984
|
+
`,un=Dt.h2`
|
|
981
985
|
color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorTextSecondary}};
|
|
982
986
|
font-weight: 400;
|
|
983
987
|
font-size: 14px;
|
|
984
988
|
line-height: 23px;
|
|
985
989
|
margin: 2px 0 0 0;
|
|
986
|
-
`,
|
|
990
|
+
`,fn=Dt.div`
|
|
987
991
|
display: block;
|
|
988
992
|
width: 100%;
|
|
989
|
-
`,
|
|
993
|
+
`,gn=Dt.div`
|
|
990
994
|
display: flex;
|
|
991
995
|
width: 100%;
|
|
992
996
|
flex-direction: column;
|
|
993
997
|
justify-content: space-between;
|
|
994
998
|
background-color: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.colorBackground}};
|
|
995
999
|
border-radius: ${e=>{var t,o;return(o=(t=e.appearance)==null?void 0:t.theme)==null?void 0:o.borderRadius}}px;
|
|
996
|
-
`;var
|
|
1000
|
+
`;var xp=({title:e,subtitle:t,steps:o,onClose:n,visible:r,onCompleteStep:i,autoExpandFirstIncompleteStep:s=!0,autoCollapse:p=!0,autoExpandNextStep:d=!0,primaryColor:a="#000000",selectedStep:u,setSelectedStep:c,appearance:f,type:w,className:T,customStepTypes:S})=>{let h=o.filter(m=>m.complete).length,[E,y]=hp(Array(o.length).fill(!0));hn(()=>{let m=[...E];if(s){for(let C=0;C<o.length;C++)if(!o[C].complete){m[C]=!1;break}y(m)}},[]),hn(()=>{I(u)},[u]);let I=m=>{let C=[...E];if(p)for(let v=0;v<E.length;++v)v!==m&&(C[v]=!0);C[m]=!C[m],y(C)};if(!r&&w=="modal")return Fe.createElement(Fe.Fragment,null);let F=Fe.createElement(Fe.Fragment,null,Fe.createElement(cn,null,Fe.createElement(mn,{appearance:f,className:l("checklistTitle",f),dangerouslySetInnerHTML:pe(e)}),Fe.createElement(un,{appearance:f,className:l("checklistSubtitle",f),dangerouslySetInnerHTML:pe(t)})),Fe.createElement(Ue,{display:"percent",count:h,total:o.length,fillColor:a,style:{margin:"14px 0px 8px 0px"},appearance:f})),x=Fe.createElement(fn,{className:xe(l("checklistContainer",f),T)},o.map((m,C)=>{let v=E[C];return Fe.createElement(dn,{appearance:f,stepData:m,collapsed:v,key:`modal-checklist-${m.id??C}`,onClick:()=>{if(u===C){I(C);return}c(C)},onPrimaryButtonClick:()=>{i&&i(C,m),m.handlePrimaryButtonClick&&m.handlePrimaryButtonClick(),d&&!m.completionCriteria&&C<E.length-1&&E[C+1]&&c(C+1)},onSecondaryButtonClick:()=>{m.handleSecondaryButtonClick&&m.handleSecondaryButtonClick()},customStepTypes:S})}));return w==="inline"?Fe.createElement(gn,{appearance:f,className:xe(l("checklistInlineContainer",f),T)},F,x):Fe.createElement(Fe.Fragment,null,Fe.createElement(Qe,{onClose:n,visible:r,appearance:f,style:{maxWidth:"600px"},headerContent:F},x))},Ro=xp;import se,{useEffect as er,useRef as Tp,useState as Ct}from"react";import xt from"react";import ne,{css as xn,keyframes as Cn}from"styled-components";var Sn=xn`
|
|
997
1001
|
border: 1px solid ${({theme:e})=>e.colorBorder};
|
|
998
|
-
`,
|
|
1002
|
+
`,Cp=xn`
|
|
999
1003
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
|
|
1000
|
-
`,
|
|
1004
|
+
`,Sp=Cn`
|
|
1001
1005
|
from {
|
|
1002
1006
|
opacity: 0;
|
|
1003
1007
|
} to {
|
|
1004
1008
|
opacity: 1;
|
|
1005
1009
|
}
|
|
1006
|
-
`,
|
|
1010
|
+
`,yp=Cn`
|
|
1007
1011
|
from {
|
|
1008
1012
|
opacity: 1;
|
|
1009
1013
|
} to {
|
|
1010
1014
|
opacity: 0;
|
|
1011
1015
|
}
|
|
1012
|
-
`,
|
|
1016
|
+
`,yn=ne.div`
|
|
1013
1017
|
margin: 0 -20px;
|
|
1014
1018
|
overflow-x: auto;
|
|
1015
1019
|
padding-left: 20px;
|
|
@@ -1026,14 +1030,14 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1026
1030
|
::-webkit-scrollbar {
|
|
1027
1031
|
display: none;
|
|
1028
1032
|
}
|
|
1029
|
-
`,
|
|
1033
|
+
`,bn=ne.div`
|
|
1030
1034
|
display: flex;
|
|
1031
1035
|
flex-flow: row nowrap;
|
|
1032
1036
|
gap: 0 16px;
|
|
1033
1037
|
scroll-snap-align: center;
|
|
1034
1038
|
scroll-snap-stop: always;
|
|
1035
|
-
`,
|
|
1036
|
-
animation: ${e=>e.reversed?
|
|
1039
|
+
`,wn=ne.div`
|
|
1040
|
+
animation: ${e=>e.reversed?yp:Sp} 0.25s ease-out;
|
|
1037
1041
|
background: linear-gradient(
|
|
1038
1042
|
to right,
|
|
1039
1043
|
${({theme:e})=>e.colorBackground}00,
|
|
@@ -1041,8 +1045,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1041
1045
|
);
|
|
1042
1046
|
position: absolute;
|
|
1043
1047
|
width: 64px;
|
|
1044
|
-
`,
|
|
1045
|
-
${
|
|
1048
|
+
`,Tn=ne.button`
|
|
1049
|
+
${Sn}
|
|
1046
1050
|
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
|
|
1047
1051
|
align-items: center;
|
|
1048
1052
|
border-radius: 50%;
|
|
@@ -1053,11 +1057,11 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1053
1057
|
justify-content: center;
|
|
1054
1058
|
position: absolute;
|
|
1055
1059
|
width: 48px;
|
|
1056
|
-
`,
|
|
1060
|
+
`,Fn=ne.div`
|
|
1057
1061
|
border-radius: ${({theme:e})=>e.borderRadius}px;
|
|
1058
1062
|
padding: 20px;
|
|
1059
|
-
`,
|
|
1060
|
-
${
|
|
1063
|
+
`,kn=ne(Fn)`
|
|
1064
|
+
${Sn}
|
|
1061
1065
|
background: ${({theme:e})=>e.colorBackground};
|
|
1062
1066
|
|
|
1063
1067
|
&:active {
|
|
@@ -1068,94 +1072,94 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1068
1072
|
${e=>e.blocked?"":`border: 1px solid ${e.theme.colorPrimary};`}
|
|
1069
1073
|
${e=>e.blocked?"cursor: default":"cursor: pointer"}
|
|
1070
1074
|
}
|
|
1071
|
-
`,
|
|
1075
|
+
`,Pn=ne.img`
|
|
1072
1076
|
border-radius: 50%;
|
|
1073
1077
|
height: 40px;
|
|
1074
1078
|
margin-bottom: 12px;
|
|
1075
1079
|
width: 40px;
|
|
1076
|
-
`,
|
|
1077
|
-
${e=>
|
|
1078
|
-
${
|
|
1080
|
+
`,vn=ne(Fn)`
|
|
1081
|
+
${e=>k(e)} {
|
|
1082
|
+
${Cp}
|
|
1079
1083
|
|
|
1080
1084
|
background: ${({theme:e})=>e.colorBackground};
|
|
1081
1085
|
}
|
|
1082
|
-
`,
|
|
1086
|
+
`,En=ne.div`
|
|
1083
1087
|
color: ${({theme:e})=>e.colorPrimary};
|
|
1084
1088
|
display: flex;
|
|
1085
1089
|
flex-flow: row nowrap;
|
|
1086
1090
|
align-items: center;
|
|
1087
1091
|
margin-left: 20px;
|
|
1088
|
-
`,
|
|
1092
|
+
`,In=ne.div`
|
|
1089
1093
|
white-space: nowrap;
|
|
1090
|
-
`,
|
|
1094
|
+
`,An=ne.div`
|
|
1091
1095
|
background: #d8fed8;
|
|
1092
1096
|
border-radius: 6px;
|
|
1093
1097
|
margin-bottom: 12px;
|
|
1094
1098
|
padding: 4px 10px;
|
|
1095
|
-
`,
|
|
1099
|
+
`,bp=ne.p`
|
|
1096
1100
|
font-weight: bold;
|
|
1097
1101
|
font-size: 18px;
|
|
1098
1102
|
line-height: 22px;
|
|
1099
1103
|
letter-spacing: calc(18px * -0.01);
|
|
1100
1104
|
margin: 0;
|
|
1101
|
-
`,
|
|
1105
|
+
`,Bn=ne(bp)`
|
|
1102
1106
|
margin-bottom: 4px;
|
|
1103
|
-
`,
|
|
1107
|
+
`,wp=ne.p`
|
|
1104
1108
|
font-weight: bold;
|
|
1105
1109
|
font-size: 16px;
|
|
1106
1110
|
line-height: 20px;
|
|
1107
1111
|
letter-spacing: calc(16px * -0.01);
|
|
1108
1112
|
margin: 0;
|
|
1109
|
-
`,
|
|
1113
|
+
`,Nn=ne(wp)`
|
|
1110
1114
|
margin-bottom: 4px;
|
|
1111
1115
|
${e=>e.blocked||e.complete?"opacity: 0.4;":`
|
|
1112
1116
|
`}
|
|
1113
|
-
`,
|
|
1117
|
+
`,_e=ne.p`
|
|
1114
1118
|
color: ${({theme:e})=>e.colorText};
|
|
1115
1119
|
font-weight: normal;
|
|
1116
1120
|
font-size: 14px;
|
|
1117
1121
|
line-height: 22px;
|
|
1118
1122
|
margin: 0;
|
|
1119
|
-
`,
|
|
1123
|
+
`,Ln=ne.p`
|
|
1120
1124
|
color: ${({theme:e})=>e.colorText};
|
|
1121
1125
|
font-weight: 600;
|
|
1122
1126
|
font-size: 12px;
|
|
1123
1127
|
line-height: 16px;
|
|
1124
1128
|
margin: 0;
|
|
1125
|
-
`;
|
|
1129
|
+
`;_e.Loud=ne(_e)`
|
|
1126
1130
|
font-weight: 600;
|
|
1127
|
-
`;
|
|
1131
|
+
`;_e.Quiet=ne(_e)`
|
|
1128
1132
|
color: ${({theme:e})=>e.colorTextSecondary};
|
|
1129
1133
|
${e=>e.blocked||e.complete?"opacity: 0.4;":`
|
|
1130
1134
|
`}
|
|
1131
|
-
`;var
|
|
1135
|
+
`;var On=({stepData:e,style:t={},appearance:o})=>{let{mergeAppearanceWithDefault:n}=Q(),{primaryCTAClickSideEffects:r}=ie(),{theme:i,styleOverrides:s}=n(o),{imageUri:p=null,subtitle:d=null,title:a=null,complete:u=!1,blocked:c=!1}=e,f=()=>{r(e)};return xt.createElement(kn,{className:l("carouselCard",o),onClick:c?null:f,style:t,blocked:c,complete:u},xt.createElement("div",{style:{alignItems:"flex-start",display:"flex",justifyContent:"space-between"}},p&&xt.createElement(Pn,{className:l("carouselCardImage",o),src:p,alt:a,style:{opacity:u||c?.4:1}}),u&&xt.createElement(An,{className:l("carouselCompletedPill",o)},xt.createElement(Ln,{style:{color:"#108E0B"}},"Complete"))),a&&xt.createElement(Nn,{blocked:c,complete:u,className:l("carouselCardTitle",o)},a),d&&xt.createElement(_e.Quiet,{blocked:c,complete:u,className:l("carouselCardSubtitle",o)},d))};import Zt from"react";var Dn=({numberOfStepsCompleted:e,numberOfSteps:t,appearance:o})=>{let n=t>0?e/t:0,r=200,i=Math.min(r,Math.max(10,Math.round(r*n)));return Zt.createElement(En,{className:l("carouselProgressBar",o)},Zt.createElement(In,{as:_e.Loud,style:{marginRight:8}},e," of ",t),Zt.createElement("svg",{height:10,width:r},Zt.createElement("rect",{x:0,y:0,rx:5,width:r,height:10,fill:"#E6E6E6"}),Zt.createElement("rect",{x:0,y:0,rx:5,width:i,height:10,fill:"currentColor"})))};var Fp=()=>se.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},se.createElement("path",{d:"M14 6L20 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"}),se.createElement("path",{d:"M14 18L20 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"}),se.createElement("path",{d:"M4 12H20",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"})),$n=({side:e="left",show:t=!1,onClick:o=()=>{}})=>{let[n,r]=Ct(!1),[i,s]=Ct(!1);er(()=>{t===!0&&n===!1?r(!0):t===!1&&n===!0&&s(!0)},[t]);let p=()=>{r(!1),s(!1)},d=e=="left"?{top:0,bottom:0,left:-20,transform:"rotate(180deg)"}:{top:0,bottom:0,right:-20};return n?se.createElement(wn,{style:d,reversed:i,onAnimationEnd:i?p:null},se.createElement(Tn,{onClick:()=>o(),style:{right:16,top:"calc(50% - 24px)"}},se.createElement(Fp,null))):null},Mn=({flowId:e,appearance:t,customVariables:o,className:n})=>{let r=Tp(null),[i,s]=Ct(!1),[p,d]=Ct(!1),[a,u]=Ct(null),[c,f]=Ct([]),[w,T]=Ct(0),{getFlowMetadata:S,getFlowSteps:h,getNumberOfStepsCompleted:E,updateCustomVariables:y,getFlowStatus:I,isLoading:F,targetingLogicShouldHideFlow:x,getFlow:m}=Y();er(()=>{y(o)},[o,F]),er(()=>{if(F)return;let A=S(e),H=E(e),B=h(e);u(A),A.data!==null&&(f(B.sort((M,re)=>Number(M.complete)-Number(re.complete))),d(B.length>3),T(H))},[F]);let C=[];for(let A=0;A<c.length;A+=3)C.push(c.slice(A,A+3));let v=A=>{let H=A.target,B=H.scrollWidth-H.clientWidth,M=Math.ceil(H.scrollLeft);M>0&&i===!1&&s(!0),M===0&&i===!0&&s(!1),M<B&&p===!1&&d(!0),M===B&&p===!0&&d(!1)},U=(A=!0)=>{let H=A?1:-1;r.current!==null&&r.current.scrollBy({left:r.current.clientWidth*H,behavior:"smooth"})},$=null,_=A=>{$!==null?clearTimeout($):v(A),$=setTimeout(()=>{v(A)},16)};return F?null:se.createElement(vn,{className:xe(l("carouselContainer",t),n)},se.createElement("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:20}},se.createElement("div",null,se.createElement(Bn,{className:l("carouselTitle",t)},a==null?void 0:a.title),se.createElement(_e.Quiet,{className:l("carouselSubtitle",t)},a==null?void 0:a.subtitle)),se.createElement(Dn,{numberOfStepsCompleted:w,numberOfSteps:c.length})),se.createElement("div",{style:{position:"relative"}},se.createElement($n,{show:i,onClick:()=>U(!1)}),se.createElement($n,{side:"right",show:p,onClick:U}),se.createElement(yn,{ref:r,onScroll:_},C.map((A,H)=>se.createElement(bn,{key:H,style:{flex:`0 0 calc(100% - ${c.length>3?36:0}px)`}},A.map((B,M)=>se.createElement(On,{key:M,stepData:B,style:{flex:c.length>3?"0 1 calc(33% - 16px * 2 / 3)":1},appearance:t})))))))};var tr=({flowId:e,title:t,subtitle:o,style:n,initialSelectedStep:r,className:i,type:s="inline",onDismiss:p,visible:d,customVariables:a,onStepCompletion:u,onButtonClick:c,appearance:f,hideOnFlowCompletion:w,setVisible:T,customStepTypes:S,checklistStyle:h="default",autoExpandFirstIncompleteStep:E,autoExpandNextStep:y,...I})=>{let{getFlow:F,getFlowSteps:x,markStepCompleted:m,getStepStatus:C,getNumberOfStepsCompleted:v,isLoading:U,targetingLogicShouldHideFlow:$,updateCustomVariables:_,getFlowMetadata:A,isStepBlocked:H,getFlowStatus:B,hasActiveFullPageFlow:M,setHasActiveFullPageFlow:re}=Y(),{primaryCTAClickSideEffects:X,secondaryCTAClickSideEffects:W}=ie(),{getOpenFlowState:be,setOpenFlowState:me}=Pe(),[j,J]=_n(r||0),[fe,L]=_n(!1),N=d===void 0?be(e):d,ee=s==="modal",{mergeAppearanceWithDefault:te}=Q(),{isLarge:we}=en();if(f=te(f),Un(()=>{_(a)},[a,U]),Un(()=>{d!==void 0&&(ee&&d===!0?re(!0):ee&&d===!1&&re(!1))},[d,T,M]),U)return null;let it=F(e);if(!it||$(it))return null;let ke=x(e);if(!ke||w===!0&&B(e)===q)return null;let ue=A(e);if(ue!=null&&ue.title&&(t=ue.title),ue!=null&&ue.subtitle&&(o=ue.subtitle),!fe&&r===void 0&&v(e)>0){let z=Math.min(v(e),ke.length-1);J(z),L(!0)}function He(){if(j+1>=ke.length){ee&&me(e,!1);return}H(e,ke[j+1].id)||J(j+1)}function Ge(z,st,oo){let ar=j+1<ke.length?ke[j+1]:null;c&&c(z,j,st,ar)===!0&&ee&&g(),u&&u(z,oo,ar),!u&&!c&&(z.primaryButtonUri||z.secondaryButtonUri)&&ee&&g()}function K(){return ke.map((z,st)=>({...z,handleSecondaryButtonClick:()=>{He(),W(z),z.skippable===!0&&m(e,z.id,{skipped:!0}),Ge(z,"secondary",st)},handlePrimaryButtonClick:()=>{(!z.completionCriteria&&(z.autoMarkCompleted||z.autoMarkCompleted===void 0)||z.completionCriteria&&z.autoMarkCompleted===!0)&&(m(e,z.id),He()),Ge(z,"primary",st),X(z),C(e,z.id)===Le&&He()}}))}function he(){return le.createElement(oe,{appearance:f})}let nt={steps:K(),title:t,subtitle:o,primaryColor:f.theme.colorPrimary,appearance:f,customStepTypes:S,type:s,className:i,autoExpandFirstIncompleteStep:E,autoExpandNextStep:y};function g(){me(e,!1),p&&p(),T&&T(!1)}function b(){return le.createElement(le.Fragment,null,le.createElement(he,null),le.createElement(Mn,{flowId:e,appearance:f,customVariables:a,className:i}))}function P(){return le.createElement(le.Fragment,null,le.createElement(he,null),le.createElement(Ro,{visible:N,onClose:()=>{g()},selectedStep:j,setSelectedStep:J,autoExpandNextStep:!0,appearance:f,...nt}))}function G(){if(!we)return P();let z=I.guideFlowId,st;return z&&F(z)&&(st=x(z)),le.createElement(le.Fragment,null,le.createElement(he,null),le.createElement(Zo,{visible:N,stepsTitle:ue.stepsTitle?ue.stepsTitle:"Your quick start guide",onClose:()=>{g()},selectedStep:j,setSelectedStep:J,guideData:st,guideTitle:I.guideTitle??"Guide",appearance:f,title:t,subtitle:o,onGuideButtonClick:oo=>{Ge(oo,"link",0)},customStepTypes:S,...nt}))}function ae(){if(!we)return P();let z=le.createElement(Jo,{flowId:e,style:n,selectedStep:j,setSelectedStep:J,appearance:f,type:s,...nt});return ee?le.createElement(Qe,{onClose:()=>{g()},visible:N,appearance:f,style:{paddingTop:"0px",padding:"12px",paddingLeft:0}},le.createElement(he,null),z):le.createElement(le.Fragment,null,le.createElement(he,null),z)}switch(h){case"condensed":return P();case"with-guide":return G();case"default":return ae();case"carousel":return b();default:return ae()}};var Pp=e=>kp.createElement(tr,{type:"inline",...e});import ot,{useEffect as Ep}from"react";import We from"react";import Eo from"styled-components";var Wn=Eo.div`
|
|
1132
1136
|
border: 1px solid ${e=>e.appearance.theme.colorBorder};
|
|
1133
1137
|
border-radius: 8px;
|
|
1134
1138
|
padding: 6px 10px 6px 10px;
|
|
1135
1139
|
min-width: 160px;
|
|
1136
1140
|
cursor: pointer;
|
|
1137
1141
|
background-color: ${e=>e.appearance.theme.colorBackground}};
|
|
1138
|
-
`,
|
|
1142
|
+
`,zn=Eo.div`
|
|
1139
1143
|
display: flex;
|
|
1140
1144
|
flex-direction: row;
|
|
1141
1145
|
justify-content: space-between;
|
|
1142
1146
|
align-items: center;
|
|
1143
1147
|
margin-bottom: 2px;
|
|
1144
1148
|
flex-grow: 2;
|
|
1145
|
-
`,
|
|
1149
|
+
`,Hn=Eo.div`
|
|
1146
1150
|
text-overflow: ellipsis;
|
|
1147
1151
|
font-weight: 600;
|
|
1148
1152
|
font-size: 12px;
|
|
1149
1153
|
line-height: 15px;
|
|
1150
1154
|
text-align: ${e=>e.type==="condensed"?"left":"right"};
|
|
1151
1155
|
color: ${e=>e.appearance.theme.colorPrimary};
|
|
1152
|
-
`,
|
|
1156
|
+
`,Gn=Eo.div`
|
|
1153
1157
|
width: 20px;
|
|
1154
1158
|
margin-right: 8px;
|
|
1155
1159
|
display: flex;
|
|
1156
1160
|
height: 100%;
|
|
1157
1161
|
align-items: center;
|
|
1158
|
-
`;import{motion as
|
|
1162
|
+
`;import{motion as vp}from"framer-motion";var jn=({title:e,count:t,total:o,onClick:n,style:r={},className:i,appearance:s,type:p="default"})=>We.createElement(We.Fragment,null,We.createElement(oe,{appearance:s}),We.createElement(Wn,{as:vp.div,whileHover:{opacity:.9},whileTap:{scale:.98},onClick:()=>n!==void 0&&n(),style:{...p=="condensed"?{display:"flex",justifyContent:"space-between"}:{},...r},className:xe(i??"",l("progressRingContainer",s)),appearance:s},p=="condensed"&&o&&o!==0&&We.createElement(Gn,{className:l("progressRingContainer",s)},We.createElement(Et,{size:19,percentage:t/o,fillColor:s.theme.colorPrimary,bgColor:s.theme.colorBackgroundSecondary})),We.createElement(zn,{type:p,className:l("badgeTitleContainer",s)},We.createElement(Hn,{type:p,appearance:s,className:l("badgeTitle",s)},e),n!==void 0&&We.createElement(Ot,{className:l("badgeChevron",s),color:s.theme.colorPrimary})),p=="default"&&o&&o!==0&&We.createElement(Ue,{display:"compact",count:t,total:o,fillColor:s.theme.colorPrimary,bgColor:s.theme.colorBackgroundSecondary,style:{width:"100%"},appearance:s})));import tt from"react";import Rt from"styled-components";var Vn=Rt.div`
|
|
1159
1163
|
display: flex;
|
|
1160
1164
|
flex-direction: row;
|
|
1161
1165
|
width: 100%;
|
|
@@ -1166,25 +1170,25 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1166
1170
|
border-width: 1px;
|
|
1167
1171
|
border-color: ${e=>e.appearance.theme.colorPrimary};
|
|
1168
1172
|
border-radius: 12px;
|
|
1169
|
-
`,
|
|
1170
|
-
${e=>
|
|
1173
|
+
`,Kn=Rt.div`
|
|
1174
|
+
${e=>k(e)} {
|
|
1171
1175
|
display: flex;
|
|
1172
1176
|
justify-content: center;
|
|
1173
1177
|
align-items: center;
|
|
1174
1178
|
margin-right: 16px;
|
|
1175
1179
|
}
|
|
1176
|
-
`,
|
|
1180
|
+
`,qn=Rt.div`
|
|
1177
1181
|
display: flex;
|
|
1178
1182
|
flex-direction: column;
|
|
1179
1183
|
flex: 1;
|
|
1180
1184
|
margin-top: 0;
|
|
1181
|
-
`,
|
|
1185
|
+
`,Yn=Rt.div`
|
|
1182
1186
|
display: flex;
|
|
1183
1187
|
flex-direction: column;
|
|
1184
1188
|
justify-content: center;
|
|
1185
1189
|
margin-left: 16px;
|
|
1186
1190
|
min-width: 200px;
|
|
1187
|
-
`,
|
|
1191
|
+
`,uC=Rt.div`
|
|
1188
1192
|
display: flex;
|
|
1189
1193
|
justify-content: center;
|
|
1190
1194
|
align-items: flex-end;
|
|
@@ -1193,8 +1197,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1193
1197
|
:hover {
|
|
1194
1198
|
opacity: 0.8;
|
|
1195
1199
|
}
|
|
1196
|
-
`;var
|
|
1197
|
-
${e=>
|
|
1200
|
+
`;var Xn=({title:e,subtitle:t,icon:o,appearance:n,count:r,total:i,className:s,style:p})=>tt.createElement(tt.Fragment,null,tt.createElement(Vn,{appearance:n,className:xe(l("fullWidthProgressBadgeContainer",n),s??""),style:p},o&&tt.createElement(Kn,{className:l("fullWidthProgressBadgeIcon",n)},o),tt.createElement(qn,null,tt.createElement(Ce,{size:"small",appearance:n,title:e,subtitle:t})),tt.createElement(Yn,{className:l("fullWidthProgressBadgeProgressContainer",n)},tt.createElement(Ue,{count:r,total:i,display:"percent",textLocation:"top",fillColor:n.theme.colorPrimary}))));var Ip=({flowId:e,title:t,subtitle:o,icon:n,style:r,onClick:i,className:s,customVariables:p,hideOnFlowCompletion:d,appearance:a,type:u="default"})=>{let{getFlow:c,getFlowSteps:f,getFlowStatus:w,getNumberOfStepsCompleted:T,isLoading:S,targetingLogicShouldHideFlow:h,updateCustomVariables:E}=Y(),{mergeAppearanceWithDefault:y}=Q();a=y(a);let{setOpenFlowState:I,getOpenFlowState:F}=Pe();if(Ep(()=>{E(p)},[p,S]),S)return null;let x=c(e);if(!x||h(x)||d===!0&&w(e)===q)return null;let m=f(e),C=T(e);return u==="full-width"?ot.createElement(ot.Fragment,null,ot.createElement(oe,{appearance:a}),ot.createElement(Xn,{title:t,subtitle:o,count:C,total:m.length,style:r,className:s,appearance:a,icon:n,onClick:()=>{}})):ot.createElement(ot.Fragment,null,ot.createElement(oe,{appearance:a}),ot.createElement(jn,{count:C,total:m.length,title:t,style:r,onClick:()=>{I(e,!0),i&&i()},type:u,className:s,appearance:a}))};import Ap from"react";var Bp=({flowId:e,style:t,appearance:o,...n})=>{let{getFlow:r,targetingLogicShouldHideFlow:i,getFlowSteps:s}=Y(),{mergeAppearanceWithDefault:p}=Q();o=p(o);let d=r(e);if(!d||i(d))return null;let a=s(e);return Ap.createElement(Qt,{steps:a,style:t,appearance:o,...n})};import Mt,{useContext as Gp,useEffect as jp}from"react";import D,{useEffect as Io,useLayoutEffect as ss,useRef as $p,useState as eo}from"react";import to from"styled-components";import{useCallback as Np,useEffect as Lp,useState as Op}from"react";var or=(e,t,o,n={x:20,y:20},r)=>{let i=r=="fixed"?0:window.scrollY,s=r=="fixed"?0:window.scrollX;return!e||!e.left||!e.top?{x:0,y:0}:t==="left"?{x:e.left-o+n.x+s,y:e.top-n.y+i}:t==="right"?{x:e.left+e.width+n.x+s,y:e.top-n.y+i}:{x:0,y:0}},Jn={bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0};function Dp(e){let t=Jn;return e&&(t=e.getBoundingClientRect()),t}function Qn(e,t){let[o,n]=Op(Jn),r=Np(()=>{e&&n(Dp(e))},[e]);return Lp(()=>(r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)),[e,t]),o}import rt from"styled-components";var Zn=rt.div`
|
|
1201
|
+
${e=>k(e)} {
|
|
1198
1202
|
background: ${e=>e.appearance.theme.colorBackground};
|
|
1199
1203
|
}
|
|
1200
1204
|
|
|
@@ -1204,14 +1208,14 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1204
1208
|
min-width: 300px;
|
|
1205
1209
|
padding: 22px 22px 12px;
|
|
1206
1210
|
z-index: ${e=>e.zIndex};
|
|
1207
|
-
`,
|
|
1211
|
+
`,Rn=rt.div`
|
|
1208
1212
|
display: block;
|
|
1209
1213
|
cursor: pointer;
|
|
1210
1214
|
position: absolute;
|
|
1211
1215
|
top: 25px;
|
|
1212
1216
|
right: 22px;
|
|
1213
|
-
`,
|
|
1214
|
-
${e=>
|
|
1217
|
+
`,es=rt.img`
|
|
1218
|
+
${e=>k(e)} {
|
|
1215
1219
|
display: block;
|
|
1216
1220
|
width: 100%;
|
|
1217
1221
|
height: auto;
|
|
@@ -1219,8 +1223,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1219
1223
|
margin-top: ${e=>e.dismissible?"24px":"0px"};
|
|
1220
1224
|
margin-bottom: 16px;
|
|
1221
1225
|
}
|
|
1222
|
-
`,
|
|
1223
|
-
${e=>
|
|
1226
|
+
`,ts=rt.div`
|
|
1227
|
+
${e=>k(e)} {
|
|
1224
1228
|
display: block;
|
|
1225
1229
|
width: 100%;
|
|
1226
1230
|
height: auto;
|
|
@@ -1228,30 +1232,30 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1228
1232
|
margin-top: ${e=>e.dismissible?"24px":"0px"};
|
|
1229
1233
|
margin-bottom: 16px;
|
|
1230
1234
|
}
|
|
1231
|
-
`,
|
|
1235
|
+
`,os=rt.div`
|
|
1232
1236
|
display: flex;
|
|
1233
1237
|
flex-direction: row;
|
|
1234
1238
|
justify-content: space-between;
|
|
1235
1239
|
align-content: center;
|
|
1236
|
-
`,
|
|
1240
|
+
`,rs=rt.div`
|
|
1237
1241
|
display: flex;
|
|
1238
1242
|
flex: 1;
|
|
1239
1243
|
flex-direction: column;
|
|
1240
1244
|
justify-content: center;
|
|
1241
|
-
`,
|
|
1245
|
+
`,is=rt.div`
|
|
1242
1246
|
display: flex;
|
|
1243
1247
|
flex: 2;
|
|
1244
1248
|
flex-shrink: 1;
|
|
1245
1249
|
gap: 8px;
|
|
1246
1250
|
height: 64px;
|
|
1247
|
-
${e=>
|
|
1251
|
+
${e=>k(e)} {
|
|
1248
1252
|
flex-direction: row;
|
|
1249
1253
|
justify-content: ${e=>e.showStepCount?"flex-end":"flex-start"};
|
|
1250
1254
|
align-content: center;
|
|
1251
1255
|
align-items: center;
|
|
1252
1256
|
}
|
|
1253
|
-
`,
|
|
1254
|
-
${e=>
|
|
1257
|
+
`,ns=rt.p`
|
|
1258
|
+
${e=>k(e)} {
|
|
1255
1259
|
font-style: normal;
|
|
1256
1260
|
font-weight: 600;
|
|
1257
1261
|
font-size: 15px;
|
|
@@ -1259,7 +1263,7 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1259
1263
|
color: #808080;
|
|
1260
1264
|
}
|
|
1261
1265
|
margin: 0;
|
|
1262
|
-
`;var
|
|
1266
|
+
`;var ls=300,as=100,Mp=500,$t=12,Up=to.div`
|
|
1263
1267
|
width: 100%;
|
|
1264
1268
|
height: 100%;
|
|
1265
1269
|
border-radius: 9999px;
|
|
@@ -1282,26 +1286,26 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1282
1286
|
opacity: 0;
|
|
1283
1287
|
}
|
|
1284
1288
|
}
|
|
1285
|
-
|
|
1289
|
+
`,_p=to.div`
|
|
1286
1290
|
width: ${$t}px;
|
|
1287
1291
|
height: ${$t}px;
|
|
1288
1292
|
border-radius: 100px;
|
|
1289
1293
|
background-color: ${e=>e.primaryColor};
|
|
1290
1294
|
z-index: 20;
|
|
1291
1295
|
opacity: 1;
|
|
1292
|
-
`,
|
|
1296
|
+
`,Wp=to.div`
|
|
1293
1297
|
pointer-events: all;
|
|
1294
|
-
`,
|
|
1298
|
+
`,ps=to.div`
|
|
1295
1299
|
display: flex;
|
|
1296
1300
|
align-content: center;
|
|
1297
1301
|
justify-content: center;
|
|
1298
1302
|
align-items: center;
|
|
1299
1303
|
z-index: ${e=>e.zIndex?e.zIndex:90};
|
|
1300
|
-
`,
|
|
1304
|
+
`,zp=to(ps)`
|
|
1301
1305
|
width: ${$t+12}px;
|
|
1302
1306
|
height: ${$t+12}px;
|
|
1303
|
-
`,
|
|
1304
|
-
${e=>
|
|
1307
|
+
`,Hp=({steps:e=[],onDismiss:t,onComplete:o=()=>{},tooltipPosition:n="auto",showHighlight:r=!0,primaryColor:i="#000000",offset:s={x:0,y:0},visible:p=!0,containerStyle:d={},selectedStep:a=0,customStepTypes:u,appearance:c,dismissible:f=!1,showHighlightOnly:w,showStepCount:T=!0,completedStepsCount:S=0})=>{var ke,ue,He,Ge;let[h,E]=eo(),[y,I]=eo(new Date),F=$p(null),[x,m]=eo(document.querySelector(e[a].selector)),C=Qn(x,y),[v,U]=eo(),[$,_]=eo(!w),A=(ue=(ke=e[a])==null?void 0:ke.props)!=null&&ue.position?e[a].props.position:"absolute",H=((Ge=(He=e[a])==null?void 0:He.props)==null?void 0:Ge.zIndex)??90,B=(h==null?void 0:h.width)??ls,M=(h==null?void 0:h.height)??as;ss(()=>{F.current&&E({width:F.current.clientWidth,height:F.current.clientHeight})},[a,y,A]),Io(()=>{w||_(!0)},[a]);let re=n==="auto"?"right":n,X=or(C,re,B,s,A),W=C.right+B>(window.innerWidth||document.documentElement.clientWidth),be=C.bottom+as>(window.innerHeight||document.documentElement.clientHeight);W&&n==="auto"&&(X=or(C,"left",B,s,A),re="left");let me=window.location.pathname.split("/").pop(),j=()=>{let K=document.querySelector(e[a].selector);v&&v===JSON.stringify(K==null?void 0:K.getBoundingClientRect())||(m(K),I(new Date),K&&U(JSON.stringify(K.getBoundingClientRect())))};if(Io(()=>{let K=new MutationObserver(j);return K.observe(document.body,{subtree:!0,childList:!0}),()=>K.disconnect()},[j]),Io(()=>{let K=new MutationObserver(j);return K.observe(document.body,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]}),()=>K.disconnect()},[j]),Io(()=>{let K=setInterval(()=>{j()},10);return()=>clearInterval(K)},[j]),ss(()=>{setTimeout(()=>{j()},Mp),j()},[a,me]),x===null)return D.createElement(D.Fragment,null);if(X.x==0&&X.y==0)return D.createElement(D.Fragment,null);if(!p)return D.createElement(D.Fragment,null);let J=()=>{let K=()=>{if(e[a].handlePrimaryButtonClick&&(e[a].handlePrimaryButtonClick(),_(!1),setTimeout(()=>{j()},30)),S===e.length-1)return o()},he=()=>{e[a].handleSecondaryButtonClick&&(e[a].handleSecondaryButtonClick(),w&&_(!1))};return D.createElement(D.Fragment,null,T&&D.createElement(rs,null,D.createElement(ns,{className:l("tooltipStepCounter",c)},a+1," of ",e.length)),D.createElement(is,{showStepCount:T,className:l("tooltipCTAContainer",c)},e[a].secondaryButtonTitle&&D.createElement(R,{title:e[a].secondaryButtonTitle,appearance:c,onClick:he,size:"small",withMargin:!1,secondary:!0}),e[a].primaryButtonTitle&&D.createElement(R,{title:e[a].primaryButtonTitle,appearance:c,onClick:K,withMargin:!1,size:"small"})))},fe=()=>D.createElement(D.Fragment,null,f&&D.createElement(Rn,{"data-testid":"tooltip-dismiss",onClick:()=>{t&&t()},className:l("tooltipClose",c)},D.createElement(ve,null)),e[a].imageUri&&D.createElement(es,{dismissible:f,appearance:c,src:e[a].imageUri,className:l("tooltipImageContainer",c)}),e[a].videoUri&&!e[a].imageUri&&D.createElement(ts,{dismissible:f,appearance:c,className:l("tooltipVideoContainer",c)},D.createElement(Pt,{appearance:c,videoUri:e[a].videoUri})),D.createElement(Ce,{appearance:c,title:e[a].title,subtitle:e[a].subtitle,size:"small"}),D.createElement(os,{className:l("tooltipFooter",c)},D.createElement(J,null))),N={...{default:K=>{var he;if((he=e[a])!=null&&he.StepContent){let nt=e[a].StepContent;return D.createElement("div",null,nt)}return D.createElement(fe,null)}},...u},ee=()=>{var K;return e?!((K=e[a])!=null&&K.type)||!N[e[a].type]?N.default(e[a]):N[e[a].type]({stepData:e[a],primaryColor:i}):D.createElement(D.Fragment,null)};if(w&&e[a].complete===!0)return null;let te={top:(X==null?void 0:X.y)-$t,left:(re=="left"?C.x+s.x:(X==null?void 0:X.x)-$t)??0,cursor:w?"pointer":"default",position:A},we=()=>{let he=te.left+(re=="left"?-B:24);return Math.min(Math.max(he,20),window.innerWidth-B-20)},it=()=>{w&&(I(new Date),_(!$))};return D.createElement(Wp,null,D.createElement(zp,{style:te,zIndex:H,className:l("tourHighlightContainer",c)},r&&e[a].showHighlight!==!1&&D.createElement(D.Fragment,null,D.createElement(_p,{style:{position:A},onClick:it,primaryColor:c.theme.colorPrimary}),D.createElement(Up,{style:{position:"absolute"},onClick:it,primaryColor:c.theme.colorPrimary}))),D.createElement(ps,{style:{...te,left:we()},zIndex:H+1,className:l("tooltipContainerWrapper",c)},$&&D.createElement(Zn,{ref:F,layoutId:"tooltip-container",style:{position:"relative",width:"max-content",right:0,top:12,...d},appearance:c,className:l("tooltipContainer",c),maxWidth:ls,zIndex:H+10},D.createElement(ee,null))))},Ao=Hp;import{Portal as Vp}from"react-portal";var Kp=({flowId:e,customVariables:t,appearance:o,onStepCompletion:n,onButtonClick:r,showTooltipsSimultaneously:i=!1,onDismiss:s,dismissible:p,tooltipPosition:d="auto",showHighlightOnly:a=!1,dismissBehavior:u="complete-flow",onComplete:c,...f})=>{let{getFlow:w,getFlowSteps:T,isLoading:S,targetingLogicShouldHideFlow:h,markStepCompleted:E,markStepStarted:y,markFlowCompleted:I,updateCustomVariables:F,getCurrentStepIndex:x,getStepStatus:m,isStepBlocked:C,getFlowStatus:v,getNumberOfStepsCompleted:U}=Y(),{isLoadingUserFlowStateData:$}=Ae(),{primaryCTAClickSideEffects:_,secondaryCTAClickSideEffects:A}=ie(),{hasOpenModals:H}=Pe(),B=x(e),{openFlowStates:M}=Gp(V),{mergeAppearanceWithDefault:re}=Q();if(o=re(o),jp(()=>{F(t)},[t,S]),$)return null;let X=w(e);if(!X||h(X)||v(e)==q||H())return null;let W=T(e);if(Object.keys(M).length>0){let L=Object.keys(M).find(N=>M[N]===!0);if(L!==void 0&&L!==e)return Mt.createElement(Mt.Fragment,null)}async function be(L){if(await E(e,L.id),W.map(N=>m(e,N.id)).every(N=>N===Le)){await I(e);return}if(!a&&B+1<W.length){if(C(e,W[B+1].id))return;await y(e,W[B+1].id)}}function me(L,N,ee){let te=B+1<W.length?W[B+1]:null;r&&r(L,B,N,te),n&&n(L,ee,te)}function j(){return W.map(L=>({...L,handleSecondaryButtonClick:async()=>{A(L),L.skippable===!0&&await E(e,L.id,{skipped:!0}),me(L,"secondary",B)},handlePrimaryButtonClick:async()=>{(!L.completionCriteria&&(L.autoMarkCompleted||L.autoMarkCompleted===void 0)||L.completionCriteria&&L.autoMarkCompleted===!0)&&await be(L),me(L,"primary",B),_(L)}}))}async function J(L){s&&s(),u==="complete-flow"?await I(e):await E(e,L.id)}function fe(){c&&c()}return Mt.createElement(Vp,null,Mt.createElement(oe,{appearance:o}),i?W.map((L,N)=>Mt.createElement(Ao,{key:L.id,appearance:o,steps:j(),selectedStep:N,showTooltipsSimultaneously:i,dismissible:p,onDismiss:()=>J(L),tooltipPosition:d,showHighlightOnly:a,completedStepsCount:U(e),onComplete:fe,...f})):Mt.createElement(Ao,{appearance:o,steps:j(),selectedStep:B,showTooltipsSimultaneously:i,dismissible:p,onDismiss:()=>J(W[B]),tooltipPosition:d,completedStepsCount:U(e),showHighlightOnly:a,onComplete:fe,...f}))};import ye,{useEffect as qp,useRef as Yp,useState as Xp}from"react";import{Portal as Jp}from"react-portal";import St from"styled-components";var ds=St.button`
|
|
1308
|
+
${e=>k(e)} {
|
|
1305
1309
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
1306
1310
|
|
|
1307
1311
|
display: flex;
|
|
@@ -1318,17 +1322,17 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1318
1322
|
opacity: 0.8;
|
|
1319
1323
|
}
|
|
1320
1324
|
}
|
|
1321
|
-
`,
|
|
1322
|
-
${e=>
|
|
1325
|
+
`,cs=St.span`
|
|
1326
|
+
${e=>k(e)} {
|
|
1323
1327
|
font-size: 12px;
|
|
1324
1328
|
display: inline-block;
|
|
1325
1329
|
}
|
|
1326
|
-
`,
|
|
1327
|
-
${e=>
|
|
1330
|
+
`,ms=St.span`
|
|
1331
|
+
${e=>k(e)} {
|
|
1328
1332
|
font-size: 12px;
|
|
1329
1333
|
display: inline-block;
|
|
1330
1334
|
}
|
|
1331
|
-
`,
|
|
1335
|
+
`,us=St.div`
|
|
1332
1336
|
position: fixed;
|
|
1333
1337
|
right: 0;
|
|
1334
1338
|
bottom: 0;
|
|
@@ -1338,8 +1342,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1338
1342
|
flex-direction: column;
|
|
1339
1343
|
align-items: flex-end;
|
|
1340
1344
|
z-index: 50;
|
|
1341
|
-
`,
|
|
1342
|
-
${e=>
|
|
1345
|
+
`,fs=St.button`
|
|
1346
|
+
${e=>k(e)} {
|
|
1343
1347
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
1344
1348
|
background-color: #ffffff;
|
|
1345
1349
|
border: 1px solid #f5f5f5;
|
|
@@ -1354,8 +1358,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1354
1358
|
0px 3px 6px -4px rgba(0, 0, 0, 0.12);
|
|
1355
1359
|
border-radius: 45px;
|
|
1356
1360
|
cursor: pointer;
|
|
1357
|
-
`,
|
|
1358
|
-
${e=>
|
|
1361
|
+
`,gs=St.div`
|
|
1362
|
+
${e=>k(e)} {
|
|
1359
1363
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
1360
1364
|
background: #ffffff;
|
|
1361
1365
|
}
|
|
@@ -1371,8 +1375,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1371
1375
|
position: ${e=>e.type=="inline"?"absolute":"relative"};
|
|
1372
1376
|
top: ${e=>e.type=="inline"?"68px":0};
|
|
1373
1377
|
margin-left: ${e=>e.type=="inline"?"-127px":0};
|
|
1374
|
-
`,
|
|
1375
|
-
${e=>
|
|
1378
|
+
`,hs=St.button`
|
|
1379
|
+
${e=>k(e)} {
|
|
1376
1380
|
// Anything inside this block will be ignored if the user provides a custom class
|
|
1377
1381
|
color: #434343;
|
|
1378
1382
|
:hover {
|
|
@@ -1388,8 +1392,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1388
1392
|
font-size: 14px;
|
|
1389
1393
|
|
|
1390
1394
|
padding: 8px 12px;
|
|
1391
|
-
`;import{AnimatePresence as
|
|
1392
|
-
${e=>
|
|
1395
|
+
`;import{AnimatePresence as bs,motion as ws}from"framer-motion";import xs from"react";var Cs=({style:e,className:t})=>xs.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",fill:"none",viewBox:"0 0 18 18",style:e,className:t},xs.createElement("path",{fill:"currentColor",d:"M13.43 4.938a4.494 4.494 0 00-1.043-1.435A4.955 4.955 0 009 2.197c-1.276 0-2.48.464-3.387 1.305A4.502 4.502 0 004.57 4.938a4.242 4.242 0 00-.386 1.773v.475c0 .109.087.197.196.197h.95a.197.197 0 00.197-.197V6.71c0-1.749 1.557-3.17 3.473-3.17s3.473 1.421 3.473 3.17c0 .718-.254 1.393-.738 1.955a3.537 3.537 0 01-1.9 1.125 1.928 1.928 0 00-1.085.682c-.271.343-.42.768-.42 1.206v.552c0 .109.088.197.197.197h.95a.197.197 0 00.196-.197v-.552c0-.276.192-.519.457-.578a4.904 4.904 0 002.625-1.56c.335-.392.597-.828.778-1.3a4.256 4.256 0 00-.103-3.303zM9 13.834a.985.985 0 10.001 1.97.985.985 0 00-.001-1.97z"}));import Ss from"react";var ys=({style:e,className:t})=>Ss.createElement("svg",{style:e,className:t,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},Ss.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"}));var Qp=({flowId:e,style:t,onStepCompletion:o,visible:n=!0,type:r="inline",title:i="Help",appearance:s})=>{let{getFlow:p,getFlowSteps:d,markStepCompleted:a,getStepStatus:u,getNumberOfStepsCompleted:c,isLoading:f,targetingLogicShouldHideFlow:w}=Y(),{primaryCTAClickSideEffects:T}=ie(),S=Yp(null),[h,E]=Xp(!1),{mergeAppearanceWithDefault:y}=Q();s=y(s),qp(()=>(document.addEventListener("click",I,!1),()=>{document.removeEventListener("click",I,!1)}),[]);let I=v=>{S.current&&!S.current.contains(v.target)&&E(!1)};if(f)return null;let F=p(e);if(!F||w(F))return null;let x=d(e);if(!x||!n)return null;function m(v,U){!v.completionCriteria&&(v.autoMarkCompleted||v.autoMarkCompleted===void 0)&&a(e,v.id),T(v),o&&o(v,U),E(!1)}function C(){return h&&ye.createElement(gs,{className:l("floatingWidgetMenu",s),as:ws.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.1},type:r},x.map((v,U)=>ye.createElement(hs,{className:l("floatingWidgetMenuItem",s),key:U,onClick:()=>m(v,U)},v.title)))}return r=="inline"?ye.createElement("span",{ref:S},ye.createElement(ds,{style:t,onClick:()=>{E(!h)},className:l("supportButton",s)},ye.createElement(ms,{className:l("supportIconContainer",s)},ye.createElement(ys,{className:l("supportIcon",s),style:{width:"18px",height:"18px"}})),ye.createElement(cs,{className:l("supportButtonTitle",s)},i)),ye.createElement(bs,null,ye.createElement(C,null))):ye.createElement(Jp,null,ye.createElement(us,{style:t,ref:S},ye.createElement(bs,null,ye.createElement(C,null)),ye.createElement(fs,{onClick:()=>{E(!h)},as:ws.button,whileHover:{scale:1.1},className:l("floatingWidgetButton",s)},ye.createElement(Cs,{className:l("floatingWidgetButtonIcon",s),style:{display:"flex",width:"20px",height:"20px"}}))))};import ze,{useEffect as Zp}from"react";import Bo from"styled-components";var Ts=Bo.div`
|
|
1396
|
+
${e=>k(e)} {
|
|
1393
1397
|
display: flex;
|
|
1394
1398
|
flex-direction: column;
|
|
1395
1399
|
width: 100%;
|
|
@@ -1403,18 +1407,18 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1403
1407
|
border-radius: 12px;
|
|
1404
1408
|
position: relative;
|
|
1405
1409
|
}
|
|
1406
|
-
`,
|
|
1410
|
+
`,Fs=Bo.div`
|
|
1407
1411
|
display: flex;
|
|
1408
1412
|
flex-direction: column;
|
|
1409
1413
|
flex: 1;
|
|
1410
|
-
`,
|
|
1414
|
+
`,ks=Bo.div`
|
|
1411
1415
|
display: flex;
|
|
1412
1416
|
flex-direction: column;
|
|
1413
1417
|
justify-content: center;
|
|
1414
1418
|
align-items: flex-start;
|
|
1415
1419
|
margin-top: 16px;
|
|
1416
|
-
`,
|
|
1417
|
-
${e=>
|
|
1420
|
+
`,Ps=Bo.div`
|
|
1421
|
+
${e=>k(e)} {
|
|
1418
1422
|
position: absolute;
|
|
1419
1423
|
top: 16px;
|
|
1420
1424
|
right: 16px;
|
|
@@ -1424,9 +1428,9 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1424
1428
|
opacity: 0.8;
|
|
1425
1429
|
}
|
|
1426
1430
|
}
|
|
1427
|
-
`;var
|
|
1431
|
+
`;var Rp=({flowId:e,onDismiss:t,customVariables:o,onButtonClick:n,appearance:r,className:i,style:s,dismissible:p})=>{let{getFlow:d,markFlowCompleted:a,markStepCompleted:u,isLoading:c,targetingLogicShouldHideFlow:f,updateCustomVariables:w,getFlowSteps:T,getFlowStatus:S,getCurrentStepIndex:h}=Y(),{primaryCTAClickSideEffects:E}=ie(),{mergeAppearanceWithDefault:y}=Q();if(r=y(r),Zp(()=>{w(o)},[o,c]),c)return null;let I=d(e);if(!I||f(I)||S(e)===q)return null;let x=T(e)[h(e)];return ze.createElement(ze.Fragment,null,ze.createElement(oe,{appearance:r}),ze.createElement(Ts,{appearance:r,className:xe(l("embeddedTipContainer",r),i),style:s},(p===!0||x.dismissible)&&ze.createElement(Ps,{onClick:async()=>{await a(e),t&&t()},className:l("embeddedTipDismissButton",r)},ze.createElement(ve,null)),ze.createElement(Fs,null,ze.createElement(Ce,{size:"small",appearance:r,title:x.title,subtitle:x.subtitle})),x.primaryButtonTitle&&ze.createElement(ks,{className:l("embeddedTipCallToActionContainer",r)},ze.createElement(R,{classPrefix:"embeddedTip",title:x.primaryButtonTitle,appearance:r,withMargin:!1,size:"small",type:"inline",onClick:async()=>{x.handlePrimaryButtonClick(),E(x),!(n&&n(x,h(e),"primary")===!1)&&(await u(e,x.id),await a(e))}}))))};import ge,{useEffect as ed}from"react";import Ut from"styled-components";var vs=Ut.div`
|
|
1428
1432
|
// use the :not annotation
|
|
1429
|
-
${e=>
|
|
1433
|
+
${e=>k(e)} {
|
|
1430
1434
|
display: flex;
|
|
1431
1435
|
flex-direction: ${e=>e.type==="square"?"column":"row"};
|
|
1432
1436
|
width: 100%;
|
|
@@ -1438,24 +1442,24 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1438
1442
|
border-color: ${e=>e.appearance.theme.colorPrimary};
|
|
1439
1443
|
border-radius: 12px;
|
|
1440
1444
|
}
|
|
1441
|
-
`,
|
|
1442
|
-
${e=>
|
|
1445
|
+
`,Es=Ut.div`
|
|
1446
|
+
${e=>k(e)} {
|
|
1443
1447
|
display: flex;
|
|
1444
1448
|
width: 36px;
|
|
1445
1449
|
height: 36px;
|
|
1446
1450
|
}
|
|
1447
|
-
`,
|
|
1451
|
+
`,Is=Ut.div`
|
|
1448
1452
|
display: flex;
|
|
1449
1453
|
flex-direction: column;
|
|
1450
1454
|
flex: 1;
|
|
1451
1455
|
margin-left: ${e=>e.type==="square"?"0px":"16px"};
|
|
1452
1456
|
margin-top: ${e=>e.type==="square"?"12px":"0"};
|
|
1453
|
-
`,
|
|
1457
|
+
`,As=Ut.div`
|
|
1454
1458
|
display: flex;
|
|
1455
1459
|
flex-direction: column;
|
|
1456
1460
|
justify-content: center;
|
|
1457
1461
|
margin-left: ${e=>e.type==="square"?"0px":"16px"};
|
|
1458
|
-
`,
|
|
1462
|
+
`,rr=Ut.div`
|
|
1459
1463
|
display: flex;
|
|
1460
1464
|
justify-content: ${e=>e.type==="square"?"flex-end":"center"};
|
|
1461
1465
|
align-items: flex-end;
|
|
@@ -1464,13 +1468,13 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1464
1468
|
:hover {
|
|
1465
1469
|
opacity: 0.8;
|
|
1466
1470
|
}
|
|
1467
|
-
`,
|
|
1471
|
+
`,ir=Ut.div`
|
|
1468
1472
|
display: flex;
|
|
1469
1473
|
justify-content: ${e=>e.type==="square"?"flex-end":"center"};
|
|
1470
1474
|
align-items: flex-end;
|
|
1471
1475
|
margin-left: ${e=>e.type==="square"?"0px":"16px"};
|
|
1472
|
-
`;import
|
|
1473
|
-
${e=>
|
|
1476
|
+
`;import Bs from"react";var Ns=({style:e,className:t})=>Bs.createElement("svg",{style:e,className:t,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor"},Bs.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"}));var td=({flowId:e,title:t,subtitle:o,onDismiss:n,customVariables:r,onButtonClick:i,appearance:s,type:p="full-width",icon:d})=>{let{getFlow:a,markFlowCompleted:u,isLoading:c,targetingLogicShouldHideFlow:f,updateCustomVariables:w,getFlowMetadata:T,getFlowStatus:S,getFlowSteps:h,getCurrentStepIndex:E}=Y(),{primaryCTAClickSideEffects:y}=ie(),{mergeAppearanceWithDefault:I}=Q();if(s=I(s),ed(()=>{w(r)},[r,c]),c)return null;let F=a(e);if(!F||f(F)||S(e)===q)return null;let x=h(e),m=x.length>0?x[E(e)]:T(e);return m!=null&&m.title&&(t=m.title),m!=null&&m.subtitle&&(o=m.subtitle),ge.createElement(ge.Fragment,null,ge.createElement(oe,{appearance:s}),ge.createElement(vs,{type:p,appearance:s,className:l("bannerContainer",s)},p!="square"&&ge.createElement(Es,{className:l("bannerIconContainer",s)},d||ge.createElement(Ns,null)),p==="square"&&m.dismissible&&ge.createElement(ir,{type:p,className:l("bannerDismissButtonContainer",s)},ge.createElement(rr,{type:p,onClick:async()=>{await u(e),n&&n()},className:l("bannerDismissButton",s)},ge.createElement(ve,null))),ge.createElement(Is,{type:p},ge.createElement(Ce,{appearance:s,title:t,subtitle:o})),ge.createElement(As,{type:p,className:l("bannerCallToActionContainer",s)},ge.createElement(R,{title:(m==null?void 0:m.primaryButtonTitle)??"Get started",appearance:s,onClick:()=>{y(m),i&&i(m,0,"primary")}})),p!=="square"&&m.dismissible&&ge.createElement(ir,{type:p,className:l("bannerDismissButtonContainer",s)},ge.createElement(rr,{type:p,onClick:async()=>{await u(e),n&&n()},className:l("bannerDismissButton",s)},ge.createElement(ve,null)))))};import Z,{useEffect as od}from"react";import{Portal as rd}from"react-portal";import Je from"styled-components";var Ls=Je.div`
|
|
1477
|
+
${e=>k(e)} {
|
|
1474
1478
|
display: flex;
|
|
1475
1479
|
flex-direction: column;
|
|
1476
1480
|
width: 100%;
|
|
@@ -1490,7 +1494,7 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1490
1494
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
1491
1495
|
min-width: 550px;
|
|
1492
1496
|
}
|
|
1493
|
-
`,
|
|
1497
|
+
`,Os=Je.button`
|
|
1494
1498
|
border: 1px solid ${e=>e.appearance.theme.colorBorder};
|
|
1495
1499
|
border-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
1496
1500
|
// If selected make border color primary and text color color priamry
|
|
@@ -1511,31 +1515,31 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1511
1515
|
display: flex;
|
|
1512
1516
|
justify-content: center;
|
|
1513
1517
|
align-items: center;
|
|
1514
|
-
`,
|
|
1518
|
+
`,nr=Je.div`
|
|
1515
1519
|
display: flex;
|
|
1516
1520
|
justify-content: flex-end;
|
|
1517
1521
|
margin-top: 24px;
|
|
1518
1522
|
gap: 8px;
|
|
1519
|
-
`,
|
|
1523
|
+
`,Ds=Je.div`
|
|
1520
1524
|
display: flex;
|
|
1521
1525
|
justify-content: space-between;
|
|
1522
1526
|
margin-top: 24px;
|
|
1523
|
-
`,
|
|
1527
|
+
`,sr=Je.div`
|
|
1524
1528
|
font-size: 12px;
|
|
1525
1529
|
line-height: 16px;
|
|
1526
1530
|
color: ${e=>e.appearance.theme.colorTextDisabled};
|
|
1527
|
-
`,
|
|
1531
|
+
`,lr=Je.div`
|
|
1528
1532
|
display: flex;
|
|
1529
1533
|
flex-direction: column;
|
|
1530
1534
|
flex: 1;
|
|
1531
|
-
`,
|
|
1535
|
+
`,ky=Je.div`
|
|
1532
1536
|
display: flex;
|
|
1533
1537
|
flex-direction: column;
|
|
1534
1538
|
justify-content: center;
|
|
1535
1539
|
align-items: flex-start;
|
|
1536
1540
|
margin-top: 16px;
|
|
1537
|
-
|
|
1538
|
-
${e=>
|
|
1541
|
+
`,$s=Je.textarea`
|
|
1542
|
+
${e=>k(e)} {
|
|
1539
1543
|
margin-top: 16px;
|
|
1540
1544
|
border: 1px solid ${e=>e.appearance.theme.colorBorder};
|
|
1541
1545
|
border-radius: ${e=>e.appearance.theme.borderRadius}px;
|
|
@@ -1545,8 +1549,8 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1545
1549
|
width: 100%;
|
|
1546
1550
|
height: 100px;
|
|
1547
1551
|
}
|
|
1548
|
-
`,
|
|
1549
|
-
${e=>
|
|
1552
|
+
`,Ms=Je.div`
|
|
1553
|
+
${e=>k(e)} {
|
|
1550
1554
|
position: absolute;
|
|
1551
1555
|
top: 16px;
|
|
1552
1556
|
right: 16px;
|
|
@@ -1556,5 +1560,5 @@ ${n=>n.inlineStyles.map(([r,i])=>`.${zt}${r}.${zt}${r} { ${Object.entries(i).map
|
|
|
1556
1560
|
opacity: 0.8;
|
|
1557
1561
|
}
|
|
1558
1562
|
}
|
|
1559
|
-
`;var
|
|
1563
|
+
`;var id=({flowId:e,onDismiss:t,customVariables:o,onButtonClick:n,appearance:r,className:i,style:s})=>{let{getFlow:p,markFlowCompleted:d,markStepCompleted:a,getNumberOfStepsCompleted:u,isLoading:c,targetingLogicShouldHideFlow:f,updateCustomVariables:w,getFlowSteps:T,getFlowStatus:S,getCurrentStepIndex:h}=Y(),{primaryCTAClickSideEffects:E}=ie(),{mergeAppearanceWithDefault:y}=Q(),[I,F]=Z.useState(null),[x,m]=Z.useState(""),{hasOpenModals:C,setKeepCompletedFlowOpenDuringSession:v,shouldKeepCompletedFlowOpenDuringSession:U}=Pe();if(r=y(r),od(()=>{w(o)},[o,c]),c)return null;let $=p(e);if(!$||f($)||S(e)===q||u(e)===1&&!U(e)||C())return null;let A=T(e)[h(e)];function H(){return Z.createElement(Z.Fragment,null,Z.createElement(lr,null,Z.createElement(Ce,{size:"large",appearance:r,title:A.title,subtitle:A.subtitle})),Z.createElement(nr,{className:l("npsNumberButtonContainer",r),appearance:r},Array.from(Array(10).keys()).map(M=>Z.createElement(Os,{className:l("npsNumberButton",r),selected:I===M+1,key:M,onClick:async()=>{v(e),F(M+1),await a(e,A.id,{score:M+1})},appearance:r},M+1))),Z.createElement(Ds,{appearance:r},Z.createElement(sr,{appearance:r},"Not likely at all"),Z.createElement(sr,{appearance:r},"Extremely likely")))}function B(){return Z.createElement(Z.Fragment,null,Z.createElement(lr,null,Z.createElement(Ce,{appearance:r,title:"Why did you choose this score?",size:"large"})),Z.createElement($s,{appearance:r,value:x,onChange:M=>{m(M.target.value)},placeHolder:"Add your optional fedback here..."}),Z.createElement(nr,{appearance:r,className:l("npsNumberButtonContainer",r)},Z.createElement(R,{size:"large",withMargin:!1,onClick:async()=>{await d(e),n&&n(A,1,"primary")},appearance:r,title:A.secondaryButtonTitle||"Skip",secondary:!0}),Z.createElement(R,{size:"large",withMargin:!1,onClick:async()=>{await a(e,A.id,{feedbackText:x}),await d(e),n&&n(A,1,"primary")},appearance:r,title:A.primaryButtonTitle||"Submit"})))}return Z.createElement(rd,null,Z.createElement(oe,{appearance:r}),Z.createElement(Ls,{appearance:r,className:xe(l("npsSurveyContainer",r),i),style:s},Z.createElement(Ms,{onClick:async()=>{await d(e),t&&t()},className:l("npsSurveyDismissButton",r)},Z.createElement(ve,null)),u(e)==0&&H(),u(e)==1&&B()))};export{ct as CheckBox,Re as FormLabel,td as FrigadeBanner,tr as FrigadeChecklist,Rp as FrigadeEmbeddedTip,oi as FrigadeForm,Bp as FrigadeGuide,Pp as FrigadeHeroChecklist,id as FrigadeNPSSurvey,Ip as FrigadeProgressBadge,Ea as FrigadeProvider,Qp as FrigadeSupportWidget,Kp as FrigadeTour,Et as ProgressRing,Pe as useFlowOpens,Wt as useFlowResponses,Y as useFlows,Vo as useOrganization,Lo as useUser};
|
|
1560
1564
|
//# sourceMappingURL=index.mjs.map
|