https://www.coca-cola.com/onexp-theme/747c47e4834516aa86b4941cf98e…30de3924a0b7d549ad7715a6ba293/onboarding.js

1import{d as $,J as O,c as I,r as A,b as l,e as m,f as o,u as n,t as v,n as E,_ as N,o as W,F as G,g as H,s as V,D as z,i as k,h as D,H as Q,x as U,p as j,y as J,z as F}from"./_plugin-vue_export-helper.js";import{aV as X,t as R,aW as Y,aX as Z,aY as K,aZ as ee,a_ as te,d as ae}from"./theme.js";import{a as x,u as ne,N as oe}from"./NativeDialog.js";import{p as T,E as se}from"./EnrichmentQuestionStep.js";import{L as re}from"./LoadingIndicator.js";import{P as ie}from"./PushNotificationStep.js";import{P as le}from"./ProgressBar.js";const ce={class:"welcome-screen"},ue={class:"welcome-screen__content"},de=["id"],pe=["id"],ge={class:"welcome-screen__footer"},me=["disabled"],ve=["disabled"],_e=$({__name:"WelcomeScreen",props:{config:{},handleSetupProfile:{type:Function},handleSkip:{type:Function}},setup(d){const c=d,i=O("appState"),p=I(()=>i.value.type==="ONBOARDING_CONFIG_LOADING"),{dialogDetailsId:s,dialogHeadingId:t,onDialogOpen:e}=x(),_=A(null);return e(()=>{_.value?.focus()}),(g,r)=>(l(),m("div",ce,[o("div",ue,[r[2]||(r[2]=o("div",{class:"welcome-screen__avatar-placeholder","aria-hidden":"true"},null,-1)),o("h2",{id:n(t),class:"welcome-screen__heading"},v(c.config.heading),9,de),o("p",{id:n(s),class:"welcome-screen__description"},v(c.config.description),9,pe)]),o("div",ge,[o("button",{ref_key:"setupProfileButton",ref:_,class:E(["button-primary",{loading:p.value}]),disabled:p.value,onClick:r[0]||(r[0]=(...u)=>g.handleSetupProfile&&g.handleSetupProfile(...u))},v(c.config.setupButtonLabel),11,me),o("button",{class:"button-tertiary skip-link",disabled:p.value,onClick:r[1]||(r[1]=(...u)=>g.handleSkip&&g.handleSkip(...u))},v(c.config.skipButtonLabel),9,ve)])]))}}),fe=N(_e,[["__scopeId","data-v-5d4e3da9"]]),be={class:"avatar-selection"},Se={class:"avatar-selection__header"},ye=["id"],he=["id"],Ie={class:"avatar-badges"},ke=["id","value"],Ce=["for"],De=["src","alt"],Oe={class:"avatar-selection__footer"},we=["disabled"],Ae=$({__name:"AvatarSelectionStep",props:{config:{}},setup(d){const c=d,s=window.onexpGlobalStores.profileStore.getState().getAvatars(),t=O("onboardingState"),e=O("generalLabels"),_=O("onboardingActions");W(()=>{!t.value.stepsData["avatar-selection"].avatarId&&s.length>0&&_.selectAvatar(s[0]),_.createProfile()});const g=async()=>{const f=t.value.stepsData["avatar-selection"];f?.avatarUrl&&T("avatar","select_avatar",void 0,f.avatarUrl),await _.goToNextStep({completed:!0})},{dialogDetailsId:r,dialogHeadingId:u,onDialogOpen:y}=x(),S=A([]),h=()=>{if(!S.value.length)return;const f=t.value.stepsData["avatar-selection"].avatarId;(S.value.find(a=>a.id===f)??S.value[0]).focus()};return y(()=>{h()}),(f,w)=>(l(),m("div",be,[o("div",Se,[o("h2",{id:n(u),class:"avatar-selection__title"},v(c.config.stepTitle),9,ye),o("p",{id:n(r),class:"avatar-selection__description"},v(c.config.stepSubtitle),9,he)]),o("div",Ie,[(l(!0),m(G,null,H(n(s),a=>(l(),m("div",{key:a.avatarId,class:"avatar-badge"},[V(o("input",{id:a.avatarId,ref_for:!0,ref_key:"avatarInputRefs",ref:S,"onUpdate:modelValue":w[0]||(w[0]=C=>n(t).stepsData["avatar-selection"].avatarId=C),type:"radio",name:"badge",value:a.avatarId},null,8,ke),[[z,n(t).stepsData["avatar-selection"].avatarId]]),o("label",{for:a.avatarId},[o("img",{src:a.avatarUrl,alt:a.avatarAlt},null,8,De)],8,Ce)]))),128))]),o("div",Oe,[o("button",{class:E(["button-primary",{loading:n(t)?.isLoading}]),disabled:!n(t)?.stepsData["avatar-selection"]?.avatarId||n(t)?.isLoading,onClick:g},v(n(e).continueButtonText),11,we)])]))}}),Pe=N(Ae,[["__scopeId","data-v-ba018596"]]),$e={class:"username-selection"},Ne={class:"username-selection__header"},Le={key:0,class:"username-selection__avatar-display"},Ue=["src","alt"],Be=["id"],Ge=["id"],Ee={class:"username-selection__content"},xe={class:"lb-username-generator"},Re={key:0,class:"lb-username-generator__user-label"},Te={key:2,class:"lb-username-generator__username"},Fe=["disabled"],Me={class:"username-selection__footer"},qe={key:0,class:"error-text"},We=["disabled"],He=$({__name:"UsernameSelectionStep",props:{config:{}},setup(d){const c=d,i=O("onboardingState"),p=O("generalLabels"),s=O("onboardingActions"),t=I(()=>i.value.stepsData["avatar-selection"]),e=I(()=>!!i.value.error),_=async()=>{T("username","regenerate_username"),S(!0);try{await s.regenerateUsername()}finally{S(!1)}},g=async()=>

1{if(i.value.error=null,i.value?.stepsData["username-selection"]){const f=i.value.stepsData["username-selection"].username;f&&T("username","select_username",f),await s.goToNextStep({completed:!0})}},{dialogDetailsId:r,dialogHeadingId:u,onDialogOpen:y,toggleContentBusy:S}=x(),h=A(null);return y(()=>{h.value?.focus()}),(f,w)=>(l(),m("div",$e,[o("div",Ne,[t.value?(l(),m("div",Le,[o("img",{src:t.value.avatarUrl,alt:t.value.avatarAlt,class:"username-selection__avatar-image"},null,8,Ue)])):k("",!0),o("h2",{id:n(u),class:"username-selection__title"},v(c.config.stepTitle),9,Be),o("p",{id:n(r),class:"username-selection__description"},v(c.config.stepSubtitle),9,Ge)]),o("div",Ee,[o("div",xe,[c.config.generatedUsernameLabel?(l(),m("p",Re,v(c.config.generatedUsernameLabel),1)):k("",!0),n(i)?.isLoading?(l(),D(re,{key:1})):(l(),m("p",Te,v(n(i)?.stepsData["username-selection"]?.username),1))]),c.config.usernameRegenerateButtonText?(l(),m("button",{key:0,ref_key:"regenerateUsernameButton",ref:h,class:"button-tertiary lb-username-generator__regenerate-button",disabled:n(i)?.isLoading,onClick:_},v(c.config.usernameRegenerateButtonText),9,Fe)):k("",!0)]),o("div",Me,[e.value?(l(),m("p",qe,v(n(p).errorMessage),1)):k("",!0),o("button",{class:E(["button-primary",{loading:n(i)?.isProfileSaving}]),disabled:!n(i)?.stepsData["username-selection"]||n(i)?.isLoading||n(i)?.isProfileSaving,onClick:g},v(n(p).continueButtonText),11,We)])]))}}),Ve=N(He,[["__scopeId","data-v-f5e369d6"]]),ze=(d,c)=>d.some(i=>i.type===c),Qe={class:"summary-step__container"},je={key:0,class:"summary-step__avatar"},Je=["src","alt"],Xe={class:"summary-step__text-container"},Ye=["id"],Ze=["id"],Ke={key:2,class:"summary-step__currency-card"},et={class:"summary-step__currency-content"},tt=["src","alt"],at={class:"summary-step__currency-info"},nt={class:"summary-step__currency-title"},ot={key:0,class:"summary-step__currency-description"},st={class:"summary-step__footer"},rt=["href"],it="/content/dam/onexp/global/icons/brand-expression/thumb-up-bx.svg",lt=$({__name:"SummaryStep",props:{config:{}},setup(d){const c=d,i=O("onboardingState"),p=O("onboardingActions"),s=O("stepsConfig",[]),t=I(()=>ze(s,"avatar-selection")),e=I(()=>t.value&&!!i.value?.stepsData?.["avatar-selection"]?.avatarUrl),_=I(()=>i.value?.stepsData?.["avatar-selection"]?.avatarUrl||""),g=I(()=>i.value?.stepsData?.["avatar-selection"]?.avatarAlt||""),r=I(()=>i.value?.grantedCurrencies||[]),u=I(()=>r.value.reduce((b,B)=>b+B.amount,0)),y=I(()=>r.value[0]||null),S=I(()=>y.value?.currencyIcon||""),h=I(()=>y.value?.currencyName||""),f=b=>b?b.replace(/\{\{total_amount\}\}/g,String(u.value)).replace(/\{\{currency_name\}\}/g,h.value):"",w=async()=>{c.config.primaryButtonUrl?window.location.href=c.config.primaryButtonUrl:await p.goToNextStep({completed:!0})},{dialogDetailsId:a,dialogHeadingId:C,onDialogOpen:P}=x(),L=A(null);return P(()=>{L.value?.focus()}),(b,B)=>(l(),m("div",{class:E(["summary-step",{"summary-step--with-avatar":e.value}])},[o("div",Qe,[e.value?(l(),m("div",je,[o("img",{src:_.value,alt:g.value,class:"summary-step__avatar-image"},null,8,Je)])):(l(),m("img",{key:1,src:it,alt:"Success",class:"summary-step__success-icon"})),o("div",Xe,[o("h2",{id:n(C),class:"summary-step__title"},v(f(b.config.stepTitle)),9,Ye),b.config.stepDescription?(l(),m("p",{key:0,id:n(a),class:"summary-step__description"},v(f(b.config.stepDescription)),9,Ze)):k("",!0)]),u.value>0?(l(),m("div",Ke,[o("div",et,[S.value?(l(),m("img",{key:0,src:S.value,alt:h.value,class:"summary-step__currency-icon"},null,8,tt)):k("",!0),o("div",at,[o("span",nt,v(f(b.config.grantedCurrencyTitle)),1),b.config.grantedCurrencyDescription?(l(),m("span",ot,v(f(b.config.grantedCurrencyDescription)),1)):k("",!0)])])])):k("",!0)]),o("div",st,[o("button",{ref_key:"primaryActionButton",ref:L,class:"button-primary",onClick:w},v(b.config.primaryButtonLabel),513),b.config.secondaryLinkLabel&&b.config.secondaryLinkUrl?(l(),m("a",{key:0,href:b.config.secondaryLinkUrl,class:"summary-step__secondary-link button-tertiary"},v(b.config.secondaryLinkLabel),9,rt)):k("",!0)])],2))}}),ct=N(lt,[["__scopeId","data-v-1c0f0128"]]),ut=(d,c)=>{const p=window.onexpGlobalStores.profileStore.getState(),t=window.onexpGlobalStores.onboardingStore.getState(),e=A({currentStep:d.stepsConfig[0].type||"avatar-selection",currentStepIndex:0,totalSteps:d.stepsConfig.length,stepsData:{"avatar-selection":{}},grantedCurrencies:[],isLoading:!1,isProfileSaving:!1,isProfileCreated:!1,error:null}),_=I(()=>{switch(e.value.currentStep){case"avatar-selection":return!!e.value.stepsData["avatar-selection"];case"username-selection":return!!e.value.stepsData["username-selection"];case"enrichment-question":case"push-notification":case"summary":return!0;default:return!1}}),g=a=>{t.markQuestionAnswered(a)},r=async a=>{const C=e.value.currentStepIndex===e.value.totalSteps-1,P=d.stepsConfig[e.value.currentStepIndex]?.id,L="skipped"in a&&a.skipped,b="completed"in a&&a.completed;if(e.value.currentStep==="summary"){c();return}if(e.value.currentStep==="username-selection"){const{success:B}=await h();if(!B)return}L?await t.markStepSkipped(P):await t.markStepCompleted(P),!C&&_.value&&(e.value.currentStepIndex++,e.value.currentStep=d.stepsConfig[e.value.currentStepIndex].type),(b||L)&&C&&c()},u=a=>{e.value.stepsData["avatar-selection"].avatarId=a.avatarId,e.value.error=null},y=async()=>

1{if(!e.value.isProfileCreated)try{await p.createProfileData();const a=p.getProfileData();e.value.stepsData["username-selection"]={username:a.username},e.value.isProfileCreated=!0}catch(a){console.error("Failed to create profile:",a)}},S=async()=>{e.value.isLoading=!0;try{const a=await p.regenerateUsername();a.username&&(e.value.stepsData["username-selection"]={usernameId:a.usernameId,username:a.username})}catch(a){console.error("Failed to regenerate username:",a)}finally{e.value.isLoading=!1}},h=async()=>{e.value.isProfileSaving=!0;try{await p.saveProfileData({username:e.value.stepsData["username-selection"]?.username,usernameId:e.value.stepsData["username-selection"]?.usernameId,avatarId:e.value.stepsData["avatar-selection"]?.avatarId});const a=p.getProfileGrantedCurrencies();return a.length>0&&(e.value.grantedCurrencies=a),{success:!0}}catch(a){return console.error("Failed to save profile:",a),e.value.error="Failed to save profile. Please try again.",{success:!1}}finally{e.value.isProfileSaving=!1}},f=a=>{e.value.error=a},w=a=>{e.value.isLoading=a};return Q(()=>{const C=p.getAvatars().find(P=>P.avatarId===e.value.stepsData["avatar-selection"].avatarId);C&&(e.value.stepsData["avatar-selection"].avatarUrl=C.avatarUrl,e.value.stepsData["avatar-selection"].avatarAlt=C.avatarAlt)}),{state:e,actions:{goToNextStep:r,selectAvatar:u,createProfile:y,regenerateUsername:S,sendEnrichmentSelection:X,setError:f,setLoading:w,markQuestionAnswered:g}}},dt={class:"user-onboarding__content"},pt=$({__name:"OnboardingSteps",props:{config:{}},emits:["complete"],setup(d,{emit:c}){const i=d,p=c,s=()=>{p("complete")},{state:t,actions:e}=ut(i.config,s);return U("onboardingState",t),U("onboardingActions",e),U("generalLabels",i.config.labels),U("stepsConfig",i.config.stepsConfig),(_,g)=>(l(),m(G,null,[n(t).totalSteps>1?(l(),D(le,{key:0,"current-step":n(t).currentStepIndex+1,"total-steps":n(t).totalSteps},null,8,["current-step","total-steps"])):k("",!0),o("div",dt,[(l(!0),m(G,null,H(i.config.stepsConfig,(r,u)=>(l(),m(G,null,[r.type==="avatar-selection"&&u===n(t).currentStepIndex?(l(),D(Pe,{key:`avatar-selection-${u}`,config:r},null,8,["config"])):r.type==="username-selection"&&u===n(t).currentStepIndex?(l(),D(Ve,{key:`username-selection-${u}`,config:r},null,8,["config"])):r.type==="enrichment-question"&&u===n(t).currentStepIndex?(l(),D(se,{key:`enrichment-question-${u}`,config:r,"is-in-modal":""},null,8,["config"])):r.type==="push-notification"&&u===n(t).currentStepIndex?(l(),D(ie,{key:`push-notification-${u}`,config:r},null,8,["config"])):r.type==="summary"&&u===n(t).currentStepIndex?(l(),D(ct,{key:`summary-${u}`,config:r},null,8,["config"])):k("",!0)],64))),256))])],64))}}),gt=N(pt,[["__scopeId","data-v-b9b4fb71"]]),mt=$({__name:"UserOnboardingApp",props:{config:{},welcomeScreenConfig:{},onCompleteCallback:{type:Function}},setup(d){const c=d,p=window.onexpGlobalStores.profileStore.getState(),s=A({type:"INIT"}),t=A(c.config),e=async()=>{s.value.type="ONBOARDING_CONFIG_LOADING";try{t.value=R();const h=window.onexpGlobalStores.onboardingStore.getState(),[f]=await Promise.all([h.fetchOnboardingSteps(),p.fetchAvatarsData()]);t.value.stepsConfig=f,s.value.type="ONBOARDING"}catch{s.value.type="ERROR"}},{requestOpenDialog:_,requestCloseDialog:g,setDialogRef:r}=ne({name:"user-onboarding",priority:"auto"}),u=()=>{g(),c.onCompleteCallback()},y=async()=>{await window.onexpGlobalStores.onboardingStore.getState().markOnboardingSkipped(),u()};return W(()=>{c.welcomeScreenConfig?s.value={type:"WELCOME_SCREEN"}:s.value={type:"ONBOARDING"},j(()=>_())}),U("appState",s),(S,h)=>(l(),D(oe,{class:"user-onboarding","dialog-ref-assn-fn":n(r),"close-modal":n(g),"hide-close-button":""},{default:J(()=>[s.value.type==="WELCOME_SCREEN"||s.value.type==="ONBOARDING_CONFIG_LOADING"?(l(),D(fe,{key:0,config:S.welcomeScreenConfig,"handle-setup-profile":e,"handle-skip":y},null,8,["config"])):s.value.type==="ONBOARDING"?(l(),D(gt,{key:1,config:t.value,onComplete:u},null,8,["config"])):k("",!0)]),_:1},8,["dialog-ref-assn-fn","close-modal"]))}}),M=N(mt,[["__scopeId","data-v-ebc62e40"]]),vt="userOnboarding",q=()=>{const d=document.createElement("div");return d.id=`${vt}-${Date.now()}`,document.body.appendChild(d),d};(()=>{const d=async()=>{const s=q(),t=F(M,{welcomeScreenConfig:te(),onCompleteCallback:()=>{t.unmount(),s.remove()}});t.mount(s)},c=async()=>{try{const t=window.onexpGlobalStores.profileStore.getState(),_=window.onexpGlobalStores.onboardingStore.getState(),g=R(),[r]=await Promise.all([_.fetchOnboardingSteps(),t.fetchAvatarsData()]);if(g.stepsConfig=r,g.stepsConfig.length>0){const u=q(),y=F(M,{config:g,onCompleteCallback:()=>{y.unmount(),u.remove()}});y.mount(u)}else ae.log("No steps required for current user")}catch(s){console.error("Failed to initialize User Onboarding App:",s)}},i=async()=>{ee()?await d():await c()},p=async()=>{const s=Z("user-onboarding");K(s,()=>{const e=window.onexpGlobalStores.onboardingStore.getState(),_=R(),g=e.isOnboardingSkipped(),r=document.querySelector("[data-onboarding-skip]");!_||g||r||i()})};Y.registerComponent({name:"User Onboarding",mount:p})})();export{vt as APP_ID};