ShowEasyFrontEnd/FrontEnd/components/service/TotalPrice.vue

<template>
  <div class="total-info tw-p-5 tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl">
    <div class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-mb-[12px]">
      <div class="label tw-body-4 tw-text-black tw-font-bold">
        {{ $t("Subtotal") }}
      </div>
      <div class="content tw-body-4 tw-text-black tw-font-bold">
        ${{ subTotal.toLocaleString() + currency }}
      </div>
    </div>
    <div
      class="element total tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-pt-[12px] tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200">
      <div class="label tw-body-2 tw-text-black tw-font-bold">
        {{ $t("Total Amount") }}
      </div>
      <div class="content tw-body-2 tw-text-primary-1 tw-font-bold">
        ${{ total + currency }}
      </div>
    </div>
    <div class="element tw-flex tw-justify-center tw-items-center tw-mt-[30px] xl:tw-hidden xl:tw-mt-0">
      <button
        class="btnPay tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2"
        @click="payNow">
        {{ $t("Pay now") }}
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: "TotalPrice",
  props: {
    subTotal: {
      type: Number,
    },
    currency: {
      type: String,
    }
  },
  data() {
    return {};
  },
  computed: {
    total() {
      return (parseInt(this.subTotal)).toLocaleString();
    },
  },
  methods: {
    payNow() {
      this.$emit('payNowClick');
    },
  },
};
</script>
<style lang="scss" scoped>

</style>