https://agora.gentlemenoftheroad.com/_next/static/chunks/pages/promote/design-pass-5c9dbc31c585bf5c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[329],{16230:(e,o,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/promote/design-pass",function(){return n(83779)}])},49978:(e,o,n)=>{"use strict";n.d(o,{n:()=>i});var s=n(75834);let i=()=>{let[e,o]=(0,s.useState)("undefined"==typeof navigator||"boolean"!=typeof navigator.onLine||navigator.onLine),n=()=>o(!0),i=()=>o(!1);return(0,s.useEffect)(()=>(window.addEventListener("online",n),window.addEventListener("offline",i),()=>{window.removeEventListener("online",n),window.removeEventListener("offline",i)}),[]),e}},83779:(e,o,n)=>{"use strict";n.r(o),n.d(o,{__N_SSG:()=>k,default:()=>X});var s=n(26514),i=n(47977),t=n.n(i),a=n(75834),r=n(66998),l=n(99518),c=n(57355),d=n(4580),m=n(50812),u=n(49839),p=n(2781),h=n(86780),g=n(87674),x=n(70096),f=n(46225),y=n(88048),v=n(93260),j=n(26599),b=n(70260),w=n.n(b),E=n(33909),C=n.n(E);let N=[{name:"Fairer access to tickets"},{name:"Access to exclusive merch"},{name:"More insight into the creative process"}],S=["#c52974","#9a86ca","#b8b9b0"];var k=!0;let X=()=>{var e,o,n,i;let b=new(w()),{addMessage:E}=(0,u.u)(),{query:k,isReady:X,push:P}=(0,f.useRouter)(),[_,L]=(0,a.useState)(""),[z,J]=(0,a.useState)(""),[A,$]=(0,a.useState)(""),{data:I,error:B,loading:M}=(0,m.IT)(x.ow,{variables:{id:k.promoId},skip:!X}),{colors:U=[]}=(0,j.A)(null==I||null==(e=I.artistPromotion)?void 0:e.imageUrl,{cors:!0,colors:3}),G=U.map(e=>C()(e).hex),T=[...[...U,...G].filter(e=>b.isLevelAA(c.Jy.black,e,14)),...S].splice(0,3),[R,{loading:K,data:q}]=(0,m.n_)(y.w);(0,a.useEffect)(()=>{B&&E({title:B.message,timeout:8e3,emoji:"⚠️",backgroundColor:c.Jy.turquoise})},[B]),(0,a.useEffect)(()=>{q&&P("/promote/share-pass?promoId=".concat(k.promoId))},[q]),(0,a.useEffect)(()=>{if(!M&&(null==I?void 0:I.artistPromotion)){var e,o,n;L((null==I||null==(n=I.artistPromotion)||null==(o=n.passNameSuggestions)||null==(e=o[0])?void 0:e.name)||""),$(N[0].name)}},[M,I]),(0,a.useEffect)(()=>{T&&J(T[0])},[T[0]]);let D=null==I||null==(o=I.artistPromotion)?void 0:o.artistName;return(0,s.jsxs)(r.l,{loading:M,loadingText:"Generating pass suggestions...",showSpotifyLogo:!0,children:[(0,s.jsxs)("div",{className:"jsx-535172c8c62fa303 index-page",children:[(0,s.jsxs)("div",{className:"jsx-535172c8c62fa303 top-content",children:[(0,s.jsxs)(l.E,{size:c.s.M,bold:!0,color:c.Jy.white,children:["You’re ready to design the ",D," pass! Choose from the options below and make it your own."]}),(0,s.jsx)(d.X,{size:"XXL"}),(0,s.jsxs)(h.A,{style:{marginBottom:c.Kz.S,width:"100%"},accessibilityRole:"radiogroup",accessibilityLabel:"Pass names",children:[(0,s.jsx)(l.E,{size:c.s.XS,bold:!0,color:c.Jy.white,children:"What should the name of the pass be?"}),(0,s.jsx)(d.X,{size:"M"}),!!I&&(null==(n=I.artistPromotion)?void 0:n.passNameSuggestions.map(e=>{let o=(null==e?void 0:e.name)===_;return(0,s.jsxs)(h.A,{style:{marginBottom:c.Kz.S},children:[(0,s.jsx)(p.a,{checked:o,onChecked:e=>{L(e)},value:null==e?void 0:e.name,accessibilityLabel:null==e?void 0:e.name,iconPosition:"right-center",checkedIconColor:c.Jy.white,checkedBorderColor:c.Jy.white,defaultBorderColor:c.Jy.midGrey,children:(0,s.jsx)(h.A,{children:(0,s.jsx)(l.E,{size:c.s.XS,bold:!0,color:o?c.Jy.white:c.Jy.midGrey,children:null==e?void 0:e.name})})}),o&&(0,s.jsx)(l.E,{size:c.s.XS,color:"white",style:{marginTop:"12px",marginLeft:"5px"},children:e.explanation})]},null==e?void 0:e.name)}))]})]}),(0,s.jsx)(d.X,{size:"XXXL"}),(0,s.jsxs)(h.A,{style:{width:"100%"},accessibilityRole:"radiogroup",accessibilityLabel:"Pass names",children:[(0,s.jsx)(l.E,{size:c.s.XS,bold:!0,color:c.Jy.white,children:"Let ".concat(D," know why you’d like them to use the ").concat(_," pass.")}),(0,s.jsx)(d.X,{size:"M"}),N.map(e=>{let o=(null==e?void 0:e.name)===A;return(0,s.jsx)(h.A,{style:{marginBottom:c.Kz.S},children:(0,s.jsx)(p.a,{checked:o,onChecked:e=>{$(e)},value:null==e?void 0:e.name,accessibilityLabel:null==e?void 0:e.name,iconPosition:"right-center",checkedIconColor:c.Jy.white,checkedBorderColor:c.Jy.white,defaultBorderColor:c.Jy.midGrey,children:(0,s.jsx)(h.A,{children:(0,s.jsx)(l.E,{size:c.s.XS,bold:!0,color:o?c.Jy.white:c.Jy.midGrey,children:null==e?void 0:e.name})})})},null==e?void 0:e.name)})]}),(0,s.jsx)(d.X,{size:"L"}),(0,s.jsxs)("div",{className:"jsx-535172c8c62fa303 color-selector",children:[(0,s.jsx)(l.E,{size:c.s.XS,bold:!0,color:c.Jy.white,children:"Choose your favourite colour"}),(0,s.jsx)("div",{className:"jsx-535172c8c62fa303 color-selector-radio-group",children:T.map(e=>(0,s.jsx)(p.a,{checked:z===e,onChecked:e=>{J(e)},value:e,testID:"",style:{backgroundColor:e},accessibilityLabel:"",iconPosition:"middle",checkedIconColor:"#fff"},e))})]}),(0,s.jsx)(d.X,{size:"XXXL"}),(0,s.jsx)(g.ShareablePassForSocial,{passName:_,artistName:D||"",textColor:z,artistImage:(null==I||null==(i=I.artistPromotion)?void 0:i.imageUrl)||""}),(0,s.jsx)(d.X,{size:"L"}),(0,s.jsx)("div",{style:{paddingBottom:"1rem"},className:"jsx-535172c8c62fa303",children:(0,s.jsx)(v.b,{loading:K,themeColor:c.Jy.turquoise,onPress:()=>{R({variables:{id:k.promoId,passName:_,passColor:z,passExplanation:A}})},children:"Next"})})]}),(0,s.jsx)(t(),{id:"535172c8c62fa303",children:".index-page.jsx-535172c8c62fa303{display:flex;flex-direction:column;height:100%;justify-content:space-between}.bottom-content.jsx-535172c8c62fa303{position:sticky;margin:auto;bottom:0px}.color-selector.jsx-535172c8c62fa303{margin-top:20px}.color-selector-radio-group.jsx-535172c8c62fa303{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}"})]})}},88048:(e,o,n)=>{"use strict";n.d(o,{d:()=>r,w:()=>l});var s=n(2318),i=n(73124);function t(){let e=(0,s._)(["\n  mutation CreateArtistPromotionMutation(\n    $artistName: String!\n    $imageUrl: String\n  ) {\n    createArtistPromotion(artistName: $artistName, imageUrl: $imageUrl) {\n      code\n      success\n      message\n      artistPromotion {\n        id\n      }\n      errors {\n        __typename\n        ... on Error {\n          message\n        }\n        ... on ValidationError {\n          path\n        }\n      }\n    }\n  }\n"]);return t=function(){return e},e}function a(){let e=(0,s._)(["\n  mutation UpdateArtistPromotion(\n    $id: ID!\n    $passColor: String!\n    $passName: String!\n    $passExplanation: String!\n  ) {\n    updateArtistPromotion(\n      id: $id\n      passColor: $passColor\n      passName: $passName\n      passExplanation: $passExplanation\n    ) {\n      code\n      success\n      message\n      artistPromotion {\n        id\n        artistName\n        imageUrl\n        passColor\n        passName\n        passExplanation\n      }\n      errors {\n        __typename\n        ... on Error {\n          message\n        }\n        ... on ValidationError {\n          path\n        }\n      }\n    }\n  }\n"]);return a=function(){return e},e}let r=(0,i.Ay)(t()),l=(0,i.Ay)(a())},93260:(e,o,n)=>{"use strict";n.d(o,{b:()=>r});var s=n(26514);n(75834);var i=n(66720),t=n(49978),a=n(61525);let r=e=>{let{children:o,onPress:n,dark:r,loading:l,disabled:c,themeColor:d,buttonRef:m,loadingText:u,progressBarColor:p}=e,h=(0,t.n)(),{t:g}=(0,a.Bd)("forms");return(0,s.jsx)(i.pS,{onPress:n,loadingText:u||g("buttons.loadingMessage"),offlineMessage:g("buttons.offlineMessage"),dark:r,offline:!h,loading:l,disabled:c,themeColor:d,buttonRef:m,progressBarColor:p,children:o})}}},e=>{e.O(0,[4325,8245,7798,7674,636,6593,8792],()=>e(e.s=16230)),_N_E=e.O()}]);