feat: number to word

src/components/05_quotation/ProductItem.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
+import ThaiBahtText from 'thai-baht-text';
+import { toWords } from 'number-to-words';
 
-import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
 import { QuotationPayload } from 'src/stores/quotations/types';
 import { formatNumberDecimal } from 'stores/utils';
+import { QTableProps } from 'quasar';
 
 defineProps<{
   agentPrice: boolean;
@@ -122,6 +124,11 @@ const columns = [
   },
 ] satisfies QTableProps['columns'];
 
+const EngBahtText = (number: number) => {
+  const [baht, satang] = number.toString().split('.');
+  return `${toWords(baht)} Baht${satang && ` and ${toWords(satang)} Satang`}`;
+};
+
 watch(
   () => summary.value,
   () => {
@@ -244,7 +251,7 @@ watch(
     </div>
 
     <div
-      class="column q-ml-auto text-caption app-text-muted q-pt-md"
+      class="column q-ml-auto text-caption app-text-muted-2 q-pt-md"
       style="width: 15vw"
     >
       <div class="row">
@@ -273,6 +280,16 @@ watch(
         </span>
       </div>
     </div>
+    <span
+      v-if="summary.finalPrice"
+      class="text-caption app-text-muted-2 flex self-end"
+    >
+      ({{
+        $i18n.locale === 'eng'
+          ? EngBahtText(summary.finalPrice)
+          : ThaiBahtText(summary.finalPrice)
+      }})
+    </span>
   </div>
 </template>