ShowEasyFrontEnd/FrontEnd/components/service/PaymentStatusOther.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]',
        'tw-bg-neutrals-0',
        'tw-rounded-[48px]',
        status,
      ]"
    ></div>
    <h2 class="info-title t24 tw-text-black tw-mb-[4px]">
      <span v-if="status == 'success'">{{ $t("Order completed!") }}</span>
      <span v-else>{{ $t("Subscription failed!") }}</span>
    </h2>
    <div class="info-description">
      <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>