{"version":3,"file":"ShopNewsletter.js","sources":["../src/components/Global/ShopNewsletter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n\nimport {computed, ref, watch} from \"vue\";\nimport {isMobile, windowDimension} from \"@/main.ts\";\n\n\nconst newsletterInputFocus = ref({\n  name: false,\n  email: false,\n})\n\nconst validation = ref({\n  name: false,\n  email: false,\n})\n\nconst formValue = ref({\n  name: '',\n  email: ''\n})\n\nwatch(formValue, ()=>{\n  if (formValue.value.name && formValue.value.name !== ''){\n    validation.value.name = true\n  } else{\n    validation.value.name = false\n  }\n\n  if (formValue.value.email && formValue.value.email !== ''){\n    validation.value.email = true\n  } else{\n    validation.value.email = false\n  }\n\n}, {deep:true})\n\nconst permissionOne = ref(false)\nconst permissionTwo = ref(false)\n\nconst allPermisionsChecked = computed(()=>{\n  return !!(validation.value.name && validation.value.email && permissionOne.value);\n})\n\n</script>\n\n<template>\n  <div class=\"relative pt-[40px] pb-[40px] mt-[20px]\">\n    <div class=\"bg-basic_color_three w-[100vw] h-full absolute top-0 left-[50%] -z-[1] -translate-x-[50%]\"></div>\n    <form action=\"/settings.php\" method=\"post\" class=\"newsletter_form text-white\">\n      <input id=\"mailing_action_contact\" name=\"mailing_action\" value=\"add\" type=\"hidden\">\n\n      <div class=\"flex flex-col items-center \">\n        <p class=\"uppercase text-newsletter_title_text_size leading-none text-center font-[700]\"\n        :class=\"{'!font-[600]': isMobile}\">Zapisz się\n          <br :class=\"{'hidden': !isMobile}\">\n          do newslettera</p>\n        <div class=\"flex gap-[10px] items-center justify-center\" :class=\"{'!items-start mt-[4px]': isMobile}\">\n          <img src=\"@/assets/svg/promotion.svg\" class=\"size-newsletter_icon_size\"  alt='ikona promocji' :class=\"{'mt-[8px]': isMobile}\">\n          <p class=\"text-newsletter_text_size font-[500] text-center\" :class=\"{'!font-[400]': isMobile}\">Zgarnij 20 zł rabatu\n            <br :class=\"{'hidden': !isMobile}\">\n            na pierwsze zakupy</p>\n        </div>\n      </div>\n\n      <div class=\"flex gap-[11px] justify-center pt-[42px] pb-[22px]\"\n           :class=\"{'!flex-col items-center !pt-[25px] !pb-[15px] !gap-[8px]': isMobile}\">\n        <div class=\"form-group w-[374px] mb-0\" :class=\"{'!w-[290px]': windowDimension.width<400}\">\n          <div class=\"has-feedback\">\n            <input\n                class=\"newsletter_form_field form-control validate !rounded-[25px] !border-none !text-newsletter_input_text_size !text-white\"\n                style=\"background: rgba(217,217,217,0.25)\"\n                name=\"mailing_name\"\n                id=\"mailing_name\"\n                type=\"text\"\n                maxlength=\"50\"\n                minlength=\"3\"\n                v-model=\"formValue.name\"\n                @focusin=\"newsletterInputFocus.name = true\"\n                @focusout=\"newsletterInputFocus.name = false\"\n            >\n            <label for=\"mailing_name\"\n                   class=\"control-label !bg-transparent !shadow-none !text-white text-newsletter_input_text_size\"\n                   :class=\"{'!-translate-y-[40px] !scale-[1]': newsletterInputFocus.name || formValue.name.length>0}\"\n            >\n              imię\n            </label>\n            <span class=\"form-control-feedback\"></span></div>\n        </div>\n\n        <div class=\"form-group w-[374px] mb-0\" :class=\"{'!w-[290px]': windowDimension.width<400}\">\n          <div class=\"has-feedback\">\n            <input\n                class=\"newsletter_form_field form-control validate !rounded-[25px] !border-none !text-newsletter_input_text_size !text-white\"\n                style=\"background: rgba(217,217,217,0.25)\"\n                name=\"mailing_email\"\n                id=\"mailing_email\"\n                type=\"text\"\n                data-validate=\"email\"\n                v-model=\"formValue.email\"\n                @focusin=\"newsletterInputFocus.email = true\"\n                @focusout=\"newsletterInputFocus.email = false\"\n            >\n            <label for=\"mailing_email\"\n                   class=\"control-label !bg-transparent !shadow-none !text-white text-newsletter_input_text_size\"\n                   :class=\"{'!-translate-y-[40px] !scale-[1]': newsletterInputFocus.email || formValue.email.length>0}\"\n            >\n              e-mail\n            </label>\n            <span class=\"form-control-feedback\"></span>\n          </div>\n        </div>\n\n        <div class=\"newsletter_button_wrapper w-[200px] h-full\">\n          <button type=\"submit\" style=\"display: none;\"></button>\n          <button id=\"newsletter_button_add\"\n                  type=\"submit\"\n                  class=\"!bg-newsletter_send_btn_bg w-full h-[50px] text-newsletter_input_text_size font-[700] rounded-[25px]\"\n                  :class=\"{'pointer-events-none opacity-[50%]': !allPermisionsChecked}\"\n                  value=\"Zapisz się\">\n            Zapisz się\n          </button>\n          <button id=\"newsletter_button_remove\" type=\"submit\" class=\"hidden btn --solid --secondary\" value=\"Wypisz się\">\n            Wypisz się\n          </button>\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-[10px] items-center mt-[10px] mb-[10px]\">\n        <div class=\"flex gap-[5px] hover:cursor-pointer group\"\n             @click=\"permissionOne = !permissionOne\"\n        >\n          <div\n              class=\"size-[16px] min-w-[16px] border border-[#D9D9D9] rounded-[5px] flex items-center justify-center\"\n              :class=\"[{'bg-basic_color_three': permissionOne},\n              {'!size-[20px] !min-w-[20px]': isMobile}\n              ]\"\n          >\n            <svg v-if=\"permissionOne\"\n                 class=\"fill-white w-[70%]\"\n                 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n              <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->\n              <path\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"/>\n            </svg>\n          </div>\n\n          <div class=\"text-newsletter_note_text_size\">\n            Klikając „Zapisz się” wyrażam chęć zapisu do newslettera, w celu otrzymywania informacji marketingowych. Wiem, że zgodę w każdej chwili mogę odwołać.\n          </div>\n        </div>\n      </div>\n\n      <div id=\"newsletter_privacy_consent\" class=\"hidden form-group col-12\">\n        <div class=\"has-feedback\"><label class=\"control-label d-flex align-items-center justify-content-center\">\n          <div class=\"text_to_right\">\n            <input class=\"newsletter_form_field validate\" name=\"newsletter_consent\"\n                   id=\"newsletter_consent\" type=\"checkbox\" checked>\n          </div>\n          <div class=\"text_to_left\">\n            Chcę otrzymywać E-mail Newsletter. Wyrażam zgodę na przetwarzanie moich danych osobowych do celów\n            marketingowych zgodnie z <a href=\"/pl/privacy-and-cookie-notice.html\">polityką prywatności</a></div>\n        </label></div>\n      </div>\n\n      <div></div>\n\n      <div class=\"text-newsletter_note_text_size text-center font-[200]\" :class=\"{'font-[300]': isMobile}\">\n        Administratorem danych osobowych jest 4KOM sp.z o.o., udostępnione powyżej dane będą przetwarzane w prawnie\n        uzasadnionym interesie administratora, za który uważa się marketing produktów i usług własnych. Podanie danych\n        jest dobrowolne, aczkolwiek niezbędne w celu otrzymywania newslettera. Każdy ma prawo do zgłoszenia sprzeciwu\n        wobec przetwarzania, a także żądania dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania\n        oraz prawo wniesienia skargi do organu nadzorczego.\n      </div>\n    </form>\n  </div>\n</template>\n\n<style scoped>\n\n</style>"],"names":["newsletterInputFocus","ref","validation","formValue","watch","permissionOne","allPermisionsChecked","computed"],"mappings":"moBAMA,MAAMA,EAAuBC,EAAI,CAC/B,KAAM,GACN,MAAO,EAAA,CACR,EAEKC,EAAaD,EAAI,CACrB,KAAM,GACN,MAAO,EAAA,CACR,EAEKE,EAAYF,EAAI,CACpB,KAAM,GACN,MAAO,EAAA,CACR,EAEDG,EAAMD,EAAW,IAAI,CACfA,EAAU,MAAM,MAAQA,EAAU,MAAM,OAAS,GACnDD,EAAW,MAAM,KAAO,GAExBA,EAAW,MAAM,KAAO,GAGtBC,EAAU,MAAM,OAASA,EAAU,MAAM,QAAU,GACrDD,EAAW,MAAM,MAAQ,GAEzBA,EAAW,MAAM,MAAQ,EAC3B,EAEC,CAAC,KAAK,GAAK,EAER,MAAAG,EAAgBJ,EAAI,EAAK,EACTA,EAAI,EAAK,EAEzB,MAAAK,EAAuBC,EAAS,IAC7B,CAAC,EAAEL,EAAW,MAAM,MAAQA,EAAW,MAAM,OAASG,EAAc,MAC5E"}