From 82e03978b89938219958032efb1448cc76baa181 Mon Sep 17 00:00:00 2001
From: Saumit <justsaumit@protonmail.com>
Date: Sat, 27 Sep 2025 02:14:26 +0530
Subject: Initial snapshot - OpenTelemetry demo 2.1.3 -f

---
 .../components/ProductPrice/ProductPrice.tsx       | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/frontend/components/ProductPrice/ProductPrice.tsx

(limited to 'src/frontend/components/ProductPrice/ProductPrice.tsx')

diff --git a/src/frontend/components/ProductPrice/ProductPrice.tsx b/src/frontend/components/ProductPrice/ProductPrice.tsx
new file mode 100644
index 0000000..8dc352a
--- /dev/null
+++ b/src/frontend/components/ProductPrice/ProductPrice.tsx
@@ -0,0 +1,31 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+import getSymbolFromCurrency from 'currency-symbol-map';
+import { Money } from '../../protos/demo';
+import { useCurrency } from '../../providers/Currency.provider';
+import { CypressFields } from '../../utils/enums/CypressFields';
+
+interface IProps {
+  price: Money;
+}
+
+const ProductPrice = ({ price: { units, currencyCode, nanos } }: IProps) => {
+  const { selectedCurrency } = useCurrency();
+
+  const currencySymbol = useMemo(
+    () => getSymbolFromCurrency(currencyCode) || selectedCurrency,
+    [currencyCode, selectedCurrency]
+  );
+
+  const total = units + nanos / 1000000000;
+
+  return (
+    <span data-cy={CypressFields.ProductPrice}>
+      {currencySymbol} {total.toFixed(2)}
+    </span>
+  );
+};
+
+export default ProductPrice;
-- 
cgit v1.2.3

