FileMaster

Edit File: PaymentOnSite.vue

let props = defineProps({
  instantBooking: {
    type: Boolean,
    default: false
  },
  showRecaptcha: {
    type: Boolean,
    default: true
  }
})

const store = useStore()

const emits = defineEmits(['payment-error'])

const amLabels = inject('labels')

const shortcodeData = inject('shortcodeData')

/**************
 * Navigation *
 *************/

const { nextStep, footerButtonReset, footerButtonClicked } = inject('changingStepsFunctions', {
  nextStep: () => {},
  footerButtonReset: () => {},
  footerButtonClicked: {
    value: false
  }
})

defineExpose({
  continueWithBooking
})

watchEffect(() => {
  if (footerButtonClicked.value && !props.instantBooking) {
    if (!store.getters['booking/getCouponValidated']) {
      footerButtonReset()
      emits('payment-error', amLabels.coupon_mandatory)
    } else {
      continueWithBooking()
    }
  }
})

/*************
 * Recaptcha *
 ************/

let recaptchaRef = ref(null)

let recaptchaValid = ref(false)

let recaptchaResponse = ref(null)

function onRecaptchaExpired () {
  recaptchaValid.value = false

emits('payment-error', amLabels.recaptcha_error)
}

function onRecaptchaVerify (response) {
  recaptchaValid.value = true

recaptchaResponse.value = response

if (settings.general.googleRecaptcha.invisible) {
    onSiteBooking(
      useBookingData(
        store,
        null,
        false,
        {},
        recaptchaResponse.value
      )
    )

return false
  }
}

/***********
 * Payment *
 **********/

function onSiteBooking (bookingData) {
  if (settings.general.googleRecaptcha.enabled && props.showRecaptcha && !settings.general.googleRecaptcha.invisible && !recaptchaValid.value) {
    emits('payment-error', amLabels.recaptcha_error)

return false
  }

useCreateBooking(
    store,
    bookingData,
    response => {
      useCreateBookingSuccess(store, response, () => {
        nextStep()
      })
    },
    error => {
      console.log(error)

useCreateBookingError(
        store,
        error.response.data,
        () => {
          if (settings.general.googleRecaptcha.enabled && props.showRecaptcha && settings.general.googleRecaptcha.invisible) {
            recaptchaRef.value.reset()
          }

emits('payment-error', getErrorMessage())
        }
      )
    }
  )
}

function continueWithBooking () {
  footerButtonReset()

let bookingData = useBookingData(
    store,
    null,
    false,
    {},
    recaptchaResponse.value
  )

store.commit('booking/setLoading', true)

if (settings.general.googleRecaptcha.enabled && props.showRecaptcha) {
    if (settings.general.googleRecaptcha.invisible) {
      recaptchaRef.value.execute()
    } else if (!recaptchaValid.value) {
      emits('payment-error', amLabels.recaptcha_error)

store.commit('booking/setLoading', false)
    } else {
      onSiteBooking(bookingData)
    }
  } else {
    onSiteBooking(bookingData)
  }
}
</script>

& > div > div {
          position: absolute !important;
        }
      }
      &-btn {
      }
    }
  }
}
</style>

Back