{"version":3,"sources":["webpack:///./src/components/authenticate/Create.js","webpack:///./src/components/authenticate/CreateElements.js","webpack:///./src/templates/routes/signup.js"],"names":["Form","styled","form","attrs","name","InputGroup","div","Label","label","rem","Color","ritualRed","Input","input","required","ritualBlue","ritualSecondaryDisabledBlue","nameRegex","CreateFormComponent","props","state","processing","firstName","isFirstNameValid","lastName","isLastNameValid","email","isEmailValid","password","isPasswordValid","error","errorMessage","handleUserCreation","e","preventDefault","this","activeCart","setState","createAccount","then","currency","toUpperCase","value","preTaxTotal","toFixed","metrics","track","method","redirectUrl","redirects","login","redirectReplaceHistory","catch","intl","t","status","errors","source","pointer","includes","detail","finally","handleFirstNameValidation","updatedFirstName","target","test","handleLastNameValidation","updatedLastName","handleEmailValidation","updatedEmail","emailRegex","errorrMessage","handlePasswordValidation","updatedPassword","render","disabled","onSubmit","bind","Text","id","defaultMessage","htmlFor","className","type","autoCapitalize","autoComplete","onChange","RitualSubmitButton","title","React","Component","connect","cartSelectors","Wrapper","CreateHeading","responsive","md","Font","dutch","LoginText","p","sm","LoginTextLink","MagicLink","CreateElements","handleLoginClick","dispatchUpdateRedirects","process","Create","to","onClick","updateRedirects","SignupPage","componentDidMount","updatePageData","updateLayoutState","navColor","banner","data","heroImageMobile","heroImageDesktop","Page","pagePath","description","noIndex","LoadingWrapper","isLoading","isUserLoaded","shouldRedirectOnLoad","isLoggedIn","PageHero","imageMobile","imageDesktop","imageObjectPosition","AuthenticateContainer","BarrierBusters","appSelectors","userSelectors"],"mappings":"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","file":"component---src-templates-routes-signup-js-d71ea1b8c06c84a01c35.js","sourcesContent":["// TODO: Create account\nimport React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { rem, Color } from \"../../utils/style\";\nimport { createAccount } from \"../../utils/authenticate\";\nimport { redirectReplaceHistory } from \"../../utils/redirect\";\nimport { emailRegex } from \"../../utils/helpers\";\nimport metrics from \"../../utils/metrics\";\nimport intl from \"../../services/intl\";\n\n// Components\nimport RitualSubmitButton from \"../global/RitualSubmitButton\";\nimport Text from \"../Text\";\n\n// Redux\nimport { connect } from \"react-redux\";\nimport cartSelectors from \"../../store/cart/selectors\";\n\n// Styled Elements\nconst Form = styled.form.attrs({\n  name: \"create\",\n})`\n  legend {\n    display: none;\n  }\n`;\n\nconst InputGroup = styled.div`\n  margin-bottom: 32px;\n\n  &.error {\n    margin-bottom: 12px;\n  }\n\n  &:last-of-type {\n    margin-bottom: 40px;\n\n    &.error {\n      margin-bottom: 20px;\n    }\n  }\n`;\n\nconst Label = styled.label`\n  font-size: ${rem(14)};\n  font-weight: 300;\n  line-height: ${rem(20)};\n  margin-bottom: 8px;\n\n  &.error {\n    color: ${Color.ritualRed};\n  }\n\n  &.error-label {\n    display: none;\n    font-size: ${rem(12)};\n    font-weight: 300;\n    line-height: ${rem(16)};\n    padding-top: 4px;\n\n    &.error {\n      display: block;\n    }\n  }\n`;\n\nconst Input = styled.input.attrs({\n  required: \"\",\n})`\n  height: 44px;\n  width: 100%;\n  color: ${Color.ritualBlue};\n  display: block;\n  font-size: ${rem(16)};\n  line-height: ${rem(22)};\n  padding: 0 1rem;\n  font-weight: 300;\n  background-color: #fff;\n  border-radius: 0;\n  border: 1px solid ${Color.ritualSecondaryDisabledBlue};\n  caret-color: ${Color.ritualBlue};\n\n  [data-whatintent=\"mouse\"] &:focus,\n  [data-whatintent=\"touch\"] &:focus {\n    outline: none;\n  }\n\n  &.error {\n    border: 1px solid ${Color.ritualRed};\n    color: ${Color.ritualRed};\n  }\n`;\n\nconst nameRegex = /^.{1,40}$/;\n\nexport class CreateFormComponent extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      processing: false,\n      firstName: \"\",\n      isFirstNameValid: false,\n      lastName: \"\",\n      isLastNameValid: false,\n      email: \"\",\n      isEmailValid: false,\n      password: \"\",\n      isPasswordValid: false,\n      error: false,\n      errorMessage: \"\",\n    };\n  }\n\n  handleUserCreation(e) {\n    e.preventDefault();\n    const { firstName, lastName, email, password } = this.state;\n    const { activeCart } = this.props;\n\n    this.setState({\n      processing: true,\n    });\n\n    createAccount(firstName, lastName, email, password)\n      .then(() => {\n        const currency = activeCart.currency\n          ? activeCart.currency.toUpperCase()\n          : \"USD\";\n\n        const value = activeCart.preTaxTotal\n          ? (activeCart.preTaxTotal / 100).toFixed(2)\n          : \"0.00\";\n\n        metrics.track(\"User Signup\", {\n          method: \"email-password\",\n          currency,\n          value,\n        });\n        // At this stage, the user has been created and authenticated,\n        // we can now look at redirecting to the appropriate location\n\n        const redirectUrl = this.props.redirects.login || \"/approach\";\n        redirectReplaceHistory(redirectUrl);\n      })\n      .catch(error => {\n        // User creation unsuccessful\n        let errorMessage = intl.t(\n          \"authenticate.create.error\",\n          \"Something went wrong, try again\",\n        );\n\n        if (\n          error.status === 422 &&\n          error.errors[0] &&\n          error.errors[0].source.pointer.includes(\"email\")\n        ) {\n          errorMessage = intl.t(\n            \"authenticate.create.error-email\",\n            `Email {error}`,\n            { error: error.errors[0].detail },\n          );\n        }\n\n        this.setState({\n          error: true,\n          errorMessage,\n        });\n      })\n      .finally(() => {\n        this.setState({\n          processing: false,\n        });\n      });\n  }\n\n  handleFirstNameValidation(e) {\n    const updatedFirstName = e.target.value;\n    const isFirstNameValid = nameRegex.test(updatedFirstName);\n\n    // clear error on change\n    this.setState({\n      firstName: updatedFirstName,\n      isFirstNameValid,\n      error: false,\n      errorMessage: \"\",\n    });\n  }\n\n  handleLastNameValidation(e) {\n    const updatedLastName = e.target.value;\n    const isLastNameValid = nameRegex.test(updatedLastName);\n\n    // clear error on change\n    this.setState({\n      lastName: updatedLastName,\n      isLastNameValid,\n      error: false,\n      errorMessage: \"\",\n    });\n  }\n\n  handleEmailValidation(e) {\n    const updatedEmail = e.target.value;\n    const isEmailValid = emailRegex.test(updatedEmail);\n\n    // clear error on change\n    this.setState({\n      email: updatedEmail,\n      isEmailValid,\n      error: false,\n      errorrMessage: false,\n    });\n  }\n\n  handlePasswordValidation(e) {\n    const passwordRegex = /^.{6,}$/;\n    const updatedPassword = e.target.value;\n    const isPasswordValid = passwordRegex.test(updatedPassword);\n\n    // clear error on change\n    this.setState({\n      password: updatedPassword,\n      isPasswordValid,\n      error: false,\n      errorMessage: \"\",\n    });\n  }\n\n  render() {\n    let disabled = false;\n\n    const {\n      isFirstNameValid,\n      isLastNameValid,\n      isEmailValid,\n      isPasswordValid,\n      error,\n      errorMessage,\n      processing,\n    } = this.state;\n\n    disabled =\n      !isFirstNameValid ||\n      !isLastNameValid ||\n      !isEmailValid ||\n      !isPasswordValid ||\n      processing;\n    return (\n      <Form onSubmit={this.handleUserCreation.bind(this)}>\n        <fieldset>\n          <legend>\n            <Text\n              id=\"authenticate.create.sign-up-form\"\n              defaultMessage=\"Sign Up Form\"\n            />\n          </legend>\n          <InputGroup>\n            <Label htmlFor=\"fname\">\n              <Text\n                id=\"authenticate.create.first-name\"\n                defaultMessage=\"First Name\"\n              />\n            </Label>\n            <Input\n              className=\"first-name-input\"\n              id=\"fname\"\n              type=\"text\"\n              name=\"fname\"\n              autoCapitalize=\"on\"\n              autoComplete=\"given-name\"\n              value={this.state.firstName}\n              onChange={this.handleFirstNameValidation.bind(this)}\n            />\n          </InputGroup>\n\n          <InputGroup>\n            <Label htmlFor=\"lname\">\n              <Text\n                id=\"authenticate.create.last-name\"\n                defaultMessage=\"Last Name\"\n              />\n            </Label>\n            <Input\n              className=\"last-name-input\"\n              id=\"lname\"\n              type=\"text\"\n              name=\"lname\"\n              autoCapitalize=\"on\"\n              autoComplete=\"family-name\"\n              value={this.state.lastName}\n              onChange={this.handleLastNameValidation.bind(this)}\n            />\n          </InputGroup>\n\n          <InputGroup className={`${error ? \"error\" : \"\"}`}>\n            <Label\n              htmlFor=\"email\"\n              className={`email-label ${error ? \"error\" : \"\"}`}\n            >\n              <Text id=\"authenticate.create.email\" defaultMessage=\"Email\" />\n            </Label>\n            <Input\n              className={`email-input ${error ? \"error\" : \"\"}`}\n              id=\"email\"\n              type=\"text\"\n              name=\"email\"\n              autoCapitalize=\"off\"\n              autoComplete=\"email\"\n              value={this.state.email}\n              onChange={this.handleEmailValidation.bind(this)}\n            />\n            <Label\n              htmlFor=\"email\"\n              className={`error-label ${error ? \"error\" : \"\"}`}\n            >\n              {errorMessage}\n            </Label>\n          </InputGroup>\n\n          <InputGroup>\n            <Label htmlFor=\"password\">\n              <Text\n                id=\"authenticate.create.password\"\n                defaultMessage=\"Password\"\n              />\n            </Label>\n            <Input\n              className=\"password-input\"\n              id=\"password\"\n              type=\"password\"\n              name=\"password\"\n              autoCapitalize=\"off\"\n              autoComplete=\"new-password\"\n              value={this.state.password}\n              onChange={this.handlePasswordValidation.bind(this)}\n            />\n          </InputGroup>\n\n          <RitualSubmitButton\n            className={`submit-button fullwidth ${disabled ? \"disabled\" : \"\"}`}\n            type=\"submit\"\n            name=\"submit\"\n            value={intl.t(\"authenticate.create.submit\", \"Save and Continue\")}\n            title={intl.t(\"authenticate.create.submit\", \"Save and Continue\")}\n          />\n        </fieldset>\n      </Form>\n    );\n  }\n}\n\nconst mapStateToProps = state => ({\n  redirects: state.redirects,\n  activeCart: cartSelectors.activeCart(state),\n});\n\nexport default connect(mapStateToProps)(CreateFormComponent);\n","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { rem, Font, Color, responsive } from \"../../utils/style\";\n\n// Components\nimport Create from \"./Create\";\nimport MagicLink from \"../MagicLink\";\nimport Text from \"../Text\";\n\n// Redux & Actions\nimport { connect } from \"react-redux\";\nimport { updateRedirects } from \"../../store/redirects/actions\";\n\n// Styled Elements\nconst Wrapper = styled.div.attrs({\n  className: \"d-flex flex-column\",\n})``;\n\nconst CreateHeading = styled.div`\n  margin-bottom: 32px;\n\n  ${responsive.md`\n    margin-bottom: 40px;\n  `}\n\n  h1 {\n    margin: 0;\n    font-weight: 500;\n    letter-spacing: 0px;\n    margin-bottom: 8px;\n\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n\n    ${responsive.md`\n      font-size: ${rem(20)};\n      line-height: ${rem(30)};\n    `}\n  }\n\n  p {\n    ${Font.dutch};\n    font-size: ${rem(16)};\n    letter-spacing: 0px;\n    line-height: ${rem(26)};\n    font-weight: normal;\n    margin-bottom: 0;\n\n    ${responsive.md`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n  `}\n  }\n`;\n\nconst LoginText = styled.p`\n  ${Font.dutch};\n  font-size: 16px;\n  line-height: 26px;\n  text-align: center;\n  margin-top: 24px;\n  margin-bottom: 0;\n\n  width: 101%;\n\n  ${responsive.sm`\n    width: 107%;\n  `}\n\n  ${responsive.md`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n    width: auto;\n    margin-top: 40px;\n  `}\n`;\n\nconst LoginTextLink = styled(MagicLink)`\n  padding-bottom: 2px;\n  border-bottom: 1px solid ${Color.ritualBlue};\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.56;\n  }\n`;\n\nexport class CreateElements extends React.Component {\n  handleLoginClick() {\n    const { dispatchUpdateRedirects } = this.props;\n\n    dispatchUpdateRedirects({\n      login: process.env.GATSBY_ACCOUNT_URL || \"https://account.ritual.com\",\n    });\n  }\n\n  render() {\n    return (\n      <Wrapper>\n        <CreateHeading>\n          <h1>\n            <Text\n              id=\"authenticate.create.create-account-heading\"\n              defaultMessage=\"Create an Account\"\n            />\n          </h1>\n          <p>\n            <Text\n              id=\"authenticate.create.create-account-p\"\n              defaultMessage=\"New here? Don’t be a stranger.\"\n            />\n          </p>\n        </CreateHeading>\n\n        <Create />\n\n        <LoginText>\n          <Text\n            id=\"authenticate.create.already-have-account\"\n            defaultMessage=\"Already have an account?\"\n          />{\" \"}\n          <LoginTextLink to=\"/login\" onClick={this.handleLoginClick.bind(this)}>\n            <Text id=\"authenticate.create.login\" defaultMessage=\"Log in\" />\n          </LoginTextLink>\n          .\n        </LoginText>\n      </Wrapper>\n    );\n  }\n}\n\nexport default connect(null, {\n  dispatchUpdateRedirects: updateRedirects,\n})(CreateElements);\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\n\n// Components\nimport LoadingWrapper from \"../../components/global/LoadingWrapper\";\nimport PageSEO from \"../../components/seo/Page\";\nimport PageHero from \"../../components/PageHero\";\nimport AuthenticateContainer from \"../../components/authenticate/AuthenticateContainer\";\nimport CreateElements from \"../../components/authenticate/CreateElements\";\nimport BarrierBusters from \"../../components/authenticate/BarrierBusters\";\n\n// Redux\nimport { connect } from \"react-redux\";\nimport appSelectors from \"../../store/app/selectors\";\nimport userSelectors from \"../../store/user/selectors\";\n\nexport const SignupPage = class SignupPageTemplate extends React.Component {\n  componentDidMount() {\n    this.props.updatePageData({\n      label: \"Signup\",\n    });\n\n    this.props.updateLayoutState({\n      navColor: \"#FFFFFF\",\n      banner: true,\n    });\n  }\n\n  render() {\n    const seo = {\n      pagePath: \"/signup\",\n      title: \"Sign Up\",\n      description: \"Sign Up\",\n    };\n\n    const { heroImageMobile, heroImageDesktop } = this.props.data;\n\n    return (\n      <>\n        <PageSEO {...seo} noIndex={true} />\n\n        <LoadingWrapper\n          isLoading={!this.props.isUserLoaded}\n          shouldRedirectOnLoad={this.props.isLoggedIn}\n        >\n          <PageHero\n            imageMobile={heroImageMobile}\n            imageDesktop={heroImageDesktop}\n            imageObjectPosition=\"50% 100%\"\n            className=\"height-fit full-width-mobile\"\n          >\n            <AuthenticateContainer>\n              <CreateElements />\n            </AuthenticateContainer>\n          </PageHero>\n\n          <BarrierBusters />\n        </LoadingWrapper>\n      </>\n    );\n  }\n};\n\nconst mapStateToProps = state => {\n  return {\n    isUserLoaded: appSelectors.isUserLoaded(state),\n    isLoggedIn: userSelectors.isLoggedIn(state),\n  };\n};\n\nexport default connect(mapStateToProps, {})(SignupPage);\n\nexport const pageQuery = graphql`\n  query SignUpQuery($locale: String!) {\n    heroImageMobile: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"7Dathy6nXb81LmIIv8mXZA\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 912, quality: 80) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n    heroImageDesktop: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"4huChKZwlYOBIDx5pCVboj\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 1920, quality: 80) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}