{"version":3,"file":"js/4141-ba32882e2aed57ef9267.chunk.js","mappings":"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","sources":["webpack://app/./app/javascript/components/essential/MarketingOptIn/MarketingOptIn.styles.ts","webpack://app/./app/javascript/components/essential/MarketingOptIn/MarketingOptIn.tsx","webpack://app/./app/javascript/components/essential/Footer/index.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport tokens from '@lacedltd/design-tokens'\nimport { mediaQuery, Typography } from '@lacedltd/laced-components'\n\nexport const MarketingOptIn = styled.article({\n  display: 'grid',\n  gridTemplateColumns: '1fr',\n  columnGap: tokens.spacing[6],\n  alignItems: 'center',\n\n  [mediaQuery.l.max]: {\n    gridTemplateColumns: '1fr 1fr',\n    alignItems: 'flex-start'\n  },\n\n  '@media (min-width: 1024px)': {\n    gridTemplateColumns: '1fr'\n  },\n\n  [mediaQuery.m.max]: {\n    gridTemplateColumns: '1fr'\n  }\n})\n\nexport const MarketingOptInForm = styled.form({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: 1,\n  margin: '0'\n})\n\nexport const MarketingCopy = styled.section({\n  flex: 1,\n  maxWidth: '103ch',\n  marginBottom: tokens.spacing[8]\n})\n\nexport const MarketingOptInField = styled.span({\n  display: 'flex',\n  width: '100%',\n  alignItems: 'center',\n  justifyContent: 'space-between'\n})\n\nexport const MarketingOptInButton = styled.button({\n  width: '7.125rem',\n  color: tokens.color.yeezy.p,\n  border: `${tokens.borderWidth.xs} solid ${tokens.color.airJordan[600]}`,\n  transition: `box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease`,\n\n  '&:hover, &:active': {\n    backgroundColor: tokens.color.airJordan[800]\n  },\n\n  '&[disabled]': {\n    backgroundColor: tokens.color.airJordan[800],\n    pointerEvents: 'none',\n    color: tokens.color.airJordan[500],\n    border: 'none'\n  }\n})\n\nexport const MarketingOptInInput = styled.input({\n  all: 'unset',\n  boxSizing: 'border-box',\n  padding: `${tokens.spacing[4]} 0`,\n  backgroundColor: 'transparent',\n  border: '0',\n  boxShadow: `0px 1px ${tokens.color.airJordan[500]}`,\n  flexGrow: '1',\n  transition: 'box-shadow 0.3s ease',\n  marginRight: tokens.spacing[3],\n  width: '100%',\n  fontSize: tokens.fontSize[3],\n  lineHeight: tokens.lineHeight.body,\n  color: tokens.color.yeezy.p,\n\n  '&::placeholder': {\n    color: tokens.color.airJordan[500]\n  },\n\n  '&:active, &:focus-visible': {\n    '&::placeholder': {\n      color: tokens.color.yeezy.p\n    },\n    boxShadow: `0px 1px ${tokens.color.yeezy.p}`,\n    color: `${tokens.color.yeezy.p} !important`\n  },\n\n  '&:disabled': {\n    cursor: 'not-allowed'\n  }\n})\n\nexport const Heading = styled(Typography.Heading)({\n  color: tokens.color.yeezy.p,\n  marginBottom: tokens.spacing[3]\n})\n\nexport const DescriptionText = styled(Typography.Text)({\n  color: tokens.color.airJordan[500],\n  marginBottom: '0'\n})\n\nexport const ErrorMessage = styled(Typography.Text)({\n  color: tokens.color.airPresto[500],\n  marginTop: tokens.spacing[3]\n})\n","import * as React from 'react'\nimport axios from 'axios'\nimport { useUser, useConsentDecision, useLocale, useTranslation } from 'hooks'\nimport Checkbox from '../../atoms/Checkbox'\nimport * as S from './MarketingOptIn.styles'\n\nconst MarketingOptIn: React.FC = () => {\n  const { t } = useTranslation()\n  const { localiseUrl } = useLocale()\n  const { isLoggedIn, user } = useUser()\n  const { consentDecision } = useConsentDecision('all_marketing')\n  const [value, setValue] = React.useState('')\n  const [existingUserOptIn, setExistingUserOptIn] = React.useState(false)\n  const [emailValidationMessage, setEmailValidationMessage] = React.useState('')\n  const [errorMessage, setErrorMessage] = React.useState('')\n  const [canShowErrorMessage, setCanShowErrorMessage] = React.useState(false)\n  const [optInState, setOptInState] = React.useState({\n    submitting: false,\n    done: false\n  })\n\n  const hasSignedUp = !!consentDecision?.accepted\n  const isGuestUser = !isLoggedIn && !hasSignedUp\n  const emailInputField = (\n    <S.MarketingOptInInput\n      name=\"footer_marketing_opt_in_email\"\n      placeholder={t('react_components.marketing.what_email')}\n      value={value}\n      onChange={(e) => {\n        const email = e.target.value\n\n        setValue(email)\n        setEmailValidationMessage(\n          email && !e.target.validity.valid ? e.target.validationMessage : ''\n        )\n      }}\n      onBlur={() => {\n        setCanShowErrorMessage(Boolean(value))\n      }}\n      type=\"email\"\n      disabled={optInState.submitting}\n    />\n  )\n\n  const optInCheckbox = (\n    <Checkbox\n      onClick={() => {\n        setExistingUserOptIn(!existingUserOptIn)\n      }}\n      name=\"footer_marketing_opt_in_checkbox\"\n      inverted\n    >\n      {t('react_components.marketing.complete_reg')}\n    </Checkbox>\n  )\n\n  let marketingCopy: React.ReactNode = null\n  let heading: React.ReactNode = null\n  let buttonLabel: React.ReactNode = null\n  let control: React.ReactNode = emailInputField\n\n  if (isGuestUser) {\n    heading = (\n      <S.Heading as=\"h4\">{t('react_components.marketing.sign_up')}</S.Heading>\n    )\n    marketingCopy = t('react_components.marketing.sign_up_desc')\n    buttonLabel = t('react_components.marketing.submit')\n  } else {\n    heading = (\n      <S.Heading as=\"h4\">\n        {t('react_components.marketing.missing_out')}\n      </S.Heading>\n    )\n    marketingCopy = t('react_components.marketing.missing_out_desc')\n    buttonLabel = t('react_components.marketing.enter')\n    control = optInCheckbox\n  }\n\n  const renderErrorMessage = () => {\n    if (\n      (canShowErrorMessage || !isGuestUser) &&\n      (errorMessage || emailValidationMessage)\n    ) {\n      return (\n        <S.ErrorMessage as=\"p\" variant=\"footnote\">\n          {errorMessage || emailValidationMessage}\n        </S.ErrorMessage>\n      )\n    }\n\n    return null\n  }\n\n  // clear button label when submitting to allow for loading spinner\n  if (optInState.submitting) {\n    buttonLabel = null\n  }\n\n  // when we are done\n  if (optInState.done) {\n    heading = (\n      <S.Heading as=\"h2\">{t('react_components.marketing.your_in')}</S.Heading>\n    )\n    marketingCopy = t('react_components.marketing.your_in_desc')\n  }\n\n  const submit = async () => {\n    if (optInState.submitting || optInState.done) return\n\n    // tried to submit so we can show errors now\n    setCanShowErrorMessage(true)\n    let email = ''\n\n    if (isLoggedIn) {\n      if (!existingUserOptIn || !!hasSignedUp) return\n      // logged in user who hasn't signed up\n      email = user.email\n    } else {\n      if (emailValidationMessage) return\n      if (!value)\n        return setErrorMessage(t('react_components.marketing.email_error'))\n      email = value\n    }\n\n    try {\n      setOptInState({ submitting: true, done: false })\n      await axios.post(\n        localiseUrl('/api/consent_decisions', { localeAsParam: true }),\n        {\n          email,\n          source: 'footer',\n          consent_type: 'all_marketing',\n          accepted: true\n        }\n      )\n      setOptInState({ submitting: false, done: true })\n    } catch (err) {\n      setOptInState({ submitting: false, done: false })\n      setErrorMessage(t('react_components.marketing.failed_to_register'))\n    }\n  }\n\n  // already signed up, render nothing\n  if (isLoggedIn && hasSignedUp) return null\n\n  return (\n    <S.MarketingOptIn>\n      <S.MarketingCopy>\n        {heading}\n        {marketingCopy ? (\n          <S.DescriptionText as=\"p\" variant=\"body\">\n            {marketingCopy}\n          </S.DescriptionText>\n        ) : null}\n      </S.MarketingCopy>\n      {!optInState.done ? (\n        <S.MarketingOptInForm onSubmit={(e) => e.preventDefault()}>\n          <S.MarketingOptInField>\n            {control}\n            <S.MarketingOptInButton\n              className={[\n                'btn btn--secondary',\n                optInState.submitting ? 'btn--loading' : ''\n              ].join(' ')}\n              onClick={submit}\n              disabled={\n                optInState.submitting || (!isGuestUser && !existingUserOptIn)\n              }\n            >\n              {buttonLabel}\n            </S.MarketingOptInButton>\n          </S.MarketingOptInField>\n          {renderErrorMessage()}\n        </S.MarketingOptInForm>\n      ) : null}\n    </S.MarketingOptIn>\n  )\n}\n\nexport default MarketingOptIn\n","import * as React from 'react'\nimport {\n  Footer as ComponentLibraryFooter,\n  SiteSettingsButton\n} from '@lacedltd/laced-components'\nimport { withTranslations } from 'helpers'\nimport { useLocale, useTranslation } from '../../../hooks'\nimport MarketingOptIn from '../MarketingOptIn'\n\nconst Footer: React.FC<FooterProps> = ({ navs }) => {\n  const { t } = useTranslation()\n\n  const { locale, location, currency } = useLocale()\n\n  return (\n    <ComponentLibraryFooter\n      locale={locale}\n      siteNavigationGroups={navs}\n      copyrightNotice={`${t('react_components.footer.all_rights_reserved', {\n        year: new Date().getFullYear()\n      })} • ${t('react_components.footer.company_number', {\n        number: '09541333'\n      })}`}\n      SiteSettingsButton={\n        <SiteSettingsButton\n          code={location.code}\n          countryName={location.name}\n          language={t(`shared.locales.language.${locale}`)}\n          currency={t(`shared.locales.currency.${currency}`)}\n          onClick={() => {\n            window.dispatchEvent(new Event('toggleSiteSettingsModal'))\n          }}\n        />\n      }\n      MarketingOptIn={<MarketingOptIn />}\n    />\n  )\n}\n\ninterface NavItemLink {\n  children: string\n  href: string\n}\n\ninterface NavItem {\n  title: string\n  links: NavItemLink[]\n}\n\ninterface FooterProps {\n  navs: NavItem[]\n}\n\nexport default withTranslations(Footer)\n"],"names":["MarketingOptIn","_styled","target","display","gridTemplateColumns","columnGap","tokens","alignItems","mediaQuery","l","max","m","MarketingOptInForm","name","styles","MarketingCopy","flex","maxWidth","marginBottom","MarketingOptInField","MarketingOptInButton","width","color","yeezy","p","border","xs","airJordan","transition","backgroundColor","pointerEvents","MarketingOptInInput","all","boxSizing","padding","boxShadow","flexGrow","marginRight","fontSize","lineHeight","body","cursor","Heading","Typography","DescriptionText","ErrorMessage","airPresto","marginTop","t","useTranslation","localiseUrl","useLocale","isLoggedIn","user","useUser","consentDecision","useConsentDecision","value","setValue","React","existingUserOptIn","setExistingUserOptIn","emailValidationMessage","setEmailValidationMessage","errorMessage","setErrorMessage","canShowErrorMessage","setCanShowErrorMessage","optInState","setOptInState","submitting","done","hasSignedUp","accepted","isGuestUser","emailInputField","S","placeholder","onChange","e","email","validity","valid","validationMessage","onBlur","Boolean","type","disabled","optInCheckbox","Checkbox","onClick","inverted","marketingCopy","heading","buttonLabel","control","as","variant","onSubmit","preventDefault","className","join","async","axios","post","localeAsParam","source","consent_type","err","withTranslations","Footer","navs","locale","location","currency","ComponentLibraryFooter","siteNavigationGroups","copyrightNotice","year","Date","getFullYear","number","SiteSettingsButton","code","countryName","language","window","dispatchEvent","Event"],"sourceRoot":""}