FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
ameliabooking
/
assets
/
views
/
backend
/
parts
Edit File: EntitySettings.vue
<template> <div class="am-entity-settings"> <el-collapse :class="licenceClass()" v-model="generalSettingsCollapse" v-if="generalSettings !== null"> <el-collapse-item :disabled="notInLicence()" class="am-setting-box" name="generalSettings"> <template slot="title"> <img :src="$root.getUrl + 'public/img/setting.svg'" class="svg-amelia" style="margin-right: 10px;"/> {{ $root.labels.general }} </template> <el-form-item label="placeholder" v-if="generalSettings !== null && 'defaultAppointmentStatus' in generalSettings"> <label slot="label"> {{ $root.labels.default_appointment_status }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.default_appointment_status"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-select v-model="generalSettings.defaultAppointmentStatus" clearable :placeholder="options.defaultAppointmentStatus.find(item => item.value === $root.settings.general.defaultAppointmentStatus).label" :popper-class="'am-dropdown-cabinet'" > <el-option v-for="item in options.defaultAppointmentStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- Minimum Time Prior to Booking --> <el-form-item label="placeholder" v-if="generalSettings !== null && 'minimumTimeRequirementPriorToBooking' in generalSettings"> <label slot="label"> {{ $root.labels.minimum_time_before_booking }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.minimum_time_before_booking_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-select v-model="generalSettings.minimumTimeRequirementPriorToBooking" clearable collapse-tags placeholder="Select" :placeholder="options.minimumTime.find(item => item.value === $root.settings.general.minimumTimeRequirementPriorToBooking).label" :popper-class="'am-dropdown-cabinet'" > <el-option v-for="item in options.minimumTime" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- Minimum Time Prior to Canceling --> <el-form-item label="placeholder" v-if="generalSettings !== null && 'minimumTimeRequirementPriorToCanceling' in generalSettings"> <label slot="label"> {{ $root.labels.minimum_time_before_canceling }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.minimum_time_before_canceling_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-select v-model="generalSettings.minimumTimeRequirementPriorToCanceling" clearable :placeholder="options.minimumTime.find(item => item.value === $root.settings.general.minimumTimeRequirementPriorToCanceling).label" :popper-class="'am-dropdown-cabinet'" > <el-option v-for="item in options.minimumTime" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- Minimum Time Prior to Rescheduling --> <el-form-item label="placeholder" v-if="generalSettings !== null && 'minimumTimeRequirementPriorToRescheduling' in generalSettings"> <label slot="label"> {{ $root.labels.minimum_time_before_rescheduling }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.minimum_time_before_rescheduling_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-select v-model="generalSettings.minimumTimeRequirementPriorToRescheduling" clearable :placeholder="options.minimumTime.find(item => item.value === $root.settings.general.minimumTimeRequirementPriorToRescheduling).label" :popper-class="'am-dropdown-cabinet'" > <el-option v-for="item in options.minimumTime" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- Number of days available for booking --> <el-form-item label="placeholder" v-if="generalSettings !== null && 'numberOfDaysAvailableForBooking' in generalSettings"> <label slot="label"> {{ $root.labels.period_available_for_booking }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.period_available_for_booking_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-input-number class="am-number-of-days" v-model="generalSettings.numberOfDaysAvailableForBooking" :min="0" :placeholder="$root.settings.general.numberOfDaysAvailableForBooking.toString()" > </el-input-number> </el-form-item> <!-- Redirect URL after appointment --> <el-form-item label="placeholder" prop="redirectURLAfter" :error="errors.redirectURLAfter" v-if="generalSettings !== null && 'redirectUrlAfterAppointment' in generalSettings"> <label slot="label"> {{ $root.labels.redirect_url_after_appointment }}: <el-tooltip placement="top"> <div slot="content" v-html="($root.licence.isPro || $root.licence.isDeveloper) ? $root.labels.redirect_url_after_app_or_package_tt : $root.labels.redirect_url_after_appointment_tooltip" > </div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-input v-model="generalSettings.redirectUrlAfterAppointment" @input="clearValidation()" auto-complete="off" :placeholder="$root.settings.general.redirectUrlAfterAppointment.toString()" > </el-input> </el-form-item> </el-collapse-item> <LicenceBlock/> </el-collapse> <el-collapse :class="licenceClass('starter')" v-model="paymentsSettingsCollapse" v-if="paymentsSettings !== null" class="am-entity-settings-payments"> <el-collapse-item :disabled="notInLicence('starter')" class="am-setting-box" name="paymentsSettings"> <!-- Title --> <template slot="title"> <img :src="$root.getUrl+'public/img/credit-card.svg'" class="svg-amelia" style="margin-right: 10px;"/> {{ $root.labels.payments }} </template> <!-- Payment Links --> <div class="am-setting-box am-switch-box" v-if="notInLicence('basic') ? licenceVisible() : true" :class="licenceClass('basic')"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <span>{{ $root.labels.payment_links_enable }}</span> <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.payment_links_enable_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.paymentLinks.enabled" :disabled="notInLicence()" ></el-switch> </el-col> </el-row> <el-row style="margin-top: 16px" v-if="paymentsSettings.paymentLinks.enabled"> <el-col> <!-- Redirect URL after payment --> <el-form-item label="placeholder"> <label slot="label" style="font-size: 13px;"> {{ $root.labels.payment_links_redirect }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.payment_links_redirect_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-input v-model="paymentsSettings.paymentLinks.redirectUrl" :placeholder="$root.settings.payments.paymentLinks.redirectUrl ? $root.settings.payments.paymentLinks.redirectUrl : $root.getSiteUrl" auto-complete="off" > </el-input> </el-form-item> </el-col> </el-row> <el-row type="flex" align="middle" :gutter="24" v-if="isDefaultStatusPending()" style="font-size: 14px; margin-bottom: 16px !important;"> <el-col :span="16"> <span>{{ $root.labels.payment_links_change_status }}</span> <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.payment_links_change_status_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.paymentLinks.changeBookingStatus" ></el-switch> </el-col> </el-row> <el-alert style="margin-bottom: 5px" v-if="paymentsSettings.paymentLinks.enabled && $root.settings.role !== 'provider'" type="warning" show-icon title="" :description="$root.labels.payment_links_warning" :closable="false" > </el-alert> <LicenceBlock/> </div> <!-- Service Paid On-site --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.onSite"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.on_site }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.onSite" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <el-col :span="24" v-if="$root.settings.payments.wc.enabled"> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.onSite"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.wc_service }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.wc.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <el-form-item label="placeholder" v-if="paymentsSettings.wc.enabled"> <label slot="label"> {{ $root.labels.wc_product }}: <el-tooltip placement="top"> <div slot="content" v-html="$root.labels.wc_product_tooltip"></div> <i class="el-icon-question am-tooltip-icon"></i> </el-tooltip> </label> <el-select v-model="paymentsSettings.wc.productId" filterable remote placeholder="" :popper-class="'am-dropdown-cabinet'" :loading="loadingProducts" :remote-method="searchProducts" @change="selectedProduct" > <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select> </el-form-item> </el-col> <!-- Service Paid PayPal --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.payPal.enabled"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <img class="svg-amelia" width="60px" :src="$root.getUrl + 'public/img/payments/paypal-light.svg'"> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.payPal.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Service Paid Stripe --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.stripe.enabled"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <img class="svg-amelia" width="40px" :src="$root.getUrl + 'public/img/payments/stripe.svg'"> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.stripe.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Service Paid Mollie --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.mollie.enabled"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <img class="svg-amelia" width="60px" :src="$root.getUrl + 'public/img/payments/mollie.svg'"> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.mollie.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Service Paid Square --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.square.enabled"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <img class="svg-amelia" width="60px" :src="$root.getUrl + 'public/img/payments/square.svg'"> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.square.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Service Paid Razorpay --> <div class="am-setting-box am-switch-box" v-if="$root.settings.payments.razorpay.enabled"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> <img class="svg-amelia" width="60px" :src="$root.getUrl + 'public/img/payments/razorpay.svg'"> </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="paymentsSettings.razorpay.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <el-alert v-if="(!paymentsSettings.wc.enabled || (!$root.settings.payments.wc.enabled && paymentsSettings.wc.enabled)) && (!paymentsSettings.onSite || (!$root.settings.payments.onSite && paymentsSettings.onSite)) && (!paymentsSettings.payPal.enabled || (!$root.settings.payments.payPal.enabled && paymentsSettings.payPal.enabled)) && (!paymentsSettings.stripe.enabled || (!$root.settings.payments.stripe.enabled && paymentsSettings.stripe.enabled)) && (!paymentsSettings.mollie.enabled || (!$root.settings.payments.mollie.enabled && paymentsSettings.mollie.enabled)) && (!paymentsSettings.square.enabled || (!$root.settings.payments.square.enabled && paymentsSettings.square.enabled)) && (!paymentsSettings.razorpay.enabled || (!$root.settings.payments.razorpay.enabled && paymentsSettings.razorpay.enabled))" type="warning" show-icon title="" :description="$root.labels.payment_warning" :closable="false" > </el-alert> </el-collapse-item> <LicenceBlock :licence="'starter'"/> </el-collapse> <el-collapse :class="licenceClass()" v-model="integrationsSettingsCollapse" v-if="zoomSettings || lessonSpaceSettings || googleMeetSettings || microsoftTeamsSettings"> <el-collapse-item :disabled="notInLicence()" class="am-setting-box" name="integrationsSettings"> <!-- Title --> <template slot="title"> <img :src="$root.getUrl+'public/img/web-hook.svg'" class="svg-amelia" style="margin-right: 10px;"/> {{ $root.labels.integrations_settings }} </template> <!-- Zoom --> <div class="am-setting-box am-switch-box" v-if="zoomSettings"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.zoom }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="zoomSettings.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <el-alert v-if="zoomSettings && zoomSettings.enabled && !isZoomProvidersConnected" type="warning" show-icon title="" :description="$root.labels.zoom_warning" :closable="false" > </el-alert> <!-- Google meet --> <div class="am-setting-box am-switch-box" v-if="googleMeetSettings"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.enable_google_meet }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="googleMeetSettings.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Microsoft Teams --> <div class="am-setting-box am-switch-box" v-if="microsoftTeamsSettings"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.enable_microsoft_teams }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="microsoftTeamsSettings.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> <!-- Lesson Space --> <div class="am-setting-box am-switch-box" v-if="lessonSpaceSettings"> <el-row type="flex" align="middle" :gutter="24"> <el-col :span="16"> {{ $root.labels.lesson_space }} </el-col> <el-col :span="8" class="align-right"> <el-switch v-model="lessonSpaceSettings.enabled" active-text="" inactive-text="" > </el-switch> </el-col> </el-row> </div> </el-collapse-item> <LicenceBlock/> </el-collapse> </div> </template> <script> import licenceMixin from '../../../js/common/mixins/licenceMixin' export default { props: { zoomSettings: null, lessonSpaceSettings: null, googleMeetSettings: null, microsoftTeamsSettings: null, paymentsSettings: null, generalSettings: null, settings: null, providers: null }, mixins: [licenceMixin], data () { let validateRedirectURL = (rule, input, callback) => { this.clearValidation() let currentURL = this.$refs.settings.model.redirectUrlAfterAppointment let regex = /^((http|https):\/\/)/ if (currentURL !== '' && !regex.test(currentURL)) { callback(new Error(this.$root.labels.enter_valid_url_warning)) } else { callback() } } return { products: [], searchCounter: 0, loadingProducts: false, integrationsSettingsCollapse: null, paymentsSettingsCollapse: null, generalSettingsCollapse: null, rules: { 'redirectURLAfter': [ {validator: validateRedirectURL, trigger: 'submit'} ] }, errors: { redirectURLAfter: '' }, options: { defaultAppointmentStatus: [ { label: this.$root.labels.pending, value: 'pending' }, { label: this.$root.labels.approved, value: 'approved' } ], minimumTime: [ { label: this.$root.labels.disabled, value: 0 }, { label: this.$root.labels.min10, value: 600 }, { label: this.$root.labels.min12, value: 720 }, { label: this.$root.labels.min15, value: 900 }, { label: this.$root.labels.min30, value: 1800 }, { label: this.$root.labels.min45, value: 2700 }, { label: this.$root.labels.h1, value: 3600 }, { label: this.$root.labels.h1min30, value: 5400 }, { label: this.$root.labels.h2, value: 7200 }, { label: this.$root.labels.h3, value: 10800 }, { label: this.$root.labels.h4, value: 14400 }, { label: this.$root.labels.h6, value: 21600 }, { label: this.$root.labels.h8, value: 28800 }, { label: this.$root.labels.h9, value: 32400 }, { label: this.$root.labels.h10, value: 36000 }, { label: this.$root.labels.h11, value: 39600 }, { label: this.$root.labels.h12, value: 43200 }, { label: this.$root.labels.day1, value: 86400 }, { label: this.$root.labels.days2, value: 172800 }, { label: this.$root.labels.days3, value: 259200 }, { label: this.$root.labels.days4, value: 345600 }, { label: this.$root.labels.days5, value: 432000 }, { label: this.$root.labels.days6, value: 518400 }, { label: this.$root.labels.week1, value: 604800 }, { label: this.$root.labels.weeks2, value: 1209600 }, { label: this.$root.labels.weeks3, value: 1814400 }, { label: this.$root.labels.weeks4, value: 2419200 }, { label: this.$root.labels.months3, value: 7884000 }, { label: this.$root.labels.months6, value: 15768000 } ] } } }, mounted () { this.setProducts() if (this.generalSettings !== null && 'numberOfDaysAvailableForBooking' in this.generalSettings && !this.generalSettings.numberOfDaysAvailableForBooking) { let elements = document.getElementsByClassName('am-number-of-days') for (let i = 0; i < elements.length; i++) { elements[i].getElementsByClassName('el-input__inner')[0].value = '' } } }, computed: { isZoomProvidersConnected () { if (this.providers !== null) { return !this.providers.map(provider => provider.zoomUserId).includes(null) && this.providers.length !== 0 } return false } }, methods: { isDefaultStatusPending () { return this.paymentsSettings.paymentLinks.enabled && this.generalSettings && (this.generalSettings.defaultAppointmentStatus === 'pending' || this.generalSettings.defaultAppointmentStatus === null && this.$root.settings.general.defaultAppointmentStatus === 'pending') }, setProducts () { if (this.$root.settings.payments.wc.enabled) { if (this.$root.settings.payments.wc.enabled && this.paymentsSettings.wc.productId && this.$root.wcProducts.filter(product => product.id === this.paymentsSettings.wc.productId).length === 0 ) { this.fetchProducts( {id: this.paymentsSettings.wc.productId}, (products) => { if (products.length) { this.products.push(products[0]) } } ) } this.products = this.$root.wcProducts } }, selectedProduct (productId) { if (this.$root.wcProducts.filter(product => product.id === productId).length === 0) { let product = this.products.find(product => product.id === productId) if (product) { this.$root.wcProducts.push(product) } } }, fetchProducts (params, callbackMethod) { clearTimeout(this.searchProductsTimer) this.loadingProducts = true this.searchCounter++ this.searchProductsTimer = setTimeout(() => { let lastSearchCounter = this.searchCounter this.$http.get(`${this.$root.getAjaxUrl}/payment/wc/products`, { params: params }) .then(response => { if (lastSearchCounter >= this.searchCounter) { callbackMethod(response.data.data.products.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1)) } this.loadingProducts = false }) .catch(e => { this.loadingProducts = false }) }, 500 ) }, searchProducts (query) { if (query) { this.fetchProducts( {name: query}, (products) => { this.products = products } ) } else { this.products = this.$root.wcProducts } }, clearValidation () { } } } </script>
Save
Back