{"version":3,"file":"ShowEmbed-BWdOWqYu.js","sources":["../../../resources/js/Pages/Campaign/ShowEmbed.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TETopLabelLayout, TETextInput, TEButton } from '@ben/vite-te'\nimport { RadioGroup, RadioGroupOption } from '@headlessui/vue'\nimport '@iframe-resizer/child'\nimport axios from 'axios'\n\nimport type { Campaign } from '@/js/Types/laravel'\n\nconst props = defineProps<{\n  campaign: Campaign\n  recipients?: { name: string; email: string; id: number }[]\n}>()\n\nconst hasSigned = ref<boolean>(false)\n\nfunction postMessageToParent(message: string) {\n  if (window.parent) {\n    window.parent.postMessage({ type: 'uff', data: message }, '*')\n  }\n}\n\nconst form = useForm<{\n  first_name: string\n  last_name: string\n  email: string\n  zip: string\n  recipient_id: number | undefined\n}>({\n  first_name: '',\n  last_name: '',\n  email: '',\n  zip: '',\n  recipient_id: props.recipients ? props.recipients[0]?.id : undefined,\n})\nwindow.addEventListener('message', (event) => {\n  if (event.origin !== 'https://fridaysforfuture.de') {\n    // Validate the origin\n    return\n  }\n  const parentUrl = event.data.url\n\n  if (parentUrl) {\n    // eslint-disable-next-line no-console\n    console.log('Parent URL:', parentUrl)\n    const urlObj = new URL(parentUrl)\n\n    // Use URLSearchParams to extract parameters from the URL's query string\n    const params = new URLSearchParams(urlObj.search)\n\n    const firstName = params.get('first_name')\n    if (firstName) {\n      form.first_name = firstName\n    }\n    const lastName = params.get('last_name')\n    if (lastName) {\n      form.last_name = lastName\n    } else if (firstName && firstName.includes(' ')) {\n      const names = firstName.split(' ')\n      form.first_name = names[0]\n      form.last_name = names[1]\n    }\n    const plz = params.get('plz')\n    if (plz) {\n      form.zip = plz\n    }\n    const email = params.get('email')\n    if (email) {\n      form.email = email\n    }\n  }\n})\n\nconst mailToLinkDone = ref('')\nconst clickedFallback = ref(false)\nconst mailTextDone = ref('')\n\nfunction sign() {\n  if (props.campaign.campaign_type === 'email' && props.recipients) {\n    //select a random recipient form the list\n    const recipient = props.recipients.find((r) => r.id === form.recipient_id)\n    if (!recipient) {\n      return\n    }\n\n    mailTextDone.value =\n      props.campaign.email_campaign?.email_text\n        .replaceAll('$NAME_POL', recipient.name)\n        .replaceAll('$LASTNAME', form.last_name)\n        .replaceAll('$NAME', form.first_name) ?? ''\n\n    const subject = props.campaign.email_campaign?.subject\n\n    const mailtoLink = `mailto:${recipient.email}?bcc=newsletter+counter@fridaysforfuture.de&subject=${subject}&body=${mailTextDone.value.replaceAll(/(?:\\n)/g, '%0D%0A')}`\n    console.warn(mailtoLink)\n\n    mailToLinkDone.value = mailtoLink\n\n    globalThis.location.href = mailtoLink\n    hasSigned.value = true\n  }\n\n  if (props.campaign.campaign_type === 'petition') {\n    form.clearErrors()\n    axios\n      .post(route('campaign.participate', { campaign: props.campaign.id }), form)\n      .then(() => {\n        hasSigned.value = true\n        postMessageToParent('signed')\n      })\n      .catch((error) => {\n        console.error(error)\n        if (error.response && error.response.status === 422) {\n          form.errors = error.response.data.errors\n          form.errors.first_name = error.response.data.errors.first_name?.[0]\n          form.errors.last_name = error.response.data.errors.last_name?.[0]\n          form.errors.email = error.response.data.errors.email?.[0]\n          form.errors.zip = error.response.data.errors.zip?.[0]\n        }\n      })\n  }\n}\n</script>\n\n<template>\n  <div class=\"mx-4 max-w-5xl px-2 sm:mx-auto sm:px-0\" data-iframe-size>\n    <main class=\"-mx-4 mb-4 sm:mx-4\">\n      <TransitionGroup\n        name=\"list\"\n        tag=\"div\"\n        enter-active-class=\"transition transform duration-500 ease-out\"\n        leave-active-class=\"transition transform duration-500 ease-in\"\n        enter-from-class=\"translate-x-full opacity-0\"\n        enter-to-class=\"translate-x-0 opacity-100\"\n        leave-from-class=\"translate-x-0 opacity-100\"\n        leave-to-class=\"-translate-x-full opacity-0\"\n      >\n        <div v-if=\"!hasSigned\" class=\"top-0 flex flex-wrap rounded-3xl py-4\">\n          <div class=\"w-full bg-[#1b7340] px-2 text-[2.25rem] font-extrabold text-white\">\n            {{ campaign.customization_button_text ?? 'Jetzt unterschreiben' }}\n          </div>\n\n          <form class=\"w-full\" @submit.prevent>\n            <div class=\"mt-4 w-full gap-4 sm:grid sm:grid-cols-2\">\n              <template v-if=\"campaign.campaign_type === 'email'\">\n                <!-- Empfänger auswählen -->\n                <fieldset class=\"col-span-2 w-full\">\n                  <legend class=\"text-sm/6 font-semibold text-gray-900\">Empfänger</legend>\n\n                  <p class=\"mt-1 text-sm/6 text-gray-600\">Wer soll deine Protest-Mail bekommen?</p>\n\n                  <RadioGroup\n                    v-model=\"form.recipient_id\"\n                    class=\"mt-2 grid w-full grid-cols-3 gap-3 sm:grid-cols-4\"\n                  >\n                    <RadioGroupOption\n                      v-for=\"recipient in recipients\"\n                      :key=\"recipient.id\"\n                      v-slot=\"{ active, checked }\"\n                      as=\"template\"\n                      :value=\"recipient.id\"\n                    >\n                      <div\n                        class=\"flex cursor-pointer items-center justify-center rounded-md p-3 text-sm font-semibold sm:flex-1\"\n                        :class=\"[\n                          active ? 'ring-2 ring-primary-600 ring-offset-2' : '',\n                          checked\n                            ? 'bg-primary-600 text-white ring-0 hover:bg-primary-500'\n                            : 'bg-white text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50',\n                          !active && !checked ? 'ring-inset' : '',\n                          active && checked ? 'ring-2' : '',\n                        ]\"\n                      >\n                        {{ recipient.name }}\n                      </div>\n                    </RadioGroupOption>\n                  </RadioGroup>\n                </fieldset>\n              </template>\n\n              <TETopLabelLayout\n                title=\"Vorname\"\n                :error=\"form.errors.first_name\"\n                name=\"first_name\"\n                required\n              >\n                <TETextInput v-model=\"form.first_name\" name=\"first_name\" />\n              </TETopLabelLayout>\n\n              <TETopLabelLayout\n                title=\"Nachname\"\n                name=\"last_name\"\n                :error=\"form.errors.last_name\"\n                required\n              >\n                <TETextInput v-model=\"form.last_name\" name=\"last_name\" autocomplete=\"given-name\" />\n              </TETopLabelLayout>\n\n              <TETopLabelLayout\n                v-if=\"campaign.campaign_type === 'petition'\"\n                title=\"Email\"\n                name=\"email\"\n                :error=\"form.errors.email\"\n                required\n              >\n                <TETextInput v-model=\"form.email\" name=\"email\" autocomplete=\"email\" />\n              </TETopLabelLayout>\n\n              <TETopLabelLayout\n                v-if=\"campaign.campaign_type === 'petition'\"\n                title=\"Postleitzahl\"\n                name=\"zip\"\n                required\n                :error=\"form.errors.zip\"\n              >\n                <TETextInput\n                  v-model=\"form.zip\"\n                  type=\"number\"\n                  autocomplete=\"postal-code\"\n                  maxlength=\"5\"\n                  minlength=\"5\"\n                  name=\"zip\"\n                />\n              </TETopLabelLayout>\n            </div>\n\n            <div class=\"col-span-2 mb-2\">\n              <span class=\"text-sm text-gray-500\"\n                ><template v-if=\"campaign.customization_disclaimer\"\n                  >{{ campaign.customization_disclaimer }}&nbsp;</template\n                >\n\n                <template v-else\n                  >Ich bin damit einverstanden, dass die Unterzeichnung dieser Petition sowie meine\n                  E-Mail-Adresse, Name und Ort zur Durchführung der Petition bis zu deren Ende\n                  gespeichert werden. Mein Vorname, der erste Buchstabe meines Nachnamens und mein\n                  Wohnort werden den Empfänger*in der Petition überreicht. Zur Verifizierung meiner\n                  Daten erhalte ich eine entsprechende E-Mail mit weiteren Informationen. Diese\n                  Einwilligung kann jederzeit widerrufen werden.</template\n                >\n\n                <a href=\"https://fridaysforfuture.de/datenschutz\" class=\"underline\"\n                  >Mehr Infos</a\n                ></span\n              >\n            </div>\n\n            <TEButton\n              id=\"sign\"\n              type=\"button\"\n              :disabled=\"form.first_name === '' || form.last_name === ''\"\n              class=\"w-full !rounded-full\"\n              primary\n              @click=\"sign\"\n              ><span class=\"-m-2 text-xl font-bold uppercase\">{{\n                campaign.customization_button_text ?? 'Jetzt unterschreiben'\n              }}</span>\n            </TEButton>\n          </form>\n        </div>\n\n        <div v-else class=\"top-0 flex flex-wrap rounded-3xl py-4\">\n          <div class=\"w-full bg-[#1b7340] px-2 text-[2.25rem] font-extrabold text-white\">\n            Noch ein Schritt fehlt - jetzt E-Mail\n            {{ campaign.campaign_type === 'petition' ? 'bestätigen' : 'versenden' }}!\n          </div>\n\n          <div>\n            <p class=\"mt-4\">\n              <template v-if=\"campaign.campaign_type === 'email'\"\n                ><b>Nicht geklappt?</b>\n\n                <u @click=\"clickedFallback = true\"\n                  ><a :href=\"mailToLinkDone\" target=\"_blank\">Hier klicken!</a></u\n                >\n\n                <div v-if=\"clickedFallback\">\n                  <i>Hier kannst du den Text kopieren:</i>\n\n                  <br />\n\n                  <b>Empfänger:in: </b>\n\n                  <pre>{{ props.recipients?.find((r) => r.id === form.recipient_id)?.email }}</pre>\n\n                  <b>Betreff:</b>\n\n                  <pre>{{ campaign.email_campaign!.subject }}</pre>\n\n                  <b>Deine Nachricht:</b>\n\n                  <br />\n\n                  <pre>{{ mailTextDone }}</pre>\n                </div>\n              </template>\n\n              <template v-if=\"campaign.customization_confirmation_text\"\n                >{{ campaign.customization_confirmation_text }}\n              </template>\n\n              <template v-else>\n                Rufe deine E-Mail jetzt ab und klicke auf den Bestätigungslink. Nur dann können wir\n                deine Stimme zählen! Die Bestätigung stellt sicher, dass jede Unterschrift\n                tatsächlich von einem Menschen kommt.\n              </template>\n            </p>\n\n            <p class=\"whitespace-pre-wrap\">{{ campaign.email_footer }}</p>\n          </div>\n        </div>\n      </TransitionGroup>\n    </main>\n  </div>\n</template>\n\n<style>\n.box {\n  box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.3);\n}\n\nli {\n  list-style-type: disc;\n  margin-left: 2rem;\n}\n\np + p {\n  margin-top: 1rem;\n}\n\nbody {\n  @apply !bg-white;\n}\n</style>\n"],"names":["props","__props","hasSigned","ref","postMessageToParent","message","form","useForm","_a","event","parentUrl","urlObj","params","firstName","lastName","names","plz","email","mailToLinkDone","clickedFallback","mailTextDone","sign","recipient","r","subject","_b","mailtoLink","axios","route","error","_c","_d"],"mappings":"8gCAQA,MAAMA,EAAQC,EAKRC,EAAYC,EAAa,EAAK,EAEpC,SAASC,EAAoBC,EAAiB,CACxC,OAAO,QACF,OAAA,OAAO,YAAY,CAAE,KAAM,MAAO,KAAMA,GAAW,GAAG,CAC/D,CAGF,MAAMC,EAAOC,EAMV,CACD,WAAY,GACZ,UAAW,GACX,MAAO,GACP,IAAK,GACL,aAAcP,EAAM,YAAaQ,EAAAR,EAAM,WAAW,CAAC,IAAlB,YAAAQ,EAAqB,GAAK,MAAA,CAC5D,EACM,OAAA,iBAAiB,UAAYC,GAAU,CACxC,GAAAA,EAAM,SAAW,8BAEnB,OAEI,MAAAC,EAAYD,EAAM,KAAK,IAE7B,GAAIC,EAAW,CAEL,QAAA,IAAI,cAAeA,CAAS,EAC9B,MAAAC,EAAS,IAAI,IAAID,CAAS,EAG1BE,EAAS,IAAI,gBAAgBD,EAAO,MAAM,EAE1CE,EAAYD,EAAO,IAAI,YAAY,EACrCC,IACFP,EAAK,WAAaO,GAEd,MAAAC,EAAWF,EAAO,IAAI,WAAW,EACvC,GAAIE,EACFR,EAAK,UAAYQ,UACRD,GAAaA,EAAU,SAAS,GAAG,EAAG,CACzC,MAAAE,EAAQF,EAAU,MAAM,GAAG,EAC5BP,EAAA,WAAaS,EAAM,CAAC,EACpBT,EAAA,UAAYS,EAAM,CAAC,CAAA,CAEpB,MAAAC,EAAMJ,EAAO,IAAI,KAAK,EACxBI,IACFV,EAAK,IAAMU,GAEP,MAAAC,EAAQL,EAAO,IAAI,OAAO,EAC5BK,IACFX,EAAK,MAAQW,EACf,CACF,CACD,EAEK,MAAAC,EAAiBf,EAAI,EAAE,EACvBgB,EAAkBhB,EAAI,EAAK,EAC3BiB,EAAejB,EAAI,EAAE,EAE3B,SAASkB,GAAO,SACd,GAAIrB,EAAM,SAAS,gBAAkB,SAAWA,EAAM,WAAY,CAE1D,MAAAsB,EAAYtB,EAAM,WAAW,KAAMuB,GAAMA,EAAE,KAAOjB,EAAK,YAAY,EACzE,GAAI,CAACgB,EACH,OAGFF,EAAa,QACXZ,EAAAR,EAAM,SAAS,iBAAf,YAAAQ,EAA+B,WAC5B,WAAW,YAAac,EAAU,MAClC,WAAW,YAAahB,EAAK,WAC7B,WAAW,QAASA,EAAK,cAAe,GAEvC,MAAAkB,GAAUC,EAAAzB,EAAM,SAAS,iBAAf,YAAAyB,EAA+B,QAEzCC,EAAa,UAAUJ,EAAU,KAAK,uDAAuDE,CAAO,SAASJ,EAAa,MAAM,WAAW,UAAW,QAAQ,CAAC,GACrK,QAAQ,KAAKM,CAAU,EAEvBR,EAAe,MAAQQ,EAEvB,WAAW,SAAS,KAAOA,EAC3BxB,EAAU,MAAQ,EAAA,CAGhBF,EAAM,SAAS,gBAAkB,aACnCM,EAAK,YAAY,EACjBqB,EACG,KAAKC,EAAM,uBAAwB,CAAE,SAAU5B,EAAM,SAAS,EAAA,CAAI,EAAGM,CAAI,EACzE,KAAK,IAAM,CACVJ,EAAU,MAAQ,GAClBE,EAAoB,QAAQ,CAAA,CAC7B,EACA,MAAOyB,GAAU,aAChB,QAAQ,MAAMA,CAAK,EACfA,EAAM,UAAYA,EAAM,SAAS,SAAW,MACzCvB,EAAA,OAASuB,EAAM,SAAS,KAAK,OAClCvB,EAAK,OAAO,YAAaE,EAAAqB,EAAM,SAAS,KAAK,OAAO,aAA3B,YAAArB,EAAwC,GACjEF,EAAK,OAAO,WAAYmB,EAAAI,EAAM,SAAS,KAAK,OAAO,YAA3B,YAAAJ,EAAuC,GAC/DnB,EAAK,OAAO,OAAQwB,EAAAD,EAAM,SAAS,KAAK,OAAO,QAA3B,YAAAC,EAAmC,GACvDxB,EAAK,OAAO,KAAMyB,EAAAF,EAAM,SAAS,KAAK,OAAO,MAA3B,YAAAE,EAAiC,GACrD,CACD,EACL"}