FileMaster

Edit File: Footer.vue

<template>
  <div
    v-if="props.ready && !props.loading && !props.loadingUpcoming"
    class="am-elf__footer"
    :class="{'am-congrats' : isCongratzStep && props.secondButtonShow}"
  >
    <AmButton
      v-if="props.secondButtonShow"
      category="secondary"
      :type="props.secondaryFooterButtonType"
      size="medium"
      @click="secondButtonClick"
    >
      {{ displayLabels(secondaryBtnLabel) }}
    </AmButton>
    <div
      v-if="props.paymentGateway === 'payPal' && !isCongratzStep"
      :id="`am-paypal-element-${shortcodeData.counter}`"
    ></div>
    <AmButton
      v-if="props.paymentGateway !== 'payPal' || isCongratzStep"
      :class="[{mainBtnClass}, {'square-continue': props.paymentGateway === 'square'}]"
      :type="props.primaryFooterButtonType"
      :category="isWaitingList() ? 'waiting' : 'primary'"
      size="medium"
      :disabled="footerBtnDisabled"
      @click="footerButtonClick"
    >
      {{ displayLabels(primaryBtnLabel) }}
    </AmButton>
  </div>
  
  <div v-else class="am-elf__footer-skeleton">
    <el-skeleton animated>
      <template #template>
        <el-skeleton-item />
        <el-skeleton-item />
      </template>
    </el-skeleton>
  </div>
  
</template>

import {
  inject,
  ref,
  computed,
  // watch,
  watchEffect
} from 'vue'

let props = defineProps({
  ready: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  loadingUpcoming: {
    type: Boolean,
    default: false
  },
  customizedLabels: {
    type: Object,
    default: () => {
      return {}
    }
  },
  primaryFooterButtonType: {
    type: String,
    default: 'filled'
  },
  secondaryFooterButtonType: {
    type: String,
    default: 'plain'
  },
  waitingFooterButtonType: {
    type: String,
    default: 'filled',
  },
  paymentGateway: {
    type: String,
    default: ''
  },
  secondButtonShow: {
    type: Boolean,
    default: true
  },
  isWaitingList: {
    type: Boolean,
    default: false
  }
})

// * Step Functions
const { secondButtonClick } = inject('secondButton', {
  secondButtonClick: () => {},
})

const { footerButtonClick, footerBtnDisabled } = inject('changingStepsFunctions', {
  footerButtonClick: () => {},
  footerBtnDisabled: ref(false)
})

// flag for payPal button on congratz step
let isCongratzStep = ref(false)

const steps = inject('stepsArray')
const currentStep = inject('stepIndex')

let primaryBtnLabel = computed(() => {
  if (isWaitingList()) { // TODO - check from where to pass waitingList settings
    return 'join_waiting_list'
  }

if (steps.value[currentStep.value].name === 'EventInfo' || steps.value[currentStep.value].name === 'EventPayment') {
    return 'event_book_event'
  }

if (steps.value[currentStep.value].name === 'CongratulationsStep') return 'finish_appointment'

return 'continue'
})

let secondaryBtnLabel = computed(() => {
  if (steps.value[currentStep.value].name === 'CongratulationsStep') return 'congrats_panel'

return 'event_close'
})

let mainBtnClass = computed(() => {
  if (steps.value[currentStep.value].name === 'CongratulationsStep') return 'am-elf__footer-btn__finish'

return ''
})

watchEffect(() => {
  if (currentStep.value === steps.value.length - 1) {
    isCongratzStep.value = true
  }
})

const shortcodeData = inject('shortcodeData', ref({
  counter: 1000
}))

// * Labels
const amLabels = inject('labels')
function displayLabels (label) {
  return Object.keys(props.customizedLabels).length && props.customizedLabels[label] ? props.customizedLabels[label] : amLabels[label]
}

function isWaitingList () {
  return (steps.value[currentStep.value].name === 'EventInfo' || steps.value[currentStep.value].name === 'EventTickets') && props.isWaitingList
}
</script>

&.am-congrats {
        justify-content: space-between;
      }

.am-button {
        &--primary {
          &.is-disabled {
            cursor: not-allowed;
          }
        }
      }

&-btn {
        &__finish {
          margin-left: auto !important;
        }
      }

&-skeleton {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        box-shadow: 0 -2px 3px rgba(26, 44, 55, 0.15);

.el-skeleton {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          padding: 16px 24px;

&__item {
            width: 109px;
            height: 40px;

&:first-child {
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}

// Public
.amelia-v2-booking #amelia-container {
  @include main-content-footer;
}

// Admin
#amelia-app-backend-new {
  @include main-content-footer;
}
</style>

Back