{"version":3,"sources":["webpack:///./node_modules/core-js/internals/string-pad.js","webpack:///./src/assets/images/whatsapp/whatsapp-profile.svg","webpack:///./src/components/TourGuide/useTourGuideTitleAnimation.js","webpack:///./node_modules/core-js/modules/es.string.pad-start.js","webpack:///./src/components/AdvancedPhonePreview/WhatsAppSkeleton.vue?41e3","webpack:///./src/components/AdvancedPhonePreview/WhatsAppSkeleton.vue?3bd9","webpack:///./src/components/AdvancedPhonePreview/IPhoneSkeleton.vue?a834","webpack:///src/components/AdvancedPhonePreview/IPhoneSkeleton.vue","webpack:///./src/components/AdvancedPhonePreview/IPhoneSkeleton.vue?01cc","webpack:///./src/components/AdvancedPhonePreview/IPhoneSkeleton.vue?3cc4","webpack:///src/components/AdvancedPhonePreview/WhatsAppSkeleton.vue","webpack:///./src/components/AdvancedPhonePreview/WhatsAppSkeleton.vue?8f29","webpack:///./src/components/AdvancedPhonePreview/WhatsAppSkeleton.vue?0032","webpack:///./src/components/TourGuide/TourGuideSteps/MessagesPreview.vue?3b52","webpack:///src/components/TourGuide/TourGuideSteps/MessagesPreview.vue","webpack:///./src/components/TourGuide/TourGuideSteps/MessagesPreview.vue?c8ca","webpack:///./src/components/TourGuide/TourGuideSteps/MessagesPreview.vue?4ef3","webpack:///./src/components/AdvancedPhonePreview/IPhoneSkeleton.vue?3c88","webpack:///./node_modules/core-js/internals/string-pad-webkit-bug.js","webpack:///./src/components/TourGuide/TourGuideSteps/MessagesPreview.vue?a80c"],"names":["uncurryThis","toLength","toString","$repeat","requireObjectCoercible","repeat","stringSlice","slice","ceil","Math","createMethod","IS_END","$this","maxLength","fillString","fillLen","stringFiller","S","intMaxLength","stringLength","length","fillStr","undefined","module","exports","start","end","useTourGuideTitleAnimation","props","activateOtherAnimation","deactivateOtherAnimation","showTitles","ref","activateAnimation","setTimeout","value","watch","currentStep","newStep","stepIndex","immediate","$","$padStart","WEBKIT_BUG","target","proto","forced","padStart","this","arguments","render","_vm","_h","$createElement","_c","_self","attrs","isRtl","staticClass","_v","_s","icons","mdiChevronRight","mdiChevronLeft","onlineText","dateIndicator","_e","_l","msg","index","directives","name","rawName","expression","key","class","imageUrl","domProps","content","time","defaultTime","buttons","btn","btnIndex","last","rtlIcon","icon","text","staticRenderFns","_m","_t","component","components","IPhoneSkeleton","type","default","lang","required","messages","setup","mdiSubdirectoryArrowLeft","mdiSubdirectoryArrowRight","fallbackTime","VIcon","VImg","staticStyle","$t","$store","state","eventData","languages","includes","displayMessages","WhatsAppSkeleton","store","id","messagesRaw","getMessages","preference","messagesType","WHATSAPP","giftManagerConfigured","SMS","finalMessages","mdiAlertCircleOutline","userAgent","test"],"mappings":"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","file":"js/chunk-9ba4c8cc.e6165013.js","sourcesContent":["// https://github.com/tc39/proposal-string-pad-start-end\nvar uncurryThis = require('../internals/function-uncurry-this');\nvar toLength = require('../internals/to-length');\nvar toString = require('../internals/to-string');\nvar $repeat = require('../internals/string-repeat');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\nvar repeat = uncurryThis($repeat);\nvar stringSlice = uncurryThis(''.slice);\nvar ceil = Math.ceil;\n\n// `String.prototype.{ padStart, padEnd }` methods implementation\nvar createMethod = function (IS_END) {\n  return function ($this, maxLength, fillString) {\n    var S = toString(requireObjectCoercible($this));\n    var intMaxLength = toLength(maxLength);\n    var stringLength = S.length;\n    var fillStr = fillString === undefined ? ' ' : toString(fillString);\n    var fillLen, stringFiller;\n    if (intMaxLength <= stringLength || fillStr == '') return S;\n    fillLen = intMaxLength - stringLength;\n    stringFiller = repeat(fillStr, ceil(fillLen / fillStr.length));\n    if (stringFiller.length > fillLen) stringFiller = stringSlice(stringFiller, 0, fillLen);\n    return IS_END ? S + stringFiller : stringFiller + S;\n  };\n};\n\nmodule.exports = {\n  // `String.prototype.padStart` method\n  // https://tc39.es/ecma262/#sec-string.prototype.padstart\n  start: createMethod(false),\n  // `String.prototype.padEnd` method\n  // https://tc39.es/ecma262/#sec-string.prototype.padend\n  end: createMethod(true)\n};\n","module.exports = __webpack_public_path__ + \"img/whatsapp-profile.4459a971.svg\";","import { ref, watch } from '@vue/composition-api'\n\nexport function useTourGuideTitleAnimation(props, activateOtherAnimation = null, deactivateOtherAnimation = null) {\n    const showTitles = ref(false)\n\n    const activateAnimation = () => {\n        setTimeout(() => {\n            showTitles.value = true\n            if (activateOtherAnimation) {\n                activateOtherAnimation()\n            }\n        }, 2)\n    }\n\n    watch(\n        () => props.currentStep,\n        newStep => {\n            if (newStep === props.stepIndex) {\n                activateAnimation()\n            } else {\n                if (deactivateOtherAnimation) {\n                    deactivateOtherAnimation()\n                }\n                showTitles.value = false\n            }\n        }, { immediate: true },\n    )\n\n    return {\n        showTitles,\n        activateAnimation,\n    }\n}","'use strict';\nvar $ = require('../internals/export');\nvar $padStart = require('../internals/string-pad').start;\nvar WEBKIT_BUG = require('../internals/string-pad-webkit-bug');\n\n// `String.prototype.padStart` method\n// https://tc39.es/ecma262/#sec-string.prototype.padstart\n$({ target: 'String', proto: true, forced: WEBKIT_BUG }, {\n  padStart: function padStart(maxLength /* , fillString = ' ' */) {\n    return $padStart(this, maxLength, arguments.length > 1 ? arguments[1] : undefined);\n  }\n});\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./WhatsAppSkeleton.vue?vue&type=style&index=0&id=392519b3&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('IPhoneSkeleton',{attrs:{\"dir\":_vm.isRtl ? 'rtl' : 'ltr'}},[_c('div',{staticClass:\"whatsapp\"},[_c('div',{staticClass:\"whatsapp-header\"},[_c('div',{staticClass:\"left-accessory d-flex\"},[_c('div',{staticClass:\"go-back d-flex\"},[_c('v-icon',{attrs:{\"size\":\"22\",\"color\":\"#007aff\"}},[_vm._v(\" \"+_vm._s(_vm.isRtl ? _vm.icons.mdiChevronRight : _vm.icons.mdiChevronLeft)+\" \")]),_c('span',{staticClass:\"header-counter\"},[_vm._v(\"14\")])],1),_c('div',{staticClass:\"profile d-flex\"},[_c('div',[_c('v-img',{attrs:{\"width\":\"28\",\"src\":require('@/assets/images/whatsapp/whatsapp-profile.svg')}})],1),_c('div',{staticClass:\"profile-title d-flex\"},[_c('div',{staticClass:\"profile-name\"},[_vm._v(\" Anita Lee \")]),_c('div',{staticClass:\"online-mark\"},[_vm._v(\" \"+_vm._s(_vm.onlineText)+\" \")])])])]),_c('div',{staticClass:\"right-accessory\"},[_c('div',{staticClass:\"call-icons\"})])]),_c('div',{staticClass:\"whatsapp-body\"},[(_vm.dateIndicator)?_c('div',{staticClass:\"date-indicator\"},[_c('div',{staticClass:\"date-btn\"},[_vm._v(\" \"+_vm._s(_vm.dateIndicator)+\" \")])]):_vm._e(),_vm._l((_vm.messages),function(msg,index){return _c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(msg.content),expression:\"msg.content\"}],key:index,class:['message-block', { 'rtl-message': _vm.isRtl }]},[_c('div',{staticClass:\"card-content\"},[(msg.imageUrl)?_c('div',[_c('v-img',{staticClass:\"card-media\",attrs:{\"src\":msg.imageUrl,\"contain\":\"\"}})],1):_vm._e(),_c('div',{staticClass:\"message-text\",domProps:{\"textContent\":_vm._s(msg.content)}})]),_c('div',{staticClass:\"message-block-date\"},[_vm._v(\" \"+_vm._s(msg.time || _vm.defaultTime)+\" \")]),(msg.buttons && msg.buttons.length)?_c('div',{staticClass:\"card-buttons\"},_vm._l((msg.buttons),function(btn,btnIndex){return _c('div',{key:btnIndex,staticClass:\"card-button\",class:{ last: btnIndex === msg.buttons.length - 1 }},[_c('v-icon',{attrs:{\"size\":\"8\",\"color\":\"#007aff\"}},[_vm._v(\" \"+_vm._s(_vm.isRtl ? btn.rtlIcon : btn.icon)+\" \")]),_vm._v(\" \"+_vm._s(btn.text)+\" \")],1)}),0):_vm._e()])})],2),_c('div',{staticClass:\"whatsapp-footer\"})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"outside-border\"},[_c('div',{staticClass:\"silencer\"}),_c('div',{staticClass:\"volume-up\"}),_c('div',{staticClass:\"volume-down\"}),_c('div',{staticClass:\"button-on\"}),_c('div',{staticClass:\"inside-border\"},[_vm._m(0),_vm._t(\"default\"),_vm._m(1),_c('div',{staticClass:\"bottom-line\"})],2)])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"camera\"},[_c('div',{staticClass:\"camera-dot\"},[_c('div',{staticClass:\"camera-dot-2\"}),_c('div',{staticClass:\"camera-dot-3\"})]),_c('div',{staticClass:\"camera-speaker\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"t-r-info\"},[_c('div',{staticClass:\"dots\"},[_vm._v(\" ... \")]),_c('div',{staticClass:\"battery\"},[_c('div',{staticClass:\"bar\"}),_c('div',{staticClass:\"dot\"})])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <div class=\"outside-border\">\n      <div class=\"silencer\"></div>\n      <div class=\"volume-up\"></div>\n      <div class=\"volume-down\"></div>\n      <div class=\"button-on\"></div>\n      <div class=\"inside-border\">\n        <!-- Camera -->\n        <div class=\"camera\">\n          <div class=\"camera-dot\">\n            <div class=\"camera-dot-2\"></div>\n            <div class=\"camera-dot-3\"></div>\n          </div>\n          <div class=\"camera-speaker\">\n          </div>\n        </div>\n        <!-- CONTENT START -->\n        <slot></slot>\n        <!-- CONTENT END -->\n\n        <!-- Battery and Signal -->\n\n        <div class=\"t-r-info\">\n          <div class=\"dots\">\n            ...\n          </div>\n          <div class=\"battery\">\n            <div class=\"bar\"></div>\n            <div class=\"dot\"></div>\n          </div>\n        </div>\n\n        <!-- Bottom Line -->\n\n        <div class=\"bottom-line\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'IPhoneSkeleton',\n}\n</script>\n<style lang=\"scss\" scoped>\n$box_shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),\n  0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);\n\n.outside-border {\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  width: 212px;\n  height: 438px;\n  border: 0.6px solid black;\n  margin-left: -9px;\n  border-radius: 35px;\n}\n\n.silencer {\n  position: absolute;\n  background-color: black;\n  border-radius: 5px;\n  width: 2px;\n  height: 13px;\n  left: -2px;\n  top: 81.5px;\n  opacity: 0.8;\n}\n\n.volume- {\n  &up,\n  &down {\n    position: absolute;\n    background-color: black;\n    border-radius: 5px;\n    height: 28px;\n    width: 1px;\n    left: -1.5px;\n    opacity: 0.8;\n  }\n  &up {\n    top: 110px;\n  }\n  &down {\n    top: 148px;\n  }\n}\n\n.button-on {\n  position: absolute;\n  background-color: black;\n  border-radius: 5px;\n  height: 45px;\n  width: 2px;\n  right: -2px;\n  opacity: 0.8;\n  top: 121px;\n}\n\n.inside-border {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border: 6px solid black;\n  border-radius: 35px;\n  background: #f6f6f6;\n  overflow: hidden;\n}\n\n.camera {\n  display: flex;\n  justify-content: center;\n  position: relative;\n  width: 76px;\n  height: 20px;\n  background-color: black;\n  border-bottom-left-radius: 15px;\n  border-bottom-right-radius: 15px;\n  top: 0;\n}\n\n.camera-dot {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.2);\n  border-radius: 50%;\n  width: 5px;\n  height: 5px;\n  left: 12px;\n  top: 5px;\n}\n\n.camera-dot-2 {\n  position: absolute;\n  background-color: #000000;\n  border-radius: 50%;\n  width: 4px;\n  height: 4px;\n  opacity: 0.3;\n  box-shadow: $box_shadow;\n  filter: blur(1px);\n}\n\n.camera-dot-3 {\n  position: absolute;\n  background-color: #000;\n  border-radius: 50%;\n  width: 1px;\n  height: 1px;\n  opacity: 0.7;\n}\n\n.camera-speaker {\n  position: absolute;\n  background-color: #000000;\n  width: 28px;\n  height: 1px;\n  border-radius: 20px;\n  top: -3px;\n  opacity: 0.2;\n}\n\n.t-r-info {\n  display: flex;\n  gap: 5px;\n  position: absolute;\n  right: 17px;\n  top: 8px;\n  font-size: 10px;\n}\n\n.battery {\n  position: relative;\n  margin-top: 4px;\n  height: 7px;\n  width: 14px;\n  border: 0.7px solid rgba(0, 0, 0, 0.709);\n  border-radius: 2px;\n  .bar {\n    width: calc(80% - 2px);\n    height: calc(100% - 2px);\n    background-color: #000000;\n    margin: 1px;\n    border-radius: 1px;\n  }\n  .dot {\n    position: absolute;\n    right: -2px;\n    top: 1.5px;\n    width: 1px;\n    height: 3px;\n    background-color: rgba(0, 0, 0, 0.709);\n    border-radius: 2px;\n  }\n}\n\n.bottom-line {\n  position: absolute;\n  height: 2px;\n  width: 80px;\n  background-color: #000000;\n  bottom: 6px;\n  border-radius: 2px;\n  opacity: 0.8;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./IPhoneSkeleton.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./IPhoneSkeleton.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./IPhoneSkeleton.vue?vue&type=template&id=1aa3450c&scoped=true&\"\nimport script from \"./IPhoneSkeleton.vue?vue&type=script&lang=js&\"\nexport * from \"./IPhoneSkeleton.vue?vue&type=script&lang=js&\"\nimport style0 from \"./IPhoneSkeleton.vue?vue&type=style&index=0&id=1aa3450c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"1aa3450c\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <!-- 1) Use your existing iPhone frame as a wrapper -->\n  <IPhoneSkeleton :dir=\"isRtl ? 'rtl' : 'ltr'\">\n    <div class=\"whatsapp\">\n      <!-- === HEADER === -->\n      <div class=\"whatsapp-header\">\n        <div class=\"left-accessory d-flex\">\n          <div class=\"go-back d-flex\">\n            <v-icon\n              size=\"22\"\n              color=\"#007aff\"\n            >\n              {{ isRtl ? icons.mdiChevronRight : icons.mdiChevronLeft }}\n            </v-icon>\n            <span class=\"header-counter\">14</span>\n          </div>\n          <div class=\"profile d-flex\">\n            <div>\n              <v-img\n                width=\"28\"\n                :src=\"require('@/assets/images/whatsapp/whatsapp-profile.svg')\"\n              />\n            </div>\n            <div class=\"profile-title d-flex\">\n              <div class=\"profile-name\">\n                Anita Lee\n              </div>\n              <div class=\"online-mark\">\n                {{ onlineText }}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"right-accessory\">\n          <div class=\"call-icons\">\n            <!-- Optional icons for voice/video calls -->\n          </div>\n        </div>\n      </div>\n      <!-- === END HEADER === -->\n\n      <!-- === BODY === -->\n      <div class=\"whatsapp-body\">\n        <!-- Date indicator (if you'd like to display something like 'Today', 'Yesterday', etc.) -->\n        <div\n          v-if=\"dateIndicator\"\n          class=\"date-indicator\"\n        >\n          <div class=\"date-btn\">\n            {{ dateIndicator }}\n          </div>\n        </div>\n\n        <!-- Loop through all messages passed by props -->\n        <div\n          v-for=\"(msg, index) in messages\"\n          v-show=\"msg.content\"\n          :key=\"index\"\n          :class=\"['message-block', { 'rtl-message': isRtl }]\"\n        >\n          <!-- Media + Content -->\n          <div class=\"card-content\">\n            <!-- Optional image -->\n            <div v-if=\"msg.imageUrl\">\n              <v-img\n                class=\"card-media\"\n                :src=\"msg.imageUrl\"\n                contain\n              />\n            </div>\n\n            <!-- Text content -->\n            <div\n              class=\"message-text\"\n              v-text=\"msg.content\"\n            >\n            </div>\n          </div>\n\n          <!-- Time -->\n          <div class=\"message-block-date\">\n            {{ msg.time || defaultTime }}\n          </div>\n\n          <!-- Buttons (if any) -->\n          <div\n            v-if=\"msg.buttons && msg.buttons.length\"\n            class=\"card-buttons\"\n          >\n            <div\n              v-for=\"(btn, btnIndex) in msg.buttons\"\n              :key=\"btnIndex\"\n              class=\"card-button\"\n              :class=\"{ last: btnIndex === msg.buttons.length - 1 }\"\n            >\n              <!-- Icon -->\n              <v-icon\n                size=\"8\"\n                color=\"#007aff\"\n              >\n                {{ isRtl ? btn.rtlIcon : btn.icon }}\n              </v-icon>\n\n              <!-- Button Text -->\n              {{ btn.text }}\n            </div>\n          </div>\n        </div>\n        <!-- END messages loop -->\n      </div>\n      <!-- === END BODY === -->\n\n      <!-- === FOOTER === -->\n      <div class=\"whatsapp-footer\">\n        <!-- Optionally place a text input or more icons here -->\n      </div>\n      <!-- === END FOOTER === -->\n    </div>\n  </IPhoneSkeleton>\n</template>\n\n<script>\nimport { mdiChevronLeft, mdiChevronRight, mdiSubdirectoryArrowLeft, mdiSubdirectoryArrowRight } from '@mdi/js'\n\nimport { i18n } from '@/plugins/i18n/index'\nimport { ref, watch } from '@vue/composition-api'\nimport IPhoneSkeleton from './IPhoneSkeleton.vue'\n// eslint-disable-next-line import/no-cycle\n\nexport default {\n  name: 'WhatsAppSkeleton',\n  components: {\n    IPhoneSkeleton,\n  },\n  props: {\n    /**\n     * Whether the layout should be right-to-left.\n     */\n    isRtl: {\n      type: Boolean,\n      default: false,\n    },\n\n    lang: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The array of messages to display.\n     * Each message can be shaped like:\n     * {\n     *   content: \"string\",\n     *   imageUrl?: \"string\", // optional\n     *   time?: \"string\",\n     *   buttons?: [\n     *     { text: \"I'm Coming\", icon: mdiSubdirectoryArrowLeft, rtlIcon: mdiSubdirectoryArrowRight },\n     *     ...\n     *   ]\n     * }\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * If a message doesn't include its own time,\n     * we can fall back to a default (e.g., current time).\n     */\n    defaultTime: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props) {\n    // If you want a dynamic fallback time, you can do:\n    const getCurrentTime = () => {\n      const now = new Date()\n      const hours = String(now.getHours()).padStart(2, '0')\n      const minutes = String(now.getMinutes()).padStart(2, '0')\n\n      return `${hours}:${minutes}`\n    }\n\n    const dateIndicator = ref(i18n.t('Today', props.lang))\n    const onlineText = ref(i18n.t('whatsappOnline', props.lang))\n\n    // Example: if \"defaultTime\" prop is not provided, generate once\n    const fallbackTime = ref(props.defaultTime || getCurrentTime())\n\n    // Consolidate icons so you can reference them easily\n    const icons = {\n      mdiChevronLeft,\n      mdiChevronRight,\n      mdiSubdirectoryArrowLeft,\n      mdiSubdirectoryArrowRight,\n    }\n\n    watch(\n      () => props.lang,\n      newLang => {\n        dateIndicator.value = i18n.t('Today', newLang)\n        onlineText.value = i18n.t('whatsappOnline', newLang)\n      },\n    )\n\n    return {\n      icons,\n      fallbackTime,\n      dateIndicator,\n      onlineText,\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.whatsapp {\n  margin-top: 30px;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background-image: url('~@/assets/images/whatsapp/background.png') !important;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.whatsapp-header {\n  width: 100%;\n  height: 30px;\n  background: #f6f6f6;\n  padding-inline: 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n/* Left Accessory (Back button, profile) */\n.left-accessory {\n  align-items: center;\n  display: flex;\n}\n\n.go-back {\n  color: #007aff;\n  align-items: center;\n  display: flex;\n}\n\n.header-counter {\n  font-size: 10px;\n  margin-inline-start: -5px;\n}\n\n.profile {\n  display: flex;\n  align-items: center;\n  padding-inline-start: 10px;\n\n  .profile-title {\n    display: flex;\n    flex-direction: column;\n    padding-inline-start: 4px;\n\n    .profile-name {\n      font-size: 10px;\n      color: #000000;\n      line-height: 12px;\n      font-weight: 500;\n    }\n    .online-mark {\n      color: #898989;\n      font-size: 7px;\n    }\n  }\n}\n\n/* Body scrolling area */\n.whatsapp-body {\n  max-height: 340px;\n  overflow: auto;\n  scroll-behavior: smooth;\n  scrollbar-color: transparent transparent;\n}\n\n/* Date indicator (like \"Today\") */\n.date-indicator {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n\n  .date-btn {\n    background: #dbdfeb;\n    width: 70px;\n    height: 12px;\n    border-radius: 4px;\n    color: #414350;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 8px;\n    font-weight: 700;\n  }\n}\n\n/* Single message bubble */\n.message-block {\n  position: relative;\n  width: 80%;\n  background: #f9f9f9;\n  border-radius: 5px;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  margin: 10px 0;\n  margin-inline-start: 8px;\n  font-size: 10px;\n  color: #000000;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 3px;\n    left: -6px; /* pointer on the left for LTR */\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 3px 7px 7px 0;\n    border-color: transparent #f9f9f9 transparent transparent;\n  }\n}\n\n/* Flip pointer for RTL */\n.rtl-message {\n  &::after {\n    left: auto;\n    right: -6px;\n    border-width: 3px 0 7px 7px;\n    border-color: transparent transparent transparent #f9f9f9;\n  }\n}\n\n/* Message content area */\n.card-content {\n  padding: 5px;\n  padding-bottom: 0;\n\n  .card-media {\n    margin-bottom: 5px;\n    max-width: 300px;\n    max-height: 300px;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .message-text {\n    /* multiline text, if needed: */\n    white-space: pre-wrap;\n  }\n}\n\n/* Time at the bottom-right (or bottom-left if we use text-align) */\n.message-block-date {\n  text-align: end;\n  color: rgba(0, 0, 0, 0.2);\n  font-weight: 600;\n  font-size: 8px;\n  line-height: 8px;\n  padding-bottom: 5px;\n  padding-inline-end: 5px;\n}\n\n/* Buttons container */\n.card-buttons {\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n}\n\n/* Single button */\n.card-button {\n  background: none;\n  border: none;\n  border-top: 0.5px solid #e0e0e0; /* thin gray border on top */\n  padding: 5px 0;\n  font-size: 10px;\n  color: #278257;\n  cursor: pointer;\n  text-align: center;\n\n  /* Icon and text side by side */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./WhatsAppSkeleton.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./WhatsAppSkeleton.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./WhatsAppSkeleton.vue?vue&type=template&id=392519b3&scoped=true&\"\nimport script from \"./WhatsAppSkeleton.vue?vue&type=script&lang=js&\"\nexport * from \"./WhatsAppSkeleton.vue?vue&type=script&lang=js&\"\nimport style0 from \"./WhatsAppSkeleton.vue?vue&type=style&index=0&id=392519b3&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"392519b3\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VImg } from 'vuetify/lib/components/VImg';\ninstallComponents(component, {VIcon,VImg})\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"invitation-container\"},[_c('div',{staticStyle:{\"padding\":\"35px\",\"padding-top\":\"15px\"}},[_c('transition',{attrs:{\"name\":\"tour-guide-fade\"}},[(_vm.showTitles)?_c('div',{staticClass:\"py-5 text-2xl font-weight-bold\"},[_vm._v(\" \"+_vm._s(_vm.$t('how_messages_look_to_you'))+\" \")]):_vm._e()]),(_vm.$store.state.eventData.languages.length > 1)?_c('transition',{attrs:{\"name\":\"tour-guide-fade\"}},[(_vm.showTitles)?_c('div',{staticClass:\"text-xl\"},[_vm._v(\" \"+_vm._s(_vm.$t('edit_messages_in_all_languages'))+\" \")]):_vm._e()]):_c('transition',{attrs:{\"name\":\"tour-guide-fade\"}},[(_vm.showTitles)?_c('div',{staticClass:\"text-xl\"},[_vm._v(\" \"+_vm._s(_vm.$t('edit_details_in_message_template'))+\" \")]):_vm._e()])],1),_c('div',{staticClass:\"content\"},[_c('WhatsAppSkeleton',{attrs:{\"is-rtl\":['he','ar'].includes(_vm.lang),\"messages\":_vm.displayMessages,\"lang\":_vm.lang}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"invitation-container\">\n    <div style=\"padding: 35px; padding-top: 15px;\">\n      <transition name=\"tour-guide-fade\">\n        <div\n          v-if=\"showTitles\"\n          class=\"py-5 text-2xl font-weight-bold\"\n        >\n          {{ $t('how_messages_look_to_you') }}\n        </div>\n      </transition>\n\n      <transition\n        v-if=\"$store.state.eventData.languages.length > 1\"\n        name=\"tour-guide-fade\"\n      >\n        <div\n          v-if=\"showTitles\"\n          class=\"text-xl\"\n        >\n          {{ $t('edit_messages_in_all_languages') }}\n        </div>\n      </transition>\n      <transition\n        v-else\n        name=\"tour-guide-fade\"\n      >\n        <div\n          v-if=\"showTitles\"\n          class=\"text-xl\"\n        >\n          {{ $t('edit_details_in_message_template') }}\n        </div>\n      </transition>\n    </div>\n\n    <!-- WhatsAppSkeleton Preview -->\n    <div class=\"content\">\n      <WhatsAppSkeleton\n        :is-rtl=\"['he','ar'].includes(lang)\"\n        :messages=\"displayMessages\"\n        :lang=\"lang\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport WhatsAppSkeleton from '@/components/AdvancedPhonePreview/WhatsAppSkeleton.vue'\nimport useMessagesType from '@/composables/useMessagesType'\nimport { i18n } from '@/plugins/i18n/index'\nimport store from '@/store'\nimport { getFullImageUrl } from '@core/utils/ImageFromApi'\nimport { mdiAlertCircleOutline, mdiSubdirectoryArrowLeft, mdiSubdirectoryArrowRight } from '@mdi/js'\nimport { computed, ref } from '@vue/composition-api'\nimport { useTourGuideTitleAnimation } from '../useTourGuideTitleAnimation'\n\nexport default {\n  name: 'Message',\n  components: {\n    WhatsAppSkeleton,\n  },\n  props: {\n    currentStep: {\n      required: true,\n    },\n    stepIndex: {\n      required: true,\n    },\n  },\n  setup(props) {\n    const { showTitles } = useTourGuideTitleAnimation(props)\n    const lang = ref(store.state.eventData.defaultLang)\n\n    const { messagesType } = useMessagesType()\n\n    // Store the raw response data here\n    const messagesRaw = ref([])\n\n    // Fetch messages only once\n    const getMessages = () => {\n      store.dispatch('getMessageTemplate', { id: store.state.eventData.id }).then(response => {\n        messagesRaw.value = response.data\n      })\n    }\n    getMessages()\n\n    const giftManagerConfigured = computed(\n      () => store.state.eventData.giftManagerLink && store.state.eventData.giftManagerStatus === 'APPROVED',\n    )\n    const giftManagerLink = computed(() => store.state.eventData.giftManagerLink)\n\n    /**\n     * displayMessages (COMPUTED):\n     * Transform the raw messages into the array needed by WhatsAppSkeleton,\n     * dynamically reacting to store.state.eventData.messageSystemPreference.\n     */\n    const displayMessages = computed(() => {\n      const preference = store.state.eventData.messageSystemPreference\n      const finalMessages = []\n\n      // Pre-define helpful pieces\n      const linkRSVP = 'https://anita-lee.com/i/J41Sjh'\n      const linkWaze = 'https://anita-lee.com/w/1415jh'\n      const messageBeforeRsvpLink = i18n.t('ForRsvp', lang.value)\n      const messageBeforeDirectionLink = i18n.t('ForDirection', lang.value)\n      const messageBeforeGiftLink = i18n.t('ForGiftLink', lang.value)\n\n      messagesRaw.value.forEach((msg, index) => {\n        // Only process messages matching the current language\n        if (msg.lang !== lang.value) return\n\n        let imageUrl = ''\n        let buttons = []\n        let content = msg.message\n\n        // Calculate time for this message (+2 minutes for each subsequent message)\n        const baseTime = new Date('2023-01-01T14:36:00') // Set an arbitrary base time\n        const messageTime = new Date(baseTime.getTime() + index * 2 * 60 * 1000) // Increment by 2 minutes per message\n        const formattedTime = messageTime.toTimeString().substring(0, 5) // Format as \"HH:mm\"\n\n        // WhatsApp mode?\n        if (preference === messagesType.WHATSAPP) {\n          if (msg.type === 1) {\n            imageUrl = getFullImageUrl(store.state.eventData.image)\n            buttons = [\n              {\n                text: i18n.t('areYouComingImComing', lang.value),\n                icon: mdiSubdirectoryArrowRight,\n                rtlIcon: mdiSubdirectoryArrowLeft,\n              },\n              {\n                text: i18n.t('areYouComingNotComing', lang.value),\n                icon: mdiSubdirectoryArrowRight,\n                rtlIcon: mdiSubdirectoryArrowLeft,\n              },\n              {\n                text: i18n.t('areYouComingMaybe', lang.value),\n                icon: mdiSubdirectoryArrowRight,\n                rtlIcon: mdiSubdirectoryArrowLeft,\n              },\n            ]\n          } else if (msg.type === 2) {\n            buttons = [\n              {\n                text: i18n.t('reminderBtn', lang.value),\n                icon: mdiSubdirectoryArrowRight,\n                rtlIcon: mdiSubdirectoryArrowLeft,\n              },\n            ]\n          }\n        } else if (msg.type === 1) {\n          content = `${content}\\n\\n${messageBeforeRsvpLink} ${linkRSVP}`\n        } else if (msg.type === 2) {\n          content = `${content}\\n\\n${messageBeforeDirectionLink} ${linkWaze}`\n        }\n\n        if (preference === messagesType.WHATSAPP && giftManagerConfigured.value && msg.type === 2) {\n          buttons.push({\n            text: i18n.t('areYouComingGiftLink', lang.value),\n            icon: mdiSubdirectoryArrowRight,\n            rtlIcon: mdiSubdirectoryArrowLeft,\n          })\n        }\n\n        if (preference === messagesType.SMS && [1, 2].includes(msg.type) && giftManagerConfigured.value) {\n          content += `\\n\\n${messageBeforeGiftLink} ${giftManagerLink.value}`\n        }\n\n        finalMessages.push({\n          content,\n          imageUrl,\n          time: formattedTime,\n          buttons,\n        })\n      })\n\n      return finalMessages\n    })\n\n    return {\n      showTitles,\n      lang,\n      displayMessages,\n      icons: {\n        mdiAlertCircleOutline,\n      },\n    }\n  },\n}\n</script>\n\n<style scoped>\n.content {\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n}\n.invitation-container {\n  width: 100%;\n  overflow: hidden;\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MessagesPreview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MessagesPreview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MessagesPreview.vue?vue&type=template&id=3e10cf0b&scoped=true&\"\nimport script from \"./MessagesPreview.vue?vue&type=script&lang=js&\"\nexport * from \"./MessagesPreview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./MessagesPreview.vue?vue&type=style&index=0&id=3e10cf0b&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3e10cf0b\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./IPhoneSkeleton.vue?vue&type=style&index=0&id=1aa3450c&lang=scss&scoped=true&\"","// https://github.com/zloirock/core-js/issues/280\nvar userAgent = require('../internals/engine-user-agent');\n\nmodule.exports = /Version\\/10(?:\\.\\d+){1,2}(?: [\\w./]+)?(?: Mobile\\/\\w+)? Safari\\//.test(userAgent);\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MessagesPreview.vue?vue&type=style&index=0&id=3e10cf0b&scoped=true&lang=css&\""],"sourceRoot":""}