Notifications.vue
276 lines
| 1 | <template> |
| 2 | <div id="am-notifications" class="am-wrap"> |
| 3 | <div id="am-email-notifications" class="am-body"> |
| 4 | |
| 5 | <!-- Page Header --> |
| 6 | <page-header></page-header> |
| 7 | <!-- /Page Header --> |
| 8 | |
| 9 | <!-- Spinner --> |
| 10 | <div class="am-spinner am-section" v-if="!fetched"> |
| 11 | <img :src="$root.getUrl + 'public/img/spinner.svg'"/> |
| 12 | </div> |
| 13 | <!-- /Spinner --> |
| 14 | |
| 15 | <!-- Notifications Tab --> |
| 16 | <div class="am-notifications am-section"> |
| 17 | <el-tabs v-model="notificationTab" @tab-click="inlineSVG()" v-if="fetched"> |
| 18 | |
| 19 | <!-- Email Notifications --> |
| 20 | <el-tab-pane :label="$root.labels.email_notifications" name="email"> |
| 21 | <customize-notifications |
| 22 | :notifications="notifications" |
| 23 | :customFields="options.entities.customFields" |
| 24 | :categories="options.entities.categories" |
| 25 | :coupons="options.entities.coupons" |
| 26 | :events="options.entities.events" |
| 27 | type="email" |
| 28 | :pageUrl="getPageUrl()" |
| 29 | :languagesData="languagesData" |
| 30 | :passed-used-languages="options.settings.general.usedLanguages" |
| 31 | @manageLanguages="manageLanguages = true" |
| 32 | ></customize-notifications> |
| 33 | </el-tab-pane> |
| 34 | <!-- /Email Notifications --> |
| 35 | |
| 36 | <!-- SMS Notifications --> |
| 37 | <el-tab-pane :label="$root.labels.sms_notifications" name="sms"> |
| 38 | <sms-notifications |
| 39 | v-if="notificationTab === 'sms'" |
| 40 | :notifications="notifications" |
| 41 | :categories="options.entities.categories" |
| 42 | :customFields="options.entities.customFields" |
| 43 | :coupons="options.entities.coupons" |
| 44 | :events="options.entities.events" |
| 45 | :languagesData="languagesData" |
| 46 | :passed-used-languages="options.settings.general.usedLanguages" |
| 47 | @manageLanguages="manageLanguages = true" |
| 48 | > |
| 49 | </sms-notifications> |
| 50 | </el-tab-pane> |
| 51 | <!-- /SMS Notifications --> |
| 52 | |
| 53 | <!-- WhatsApp Notifications --> |
| 54 | <el-tab-pane name="whatsapp" v-if="notInLicence('pro') ? licenceVisible() : true"> |
| 55 | <span v-if="$root.licence.isLite" slot="label" class="am-premium-tag"> |
| 56 | <img :src="`${$root.getUrl}public/img/am-star-gold.svg`"/> |
| 57 | {{ $root.labels.whatsapp_notifications }} |
| 58 | </span> |
| 59 | <template v-else slot="label"> |
| 60 | {{ $root.labels.whatsapp_notifications }} |
| 61 | </template> |
| 62 | |
| 63 | <LicenceImage :licence="'pro'"/> |
| 64 | |
| 65 | <whats-app-notifications |
| 66 | :class="licenceClassDisabled('pro')" |
| 67 | v-if="!notInLicence('pro') ? notificationTab === 'whatsapp' : false" |
| 68 | :notifications="notifications" |
| 69 | :categories="options.entities.categories" |
| 70 | :customFields="options.entities.customFields" |
| 71 | :coupons="options.entities.coupons" |
| 72 | :events="options.entities.events" |
| 73 | :languagesData="languagesData" |
| 74 | :passed-used-languages="options.settings.general.usedLanguages.includes($root.settings.wordpress.locale) ? options.settings.general.usedLanguages : options.settings.general.usedLanguages.concat([$root.settings.wordpress.locale])" |
| 75 | :templates="whatsAppTemplates" |
| 76 | @manageLanguages="manageLanguages = true" |
| 77 | @getNotifications="getNotifications" |
| 78 | > |
| 79 | </whats-app-notifications> |
| 80 | </el-tab-pane> |
| 81 | <!-- /WhatsApp Notifications --> |
| 82 | |
| 83 | </el-tabs> |
| 84 | </div> |
| 85 | |
| 86 | <!-- /Notifications Tab --> |
| 87 | |
| 88 | <!-- Help Button --> |
| 89 | <el-col :md="6" class=""> |
| 90 | <a class="am-help-button" :href="needHelpPage" target="_blank" rel="nofollow"> |
| 91 | <i class="el-icon-question"></i> {{ $root.labels.need_help }}? |
| 92 | </a> |
| 93 | </el-col> |
| 94 | <!-- /Help Button --> |
| 95 | |
| 96 | <!-- Dialog Manage Notifications --> |
| 97 | <transition name="slide"> |
| 98 | <el-dialog |
| 99 | :close-on-click-modal="false" |
| 100 | class="am-side-dialog am-dialog-email-codes" |
| 101 | :visible.sync="manageLanguages" |
| 102 | :show-close="false" |
| 103 | v-if="manageLanguages" |
| 104 | > |
| 105 | <dialog-manage-languages |
| 106 | :passed-used-languages="options.settings.general.usedLanguages" |
| 107 | :languages-data="languagesData" |
| 108 | @closeDialogManageLanguages="manageLanguages = false" |
| 109 | @saveDialogManageLanguages="saveDialogManageLanguages" |
| 110 | > |
| 111 | </dialog-manage-languages> |
| 112 | </el-dialog> |
| 113 | </transition> |
| 114 | <!-- /Dialog Manage Notifications --> |
| 115 | |
| 116 | <!-- <dialog-new-customize></dialog-new-customize>--> |
| 117 | |
| 118 | </div> |
| 119 | </div> |
| 120 | </template> |
| 121 | |
| 122 | <script> |
| 123 | import LicenceImage from '../parts/LicenceImage' |
| 124 | import PageHeader from '../parts/PageHeader.vue' |
| 125 | import CustomizeNotifications from './common/CustomizeNotifications.vue' |
| 126 | import SmsNotifications from './sms/SmsNotifications.vue' |
| 127 | import licenceMixin from '../../../js/common/mixins/licenceMixin' |
| 128 | import imageMixin from '../../../js/common/mixins/imageMixin' |
| 129 | import { quillEditor } from 'vue-quill-editor' |
| 130 | import notifyMixin from '../../../js/backend/mixins/notifyMixin' |
| 131 | import durationMixin from '../../../js/common/mixins/durationMixin' |
| 132 | import helperMixin from '../../../js/backend/mixins/helperMixin' |
| 133 | import DialogManageLanguages from './common/DialogManageLanguages.vue' |
| 134 | import dateMixin from '../../../js/common/mixins/dateMixin' |
| 135 | // import DialogNewCustomize from '../parts/DialogNewCustomize.vue' |
| 136 | import WhatsAppNotifications from './whatsapp/WhatsAppNotifications.vue' |
| 137 | import eventMixin from '../../../js/backend/mixins/eventMixin' |
| 138 | |
| 139 | export default { |
| 140 | mixins: [ |
| 141 | licenceMixin, |
| 142 | imageMixin, |
| 143 | notifyMixin, |
| 144 | durationMixin, |
| 145 | helperMixin, |
| 146 | dateMixin, |
| 147 | eventMixin |
| 148 | ], |
| 149 | |
| 150 | data () { |
| 151 | return { |
| 152 | fetched: false, |
| 153 | notifications: [], |
| 154 | whatsAppTemplates: [], |
| 155 | notificationTab: 'email', |
| 156 | options: { |
| 157 | entities: { |
| 158 | customFields: [] |
| 159 | }, |
| 160 | settings: { |
| 161 | general: { |
| 162 | usedLanguages: [] |
| 163 | } |
| 164 | }, |
| 165 | fetched: false |
| 166 | }, |
| 167 | languagesData: null, |
| 168 | manageLanguages: false |
| 169 | } |
| 170 | }, |
| 171 | |
| 172 | created () { |
| 173 | this.setActiveTab() |
| 174 | this.getEntities() |
| 175 | this.inlineSVG() |
| 176 | }, |
| 177 | |
| 178 | mounted () { |
| 179 | this.inlineSVG() |
| 180 | }, |
| 181 | |
| 182 | methods: { |
| 183 | getPageUrl () { |
| 184 | return location.href.substring(0, location.href.lastIndexOf('?')).substring(0, location.href.substring(0, location.href.lastIndexOf('?')).lastIndexOf('/')) + '/' |
| 185 | }, |
| 186 | |
| 187 | getEntities () { |
| 188 | this.$http.get(`${this.$root.getAjaxUrl}/entities`, { |
| 189 | params: this.getAppropriateUrlParams({ |
| 190 | lite: true, |
| 191 | types: ['custom_fields', 'categories', 'coupons', 'settings', 'events'] |
| 192 | }) |
| 193 | }).then(response => { |
| 194 | this.options.entities = response.data.data |
| 195 | this.options.entities.events = this.groupRecurringEvents(this.options.entities.events) |
| 196 | this.options.fetched = true |
| 197 | this.options.settings.general.usedLanguages = response.data.data.settings.general.usedLanguages |
| 198 | this.languagesData = response.data.data.settings.languages |
| 199 | this.getNotifications() |
| 200 | }).catch(e => { |
| 201 | console.log(e.message) |
| 202 | this.fetched = true |
| 203 | this.options.fetched = true |
| 204 | }) |
| 205 | }, |
| 206 | |
| 207 | getNotifications () { |
| 208 | this.fetched = false |
| 209 | |
| 210 | this.$http.get( |
| 211 | `${this.$root.getAjaxUrl}/notifications` |
| 212 | ).then(response => { |
| 213 | let notifications = response.data.data.notifications |
| 214 | |
| 215 | notifications.forEach((notification) => { |
| 216 | if (notification.type === 'email') { |
| 217 | notification.textMode = notification.content.startsWith('<!-- Content -->') |
| 218 | |
| 219 | notification.content = notification.content.replace('<!-- Content -->', '') |
| 220 | } |
| 221 | }) |
| 222 | |
| 223 | this.notifications = notifications |
| 224 | |
| 225 | if (response.data.data.whatsAppTemplates) { |
| 226 | this.whatsAppTemplates = response.data.data.whatsAppTemplates |
| 227 | } |
| 228 | this.fetched = true |
| 229 | }).catch(e => { |
| 230 | console.log(e.message) |
| 231 | this.fetched = true |
| 232 | }) |
| 233 | }, |
| 234 | |
| 235 | setActiveTab () { |
| 236 | let urlParams = this.getUrlQueryParams(window.location.href) |
| 237 | |
| 238 | if ('notificationTab' in urlParams && urlParams.notificationTab === 'sms') { |
| 239 | this.notificationTab = 'sms' |
| 240 | } |
| 241 | }, |
| 242 | |
| 243 | saveDialogManageLanguages (usedLanguages) { |
| 244 | this.manageLanguages = false |
| 245 | this.options.settings.general.usedLanguages = usedLanguages |
| 246 | this.usedLanguages = usedLanguages |
| 247 | this.$http.post(`${this.$root.getAjaxUrl}/settings`, { |
| 248 | usedLanguages: this.usedLanguages |
| 249 | }).then(() => { |
| 250 | this.notify(this.$root.labels.success, this.$root.labels.settings_saved, 'success') |
| 251 | }).catch((e) => { |
| 252 | console.log(e) |
| 253 | }) |
| 254 | } |
| 255 | }, |
| 256 | |
| 257 | computed: { |
| 258 | needHelpPage () { |
| 259 | return this.notificationTab === 'email' |
| 260 | ? 'https://wpamelia.com/notifications/' : 'https://wpamelia.com/sms-notifications/' |
| 261 | } |
| 262 | }, |
| 263 | |
| 264 | components: { |
| 265 | LicenceImage, |
| 266 | WhatsAppNotifications, |
| 267 | PageHeader, |
| 268 | CustomizeNotifications, |
| 269 | SmsNotifications, |
| 270 | quillEditor, |
| 271 | DialogManageLanguages |
| 272 | // DialogNewCustomize |
| 273 | } |
| 274 | } |
| 275 | </script> |
| 276 |