FileMaster

Edit File: Customize.vue

<page-header @showMainCustomize="hiddenForm = true" :oldCustomize="!hiddenForm"></page-header>

<div class="am-customize am-section" v-if="!hiddenForm">
        
        <div class="am-customize-settings-preview">
          <el-row class="am-flexed">
            
            <el-col :lg="6" class="">
              <div class="am-customize-settings">

<el-collapse v-model="globalColorsTab"  class="am-customize-global-colors" accordion>
                  <el-collapse-item name="1">
                    <template slot="title">
                      
                      <div class="am-setting" style="width: 100%; border-bottom: none;">
                        <p style="display: flex; flex-wrap: wrap">
                          {{ $root.labels.use_global_colors }}
                        </p>
                        <div @click.stop style="padding-right: 16px">
                          <el-switch
                            v-model="customization.useGlobalColors[formType]"
                            active-color="#1A84EE"
                            @change="handleGlobalSwitch"
                            :disabled="this.$root.licence.isLite"
                          >
                          </el-switch>
                        </div>
                      </div>
                      
                    </template>
                    <div>
                      
                      <div class="am-setting am-setting-collapse">
                        <p>{{ $root.labels.primary_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.primaryColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('primaryColor', customization.globalColors.primaryColor, 'primaryColor')"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse">
                        <p>{{ $root.labels.text_color_on_background }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.textColorOnBackground"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('textColorOnBackground', customization.globalColors.textColorOnBackground, 'textColorOnBackground')"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.text_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formTextColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formTextColor', customization.globalColors.formTextColor, 'textColor')"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.bgr_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formBackgroundColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formBackgroundColor', customization.globalColors.formBackgroundColor)"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.bgr_gradient_color1 }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formGradientColor1"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formGradientColor1', customization.globalColors.formGradientColor1, 'primaryGradient1')"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.bgr_gradient_color2 }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formGradientColor2"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formGradientColor2', customization.globalColors.formGradientColor2, 'primaryGradient2')"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}" style="flex-wrap: wrap">
                        <p>{{ $root.labels.bgr_gradient_angle }}</p>
                        <el-slider
                          v-model="customization.globalColors.formGradientAngle"
                          :max="360"
                          :step="1"
                          :style="{width: 'calc(100% - 28px)', margin: '0 auto'}"
                        ></el-slider>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.input_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formInputColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formInputColor', customization.globalColors.formInputColor)"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.input_text_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formInputTextColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formInputTextColor', customization.globalColors.formInputTextColor)"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.dropdown_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formDropdownColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formDropdownColor', customization.globalColors.formDropdownColor)"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.dropdown_text_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formDropdownTextColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formDropdownTextColor', customization.globalColors.formDropdownTextColor)"
                        ></el-color-picker>
                      </div>

<div class="am-setting am-setting-collapse" :class="{'am-setting__disabled': !customization.useGlobalColors[formType]}">
                        <p>{{ $root.labels.image_color }}</p>
                        <el-color-picker
                          v-model="customization.globalColors.formImageColor"
                          :show-alpha="true"
                          size="small"
                          @change="updateOldColors('formImageColor', customization.globalColors.formImageColor)"
                        ></el-color-picker>
                      </div>
                      
                    </div>
                  </el-collapse-item>
                </el-collapse>

<div class="am-setting am-setting-wrapper">
                  <div class="am-setting__inner">
                    <p>{{ $root.labels.font }}</p>
                    <el-select
                      v-model="customization.font"
                      value-key="customer.id"
                      placeholder=""
                      @change="fontSelect"
                    >
                      <el-option
                        :label="$root.labels.custom"
                        :value="customization.customFontFamily"
                      >
                      </el-option>
                      <el-option
                        v-for="font in fonts"
                        :key="font.id"
                        :label="font.name"
                        :value="font.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <transition name="fade">
                    <div v-if="customization.font === customization.customFontFamily" class="am-setting__inner">
                      <p>{{ $root.labels.font_url }}</p>
                      <el-input v-model="fontUrl" @change="activateCustomFontStyles()"></el-input>
                    </div>
                  </transition>
                  <transition name="fade">
                    <div v-if="customization.font === customization.customFontFamily" class="am-setting__inner">
                      <p>{{ $root.labels.font_family }}</p>
                      <el-input v-model="customization.customFontFamily" @input="fontFamily"></el-input>
                    </div>
                  </transition>
                </div>

<div class="am-actions">

<el-button @click="resetSettings()">
                    {{ $root.labels.reset }}
                  </el-button>

<el-button
                    @click="saveSettings()"
                    :loading="loadingButton"
                    type="primary"
                  >
                    {{ $root.labels.save }}
                  </el-button>
                </div>
                
              </div>
            </el-col>

<el-col :lg="18" class="">
              <LicenceBlockHeader :licence="'starter'"/>
              <div class="am-customize__header-wrapper"
                   :class="licenceClassDisabled('starter')"
              >
                <div class="am-customize__header">
                  <div class="am-customize__header-left-inner">
                    <span>{{ $root.labels.form }}</span>
                    <el-select
                      v-model="formType"
                      @change="changeFormType"
                    >
                      <el-option
                        v-for="item in formTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div v-if="customizeDisplayOptions.length" class="am-customize__header-left-inner">
                    <span>{{ $root.labels.form_flow }}</span>
                    <el-select v-model="customizeDisplay" :disabled="$root.licence.isLite">
                      <el-option
                        v-for="item in customizeDisplayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="am-customize__header">
                  <div class="am-customize__header-right-inner">
                    <select-translate @languageChanged="languageChanged"></select-translate>
                  </div>
                  <div class="am-customize__header-right-inner">
                    <el-button
                      class="am-customize__preview"
                      :type="editable ? '' : 'primary'"
                      @click="editable = !editable"
                    >
                      {{ $root.labels.preview }}
                    </el-button>
                  </div>
                </div>
              </div>
              <component
                :class="licenceClassDisabled('starter')"
                :is="formType"
                :language-short-code="languageShortCode"
                :customize-display="customizeDisplay"
                :editable="editable"
                :customization="customization"
                :form-type-data="forms[formType]"
                :reset-data="defaultFormsData[formType]"
                @resetForm="resetForm"
                @saveDraggableEdit="saveDraggableEdit"
                @saveEdit="saveEdit"
              ></component>
            </el-col>

</el-row>
        </div>
        
      </div>
      <div v-else class="am-customize-main__content">
        <div class="am-customize-main__heading">
          <h1>
            {{ $root.labels.choose_form }}
          </h1>
          <p>
            {{ $root.labels.choose_form_for_customize }}
          </p>
        </div>
        <div class="am-customize-main__form-card__wrapper">
          
          <div class="am-customize-main__form-card">
            <div class="am-customize-main__form-card__content">
              <img :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia2-0.png`" alt="Step-by-Step Booking Form 2.0">
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.sbs_booking_form}}</span>
                </h3>
                <p>
                  {{$root.labels.redesigned_sbs_booking_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('sbsNew')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div class="am-customize-main__form-card">
            <div class="am-customize-main__form-card__content">
              <img
                :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia-catalog-2-0.png`"
                alt="Catalog Booking Form 2.0"
                class="am-customize-main__form-card__content-img"
              >
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.cat_booking_form}}</span>
                </h3>
                <p>
                  {{$root.labels.redesigned_cat_booking_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('cbf')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div class="am-customize-main__form-card" v-if="!$root.licence.isLite">
            <div class="am-customize-main__form-card__content">
              <img
                :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia-ev-calendar-2-0.png`"
                :alt="$root.labels.ecf_booking_form"
                class="am-customize-main__form-card__content-img"
              >
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.ecf_booking_form}}</span>
                </h3>
                <p>
                  {{$root.labels.redesigned_ecf_booking_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('ecf')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div class="am-customize-main__form-card">
            <div class="am-customize-main__form-card__content">
              <img
                :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia-ev-list-2-0.png`"
                :alt="$root.labels.elf_booking_form"
                class="am-customize-main__form-card__content-img"
              >
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.elf_booking_form}}</span>
                </h3>
                <p>
                  {{$root.labels.redesigned_elf_booking_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('elf')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div
            v-if="!$root.licence.isLite"
            class="am-customize-main__form-card"
          >
            <div class="am-customize-main__form-card__content">
              <img
                :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia-capc-2-0.png`"
                :alt="$root.labels.capc_form"
                class="am-customize-main__form-card__content-img"
              >
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.capc_form}}</span>
                  <span class="am-pill-new">{{$root.labels.new_caps}}</span>
                </h3>
                <p>
                  {{$root.labels.redesigned_capc_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('capc')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div
            v-if="!$root.licence.isLite"
            class="am-customize-main__form-card"
          >
            <div class="am-customize-main__form-card__content">
              <img
                :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia-cape-2-0.png`"
                :alt="$root.labels.capa_form"
                class="am-customize-main__form-card__content-img"
              >
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.cape_form}}</span>
                  <span class="am-pill-wrapper">
                    <span class="am-pill-beta">{{$root.labels.beta_caps}}</span>
                    <span class="am-pill-new">{{$root.labels.new_caps}}</span>
                  </span>
                </h3>
                <p>
                  {{$root.labels.redesigned_cape_form}}
                </p>
              </div>
            </div>
            <el-button @click="goToNewCustomize('cape')" type="primary">{{ $root.labels.continue }}</el-button>
          </div>

<div class="am-customize-main__form-card">
            <div class="am-customize-main__form-card__content">
              <img :src="`${$root.getUrl}v3/src/assets/img/admin/customize/amelia1-0.png`" alt="Step-by-Step Booking Form 2.0">
              <div class="am-customize-main__form-card__heading">
                <h3>
                  <span>{{$root.labels.sbs_booking_form_old}}</span>
                </h3>
                <p>
                  {{$root.labels.old_forms_text}}
                </p>
              </div>
            </div>
            <el-button @click="hiddenForm = !hiddenForm" type="primary">{{ $root.labels.continue }}</el-button>
          </div>
          
        </div>

</div>

<el-col :md="6" class="">
        <a class="am-help-button" :href="needHelpPage" target="_blank" rel="nofollow">
          <i class="el-icon-question"></i> {{ $root.labels.need_help }}?
        </a>
      </el-col>

</div>

</div>
</template>

export default {
  components: {
    // DialogNewCustomize,
    ElButton,
    PageHeader,
    stepByStepForm,
    catalogForm,
    eventListForm,
    eventCalendarForm,
    SelectTranslate
  },

mixins: [
    licenceMixin,
    formsCustomizationMixin,
    dateMixin,
    notifyMixin,
    imageMixin
  ],

data () {
    return {
      hiddenForm: true,
      formType: 'stepByStepForm',
      formTypeOptions: [
        {
          label: this.$root.labels.form_type_step_by_step,
          value: 'stepByStepForm'
        },
        {
          label: this.$root.labels.form_type_catalog,
          value: 'catalogForm'
        },
        {
          label: this.$root.labels.form_type_event_list,
          value: 'eventListForm'
        },
        {
          label: this.$root.labels.form_type_event_calendar,
          value: 'eventCalendarForm'
        }
      ],
      customizeDisplay: 'appointment',
      customizeDisplayOptions: [
        {
          value: 'appointment',
          label: this.$root.labels.form_block_service
        },
        {
          value: 'package',
          label: this.$root.labels.form_block_package
        }
      ],
      editable: true,
      defaultCustomization: {
        primaryColor: '#1A84EE',
        primaryGradient1: '#1A84EE',
        primaryGradient2: '#0454A2',
        textColor: '#354052',
        textColorOnBackground: '#ffffff',
        useGlobalColors: {
          stepByStepForm: false,
          catalogForm: false,
          eventListForm: false,
          eventCalendarForm: false
        },
        globalColors: {
          primaryColor: '#1A84EE',
          formBackgroundColor: '#FFFFFF',
          formTextColor: '#354052',
          formInputColor: '#FFFFFF',
          formInputTextColor: '#354052',
          formDropdownColor: '#FFFFFF',
          formDropdownTextColor: '#354052',
          formGradientColor1: '#1A84EE',
          formGradientColor2: '#0454A2',
          formGradientAngle: 135,
          formImageColor: '#1A84EE',
          textColorOnBackground: '#FFFFFF'
        },
        font: 'Amelia Roboto, sans-serif'
      },
      activeFormType: '',
      customization: this.$root.settings.customization,
      employee: this.$root.labels.any_employee,
      fonts: [
        {
          id: 1,
          name: 'Roboto',
          value: 'Amelia Roboto, sans-serif'
        },
        {
          id: 2,
          name: 'Lato',
          value: 'Amelia Lato'
        },
        {
          id: 3,
          name: 'Merriweather',
          value: 'Amelia Merriweather, serif'
        },
        {
          id: 4,
          name: 'Montserrat',
          value: 'Amelia Montserrat, sans-serif'
        },
        {
          id: 5,
          name: 'Mulish',
          value: 'Amelia Mulish, sans-serif'
        },
        {
          id: 6,
          name: 'Nunito',
          value: 'Amelia Nunito, sans-serif'
        },
        {
          id: 7,
          name: 'Asap Condensed',
          value: 'Amelia Asap Condensed, sans-serif'
        },
        {
          id: 8,
          name: 'Open Sans',
          value: 'Amelia Open Sans, sans-serif'
        },
        {
          id: 9,
          name: 'Barlow',
          value: 'Amelia Barlow, sans-serif'
        },
        {
          id: 10,
          name: 'Oswald',
          value: 'Amelia Oswald, sans-serif'
        },
        {
          id: 11,
          name: 'Bitter',
          value: 'Amelia Bitter, serif'
        },
        {
          id: 12,
          name: 'Poppins',
          value: 'Amelia Poppins, sans-serif'
        },
        {
          id: 13,
          name: 'Carme',
          value: 'Amelia Carme, sans-serif'
        }
      ],
      loadingButton: false,
      switchValue: true,
      forms: {},
      languageShortCode: '',
      globalColorsTab: '1',
      fontUrl: ''
    }
  },

created () {
    this.fonts.forEach(item => {
      if (this.customization.font && item.name === this.customization.font.split(',')[0]) {
        this.customization.font = item.value
      }
    })

this.fontUrl = this.customization.fontUrl === '' ? '' : JSON.parse(this.customization.fontUrl)

this.changeFormType('stepByStepForm')

if (this.$root.settings.customization && this.$root.settings.customization.forms) {
      this.forms = deepMerge.all([this.$root.settings.customization.forms, this.getDefaultFormData(), this.$root.settings.customization.forms])
    } else {
      this.forms = this.getDefaultFormData()
    }

this.removeObjectDiff(this.forms, this.getDefaultFormData())
  },

mounted () {
    if (this.$root.licence.isLite) {
      this.customization.useGlobalColors.stepByStepForm = true
      this.customization.useGlobalColors.catalogForm = true
      this.customization.useGlobalColors.eventListForm = true
      this.customization.useGlobalColors.eventCalendarForm = true
    }

if (this.customization.customFontSelected === 'selected') {
      this.activateCustomFontStyles()
    }

if ('useGenerated' in this.customization) {
      delete this.customization.useGenerated
    }

this.inlineSVG()
  },

methods: {
    goToNewCustomize (pageKey) {
      window.location = pageKey ? `admin.php?page=wpamelia-customize-new&current=${pageKey}` : 'admin.php?page=wpamelia-customize-new'
    },

activateCustomFontStyles () {
      let head = document.head || document.getElementsByTagName('head')[0]
      if (head.querySelector('#customFont')) {
        head.querySelector('#customFont').remove()
      }

let css = `@font-face {font-family: ${this.customization.font}; src: url(${this.fontUrl});}`
      let style = document.createElement('style')
      head.appendChild(style)
      style.setAttribute('type', 'text/css')
      style.setAttribute('id', 'customFont')
      style.appendChild(document.createTextNode(css))
    },

fontSelect (a) {
      if (this.customization.customFontFamily === a) {
        this.customization.customFontSelected = 'selected'
        this.activateCustomFontStyles()
      } else {
        this.customization.customFontSelected = 'unselected'
      }
    },

fontFamily (a) {
      this.customization.font = a
      this.activateCustomFontStyles()
    },

handleGlobalSwitch (val) {
      if (val) {
        this.globalColorsTab = '1'
      }
    },

updateOldColors (newProperty, val, oldProperty = '') {
      if (!val) {
        this.customization.globalColors[newProperty] = 'rgba(255,255,255,0)'
        if (oldProperty) {
          this.customization[oldProperty] = 'rgba(255,255,255,0)'
        }
      } else {
        if (oldProperty) {
          this.customization[oldProperty] = val
        }
      }
    },

removeObjectDiff (a, b) {
      Object.keys(a).forEach((item) => {
        if (typeof a[item] !== 'object') {
          return false
        }
        if (!b.hasOwnProperty(item)) {
          delete a[item]
        } else {
          Object.keys(a[item]).forEach((item1) => {
            if (typeof a[item][item1] !== 'object') {
              return false
            }
            if (!b[item].hasOwnProperty(item1)) {
              delete a[item][item1]
            } else {
              Object.keys(a[item][item1]).forEach((item2) => {
                if (typeof a[item][item1][item2] !== 'object') {
                  return false
                }
                if (!b[item][item1].hasOwnProperty(item2)) {
                  delete a[item][item1][item2]
                } else {
                  Object.keys(a[item][item1][item2]).forEach((item3) => {
                    if (typeof a[item][item1][item2][item3] !== 'object') {
                      return false
                    }
                    if (!b[item][item1][item2].hasOwnProperty(item3)) {
                      delete a[item][item1][item2][item3]
                    } else {
                      Object.keys(a[item][item1][item2][item3]).forEach((item4) => {
                        if (typeof a[item][item1][item2][item3][item4] !== 'object') {
                          return false
                        }
                        if (!b[item][item1][item2][item3].hasOwnProperty(item4)) {
                          delete a[item][item1][item2][item3][item4]
                        } else {
                          Object.keys(a[item][item1][item2][item3][item4]).forEach((item5) => {
                            if (typeof a[item][item1][item2][item3][item4][item5] !== 'object') {
                              return false
                            }
                            if (!b[item][item1][item2][item3][item4].hasOwnProperty(item5)) {
                              delete a[item][item1][item2][item3][item4][item5]
                            } else {
                              Object.keys(a[item][item1][item2][item3][item4][item5]).forEach((item6) => {
                                if (typeof a[item][item1][item2][item3][item4][item5][item6] !== 'object') {
                                  return false
                                }
                                if (!b[item][item1][item2][item3][item4][item5].hasOwnProperty(item6)) {
                                  delete a[item][item1][item2][item3][item4][item5][item6]
                                }
                              })
                            }
                          })
                        }
                      })
                    }
                  })
                }
              })
            }
          })
        }
      })
    },

languageChanged (selectedLanguage) {
      this.languageShortCode = selectedLanguage
    },

changeFormType (type) {
      this.editable = true
      if (type === 'stepByStepForm') {
        this.customizeDisplay = 'appointment'
        if (this.$root.licence.isBasic || this.$root.licence.isLite) {
          this.customizeDisplayOptions = [
            {
              value: 'appointment',
              label: this.$root.labels.form_block_service
            }
          ]
        } else {
          this.customizeDisplayOptions = [
            {
              value: 'appointment',
              label: this.$root.labels.form_block_service
            },
            {
              value: 'package',
              label: this.$root.labels.form_block_package
            }
          ]
        }
      }

if ((type === 'eventListForm') || (type === 'eventCalendarForm')) {
        this.customizeDisplay = ''
        this.customizeDisplayOptions = []
      }

if (type === 'catalogForm') {
        this.customizeDisplay = 'catalog'
        if (this.$root.licence.isBasic || this.$root.licence.isLight) {
          this.customizeDisplayOptions = [
            {
              value: 'catalog',
              label: this.$root.labels.form_block_catalog
            },
            {
              value: 'appointment',
              label: this.$root.labels.form_block_catalog_service
            }
          ]
        } else {
          this.customizeDisplayOptions = [
            {
              value: 'catalog',
              label: this.$root.labels.form_block_catalog
            },
            {
              value: 'appointment',
              label: this.$root.labels.form_block_catalog_service
            },
            {
              value: 'package',
              label: this.$root.labels.form_block_catalog_package
            }
          ]
        }
      }

this.globalColorsTab = '1'
    },

getDefaultFormData () {
      let forms = JSON.parse(JSON.stringify({...this.defaultFormsData}))

if (this.customization) {
        // STEP BY STEP - SELECT SERVICE FORM
        forms.stepByStepForm.selectServiceForm.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.selectServiceForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.selectServiceForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - CALENDAR DATE TIME FORM
        forms.stepByStepForm.calendarDateTimeForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.stepByStepForm.calendarDateTimeForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.stepByStepForm.calendarDateTimeForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        // STEP BY STEP - RECURRING SETUP FORM
        forms.stepByStepForm.recurringSetupForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        forms.stepByStepForm.recurringSetupForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.stepByStepForm.recurringSetupForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.stepByStepForm.recurringSetupForm.globalSettings.formInputTextColor = this.customization.textColorOnBackground
        forms.stepByStepForm.recurringSetupForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - RECURRING DATES FORM
        forms.stepByStepForm.recurringDatesForm.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.recurringDatesForm.globalSettings.formInputColor = this.customization.textColorOnBackground
        forms.stepByStepForm.recurringDatesForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.recurringDatesForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - SELECT PACKAGE FORM
        forms.stepByStepForm.selectPackageForm.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.selectPackageForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.selectPackageForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - PACKAGE INFO FORM
        forms.stepByStepForm.packageInfoForm.globalSettings.formTextColor = this.customization.textColor
        // STEP BY STEP - PACKAGE SETUP FORM
        forms.stepByStepForm.packageSetupForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        forms.stepByStepForm.packageSetupForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.stepByStepForm.packageSetupForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.stepByStepForm.packageSetupForm.globalSettings.formInputTextColor = this.customization.textColorOnBackground
        forms.stepByStepForm.packageSetupForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - PACKAGE LIST FORM
        forms.stepByStepForm.packageListForm.globalSettings.formTextColor = this.customization.textColor
        // STEP BY STEP - CONFIRM BOOKING FORM - APPOINTMENT
        forms.stepByStepForm.confirmBookingForm.appointment.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.confirmBookingForm.appointment.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.confirmBookingForm.appointment.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - CONFIRM BOOKING FORM - PACKAGE
        forms.stepByStepForm.confirmBookingForm.package.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.confirmBookingForm.package.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.confirmBookingForm.package.globalSettings.formDropdownTextColor = this.customization.textColor
        // STEP BY STEP - CONGRATULATIONS BOOKING FORM - APPOINTMENT
        forms.stepByStepForm.congratulationsForm.appointment.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.appointment.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.appointment.globalSettings.formDropdownTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.appointment.globalSettings.formImageColor = this.customization.primaryColor
        // STEP BY STEP - CONGRATULATIONS BOOKING FORM - PACKAGE
        forms.stepByStepForm.congratulationsForm.package.globalSettings.formTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.package.globalSettings.formInputTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.package.globalSettings.formDropdownTextColor = this.customization.textColor
        forms.stepByStepForm.congratulationsForm.package.globalSettings.formImageColor = this.customization.primaryColor
        // CATALOG FORM - SELECT SERVICE FORM
        forms.catalogForm.selectServiceForm.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.selectServiceForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.selectServiceForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - CALENDAR DATE TIME FORM
        forms.catalogForm.calendarDateTimeForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.catalogForm.calendarDateTimeForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.catalogForm.calendarDateTimeForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        // CATALOG FORM - RECURRING SETUP FORM
        forms.catalogForm.recurringSetupForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        forms.catalogForm.recurringSetupForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.catalogForm.recurringSetupForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.catalogForm.recurringSetupForm.globalSettings.formInputTextColor = this.customization.textColorOnBackground
        forms.catalogForm.recurringSetupForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - RECURRING DATES FORM
        forms.catalogForm.recurringDatesForm.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.recurringDatesForm.globalSettings.formInputColor = this.customization.textColorOnBackground
        forms.catalogForm.recurringDatesForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.recurringDatesForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - PACKAGE SETUP FORM
        forms.catalogForm.packageSetupForm.globalSettings.formTextColor = this.customization.textColorOnBackground
        forms.catalogForm.packageSetupForm.globalSettings.formGradientColor1 = this.customization.primaryGradient1
        forms.catalogForm.packageSetupForm.globalSettings.formGradientColor2 = this.customization.primaryGradient2
        forms.catalogForm.packageSetupForm.globalSettings.formInputTextColor = this.customization.textColorOnBackground
        forms.catalogForm.packageSetupForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - PACKAGE LIST FORM
        forms.catalogForm.packageListForm.globalSettings.formTextColor = this.customization.textColor
        // CATALOG FORM - CONFIRM BOOKING FORM - APPOINTMENT
        forms.catalogForm.confirmBookingForm.appointment.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.confirmBookingForm.appointment.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.confirmBookingForm.appointment.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - CONFIRM BOOKING FORM - PACKAGE
        forms.catalogForm.confirmBookingForm.package.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.confirmBookingForm.package.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.confirmBookingForm.package.globalSettings.formDropdownTextColor = this.customization.textColor
        // CATALOG FORM - CONGRATULATIONS BOOKING FORM - APPOINTMENT
        forms.catalogForm.congratulationsForm.appointment.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.appointment.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.appointment.globalSettings.formDropdownTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.appointment.globalSettings.formImageColor = this.customization.primaryColor
        // CATALOG FORM - CONGRATULATIONS BOOKING FORM - PACKAGE
        forms.catalogForm.congratulationsForm.package.globalSettings.formTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.package.globalSettings.formInputTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.package.globalSettings.formDropdownTextColor = this.customization.textColor
        forms.catalogForm.congratulationsForm.package.globalSettings.formImageColor = this.customization.primaryColor
        // EVENT LIST FORM
        forms.eventListForm.globalSettings.formTextColor = this.customization.textColor
        forms.eventListForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.eventListForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // EVENT CALENDAR FORM - SELECT EVENT CALENDAR FORM
        forms.eventCalendarForm.selectEventCalendarForm.globalSettings.formTextColor = this.customization.textColor
        forms.eventCalendarForm.selectEventCalendarForm.globalSettings.formInputTextColor = this.customization.textColor
        forms.eventCalendarForm.selectEventCalendarForm.globalSettings.formDropdownTextColor = this.customization.textColor
        // EVENT CALENDAR FORM - INFO EVENT CALENDAR FORM
        forms.eventCalendarForm.infoEventCalendarForm.globalSettings.formTextColor = this.customization.textColor
        // EVENT CALENDAR FORM - INVITE EVENT CALENDAR FORM
        forms.eventCalendarForm.inviteEventCalendarForm.globalSettings.formTextColor = this.customization.textColor
        forms.eventCalendarForm.inviteEventCalendarForm.globalSettings.formInputTextColor = this.customization.textColor
        // EVENT CALENDAR FORM - CONFIRM BOOKING FORM
        forms.eventCalendarForm.confirmBookingForm.event.globalSettings.formTextColor = this.customization.textColor
        forms.eventCalendarForm.confirmBookingForm.event.globalSettings.formInputTextColor = this.customization.textColor
        forms.eventCalendarForm.confirmBookingForm.event.globalSettings.formDropdownTextColor = this.customization.textColor
        // EVENT CALENDAR FORM - CONGRATULATIONS BOOKING FORM
        forms.eventCalendarForm.congratulationsForm.event.globalSettings.formTextColor = this.customization.textColor
        forms.eventCalendarForm.congratulationsForm.event.globalSettings.formInputTextColor = this.customization.textColor
        forms.eventCalendarForm.congratulationsForm.event.globalSettings.formDropdownTextColor = this.customization.textColor
      }

return forms
    },

resetForm (resetData) {
      if (resetData.formType && resetData.formStep && resetData.formPart) {
        this.forms[resetData.formType][resetData.formStep][resetData.formPart] = resetData.data
      } else if (resetData.formType && resetData.formStep) {
        this.forms[resetData.formType][resetData.formStep] = resetData.data
      } else if (resetData.formType) {
        this.forms[resetData.formType] = resetData.data
      }
    },

saveDraggableEdit (dataObj) {
      this.forms = deepMerge.all([dataObj, this.forms])
    },

saveEdit (dataObj) {
      this.forms = deepMerge.all([this.forms, dataObj])
    },

saveSettings () {
      let defaultForm = this.getDefaultFormData()

this.customization.useGenerated = JSON.stringify({...defaultForm}) !== JSON.stringify({...this.forms}) || JSON.stringify(this.defaultCustomization.font) !== JSON.stringify(this.customization.font)

this.loadingButton = true
      this.customization.forms = JSON.parse(JSON.stringify({...this.forms}))

this.customization.fontUrl = JSON.stringify(this.fontUrl)

this.$http.post(`${this.$root.getAjaxUrl}/settings`, {customization: this.customization})
        .then(response => {
          this.loadingButton = false
          this.$root.settings.customization = response.data.data.customization
          this.notify(this.$root.labels.success, this.$root.labels.settings_saved, 'success')
        })
        .catch(e => {
          this.loadingButton = false
          this.notify(this.$root.labels.error, e.message, 'error')
        })
    },

resetSettings () {
      this.customization = JSON.parse(JSON.stringify({...this.defaultCustomization}))

this.forms = JSON.parse(JSON.stringify({...this.defaultFormsData}))

this.fontUrl = ''
    }
  },

computed: {
    needHelpPage () {
      return 'https://wpamelia.com/customize-design/'
    }
  }
}
</script>

Back