Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/lib/constants.ts

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

@@ -29,6 +29,7 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
       boolean: true,
       booleanError: 'true',
       time: new Date(),
+      user: `user${Math.round(Math.random() * 10)}`,
       number: 1,
       number2: Math.random() * 100,
       time2: new Date().toISOString(),

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -7,6 +7,7 @@ import InsightsReport from '../insights/InsightsReport';
 import JourneyReport from '../journey/JourneyReport';
 import RetentionReport from '../retention/RetentionReport';
 import UTMReport from '../utm/UTMReport';
+import RevenueReport from '../revenue/RevenueReport';
 
 const reports = {
   funnel: FunnelReport,
@@ -16,6 +17,7 @@ const reports = {
   utm: UTMReport,
   goals: GoalReport,
   journey: JourneyReport,
+  revenue: RevenueReport,
 };
 
 export default function ReportPage({ reportId }: { reportId: string }) {

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -51,6 +51,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/journey'),
       icon: <Path />,
     },
+    {
+      title: formatMessage(labels.revenue),
+      description: formatMessage(labels.revenueDescription),
+      url: renderTeamUrl('/reports/revenue'),
+      icon: <Path />,
+    },
   ];
 
   return (

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

@@ -0,0 +1,98 @@
+import BarChart, { BarChartProps } from 'components/charts/BarChart';
+import { useLocale, useMessages } from 'components/hooks';
+import MetricCard from 'components/metrics/MetricCard';
+import MetricsBar from 'components/metrics/MetricsBar';
+import { renderDateLabels } from 'lib/charts';
+import { formatLongNumber } from 'lib/format';
+import { useContext, useMemo } from 'react';
+import { ReportContext } from '../[reportId]/Report';
+
+export interface PageviewsChartProps extends BarChartProps {
+  isLoading?: boolean;
+}
+
+export function RevenueChart({ isLoading, ...props }: PageviewsChartProps) {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const { report } = useContext(ReportContext);
+  const { data, parameters } = report || {};
+
+  const chartData = useMemo(() => {
+    if (!data) {
+      return {};
+    }
+
+    return {
+      datasets: [
+        {
+          label: formatMessage(labels.average),
+          data: data?.chart.map(a => ({ x: a.time, y: a.avg })),
+          borderWidth: 2,
+          backgroundColor: '#8601B0',
+          borderColor: '#8601B0',
+          order: 1,
+        },
+        {
+          label: formatMessage(labels.total),
+          data: data?.chart.map(a => ({ x: a.time, y: a.sum })),
+          borderWidth: 2,
+          backgroundColor: '#f15bb5',
+          borderColor: '#f15bb5',
+          order: 2,
+        },
+      ],
+    };
+  }, [data, locale]);
+
+  const metricData = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    const { sum, avg, count, uniqueCount } = data.total;
+
+    return [
+      {
+        value: sum,
+        label: formatMessage(labels.total),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: avg,
+        label: formatMessage(labels.average),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: count,
+        label: formatMessage(labels.transactions),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: uniqueCount,
+        label: formatMessage(labels.uniqueCustomers),
+        formatValue: formatLongNumber,
+      },
+    ] as any;
+  }, [data, locale]);
+
+  return (
+    <>
+      <MetricsBar isFetched={data}>
+        {metricData?.map(({ label, value, formatValue }) => {
+          return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+        })}
+      </MetricsBar>
+      {data && (
+        <BarChart
+          {...props}
+          data={chartData}
+          unit={parameters?.dateRange.unit}
+          isLoading={isLoading}
+          renderXLabel={renderDateLabels(parameters?.dateRange.unit, locale)}
+        />
+      )}
+    </>
+  );
+}
+
+export default RevenueChart;

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

@@ -0,0 +1,51 @@
+import { useMessages } from 'components/hooks';
+import { useContext } from 'react';
+import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
+import BaseParameters from '../[reportId]/BaseParameters';
+import { ReportContext } from '../[reportId]/Report';
+
+export function RevenueParameters() {
+  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  const { id, parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const queryDisabled = !websiteId || !dateRange;
+
+  const handleSubmit = (data: any, e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  return (
+    <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
+      <FormRow label={formatMessage(labels.event)}>
+        <FormInput name="eventName" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.revenueProperty)}>
+        <FormInput name="revenueProperty" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.userProperty)}>
+        <FormInput name="userProperty">
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default RevenueParameters;

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

@@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}

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

@@ -0,0 +1,27 @@
+import RevenueChart from './RevenueChart';
+import RevenueParameters from './RevenueParameters';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+import ReportBody from '../[reportId]/ReportBody';
+import Target from 'assets/target.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.revenue,
+  parameters: { Revenue: [] },
+};
+
+export default function RevenueReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Target />} />
+      <ReportMenu>
+        <RevenueParameters />
+      </ReportMenu>
+      <ReportBody>
+        <RevenueChart />
+      </ReportBody>
+    </Report>
+  );
+}

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

@@ -0,0 +1,6 @@
+'use client';
+import RevenueReport from './RevenueReport';
+
+export default function RevenueReportPage() {
+  return <RevenueReport />;
+}

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

@@ -0,0 +1,10 @@
+import RevenueReportPage from './RevenueReportPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <RevenueReportPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Revenue Report',
+};

src/components/hooks/queries/useReport.ts

@@ -6,7 +6,7 @@ import { useMessages } from '../useMessages';
 
 export function useReport(
   reportId: string,
-  defaultParameters: { type: string; parameters: { [key: string]: any } },
+  defaultParameters?: { type: string; parameters: { [key: string]: any } },
 ) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);

src/components/hooks/useFilterParams.ts

@@ -8,7 +8,7 @@ export function useFilterParams(websiteId: string) {
   const { startDate, endDate, unit } = dateRange;
   const { timezone } = useTimezone();
   const {
-    query: { url, referrer, title, query, os, browser, device, country, region, city, event },
+    query: { url, referrer, title, query, host, os, browser, device, country, region, city, event },
   } = useNavigation();
 
   return {
@@ -20,6 +20,7 @@ export function useFilterParams(websiteId: string) {
     referrer,
     title,
     query,
+    host,
     os,
     browser,
     device,

src/components/messages.ts

@@ -114,6 +114,8 @@ export const labels = defineMessages({
   none: { id: 'label.none', defaultMessage: 'None' },
   clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
   property: { id: 'label.property', defaultMessage: 'Property' },
+  revenueProperty: { id: 'label.revenue-property', defaultMessage: 'Revenue Property' },
+  userProperty: { id: 'label.user-property', defaultMessage: 'User Property' },
   today: { id: 'label.today', defaultMessage: 'Today' },
   lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
@@ -155,6 +157,11 @@ export const labels = defineMessages({
     id: 'label.funnel-description',
     defaultMessage: 'Understand the conversion and drop-off rate of users.',
   },
+  revenue: { id: 'label.revenue', defaultMessage: 'Revenue' },
+  revenueDescription: {
+    id: 'label.revenue-description',
+    defaultMessage: 'Look into your revenue across time.',
+  },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   add: { id: 'label.add', defaultMessage: 'Add' },
@@ -222,6 +229,8 @@ export const labels = defineMessages({
   select: { id: 'label.select', defaultMessage: 'Select' },
   myAccount: { id: 'label.my-account', defaultMessage: 'My account' },
   transfer: { id: 'label.transfer', defaultMessage: 'Transfer' },
+  transactions: { id: 'label.transactions', defaultMessage: 'Transactions' },
+  uniqueCustomers: { id: 'label.uniqueCustomers', defaultMessage: 'Unique Customers' },
   viewedPage: {
     id: 'message.viewed-page',
     defaultMessage: 'Viewed page',

src/lib/clickhouse.ts

@@ -119,7 +119,10 @@ async function parseFilters(websiteId: string, filters: QueryFilters = {}, optio
   };
 }
 
-async function rawQuery(query: string, params: Record<string, unknown> = {}): Promise<unknown> {
+async function rawQuery<T = unknown>(
+  query: string,
+  params: Record<string, unknown> = {},
+): Promise<T> {
   if (process.env.LOG_QUERY) {
     log('QUERY:\n', query);
     log('PARAMETERS:\n', params);

src/lib/constants.ts

@@ -131,6 +131,7 @@ export const REPORT_TYPES = {
   retention: 'retention',
   utm: 'utm',
   journey: 'journey',
+  revenue: 'revenue',
 } as const;
 
 export const REPORT_PARAMETERS = {

src/lib/types.ts

@@ -181,6 +181,7 @@ export interface QueryFilters {
   referrer?: string;
   title?: string;
   query?: string;
+  host?: string;
   os?: string;
   browser?: string;
   device?: string;

src/pages/api/reports/[reportId].ts

@@ -27,7 +27,7 @@ const schema: YupRequest = {
     websiteId: yup.string().uuid().required(),
     type: yup
       .string()
-      .matches(/funnel|insights|retention|utm|goals|journey/i)
+      .matches(/funnel|insights|retention|utm|goals|journey|revenue/i)
       .required(),
     name: yup.string().max(200).required(),
     description: yup.string().max(500),

src/pages/api/reports/index.ts

@@ -27,7 +27,7 @@ const schema = {
     name: yup.string().max(200).required(),
     type: yup
       .string()
-      .matches(/funnel|insights|retention|utm|goals|journey/i)
+      .matches(/funnel|insights|retention|utm|goals|journey|revenue/i)
       .required(),
     description: yup.string().max(500),
     parameters: yup