2 files changed, 35 insertions, 0 deletions
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;
diff --git a/src/frontend/components/ProductPrice/index.ts b/src/frontend/components/ProductPrice/index.ts
new file mode 100644
index 0000000..7bbda4a
--- /dev/null
+++ b/src/frontend/components/ProductPrice/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './ProductPrice';