feat: adjust payment page (#31)

* feat: add installment no label

* feat: update types

* refactor: add i18n

* refactor: view receipt

* refactor: add type

* refactor: add dateFormatTh

* fixup! refactor: add i18n

* fixup! refactor: add dateFormatTh

* refactor: use dateFormatJS in monthDisplay

* refactor: handle year th-TH

* ลบ log

* refactor: handle color view mod

src/utils/datetime.ts

@@ -9,11 +9,52 @@ export function setLocale(locale: string) {
   moment.locale(locale);
 }
 
+export function dateFormatJS(opts: {
+  date: string | Date | null;
+  locale?: string;
+  dayStyle?: 'numeric' | '2-digit';
+  monthStyle?: 'numeric' | '2-digit' | 'long' | 'short';
+  timeStyle?: 'full' | 'long' | 'medium' | 'short';
+}) {
+  const dateObject = opts.date ? new Date(opts.date) : new Date();
+
+  const dateFormat = new Date(
+    Date.UTC(
+      dateObject.getUTCFullYear(),
+      dateObject.getUTCMonth(),
+      dateObject.getUTCDate(),
+      dateObject.getUTCHours(),
+      dateObject.getUTCMinutes(),
+      dateObject.getUTCSeconds(),
+    ),
+  );
+
+  let formattedDate = new Intl.DateTimeFormat(opts.locale || 'en-US', {
+    day: opts.dayStyle,
+    month: opts.monthStyle,
+    timeStyle: opts.timeStyle,
+    year: 'numeric',
+  }).format(dateFormat);
+
+  if (opts.locale === 'th-Th') {
+    formattedDate = formattedDate.replace(/(\d{4})/, (year) =>
+      (parseInt(year) - 543).toString(),
+    );
+  }
+
+  return formattedDate;
+}
+
+/**
+ * @deprecated Please use dateFormatJS.
+ */
+
 export function dateFormat(
   date?: string | Date | null,
   fullmonth = false,
   time = false,
   number = false,
+  days = false,
 ) {
   const m = moment(date);
 
@@ -27,7 +68,7 @@ export function dateFormat(
 
   const monthFormat = fullmonth ? 'MMMM' : 'MMM';
   const formattedDate = m.format(
-    `DD ${monthFormat} YYYY ${time ? ' HH:mm' : ''}`,
+    ` ${days ? '' : 'DD'}  ${monthFormat} YYYY ${time ? ' HH:mm' : ''}`,
   );
 
   return formattedDate;