From 4899ad5ff30f8f522196d4a7f9edf80ae9e705e1 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 19 Jun 2024 17:25:29 +0300
Subject: [PATCH] making sure that values of date custom fields are properly
 formatted base on clientHints

---
 app/routes/_layout+/assets.$assetId.overview.tsx | 11 ++++++-----
 app/utils/custom-fields.ts                       |  9 +++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/routes/_layout+/assets.$assetId.overview.tsx b/app/routes/_layout+/assets.$assetId.overview.tsx
index 56349b5d1..33abf37dc 100644
--- a/app/routes/_layout+/assets.$assetId.overview.tsx
+++ b/app/routes/_layout+/assets.$assetId.overview.tsx
@@ -38,7 +38,7 @@ import { getScanByQrId } from "~/modules/scan/service.server";
 import { parseScanData } from "~/modules/scan/utils.server";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { checkExhaustiveSwitch } from "~/utils/check-exhaustive-switch";
-import { getDateTimeFormat, getLocale } from "~/utils/client-hints";
+import { getClientHint, getDateTimeFormat } from "~/utils/client-hints";
 import { getCustomFieldDisplayValue } from "~/utils/custom-fields";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError } from "~/utils/error";
@@ -75,7 +75,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
       action: PermissionAction.read,
     });
 
-    const locale = getLocale(request);
+    const { locale, timeZone } = getClientHint(request);
 
     const asset = await getAsset({
       id,
@@ -172,6 +172,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
         lastScan,
         header,
         locale,
+        timeZone,
         qrObj,
       })
     );
@@ -229,8 +230,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
 }
 
 export default function AssetOverview() {
-  const { asset, locale, qrObj } = useLoaderData<typeof loader>();
-
+  const { asset, locale, timeZone, qrObj } = useLoaderData<typeof loader>();
   const booking = asset?.bookings?.length ? asset?.bookings[0] : undefined;
 
   const customFieldsValues =
@@ -358,7 +358,8 @@ export default function AssetOverview() {
                 <ul className="item-information">
                   {customFieldsValues.map((field, _index) => {
                     const customFieldDisplayValue = getCustomFieldDisplayValue(
-                      field.value as unknown as ShelfAssetCustomFieldValueType["value"]
+                      field.value as unknown as ShelfAssetCustomFieldValueType["value"],
+                      { locale, timeZone }
                     );
                     return (
                       <li
diff --git a/app/utils/custom-fields.ts b/app/utils/custom-fields.ts
index 79874491f..2666976d1 100644
--- a/app/utils/custom-fields.ts
+++ b/app/utils/custom-fields.ts
@@ -3,6 +3,8 @@ import { format } from "date-fns";
 import type { ZodRawShape } from "zod";
 import { z } from "zod";
 import type { ShelfAssetCustomFieldValueType } from "~/modules/asset/types";
+import type { ClientHint } from "~/modules/booking/types";
+import { getDateTimeFormatFromHints } from "./client-hints";
 
 /** Returns the schema depending on the field type.
  * Also handles the required field error message.
@@ -164,10 +166,13 @@ export const buildCustomFieldValue = (
 };
 
 export const getCustomFieldDisplayValue = (
-  value: ShelfAssetCustomFieldValueType["value"]
+  value: ShelfAssetCustomFieldValueType["value"],
+  hints?: ClientHint
 ): string => {
   if (value.valueDate) {
-    return format(new Date(value.valueDate), "PPP");
+    return hints
+      ? getDateTimeFormatFromHints(hints).format(new Date(value.valueDate))
+      : format(new Date(value.valueDate), "PPP"); // Fallback to default date format
   }
   return String(value.raw);
 };