chore: move price formatting to lib function

packages/app-store/alby/components/AlbyPriceComponent.tsx

@@ -7,10 +7,11 @@ import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
 type AlbyPriceComponentProps = {
   displaySymbol: boolean;
   price: number;
+  formattedPrice: string;
 };
 
-export function AlbyPriceComponent({ displaySymbol, price }: AlbyPriceComponentProps) {
-  const [fiatValue, setFiatValue] = React.useState<string>("loading");
+export function AlbyPriceComponent({ displaySymbol, price, formattedPrice }: AlbyPriceComponentProps) {
+  const [fiatValue, setFiatValue] = React.useState<string>("loading...");
   React.useEffect(() => {
     (async () => {
       const unformattedFiatValue = await fiat.getFiatValue({ satoshi: price, currency: "USD" });
@@ -22,7 +23,7 @@ export function AlbyPriceComponent({ displaySymbol, price }: AlbyPriceComponentP
     <Tooltip content={fiatValue}>
       <div className="inline-flex items-center justify-center">
         {displaySymbol && <SatSymbol className="h-4 w-4" />}
-        {price}&nbsp;sats
+        {formattedPrice}
       </div>
     </Tooltip>
   );

packages/emails/src/templates/BaseScheduledEmail.tsx

@@ -1,6 +1,7 @@
 import type { TFunction } from "next-i18next";
 
 import dayjs from "@calcom/dayjs";
+import { formatPrice } from "@calcom/lib/price";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 
@@ -86,18 +87,13 @@ export const BaseScheduledEmail = (
       {props.includeAppsStatus && <AppsStatus calEvent={props.calEvent} t={t} />}
       <UserFieldsResponses calEvent={props.calEvent} />
       {props.calEvent.paymentInfo?.amount && (
-        // TODO: extract currency handling
-        // see packages/features/bookings/components/event-meta/Price.tsx
         <Info
           label={props.calEvent.paymentInfo.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
-          description={
-            props.calEvent.paymentInfo.currency !== "BTC"
-              ? new Intl.NumberFormat(props.attendee.language.locale, {
-                  style: "currency",
-                  currency: props.calEvent.paymentInfo.currency || "USD",
-                }).format(props.calEvent.paymentInfo.amount / 100.0)
-              : `${props.calEvent.paymentInfo.amount} sats`
-          }
+          description={formatPrice(
+            props.calEvent.paymentInfo.amount,
+            props.calEvent.paymentInfo.currency,
+            props.attendee.language.locale
+          )}
           withSpacer
         />
       )}

packages/features/bookings/components/event-meta/Price.tsx

@@ -1,9 +1,9 @@
 import dynamic from "next/dynamic";
 
+import { formatPrice } from "@calcom/lib/price";
+
 import type { EventPrice } from "../../types";
 
-// TODO: importing dynamically like this makes it difficult
-// to extract currency formatting (currently duplicated in BaseScheduledEmail.tsx)
 const AlbyPriceComponent = dynamic(
   () => import("@calcom/app-store/alby/components/AlbyPriceComponent").then((m) => m.AlbyPriceComponent),
   {
@@ -14,16 +14,15 @@ const AlbyPriceComponent = dynamic(
 export const Price = ({ price, currency, displayAlternateSymbol = true }: EventPrice) => {
   if (price === 0) return null;
 
-  return (
-    <>
-      {currency !== "BTC" ? (
-        Intl.NumberFormat("en", {
-          style: "currency",
-          currency: currency.toUpperCase(),
-        }).format(price / 100.0)
-      ) : (
-        <AlbyPriceComponent displaySymbol={displayAlternateSymbol} price={price} />
-      )}
-    </>
+  const formattedPrice = formatPrice(price, currency);
+
+  return currency !== "BTC" ? (
+    formattedPrice
+  ) : (
+    <AlbyPriceComponent
+      displaySymbol={displayAlternateSymbol}
+      price={price}
+      formattedPrice={formattedPrice}
+    />
   );
 };

packages/lib/price.ts

@@ -0,0 +1,11 @@
+export const formatPrice = (price: number, currency: string | undefined, locale = "en") => {
+  switch (currency) {
+    case "BTC":
+      return `${price} sats`;
+    default:
+      return Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency?.toUpperCase() || "USD",
+      }).format(price / 100.0);
+  }
+};