{"version":3,"file":"modern.newsletter.CeOabotS.js","names":[],"sources":["../../../../../../owl-nest/external/owl-kit/src/styles/container.tsx","../../../../../../owl-nest/external/owl-kit/src/components/SkewedBanner.tsx","../../../../../../owl-nest/common/newsletter-subscription/src/hook.tsx","../../../../../../owl-nest/common/newsletter-subscription/src/component.tsx","../../../../../../owl-nest/ulule/features/newsletter/src/Newsletter.tsx","../../../../../../owl-nest/ulule/features/newsletter/src/index.tsx"],"sourcesContent":["import { styled } from 'next-yak'\nimport * as breakpoint from '../constants/breakpoints'\nimport { MAIN_CONTAINER_WIDTH } from '../constants/sizes'\n\nexport const SkewedContainer = styled.div<{ $skewedBorder: 'bottom' | 'top' }>`\n  margin-top: -20px;\n  padding: 35px 0 60px;\n  transform-origin: top left;\n  transform: skew(0, -5deg);\n`\nSkewedContainer.displayName = 'S.container.SkewedContainer'\n// WARNING: the risk is that on some browsers the content can be blurred\n// an alternative is to use ::before / ::after to generate a triangle\n\nexport const SkewedContent = styled.div`\n  transform: skew(0, 5deg);\n`\nSkewedContent.displayName = 'S.container.SkewedContent'\n\nexport const Base = styled.div`\n  padding-left: 20px;\n  padding-right: 20px;\n  margin-left: auto;\n  margin-right: auto;\n  width: 100%;\n  min-width: 320px;\n\n  @media screen and ${breakpoint.MOBILE_L} {\n    max-width: ${MAIN_CONTAINER_WIDTH};\n    padding-left: 40px;\n    padding-right: 40px;\n  }\n`\n","import * as React from 'react'\nimport { styled } from 'next-yak'\n\nimport * as S from '../styles'\n\nexport type SkewedBannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  skewedBorder?: 'top' | 'bottom'\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SkewedBannerComponent({\n  children,\n  skewedBorder = 'bottom',\n  className,\n  ...props\n}: SkewedBannerProps): React.ReactElement<SkewedBannerProps> {\n  return (\n    <S.container.SkewedContainer className={className} $skewedBorder={skewedBorder} {...props}>\n      <S.container.SkewedContent>{children}</S.container.SkewedContent>\n    </S.container.SkewedContainer>\n  )\n}\n\nexport const SkewedBanner = styled(SkewedBannerComponent)<SkewedBannerProps>``\nSkewedBanner.displayName = 'SkewedBanner'\n","import * as React from 'react'\nimport * as yup from 'yup'\n\nimport { api } from '@owl-nest/api-client/latest'\n\ntype Subscription = 'success' | 'error' | 'info'\ntype Hook = {\n  handleSubscription: (country: string, email: string, locale: string) => Promise<void>\n  isLoading: boolean\n  status: Subscription | undefined\n}\n\nconst emailSchema = yup.object().shape({\n  email: yup.string().email(),\n})\n\nexport const subscribeNewsLetter = async (country: string, email: string, locale: string): Promise<Subscription> => {\n  const isValid = await emailSchema.isValid({\n    email,\n  })\n\n  if (isValid) {\n    const response = await api.post.subscribeNewsLetter({\n      body: { country: country, email: email, lang: locale },\n    })\n\n    return response.caseOf({\n      left: (_error) => 'error',\n      right: (_result) => 'success',\n    })\n  } else {\n    return 'error'\n  }\n}\n\nexport function useNewsLetterSubscription(): Hook {\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [status, setStatus] = React.useState<Subscription | undefined>(undefined)\n\n  return { handleSubscription, isLoading, status }\n\n  async function handleSubscription(country: string, email: string, locale: string): Promise<void> {\n    if (email === '') {\n      setStatus('info')\n    } else {\n      setIsLoading(true)\n      const subscriptionStatus = await subscribeNewsLetter(country, email, locale)\n      setStatus(subscriptionStatus)\n      setIsLoading(false)\n    }\n  }\n}\n","import * as React from 'react'\nimport { styled } from 'next-yak'\n\nimport * as env from '@owl-nest/config'\nimport { t, tc } from '@owl-nest/localize'\n\nimport * as plume from '@ulule/owl-kit-components/next'\n\nimport { useNewsLetterSubscription } from './hook'\n\ntype NewsletterBlockComponentProps = {\n  className?: string\n  country: string\n  locale: string\n}\n\nfunction NewsletterBlockComponent({\n  className,\n  country,\n  locale,\n}: NewsletterBlockComponentProps): React.ReactElement<any> {\n  const [isToggled, setIsToggled] = React.useState<boolean>(false)\n  const [email, setEmail] = React.useState<string>('')\n\n  const { handleSubscription, isLoading, status } = useNewsLetterSubscription()\n\n  return (\n    <Wrapper className={className}>\n      <Call>{t('Join the Ulule community!')}</Call>\n      {locale !== 'fr' && <Detail>{t('Subscribe to receive the best of Ulule in your inbox every week.')}</Detail>}\n      <Block>\n        <Form\n          onSubmit={(e) => {\n            e.preventDefault()\n          }}\n        >\n          <plume.TextField onChange={(e) => setEmail(e.target.value)} placeholder={t('Enter your e-mail address')} />\n          <SubmitButton loading={isLoading} onClick={() => handleSubscription(country, email, locale)} size=\"medium\">\n            {t('Subscribe')}\n          </SubmitButton>\n        </Form>\n        {status && (\n          <DynCallout type={status}>\n            {status === 'success' &&\n              t('Thank you for your registration! You will receive an email to confirm your registration.')}\n            {status === 'error' && t('This email is not valid, please correct it.')}\n            {status === 'info' && t('This email is not valid, please correct it.')}\n          </DynCallout>\n        )}\n        <Disclaimer $isToggled={isToggled} onClick={() => setIsToggled(!isToggled)}>\n          {t('We will only use your email address to send you our newsletter.')}{' '}\n          <ShowMoreText>{isToggled ? t('Show less') : t('Learn more')}</ShowMoreText>\n          <plume.glyphs.stroke.CaretDown />\n        </Disclaimer>\n        <ExtendedDisclaimer $isToggled={isToggled}>\n          {tc(\n            'Ulule collects your data to send you our newsletter. Depending on the purpose of each treatment, you have certain rights (right of opposition, right of access to your data, right to rectify and erase your data, right to define the fate of your data after your death). To exercise these rights, write to privacy@ulule.com or ULULE SAS, %(ululePostalAddress)s or, for certain rights, go directly to your account. For more details: [privacy: Ulule Privacy Policy].',\n            {\n              ululePostalAddress: t('10 rue de Penthièvre, 75008 Paris, France'),\n              privacy: <plume.Link href={env.PRIVACY_URL} />,\n            },\n          )}\n        </ExtendedDisclaimer>\n      </Block>\n    </Wrapper>\n  )\n}\n\nexport const NewsletterBlock = styled(NewsletterBlockComponent)``\n\nconst Block = styled.div`\n  width: 100%;\n  max-width: 620px;\n`\n\nconst Wrapper = styled.div`\n  align-items: center;\n  background-color: ${plume.COLORS.PRIMARY_GREY_000};\n  border-radius: 8px;\n  box-shadow: 1px 2px 14px rgba(89, 84, 78, 0.12);\n  display: flex;\n  flex-direction: column;\n  height: auto;\n  overflow: hidden;\n  padding: 35px 16px;\n  width: 100%;\n\n  ${plume.glyphs.stroke.CaretDown} {\n    color: ${plume.COLORS.PRIMARY_GREY_000};\n  }\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    ${plume.TextField} {\n      max-width: 415px;\n    }\n  }\n`\n\nconst Call = styled(plume.styles.heading.L)`\n  color: ${plume.COLORS.TEXT_PRIMARY};\n  max-width: 300px;\n  text-align: center;\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    max-width: none;\n  }\n`\n\nconst Detail = styled(plume.styles.copy.M.light)`\n  max-width: 325px;\n  padding-top: 8px;\n  text-align: center;\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    max-width: none;\n  }\n`\n\nconst Form = styled.form`\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  margin-top: 24px;\n  width: 100%;\n\n  div {\n    flex-grow: 1;\n    width: 100%;\n  }\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    flex-direction: row;\n    margin-bottom: 16px;\n    margin-top: 32px;\n  }\n`\n\nconst SubmitButton = styled(plume.Button)`\n  margin-bottom: 16px;\n  margin-top: 16px;\n  white-space: nowrap;\n  width: 100%;\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    margin-bottom: 0;\n    margin-left: 16px;\n    margin-top: 0;\n    width: auto;\n  }\n`\n\nconst ShowMoreText = styled.span`\n  font-weight: 600; // HACK: Irregular font manipulation\n`\n\nconst Disclaimer = styled(plume.styles.heading.XXXXXS)<{ $isToggled: boolean }>`\n  color: ${plume.COLORS.TEXT_SECONDARY};\n  cursor: pointer;\n  width: fit-content;\n\n  ${plume.glyphs.stroke.CaretDown} {\n    color: ${plume.COLORS.PRIMARY_SAND_500};\n    height: 6px;\n    left: 6px;\n    position: relative;\n    transform: rotateX(${({ $isToggled }) => ($isToggled ? '180' : '0')}deg);\n    width: 10px;\n  }\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    padding-bottom: ${({ $isToggled }) => ($isToggled ? '16' : '0')}px;\n  }\n`\n\nconst ExtendedDisclaimer = styled(plume.styles.heading.XXXXXXS)<{ $isToggled: boolean }>`\n  color: ${plume.COLORS.TEXT_SECONDARY};\n  display: ${({ $isToggled }) => ($isToggled ? 'block' : 'none')};\n  text-transform: uppercase;\n\n  @media screen and ${plume.BREAKPOINTS.TABLET} {\n    padding-right: 30px;\n  }\n`\n\nconst DynCallout = styled(plume.Callout)<plume.CalloutProps>`\n  margin-bottom: 16px;\n`\n","import * as React from 'react'\nimport { styled } from 'next-yak'\n\nimport { t } from '@owl-nest/localize'\n\nimport * as plume from '@ulule/owl-kit-components/next'\nimport { NewsletterBlock } from '@owl-nest/newsletter-subscription'\nimport * as env from '@owl-nest/config'\n\nexport function Newsletter(): React.ReactElement<any> {\n  const userConfig = env.useUserEnv()\n  const locale = userConfig.lang\n  const country = env.USER_COUNTRY\n\n  return (\n    <Wrapper>\n      <plume.SkewedBanner>\n        <NewsletterTitle>{t('Ulule Newsletter')}</NewsletterTitle>\n      </plume.SkewedBanner>\n      <Content>\n        <NewsletterBlock country={country} locale={locale} />\n      </Content>\n    </Wrapper>\n  )\n}\n\nconst Content = styled.div`\n  display: flex;\n  margin: 50px auto;\n  max-width: 1100px;\n  padding: 0 16px;\n\n  @media screen and ${plume.BREAKPOINTS.LAPTOP} {\n    padding: 0 80px;\n  }\n`\n\nconst NewsletterTitle = styled(plume.styles.heading.XL)`\n  color: ${plume.COLORS.PRIMARY_GREY_000};\n  font-family: ${plume.FONTS.EMPHASIS_FONT};\n  font-size: 50px;\n  font-style: italic;\n  font-weight: 900;\n  line-height: 1.1;\n\n  @media screen and (min-width: 768px) {\n    font-size: 80px;\n    min-width: 445px;\n  }\n`\n\nconst Wrapper = styled.div`\n  ${plume.SkewedBanner} {\n    background-color: ${plume.COLORS.PRIMARY_BLUE_500};\n    margin-bottom: 22px;\n    padding: 10% 8%;\n\n    @media screen and ${plume.BREAKPOINTS.LAPTOP} {\n      padding-top: 10em;\n      padding-bottom: 4em;\n    }\n  }\n\n  ${NewsletterTitle} {\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n`\n","import * as React from 'react'\nimport * as ReactDOM from 'react-dom/client'\nimport { BrowserRouter as Router } from 'react-router'\n\nimport { Header } from '@ulule/header'\nimport { initializeLocalization } from '@owl-nest/localize'\nimport * as logger from '@owl-nest/logger'\nimport * as layout from '@owl-nest/layout'\nimport * as env from '@owl-nest/config'\n\nimport { Newsletter } from './Newsletter'\n\nrenderApp()\n\nasync function renderApp(): Promise<void> {\n  await env.initUserConfig()\n  const userConfig = await env.getUserConfig()\n\n  await initializeLocalization(userConfig.lang, env.LOCALE_FILES[userConfig.lang])\n  const newsletterAppContainer = document.querySelector('#js-newsletter')\n\n  if (newsletterAppContainer) {\n    const appRoot = ReactDOM.createRoot(newsletterAppContainer)\n    appRoot.render(<Newsletter />)\n  } else {\n    logger.err('Newsletter container is missing')\n  }\n\n  const headerContainer = document.querySelector('#react-ulule-header')\n\n  // Router is needed as it is a dependency for partnership tracking. Not ideal.\n  if (headerContainer) {\n    const headerRoot = ReactDOM.createRoot(headerContainer)\n    headerRoot.render(\n      <Router>\n        <Header />\n      </Router>,\n    )\n  } else {\n    logger.err('Header container is missing')\n  }\n\n  const footerContainer = document.querySelector('#react-ulule-footer')\n\n  if (footerContainer) {\n    const headerRoot = ReactDOM.createRoot(footerContainer)\n    headerRoot.render(<layout.Footer lang={userConfig.lang} navSections={layout.getNavSectionList(userConfig.lang)} />)\n  } else {\n    logger.err('Footer container is missing')\n  }\n}\n"],"mappings":"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"}