0byt3m1n1-V2

Path: /app/wp-content/ameliabooking/assets/views/backend/customize/formFields/ [ Home ]
File: EventDetailsFormField.vue
<template>
  <div
    class="am-customize-field"
    :class="{'editable': (editable && activeFormTab === '1')}"
    :style="{borderColor: '#000000'}"
  >
    <!-- Events -->
    <div
      v-for="(evt, index) in events"
      :key="index"
      class="am-event"
      :class="{
        'am-active': evt.showEventDetails,
        'inactive': events.filter(event => event.showEventDetails && event.id !== evt.id).length > 0,
        'canceled': getEventAvailability(evt).class === 'canceled',
        'closed': getEventAvailability(evt).class === 'closed' && !evt.showAddToCalendar,
        'full': getEventAvailability(evt).class === 'full',
        'upcoming': getEventAvailability(evt).class === 'upcoming'
      }"
      :style="{pointerEvents: evt.showAddToCalendar ? 'all' : (getEventAvailability(evt).class !== 'open' ? 'none' : 'all'), backgroundColor: customizationForm.formBackgroundColor}"
    >
      <div class="am-event-data" @click="getEventAvailability(evt).class !== 'open' ? function () {} : toggleEventDetails(evt)">

        <!-- Event Dates -->
        <div v-if="isEventInSameDay(evt)" class="am-event-date">
          <div class="am-event-date-month" :style="getBookableColor(evt, false)">
            {{ getEventFrontedFormattedDate(evt.periods[0].periodStart).split(' ')[0] }}
          </div>
          <div class="am-event-date-day" :style="{color: customizationForm.formTextColor}">
            {{ getEventFrontedFormattedDate(evt.periods[0].periodStart).split(' ')[1] }}
          </div>
        </div>

        <div v-else class="am-event-dates">
          <div>
            <div class="am-event-date-month" :style="getBookableColor(evt, false)">
              {{ getEventFrontedFormattedDate(evt.periods[0].periodStart).split(' ')[0] }}
            </div>
            <div class="am-event-date-day" :style="{color: customizationForm.formTextColor}">
              {{ getEventFrontedFormattedDate(evt.periods[0].periodStart).split(' ')[1] }}
            </div>
          </div>

          <div>
            <div class="am-event-date-month" :style="getBookableColor(evt, false)">
              {{ getEventFrontedFormattedDate(evt.periods[evt.periods.length - 1].periodEnd).split(' ')[0] }}
            </div>
            <div class="am-event-date-day" :style="{color: customizationForm.formTextColor}">
              {{ getEventFrontedFormattedDate(evt.periods[evt.periods.length - 1].periodEnd).split(' ')[1] }}
            </div>
          </div>
        </div>

        <!-- Event Info -->
        <div class="am-event-info">
          <div class="am-event-title" :style="{color: customizationForm.formTextColor}">
            {{ evt.name }}
            <span class="am-event-booking-status" :class="getEventAvailability(evt).class" >
              {{ getEventAvailability(evt).label }}
            </span>
          </div>
          <div class="am-event-sub-info">
            <div
              v-if="capacityVisibility"
              :style="{color: customizationForm.formTextColor}"
              class="am-event-sub-info-capacity"
            >
              <img class="svg" :style="{fill: customizationForm.formTextColor}" :src="$root.getUrl + 'public/img/capacity.svg'">
              <span>
                <template v-if="!languageShortCode">
                  {{`${labelCapacity.value || $root.labels.event_capacity} ${evt.maxCapacity - evt.places} / ${evt.maxCapacity}`}}
                </template>
                <template v-else>
                  {{`${labelCapacity.translations[languageShortCode] || $root.labels.event_capacity} ${evt.maxCapacity - evt.places} / ${evt.maxCapacity}`}}
                </template>
              </span>
            </div>
            <div v-if="locationVisibility" :style="{color: customizationForm.formTextColor}">
              <img :src="$root.getUrl + 'public/img/pin.svg'">
              <span>
                {{ evt.location }}
              </span>
            </div>
            <div v-if="dateTimeVisibility" :style="{color: customizationForm.formTextColor}">
              <img :src="$root.getUrl + 'public/img/clock.svg'">
              <span>
                {{ getEventDatesAndTimes(evt.periods) }}
              </span>
            </div>

            <div v-if="timeZoneVisibility" :style="{color: customizationForm.formTextColor}">
              <span>
                {{ timeZoneString }}
              </span>
            </div>
          </div>
        </div>

        <!-- Event Price -->
        <div v-if="evt.price !== 0 && eventPriceVisibility" class="am-event-price" :style="getBookableColor(evt, true)">
          {{ getFormattedPrice(evt.price, !$root.settings.payments.hideCurrencySymbolFrontend)  }}
        </div>
        <div v-if="evt.price === 0 && eventPriceVisibility" class="am-event-price am-event-free" :style="getBookableColor(evt, false)">
          <template v-if="!languageShortCode">
            {{labelEventFree.value || $root.labels.event_free}}
          </template>
          <template v-else>
            {{ labelEventFree.translations[languageShortCode] || $root.labels.event_free }}
          </template>
        </div>
      </div>

      <transition name="fade">
        <div v-show="evt.showEventDetails && activeFormTab === '1'">
          <!-- Event Details -->
          <div
            v-if="(evt.gallery && evt.gallery.length) || (evt.description && evt.description.length)"
            class="am-event-details"
          >
            <div
              v-if="evt.description && evt.description.length"
              class="am-event-about"
            >
              <div :style="{color: customizationForm.formTextColor}">
                <template v-if="!languageShortCode">
                  {{ labelAboutEvent.value || $root.labels.event_about }}
                </template>
                <template v-else>
                  {{ labelAboutEvent.translations[languageShortCode] || $root.labels.event_about }}
                </template>
              </div>
              <div v-html="evt.description" :style="{color: customizationForm.formTextColor}"></div>
            </div>
          </div>

          <!-- Event Book -->
          <div
            v-if="getEventAvailability(evt).class === 'open'"
            class="am-event-book-cta"
            :class="getEventAvailability(evt).class"
          >
            <div
              v-if="bookEventVisibility"
              :style="{color: customizationForm.formTextColor}"
              class="am-event-book-cta__inner"
            >
              <span>
                <template v-if="!languageShortCode">
                  {{ labelBookEvent.value || $root.labels.event_book }}
                </template>
                <template v-else>
                  {{ labelBookEvent.translations[languageShortCode] || $root.labels.event_book }}
                </template>
              </span>
            </div>
            <div>
              <el-form>
                <el-form-item v-if="evt.bringingAnyone">
                  <template slot="label">
                    <span :style="{color: customizationForm.formTextColor}">
                      <template v-if="!languageShortCode">
                        {{ labelPersons.value || $root.labels.event_book_persons }}
                      </template>
                      <template v-else>
                        {{ labelPersons.translations[languageShortCode] || $root.labels.event_book_persons }}
                      </template>
                    </span>
                  </template>
                  <el-input-number
                    :value="appointment.bookings[0].persons"
                    :min="1"
                    :max="evt.places"
                    @focus="inputFocus"
                    @change="setPlaces"
                    :style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.primaryColor : '#C0C4CC' }"
                  >
                  </el-input-number>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    :style="getBookableColor(evt, true)"
                    :disabled="evt.places <= 0"
                  >
                    {{$root.labels.continue}}
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </transition>

      <transition name="fade">
        <div v-show="evt.showEventDetails && activeFormTab === '2'">
          <!-- Confirm Booking Form -->
          <confirm-booking-form
            :editable="editable"
            :language-short-code="languageShortCode"
            :event-color="evt.color"
            :customization="customization"
            :customize-display="'event'"
            :customization-form="customizationForm"
            :form-step-data="formStepData.confirmBookingForm['event']"
            @saveEdit="saveStepEdit"
            @saveDraggableEdit="saveDraggableEdit"
          ></confirm-booking-form>
          <!-- /Confirm Booking Form -->
        </div>
      </transition>

      <transition name="fade">
        <div v-show="evt.showEventDetails && activeFormTab === '3'">
          <!-- Congratulations Form -->
          <congratulations-form
            :editable="editable"
            :language-short-code="languageShortCode"
            :event-color="evt.color"
            :customization="customization"
            :customize-display="'event'"
            :customization-form="customizationForm"
            :form-step-data="formStepData.congratulationsForm['event']"
            @saveEdit="saveStepEdit"
          ></congratulations-form>
          <!-- /Congratulations Form -->
        </div>
      </transition>
    </div>
    <!-- /Events -->

    <!-- Edit Dialog -->
    <customize-edit-dialog
      :form-field="formField"
      :language-short-code="languageShortCode"
      @saveEdit="saveFormFiledEdit"
    >
      <template v-slot:fieldEdit>
        <span v-show="editable && activeFormTab === '1'" class="am-customize-field__edit">
          <img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
        </span>
      </template>
    </customize-edit-dialog>
    <!-- /Edit Dialog -->
  </div>
</template>

<script>
import moment from 'moment'
import dateMixin from '../../../../js/common/mixins/dateMixin'
import eventMixin from '../../../../js/common/mixins/eventMixin'
import priceMixin from '../../../../js/common/mixins/priceMixin'
import helperMixin from '../../../../js/backend/mixins/helperMixin'
import customizeEditDialog from '../dialogs/CustomizeEditDialog'
import confirmBookingForm from '../formSteps/ConfirmBookingForm'
import congratulationsForm from '../formSteps/CongratulationsForm'

export default {
  name: 'eventDetailsFormField',

  components: {
    customizeEditDialog,
    confirmBookingForm,
    congratulationsForm
  },

  mixins: [dateMixin, eventMixin, priceMixin, helperMixin],

  props: {
    languageShortCode: {
      type: String,
      default: ''
    },
    activeFormTab: {
      type: String
    },
    customization: {
      type: Object
    },
    editable: {
      type: Boolean,
      default: true
    },
    oppositeBackgroundColor: {
      type: String,
      default: '#000'
    },
    customizationForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formStepData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formField: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data () {
    return {
      events: [
        {
          id: 2,
          name: 'Event Name 2',
          status: 'approved',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          periods: [{
            periodStart: `${moment(new Date()).add(1, 'M').format('YYYY-MM-DD')} 14:30:00`,
            periodEnd: `${moment(new Date()).add(1, 'M').add(3, 'days').format('YYYY-MM-DD')} 18:00:00`
          }],
          price: 0,
          places: 5,
          maxCapacity: 10,
          location: 'Location Name',
          bringingAnyone: true,
          bookable: true,
          opened: true,
          closed: false,
          upcoming: false,
          full: false,
          cancelable: true,
          showEventDetails: true
        },
        {
          id: 3,
          name: 'Event Name 3',
          status: 'approved',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          periods: [{
            periodStart: `${moment(new Date()).add(1, 'M').add(7, 'days').format('YYYY-MM-DD')} 14:30:00`,
            periodEnd: `${moment(new Date()).add(1, 'M').add(7, 'days').format('YYYY-MM-DD')} 18:00:00`
          }],
          price: 10,
          places: 1,
          maxCapacity: 10,
          location: 'Location Name',
          bringingAnyone: true,
          bookable: true,
          opened: true,
          closed: false,
          upcoming: false,
          full: false,
          cancelable: true,
          showEventDetails: false
        },
        {
          id: 1,
          name: 'Event Name 1',
          status: 'approved',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          periods: [{
            periodStart: `${moment(new Date()).add(1, 'M').format('YYYY-MM-DD')} 14:30:00`,
            periodEnd: `${moment(new Date()).add(1, 'M').add(3, 'days').format('YYYY-MM-DD')} 18:00:00`
          }],
          price: 0,
          places: 0,
          maxCapacity: 10,
          location: 'Location Name',
          bringingAnyone: true,
          bookable: false,
          opened: false,
          closed: true,
          upcoming: false,
          full: false,
          cancelable: true,
          showEventDetails: false
        },
        {
          id: 4,
          name: 'Event Name 4',
          status: 'rejected',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          periods: [{
            periodStart: `${moment(new Date()).add(1, 'M').add(15, 'days').format('YYYY-MM-DD')} 14:30:00`,
            periodEnd: `${moment(new Date()).add(1, 'M').add(16, 'days').format('YYYY-MM-DD')} 18:00:00`
          }],
          price: 10,
          places: 0,
          maxCapacity: 10,
          location: 'Location Name',
          bringingAnyone: true,
          bookable: true,
          opened: true,
          closed: false,
          upcoming: false,
          full: false,
          cancelable: true,
          showEventDetails: false
        },
        {
          id: 5,
          name: 'Event Name 5',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          price: 10,
          periods: [
            {
              periodStart: `${moment(new Date()).add(1, 'M').add(20, 'days').format('YYYY-MM-DD')} 14:30:00`,
              periodEnd: `${moment(new Date()).add(1, 'M').add(22, 'days').format('YYYY-MM-DD')} 18:00:00`
            }
          ],
          location: 'Location Name',
          maxCapacity: 10,
          bringingAnyone: true,
          status: 'approved',
          bookable: true,
          cancelable: true,
          opened: false,
          closed: false,
          places: 0,
          upcoming: false,
          full: true,
          showEventDetails: false
        },
        {
          id: 6,
          name: 'Event Name 6',
          description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
          color: '#689BCA',
          price: 10,
          periods: [
            {
              periodStart: `${moment(new Date()).add(1, 'M').format('YYYY-MM-DD')} 14:30:00`,
              periodEnd: `${moment(new Date()).add(1, 'M').add(3, 'days').format('YYYY-MM-DD')} 18:00:00`
            }
          ],
          status: 'approved',
          maxCapacity: 10,
          bringingAnyone: true,
          bookable: false,
          location: 'Location Name',
          cancelable: true,
          opened: false,
          closed: true,
          places: 0,
          upcoming: true,
          full: false,
          showEventDetails: false
        }
      ],
      appointment: {
        bookings: [{
          persons: 1
        }]
      },
      labelCapacity: this.formField.labels.event_capacity,
      capacityVisibility: this.formField.labels.event_capacity.visibility,
      locationVisibility: this.formField.labels.location.visibility,
      dateTimeVisibility: this.formField.labels.event_date.visibility,
      timeZoneVisibility: this.formField.labels.time_zone.visibility,
      eventPriceVisibility: this.formField.labels.event_price.visibility,
      labelEventFree: this.formField.labels.event_free,
      labelOpen: this.formField.labels.open,
      labelClosed: this.formField.labels.closed,
      labelCanceled: this.formField.labels.canceled,
      labelFull: this.formField.labels.full,
      labelUpcoming: this.formField.labels.upcoming,
      labelAboutEvent: this.formField.labels.event_about,
      labelBookEvent: this.formField.labels.event_book,
      bookEventVisibility: this.formField.labels.event_book.visibility,
      labelPersons: this.formField.labels.event_book_persons,
      selectInputFocus: false,
      timeZoneString: this.$root.settings.general.showClientTimeZone ? Intl.DateTimeFormat().resolvedOptions().timeZone : this.$root.settings.wordpress.timezone
    }
  },

  mounted () {},

  methods: {
    saveStepEdit (dataObj) {
      let formObj = {}
      formObj = JSON.parse(JSON.stringify(dataObj))
      this.$emit('saveStepEdit', formObj)
    },

    saveDraggableEdit (dataObj) {
      let formObj = {}
      formObj = JSON.parse(JSON.stringify(dataObj))
      this.$emit('saveDraggableEdit', formObj)
    },

    inputFocus () {
      this.selectInputFocus = true
    },

    saveFormFiledEdit (objData) {
      let fieldData = {}
      fieldData['itemsStatic'] = {}
      fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
      this.$emit('saveEdit', fieldData)
    },

    getEventAvailability (evt) {
      if (evt.status === 'approved' || evt.status === 'pending') {
        if (evt.full) {
          return {
            label: (this.languageShortCode ? this.labelFull.translations[this.languageShortCode] : this.labelFull.value) || this.$root.labels.full,
            class: 'full'
          }
        }
        if (evt.upcoming) {
          return {
            label: (this.languageShortCode ? this.labelUpcoming.translations[this.languageShortCode] : this.labelUpcoming.value) || this.$root.labels.upcoming,
            class: 'upcoming'
          }
        }
        return !evt.bookable ? {
          label: (this.languageShortCode ? this.labelClosed.translations[this.languageShortCode] : this.labelClosed.value) || this.$root.labels.closed,
          class: 'closed'
        } : {
          label: (this.languageShortCode ? this.labelOpen.translations[this.languageShortCode] : this.labelOpen.value) || this.$root.labels.open,
          class: 'open'
        }
      } else {
        return {
          label: (this.languageShortCode ? this.labelCanceled.translations[this.languageShortCode] : this.labelCanceled.value) || this.$root.labels.canceled,
          class: 'canceled'
        }
      }
    },

    isEventInSameDay (evt) {
      let result = true

      if (evt.periods.length === 1) {
        result = evt.periods[0].periodStart.split(' ')[0] === evt.periods[0].periodEnd.split(' ')[0]
      } else {
        let periodStart = evt.periods[0].periodStart.split(' ')[0]
        let periodEnd = evt.periods[0].periodEnd.split(' ')[0]

        evt.periods.forEach(function (period) {
          if (period.periodStart.split(' ')[0] !== periodStart || period.periodEnd.split(' ')[0] !== periodEnd) {
            result = false
          }
        })
      }

      return result
    },

    getBookableColor (bookable, colorBackground) {
      return colorBackground ? {
        'color': this.customization.textColorOnBackground,
        'background-color': bookable.color,
        'border-color': '#ffffff'
      } : {
        'color': bookable.color,
        'background-color': '',
        'border-color': ''
      }
    },

    setPlaces (value) {
      this.appointment.bookings[0].persons = value
    },

    getEventDatesAndTimes (periods) {
      let $this = this

      let resultPeriods = []

      this.getImplodedPeriods(periods).forEach(function (period) {
        let periodStart = period.periodStart.split(' ')
        let periodEnd = period.periodEnd.split(' ')

        if (period.isConnected) {
          resultPeriods.push($this.getFrontedFormattedDateTime(periodStart) + ' - ' + $this.getFrontedFormattedDateTime(periodEnd))
        } else {
          if (periodStart[0] === periodEnd[0]) {
            resultPeriods.push($this.getFrontedFormattedDate(periodStart[0]) + ' ' + $this.getFrontedFormattedTime(periodStart[1]) + ' - ' + $this.getFrontedFormattedTime(periodEnd[1]))
          } else {
            resultPeriods.push($this.getFrontedFormattedDate(periodStart[0]) + ' - ' + $this.getFrontedFormattedDate(periodEnd[0]) + ' ' + $this.getFrontedFormattedTime(periodStart[1]) + ' - ' + $this.getFrontedFormattedTime(periodEnd[1]))
          }
        }
      })

      return resultPeriods.join(', ')
    },

    toggleEventDetails (evt) {
      evt.showEventDetails = !evt.showEventDetails
      this.events.forEach(function (event) {
        if (event.id !== evt.id) {
          event.showEventDetails = false
        }
      })
    }
  },

  watch: {
    'formField' () {
      this.labelCapacity = this.formField.labels.event_capacity
      this.capacityVisibility = this.formField.labels.event_capacity.visibility
      this.locationVisibility = this.formField.labels.location.visibility
      this.dateTimeVisibility = this.formField.labels.event_date.visibility
      this.timeZoneVisibility = this.formField.labels.time_zone.visibility
      this.eventPriceVisibility = this.formField.labels.event_price.visibility
      this.labelEventFree = this.formField.labels.event_free
      this.labelOpen = this.formField.labels.open
      this.labelClosed = this.formField.labels.closed
      this.labelCanceled = this.formField.labels.canceled
      this.labelFull = this.formField.labels.full
      this.labelUpcoming = this.formField.labels.upcoming
      this.labelAboutEvent = this.formField.labels.event_about
      this.labelBookEvent = this.formField.labels.event_book
      this.bookEventVisibility = this.formField.labels.event_book.visibility
      this.labelPersons = this.formField.labels.event_book_persons
    }
  }
}
</script>