https://www.teliaplay.se/oneweb/profiles-create-view.7baf1161.js

1"use strict";(globalThis.webpackChunk_telia_company_tv_web_logged_in=globalThis.webpackChunk_telia_company_tv_web_logged_in||[]).push([[488],{"./src/profiles/components/Avatar/index.ts"(e,t,r){r.d(t,{e:()=>s.e});var s=r("./src/profiles/components/Avatar/Avatar.tsx")},"./src/profiles/components/AvatarSelector/index.ts"(e,t,r){r.d(t,{p:()=>b});var s=r("../../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_react-_23af7fe1a84405345a895683eefe299d/node_modules/@apollo/client/react/hooks/useQuery.js"),a=r("./src/codegen/graphql.ts"),o=r("./src/profiles/hooks/useProfileSupport.ts"),n=r("./src/profiles/views/styles.ts"),i=r("./src/shared/components/ui/Button/index.ts"),d=r("../../../node_modules/.pnpm/[email protected]/node_modules/react/index.js"),l=r("../../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/react-i18next/dist/es/index.js"),c=r("./src/profiles/components/Avatar/index.ts"),p=r("../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_support_a0dcb4b0ae680db98626d6fd11a2b9d9/node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js"),m=r("./src/profiles/components/Avatar/Avatar.styles.ts"),u=r("./src/shared/components/custom/MarginContainer/index.ts"),_=r("./src/shared/constants/zindex.ts"),h=r("./src/shared/utils/breakpoints/mq.ts");const f=(0,p.A)(u._,{target:"eyzrmiz2"})({name:"1bqvcm9",styles:"display:flex;justify-content:center;flex-direction:column;align-items:center"}),x=(0,p.A)("button",{target:"eyzrmiz1"})("z-index:",_.M.PROFILES.PROFILE_PIC,";position:relative;background-color:transparent;width:96px;height:96px;padding:0;border:none;transition:transform 0.2s;:hover,:focus{transform:scale(1.1);}",h.mq.S`
2      width: 136px;
3      height: 136px;
4    `," ",h.mq.M`
5      width: 152px;
6      height: 152px;
7    `," ",m.wU,"{width:100%;height:100%;}"),g=(0,p.A)("ul",{target:"eyzrmiz0"})("display:grid;gap:24px 16px;max-width:100%;grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));margin-top:24px;list-style:none;",h.mq.S`
8    gap: 24px;
9    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
10  `," ",h.mq.M`
11    gap: 24px;
12    margin-top: 48px;
13    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
14  `," ",h.mq.L`
15  grid-template-columns: repeat(5, 152px);
16  `,";");var v=r("../../../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");const b=({onAbort:e,onSave:t,previousAvatarId:r})=>{const{t:p}=(0,l.Bd)(),{pageMargin:m}=(0,o.u)(),{data:u}=(0,s.I)(a.n$r),_=(0,d.useCallback)(r=>{t({selectedAvatarId:r}),e()},[e,t]);if(!u)return null;const h=u.uiResources.profile.avatars;return(0,v.FD)(f,{children:[(0,v.Y)(n.A1,{children:p("PROFILES_SELECT_AVATAR")}),h&&(0,v.Y)(g,{role:"list",children:h.map(e=>(0,v.Y)("li",{children:(0,v.Y)(x,{"aria-current":e.id===r,"aria-label":e.altText,onClick:()=>_(e.id),children:(0,v.Y)(c.e,{imageSrc:e.square.source,isSelected:e.id===r,variant:"picker"})})},e.id))}),(0,v.Y)(n.NP,{margin:m,children:(0,v.Y)(i.$,{"data-testid":"abort-select-profile-button",onClick:e,type:"button",variant:"secondary",children:p("CANCEL")})})]})}},"./src/profiles/components/Buttons/EditAvatarButton.tsx"(e,t,r){r.d(t,{w:()=>l});var s=r("../../../node_modules/.pnpm/[email protected]/node_modules/react/index.js"),a=r("../../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/react-i18next/dist/es/index.js"),o=r("../../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-62JRHF6Z.mjs"),n=r("./src/profiles/components/Avatar/index.ts"),i=r("./src/profiles/components/Buttons/Buttons.styles.ts"),d=r("../../../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");const l=({altText:e,href:t,imageSrc:r,isCurrent:l,onClick:c})=>{const{t:p}=(0,a.Bd)(),m=(0,s.useId)();return(0,d.FD)(i.D,{"aria-describedby":m,"aria-label":p("PROFILES_SELECT_AVATAR"),as:o.N_,"data-testid":"edit-avatar-button",href:t,onClick:c,shouldHover:!0,children:[(0,d.Y)(n.e,{imageSrc:r,isSelected:l,variant:"editAvatar"}),(0,d.Y)("span",{hidden:!0,id:m,children:e})]})}},"./src/profiles/views/ProfileCreateView/ProfileCreateView.tsx"(e,t,r){r.r(t),r.d(t,{default:()=>R});var s=r("../../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_react-_23af7fe1a84405345a895683eefe299d/node_modules/@apollo/client/react/hooks/useQuery.js"),a=r("./src/codegen/graphql.ts"),o=r("./src/profiles/components/Buttons/EditAvatarButton.tsx"),n=r("./src/profiles/providers/UserProvider/UserProvider.tsx"),i=r("./src/shared/components/custom/DecoratedHelmet.tsx"),d=r("./src/shared/components/custom/FadeContainer/index.ts"),l=r("./src/shared/components/custom/Navbar/index.ts"),c=r("./src/shared/components/ui/Switch/index.ts"),p=r("./src/shared/hooks/useTrackPageViewEvent.ts"),m=r("./src/shared/utils/isDefined.ts"),u=r("../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_f734d82c55a697af95f95e7d1443e8d9/node_modules/@telia-company/tv.one-design-system-web/lib/index.js"),_=r("../../../node_modules/.pnpm/[email protected]/node_modules/react/index.js"),h=r("../../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/react-i18next/dist/es/index.js"),f=r("../../../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-62JRHF6Z.mjs"),x=r("./src/profiles/components/AvatarSelector/index.ts"),g=r("./src/profiles/hooks/useProfileSupport.ts"),v=r("./src/profiles/routes.tsx");var b=r("./src/profiles/views/constants.tsx"),y=r("./src/profiles/views/styles.ts"),w=r("../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_support_a0dcb4b0ae680db98626d6fd11a2b9d9/node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js"),A=r("./src/shared/utils/breakpoints/mq.ts");const E=(0,w.A)("div",{target:"e17lwfd2"})("width:100%;",A.mq.S`
17    margin: 0 auto;
18    max-width: 416px;
19  `,";"),S=(0,w.A)("form",{target:"e17lwfd1"})({name:"zigog8",styles:"display:flex;flex-direction:column;align-items:center"}),I=(0,w.A)("div",{target:"e17lwfd0"})({name:"l4o35b",styles:"width:100%;display:flex;justify-content:space-between;box-sizing:border-box;align-items:center"});var P=r("../../../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");const R=()=>{(0,p.z)({id:"profiles_create"});const{t:e}=(0,h.Bd)(),t=(0,_.useRef)(null),[r,w]=(0,_.useState)(""),[A,R]=(0,_.useState)(a.P2Z.Adult),[C,F]=(0,_.useState)(),[k,O]=(0,_.useState)(!1),[j,L]=(0,_.useState)(!1),{createProfile:Y,profiles:q}=(0,n.u)(),{pageMargin:D}=(0,g.u)(),{data:T,loading:z}=(0,s.I)(a.n$r),[B,M]=(0,_.useState)(!1),N=(0,_.useId)(),V=(0,_.useId)();(0,_.useEffect)(()=>

19{if(!(0,m.O)(q))return;const e=(({availableAvatarsData:e,profiles:t})=>{const r=t?.map(e=>e.avatar.id)||[],s=e?.uiResources.profile.avatars||[],a=s?.find(e=>!r.includes(e.id))?.id;if(a)return a;const o=r.length%s.length;return s[o]?.id||""})({availableAvatarsData:T,profiles:q});F(e)},[q,T]);const Z=(0,_.useCallback)(e=>{e.preventDefault(),r&&C?(Y({ageGroup:A,alias:r,avatarId:C}),L(!0)):M(!0)},[A,r,C,Y]);if((0,l.st)({addOffsetTop:!0,showMenuItems:!1,solidBackground:!0}),j)return(0,P.Y)(f.C5,{to:v.i.DEFAULT});const H=T?.uiResources.profile.avatars.find(({id:e})=>e===C)?.square.source,U=T?.uiResources.profile.avatars.find(({id:e})=>e===C)?.altText;if(z)return null;const J=t.current?.clientHeight||0;return(0,P.FD)(d.y,{"data-testid":"profiles-create-view",children:[(0,P.Y)(i.J,{title:e("PROFILES_CREATE_PROFILE")}),!k&&(0,P.Y)(P.FK,{children:(0,P.FD)(y.Rx,{bottomMargin:J,children:[(0,P.Y)(y.A1,{children:e("PROFILES_CREATE_PROFILE")}),(0,P.FD)(E,{children:[(0,P.Y)(y.wU,{children:(0,P.Y)(o.w,{altText:U,imageSrc:H,isCurrent:!1,onClick:()=>O(!0)})}),(0,P.FD)(S,{"data-testid":"profile-create-form",children:[(0,P.Y)(y.sQ,{autoComplete:"name",characterCount:r?.length,"data-testid":"profile-alias-input",hasError:B,id:"profile-alias",label:e("PROFILES_PROFILE_NAME","Profilnamn"),maxCharacterLength:b.j,name:e("PROFILES_PROFILE_NAME","Profilnamn"),onChange:e=>B?M(!1):w(e.target.value.slice(0,b.j)),showEditIcon:0===r.length,type:"text",value:r}),B&&(0,P.FD)(y.df,{"aria-live":"polite",role:"alert",children:[(0,P.Y)(y.Zi,{"aria-hidden":"true",color:u.ue.color.text.error,name:"WarningFill"}),(0,P.Y)(y.jQ,{children:e("PROFILES_INPUT_ERROR")})]}),(0,P.FD)(I,{children:[(0,P.Y)("label",{htmlFor:N,children:e("PROFILES_CHILD_PROFILE")}),(0,P.Y)(c.d,{"data-testid":"child-profile-switch",descriptionId:V,id:N,name:e("PROFILES_CHILD_PROFILE"),onValueChange:()=>R(A===a.P2Z.Child?a.P2Z.Adult:a.P2Z.Child),value:A===a.P2Z.Child})]}),(0,P.Y)(I,{children:(0,P.Y)(y.yO,{id:V,children:e("PROFILES_KIDS_INFO_REFER_TO_WEB_VS_2")})}),(0,P.FD)(y.iN,{margin:D,ref:t,children:[(0,P.Y)(y.OV,{"aria-disabled":!r,"data-testid":"update-profile-submit-button",onClick:Z,type:"submit",variant:"primary",children:e("SAVE")}),(0,P.Y)(y.OV,{"data-testid":"abort-update-profile-button",onClick:()=>L(!0),type:"button",variant:"secondary",children:e("CANCEL")})]})]})]})]})}),k&&(0,P.Y)(x.p,{onAbort:()=>O(!1),onSave:({selectedAvatarId:e})=>F(e),previousAvatarId:C})]})}},"./src/profiles/views/constants.tsx"(e,t,r){r.d(t,{j:()=>s});const s=14},"./src/shared/hooks/useTrackPageViewEvent.ts"(e,t,r){r.d(t,{z:()=>n});var s=r("./src/core/analytics/tracker.ts"),a=r("./src/core/router/hooks/useIsModalRouteOpen/index.ts"),o=r("../../../node_modules/.pnpm/[email protected]/node_modules/react/index.js");const n=(e,t)=>{const{isModalRouteOpen:r}=(0,a.u)(),n=(0,o.useRef)("");(0,o.useLayoutEffect)(()=>{const a=e&&n.current===JSON.stringify(e);r||a||t||!e||(s.F.trackPage({page_name:e,page_variant:"page"}),n.current=JSON.stringify(e))},[r,e,t])}}}]);