{"version":3,"file":"AlertsDeliveryMobileTab-36e6756b.js","sources":["../../../app/javascript/images/alert_mobile_delivery.png","../../../app/javascript/components/alerts/delivery/AlertsDeliveryMobileTab.vue"],"sourcesContent":["export default \"__VITE_ASSET__cd96bb10__\"","<template>\n  <div class=\"px-5 py-2\">\n    <div class=\"flex flex-1 flex-col gap-2\">\n      <div class=\"flex flex-1 flex-col gap-4\">\n        <div class=\"text-xs font-semibold\">Receive real-time alerts through our mobile app</div>\n        <div class=\"flex flex-1 flex-col justify-between gap-2\">\n          <template v-if=\"page == 1\">\n            <div class=\"h-12 text-xs font-medium text-gray-100\">\n              1. Scan this QR Code with your iOS device to download The Tie SigDev Terminal App.\n            </div>\n            <div class=\"flex h-60 items-center justify-center\">\n              <VueQrcode\n                class=\"h-40 w-40 rounded border border-black p-6\"\n                value=\"https://apps.apple.com/in/app/the-tie-sigdev-terminal/id1641937812\"\n                :width=\"206\"\n                :color=\"qrCodeColors\"\n                :margin=\"2\"\n              />\n            </div>\n          </template>\n          <template v-else-if=\"page == 2\">\n            <div class=\"h-12 text-xs font-medium text-gray-100\">2. In the app, scan this QR Code to login.</div>\n            <div class=\"flex h-60 items-center justify-center\">\n              <QRDisplay class=\"flex flex-col\" />\n            </div>\n          </template>\n          <template v-else-if=\"page == 3\">\n            <div class=\"flex h-12 flex-col gap-4 text-xs font-medium text-gray-100\">\n              <div>3. Now you'll be able to receive alerts in our built-in messenger on both mobile and desktop.</div>\n              <div>\n                When creating an alert, you'll be able to select the messaging channel you'd like to send the alerts in.\n              </div>\n            </div>\n            <div class=\"flex h-60 items-center justify-center\">\n              <img\n                class=\"rounded border border-grid\"\n                style=\"width: 330px; height: 230px\"\n                src=\"../../../images/alert_mobile_delivery.png\"\n              />\n            </div>\n          </template>\n        </div>\n      </div>\n      <BasePaginate v-model=\"page\" :pages=\"3\" class=\"mx-auto mb-5 mt-10 w-96\" />\n    </div>\n    <BaseButton type=\"secondary\" class=\"ml-auto mt-4\" @press=\"emitter.$emit('cancel:destination')\">Cancel</BaseButton>\n  </div>\n</template>\n\n<script setup>\nimport colors from 'tailwindcss/colors';\nimport VueQrcode from 'vue-qrcode';\nimport QRDisplay from '@/components/settings/QRDisplay.vue';\nimport useEmitter from '@/composeables/emitter';\nimport { ref } from 'vue';\n\nconst emitter = useEmitter();\n\nconst page = ref(1);\n\nconst qrCodeColors = {\n  dark: colors.slate['600'],\n  light: colors.slate['900']\n};\n</script>\n"],"names":["_imports_0","emitter","useEmitter","page","ref","qrCodeColors","colors"],"mappings":"8NAAA,MAAeA,EAAA,upCCwDf,MAAMC,EAAUC,EAAU,EAEpBC,EAAOC,EAAI,CAAC,EAEZC,EAAe,CACnB,KAAMC,EAAO,MAAM,GAAK,EACxB,MAAOA,EAAO,MAAM,GAAK,CAC3B"}