ShowEasyFrontEnd/FrontEnd/components/service/DoneTotalPrice.vue

<template>
  <div class="done-total-price tw-grid tw-grid-col-1 tw-gap-y-[30px] xl:tw-mt-[60px]">
    <div class="tw-p-5 tw-bg-white tw-rounded-xl xl:tw-p-[30px]">
      <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")}}
          <!-- <span class="tw-text-neutrals-400 tw-font-medium tw-ml-[4px]">{{
            $t("(Tax included)")
          }}</span> -->
        </div>
        <div class="content tw-body-4 tw-text-black tw-font-bold">
          ${{ subTotal.toLocaleString() }} {{ orderStatus.currency }}
        </div>
      </div>
      <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("Taxes")}}
          <!-- <span class="tw-text-neutrals-400 tw-font-medium tw-ml-[4px]">{{
            $t("(Tax included)")
          }}</span> -->
        </div>
        <div class="content tw-body-4 tw-text-black tw-font-bold">
          ${{ taxes }} {{ orderStatus.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.toLocaleString() }} {{ orderStatus.currency }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TotalPrice",
  props: {
    subTotal: {
      type: Number,
    },
    total: {
      type: Number,
    },
    orderStatus: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    // total() {
    //   return parseFloat(this.total).toLocaleString();
    // },
    taxes() {
      return (Math.ceil(this.subTotal*0.05)).toLocaleString();
    },
  },
};
</script>
<style lang="scss" scoped>

</style>