Merge branch 'feat/attribution-report' into dev

src/app/(main)/reports/attribution/AttributionParameters.module.css

@@ -0,0 +1,12 @@
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.value {
+  display: flex;
+  align-self: center;
+  gap: 20px;
+}

src/app/(main)/reports/attribution/AttributionParameters.tsx

@@ -0,0 +1,188 @@
+import { useMessages } from '@/components/hooks';
+import Icons from '@/components/icons';
+import { useContext, useState } from 'react';
+import {
+  Button,
+  Dropdown,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  Icon,
+  Item,
+  Popup,
+  PopupTrigger,
+  SubmitButton,
+  Toggle,
+} from 'react-basics';
+import BaseParameters from '../[reportId]/BaseParameters';
+import ParameterList from '../[reportId]/ParameterList';
+import PopupForm from '../[reportId]/PopupForm';
+import { ReportContext } from '../[reportId]/Report';
+import FunnelStepAddForm from '../funnel/FunnelStepAddForm';
+import styles from './AttributionParameters.module.css';
+import AttributionStepAddForm from './AttributionStepAddForm';
+import useRevenueValues from '@/components/hooks/queries/useRevenueValues';
+
+export function AttributionParameters() {
+  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { id, parameters } = report || {};
+  const { websiteId, dateRange, steps } = parameters || {};
+  const queryEnabled = websiteId && dateRange && steps.length > 0;
+  const [model, setModel] = useState('');
+  const [revenueMode, setRevenueMode] = useState(false);
+
+  const { data: currencyValues = [] } = useRevenueValues(
+    websiteId,
+    dateRange?.startDate,
+    dateRange?.endDate,
+  );
+
+  const handleSubmit = (data: any, e: any) => {
+    if (revenueMode === false) {
+      delete data.currency;
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+    runReport(data);
+  };
+
+  const handleCheck = () => {
+    setRevenueMode(!revenueMode);
+  };
+
+  const handleAddStep = (step: { type: string; value: string }) => {
+    if (step.type === 'url') {
+      setRevenueMode(false);
+    }
+    updateReport({ parameters: { steps: parameters.steps.concat(step) } });
+  };
+
+  const handleUpdateStep = (
+    close: () => void,
+    index: number,
+    step: { type: string; value: string },
+  ) => {
+    if (step.type === 'url') {
+      setRevenueMode(false);
+    }
+    const steps = [...parameters.steps];
+    steps[index] = step;
+    updateReport({ parameters: { steps } });
+    close();
+  };
+
+  const handleRemoveStep = (index: number) => {
+    const steps = [...parameters.steps];
+    delete steps[index];
+    updateReport({ parameters: { steps: steps.filter(n => n) } });
+  };
+
+  const AddStepButton = () => {
+    return (
+      <PopupTrigger disabled={steps.length > 0}>
+        <Button disabled={steps.length > 0}>
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup alignment="start">
+          <PopupForm>
+            <FunnelStepAddForm onChange={handleAddStep} />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  const items = [
+    { label: 'First-Click', value: 'firstClick' },
+    { label: 'Last-Click', value: 'lastClick' },
+  ];
+
+  const renderModelValue = (value: any) => {
+    return items.find(item => item.value === value)?.label;
+  };
+
+  const onModelChange = (value: any) => {
+    setModel(value);
+    updateReport({ parameters: { model } });
+  };
+
+  return (
+    <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
+      <FormRow label={formatMessage(labels.model)}>
+        <FormInput name="model" rules={{ required: formatMessage(labels.required) }}>
+          <Dropdown
+            items={items}
+            value={model}
+            renderValue={renderModelValue}
+            onChange={onModelChange}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.conversionStep)} action={<AddStepButton />}>
+        <ParameterList>
+          {steps.map((step: { type: string; value: string }, index: number) => {
+            return (
+              <PopupTrigger key={index}>
+                <ParameterList.Item
+                  className={styles.item}
+                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  onRemove={() => handleRemoveStep(index)}
+                >
+                  <div className={styles.value}>
+                    <div>{step.value}</div>
+                  </div>
+                </ParameterList.Item>
+                <Popup alignment="start">
+                  {(close: () => void) => (
+                    <PopupForm>
+                      <AttributionStepAddForm
+                        type={step.type}
+                        value={step.value}
+                        onChange={handleUpdateStep.bind(null, close, index)}
+                      />
+                    </PopupForm>
+                  )}
+                </Popup>
+              </PopupTrigger>
+            );
+          })}
+        </ParameterList>
+      </FormRow>
+      <FormRow>
+        <Toggle
+          checked={revenueMode}
+          onChecked={handleCheck}
+          disabled={currencyValues.length === 0 || steps[0]?.type === 'url'}
+        >
+          <b>Revenue Mode</b>
+        </Toggle>
+      </FormRow>
+      {revenueMode && (
+        <FormRow label={formatMessage(labels.currency)}>
+          <FormInput name="currency" rules={{ required: formatMessage(labels.required) }}>
+            <Dropdown items={currencyValues.map(item => item.currency)}>
+              {item => <Item key={item}>{item}</Item>}
+            </Dropdown>
+          </FormInput>
+        </FormRow>
+      )}
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default AttributionParameters;

src/app/(main)/reports/attribution/AttributionReport.tsx

@@ -0,0 +1,27 @@
+import Money from '@/assets/money.svg';
+import { REPORT_TYPES } from '@/lib/constants';
+import Report from '../[reportId]/Report';
+import ReportBody from '../[reportId]/ReportBody';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+import AttributionParameters from './AttributionParameters';
+import AttributionView from './AttributionView';
+
+const defaultParameters = {
+  type: REPORT_TYPES.attribution,
+  parameters: { model: 'firstClick', steps: [] },
+};
+
+export default function AttributionReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Money />} />
+      <ReportMenu>
+        <AttributionParameters />
+      </ReportMenu>
+      <ReportBody>
+        <AttributionView />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/attribution/AttributionReportPage.tsx

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

src/app/(main)/reports/attribution/AttributionStepAddForm.module.css

@@ -0,0 +1,7 @@
+.dropdown {
+  width: 140px;
+}
+
+.input {
+  width: 200px;
+}

src/app/(main)/reports/attribution/AttributionStepAddForm.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useMessages } from '@/components/hooks';
+import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
+import styles from './AttributionStepAddForm.module.css';
+
+export interface AttributionStepAddFormProps {
+  type?: string;
+  value?: string;
+  onChange?: (step: { type: string; value: string }) => void;
+}
+
+export function AttributionStepAddForm({
+  type: defaultType = 'url',
+  value: defaultValue = '',
+  onChange,
+}: AttributionStepAddFormProps) {
+  const [type, setType] = useState(defaultType);
+  const [value, setValue] = useState(defaultValue);
+  const { formatMessage, labels } = useMessages();
+  const items = [
+    { label: formatMessage(labels.url), value: 'url' },
+    { label: formatMessage(labels.event), value: 'event' },
+  ];
+  const isDisabled = !type || !value;
+
+  const handleSave = () => {
+    onChange({ type, value });
+    setValue('');
+  };
+
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      handleSave();
+    }
+  };
+
+  const renderTypeValue = (value: any) => {
+    return items.find(item => item.value === value)?.label;
+  };
+
+  return (
+    <Flexbox direction="column" gap={10}>
+      <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
+        <Flexbox gap={10}>
+          <Dropdown
+            className={styles.dropdown}
+            items={items}
+            value={type}
+            renderValue={renderTypeValue}
+            onChange={(value: any) => setType(value)}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+          <TextField
+            className={styles.input}
+            value={value}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+        </Flexbox>
+      </FormRow>
+      <FormRow>
+        <Button variant="primary" onClick={handleSave} disabled={isDisabled}>
+          {formatMessage(defaultValue ? labels.update : labels.add)}
+        </Button>
+      </FormRow>
+    </Flexbox>
+  );
+}
+
+export default AttributionStepAddForm;

src/app/(main)/reports/attribution/AttributionTable.tsx

@@ -0,0 +1,38 @@
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { useMessages } from '@/components/hooks';
+import { useContext } from 'react';
+import { GridColumn, GridTable } from 'react-basics';
+import { ReportContext } from '../[reportId]/Report';
+import { formatLongCurrency } from '@/lib/format';
+
+export function AttributionTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  return (
+    <GridTable data={data.table || []}>
+      <GridColumn name="currency" label={formatMessage(labels.currency)} alignment="end">
+        {row => row.currency}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.total)} width="300px" alignment="end">
+        {row => formatLongCurrency(row.sum, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.average)} alignment="end">
+        {row => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.transactions)} alignment="end">
+        {row => row.count}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.uniqueCustomers)} alignment="end">
+        {row => row.unique_count}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default AttributionTable;

src/app/(main)/reports/attribution/AttributionView.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: grid;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.title {
+  font-size: 24px;
+  line-height: 36px;
+  font-weight: 700;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 20px;
+  border-top: 1px solid var(--base300);
+  padding-top: 30px;
+  margin-bottom: 30px;
+}

src/app/(main)/reports/attribution/AttributionView.tsx

@@ -0,0 +1,134 @@
+import PieChart from '@/components/charts/PieChart';
+import { useMessages } from '@/components/hooks';
+import { Grid, GridRow } from '@/components/layout/Grid';
+import ListTable from '@/components/metrics/ListTable';
+import MetricCard from '@/components/metrics/MetricCard';
+import MetricsBar from '@/components/metrics/MetricsBar';
+import { CHART_COLORS } from '@/lib/constants';
+import { formatLongNumber } from '@/lib/format';
+import { useContext } from 'react';
+import { ReportContext } from '../[reportId]/Report';
+import styles from './AttributionView.module.css';
+
+export interface AttributionViewProps {
+  isLoading?: boolean;
+}
+
+export function AttributionView({ isLoading }: AttributionViewProps) {
+  const { formatMessage, labels } = useMessages();
+  const { report } = useContext(ReportContext);
+  const {
+    data,
+    parameters: { currency },
+  } = report || {};
+  const ATTRIBUTION_PARAMS = [
+    { value: 'referrer', label: formatMessage(labels.referrers) },
+    { value: 'paidAds', label: formatMessage(labels.paidAds) },
+  ];
+
+  if (!data) {
+    return null;
+  }
+
+  const { pageviews, visitors, visits } = data.total;
+
+  const metrics = data
+    ? [
+        {
+          value: pageviews,
+          label: formatMessage(labels.views),
+          formatValue: formatLongNumber,
+        },
+        {
+          value: visits,
+          label: formatMessage(labels.visits),
+          formatValue: formatLongNumber,
+        },
+        {
+          value: visitors,
+          label: formatMessage(labels.visitors),
+          formatValue: formatLongNumber,
+        },
+      ]
+    : [];
+
+  function UTMTable(UTMTableProps: { data: any; title: string; utm: string }) {
+    const { data, title, utm } = UTMTableProps;
+    const total = data[utm].reduce((sum, { value }) => {
+      return +sum + +value;
+    }, 0);
+
+    return (
+      <ListTable
+        title={title}
+        metric={formatMessage(currency ? labels.revenue : labels.visitors)}
+        currency={currency}
+        data={data[utm].map(({ name, value }) => ({
+          x: name,
+          y: Number(value),
+          z: (value / total) * 100,
+        }))}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <MetricsBar isFetched={data}>
+        {metrics?.map(({ label, value, formatValue }) => {
+          return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+        })}
+      </MetricsBar>
+      {ATTRIBUTION_PARAMS.map(({ value, label }) => {
+        const items = data[value];
+        const total = items.reduce((sum, { value }) => {
+          return +sum + +value;
+        }, 0);
+
+        const chartData = {
+          labels: items.map(({ name }) => name),
+          datasets: [
+            {
+              data: items.map(({ value }) => value),
+              backgroundColor: CHART_COLORS,
+              borderWidth: 0,
+            },
+          ],
+        };
+
+        return (
+          <div key={value} className={styles.row}>
+            <div>
+              <div className={styles.title}>{label}</div>
+              <ListTable
+                metric={formatMessage(currency ? labels.revenue : labels.visitors)}
+                currency={currency}
+                data={items.map(({ name, value }) => ({
+                  x: name,
+                  y: Number(value),
+                  z: (value / total) * 100,
+                }))}
+              />
+            </div>
+            <div>
+              <PieChart type="doughnut" data={chartData} isLoading={isLoading} />
+            </div>
+          </div>
+        );
+      })}
+      <Grid>
+        <GridRow columns="two">
+          <UTMTable data={data} title={formatMessage(labels.sources)} utm={'utm_source'} />
+          <UTMTable data={data} title={formatMessage(labels.medium)} utm={'utm_medium'} />
+        </GridRow>
+        <GridRow columns="three">
+          <UTMTable data={data} title={formatMessage(labels.campaigns)} utm={'utm_campaign'} />
+          <UTMTable data={data} title={formatMessage(labels.content)} utm={'utm_content'} />
+          <UTMTable data={data} title={formatMessage(labels.terms)} utm={'utm_term'} />
+        </GridRow>
+      </Grid>
+    </div>
+  );
+}
+
+export default AttributionView;

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

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

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

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

src/app/api/reports/attribution/route.ts

@@ -0,0 +1,50 @@
+import { canViewWebsite } from '@/lib/auth';
+import { parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { reportParms } from '@/lib/schema';
+import { getAttribution } from '@/queries/sql/reports/getAttribution';
+import { z } from 'zod';
+
+export async function POST(request: Request) {
+  const schema = z.object({
+    ...reportParms,
+    model: z.string().regex(/firstClick|lastClick/i),
+    steps: z
+      .array(
+        z.object({
+          type: z.string(),
+          value: z.string(),
+        }),
+      )
+      .min(1),
+    currency: z.string().optional(),
+  });
+
+  const { auth, body, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const {
+    websiteId,
+    model,
+    steps,
+    currency,
+    dateRange: { startDate, endDate },
+  } = body;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const data = await getAttribution(websiteId, {
+    startDate: new Date(startDate),
+    endDate: new Date(endDate),
+    model: model,
+    steps,
+    currency,
+  });
+
+  return json(data);
+}