{"version":3,"sources":["webpack:///./Avensia.Common/Features/Account/MyPages/MyDetails/index.tsx"],"names":["props","toggleSection","setState","isSectionOpen","state","toggleCheckbox","unsubscribeNewsletter","deleteAccount","this","includeAppShellData","errorMessage","Promise","reject","render","firstName","lastName","email","address1","city","postalCode","fullName","for","page","mainContent","DetailsWrapper","Details","DetailsHeader","ToggleDelete","appearance","Bare","onClick","DeleteAccountWrapper","Warning","ConfirmMessage","DeleteAccount","Tertiary","UnsubscribeWrapper","CustomChecbox","checked","onChange","CheckboxText","div","marginTop","width","display","flexWrap","justifyContent","borderBottom","style","color","paddingBottom","p","fontWeight","padding","xy","x","textTransform","alignItems","marginRight","span","cursor"],"mappings":"8LAuBA,cACE,WAAYA,GAAZ,MACE,YAAMA,IAAM,K,OASd,EAAAC,cAAgB,WACd,OAAO,EAAKC,SAAS,CAAEC,eAAgB,EAAKC,MAAMD,iBAGpD,EAAAE,eAAiB,WACf,OAAO,EAAKH,SAAS,CAAEI,uBAAwB,EAAKF,MAAME,yBAG5D,EAAAC,cAAgB,0D,4DACK,SAAM,aACvB,qDAAqDC,KAAKJ,MAAME,wB,OAGlE,OAJmB,UAKjB,aAAa,IAAK,CAAEG,qBAAqB,I,MAEzCD,KAAKN,SAAS,CAAEQ,aAAc,aAAU,gDACjC,CAAP,EAAOC,QAAQC,OAAO,gBAxBxB,EAAKR,MAAQ,CACXE,uBAAuB,EACvBI,aAAc,GACdP,eAAe,G,EAkFrB,OAzF4B,iBAgC1B,YAAAU,OAAA,WACQ,yBAAEC,EAAA,EAAAA,UAAWC,EAAA,EAAAA,SAAUC,EAAA,EAAAA,MAAOC,EAAA,EAAAA,SAAUC,EAAA,EAAAA,KAAMC,EAAA,EAAAA,WAC9CC,EAAWN,EAAY,IAAMC,EAEnC,OACE,gBAAC,IAAiB,eAAKP,KAAKR,OAC1B,gBAAC,IAAW,CAACqB,IAAKb,KAAKR,MAAMsB,KAAKC,cAClC,gBAACC,EAAc,KACb,gBAACC,EAAO,KACN,gBAACC,EAAa,KACZ,0BAAK,aAAU,8CAEjB,2BAAMN,GACN,2BAAMJ,IAGR,gBAACS,EAAO,KACN,gBAACC,EAAa,KACZ,0BAAK,aAAU,6CAEjB,2BAAMN,GACN,2BAAMH,GACN,2BACGE,E,IAAaD,KAKpB,gBAACS,EAAY,CAACC,WAAY,IAAiBC,KAAMC,QAAStB,KAAKP,eAC5D,aAAU,4CAGZO,KAAKJ,MAAMD,eACV,gBAAC4B,EAAoB,KACnB,gBAACC,EAAO,KAAE,aAAU,8CAEpB,gBAACC,EAAc,KAAE,aAAU,iDAE3B,gBAACC,EAAa,CAACN,WAAY,IAAmBO,SAAUL,QAAStB,KAAKD,eACnE,aAAU,4CAGb,gBAAC6B,EAAkB,KACjB,gBAACC,EAAa,CAACC,QAAS9B,KAAKJ,MAAME,sBAAuBiC,SAAU/B,KAAKH,iBACzE,gBAACmC,EAAY,CAACV,QAAStB,KAAKH,gBACzB,aAAU,mDAIdG,KAAKJ,MAAMM,cACV,gBAAC,IAAY,KAAE,aAAU,kDAOvC,EAzFA,CAA4B,aA2Fb,YAEf,IAAMe,EAAU,IAAOgB,MAAG,GACxBC,UAAW,aAAa,IACxBC,MAAO,SACN,MAAsB,CACrBA,MAAO,O,IAILnB,EAAiB,IAAOiB,MAAG,GAC/BG,QAAS,OACTC,SAAU,SACT,MAAsB,CACrBC,eAAgB,iB,IAIdpB,EAAgB,IAAOe,IAAI,CAC/BM,aAAc,CACZC,MAAO,QACPL,MAAO,KACPM,MAAO,KAETL,QAAS,OACTE,eAAgB,gBAChBI,cAAe,aAAa,MAGxBlB,EAAU,IAAOmB,EAAE,CACvBC,WAAY,SAGRnB,EAAiB,IAAOkB,EAAE,CAC9BT,UAAW,aAAa,MAGpBf,EAAe,YAAO,IAAQ,CAClCiB,QAAS,QACTF,UAAW,aAAa,IACxBW,QAAS,CACPC,GAAI,KAIFpB,EAAgB,YAAO,IAAgB,CAC3CQ,UAAW,aAAa,IACxBW,QAAS,CAAEE,EAAG,aAAa,KAC3BC,cAAe,eAGXzB,EAAuB,IAAOU,IAAI,CACtCC,UAAW,aAAa,MAGpBN,EAAqB,IAAOK,IAAI,CACpCgB,WAAY,SACZb,QAAS,OACTF,UAAW,aAAa,MAGpBL,EAAgB,YAAO,IAAU,CACrCqB,YAAa,aAAa,MAGtBlB,EAAe,IAAOmB,KAAK,CAC/BC,OAAQ","file":"assets/39.chunk.749c8ab4b16c9dacd68d.js","sourcesContent":["/**\r\n * @ComponentFor MyDetailsPageViewModel\r\n */\r\nimport * as React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { postJson, translate, replaceState } from '@avensia/scope';\r\nimport { EpiProperty } from '@avensia/scope-episerver';\r\nimport MyDetailsPageViewModel from './MyDetailsPageViewModel.type';\r\nimport { minMediumMediaQuery, pixelsToUnit, thick, alto } from 'Shared/Style';\r\nimport MyPagesBaseLayout from '../MyPagesBaseLayout';\r\nimport FeedbackButton, { Appearance as FeedBackAppearance } from 'Shared/Button/Feedback';\r\nimport Button, { Appearance as ButtonAppearance } from 'Shared/Button';\r\nimport { Checkbox } from 'Shared/Fields/Toggle';\r\nimport { ErrorMessage } from 'Shared/FeedbackMessage';\r\n\r\ntype PropType = MyDetailsPageViewModel;\r\n\r\ntype StateType = {\r\n  unsubscribeNewsletter: boolean;\r\n  errorMessage: string;\r\n  isSectionOpen: boolean;\r\n};\r\n\r\nclass MyDetailsPage extends React.Component<PropType, StateType> {\r\n  constructor(props: PropType) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      unsubscribeNewsletter: false,\r\n      errorMessage: '',\r\n      isSectionOpen: false,\r\n    };\r\n  }\r\n\r\n  toggleSection = () => {\r\n    return this.setState({ isSectionOpen: !this.state.isSectionOpen });\r\n  };\r\n\r\n  toggleCheckbox = () => {\r\n    return this.setState({ unsubscribeNewsletter: !this.state.unsubscribeNewsletter });\r\n  };\r\n\r\n  deleteAccount = async () => {\r\n    const hasDeleted = await postJson(\r\n      `/MyDetails/DeleteAccount?unregisterFromNewsletter=${this.state.unsubscribeNewsletter}`,\r\n    );\r\n\r\n    if (hasDeleted) {\r\n      replaceState('/', { includeAppShellData: true });\r\n    } else {\r\n      this.setState({ errorMessage: translate('/Account/MyPages/Details/CloseAccountError') });\r\n      return Promise.reject(null);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const { firstName, lastName, email, address1, city, postalCode } = this.props.details;\r\n    const fullName = firstName + ' ' + lastName;\r\n\r\n    return (\r\n      <MyPagesBaseLayout {...this.props}>\r\n        <EpiProperty for={this.props.page.mainContent} />\r\n        <DetailsWrapper>\r\n          <Details>\r\n            <DetailsHeader>\r\n              <h4>{translate('/Account/MyPages/Details/UserInformation')}</h4>\r\n            </DetailsHeader>\r\n            <div>{fullName}</div>\r\n            <div>{email}</div>\r\n          </Details>\r\n\r\n          <Details>\r\n            <DetailsHeader>\r\n              <h4>{translate('/Account/MyPages/Details/InvoiceAddress')}</h4>\r\n            </DetailsHeader>\r\n            <div>{fullName}</div>\r\n            <div>{address1}</div>\r\n            <div>\r\n              {postalCode} {city}\r\n            </div>\r\n          </Details>\r\n        </DetailsWrapper>\r\n\r\n        <ToggleDelete appearance={ButtonAppearance.Bare} onClick={this.toggleSection}>\r\n          {translate('/Account/MyPages/Details/CloseMyAccount')}\r\n        </ToggleDelete>\r\n\r\n        {this.state.isSectionOpen && (\r\n          <DeleteAccountWrapper>\r\n            <Warning>{translate('/Account/MyPages/Details/SureCloseAccount')}</Warning>\r\n\r\n            <ConfirmMessage>{translate('/Account/MyPages/Details/ConfirmCloseAccount')}</ConfirmMessage>\r\n\r\n            <DeleteAccount appearance={FeedBackAppearance.Tertiary} onClick={this.deleteAccount}>\r\n              {translate('/Account/MyPages/Details/CloseMyAccount')}\r\n            </DeleteAccount>\r\n\r\n            <UnsubscribeWrapper>\r\n              <CustomChecbox checked={this.state.unsubscribeNewsletter} onChange={this.toggleCheckbox} />\r\n              <CheckboxText onClick={this.toggleCheckbox}>\r\n                {translate('/Account/MyPages/Details/UnregisterNewsletter')}\r\n              </CheckboxText>\r\n            </UnsubscribeWrapper>\r\n\r\n            {this.state.errorMessage && (\r\n              <ErrorMessage>{translate('/Account/MyPages/Details/CloseAccountError')}</ErrorMessage>\r\n            )}\r\n          </DeleteAccountWrapper>\r\n        )}\r\n      </MyPagesBaseLayout>\r\n    );\r\n  }\r\n}\r\n\r\nexport default MyDetailsPage;\r\n\r\nconst Details = styled.div({\r\n  marginTop: pixelsToUnit(40),\r\n  width: '100%',\r\n  [minMediumMediaQuery]: {\r\n    width: '48%',\r\n  },\r\n});\r\n\r\nconst DetailsWrapper = styled.div({\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  [minMediumMediaQuery]: {\r\n    justifyContent: 'space-between',\r\n  },\r\n});\r\n\r\nconst DetailsHeader = styled.div({\r\n  borderBottom: {\r\n    style: 'solid',\r\n    width: thick,\r\n    color: alto,\r\n  },\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  paddingBottom: pixelsToUnit(12),\r\n});\r\n\r\nconst Warning = styled.p({\r\n  fontWeight: 'bold',\r\n});\r\n\r\nconst ConfirmMessage = styled.p({\r\n  marginTop: pixelsToUnit(20),\r\n});\r\n\r\nconst ToggleDelete = styled(Button, {\r\n  display: 'block',\r\n  marginTop: pixelsToUnit(40),\r\n  padding: {\r\n    xy: 0,\r\n  },\r\n});\r\n\r\nconst DeleteAccount = styled(FeedbackButton, {\r\n  marginTop: pixelsToUnit(23),\r\n  padding: { x: pixelsToUnit(24) },\r\n  textTransform: 'capitalize',\r\n});\r\n\r\nconst DeleteAccountWrapper = styled.div({\r\n  marginTop: pixelsToUnit(20),\r\n});\r\n\r\nconst UnsubscribeWrapper = styled.div({\r\n  alignItems: 'center',\r\n  display: 'flex',\r\n  marginTop: pixelsToUnit(26),\r\n});\r\n\r\nconst CustomChecbox = styled(Checkbox, {\r\n  marginRight: pixelsToUnit(12),\r\n});\r\n\r\nconst CheckboxText = styled.span({\r\n  cursor: 'pointer',\r\n});\r\n"],"sourceRoot":""}