You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
<template>
|
|
<div class="payment-status tw-mb-[15px] tw-flex tw-flex-col tw-items-center">
|
|
<div
|
|
:class="[
|
|
'status-icon',
|
|
'tw-w-[48px]',
|
|
'tw-h-[48px]',
|
|
'tw-mb-[20px]',
|
|
status,
|
|
]"
|
|
></div>
|
|
<h2 class="info-title t24 tw-text-black tw-mb-[4px]">
|
|
<span v-if="status == 'success'">{{ $t("Payment Success!") }}</span>
|
|
<span v-else>{{ $t("Payment Failed!") }}</span>
|
|
</h2>
|
|
<div class="info-description">
|
|
<div v-if="status == 'success'" class="t16">
|
|
{{ $t("Thanks for your booking!") }}
|
|
</div>
|
|
<div v-else class="t14 tw-text-error-default tw-text-center">
|
|
{{
|
|
$t("Unable to authorize payment. Pleaser try another credit card.")
|
|
}}
|
|
</div>
|
|
<div v-if="errorMessage" class="t14 tw-text-error-default">
|
|
{{ errorMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
status: {
|
|
type: String,
|
|
},
|
|
errorMessage: {
|
|
type: String,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.status-icon {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
&.success {
|
|
background-color: transparent !important;
|
|
background-image: url("~/assets/svg/payment-status-check.svg");
|
|
}
|
|
&.failed {
|
|
background-color: transparent !important;
|
|
background-image: url("~/assets/svg/payment-status-failed.svg");
|
|
}
|
|
}
|
|
</style>
|