ShowEasyFrontEnd/FrontEnd/components/service/PaymentStatus.vue

<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>