0byt3m1n1-V2

Path: /app/wp-content/ameliabooking/assets/views/frontend/booking/ [ Home ]
File: Booking.vue
<template>
  <div id="amelia-booking-wrap" class="am-wrap">
    <!-- Spinner -->
    <div class="am-spinner am-section" v-show="!empty && (!fetched || loadingCacheBookingData)">
      <img class="svg-booking am-spin" :src="$root.getUrl + 'public/img/oval-spinner.svg'">
      <img class="svg-booking am-hourglass" :src="$root.getUrl + 'public/img/hourglass.svg'">
    </div>

    <div v-if="empty" class="am-no-services">
      <img :src="$root.getUrl+'public/img/am-empty-booking.svg'" style="margin-top: 10px;">
      <h1>{{$root.labels.oops}}</h1>
      <h3>{{$root.labels.no_services_employees}}</h3>
      <p>{{$root.labels.add_services_employees}}</p>
      <a href="https://wpamelia.com/services-and-categories/">
        {{$root.labels.add_services_url}}
      </a>
      <span style="font-size:14px">{{$root.labels.and}}</span>
      <a href="https://wpamelia.com/employees/">
        {{$root.labels.add_employees_url}}
      </a>
    </div>

    <div :id="id" class="am-step-booking-catalog" :class="$root.settings.customization.forms ? `am-form-${formType}` : ''" v-show="!empty && fetched">
      <!-- Select Service Form -->
      <select-service-form
        v-if="!bookingCompleted && !activePackage && !passedPackage && !showPackagesOnly && !packageCalendarActive"
        :show-services="showServices"
        :show-locations="showLocations"
        :show-employees="showEmployees"
        :passed-service="passedService"
        :appointment="appointment"
        :group="group"
        :selected-extras="selectedExtras"
        :options="options"
        :fetched="fetched"
        :extras-error="extrasError"
        :form-type="formType"
        :forms-data="forms[formType]"
        :loading-time-slots="loadingTimeSlots"
        @change="changeFormItem"
        @getSlots="getTimeSlots"
        @enableGrouping="enableGrouping"
      ></select-service-form>
      <!-- /Select Service Form -->

      <!-- Recurring Setup Form -->
      <recurring-setup
        v-if="activeRecurringSetup && !bookingCompleted"
        :containerId="id"
        :initialRecurringData="initialRecurringData"
        :recurringData="recurringData"
        :disabledWeekdays="disabledWeekdays"
        :availableDates="availableDates"
        :calendarTimeSlots="calendarTimeSlots"
        :service="getServiceById(appointment.serviceId)"
        :isFrontend="true"
        :form-type="formType"
        :forms-data="forms[formType]"
        @cancelRecurringSetup="cancelRecurringSetup"
        @confirmRecurringSetup="confirmRecurringSetup"
      >
      </recurring-setup>
      <!-- /Recurring Setup Form -->

      <!-- Recurring Dates Form -->
      <recurring-dates
        v-if="activeRecurringDates && !bookingCompleted"
        dialogClass="am-recurring-dates"
        :recurringData="recurringData"
        :availableDates="availableDates"
        :calendarTimeSlots="calendarTimeSlots"
        :isFrontend="true"
        :service="getServiceById(appointment.serviceId)"
        :selectedExtras="selectedExtras"
        :form-type="formType"
        :forms-data="forms[formType]"
        @confirmRecurringDates="confirmRecurringDates"
        @cancelRecurringDates="cancelRecurringDates"
      >
      </recurring-dates>
      <!-- /Recurring Dates Form -->

      <!-- Calendar Date Time Form -->
      <calendar-date-time-form
        v-if="!bookingCompleted && !activeRecurringSetup && !activePackage && !passedPackage && !showPackagesOnly && !packageCalendarActive"
        :id="id"
        :selected-date="selectedDate"
        :available-dates="availableDates"
        :disabled-weekdays="disabledWeekdays"
        :disabled-attribute="disabledAttribute"
        :calendar-id="calendarId"
        :show-times="showTimes"
        :appointment="appointment"
        :available-time-slots="availableTimeSlots"
        :is-recurring-available="isRecurringAvailable"
        :active-recurring="activeRecurring"
        :show-calendar-back-button="showCalendarBackButton"
        :show-calendar-continue-button="showCalendarContinueButton"
        :loading="loading"
        :loading-time-slots="loadingTimeSlots"
        :form-type="formType"
        :forms-data="forms[formType]"
        @selectDate="selectDate"
        @setTimeSlots="setTimeSlots"
        @selectTime="selectTime"
        @changeMonth="changeMonth"
        @togglePicker="togglePicker"
        @showNextScreen="showNextScreen"
        @changeRecurring="changeActiveRecurring"
      ></calendar-date-time-form>
      <!-- /Calendar Date Time Form -->

      <!-- Select Package Form -->
      <select-package-form
        v-if="!bookingCompleted && !activePackage && !passedPackage && !packageListShown && !activeConfirm && showPackagesOnly"
        :selected-package-id="selectedPackageId"
        :fetched="fetched"
        :options="options"
        :form-type="formType"
        :forms-data="forms[formType]"
        @continuePackage="continuePackage"
      ></select-package-form>
      <!-- /Select Package Form -->

      <!-- Package Info Form -->
      <package-info
        v-if="!bookingCompleted && activePackage && !passedPackage"
        class="am-package-selected"
        :id="id"
        :fetched-slots="fetchedSlots"
        :selected-package="selectedPackage"
        :package-slots-fetched="packageSlotsFetched"
        :has-back="packagesHaveBack"
        :has-header="true"
        :form-type="formType"
        :forms-data="forms[formType]"
        @showPackageCalendar="packageServiceSelected++"
        @closePackage="closePackage"
        @packageSlotsSelectedCallback="packageSlotsSelectedCallback"
      >
      </package-info>
      <!-- /Package Info Form -->

      <!-- Package Setup Form -->
      <package-setup
        v-if="!bookingCompleted && (selectedPackage ? selectedPackage.hasSlots : true) && packageCalendarActive"
        class="am-select-date am-select-service-date-transition am-package-setup"
        :id="id"
        :options="options"
        :selectedPackage="selectedPackage"
        :packageServiceSelected="packageServiceSelected"
        :packageCreated="packageCreated"
        :isPassedPackage="!!passedPackage"
        :disableFetchSlots="disableFetchPackageSlots"
        :form-type="formType"
        :forms-data="forms[formType]"
        @packageSlotsFetchedCallback="packageSlotsFetchedCallback"
        @packageSlotsSelectedCallback="packageSlotsSelectedCallback"
        @packageListShow="packageListShow"
      >
      </package-setup>
      <!-- /Package Setup Form -->

      <!-- Package List Form -->
      <package-list
        v-if="!bookingCompleted && packageListShown"
        :container-id="'amelia-app-booking' + $root.shortcodeData.counter"
        :bookable="getBookablePackageData()"
        :has-header="!passedPackage"
        :form-type="formType"
        :forms-data="forms[formType]"
        @cancelBooking="cancelPackageList"
        @packageSlotsSelectedCallback="packageSlotsSelectedCallback"
      >
      </package-list>
      <!-- /Package List Form -->

      <!-- Confirm Booking -->
      <confirm-booking
        v-if="activeConfirm && !bookingCompleted"
        dialogClass="am-confirm-booking am-scroll"
        v-bind="cacheData && (cacheData.status === 'canceled' || cacheData.status === 'failed') ? getCacheDataRequestProps() : {
          bookableType: selectedPackage === null ? 'appointment' : 'package',
          containerId: getContainerId(),
          bookable: getBookableData(),
          appointment: appointment,
          provider: selectedProvider,
          location: selectedLocation,
          service: selectedService,
          customFields: options.entities.customFields,
          recurringData: getRecurringAppointmentsData(),
          packageData: selectedPackage === null ? null : getPackageAppointmentsData(),
          recurringString: recurringData.recurringString + ' ' + recurringData.untilString,
          hasCancel: !passedPackage || passedPackage.hasSlots,
          hasHeader: !passedPackage,
          phonePopulated: phonePopulated,
          passedCategoryId: passedCategory ? passedCategory.id : null,
          queryParams: []
        }"
        :form-type="formType"
        :forms-data="forms[formType]"
        @confirmedBooking="confirmedBooking"
        @cancelBooking="cancelBooking"
      >
      </confirm-booking>
      <!-- /Confirm Booking -->

      <!-- Add To Calendar -->
      <transition name="fade">
        <add-to-calendar
          v-if="showAddToCalendar"
          :addToCalendarData="addToCalendarData"
          :form-type="formType"
          :forms-data="forms[formType]"
          @closeDialogAddToCalendar="closeDialogAddToCalendar"
        ></add-to-calendar>
      </transition>
      <!-- /Add To Calendar -->

    </div>

    <div class="am-lite-footer">
      <a class="am-lite-footer-link" v-if="$root.isLite && $root.settings.general.backLink.enabled" :href="$root.settings.general.backLink.url" target="_blank">
        {{ $root.settings.general.backLink.label }}
      </a>
    </div>
  </div>
</template>


<script>
  import moment from 'moment'
  import cacheMixin from '../../../js/frontend/mixins/cacheMixin'
  import formsCustomizationMixin from '../../../js/common/mixins/formsCustomizationMixin'
  import imageMixin from '../../../js/common/mixins/imageMixin'
  import dateMixin from '../../../js/common/mixins/dateMixin'
  import priceMixin from '../../../js/common/mixins/priceMixin'
  import helperMixin from '../../../js/backend/mixins/helperMixin'
  import settingsMixin from '../../../js/common/mixins/settingsMixin'
  import entitiesMixin from '../../../js/common/mixins/entitiesMixin'
  import recurringMixin from '../../../js/common/mixins/recurringMixin'
  import packageMixin from '../../../js/frontend/mixins/packageMixin'
  import durationMixin from '../../../js/common/mixins/durationMixin'
  import customFieldMixin from '../../../js/common/mixins/customFieldMixin'
  import bookingMixin from '../../../js/frontend/mixins/bookingMixin'
  import selectServiceForm from './components/formSteps/SelectServiceForm'
  import calendarDateTimeForm from './components/formSteps/CalendarDateTimeForm'
  import recurringSetup from '../../parts/RecurringSetup.vue'
  import recurringDates from '../../parts/RecurringDates.vue'
  import selectPackageForm from './components/formSteps/SelectPackageForm'
  import packageInfo from '../../parts/Empty.vue'
  import packageSetup from '../../parts/Empty.vue'
  import packageList from '../../parts/Empty.vue'
  import confirmBooking from '../parts/ConfirmBooking.vue'
  import addToCalendar from '../parts/AddToCalendar.vue'

  export default {

    mixins: [cacheMixin, formsCustomizationMixin, packageMixin, recurringMixin, imageMixin, dateMixin, entitiesMixin, bookingMixin, helperMixin, durationMixin, priceMixin, customFieldMixin, settingsMixin],

    props: {
      id: {
        default: 'am-step-booking'
      },
      showService: {
        type: Boolean,
        default: true
      },
      passedService: {
        default: () => {},
        type: Object
      },
      passedPackage: {
        default: () => {},
        type: Object
      },
      passedCategory: {
        default: () => {},
        type: Object
      },
      passedEntities: {
        default: () => {},
        type: Object
      },
      passedEntitiesRelations: {
        default: () => {},
        type: Object
      },
      formType: {
        type: String,
        default: 'stepByStepForm'
      }
    },

    data () {
      return {
        empty: false,
        packagesHaveBack: true,
        showPackagesOnly: false,
        showEmptyCalendar: false,
        selectedWeekIndex: 0,
        selectedProvider: null,
        selectedLocation: null,
        selectedService: null,
        loading: false,
        isRecurringAvailable: false,
        initialRecurringData: null,
        recurringData: {
          dates: [],
          startAppointment: null,
          startDate: null,
          startTime: null,
          defaultEmployeeId: null,
          defaultLocationId: null,
          pageRecurringDates: [],
          pagination: {
            show: this.$root.settings.general.itemsPerPage,
            page: 1,
            count: 0
          },
          recurringString: '',
          untilString: '',
          datesCallback: null,
          setupCallback: null
        },
        activeRecurring: false,
        activeRecurringSetup: false,
        activeRecurringDates: false,
        selectedMonth: moment().format('YYYY-MM'),
        isServiceChanged: true,
        calendarId: '',
        activeConfirm: false,
        bookingCompleted: false,
        activePicker: false,
        packageCalendarActive: false,
        addToCalendarData: null,
        appointment: {
          bookingStart: '',
          bookingStartTime: '',
          bookings: [{
            customer: {
              email: '',
              externalId: null,
              firstName: '',
              id: null,
              lastName: '',
              phone: ''
            },
            customFields: {},
            customerId: 0,
            extras: [],
            persons: 1,
            haveMandatoryExtras: false,
            minSelectedExtras: 0
          }],
          duration: 0,
          group: false,
          notifyParticipants: this.$root.settings.notifications.notifyCustomers,
          payment: {
            amount: 0,
            gateway: '',
            data: {}
          },
          categoryId: null,
          providerId: 0,
          serviceId: null,
          locationId: null
        },
        availableDates: [],
        availableTimeSlots: [],
        calendar: '',
        calendarTimeSlots: {},
        calendarVisible: false,
        customer: {
          name: '',
          email: '',
          phone: '',
          paymentMethod: ''
        },
        customerRules: {
          name: [
            {required: true, message: 'Please input name', trigger: 'submit'},
            {min: 3, max: 50, message: 'Length should be 3 to 50', trigger: 'submit'}],
          email: [
            {required: true, message: 'Please input name', trigger: 'submit'},
            {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'submit'}],
          phone: '',
          paymentMethod: ''
        },
        disabledAttribute: {
          contentStyle: {
            color: '#ccc',
            opacity: 0.4,
            textDecoration: 'line-through'
          }
        },
        disabledWeekdays: null,
        fetched: false,
        fetchedSlots: false,
        group: {
          allowed: false,
          enabled: false,
          count: 1,
          options: []
        },
        loadingTimeSlots: false,
        slotsIndexStarted: 0,
        responseEntities: {
          categories: [],
          employees: [],
          locations: [],
          services: []
        },
        options: {
          availableEntitiesIds: {
            categories: [],
            employees: [],
            locations: [],
            services: []
          },
          entitiesRelations: {},
          entities: {
            packages: [],
            services: [],
            employees: [],
            locations: [],
            customFields: []
          }
        },
        selectedExtras: [],
        previouslySelectedExtras: [],
        selectedDate: null,
        showAddToCalendar: false,
        showExtras: false,
        showFilters: false,
        showTimes: false,
        showServices: false,
        showEmployees: false,
        showLocations: false,
        extrasMandatory: false,
        showCalendarBackButton: false,
        showCalendarContinueButton: false,
        times: '',
        extrasError: [],
        forms: {}
      }
    },

    created () {
      this.forms = this.getTranslatedForms('stepByStepForm')

      this.calendarId = 'am-appointment-times' + this.$root.shortcodeData.counter
      window.addEventListener('resize', this.handleResize)
    },

    mounted () {
      this.setCacheData(this.getContainerId(), true)

      if (!this.$root.shortcodeData.hasBookingShortcode || !this.$root.shortcodeData.hasCategoryShortcode) {
        this.inlineBookingSVG()
      }

      if (this.passedService) {
        this.checkMandatoryExtras(this.passedService)
      }

      // Customization hook
      if ('beforeBookingLoaded' in window) {
        window.beforeBookingLoaded(this)
      }

      if (this.passedEntities && !this.passedPackage) {
        this.options.isFrontEnd = true
        this.options.entitiesRelations = Object.assign({}, this.passedEntitiesRelations)

        let shortCodeEntitiesIds = this.getShortCodeEntityIds()

        this.filterEntities(this.passedEntities, {
          categoryId: this.passedService.categoryId,
          serviceId: this.passedService.id,
          employeeId: shortCodeEntitiesIds.employeeId,
          locationId: shortCodeEntitiesIds.locationId
        })

        this.fetchedEntities()

        this.times = document.getElementById(this.calendarId)
      } else if (!this.passedPackage) {
        let shortCodeEntitiesIds = this.getShortCodeEntityIds()

        if (shortCodeEntitiesIds.show === 'packages') {
          this.showPackagesOnly = true
          this.packageCalendarActive = true
        } else if (shortCodeEntitiesIds.show === 'services') {
          this.showPackagesOnly = false
        }

        let $this = this

        this.fetchEntities(function (success) {
          if (success) {
            $this.fetchedEntities()
          }
        }, {
          types: ['categories', 'employees'],
          isFrontEnd: true,
          isPanel: false
        })

        this.times = document.getElementById(this.calendarId)
      } else if (this.passedPackage) {
        this.options.isFrontEnd = true
        this.options.entitiesRelations = Object.assign({}, this.passedEntitiesRelations)
        this.options.entities = this.passedEntities
        this.setBookingCustomFields()
        this.selectPackage(this.passedPackage)

        if (!this.passedPackage.hasSlots || this.loadingCacheBookingData) {
          this.fetched = true
          this.packageSlotsSelectedCallback()

          this.runCacheAction()
        }
        if (this.options.entities.services.length === 0 || this.options.entities.employees.length === 0) this.empty = true
      }
    },

    updated () {
      this.handleResize()
    },

    methods: {
      changeFormItem (fieldObj) {
        if (fieldObj.identifier === 'changeService') {
          this.changeService()
        }

        if (fieldObj.identifier === 'selectPackage') {
          this.selectPackage(fieldObj.value)
        }

        if (fieldObj.identifier === 'changeLocation') {
          this.changeLocation(fieldObj.required)
        }

        if (fieldObj.identifier === 'changeEmployee') {
          this.changeEmployee()
        }

        if (fieldObj.identifier === 'enableGrouping') {
          this.enableGrouping()
        }

        if (fieldObj.identifier === 'changeNumberOfPersons') {
          this.changeNumberOfPersons()
        }

        if (fieldObj.identifier === 'addExtra') {
          this.addExtra()
        }

        if (fieldObj.identifier === 'changeSelectedExtra') {
          this.changeSelectedExtra(fieldObj.value, fieldObj.key)
        }

        if (fieldObj.identifier === 'deleteExtra') {
          this.deleteExtra(fieldObj.value)
        }
      },

      changeActiveRecurring (recurring) {
        this.activeRecurring = recurring
      },

      runCacheAction () {
        if (this.loadingCacheBookingData) {
          if (this.cacheData.status === 'canceled' || this.cacheData.status === 'failed') {
            this.showConfirmBooking()
          } else if (this.cacheData.status === 'paid' || this.cacheData.status === null) {
            this.confirmedBooking(this.cacheData.response, true)
          }

          this.loadingCacheBookingData = false
        }
      },

      getContainerId () {
        return 'amelia-app-booking' + this.$root.shortcodeData.counter
      },

      showConfirmBooking () {
        this.activeConfirm = true

        this.loading = true

        let amContainer = document.getElementById(this.id)

        setTimeout(() => {
          this.loading = false

          this.loadingCacheBookingData = false

          amContainer.classList.toggle('am-active-picker', false)
          amContainer.classList.toggle('am-active-confirm', this.activeConfirm)
        }, 500)
      },

      checkMandatoryExtras (service) {
        this.appointment.bookings[0].haveMandatoryExtras = service.mandatoryExtra
        this.appointment.bookings[0].minSelectedExtras = service.minSelectedExtras
        for (let i = 0; i < service.minSelectedExtras; i++) {
          if (service.mandatoryExtra) {
            this.extrasMandatory = true
            this.addExtra()
          }
        }
      },

      getBookableData () {
        if (this.selectedPackage === null) {
          this.selectedService = this.getProviderById(this.selectedProvider.id).serviceList.find(service => service.id === this.appointment.serviceId)

          return {
            id: this.selectedService.id,
            name: this.selectedService.name,
            price: this.selectedService.price,
            depositData: this.selectedService.depositPayment !== 'disabled' ? {
              deposit: this.selectedService.deposit,
              depositPayment: this.selectedService.depositPayment,
              depositPerPerson: this.selectedService.depositPerPerson,
              depositFullPayment: this.selectedService.fullPayment
            } : null,
            maxCapacity: this.selectedService.maxCapacity,
            pictureThumbPath: this.selectedService.pictureThumbPath,
            aggregatedPrice: this.selectedService.aggregatedPrice,
            bookingStart: this.appointment.bookingStart
          }
        } else {
          return {
            id: this.selectedPackage.id,
            name: this.selectedPackage.name,
            price: this.getPackagePrice(this.selectedPackage),
            depositData: this.selectedPackage.depositPayment !== 'disabled' ? {
              deposit: this.selectedPackage.deposit,
              depositPayment: this.selectedPackage.depositPayment,
              depositPerPerson: this.selectedPackage.depositPerPerson,
              depositFullPayment: this.selectedPackage.fullPayment
            } : null,
            calculatedPrice: this.selectedPackage.calculatedPrice,
            discount: this.selectedPackage.discount,
            maxCapacity: 1,
            pictureThumbPath: this.selectedPackage.pictureThumbPath,
            aggregatedPrice: this.selectedPackage.aggregatedPrice
          }
        }
      },

      changeMonth (page) {
        this.selectedMonth = page ? moment().year(page.year).month(page.month - 1).date(1).format('YYYY-MM') : null
      },

      showCalendarOnly (initCall) {
        let providerService = null

        if (this.appointment.serviceId && this.appointment.providerId) {
          providerService = this.getProviderService(this.appointment.providerId, this.appointment.serviceId)
        }

        let service = null

        if (this.appointment.serviceId) {
          service = this.getServiceById(this.appointment.serviceId)
        }

        let serviceProviderVisibility = true
        let servicePackageVisibility = true
        let serviceLocationVisibility = true
        let addExtraVisibility = true
        for (const key in this.forms[this.formType].selectServiceForm.itemsDraggable) {
          if (this.forms[this.formType].selectServiceForm.itemsDraggable[key].hasOwnProperty('visibility') && !this.forms[this.formType].selectServiceForm.itemsDraggable[key].visibility) {

            if (key === 'employeeFormField') {
              serviceProviderVisibility = false
            }

            if (key === 'servicePackageFormField') {
              servicePackageVisibility = false
            }

            if (key === 'locationFormField') {
              serviceLocationVisibility = false
            }

            if (key === 'addExtraFormField') {
              addExtraVisibility = false
            }
          }
        }

        return initCall &&
          !this.showServices &&
          (!serviceProviderVisibility || !this.showEmployees) &&
          (!serviceLocationVisibility || !this.showLocations) &&
          (service && service.extras.length ? !this.extrasMandatory : true) &&
          (service && service.extras.length ? !addExtraVisibility : true) &&
          (!serviceProviderVisibility || (providerService !== null && (providerService.maxCapacity === 1 || providerService.bringingAnyone === false))) &&
          (!servicePackageVisibility || (typeof this.passedService === 'undefined' ? this.options.entities.packages.length === 0 : true))
      },

      changeService () {
        if ('ameliaBooking' in window && 'changedEntity' in window.ameliaBooking) {
          window.ameliaBooking.changedEntity('service', this.appointment)
        }

        if (this.appointment.serviceId) {
          let selectedService = this.getServiceById(this.appointment.serviceId)

          if (selectedService.mandatoryExtra) {
            this.closePicker()
          }

          this.updateSettings(selectedService.settings)
          this.isServiceChanged = true

          // this.clearValidation()
          this.extrasError = []

          this.appointment.bookings[0].extras = []
          this.selectedExtras = []

          this.checkMandatoryExtras(selectedService)

          this.handleCapacity(true, false)

          this.toggleRecurringActive()

          if (this.calendarVisible) {
            this.getTimeSlots()
          }
        } else {
          this.cancelRecurringSetup()

          setTimeout(() => {
            this.selectedDate = null
            this.closePicker()
            this.resetAppointment()
            this.unSelectTime()
            this.activeRecurringSetup = false
            this.showTimes = false
          }, 200)
        }
      },

      changeEmployee (required = false) {
        this.handleCapacity(true, false)

        if (this.calendarVisible) {
          this.getTimeSlots()
        }

        if (required && !this.appointment.providerId) {
          this.cancelRecurringSetup()

          setTimeout(() => {
            this.selectedDate = null
            this.closePicker()
            this.resetAppointment()
            this.unSelectTime()
            this.activeRecurringSetup = false
            this.showTimes = false
          }, 200)
        }
      },

      changeLocation (required = false) {
        if (this.calendarVisible) {
          this.getTimeSlots()
        }

        if (required && !this.appointment.locationId) {
          this.cancelRecurringSetup()

          setTimeout(() => {
            this.selectedDate = null
            this.closePicker()
            this.resetAppointment()
            this.unSelectTime()
            this.activeRecurringSetup = false
            this.showTimes = false
          }, 200)
        }
      },

      enableGrouping () {
        this.handleCapacity(true, true)

        this.group.enabled === true ? this.appointment.bookings[0].persons += 1 : this.appointment.bookings[0].persons = 1

        if (this.calendarVisible) {
          this.getTimeSlots()
        }
      },

      changeNumberOfPersons () {
        if (this.calendarVisible) { this.getTimeSlots() }
      },

      getSelectedExtraMaxQuantity: function () {
        return ''
      },

      getAvailableExtras: function () {
        return []
      },

      addExtra: function () {},

      deleteExtra: function () {},

      changeSelectedExtra: function () {},

      fetchedEntities () {
        if (this.$root.shortcodeData.booking.service) {
          this.checkMandatoryExtras(this.options.entities.services[0])
        }

        if (this.options.entities.services.length === 0 || this.options.entities.employees.length === 0) this.empty = true
        this.setBookingCustomFields()

        if (this.employeesFiltered.length === 1) {
          this.appointment.providerId = this.employeesFiltered[0].id
        } else if (this.employeesFiltered.length > 1) {
          this.showEmployees = true
        } else {
          this.setUnavailableBooking()
          return
        }

        if (this.locationsFiltered.length === 1) {
          this.appointment.locationId = this.locationsFiltered[0].id
        } else if (this.locationsFiltered.length > 1) {
          this.showLocations = true
        }

        if (this.servicesFiltered.length === 1) {
          this.appointment.serviceId = this.servicesFiltered[0].id
        } else if (this.servicesFiltered.length > 1) {
          this.showServices = true
        } else {
          this.setUnavailableBooking()
          return
        }

        this.toggleRecurringActive()

        this.handleCapacity(true, false)

        if (('showAmeliaCalendarOnLoad' in window && window.showAmeliaCalendarOnLoad && this.appointment.serviceId) ||
            (this.showCalendarOnly(true))
        ) {
          document.getElementById(this.id + '-calendar').classList.remove('am-select-service-date-transition')
          this.getTimeSlots()
        } else {
          let shortCodeEntitiesIds = this.getShortCodeEntityIds()

          if (shortCodeEntitiesIds.show === 'packages') {
            this.options.entities.packages.sort((a, b) => a.position - b.position)
            if (this.options.entities.packages.length === 1) {
              this.selectedPackageId = this.options.entities.packages[0].id

              this.packagesHaveBack = false

              this.selectPackage(this.getPackageById(this.selectedPackageId))
            }
          }

          this.fetched = true

          this.runCacheAction()
        }
      },

      getTimeSlots (formValidation = true) {
        this.getCurrentUser()

        let service = this.appointment.serviceId ? this.getServiceById(this.appointment.serviceId) : null

        this.selectedExtras.forEach((extra, index) => {
          if (service && service.mandatoryExtra && !extra.id && this.appointment.bookings[0].minSelectedExtras > index) {
            this.extrasError.push(index)
          }
        })

        if (this.extrasError.length) {
          return false
        }

        if (this.appointment.serviceId && formValidation) {
          this.loadingTimeSlots = true
          let extras = []

          this.selectedExtras.forEach(function (extra) {
            if (extra.id) {
              extras.push({
                id: extra.id,
                quantity: extra.quantity
              })
            }
          })

          let providerIds = []
          let $this = this

          // If Employee is not selected, select ones that can provide the service
          if (!this.appointment.providerId) {
            // If grouping is enabled check employees capacity for selected service
            if ($this.group.enabled) {
              this.employeesFiltered.forEach(function (employee) {
                if (typeof (employee.serviceList.find(service => service.id === $this.appointment.serviceId && service.maxCapacity >= $this.appointment.bookings[0].persons)) !== 'undefined') {
                  providerIds.push(employee.id)
                }
              })
            } else {
              this.employeesFiltered.forEach(function (employee) {
                if (typeof (employee.serviceList.find(service => service.id === $this.appointment.serviceId)) !== 'undefined') {
                  providerIds.push(employee.id)
                }
              })
            }
          }

          // Customization hook
          if ('afterBookingSelectService' in window) {
            window.afterBookingSelectService(this.appointment, this.getServiceById(this.appointment.serviceId), this.getProviderById(this.appointment.providerId), this.getLocationById(this.appointment.locationId))
          }

          this.slotsIndexStarted++

          let currentIndex = this.slotsIndexStarted

          this.$http.get(`${this.$root.getAjaxUrl}/slots`, {
            params: {
              locationId: this.appointment.locationId,
              serviceId: this.appointment.serviceId,
              providerIds: this.appointment.providerId ? [this.appointment.providerId] : providerIds,
              extras: JSON.stringify(extras),
              group: 1,
              page: 'booking',
              persons: this.appointment.bookings[0].persons
            }
          }).then(response => {
            if (currentIndex < this.slotsIndexStarted) {
              this.fetchedSlots = true
              this.fetched = true
              this.loadingTimeSlots = false
              return
            }

            let dateSlots = this.$root.settings.general.showClientTimeZone ? this.getConvertedTimeSlots(response.data.data.slots) : response.data.data.slots

            if (!this.calendarVisible) {
              this.activePicker = !this.activePicker
              document.getElementById(this.id).classList.toggle('am-active-picker', this.activePicker)
            }

            let availableDates = []

            let minDate = null

            Object.keys(dateSlots).forEach(function (dateString) {
              if (minDate === null) {
                minDate = dateString
              }

              availableDates.push(moment(dateString).toDate())
            })

            this.showFirstEventMonth(minDate)

            this.calendarTimeSlots = dateSlots
            this.disabledWeekdays = {weekdays: []}
            this.disabledWeekdays = (availableDates.length === 0) ? {weekdays: [1, 2, 3, 4, 5, 6, 7]} : null
            this.availableDates = availableDates
            this.calendarVisible = true

            if (this.availableDates.length) {
              this.setTimeSlots()
            }

            if (!this.availableDates.length || !this.isSelectedDateAvailable()) {
              this.showTimes = false
              let amContainer = document.getElementById(this.id)
              amContainer.classList.remove('am-show-times')
            }

            let dateIsNotAvailable = !this.availableDates.length || !this.isSelectedDateAvailable()
            let timeIsNotAvailable = (this.appointment.bookingStartTime && this.availableTimeSlots.indexOf(this.appointment.bookingStartTime) === -1)

            if (dateIsNotAvailable || timeIsNotAvailable) {
              if (dateIsNotAvailable) {
                this.selectedDate = null
              }

              this.unSelectTime()
            }

            if (this.activeRecurringSetup) {
              let amContainer = document.getElementById(this.id)

              amContainer.classList.add('am-show-calendar')

              this.activeRecurringSetup = false

              if (!dateIsNotAvailable) {
                this.showTimeSlots()
              } else {
                this.times = document.getElementById(this.calendarId)
              }
            }

            this.fetchedSlots = true
            this.fetched = true
            this.loadingTimeSlots = false

            this.runCacheAction()
          }).catch(e => {
            console.log(e.message)
            this.fetchedSlots = true
            this.fetched = true
          })
        }
      },

      showFirstEventMonth (minDate) {
        if (this.isServiceChanged && (
          (this.selectedDate === null && moment(this.selectedMonth).format('YYYY-MM') !== moment(minDate, 'YYYY-MM-DD').format('YYYY-MM')) ||
          (this.selectedDate !== null && moment(this.selectedDate).format('YYYY-MM') !== moment(minDate, 'YYYY-MM-DD').format('YYYY-MM'))
        )) {
          this.selectedDate = moment(minDate).toDate()

          let $this = this

          setTimeout(function () {
            $this.selectedDate = null
          }, 100)
        }

        this.isServiceChanged = false
      },

      addSlotsElementToWeekRow (weekRow) {
        if (!this.times) {
          this.times = document.getElementById(this.calendarId)
        }
        weekRow.parentNode.insertBefore(this.times, weekRow.nextSibling)

        this.isRecurringAvailable = this.getServiceById(this.appointment.serviceId).recurringCycle !== 'disabled'

        setTimeout(() => {
          if (this.availableTimeSlots.length && this.selectedDate) {
            if (moment(this.selectedDate).format('YYYY-MM-DD') === moment(this.availableDates[this.availableDates.length - 1]).format('YYYY-MM-DD')) {
              this.activeRecurring = false
              this.isRecurringAvailable = false
            }
            this.showTimes = true
            let amContainer = document.getElementById(this.id)
            amContainer.classList.add('am-show-times')
            this.appointment.bookingStartTime = this.availableTimeSlots[0]
            this.selectedWeekIndex = [...weekRow.parentNode.children].indexOf(weekRow)

            this.selectTime()
          }
        }, 200)
      },

      selectDate (dayInfo, calendarDate) {
        this.selectedDate = calendarDate
        this.unSelectTime()
        let isDisabled = false

        dayInfo.attributes.forEach(function (attrItem) {
          if (attrItem.hasOwnProperty('key') && attrItem['key'] === 'disabled') {
            isDisabled = true
          }
        })

        if (isDisabled) {
          return
        }

        let amContainer = document.getElementById(this.id)
        amContainer.classList.remove('am-show-times')

        this.showTimes = false

        if (dayInfo.inMonth) {
          let weekRowInMonth = dayInfo.event.target.parentNode.parentNode.parentNode.parentNode.parentNode

          if (!weekRowInMonth.classList.contains('c-week')) {
            weekRowInMonth = dayInfo.event.target.parentNode.parentNode.parentNode.parentNode
          }

          if (!weekRowInMonth.classList.contains('c-week')) {
            weekRowInMonth = dayInfo.event.target.parentNode.parentNode.parentNode
          }

          this.addSlotsElementToWeekRow(weekRowInMonth)
        } else {
          setTimeout(() => {
            let weekRowNotInMonth = document.getElementById(this.id + '-calendar')
              .getElementsByClassName('c-weeks-rows')[0].children[dayInfo.weekdayOrdinal - 1]
            this.addSlotsElementToWeekRow(weekRowNotInMonth)
          }, 1000)
        }
      },

      isSelectedDateAvailable () {
        let momentDate = moment(this.selectedDate)
        return this.calendarTimeSlots.hasOwnProperty(momentDate.format('YYYY-MM-DD'))
      },

      setTimeSlots (calendarDate) {
        if (typeof calendarDate !== 'undefined') {
          this.selectedDate = calendarDate
        }
        let momentDate = moment(this.selectedDate)
        let dateString = momentDate.format('YYYY-MM-DD')

        if (this.isSelectedDateAvailable()) {
          this.availableTimeSlots = Object.keys(this.calendarTimeSlots[dateString])
          this.appointment.duration = this.getAppointmentDuration(this.getServiceById(this.appointment.serviceId), this.selectedExtras)
        }
      },

      togglePicker () {
        this.calendarVisible = false
        this.activePicker = !this.activePicker
        let amContainer = document.getElementById(this.id)
        amContainer.classList.toggle('am-active-picker', this.activePicker)
      },

      closePicker () {
        this.calendarVisible = false
        this.activePicker = false
        let amContainer = document.getElementById(this.id)
        amContainer.classList.remove('am-active-picker')
        this.isRecurringAvailable = false
        this.activeRecurring = false
      },

      selectTime () {
        this.appointment.bookingStart = moment(this.selectedDate).format('YYYY-MM-DD') + ' ' + this.appointment.bookingStartTime
        this.showCalendarContinueButton = true

        if ('ameliaBooking' in window && 'disableScrollView' in window.ameliaBooking && window.ameliaBooking.disableScrollView === true) {
          return
        }

        this.scrollView('am-button-wrapper-' + this.$root.shortcodeData.counter, 'end')
      },

      unSelectTime () {
        this.appointment.bookingStartTime = null
        this.showCalendarContinueButton = false
      },

      refreshCalendar () {
        let calendarTimeSlots = []
        let availableDates = []

        for (let dateKey in this.calendarTimeSlots) {
          for (let timeKey in this.calendarTimeSlots[dateKey]) {
            for (let slotInfoKey in this.calendarTimeSlots[dateKey][timeKey]) {
              if (this.appointment.providerId && this.calendarTimeSlots[dateKey][timeKey][slotInfoKey][0] === this.appointment.providerId) {
                if (!(dateKey in calendarTimeSlots)) {
                  availableDates.push(moment(dateKey).toDate())
                  calendarTimeSlots[dateKey] = {}
                }

                if (!(timeKey in calendarTimeSlots[dateKey])) {
                  calendarTimeSlots[dateKey][timeKey] = []
                }

                calendarTimeSlots[dateKey][timeKey].push(this.calendarTimeSlots[dateKey][timeKey][slotInfoKey])
              }
            }
          }
        }

        this.calendarTimeSlots = calendarTimeSlots
        this.disabledWeekdays = {weekdays: []}
        this.disabledWeekdays = (availableDates.length === 0) ? {weekdays: [1, 2, 3, 4, 5, 6, 7]} : null
        this.availableDates = availableDates
        this.availableTimeSlots = Object.keys(calendarTimeSlots[moment(this.selectedDate).format('YYYY-MM-DD')])
      },

      showTimeSlots () {
        setTimeout(() => {
          let weeksWrapper = document.getElementsByClassName('c-weeks-rows-wrapper')[0]
          let weekRow = weeksWrapper.firstChild.children.item(this.selectedWeekIndex)

          this.times = document.getElementById(this.calendarId)
          weekRow.parentNode.insertBefore(this.times, weekRow.nextSibling)

          this.showTimes = true
        }, 200)
      },

      cancelRecurringSetup: function () {},

      confirmRecurringSetup: function () {},

      cancelRecurringDates: function () {},

      confirmRecurringDates: function () {},

      showNextScreen () {
        this.recurringData.dates = []

        if (this.activeRecurring && this.isRecurringAvailable && !this.activeRecurringSetup) {
          this.loading = true
          this.recurringData.startDate = this.appointment.bookingStart
          this.recurringData.startTime = this.appointment.bookingStart.split(' ')[1]

          let service = this.getServiceById(this.appointment.serviceId)

          this.initialRecurringData = this.getDefaultRecurringSettings(
            this.appointment.bookingStart,
            service.recurringCycle,
            this.calendarTimeSlots
          )

          setTimeout(() => {
            let amContainer = document.getElementById(this.id)

            amContainer.classList.remove('am-show-calendar')

            this.loading = false
            this.showTimes = false
            this.activeRecurringSetup = true
          }, 500)

          return
        }

        let freeSlotEmployees = this.calendarTimeSlots[moment(this.selectedDate).format('YYYY-MM-DD')][this.appointment.bookingStartTime]

        let randomlySelectedEmployeeIndex = Math.floor(Math.random() * (freeSlotEmployees.length) + 1)

        if (!this.appointment.providerId) {
          this.appointment.providerId = this.calendarTimeSlots[moment(this.selectedDate).format('YYYY-MM-DD')][this.appointment.bookingStartTime][randomlySelectedEmployeeIndex - 1][0]
        }

        if (!this.appointment.locationId) {
          this.appointment.locationId = this.calendarTimeSlots[moment(this.selectedDate).format('YYYY-MM-DD')][this.appointment.bookingStartTime][randomlySelectedEmployeeIndex - 1][1]
        }

        this.selectedProvider = this.getProviderById(this.appointment.providerId)
        this.selectedLocation = this.getLocationById(this.appointment.locationId)

        this.refreshCalendar()

        this.appointment.bookings[0].extras = this.selectedExtras

        // Customization hook
        if ('afterBookingSelectDateAndTime' in window) {
          window.afterBookingSelectDateAndTime(this.appointment, this.getServiceById(this.appointment.serviceId), this.getProviderById(this.appointment.providerId), this.getLocationById(this.appointment.locationId))
        }

        this.showConfirmBooking()
      },

      cancelPackageList () {
        let amContainer = document.getElementById(this.id)

        this.packageListShown = false
        this.activePackage = true

        amContainer.classList.toggle('am-active-picker', true)
        amContainer.classList.toggle('am-active-package-list', false)
      },

      cancelBooking () {
        if (this.cacheData) {
          this.unsetCacheData()

          let amContainer = document.getElementById(this.id)

          this.activeConfirm = false

          amContainer.classList.toggle('am-active-confirm', false)

          return
        }

        if (this.activeRecurring) {
          let amContainer = document.getElementById(this.id)

          this.activeRecurringSetup = true
          this.activeRecurringDates = true
          this.activeConfirm = false

          amContainer.classList.toggle('am-active-confirm', false)
          amContainer.classList.add('am-active-recurring-dates')

          return
        }

        if (this.selectedPackage) {
          let amContainer = document.getElementById(this.id)

          this.activeConfirm = false
          this.activePackage = true

          if (this.selectedPackage.hasSlots) {
            this.packageListShown = true
            this.disableFetchPackageSlots = true
            amContainer.classList.add('am-active-package-list')
          }

          amContainer.classList.toggle('am-active-confirm', false)

          return
        }

        this.activeConfirm = false
        let amContainer = document.getElementById(this.id)
        amContainer.classList.toggle('am-active-confirm', this.activeConfirm)

        if (this.appointment.serviceId && this.appointment.providerId) {
          amContainer.classList.toggle('am-active-picker', true)
        }

        if (this.showCalendarOnly(true)) {
          amContainer.classList.add('am-mobile-collapsed')
          amContainer.classList.remove('am-desktop')
        }
      },

      inlineBookingSVG () {
        let inlineSVG = require('inline-svg')
        inlineSVG.init({
          svgSelector: 'img.svg-booking',
          initClass: 'js-inlinesvg'
        })
      },

      setUnavailableBooking () {
        this.showEmptyCalendar = true
        this.appointment.locationId = null
        this.group.options = []
        this.group.enabled = false
        this.group.allowed = false
        this.activePicker = !this.activePicker
        this.calendarTimeSlots = {}
        this.disabledWeekdays = {weekdays: [1, 2, 3, 4, 5, 6, 7]}
        this.availableDates = []
        this.calendarVisible = true
        this.fetchedSlots = true
        this.fetched = true
        this.loadingTimeSlots = false
        document.getElementById(this.id + '-calendar').classList.remove('am-select-service-date-transition')
        let amContainer = document.getElementById(this.id)
        amContainer.classList.toggle('am-active-picker', true)
        amContainer.classList.toggle('am-active-confirm', false)
        this.showCalendarBackButton = false
        this.showEmptyCalendar = true
      },

      handleResize () {
        let amContainer = document.getElementById(this.id)

        if (this.showEmptyCalendar || this.showCalendarOnly(true) || this.passedPackage) {
          amContainer.classList.add('am-mobile-collapsed')
          amContainer.classList.remove('am-desktop')
          this.showCalendarBackButton = this.options.entities.packages.length > 0

          return
        }

        if (amContainer) {
          let amContainerWidth = amContainer.offsetWidth

          if (this.showCalendarOnly(false) || this.passedPackage) {
            amContainer.classList.add('am-mobile-collapsed')
            amContainer.classList.remove('am-desktop')
            this.showCalendarBackButton = this.options.entities.packages.length > 0
          } else {
            if (amContainerWidth < 670) {
              amContainer.classList.add('am-mobile-collapsed')
              amContainer.classList.remove('am-desktop')
              this.showCalendarBackButton = true
            } else {
              amContainer.classList.add('am-desktop')
              amContainer.classList.remove('am-mobile-collapsed')
              this.showCalendarBackButton = this.options.entities.packages.length > 0
            }
          }
        }
      },

      confirmedBooking (responseData, skipNotify) {
        this.activeConfirm = false
        this.bookingCompleted = true

        this.addToCalendarData = this.getAppointmentAddToCalendarData(
          responseData,
          skipNotify
        )

        // Customization hook
        if ('beforeConfirmedBooking' in window) {
          window.beforeConfirmedBooking(this.addToCalendarData)
        }

        this.showAddToCalendar = true
      },

      clearValidation () {
        if (typeof this.$refs.booking !== 'undefined') {
          this.$refs.booking.clearValidate()
        }
      },

      closeDialogAddToCalendar () {
        this.showAddToCalendar = false
        document.getElementsByClassName('amelia-app-booking')[0].style.display = 'none'
        window.location.reload()
      },

      resetAppointment () {
        this.appointment = {
          bookingStart: '',
          bookingStartTime: '',
          bookings: [{
            customer: {
              email: '',
              externalId: null,
              firstName: '',
              id: null,
              lastName: '',
              phone: ''
            },
            customFields: {},
            customerId: 0,
            extras: [],
            persons: 1
          }],
          duration: 0,
          group: false,
          notifyParticipants: this.$root.settings.notifications.notifyCustomers,
          payment: {
            amount: 0,
            gateway: '',
            data: {}
          },
          categoryId: null,
          providerId: 0,
          serviceId: null,
          locationId: null
        }

        this.setBookingCustomFields()
      },

      continuePackage (selectedId) {
        if (!selectedId) {
          return false
        }

        this.selectedPackageId = selectedId
        this.selectPackage(this.getPackageById(selectedId))
      }
    },

    components: {
      moment,
      selectServiceForm,
      calendarDateTimeForm,
      recurringSetup,
      recurringDates,
      selectPackageForm,
      packageInfo,
      packageSetup,
      packageList,
      confirmBooking,
      addToCalendar
    }
  }
</script>