{"version":3,"file":"x08ig7NG.js","sources":["../../../../components/NewsletterSidebar.vue"],"sourcesContent":["<template>\n  <div class=\"newsletter-signup\">\n    <Transition name=\"fade\" mode=\"out-in\">\n      <div\n        class=\"newsletter-signup-wrapper\"\n        v-if=\"status == 'idle' || status == 'pending'\"\n      >\n        <h3><span class=\"m-cgg-icon--email\"></span>{{ t(\"title\") }}</h3>\n\n        <TextInput\n          ref=\"emailInput\"\n          class=\"input-email\"\n          :validation=\"emailValidation\"\n          :validation-mode=\"'none'\"\n          :modelValue=\"email\"\n          :type=\"'email'\"\n          :size=\"'sm'\"\n          :placeholder=\"t('input.email.placeholder')\"\n          @update:model-value=\"(v) => (email = v)\"\n        />\n        <CheckboxInput\n          ref=\"tcConsentInput\"\n          class=\"input-tc\"\n          :validation=\"tcConsentValidation\"\n          v-model=\"tcConsent\"\n          v-if=\"active\"\n        >\n          <i18n-t keypath=\"input.tcConsent.label.text\">\n            <NuxtLink href=\"/termos-condicoes-gerais\" target=\"_blank\">\n              {{ t(\"input.tcConsent.label.linkTc\") }}\n            </NuxtLink>\n            <NuxtLink href=\"/politica-privacidade\" target=\"_blank\">\n              {{ t(\"input.tcConsent.label.linkPp\") }}\n            </NuxtLink>\n          </i18n-t>\n        </CheckboxInput>\n        <div class=\"btn-container\" v-if=\"active\">\n          <CjaButton\n            :color=\"'orange'\"\n            :size=\"'sm'\"\n            :loading=\"status == 'pending'\"\n            @click=\"submit\"\n          >\n            {{ t(\"btn.submit\") }}\n          </CjaButton>\n        </div>\n      </div>\n      <div class=\"success-container\" v-else-if=\"status == 'success'\">\n        <div class=\"success-wrapper\">\n          <div class=\"image-container\">\n            <StoryblokImg\n              :image=\"{\n                filename:\n                  'https://a.storyblok.com/f/223704/96x84/aafed874b9/success-icon.svg',\n                alt: 'Sucesso',\n              }\"\n            />\n          </div>\n          <div class=\"text-container\">\n            <h4>\n              {{ t(\"success.title\") }}\n            </h4>\n            <p>\n              {{ t(\"success.description\") }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CheckboxInput, CjaButton, TextInput } from \"cja-phoenix\";\n\nconst { t } = useI18n();\n\nconst {\n  submit,\n  status,\n  email,\n  emailInput,\n  emailValidation,\n  tcConsent,\n  tcConsentInput,\n  tcConsentValidation,\n} = useNewsletterSignup();\n\nconst active = computed(() => email.value);\n\ndefineExpose({ active });\n</script>\n\n<style lang=\"scss\" scoped>\n.newsletter-signup {\n  background: $extra-light-blue;\n  padding: 16px 24px;\n  border-radius: 8px;\n\n  .newsletter-signup-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    width: 100%;\n    max-width: 560px;\n    margin: 0 auto;\n\n    @media screen and (min-width: $break-md-min) and (max-width: $break-lg-max) {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      column-gap: 32px;\n      align-items: center;\n    }\n\n    @media screen and (min-width: $break-xl-min) {\n      max-width: none;\n    }\n  }\n\n  h3 {\n    display: flex;\n    gap: 8px;\n    font-size: 16px;\n    line-height: 20px;\n    font-weight: 700;\n    text-align: center;\n    margin: 0;\n\n    @media screen and (min-width: $break-md-min) {\n      text-align: left;\n    }\n\n    span:before {\n      vertical-align: middle;\n    }\n  }\n\n  .spinner {\n    margin: 8px auto 24px;\n  }\n\n  .input-tc {\n    @media screen and (min-width: $break-md-min) and (max-width: $break-lg-max) {\n      grid-area: 2 / 1 / 3 / 3;\n    }\n  }\n\n  .btn-container {\n    display: grid;\n\n    @media screen and (min-width: $break-md-min) and (max-width: $break-lg-max) {\n      grid-area: 3 / 1 / 4 / 3;\n    }\n  }\n\n  .success-container {\n    .success-wrapper {\n      text-align: center;\n\n      .image-container {\n        img {\n          display: block;\n          margin: 0 auto 16px;\n        }\n      }\n\n      h4 {\n        font-size: 16px;\n        line-height: 20px;\n        margin: 0 0 8px;\n      }\n\n      p {\n        font-size: 14px;\n        line-height: 18px;\n        margin: 0;\n        white-space: pre-wrap;\n      }\n    }\n  }\n}\n\n@include fade-transition;\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Aprende a poupar connosco!\",\n    \"success\": {\n      \"title\": \"O teu email foi submetido com sucesso!\",\n      \"description\": \"Obrigado por subscreveres a newsletter. Receberás em breve as melhores dicas de poupança e acesso a ofertas exclusivas.\\nBem-vindo à nossa comunidade!\"\n    },\n    \"input\": {\n      \"email\": {\n        \"placeholder\": \"O teu email\"\n      }\n    },\n    \"btn\": {\n      \"submit\": \"Receber\"\n    }\n  }\n}\n</i18n>\n"],"names":["useI18n","submit","status","email","emailInput","emailValidation","tcConsent","tcConsentInput","tcConsentValidation","useNewsletterSignup","active","computed","__expose"],"mappings":"2dA2EM,KAAA,CAAE,CAAE,EAAIA,EAAQ,EAEhB,CACJ,OAAAC,EACA,OAAAC,EACA,MAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,oBAAAC,GACEC,EAAoB,EAElBC,EAASC,EAAS,IAAMR,EAAM,KAAK,EAE5B,OAAAS,EAAA,CAAE,OAAAF,EAAQ;"}