From c7b9e3f9f512b8842551aad9158be8b9be0b5935 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Mon, 13 Nov 2023 18:46:24 +0200
Subject: [PATCH 1/2] improving how currency is displayed

---
 app/components/shared/tag.tsx           |  2 +-
 app/routes/_layout+/assets.$assetId.tsx | 15 +++++++++++----
 app/utils/client-hints.tsx              | 18 ++++++++++++++----
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/components/shared/tag.tsx b/app/components/shared/tag.tsx
index 10095b1c9..5331ab12a 100644
--- a/app/components/shared/tag.tsx
+++ b/app/components/shared/tag.tsx
@@ -5,7 +5,7 @@ export const Tag = ({
   className,
   title,
 }: {
-  children: string;
+  children: string | JSX.Element;
   className?: string;
   title?: string;
 }) => (
diff --git a/app/routes/_layout+/assets.$assetId.tsx b/app/routes/_layout+/assets.$assetId.tsx
index 1d75b6155..52aff202a 100644
--- a/app/routes/_layout+/assets.$assetId.tsx
+++ b/app/routes/_layout+/assets.$assetId.tsx
@@ -42,7 +42,7 @@ import {
   userFriendlyAssetStatus,
 } from "~/utils";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
-import { getDateTimeFormat } from "~/utils/client-hints";
+import { getDateTimeFormat, getLocale } from "~/utils/client-hints";
 import { getCustomFieldDisplayValue } from "~/utils/custom-fields";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfStackError } from "~/utils/error";
@@ -53,7 +53,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const authSession = await requireAuthSession(request);
   const { organizationId } = await requireOrganisationId(authSession, request);
   const { userId } = authSession;
-
+  const locale = getLocale(request);
   const id = getRequiredParam(params, "assetId");
 
   const asset = await getAsset({ organizationId, id });
@@ -100,6 +100,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     },
     lastScan,
     header,
+    locale,
   });
 }
 export async function action({ request, params }: ActionFunctionArgs) {
@@ -144,7 +145,7 @@ export const links: LinksFunction = () => [
 ];
 
 export default function AssetDetailsPage() {
-  const { asset } = useLoaderData<typeof loader>();
+  const { asset, locale } = useLoaderData<typeof loader>();
   const customFieldsValues =
     asset?.customFields?.length > 0
       ? asset.customFields.filter((f) => f?.value)
@@ -301,7 +302,13 @@ export default function AssetDetailsPage() {
                   </span>
                   <div className="max-w-[250px]">
                     <Tag key={asset.valuation} className="mb-2 ml-2">
-                      {asset.organization.currency + " " + asset.valuation}
+                      <>
+                        {asset.organization.currency}{" "}
+                        {asset.valuation.toLocaleString(locale, {
+                          style: "currency",
+                          currency: asset.organization.currency,
+                        })}
+                      </>
                     </Tag>
                   </div>
                 </li>
diff --git a/app/utils/client-hints.tsx b/app/utils/client-hints.tsx
index 4356ab481..24a9b04b1 100644
--- a/app/utils/client-hints.tsx
+++ b/app/utils/client-hints.tsx
@@ -128,10 +128,7 @@ export function getDateTimeFormat(
   request: Request,
   options?: Intl.DateTimeFormatOptions
 ) {
-  const locales = parseAcceptLanguage(request.headers.get("accept-language"), {
-    validate: Intl.DateTimeFormat.supportedLocalesOf,
-  });
-  const locale = locales[0] ?? "en-US";
+  const locale = getLocale(request);
 
   // change your default options here
   const defaultOptions: Intl.DateTimeFormatOptions = {
@@ -147,3 +144,16 @@ export function getDateTimeFormat(
   };
   return new Intl.DateTimeFormat(locale, options);
 }
+
+/**
+ *
+ * @param request
+ * @returns current locale. Defaults to en-US
+ */
+export function getLocale(request: Request) {
+  const locales = parseAcceptLanguage(request.headers.get("accept-language"), {
+    validate: Intl.DateTimeFormat.supportedLocalesOf,
+  });
+
+  return locales[0] ?? "en-US";
+}

From bf32138cdf02d7ee09bdfa7727697940635f1f40 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Mon, 13 Nov 2023 18:47:03 +0200
Subject: [PATCH 2/2] mend

---
 app/styles/global.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/styles/global.css b/app/styles/global.css
index 10a199491..171e726fe 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -180,7 +180,6 @@ dialog {
   display: none;
 }
 
-
 /*removing arrows from valuation input field (type = "number")*/
 .valuation-input::-webkit-outer-spin-button,
 .valuation-input::-webkit-inner-spin-button {