FileMaster

Edit File: ConfirmBooking.vue

<div v-show="fetched">

<div class="am-payment-error">
        <el-alert
          :id="'am-payment-error-' + $root.shortcodeData.counter"
          :title="headerErrorMessage !== '' ? headerErrorMessage : $root.labels.payment_error"
          type="warning"
          v-show="headerErrorShow"
          show-icon
        >
        </el-alert>
      </div>

<div class="am-confirmation-booking-header" v-show="fetched" v-if="bookableType === 'appointment' && serviceHeadingVisibility">
        <img :src="pictureLoad(bookable, false)" @error="imageLoadError(bookable, false)" :alt="bookable.name"/>
        <h2 :style="{fontWeight: 500, fontFamily: $root.settings.customization.font}" :class="`am-block-${formType}-${formName}-${bookableType}`">
          {{ bookable.name }}
        </h2>
      </div>

<div class="am-confirmation-booking-package-wrapper" v-if="bookableType === 'package' && hasHeader">

<div class="am-package-header">
          
          <div class="am-package-header-image-data-wrapper">
            
            <div class="am-package-image">
              <img :src="pictureLoad(bookable, false)" @error="imageLoadError(bookable, false)"/>
              <span :style="{'background-color': bookable.color}">
                <img :src="$root.getUrl + 'public/img/am-package-catalog.svg'">
              </span>
            </div>

<div class="am-package-data">

<div class="am-package-title">
                <h2 :style="{fontWeight: 500, fontFamily: $root.settings.customization.font}">
                  {{ bookable.name }}
                </h2>
              </div>
              
            </div>
            
          </div>

<div class="am-package-price" v-if="bookable.price">
            
            <div class="am-package-price__wrapper" :class="{'am-service-price__wrapper-discount': bookable.discount && !bookable.calculatedPrice}">
              {{ getFormattedPrice(bookable.price, !$root.settings.payments.hideCurrencySymbolFrontend) }}
            </div>

<div v-if="bookable.discount && !bookable.calculatedPrice" class="am-package-price__discount">
              <img class="am-package-price__discount-image" :src="$root.getUrl + 'public/img/am-package-catalog.svg'">
              <div class="am-package-price__discount-text">
                {{ $root.labels.package_discount_text + ' ' + bookable.discount + '%' }}
              </div>
            </div>
            
          </div>

</div>
        
      </div>

<el-form
        :model="appointment.bookings[0]"
        ref="booking"
        :rules="rules"
        label-position="top"
        @submit.prevent="onSubmit"
        class="am-confirm-booking-form"
      >
        <el-row class="am-confirm-booking-data" :gutter="24">
          
          <el-col :sm="24" v-if="bookableType === 'appointment'">
            <confirm-heading-data-form-field
              :bookable-start="bookable.bookingStart"
              :provider="provider"
              :location="location"
              :form-field="formsData[formName][bookableType].itemsStatic"
            ></confirm-heading-data-form-field>
          </el-col>

<el-col :sm="24" v-if="recurringData.length && recurringStringVisibility">
            <recurring-string-form-field
              :recurring-string="recurringString"
              :form-field="formsData[formName][bookableType].itemsStatic"
            ></recurring-string-form-field>
          </el-col>

<div class="am-custom-fields">
            <el-row :gutter="24">
              <el-col
                v-for="(customField, key) in customFields"
                v-if="isBookableCustomFieldVisible(customField)"
                :key="customField.id"
                :sm="columnsLg"
                :ref="'customFields.' + customField.id + '.value'"
              >
                <el-form-item
                  :label="(customField.type !== 'content' && customField.type !== 'checkbox' && customField.type !== 'radio') && customField.label ? customField.label : ''"
                  :prop="customField.required === true && customField.type !== 'content' && customField.type !== 'file' ? 'customFields.' + customField.id + '.value' : (customField.required === true && customField.type !== 'file' ? 'inputFile' : null)"
                  :error="errors.files && customField.type === 'file' && customField.required ? errors.files['files' + customField.id] : null"
                  :class="[
                    getCustomFieldClass(customField),
                    ($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `am-custom-${formType}-${formName}-${bookableType}` : ''
                  ]"
                >
                  <span
                    v-if="(customField.type === 'checkbox' || customField.type === 'radio') && customField.label" v-html="customField.label ? '<label class=' + '\'el-form-item__label\'>' + customField.label + '</label>' : ''"
                    :class="(customField.type === 'checkbox' || customField.type === 'radio') && customField.required ? 'am-custom-required-as-html' : ''">
                  </span>

<el-input
                    v-if="customField.type === 'text'"
                    placeholder=""
                    v-model="appointment.bookings[0].customFields[customField.id].value"
                    @input="validateFieldsForPayPal()"
                  >
                  </el-input>

<div class="el-input" v-if="customField.type === 'address'" :style="{marginBottom: $root.settings.general.gMapApiKey ? '':0}">
                    <vue-google-autocomplete
                      v-if="googleMapsLoaded()"
                      :ref="'amelia-cf-address-'+customField.id"
                      :id="'address-autocomplete-'+customField.id"
                      classname="el-input__inner"
                      @change="setAddressCF($event, customField.id)"
                      placeholder=""
                      types=""
                    >
                    </vue-google-autocomplete>
                    <el-input
                      v-else
                      placeholder=""
                      v-model="appointment.bookings[0].customFields[customField.id].value"
                      @input="validateFieldsForPayPal()"
                    >
                    </el-input>
                  </div>

<el-input
                    v-else-if="customField.type === 'text-area'"
                    class="am-front-texarea"
                    placeholder=""
                    v-model="appointment.bookings[0].customFields[customField.id].value"
                    type="textarea"
                    :rows="3"
                    @input="validateFieldsForPayPal()"
                  >
                  </el-input>

<div v-else-if="customField.type === 'content'" class="am-text-content">
                    <i class="el-icon-info"></i>
                    <p style='display: inline;' v-html="customField.label"></p>
                  </div>

<el-select
                    v-else-if="customField.type === 'select'"
                    v-model="appointment.bookings[0].customFields[customField.id].value"
                    :popper-class="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `am-dropdown-${formType}-${formName}-${bookableType}` : ''"
                    placeholder=""
                    clearable
                    @change="validateFieldsForPayPal()"
                  >
                    <el-option
                      v-for="(option, index) in getCustomFieldOptions(customField.options)"
                      :key="index"
                      :value="option"
                      :label="option"
                      :style="{'color': appointment.bookings[0].customFields[customField.id].value === option ? bookable.color : ''}"
                    >
                    </el-option>
                  </el-select>

<el-checkbox-group
                    v-else-if="customField.type === 'checkbox'"
                    v-model="appointment.bookings[0].customFields[customField.id].value"
                    @change="selectedCustomFieldValue"
                  >
                    <el-checkbox
                      v-for="(option, index) in getCustomFieldOptions(customField.options)"
                      :key="index"
                      :label="option"
                    >
                    </el-checkbox>
                  </el-checkbox-group>

<el-radio-group
                    v-else-if="customField.type === 'radio'"
                    v-model="appointment.bookings[0].customFields[customField.id].value"
                    @change="selectedCustomFieldValue"
                  >
                    <el-radio
                      v-for="(option, index) in getCustomFieldOptions(customField.options)"
                      :key="index"
                      :label="option"
                      ref="customFieldsRadioButtons"
                    >
                    </el-radio>
                  </el-radio-group>

<div v-if="customField.type === 'file'">
                    <el-upload
                      :auto-upload="false"
                      action=""
                      drag
                      ref="customFieldsFiles"
                      :accept="$root.fileUploadExtensions.join(',')"
                      :on-change="onSelectFiles"
                      multiple
                    >
                      <i class="el-icon-upload"></i><span>{{$root.labels.file_upload}}</span>
                    </el-upload>
                  </div>

<div v-if="customField.type === 'datepicker'">
                    <v-date-picker
                      v-model="appointment.bookings[0].customFields[customField.id].value"
                      class='am-calendar-picker'
                      @input="validateFieldsForPayPal()"
                      mode='single'
                      popover-visibility="focus"
                      popover-direction="top"
                      :popover-align="screenWidth < 768 ? 'center' : 'left'"
                      :tint-color='"#1A84EE"'
                      :show-day-popover=false
                      :input-props='{class: "el-input__inner"}'
                      input-class="el-input__inner"
                      :is-expanded=false
                      :is-required=true
                      :disabled=false
                      :formats="vCalendarFormats"
                    ></v-date-picker>
                  </div>

</el-form-item>
              </el-col>

<el-col
                :sm="columnsLg"
                :class="$root.settings.general.googleRecaptcha.invisible ? '' : 'am-confirm-booking-recaptcha'"
                v-if="$root.settings.general.googleRecaptcha.enabled"
              >
                <el-form-item :error="errors.recaptcha">
                  <div id="recaptcha">
                    <vue-recaptcha
                      ref="recaptcha"
                      :size="$root.settings.general.googleRecaptcha.invisible ? 'invisible' : null"
                      @verify="onRecaptchaVerify"
                      @expired="onRecaptchaExpired"
                      :loadRecaptchaScript="true"
                      class="am-confirm-booking-recaptcha-block"
                      :sitekey="$root.settings.general.googleRecaptcha.siteKey">
                    </vue-recaptcha>
                  </div>
                </el-form-item>
              </el-col>
              
            </el-row>
          </div>

</el-row>

<el-row :gutter="24" class="am-confirm-booking-payment">

<el-col
          :span="formsData[formName][bookableType].itemsStatic.paymentMethodFormField.switchPaymentMethodView &&
           formsData[formName][bookableType].itemsStatic.paymentMethodFormField.switchPaymentMethodView === 'Selectbox' ? 12 : 24">
            <payment-method-form-field
              :total-price="getTotalPrice() > 0"
              :bookable-color="bookable.color"
              :payment-options="paymentOptions"
              :appointment="appointment"
              :classIdentifier="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `${formType}-${formName}-${bookableType}` : ''"
              :form-field="formsData[formName][bookableType].itemsStatic"
              @changeItem="validateFieldsForPayPal()"
            ></payment-method-form-field>
          </el-col>

<el-col :sm="columnsLg">
            <stripe-card-form-field
              :appointment="appointment"
              :errors="errors"
              :total-price="getTotalPrice() > 0"
              :stripe-payment="stripePayment"
              :class-identifier="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `${formType}-${formName}-${bookableType}` : ''"
              :form-field="formsData[formName][bookableType].itemsStatic"
            ></stripe-card-form-field>
          </el-col>

</el-row>

<el-row class="am-confirm-booking-data" :gutter="24">

<el-col  :sm="24" :lg="24">
            <payment-type-form-field
              :show="bookable.depositData && bookable.depositData.depositFullPayment && getPaymentGateway() !== 'onSite'"
              :bookable-color="bookable.color"
              :classIdentifier="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `${formType}-${formName}-${bookableType}` : ''"
              :form-field="formsData[formName][bookableType].itemsStatic"
              @changeItem="paymentTypeChanged"
            >
            </payment-type-form-field>
          </el-col>

</el-row>

<el-row>
          <el-col :sm="24">

<div class="am-confirmation-booking-cost" v-if="!packageData" :style="{paddingTop: '16px'}">

<el-row :gutter="24" v-if="bookable.maxCapacity > 1">
                <el-col :span="12">
                  <p>{{ priceLabels.total_number_of_persons.value || $root.labels.total_number_of_persons }}</p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right">
                    {{ bookable.ticketsData ? bookable.ticketsData.totalTickets : appointment.bookings[0].persons }}
                  </p>
                </el-col>
              </el-row>

<el-row :gutter="24" v-for="(item, index) in instantPaymentBasePriceData" :key="index">
                <el-col :span="6">
                  <p :style="{'visibility': index === 0 ? 'visible' : 'hidden'}">
                    {{ priceLabels.base_price_colon.value || $root.labels.base_price_colon }}
                  </p>
                </el-col>
                <el-col :span="18">
                  <p class="am-semi-strong am-align-right">
                    {{ bookable.ticketsData ? getBookingTicketsBasePriceCalculationString(bookable.ticketsData) :
                      getBookingBasePriceCalculationString(item.count, item.price) }}
                  </p>
                </el-col>
              </el-row>

<el-row
                class="am-confirmation-extras-cost" :gutter="24"
                v-if="appointment.bookings[0].extras.length > 0 && amountData.instant.total > 0"
              >
                <el-collapse
                  accordion v-if="selectedExtras.length > 0"
                  :class="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `am-block-${formType}-${formName}-${bookableType}`: ''"
                >
                  <el-collapse-item name="1">
                    <template slot="title">
                      <div class="am-extras-title">
                        {{ priceLabels.extras_costs_colon.value || $root.labels.extras_costs_colon }}
                      </div>
                      <div
                        class="am-extras-total-cost am-semi-strong"
                        :style="bookableType === 'event' && !useGlobalCustomization ? getBookableColor(false) : {}"
                      >
                        {{ getFormattedPrice(getExtrasPrice(instantPaymentBookingsCount), !$root.settings.payments.hideCurrencySymbolFrontend) }}
                      </div>
                    </template>
                    <div v-for="extra in selectedExtras">
                      <div class="am-extras-details">{{ extra.name }}</div>
                      <div class="am-extras-cost">{{ getSelectedExtraDetails(extra) }}</div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <div v-else>
                  <el-col :span="12">
                    <p>{{ priceLabels.extras_costs_colon.value || $root.labels.extras_costs_colon }}</p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right">
                      {{ getFormattedPrice(getExtrasPrice(instantPaymentBookingsCount), !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </div>
              </el-row>

<el-row
                :gutter="0" class="am-add-coupon am-flex-row-middle-align"
                v-if="$root.settings.payments.coupons && amountData.instant.total > 0"
              >

<el-col v-if="bookableType === 'appointment'" :sm="10" :xs="10">
                  <img :src="$root.getUrl+'public/img/coupon.svg'" class="svg-amelia" alt="add-coupon">
                  <span>{{ $root.labels.add_coupon }}</span>
                </el-col>
                <el-col v-else :sm="10" :xs="10">
                  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <desc>Created with Sketch.</desc>
                    <defs></defs>
                    <g id="Icons" stroke="none" stroke-width="1" :style="{'fill':bookable.color}" fill-rule="evenodd">
                      <g id="Group" :fill="bookable.color">
                        <path
                          :style="{'fill':bookable.color}"
                          d="M7.152,12.7704615 C6.29353846,11.5809231 6.26092308,10.8652308 6.23446154,10.2904615 C6.22953846,10.1852308 6.22584615,10.0978462 6.21661538,10.0055385 C6.17415385,9.54953846 5.84676923,8.64738462 5.22769231,7.74461538 C4.37538462,6.49907692 3.79384615,4.63569231 4.95876923,3.48307692 C5.232,3.21230769 5.58523077,3.06953846 5.97907692,3.06953846 C6.952,3.06953846 7.98892308,4.02892308 8.61538462,4.85846154 L8.61538462,3.55261538 L8.61538462,1.23261538 C8.61538462,0.552615385 8.06276923,0 7.38461538,0 L5.53661538,0 C5.36861538,0 5.232,0.134769231 5.22892308,0.302769231 C5.22092308,0.804923077 4.80738462,1.21353846 4.30769231,1.21353846 C3.80738462,1.21353846 3.39446154,0.804923077 3.38646154,0.302769231 C3.38338462,0.134769231 3.24676923,0 3.07876923,0 L1.23076923,0 C0.552,0 0,0.552615385 0,1.23261538 L0,12.3058462 C0,12.9858462 0.552,13.5384615 1.23076923,13.5384615 L3.07692308,13.5384615 C3.24676923,13.5384615 3.38461538,13.4006154 3.38461538,13.2307692 C3.38461538,12.7206154 3.79876923,12.3058462 4.30769231,12.3058462 C4.81661538,12.3058462 5.23076923,12.7206154 5.23076923,13.2307692 C5.23076923,13.4006154 5.36861538,13.5384615 5.53846154,13.5384615 L7.38461538,13.5384615 C7.52430769,13.5384615 7.65907692,13.5101538 7.78707692,13.4646154 C7.56738462,13.2683077 7.352,13.048 7.152,12.7704615"
                          id="Fill-1450"
                        ></path>
                        <path
                          :style="{'fill':bookable.color}"
                          d="M15.9536615,11.8383385 C15.9487385,11.8303385 15.4373538,10.9934154 15.0724308,9.83095385 C14.9881231,9.55956923 14.8816615,9.17741538 14.7604308,8.73987692 C14.1825846,6.66295385 13.6588923,4.89741538 13.0865846,4.32141538 C12.9450462,4.17987692 12.5161231,3.74787692 9.58812308,3.26295385 C9.50135385,3.2488 9.40843077,3.27341538 9.33950769,3.33187692 C9.27058462,3.39033846 9.23058462,3.47587692 9.23058462,3.56633846 L9.23058462,6.03956923 C9.23058462,6.16449231 9.30627692,6.27710769 9.42258462,6.32449231 L10.3192,6.68941538 C10.3782769,6.90172308 10.4908923,7.28572308 10.6016615,7.56572308 C10.5487385,7.65310769 10.5050462,7.75341538 10.4570462,7.86233846 C10.3764308,8.04695385 10.2878154,8.25064615 10.1518154,8.40018462 C9.55489231,8.01741538 8.95181538,6.91895385 8.56781538,5.96264615 C8.26504615,5.20756923 6.93273846,3.69926154 5.97889231,3.69926154 C5.74996923,3.69926154 5.54750769,3.78110769 5.3912,3.93495385 C4.49643077,4.81926154 5.01766154,6.35649231 5.73581538,7.40449231 C6.3272,8.26849231 6.7672,9.29187692 6.82996923,9.95218462 C6.83981538,10.0611077 6.84473846,10.1644923 6.84966154,10.2666462 C6.87489231,10.8100308 6.90073846,11.3724923 7.65089231,12.4112615 C8.04289231,12.9534154 8.50135385,13.2721846 8.98627692,13.6100308 C9.67858462,14.0912615 10.3942769,14.5897231 11.1179692,15.8457231 C11.1727385,15.9411077 11.2742769,16.0001846 11.3844308,16.0001846 C15.0004308,16.0001846 15.9819692,12.1115692 15.9912,12.0721846 C16.0108923,11.9921846 15.9967385,11.9084923 15.9536615,11.8383385"
                          id="Fill-1452"
                        ></path>
                      </g>
                    </g>
                  </svg>
                  <span :style="{'color': bookable.color}">{{ $root.labels.add_coupon }}</span>
                </el-col>

<el-col :sm="14" :xs="14">
                  <el-form
                    :model="appointment.bookings[0].customer"
                    ref="coupon"
                    :rules="rules"
                    label-position="top"
                    @keyup.enter.native="onSubmitCoupon"
                    status-icon
                  >
                    <el-form-item
                      :style="bookableType === 'event' && !useGlobalCustomization ? getBookableColor(false) : {}"
                      :class="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `am-input-${formType}-${formName}-${bookableType}`: ''"
                      :error="errors.coupon"
                      prop="couponCode"
                    >
                      <el-input
                        v-model="coupon.code"
                        @input="validateFieldsForPayPal()"
                        type="text"
                        size="small"
                        class="am-add-coupon-field"
                        :style="bookableType === 'event' && !useGlobalCustomization ? getBookableColor(false) : {}"
                        native-type="submit"
                        @keydown.enter.native="onSubmitCoupon"
                      >
                        
                        <el-button
                          class="am-add-coupon-button"
                          slot="append"
                          size="mini"
                          icon="el-icon-check"
                          @click="checkCoupon"
                          :disabled="coupon.code ? coupon.code.trim() === '' : true"
                          :style="bookableType === 'event' && !useGlobalCustomization ? getBookableColor(true) : {}"
                          native-type="submit"
                        >
                        </el-button>

</el-input>
                    </el-form-item>
                  </el-form>
                </el-col>

</el-row>

<el-row class="am-coupon-limit" v-show="$root.settings.payments.coupons && recurringData.length && couponLimit < recurringData.length + 1 && (coupon.discount || coupon.deduction)">
                <el-col :sm="2" :xs="4">
                  <div style="display: inline-block;">
                    <img :src="$root.getUrl+'public/img/coupon-limit.svg'" class="svg-amelia" alt="coupon-limit">
                  </div>
                </el-col>

<el-col :sm="22" :xs="20">
                  <div class="am-coupon-limit-text">
                    <strong>{{ $root.labels.coupons_used }}</strong>
                    <p>{{ $root.labels.coupons_used_description }} {{ couponLimit }}</p>
                  </div>
                </el-col>
              </el-row>

<div
                v-if="amountData.instant.total > 0"
                class="am-confirmation-total"
              >
              
                
                <el-row :gutter="24" v-if="amountData.instant.discount > 0 || amountData.instant.tax > 0">
                  <el-col :span="12">
                    <p>
                      {{ priceLabels.subtotal_colon.value || $root.labels.subtotal_colon }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(amountData.instant.total, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

<el-row :gutter="24" v-if="amountData.instant.discount > 0">
                  <el-col :span="12">
                    <p>{{ priceLabels.discount_amount_colon.value || $root.labels.discount_amount_colon }}</p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(amountData.instant.discount, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

<el-row :gutter="24" v-if="amountData.instant.tax > 0">
                  <el-col :span="12">
                    <p>
                      {{ getTaxLabel() }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(amountData.instant.tax, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

<el-row :gutter="24" :class="{'am-confirmation-total-bordered': !onlyTotal}">
                  <el-col :span="12">
                    <p>
                      {{ priceLabels.total_cost_colon.value || $root.labels.total_cost_colon }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(getTotalPrice(), !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

<el-row
                  class="am-confirmation-deposit" :gutter="24" v-if="withDeposit"
                  :style="{'color': bookable.color}"
                >
                  <el-col :span="12">
                    <p>{{ priceLabels.deposit.value || $root.labels.deposit }} <label class="am-confirmation-deposit-info">{{ priceLabels.pay_now.value || $root.labels.pay_now }}</label></p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(amountData.instant.deposit, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

<el-row
                  class="am-confirmation-deposit-price"
                  :gutter="24" v-if="withDeposit"
                  :style="{'color': bookable.color}"
                >
                  <el-col :span="12">
                    <p>{{ priceLabels.pay_later.value || $root.labels.pay_later }}</p>
                  </el-col>
                  <el-col :span="12">
                    <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                      {{ getFormattedPrice(getTotalPrice() - amountData.instant.deposit, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                    </p>
                  </el-col>
                </el-row>

</div>

<el-row
                class="am-confirmation-extras-cost" :gutter="24"
                v-if="recurringData.length && amountData.postponed.total > 0"
              >
                <el-collapse
                  accordion
                  :class="($root.settings.customization.hasOwnProperty('forms') && $root.settings.customization.forms.hasOwnProperty(formType)) ? `am-block-${formType}-${formName}-${bookableType}`: ''"
                >
                  <el-collapse-item name="1">
                    <template slot="title">
                      <div class="am-extras-title">{{ priceLabels.recurring_costs_colon.value || $root.labels.recurring_costs_colon }}</div>
                      <div class="am-extras-total-cost am-semi-strong">
                        {{ getFormattedPrice(amountData.postponed.total - amountData.postponed.discount + amountData.postponed.tax, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                      </div>
                    </template>
                    <div v-for="(item, key) in amountData.postponed.totals" :key="key">
                      <div class="am-extras-details" :style="{'visibility': key === 0 ? 'visible' : 'hidden'}">
                        {{ priceLabels.base_price_colon.value || $root.labels.base_price_colon }}
                      </div>
                      <div class="am-extras-cost">
                        {{ item.count + ' ' + (item.count ? $root.labels.appointments.toLowerCase() : $root.labels.appointment.toLowerCase()) + ' x ' + getFormattedPrice(item.total, !$root.settings.payments.hideCurrencySymbolFrontend) + ' = ' + getFormattedPrice(item.count * item.total, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                      </div>
                    </div>
                    <div v-if="amountData.postponed.discount">
                      <div class="am-extras-details"> {{ priceLabels.discount_amount_colon.value || $root.labels.discount_amount_colon }}</div>
                      <div class="am-extras-cost">
                        {{ getFormattedPrice(amountData.postponed.discount, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                      </div>
                    </div>
                    <div v-if="amountData.postponed.tax">
                      <div class="am-extras-details">
                        {{ getTaxLabel() }}
                      </div>
                      <div class="am-extras-cost">{{ getFormattedPrice(amountData.postponed.tax, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-row>

</div>
            <div
              class="am-confirmation-total am-confirmation-booking-cost"
              v-else-if="bookable.price > 0"
            >
              
              <el-row :gutter="24" v-if="amountData.instant.tax > 0">
                <el-col :span="12">
                  <p>
                    {{ priceLabels.subtotal_colon.value || $root.labels.subtotal_colon }}
                  </p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                    {{ getFormattedPrice(amountData.instant.total, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                  </p>
                </el-col>
              </el-row>

<el-row :gutter="24" v-if="amountData.instant.tax > 0">
                <el-col :span="12">
                  <p>
                    {{ getTaxLabel() }}
                  </p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right">
                    {{ getFormattedPrice(amountData.instant.tax, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                  </p>
                </el-col>
              </el-row>

<el-row :gutter="24" v-if="bookable.price > 0" :class="{'am-confirmation-total-bordered': !onlyTotal}">
                <el-col :span="12">
                  <p>
                    {{ priceLabels.total_cost_colon.value || $root.labels.total_cost_colon }}
                  </p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                    {{ getFormattedPrice(amountData.instant.total + amountData.instant.tax, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                  </p>
                </el-col>
              </el-row>

<el-row class="am-confirmation-deposit" :gutter="24" v-if="withDeposit">
                <el-col :span="12">
                  <p>{{ priceLabels.deposit.value || $root.labels.deposit }} <label class="am-confirmation-deposit-info">{{ priceLabels.pay_now.value || $root.labels.pay_now }}</label></p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                    {{ getFormattedPrice(amountData.instant.deposit, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                  </p>
                </el-col>
              </el-row>

<el-row
                class="am-confirmation-deposit-price"
                :gutter="24"
                v-if="withDeposit">
                <el-col :span="12">
                  <p>{{ priceLabels.pay_later.value || $root.labels.pay_later }}</p>
                </el-col>
                <el-col :span="12">
                  <p class="am-semi-strong am-align-right" :style="{'color': bookable.color}">
                    {{ getFormattedPrice(getTotalPrice() - amountData.instant.deposit, !$root.settings.payments.hideCurrencySymbolFrontend) }}
                  </p>
                </el-col>
              </el-row>
              
            </div>

</el-col>
        </el-row>

</el-form>

<div class="dialog-footer payment-dialog-footer" slot="footer">
        <div
          v-if="hasCancel"
          class="el-button el-button--default"
          :style="bookableType === 'event' ? bookableCancelStyle : ''"
          @mouseleave="setBookableCancelStyle(false)"
          @mouseover="setBookableCancelStyle(true)"
          @click="cancelBooking()"
        >
          <span :style="bookableType === 'event' ? bookableCancelSpanStyle : ''">{{ $root.labels.cancel }}</span>
        </div>

<div
          v-show="$root.settings.payments.payPal.enabled && appointment.payment.gateway === 'payPal' && getTotalPrice() !== 0"
          class="paypal-button el-button el-button--primary"
          :style="bookableType === 'event' ? bookableConfirmStyle : ''"
          @mouseleave="setBookableConfirmStyle(false)"
          @mouseover="setBookableConfirmStyle(true)"
        >
          <div id="am-paypal-button-container"></div>
          <span>{{ $root.labels.confirm }}</span>
        </div>

<div
          v-show="showConfirmBookingButton"
          class="el-button el-button--primary"
          :style="bookableType === 'event' ? bookableConfirmStyle : ''"
          @mouseleave="setBookableConfirmStyle(false)"
          @mouseover="setBookableConfirmStyle(true)"
          @click="confirmBooking()"
        >
          <span>{{ $root.labels.confirm }}</span>
        </div>
      </div>

</div>

<div id="am-spinner" class="am-booking-fetched" v-show="!fetched && !paid">
      <h4
        v-if="appointment.payment.gateway === 'payPal'"
        :style="{color: (bookableType === 'event' && formType === 'eventListForm') ? formsData.globalSettings.formTextColor : formsData[$options.name][bookableType].globalSettings.formTextColor}"
      >
        {{ $root.labels.waiting_for_payment }}
      </h4>
      <h4
        v-else
        :style="{color: (bookableType === 'event' && formType === 'eventListForm') ? formsData.globalSettings.formTextColor : formsData[$options.name][bookableType].globalSettings.formTextColor}"
      >
        {{ $root.labels.please_wait }}
      </h4>
      <div class="am-svg-wrapper">

<span v-if="bookableType === 'event' && !useGlobalCustomization">
          <svg width="160" height="160" class="am-spin" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#7F8FA4">
            <g fill="none" fill-rule="evenodd">
              <g transform="translate(1 1)" stroke-width="2">
                <path d="M36 18c0-9.94-8.06-18-18-18" :style="{'stroke':bookable.color}" :stroke="bookable.color">
                  <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 18 18"
                    to="360 18 18"
                    dur="1s"
                    repeatCount="indefinite"
                  />
                </path>
              </g>
            </g>
          </svg>

<svg width="12px" height="16px" class="am-hourglass" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-2.000000, 0.000000)">
              <g id="sat" transform="translate(2.000000, 0.000000)" :style="{'fill': bookable.color}">
                <path
                  :style="{'fill': bookable.color, 'stroke': 'none'}"
                  d="M8.37968,4.8 L3.32848,4.8 C3.22074667,4.8 3.12368,4.86506667 3.08208,4.9648 C3.04101333,5.06453333 3.06394667,5.1792 3.14021333,5.25546667 L5.67834667,7.79093333 C5.72794667,7.84106667 5.79621333,7.86933333 5.86661333,7.86933333 C5.95941333,7.8672 6.00634667,7.84106667 6.05594667,7.7904 L8.56901333,5.2544 C8.64474667,5.1776 8.66714667,5.06346667 8.62554667,4.96426667 C8.58448,4.86453333 8.48741333,4.8 8.37968,4.8"
                  id="Fill-694"
                ></path>
                <path
                  :style="{'fill': bookable.color, 'stroke': 'none'}"
                  d="M6.82293333,7.62293333 C6.6144,7.83146667 6.6144,8.16853333 6.82293333,8.37706667 L9.04,10.5941333 C9.74506667,11.2992 10.1333333,12.2368 10.1333333,13.2341333 L10.1333333,14.4 L9.2,14.4 L6.08,10.24 C5.9792,10.1056 5.75413333,10.1056 5.65333333,10.24 L2.53333333,14.4 L1.6,14.4 L1.6,13.2341333 C1.6,12.2368 1.98826667,11.2992 2.69333333,10.5941333 L4.9104,8.37706667 C5.11893333,8.16853333 5.11893333,7.83146667 4.9104,7.62293333 L2.69333333,5.40586667 C1.98826667,4.7008 1.6,3.7632 1.6,2.7664 L1.6,1.6 L10.1333333,1.6 L10.1333333,2.7664 C10.1333333,3.7632 9.74506667,4.7008 9.04,5.40586667 L6.82293333,7.62293333 Z M11.2,2.7664 L11.2,1.45173333 C11.5173333,1.26666667 11.7333333,0.9264 11.7333333,0.533333333 L11.7333333,0.266666667 C11.7333333,0.119466667 11.6138667,0 11.4666667,0 L0.266666667,0 C0.119466667,0 0,0.119466667 0,0.266666667 L0,0.533333333 C0,0.9264 0.216,1.26666667 0.533333333,1.45173333 L0.533333333,2.7664 C0.533333333,4.048 1.03253333,5.25386667 1.9392,6.16 L3.7792,8 L1.9392,9.84 C1.03253333,10.7461333 0.533333333,11.952 0.533333333,13.2341333 L0.533333333,14.5482667 C0.216,14.7333333 0,15.0736 0,15.4666667 L0,15.7333333 C0,15.8805333 0.119466667,16 0.266666667,16 L11.4666667,16 C11.6138667,16 11.7333333,15.8805333 11.7333333,15.7333333 L11.7333333,15.4666667 C11.7333333,15.0736 11.5173333,14.7333333 11.2,14.5482667 L11.2,13.2341333 C11.2,11.952 10.7008,10.7461333 9.79413333,9.84 L7.95413333,8 L9.79413333,6.16 C10.7008,5.25386667 11.2,4.048 11.2,2.7664 L11.2,2.7664 Z"
                    id="Fill-696"
                ></path>
              </g>
            </g>
          </svg>
        </span>

</div>
</template>

export default {
  name: 'confirmBookingForm',

mixins: [
    taxesMixin,
    imageMixin,
    dateMixin,
    priceMixin,
    helperMixin,
    customFieldMixin,
    windowMixin,
    formsCustomizationMixin
  ],

props: {
    trigger: null,
    passedCategoryId: null,
    couponCode: '',
    paymentGateway: '',
    queryParams: {},
    status: null,
    phonePopulated: null,
    containerId: null,
    recurringString: '',
    useGlobalCustomization: false,
    bookableType: null,
    taxes: {
      default: () => [],
      type: Array
    },
    bookable: {
      default: () => {},
      type: Object
    },
    recurringData: {
      default: () => []
    },
    packageData: null,
    hasCancel: true,
    hasHeader: true,
    appointment: {
      default: () => {},
      type: Object
    },
    marketing: null,
    provider: {
      default: () => {},
      type: Object
    },
    location: {
      default: () => {},
      type: Object
    },
    service: {
      type: Object,
      default: () => {}
    },
    dialogClass: {
      default: '',
      type: String
    },
    customFields: {
      default: () => []
    },
    formType: {
      type: String
    },
    formsData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },

data () {
    let validateCoupon = (rule, bookings, callback) => {
      let field = document.getElementsByClassName('am-add-coupon-field')[0].getElementsByClassName('el-input__suffix')[0]

if (this.coupon.code) {
        this.coupon.code = this.coupon.code.trim()
        this.$http.post(`${this.$root.getAjaxUrl}/coupons/validate`, {
          'code': this.coupon.code,
          'id': this.bookable.id,
          'type': this.bookableType,
          'user': this.appointment.bookings[0]['customer']
        }).then(response => {
          // Customization hook
          if ('afterSuccessCouponValidated' in window) {
            window.afterSuccessCouponValidated(this.appointment, this.bookable, this.provider, this.location)
          }
          this.coupon = response.data.data.coupon
          this.couponLimit = response.data.data.limit
          if (typeof field !== 'undefined') {
            field.style.visibility = 'visible'
          }
          callback()
        }).catch(e => {
          this.coupon.discount = 0
          this.coupon.deduction = 0

if (e.response.data.data.couponUnknown === true) {
            callback(new Error(this.$root.labels.coupon_unknown))
          } else if (e.response.data.data.couponInvalid === true) {
            callback(new Error(this.$root.labels.coupon_invalid))
          } else if (e.response.data.data.couponExpired === true) {
            callback(new Error(this.$root.labels.coupon_expired))
          } else {
            callback()
          }

if (typeof field !== 'undefined') {
            field.style.visibility = 'hidden'
          }
        })
      } else {
        if (typeof field !== 'undefined') {
          field.style.visibility = 'hidden'
        }
        callback()
      }
    }

let validatePhone = (rule, input, callback) => {
      if (input && input !== '' && !input.startsWith('+')) {
        callback(new Error(this.$root.labels.enter_valid_phone_warning))
      } else {
        callback()
      }
    }

return {
      paymentType: 'depositOnly',
      validRecaptcha: false,
      recaptchaResponse: false,
      customFieldsFiles: [],
      stripePayment: {
        stripe: null,
        cardElement: null
      },
      hoverConfirm: false,
      hoverCancel: false,
      columnsLg: 12,
      couponLimit: 0,
      coupon: {
        code: '',
        discount: 0,
        deduction: 0
      },
      clearValidate: true,
      errors: {
        email: '',
        phone: '',
        coupon: '',
        stripe: '',
        recaptcha: '',
        files: {}
      },
      fetched: true,
      paid: false,
      headerErrorMessage: '',
      headerErrorShow: false,
      payPalActions: null,
      rules: {
        'customer.firstName': [
          {required: true, message: this.$root.labels.enter_first_name_warning, trigger: 'submit'}
        ],
        'customer.lastName': [
          {
            required: this.formsData[this.$options.name][this.bookableType].itemsDraggable.lastNameFormField.required,
            message: this.$root.labels.enter_last_name_warning,
            trigger: 'submit'
          }
        ],
        'customer.email': [
          {
            required: this.formsData[this.$options.name][this.bookableType].itemsDraggable.emailFormField.required,
            message: this.$root.labels.enter_email_warning,
            trigger: 'submit'
          },
          {type: 'email', message: this.$root.labels.enter_valid_email_warning, trigger: 'submit'}
        ],
        'customer.phone': [
          {
            required: this.formsData[this.$options.name][this.bookableType].itemsDraggable.phoneFormField.required,
            message: this.$root.labels.enter_phone_warning,
            trigger: 'submit'
          },
          {validator: validatePhone, trigger: 'submit'}
        ],
        couponCode: [
          {validator: validateCoupon, trigger: 'submit'}
        ]
      },
      formValidOptions: {},
      formName: this.$options.name,
      serviceHeadingVisibility: this.formsData[this.$options.name][this.bookableType].itemsStatic.confirmServiceHeadingFormField ? this.formsData[this.$options.name][this.bookableType].itemsStatic.confirmServiceHeadingFormField.visibility : true,
      recurringStringVisibility: this.formsData[this.$options.name][this.bookableType].itemsStatic.recurringStringFormField ? this.formsData[this.$options.name][this.bookableType].itemsStatic.recurringStringFormField.visibility : true
    }
  },

created () {
    this.inlineSVG()
    window.addEventListener('resize', this.handleResize)
  },

mounted () {
    if (this.appointment.bookings[0].customFields) {
      for (const [key, cf] of Object.entries(this.appointment.bookings[0].customFields)) {
        if (cf.type === 'address') {
          if (this.$refs['amelia-cf-address-' + key] !== undefined && this.$refs['amelia-cf-address-' + key].length > 0) {
            this.$refs['amelia-cf-address-' + key][0].update(cf.value)
          }
        }
      }
    }

this.paymentType = this.bookable.depositData !== null ? 'depositOnly' : 'fullAmount'

if (marketingMixin.hasAmeliaTracking(this)) {
      marketingMixin.trackAmeliaData(this, this.$root.marketing, this.bookableType, 'InitiateCheckout')
    }

if (this.status === 'failed') {
      this.headerErrorMessage = this.$root.labels.payment_error

this.headerErrorShow = true
    }

this.coupon.code = this.couponCode

if (this.bookableType === 'event' && !this.useGlobalCustomization) {
      // this.changeElementsColor('.el-upload-dragger', false, true, false)
      // this.changeElementsColor('.el-upload-dragger span', true, true, false)
      // this.changeElementsColor('.el-icon-upload', true, true, false)
      // this.changeElementsColor('.el-input-group__append', false, false, true)
      // this.changeElementsColor('.am-add-coupon-button', false, true, false)
      // this.changeSelectedColor('.el-radio', 'is-checked', '.el-radio__label', true, false)
      // this.changeSelectedColor('.el-radio', 'is-checked', '.el-radio__inner', false, true)
      // this.changeSelectedColor('.el-checkbox', 'is-checked', '.el-checkbox__label', true, false)
      // this.changeSelectedColor('.el-checkbox', 'is-checked', '.el-checkbox__inner', false, true)
    }

this.setBookableConfirmStyle(false)
    this.setBookableCancelStyle(false)

this.inlineSVG()

// Get Default Payment Option
    let paymentOption = this.paymentOptions.find(option => option.value === this.$root.settings.payments.defaultPaymentMethod)

if (!this.appointment.payment.gateway) {
      this.appointment.payment.gateway = paymentOption
        ? paymentOption.value : this.paymentOptions.length
          ? this.paymentOptions[0].value : this.$root.settings.payments.defaultPaymentMethod
    }

if (this.bookableType === 'appointment') {
      this.saveStats()
    }

this.addCustomFieldsValidationRules()
    if (this.$root.settings.payments.payPal.enabled) {
      this.payPalInit()
    }

// myCred fix for total amount for recurring
    this.appointment.payment.amount = this.getTotalPrice()

// Customization hook
    if ('beforeConfirmBookingLoaded' in window) {
      window.beforeConfirmBookingLoaded(this.appointment, this.bookable, this.provider, this.location)
    }

let $this = this

if (this.bookableType === 'event' && !('ameliaBooking' in window && 'disableScrollView' in window.ameliaBooking && window.ameliaBooking.disableScrollView === true)) {
      setTimeout(() => {
        $this.scrollView('am-confirm-booking', 'start')
      }, 1200)
    }
  },

updated () {
    if (this.clearValidate === true) {
      this.validateFieldsForPayPal()
      this.clearValidate = false
    }
    this.handleResize()
  },

methods: {
    setAddressCF (input, cfId) {
      this.appointment.bookings[0].customFields[cfId].value = input
      this.validateFieldsForPayPal()
    },

googleMapsLoaded () {
      return window.google && this.$root.settings.general.gMapApiKey
    },

paymentTypeChanged (paymentType) {
      this.paymentType = paymentType.value
    },

getComponentProps () {
      return {
        phonePopulated: this.phonePopulated ? 1 : 0,
        containerId: this.containerId,
        trigger: 'booking' in this.$root.shortcodeData && 'trigger' in this.$root.shortcodeData.booking ? this.$root.shortcodeData.booking.trigger : '',
        recurringString: this.recurringString,
        useGlobalCustomization: this.useGlobalCustomization ? 1 : 0,
        bookableType: this.bookableType,
        bookable: Object.assign(
          this.bookable,
          {aggregatedPrice: this.bookable.aggregatedPrice ? 1 : 0}
        ),
        recurringData: this.recurringData,
        packageData: this.packageData,
        hasCancel: this.hasCancel ? 1 : 0,
        hasHeader: this.hasHeader ? 1 : 0,
        appointment: Object.assign(
          this.appointment,
          {group: this.appointment.group ? 1 : 0}
        ),
        dialogClass: this.dialogClass,
        couponCode: this.coupon.code,
        passedCategoryId: this.passedCategoryId,
        queryParams: this.queryParams
      }
    },

onSubmitCoupon (ev) {
      ev.preventDefault()
      return false
    },

getPackagePrice (pack) {
      return pack.calculatedPrice ? pack.price : pack.price - pack.price / 100 * pack.discount
    },

isBookableCustomFieldVisible (customField) {
      switch (this.bookableType) {
        case ('appointment'):
          return this.isCustomFieldVisible(customField, 'appointment', this.bookable.id)
        case ('package'):
          let customFieldVisible = false

for (let i = 0; i < this.packageData.data.length; i++) {
            if (this.isCustomFieldVisible(customField, 'appointment', this.packageData.data[i].serviceId)) {
              customFieldVisible = true

break
            }
          }

return customFieldVisible
        case ('event'):
          return this.isCustomFieldVisible(customField, 'event', this.bookable.id)
      }
    },

getCustomFieldClass (customField) {
      let classData = {
        'is-required': customField.type === 'file' && customField.required,
        'text-content-custom-field': customField.type === 'content'
      }

classData['am-cf-' + customField.id] = true

return classData
    },

onRecaptchaExpired () {
      this.validRecaptcha = false
      this.errors.recaptcha = this.$root.labels.recaptcha_error
      this.validateFieldsForPayPal()
    },

onRecaptchaVerify (response) {
      this.validRecaptcha = true
      this.errors.recaptcha = ''
      this.recaptchaResponse = response

if (this.$root.settings.general.googleRecaptcha.invisible) {
        switch (this.appointment.payment.gateway) {
          case ('onSite'):
            this.saveBooking(this.getRequestData(false))

break
          case ('stripe'):
            this.stripeBooking()

break
        }

return false
      }

this.validateFieldsForPayPal()
    },

selectedCustomFieldValue () {
      if (this.bookableType === 'event' && !this.useGlobalCustomization) {
        // this.changeSelectedColor('.el-radio', 'is-checked', '.el-radio__label', true, false)
        // this.changeSelectedColor('.el-radio', 'is-checked', '.el-radio__inner', false, true)
        //
        // this.changeSelectedColor('.el-checkbox', 'is-checked', '.el-checkbox__label', true, false)
        // this.changeSelectedColor('.el-checkbox', 'is-checked', '.el-checkbox__inner', false, true)
      }

this.validateFieldsForPayPal()
    },

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

changeElementsColor (selector, isColor, isBorderColor, isBackgroundColor) {
      // let elements = document.querySelectorAll(selector)
      //
      // for (let i = 0; i < elements.length; i++) {
      //   if (isColor) {
      //     elements[i].style.color = this.bookable.color
      //   }
      //
      //   if (isBorderColor) {
      //     elements[i].style.borderColor = this.bookable.color
      //   }
      //
      //   if (isBackgroundColor) {
      //     elements[i].style.backgroundColor = this.bookable.color
      //   }
      // }
    },

changeSelectedColor (selector, filterClass, childSelector, isColor, isBackgroundColor) {
      // let elements = document.querySelectorAll(selector)
      //
      // for (let i = 0; i < elements.length; i++) {
      //   let color = elements[i].classList.contains(filterClass) ? this.bookable.color : 'inherit'
      //
      //   let elementChildren = elements[i].querySelectorAll(childSelector)
      //
      //   if (elementChildren.length) {
      //     if (isColor) {
      //       elementChildren[0].style.color = color
      //     }
      //
      //     if (isBackgroundColor) {
      //       elementChildren[0].style.backgroundColor = color
      //     }
      //   }
      // }
    },

setBookableConfirmStyle (isHover) {
      if (!this.useGlobalCustomization && this.bookableType === 'event') {
        this.hoverConfirm = isHover
      }
    },

setBookableCancelStyle (isHover) {
      if (!this.useGlobalCustomization && this.bookableType === 'event') {
        this.hoverCancel = isHover
      }
    },

saveStats () {
      this.$http.post(`${this.$root.getAjaxUrl}/stats`, {
        'locationId': this.location !== null ? this.location.id : null,
        'providerId': this.provider.id,
        'serviceId': this.bookable.id
      })
    },

handleServerResponse (response) {
      let $this = this

if (response.requiresAction) {
        $this.stripePayment.stripe.handleCardAction(
          response.paymentIntentClientSecret
        ).then(function (result) {
          if (result.error) {
            $this.headerErrorShow = true
            $this.headerErrorMessage = $this.$root.labels.payment_error
            $this.fetched = true
          } else {
            let requestData = $this.getRequestData(false, {
              'paymentIntentId': result.paymentIntent.id
            })

$this.saveBooking(requestData)
          }
        })
      } else {
        if (response) {
          $this.$emit('confirmedBooking', Object.assign(response, {
            color: $this.bookable.color,
            type: $this.bookableType,
            packageId: this.bookableType === 'package' ? this.bookable.id : null
          }, this.$root.settings.general.runInstantPostBookingActions, null))

this.paid = true
        } else {
          $this.fetched = true
        }
      }
    },

cancelBooking () {
      this.$emit('cancelBooking')
    },

onSelectFiles () {
      this.validateFieldsForPayPal()
    },

validateUploadedFiles () {
      let isValid = true

let bookings = this.appointment.bookings

let customFieldFilesIndexes = {}

let filesIndex = 0

for (let i = 0; i < this.customFields.length; i++) {
        if (this.customFields[i].type === 'file' && this.isBookableCustomFieldVisible(this.customFields[i])) {
          customFieldFilesIndexes[this.customFields[i].id] = filesIndex
          filesIndex++
        }
      }

for (let key in bookings[0].customFields) {
        if (!bookings[0].customFields.hasOwnProperty(key)) {
          continue
        }

let customField = this.customFields.find(field => parseInt(field.id) === parseInt(key))

if (this.isBookableCustomFieldVisible(customField) && customField.type === 'file' && customField.required) {
          let uploadedFilesIndex = key in customFieldFilesIndexes && customFieldFilesIndexes[key] in this.$refs.customFieldsFiles ? customFieldFilesIndexes[key] : null

if (uploadedFilesIndex !== null && this.$refs.customFieldsFiles[uploadedFilesIndex].uploadFiles.length === 0) {
            this.errors.files['files' + customField.id] = this.$root.labels.file_upload_error
            isValid = false
          }
        }
      }

return isValid
    },

isDefaultOnSitePayment () {
      return this.getTotalPrice() === 0 &&
        (
          this.appointment.payment.gateway === 'payPal' ||
          this.appointment.payment.gateway === 'stripe' ||
          this.appointment.payment.gateway === 'mollie' ||
          this.appointment.payment.gateway === 'square' ||
          this.appointment.payment.gateway === 'razorpay' ||
          (this.appointment.payment.gateway === 'wc' && 'ameliaBooking' in window && 'wc' in window.ameliaBooking && 'bookIfPriceIsZero' in window.ameliaBooking.wc && window.ameliaBooking.wc.bookIfPriceIsZero === true) ||
          (this.appointment.payment.gateway === 'wc' && this.$root.settings.payments.wc.onSiteIfFree)
        )
    },

getPaymentGateway () {
      return this.isDefaultOnSitePayment() ? 'onSite' : this.appointment.payment.gateway
    },

confirmBooking () {
      if (!this.fetched) {
        return
      }

let $this = this

this.headerErrorShow = false
      this.errors.email = ''
      this.errors.phone = ''
      this.errors.coupon = ''
      this.validateFieldsForPayPal()

let paymentGateway = this.getPaymentGateway()

// Validate Form
      this.$refs.booking.validate((valid, validOptions) => {
        this.formValidOptions = {}
        if (this.validateUploadedFiles() && valid && this.errors.stripe === '' && this.errors.coupon === '' && (paymentGateway !== 'onSite' || this.isRequiredAndValidRecaptcha())) {
          // Customization hook
          if ('afterConfirmBooking' in window) {
            window.afterConfirmBooking(this.appointment, this.bookable, this.provider, this.location)
          }

this.fetched = false
          this.inlineSVG()

this.appointment.payment.gateway = paymentGateway

switch (this.appointment.payment.gateway) {
            case 'stripe':
              if (this.$root.settings.general.googleRecaptcha.enabled &&
                this.$root.settings.general.googleRecaptcha.invisible
              ) {
                this.$refs.recaptcha.execute()
              } else {
                this.stripeBooking()
              }
              break
            case 'onSite':
              if (this.$root.settings.general.googleRecaptcha.enabled &&
                  this.$root.settings.general.googleRecaptcha.invisible
              ) {
                this.$refs.recaptcha.execute()
              } else {
                this.saveBooking(this.getRequestData(false))
              }
              break
            case 'wc':
              this.addToWooCommerceCart()
              break
            case 'mollie':
              this.goToMolliePaymentPage()
              break
            case 'square':
              this.goToSquarePaymentPage()
              break
            case 'razorpay':
              this.razorPayCreateOrder()

break
          }
          this.scrollView('am-spinner', 'start')
        } else {
          this.fetched = true

if (!valid && (validOptions.hasOwnProperty('customer.firstName') || validOptions.hasOwnProperty('customer.lastName') || validOptions.hasOwnProperty('customer.email') || validOptions.hasOwnProperty('customer.phone'))) {
            this.formValidOptions = JSON.parse(JSON.stringify(validOptions))
            return false
          }

let initialErrorArray = []
          let fileErrorArray = []
          this.customFields.forEach((item) => {
            if (item.type === 'file' && item.required === true && this.isBookableCustomFieldVisible(item) && this.$refs['customFields.' + item.id + '.value'][0].$el.getElementsByTagName('input')[0].files.length === 0) {
              let fileErrorItem = {}
              fileErrorItem.position = item.position - 1
              fileErrorItem.name = 'customFields.' + item.id + '.value'
              fileErrorArray.push(fileErrorItem)
            }
            initialErrorArray.push('customFields.' + item.id + '.value')
          })

let initialErrorExtendedArray = []
          Object.keys(validOptions).forEach(item => {
            let index = initialErrorArray.indexOf(item)
            let errorItem = {}
            errorItem.position = index
            errorItem.name = item

initialErrorExtendedArray.push(errorItem)
          })

let errorArray = initialErrorExtendedArray.concat(fileErrorArray).sort((a, b) => {
            const positionA = a.position
            const positionB = b.position

let comparison = 0
            if (positionA > positionB) {
              comparison = 1
            } else if (positionA < positionB) {
              comparison = -1
            }

return comparison
          })

if (errorArray.length !== 0) {
            this.$refs[errorArray[0].name][0].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
          }

return false
        }
      })
    },

buildFormData (formData, data, parentKey) {
      let $this = this

if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
        Object.keys(data).forEach(key => {
          $this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key)
        })
      } else {
        formData.append(parentKey, data !== null ? data : '')
      }
    },

book (requestData) {
      this.$http.post(`${this.$root.getAjaxUrl}/bookings`, requestData.data, requestData.options).then(response => {
        if (response.data.data) {
          this.$emit('confirmedBooking', Object.assign(response.data.data, {
            color: this.bookable.color,
            type: this.bookableType,
            packageId: this.bookableType === 'package' ? this.bookable.id : null
          }, this.$root.settings.general.runInstantPostBookingActions, null))

this.paid = true
        } else {
          this.fetched = true
        }
      }).catch(e => {
        if (this.getPaymentGateway() === 'onSite' && this.$root.settings.general.googleRecaptcha.enabled && this.$root.settings.general.googleRecaptcha.invisible) {
          this.$refs.recaptcha.reset()
        }
        this.handleSaveBookingErrors(e.response.data)
      })
    },

saveBooking (requestData) {
      if ('ameliaActions' in window && 'beforeBooking' in window.ameliaActions) {
        window.ameliaActions.beforeBooking(
          () => {
            this.book(requestData)
          },
          (message) => {
            this.headerErrorMessage = message
            this.headerErrorShow = true
            this.fetched = true
          },
          this.getRequestData(true).data
        )
      } else {
        this.book(requestData)
      }
    },

addToWooCommerceCart () {
      let requestData = this.getRequestData(false)

this.$http.post(`${this.$root.getAjaxUrl}/payment/wc`, requestData.data, requestData.options).then(response => {
        window.location = response.data.data.cartUrl
      }).catch(e => {
        this.handleSaveBookingErrors(e.response.data)
      })
    },

stripeBooking () {
      this.stripePayment.stripe.createPaymentMethod('card', this.stripePayment.cardElement, {}).then((result) => {
        if (result.error) {
          this.headerErrorShow = true
          this.headerErrorMessage = this.$root.labels.payment_error
          this.fetched = true
        } else {
          let requestData = this.getRequestData(false, {
            'paymentMethodId': result.paymentMethod.id
          })

this.$http.post(`${this.$root.getAjaxUrl}/bookings`, requestData.data, requestData.options
          ).then(response => {
            if (response.data.data) {
              this.handleServerResponse(response.data.data)
            }
          }).catch(e => {
            this.handleSaveBookingErrors(e.response.data)
          })
        }
      })
    },

goToMolliePaymentPage () {
      let requestData = this.getRequestData(false)

this.$http.post(`${this.$root.getAjaxUrl}/payment/mollie`, requestData.data, requestData.options).then(response => {
        window.location = response.data.data.redirectUrl
      }).catch(e => {
        this.handleSaveBookingErrors(e.response.data)
      })
    },

goToSquarePaymentPage () {
      let requestData = this.getRequestData(false)

this.$http.post(`${this.$root.getAjaxUrl}/payment/square`, requestData.data, requestData.options).then(response => {
        window.location = response.data.data.redirectUrl
      }).catch(e => {
        this.handleSaveBookingErrors(e.response.data)
      })
    },

getAppointmentDate () {
      return this.getFrontedFormattedDate(
        moment(this.bookable.bookingStart, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      )
    },

getAppointmentTime () {
      return this.getFrontedFormattedTime(this.bookable.bookingStart.split(' ')[1])
    },

getExtrasPrice (bookingsCount) {
      let totalPrice = 0

for (let i = 0; i < this.selectedExtras.length; i++) {
        totalPrice += bookingsCount * this.selectedExtras[i].price * this.selectedExtras[i].quantity * this.getExtraPriceMultipleValue(this.selectedExtras[i])
      }

return totalPrice
    },

getTotalPrice () {
      let totalPrice = this.amountData.instant.total - this.amountData.instant.discount + this.amountData.instant.tax

return totalPrice > 0 ? totalPrice : 0
    },

getSelectedExtraDetails (extra) {
      let result = ''

if (extra.price) {
        if (this.instantPaymentBookingsCount > 1 || (this.recurringData !== null && this.recurringData.length)) {
          result += this.instantPaymentBookingsCount + ' ' + (this.instantPaymentBookingsCount > 1 ? this.$root.labels.appointments.toLowerCase() : this.$root.labels.appointment.toLowerCase()) + ' x '
        }

if (this.getExtraPriceMultipleValue(extra) > 1) {
          result += this.getExtraPriceMultipleValue(extra) + ' ' + this.$root.labels.persons + ' x '
        }

result += extra.quantity + ' ' + ' x '

result += this.getFormattedPrice(extra.price, !this.$root.settings.payments.hideCurrencySymbolFrontend) + ' = '
      }

result += this.getFormattedPrice(
        this.instantPaymentBookingsCount * extra.price * this.getExtraPriceMultipleValue(extra) * extra.quantity,
        !this.$root.settings.payments.hideCurrencySymbolFrontend
      )

return result
    },

getExtraPriceMultipleValue (extra) {
      let aggregatedPrice = extra.aggregatedPrice === null ? this.bookable.aggregatedPrice : extra.aggregatedPrice

return aggregatedPrice ? this.appointment.bookings[0].persons : 1
    },

getBasePrice (bookingsCount, bookingBasePrice) {
      return bookingsCount * this.basePriceMultipleValue * bookingBasePrice
    },

getBookingTicketsBasePriceCalculationString (ticketsData) {
      let ticketsArray = ticketsData.bookingToEventTickets
      let result = ''

ticketsArray.forEach(ticket => {
        if (ticket.persons !== 0) {
          result += result !== '' ? ' + ' : ''

result += ticket.name + '(' + this.getFormattedPrice(ticket.price, !this.$root.settings.payments.hideCurrencySymbolFrontend) + ')' +
              (this.bookable.aggregatedPrice ? (' x ' + ticket.persons) : '')
        }
      })
      result += ' = ' + this.getFormattedPrice(ticketsData.totalPrice, !this.$root.settings.payments.hideCurrencySymbolFrontend)
      return result
    },

getBookingBasePriceCalculationString (bookingsCount, bookingBasePrice) {
      let result = ''

if (bookingsCount > 1 || (this.recurringData !== null && this.recurringData.length)) {
        result += bookingsCount + ' ' + (bookingsCount > 1 ? this.$root.labels.appointments.toLowerCase() : this.$root.labels.appointment.toLowerCase()) + ' x '
      }

if (this.basePriceMultipleValue > 1) {
        result += this.basePriceMultipleValue + ' ' + this.$root.labels.persons + ' x '
      }

let totalPriceFormatted = this.getFormattedPrice(
        this.getBasePrice(bookingsCount, bookingBasePrice),
        !this.$root.settings.payments.hideCurrencySymbolFrontend
      )

if (result) {
        let bookingBasePriceFormatted = this.getFormattedPrice(
          bookingBasePrice,
          !this.$root.settings.payments.hideCurrencySymbolFrontend
        )

result += bookingBasePriceFormatted + ' = ' + totalPriceFormatted
      }

return result !== '' ? result : totalPriceFormatted
    },

getBookingBasePriceData (type) {
      let result = []

let paymentData = this.paymentPeriodData[type]

for (let entityId in paymentData) {
        if (paymentData[entityId].price) {
          result.push({
            count: paymentData[entityId].count,
            price: paymentData[entityId].price
          })
        }
      }

return result
    },

checkCoupon (ev) {
      ev.preventDefault()

this.$refs.coupon.clearValidate()
      this.$refs.coupon.validate()
    },

getExtras () {
      let extras = JSON.parse(JSON.stringify(this.selectedExtras))

extras.forEach(function (extItem) {
        extItem.extraId = extItem.id
        extItem.id = null
      })

return extras
    },

trimValue (value) {
      return typeof value === 'string' ? value.replace(/^\s+|\s+$/g, '') : value
    },

getRequestData (mandatoryJson, paymentData) {
      let componentProps = JSON.parse(JSON.stringify(this.getComponentProps()))

let customFieldFilesIndexes = {}

let filesIndex = 0

for (let i = 0; i < this.customFields.length; i++) {
        if (this.customFields[i].type === 'file') {
          let customField = this.customFields.find(field => parseInt(field.id) === parseInt(this.customFields[i].id))

if (this.isBookableCustomFieldVisible(customField)) {
            customFieldFilesIndexes[this.customFields[i].id] = filesIndex
            filesIndex++
          }
        }
      }

this.appointment.payment.amount = (this.paymentType !== 'fullAmount') ? this.amountData.instant.deposit.toFixed(2).toString() : this.getTotalPrice().toFixed(2).toString()

this.appointment.payment.currency = this.$root.settings.payments.currencyCode

let bookings = JSON.parse(JSON.stringify(this.appointment.bookings))

let tickets = null

if (this.bookable.ticketsData) {
        tickets = this.bookable.ticketsData.bookingToEventTickets
      }

bookings[0].extras = this.getExtras()

bookings[0].ticketsData = tickets

let customFields = {}

for (let key in bookings[0].customFields) {
        if (!bookings[0].customFields.hasOwnProperty(key)) {
          continue
        }

let customField = this.customFields.find(field => parseInt(field.id) === parseInt(key))

if (this.isBookableCustomFieldVisible(customField)) {
          let uploadedFilesIndex = key in customFieldFilesIndexes && customFieldFilesIndexes[key] in this.$refs.customFieldsFiles ? customFieldFilesIndexes[key] : null

if (uploadedFilesIndex !== null) {
            let uploadCustomField = {
              label: bookings[0].customFields[key].label,
              value: []
            }

for (let i = 0; i < this.$refs.customFieldsFiles[uploadedFilesIndex].uploadFiles.length; i++) {
              uploadCustomField.value.push({
                name: this.$refs.customFieldsFiles[uploadedFilesIndex].uploadFiles[i].name
              })
            }

customFields[key] = (uploadCustomField)
          } else {
            customFields[key] = (bookings[0].customFields[key])
          }

customFields[key].type = customField.type

if (customFields[key].type === 'datepicker') {
            customFields[key].value = customFields[key].value ? this.getStringFromDate(new Date(customFields[key].value)) : null
          }
        }
      }

bookings[0].customer.email = bookings[0].customer.email ? this.trimValue(bookings[0].customer.email) : bookings[0].customer.email
      bookings[0].customer.phone = bookings[0].customer.phone ? this.trimValue(bookings[0].customer.phone) : bookings[0].customer.phone

bookings[0].customFields = customFields

let bookingDateTime = this.bookable.bookingStart
      let recurringData = typeof this.recurringData !== 'undefined' && this.recurringData !== null ? JSON.parse(JSON.stringify(this.recurringData)) : []
      let packageData = typeof this.packageData !== 'undefined' && this.packageData !== null ? JSON.parse(JSON.stringify(this.packageData)) : {id: null, data: []}

bookings[0].utcOffset = null

bookings[0].deposit = this.paymentType === 'fullAmount' ? false : this.bookable.depositData !== null

componentProps.appointment.bookings[0].customFields = customFields

componentProps.appointment.payment = Object.assign(this.appointment.payment, {data: paymentData})

componentProps.appointment.payment.amount = this.appointment.payment.amount

if (this.$root.settings.general.showClientTimeZone) {
        bookingDateTime = moment(bookingDateTime, 'YYYY-MM-DD HH:mm').utc().format('YYYY-MM-DD HH:mm')

recurringData.forEach((item) => {
          item.bookingStart = moment(item.bookingStart, 'YYYY-MM-DD HH:mm').utc().format('YYYY-MM-DD HH:mm')
          item.utcOffset = this.getClientUtcOffset(item.bookingStart)
        })

packageData.data.forEach((item) => {
          item.bookingStart = moment(item.bookingStart, 'YYYY-MM-DD HH:mm').utc().format('YYYY-MM-DD HH:mm')
          item.utcOffset = this.getClientUtcOffset(item.bookingStart)
        })

bookings[0].utcOffset = this.getClientUtcOffset(bookingDateTime)
      }

packageData.data.forEach((item) => {
        item.notifyParticipants = this.appointment.notifyParticipants ? 1 : 0
      })

if (componentProps && 'bookable' in componentProps && 'name' in componentProps.bookable) {
        componentProps.bookable.name = componentProps.bookable.name.replace(/"/g, "'")
      }

let jsonData = {
        'type': this.bookableType,
        'bookings': bookings,
        'payment': Object.assign(this.appointment.payment, {data: paymentData}),
        'recaptcha': this.recaptchaResponse,
        'locale': window.localeLanguage[0],
        'timeZone': Intl.DateTimeFormat().resolvedOptions().timeZone,
        'urlParams': this.getUrlQueryParams(window.location.href),
        'couponCode': this.coupon && this.coupon.code ? this.coupon.code : '',
        'componentProps': componentProps,
        'returnUrl': this.removeURLParameter(location.href, 'ameliaCache')
      }

switch (this.bookableType) {
        case ('appointment'):
          bookings[0].duration = this.appointment.serviceDuration

jsonData = Object.assign(jsonData, {
            'bookingStart': bookingDateTime,
            'notifyParticipants': this.appointment.notifyParticipants ? 1 : 0,
            'locationId': this.location !== null ? this.location.id : null,
            'providerId': this.provider ? this.provider.id : null,
            'serviceId': this.bookable.id,
            'recurring': recurringData,
            'package': []
          })

break

case ('package'):
          jsonData = Object.assign(jsonData, {
            'package': packageData.data,
            'packageId': packageData.id,
            'packageRules': packageData.rules,
            'utcOffset': this.getClientUtcOffset(null),
            'deposit': this.paymentType === 'fullAmount' ? false : this.bookable.depositData !== null
          })

break

case ('event'):
          jsonData = Object.assign(jsonData, {
            'eventId': this.bookable.id
          })
      }

let bookingData = null
      let requestOptions = null

let hasUploadedFiles = false

if (this.$refs.customFieldsFiles) {
        for (let i = 0; i < this.$refs.customFieldsFiles.length; i++) {
          if (this.$refs.customFieldsFiles[i].uploadFiles.length > 0) {
            hasUploadedFiles = true
            break
          }
        }
      }

if (hasUploadedFiles && !mandatoryJson) {
        bookingData = new FormData()

this.buildFormData(bookingData, jsonData)

for (let key in customFieldFilesIndexes) {
          let index = customFieldFilesIndexes[key]

if (!customFieldFilesIndexes.hasOwnProperty(key) || !(index in this.$refs.customFieldsFiles)) {
            continue
          }

for (let i = 0; i < this.$refs.customFieldsFiles[index].uploadFiles.length; i++) {
            bookingData.append('files[' + key + '][' + i + ']', this.$refs.customFieldsFiles[index].uploadFiles[i].raw)
          }
        }

requestOptions = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      } else {
        bookingData = jsonData

requestOptions = {}
      }

return {
        data: bookingData,
        options: requestOptions
      }
    },

handleSaveBookingErrors (response) {
      if ('data' in response) {
        if ('onSitePayment' in response.data && response.data.onSitePayment) {
          this.appointment.payment.gateway = 'onSite'
          this.saveBooking(this.getRequestData(false))
        } else {
          if ('afterFailedBooking' in window) {
            window.afterFailedBooking(response.data)
          }
        }

if ('customerAlreadyBooked' in response.data && response.data.customerAlreadyBooked === true) {
          this.headerErrorShow = true
          switch (this.bookableType) {
            case 'appointment':
            case 'package':
              this.headerErrorMessage = this.$root.labels.customer_already_booked_app

break
            case 'event':
              this.headerErrorMessage = this.$root.labels.customer_already_booked_ev
              break
          }
        }
        if ('timeSlotUnavailable' in response.data && response.data.timeSlotUnavailable === true) {
          this.headerErrorShow = true

switch (this.bookableType) {
            case 'appointment':
            case 'package':
              this.headerErrorMessage = this.$root.labels.time_slot_unavailable
              break
            case 'event':
              this.headerErrorMessage = this.$root.labels.maximum_capacity_reached
              break
          }
        } else if ('bookingsLimitReached' in response.data && response.data.bookingsLimitReached === true) {
          this.headerErrorShow = true
          this.headerErrorMessage = this.$root.labels.bookings_limit_reached
        } else if ('emailError' in response.data && response.data.emailError === true) {
          this.errors.email = this.$root.labels.email_exist_error
        } else if ('phoneError' in response.data && response.data.phoneError === true) {
          this.errors.phone = this.$root.labels.phone_exist_error
        } else if ('couponUnknown' in response.data && response.data.couponUnknown === true) {
          this.errors.coupon = this.$root.labels.coupon_unknown
        } else if ('couponInvalid' in response.data && response.data.couponInvalid === true) {
          this.errors.coupon = this.$root.labels.coupon_invalid
        } else if ('couponExpired' in response.data && response.data.couponExpired === true) {
          this.errors.coupon = this.$root.labels.coupon_expired
        } else if ('couponMissing' in response.data && response.data.couponMissing === true) {
          this.errors.coupon = this.$root.labels.coupon_missing
        } else if ('paymentSuccessful' in response.data && response.data.paymentSuccessful === false) {
          this.headerErrorShow = true
          this.headerErrorMessage = this.$root.labels.payment_error
        } else if ('bookingAlreadyInWcCart' in response.data && response.data.bookingAlreadyInWcCart === true) {
          this.headerErrorShow = true
          this.headerErrorMessage = this.$root.labels.booking_already_in_wc_cart
        } else if ('wcError' in response.data && response.data.wcError === true) {
          this.headerErrorShow = true
          this.headerErrorMessage = this.$root.labels.wc_error
        } else if ('recaptchaError' in response.data && response.data.recaptchaError === true) {
          this.errors.recaptcha = this.$root.labels.recaptcha_invalid_error
        } else if ('message' in response.data) {
          this.headerErrorShow = true
          this.headerErrorMessage = response.data.message
        }
      }

this.fetched = true
    },

isRequiredAndValidRecaptcha () {
      this.errors.recaptcha = ''

if (this.$root.settings.general.googleRecaptcha.enabled &&
        !this.$root.settings.general.googleRecaptcha.invisible &&
        !this.validRecaptcha
      ) {
        this.errors.recaptcha = this.$root.labels.recaptcha_error
        return false
      }

return true
    },

validateFieldsForPayPal () {
      this.clearValidation()

if (/^\s/.test(this.appointment.bookings[0].customer.firstName)) {
        this.appointment.bookings[0].customer.firstName = this.appointment.bookings[0].customer.firstName.substring(1)
      }

if (/^\s/.test(this.appointment.bookings[0].customer.lastName)) {
        this.appointment.bookings[0].customer.lastName = this.appointment.bookings[0].customer.lastName.substring(1)
      }

this.appointment.bookings[0].customer.email = this.trimValue(this.appointment.bookings[0].customer.email)

if (this.payPalActions === null || this.appointment.payment.gateway !== 'payPal') {
        return
      }

let validCustomFields = true

for (let key in this.appointment.bookings[0].customFields) {
        if (!this.appointment.bookings[0].customFields.hasOwnProperty(key)) {
          continue
        }

let customField = this.customFields.find(field => parseInt(field.id) === parseInt(key))

if (this.isBookableCustomFieldVisible(customField) && customField.required && customField.type !== 'file' &&
          (
            (Array.isArray(this.appointment.bookings[0].customFields[key].value) && this.appointment.bookings[0].customFields[key].value.length === 0) ||
            (!Array.isArray(this.appointment.bookings[0].customFields[key].value) && (!this.appointment.bookings[0].customFields[key].value || this.trimValue(this.appointment.bookings[0].customFields[key].value) === ''))
          )
        ) {
          validCustomFields = false
        }
      }

if (this.appointment.bookings[0].customer.firstName === '' ||
        (this.formsData[this.$options.name][this.bookableType].itemsDraggable.lastNameFormField.required && this.appointment.bookings[0].customer.lastName === '') ||
        (this.formsData[this.$options.name][this.bookableType].itemsDraggable.emailFormField.required && this.appointment.bookings[0].customer.email === '') ||
        (this.formsData[this.$options.name][this.bookableType].itemsDraggable.phoneFormField.required && this.appointment.bookings[0].customer.phone === '') ||
        !validCustomFields ||
        !this.validateUploadedFiles()) {
        this.payPalActions.disable()
      } else {
        this.payPalActions.enable()
      }
    },

razorPayVerify (paymentId, signature, orderId) {
      this.$emit('changeConfirmBookingRazorpay', true)
      this.saveBooking(this.getRequestData(false, {'paymentId': paymentId, 'signature': signature, 'orderId': orderId}))
    },

razorPayCreateOrder () {
      let $this = this
      let requestData = this.getRequestData(true)
      this.$http.post(`${this.$root.getAjaxUrl}/payment/razorpay`, requestData.data, requestData.options).then(response => {
        let options = response.data.data.data
        options.handler = function (res) {
          $this.razorPayVerify(res.razorpay_payment_id, res.razorpay_signature, options.order_id)
        }

options.modal = {
          ondismiss: function () {
            $this.fetched = true
            $this.$emit('changeConfirmBookingRazorpay', true)
          }
        }

var rzp = new Razorpay(options)
        this.$emit('changeConfirmBookingRazorpay', false)
        rzp.open()
      }).catch(e => {
        this.handleSaveBookingErrors(e.response.data)
      })
    },

payPalInit () {
      let $this = this

let transactionReference = ''

window.paypal.Button.render({
        style: {
          size: 'responsive',
          color: 'gold',
          shape: 'rect',
          tagLine: false
        },

env: $this.$root.settings.payments.payPal.sandboxMode ? 'sandbox' : 'production',

client: {
          sandbox: $this.$root.settings.payments.payPal.testApiClientId,
          production: $this.$root.settings.payments.payPal.liveApiClientId
        },

commit: true,

onClick: function () {
          $this.confirmBooking()
        },

validate: function (actions) {
          $this.payPalActions = actions
          $this.validateFieldsForPayPal()
        },

payment: function () {
          let bookings = JSON.parse(JSON.stringify($this.appointment.bookings))

bookings[0].extras = $this.getExtras()

return window.paypal.request(
            {
              method: 'post',
              url: $this.$root.getAjaxUrl + '/payment/payPal',
              json: $this.getRequestData(true)['data']
            }
          ).then(
            function (response) {
              transactionReference = response.data.transactionReference
              return response.data.paymentID
            }
          ).catch(
            function (error) {
              $this.parseError(error)
            }
          )
        },

onAuthorize: function (data, actions) {
          return actions.payment.get().then(function () {
            let requestData = $this.getRequestData(false, {
              'transactionReference': transactionReference,
              'PaymentId': data.paymentID,
              'PayerId': data.payerID
            })

$this.saveBooking(requestData)
          })
        },

onCancel: function () {
          $this.fetched = true
          $this.inlineSVG()
        },

onError: function (error) {
          $this.parseError(error)
        }

}, '#am-paypal-button-container')
    },

parseError: function (error) {
      let errorString = error.toString()
      let response = JSON.parse(JSON.stringify(JSON.parse(errorString.substring(errorString.indexOf('{'), errorString.lastIndexOf('}') + 1))))

if (typeof response === 'object' && response.hasOwnProperty('data')) {
        this.handleSaveBookingErrors(response)
      } else {
        this.headerErrorShow = true
        this.headerErrorMessage = this.$root.labels.payment_error
      }

this.fetched = true
      this.inlineSVG()
    },

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

if (typeof this.$refs.coupon !== 'undefined') {
        this.$refs.coupon.clearValidate()
      }

let $this = this

Object.keys(this.errors.files).forEach(function (key) {
        $this.errors.files[key] = ''
      })

this.errors.recaptcha = ''

if (this.errors.files) {
        let firstName = this.appointment.bookings[0].customer.firstName
        this.appointment.bookings[0].customer.firstName = firstName + '_'
        this.appointment.bookings[0].customer.firstName = firstName
      }
    },

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

if (!amContainer) {
        return
      }

let amContainerWidth = amContainer.offsetWidth

if (amContainerWidth < 670) {
        this.columnsLg = 24
      } else {
        this.columnsLg = 12
      }
    },

addCustomFieldsValidationRules () {
      for (let i = 0; i < this.customFields.length; i++) {
        if (this.isBookableCustomFieldVisible(this.customFields[i]) && this.customFields[i].required === true) {
          let rules = [
            {required: true, message: this.$root.labels.required_field, trigger: 'submit'}
          ]

if (this.customFields[i].type === 'text' || this.customFields[i].type === 'text-area' || this.customFields[i].type === 'address') {
            rules = [
              {required: true, message: this.$root.labels.required_field, trigger: 'submit'},
              {validator: this.validateCustomFieldInput, trigger: 'submit'}
            ]
          }

this.$set(this.rules, 'customFields.' + this.customFields[i].id + '.value', rules)
        }
      }
    },

validateCustomFieldInput (rule, input, callback) {
      if (!input || this.trimValue(input) === '') {
        callback(new Error(this.$root.labels.required_field))
      } else {
        callback()
      }
    },

getAppointmentsAmountData () {
      let data = {
        instant: {
          total: 0,
          tax: 0,
          discount: 0,
          base: 0,
          deposit: 0
        },
        postponed: {
          total: 0,
          tax: 0,
          discount: 0,
          base: 0,
          deposit: 0,
          totals: {}
        }
      }

let coupon = this.coupon && (this.coupon.discount || this.coupon.deduction) ? this.coupon : null

let couponLimit = this.couponLimit

let instantPaymentCount = 1

if (this.service.recurringPayment) {
        instantPaymentCount = this.service.recurringPayment > this.recurringData.length + 1
          ? this.recurringData.length + 1
          : this.service.recurringPayment
      }

let periodType = 'instant'

let amounts = [this.bookable.price]

this.recurringData.forEach((item) => {
        amounts.push(item.price)
      })

let postponedAppointmentsIndex = 0

amounts.forEach((serviceAmount, index) => {
        if (coupon && couponLimit > 0) {
          couponLimit--
        } else {
          coupon = null
        }

let appointmentData = this.getAppointmentPriceAmount(
          Object.assign({}, this.bookable, {price: serviceAmount}),
          this.selectedExtras,
          this.appointment.bookings[0].persons,
          coupon,
          true
        )

if (index < instantPaymentCount) {
          data[periodType].deposit += this.getDepositAmount(appointmentData.total - appointmentData.discount + appointmentData.tax)
        } else {
          periodType = 'postponed'
        }

data[periodType].total += appointmentData.total
        data[periodType].discount += appointmentData.discount
        data[periodType].tax += appointmentData.tax

if (periodType === 'postponed') {
          if (!(appointmentData.total in data[periodType].totals)) {
            data[periodType].totals[appointmentData.total] = {
              index: postponedAppointmentsIndex,
              count: 1,
              total: appointmentData.total
            }

postponedAppointmentsIndex++
          } else {
            data[periodType].totals[appointmentData.total].count++
          }
        }
      })

let totals = []

Object.keys(data.postponed.totals).forEach((total) => {
        totals[data.postponed.totals[total].index] = {
          total: total,
          count: data.postponed.totals[total].count,
        }
      })

data.postponed.totals = totals

return data
    },

getEventAmountData () {
      let price = this.bookable.ticketsData
        ? this.bookable.ticketsData.totalPrice
        : this.basePriceMultipleValue * this.bookable.price

let eventTax = this.getEntityTax(this.bookable.id, 'event')

if (this.$root.settings.payments.taxes.enabled && eventTax && !this.$root.settings.payments.taxes.excluded && this.coupon && this.couponLimit) {
        price = this.getBaseAmount(price, eventTax)
      }

let discount = this.coupon && this.couponLimit ? (price / 100 * this.coupon.discount) + this.coupon.deduction : 0

let tax = 0

if (this.$root.settings.payments.taxes.enabled && eventTax && this.$root.settings.payments.taxes.excluded) {
        tax = this.getEntityTaxAmount(eventTax, price - discount)
      } else if (this.$root.settings.payments.taxes.enabled && eventTax && !this.$root.settings.payments.taxes.excluded && discount) {
        price += this.getEntityTaxAmount(eventTax, price - discount)
      }

return {
        instant: {
          total: price,
          discount: discount,
          tax: tax,
          deposit: this.getDepositAmount(price - discount + tax)
        },
        postponed: {
          total: 0,
          discount: 0,
          tax: 0,
          deposit: 0
        }
      }
    },

getPackageAmountData () {
      let price = this.basePriceMultipleValue * this.bookable.price

let packageTax = this.getEntityTax(this.bookable.id, 'package')

if (this.$root.settings.payments.taxes.enabled && packageTax && !this.$root.settings.payments.taxes.excluded && this.coupon && this.couponLimit) {
        price = this.getBaseAmount(price, packageTax)
      }

let discount = this.coupon && this.couponLimit ? (price / 100 * this.coupon.discount) + this.coupon.deduction : 0

let tax = 0

if (this.$root.settings.payments.taxes.enabled && packageTax && this.$root.settings.payments.taxes.excluded) {
        tax = this.getEntityTaxAmount(packageTax, price - discount)
      } else if (this.$root.settings.payments.taxes.enabled && packageTax && !this.$root.settings.payments.taxes.excluded && discount) {
        price += this.getEntityTaxAmount(packageTax, price - discount)
      }

getDepositAmount (totalAmount) {
      let depositAmount = 0

if (this.bookable.depositData) {
        switch (this.bookable.depositData.depositPayment) {
          case ('fixed'):
            depositAmount = this.bookable.depositData.depositPerPerson
              ? this.appointment.bookings[0].persons * this.bookable.depositData.deposit
              : this.bookable.depositData.deposit

break

case ('percentage'):
            depositAmount = this.getPercentage(totalAmount, this.bookable.depositData.deposit)

break
        }
      }

return this.getRound(totalAmount > depositAmount ? depositAmount : 0)
    },

getTaxLabel () {
      let entityTax = this.getEntityTax(this.bookable.id, this.bookableType === 'appointment' ? 'service' : this.bookableType)

let taxes = {}

taxes[entityTax.id] = entityTax.name

this.selectedExtras.forEach((extItem) => {
        let extraTax = this.getEntityTax(extItem.extraId, 'extra')

if (extraTax) {
          taxes[extraTax.id] = extraTax.name
        }
      })

let label = 'total_tax_colon' in this.priceLabels
        ? this.priceLabels.total_tax_colon.value || this.$root.labels.total_tax_colon
        : this.$root.labels.total_tax_colon

return Object.keys(taxes).length === 1 ? Object.values(taxes)[0] : label
    }
  },

computed: {
    amountData () {
      switch (this.bookableType) {
        case ('appointment'):
          return this.getAppointmentsAmountData()
        case ('event'):
          return this.getEventAmountData()
        case ('package'):
          return this.getPackageAmountData()
      }
    },

withDeposit () {
      return this.amountData.instant.deposit > 0 && this.getPaymentGateway() !== 'onSite' && this.paymentType === 'depositOnly'
    },

onlyTotal () {
      return !(this.amountData.instant.tax > 0 || this.amountData.instant.discount > 0)
    },

instantPaymentBasePriceData () {
      return this.getBookingBasePriceData('instant')
    },

basePriceMultipleValue () {
      return this.bookable.aggregatedPrice ? this.appointment.bookings[0].persons : 1
    },

instantPaymentBookingsCount () {
      if (this.recurringData.length === 0) {
        return 1
      }

return (this.recurringData.length < this.service.recurringPayment ? this.recurringData.length : this.service.recurringPayment) + 1
    },

// amountData.instant.deposit () {
    //   return this.amountData.instant.deposit
    //
    //   let amountData.instant.deposit = 0
    //
    //   let totalPrice = this.getTotalPrice()
    //
    //   if (this.bookable.depositData) {
    //     switch (this.bookable.depositData.depositPayment) {
    //       case ('fixed'):
    //         if (this.bookable.depositData.depositPerPerson && this.bookable.aggregatedPrice) {
    //           let persons = 'ticketsData' in this.bookable && this.bookable.ticketsData && 'totalTickets' in this.bookable.ticketsData
    //             ? this.bookable.ticketsData.totalTickets : this.appointment.bookings[0].persons
    //
    //           amountData.instant.deposit = persons * this.bookable.depositData.deposit
    //         } else {
    //           amountData.instant.deposit = this.bookable.depositData.deposit
    //         }
    //
    //         if (this.bookableType === 'appointment') {
    //           this.recurringData.forEach((value, index) => {
    //             if (this.instantPaymentBookingsCount - 1 > index) {
    //               amountData.instant.deposit +=
    //                 this.bookable.depositData.depositPerPerson
    //                   ? this.appointment.bookings[0].persons * value.depositData.deposit : value.depositData.deposit
    //             } else if (value.depositData) {
    //               value.depositData = null
    //             }
    //           })
    //         }
    //
    //         break
    //
    //       case 'percentage':
    //         amountData.instant.deposit = totalPrice / 100 * this.bookable.depositData.deposit
    //         console.log(amountData.instant.deposit)
    //
    //         break
    //     }
    //   }
    //
    //   return totalPrice > amountData.instant.deposit ? amountData.instant.deposit : 0
    // },

paymentPeriodData () {
      let instantPaymentData = {}
      let postponedPaymentData = {}

switch (this.bookableType) {
        case ('appointment'):
          instantPaymentData[this.bookable.price] = {
            count: 1,
            price: this.bookable.price
          }

this.recurringData.forEach((value, index) => {
            if (this.instantPaymentBookingsCount - 1 > index) {
              if (!(value.price in instantPaymentData)) {
                instantPaymentData[value.price] = {
                  count: 1,
                  price: value.price
                }
              } else {
                instantPaymentData[value.price].count++
              }
            } else {
              if (!(value.price in postponedPaymentData)) {
                postponedPaymentData[value.price] = {
                  count: 1,
                  price: value.price
                }
              } else {
                postponedPaymentData[value.price].count++
              }
            }
          })

break

case ('package'):
          instantPaymentData[this.bookable.price] = {
            count: 1,
            price: this.bookable.price
          }

break

case ('event'):
          instantPaymentData[this.bookable.price] = {
            count: 1,
            price: this.bookable.price
          }

break
      }

return {
        instant: instantPaymentData,
        postponed: postponedPaymentData
      }
    },

bookableConfirmStyle () {
      return this.hoverConfirm ? {
        color: this.bookable.color,
        borderColor: this.bookable.color,
        backgroundColor: this.bookable.color,
        opacity: 0.8
      } : {
        color: '#ffffff',
        backgroundColor: this.bookable.color,
        borderColor: this.bookable.color,
        opacity: 1
      }
    },

bookableCancelStyle () {
      return this.hoverCancel ? {
        color: this.bookable.color,
        borderColor: this.bookable.color,
        backgroundColor: '',
        opacity: 0.7
      } : {
        color: '',
        backgroundColor: '#ffffff',
        borderColor: '',
        opacity: 1
      }
    },

bookableCancelSpanStyle () {
      return this.hoverCancel ? {
        color: this.bookable.color,
        borderColor: '',
        backgroundColor: '',
        opacity: 0.9
      } : {
        color: '',
        backgroundColor: '',
        borderColor: '',
        opacity: 1
      }
    },

selectedExtras () {
      return this.appointment.bookings[0].extras.filter(extra => extra.selected === true)
    },

paymentOptions () {
      let paymentOptions = []

if (this.$root.settings.payments.onSite === true) {
        paymentOptions.push({
          value: 'onSite',
          label: this.$root.labels.on_site
        })
      }

if (this.$root.settings.payments.payPal.enabled) {
        paymentOptions.push({
          value: 'payPal',
          label: this.$root.labels.pay_pal
        })
      }

if (this.$root.settings.payments.stripe.enabled) {
        paymentOptions.push({
          value: 'stripe',
          label: this.$root.labels.credit_card
        })
      }

if (this.$root.settings.payments.wc.enabled) {
        paymentOptions.push({
          value: 'wc',
          label: this.$root.labels.wc
        })
      }

if (this.$root.settings.payments.mollie.enabled) {
        paymentOptions.push({
          value: 'mollie',
          label: this.$root.labels.on_line
        })
      }

if (this.$root.settings.payments.square.enabled) {
        paymentOptions.push({
          value: 'square',
          label: this.$root.labels.square
        })
      }

if (this.$root.settings.payments.razorpay.enabled) {
        paymentOptions.push({
          value: 'razorpay',
          label: this.$root.labels.razorpay
        })
      }

return paymentOptions
    },

showConfirmBookingButton () {
      return this.appointment.payment.gateway === 'onSite' ||
        this.appointment.payment.gateway === 'wc' ||
        this.appointment.payment.gateway === 'mollie' ||
        this.appointment.payment.gateway === 'square' ||
        this.appointment.payment.gateway === 'stripe' ||
        this.appointment.payment.gateway === 'razorpay' ||
        (this.appointment.payment.gateway === 'payPal' && this.getTotalPrice() === 0)
    },

priceLabels () {
      if (this.formType === 'searchForm') {
        return this.defaultFormsData['stepByStepForm'][this.formName][this.bookableType].itemsStatic.priceFormFiled.labels
      }

return this.formsData.confirmBookingForm[this.bookableType].itemsStatic.priceFormFiled
        ? this.formsData.confirmBookingForm[this.bookableType].itemsStatic.priceFormFiled.labels
        : this.defaultFormsData[this.formType][this.formName][this.bookableType].itemsStatic.priceFormFiled.labels
    }
  },

components: {
    moment,
    VueRecaptcha,
    confirmHeadingDataFormField,
    recurringStringFormField,
    firstNameFormField,
    lastNameFormField,
    emailFormField,
    phoneFormField,
    paymentMethodFormField,
    paymentTypeFormField,
    stripeCardFormField,
    VueGoogleAutocomplete
  }
}
</script>

Back