Merge pull request #547 from Shelf-nu/currency-display-on-asset-page

Currency display on asset page
Shelf-nu · Nov 13, 2023 · 975c533 · 975c533
2 parents 0da1b65 + bf32138
commit 975c533
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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/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 {

diff --git 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";
+}