add dropdown logic for revenue report, defaults to USD for unknown currency code

src/app/(main)/console/TestConsole.tsx

@@ -56,11 +56,11 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
     }));
     window['umami'].track('checkout-cart', {
       revenue: parseFloat((Math.random() * 100000).toFixed(2)),
-      currency: 'USD',
+      currency: 'SHIBA',
     });
     window['umami'].track('affiliate-link', {
       revenue: parseFloat((Math.random() * 100000).toFixed(2)),
-      currency: 'USD',
+      currency: 'ETH',
     });
     window['umami'].track('promotion-link', {
       revenue: parseFloat((Math.random() * 100000).toFixed(2)),

src/app/(main)/reports/revenue/RevenueParameters.tsx

@@ -1,4 +1,5 @@
 import { useMessages } from 'components/hooks';
+import useRevenueValues from 'components/hooks/queries/useRevenueValues';
 import { useContext } from 'react';
 import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
@@ -10,6 +11,7 @@ export function RevenueParameters() {
   const { id, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
   const queryEnabled = websiteId && dateRange;
+  const { data: values = [] } = useRevenueValues(websiteId, dateRange.startDate, dateRange.endDate);
 
   const handleSubmit = (data: any, e: any) => {
     e.stopPropagation();
@@ -23,7 +25,7 @@ export function RevenueParameters() {
       <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
       <FormRow label={formatMessage(labels.currency)}>
         <FormInput name="currency" rules={{ required: formatMessage(labels.required) }}>
-          <Dropdown items={['USD', 'EUR', 'MXN']}>
+          <Dropdown items={values.map(item => item.currency)}>
             {item => <Item key={item}>{item}</Item>}
           </Dropdown>
         </FormInput>

src/app/(main)/reports/revenue/RevenueView.module.css

@@ -3,3 +3,9 @@
   gap: 20px;
   margin-bottom: 40px;
 }
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}

src/app/(main)/reports/revenue/RevenueView.tsx

@@ -1,7 +1,9 @@
+import classNames from 'classnames';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
 import PieChart from 'components/charts/PieChart';
-import { useLocale, useMessages } from 'components/hooks';
+import TypeIcon from 'components/common/TypeIcon';
+import { useCountryNames, useLocale, useMessages } from 'components/hooks';
 import { GridRow } from 'components/layout/Grid';
 import ListTable from 'components/metrics/ListTable';
 import MetricCard from 'components/metrics/MetricCard';
@@ -9,7 +11,7 @@ import MetricsBar from 'components/metrics/MetricsBar';
 import { renderDateLabels } from 'lib/charts';
 import { CHART_COLORS } from 'lib/constants';
 import { formatLongCurrency, formatLongNumber } from 'lib/format';
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { ReportContext } from '../[reportId]/Report';
 import RevenueTable from './RevenueTable';
 import styles from './RevenueView.module.css';
@@ -21,6 +23,7 @@ export interface RevenueViewProps {
 export function RevenueView({ isLoading }: RevenueViewProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
+  const { countryNames } = useCountryNames(locale);
   const { report } = useContext(ReportContext);
   const {
     data,
@@ -28,6 +31,16 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
   } = report || {};
   const showTable = data?.table.length > 1;
 
+  const renderCountryName = useCallback(
+    ({ x: code }) => (
+      <span className={classNames(locale, styles.row)}>
+        <TypeIcon type="country" value={code?.toLowerCase()} />
+        {countryNames[code]}
+      </span>
+    ),
+    [countryNames, locale],
+  );
+
   const chartData = useMemo(() => {
     if (!data) return [];
 
@@ -119,7 +132,7 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
           isLoading={isLoading}
         />
         {data && (
-          <GridRow columns="one-two">
+          <GridRow columns="two">
             <ListTable
               metric={formatMessage(labels.country)}
               data={data?.country.map(({ name, value }) => ({
@@ -127,6 +140,7 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
                 y: value,
                 z: (value / data?.total.sum) * 100,
               }))}
+              renderLabel={renderCountryName}
             />
             <PieChart type="doughnut" data={countryData} />
           </GridRow>