Merge branch 'dev' into analytics

next.config.js

@@ -167,6 +167,10 @@ const config = {
         source: '/telemetry.js',
         destination: '/api/scripts/telemetry',
       },
+      {
+        source: '/teams/:teamId/:path*',
+        destination: '/:path*',
+      },
     ];
   },
   async redirects() {

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

@@ -6,6 +6,7 @@ import Lightbulb from 'assets/lightbulb.svg';
 import Magnet from 'assets/magnet.svg';
 import Tag from 'assets/tag.svg';
 import Target from 'assets/target.svg';
+import Path from 'assets/path.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages, useTeamUrl } from 'components/hooks';
 
@@ -44,6 +45,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/goals'),
       icon: <Target />,
     },
+    {
+      title: formatMessage(labels.journey),
+      description: formatMessage(labels.journeyDescription),
+      url: renderTeamUrl('/reports/journey'),
+      icon: <Path />,
+    },
   ];
 
   return (

src/app/(main)/teams/[teamId]/dashboard/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/dashboard/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/[reportId]/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/[reportId]/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/create/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/create/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/event-data/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/event-data/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/funnel/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/funnel/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/insights/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/insights/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/page.tsx

@@ -1,8 +0,0 @@
-import Page from 'app/(main)/reports/page';
-import { Metadata } from 'next';
-
-export default Page;
-
-export const metadata: Metadata = {
-  title: 'Team Reports',
-};

src/app/(main)/teams/[teamId]/reports/retention/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/retention/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/reports/utm/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/reports/utm/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx

@@ -1,28 +0,0 @@
-'use client';
-import { ReactNode } from 'react';
-import MenuLayout from 'components/layout/MenuLayout';
-import { useMessages } from 'components/hooks';
-
-export default function ({ children, teamId }: { children: ReactNode; teamId: string }) {
-  const { formatMessage, labels } = useMessages();
-
-  const items = [
-    {
-      key: 'team',
-      label: formatMessage(labels.team),
-      url: `/teams/${teamId}/settings/team`,
-    },
-    {
-      key: 'websites',
-      label: formatMessage(labels.websites),
-      url: `/teams/${teamId}/settings/websites`,
-    },
-    {
-      key: 'members',
-      label: formatMessage(labels.members),
-      url: `/teams/${teamId}/settings/members`,
-    },
-  ].filter(n => n);
-
-  return <MenuLayout items={items}>{children}</MenuLayout>;
-}

src/app/(main)/teams/[teamId]/settings/layout.tsx

@@ -1,10 +0,0 @@
-import TeamSettingsLayout from './TeamSettingsLayout';
-import { Metadata } from 'next';
-
-export default function ({ children, params: { teamId } }) {
-  return <TeamSettingsLayout teamId={teamId}>{children}</TeamSettingsLayout>;
-}
-
-export const metadata: Metadata = {
-  title: 'Team Settings',
-};

src/app/(main)/teams/[teamId]/settings/members/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/settings/teams/[teamId]/members/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/settings/team/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/settings/teams/[teamId]/team/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/settings/websites/[websiteId]/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/settings/websites/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/settings/teams/[teamId]/websites/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/compare/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/[websiteId]/compare/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/event-data/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/[websiteId]/event-data/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/[websiteId]/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/realtime/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/[websiteId]/realtime/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/reports/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/[websiteId]/reports/page';
-
-export default Page;

src/app/(main)/teams/[teamId]/websites/page.tsx

@@ -1,3 +0,0 @@
-import Page from 'app/(main)/websites/page';
-
-export default Page;

src/components/metrics/ChangeLabel.module.css

@@ -24,8 +24,3 @@
   color: var(--base700);
   background: var(--base100);
 }
-
-.new {
-  color: var(--blue900);
-  background: var(--blue100);
-}

src/components/metrics/ChangeLabel.tsx

@@ -6,12 +6,14 @@ import styles from './ChangeLabel.module.css';
 export function ChangeLabel({
   value,
   size,
+  title,
   reverseColors,
   className,
   children,
 }: {
   value: number;
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  title?: string;
   reverseColors?: boolean;
   showPercentage?: boolean;
   className?: string;
@@ -19,20 +21,19 @@ export function ChangeLabel({
 }) {
   const positive = value * (reverseColors ? -1 : 1) >= 0;
   const negative = value * (reverseColors ? -1 : 1) < 0;
-  const isNew = isNaN(value);
+  const neutral = value === 0 || isNaN(value);
 
   return (
     <div
       className={classNames(styles.label, className, {
         [styles.positive]: positive,
         [styles.negative]: negative,
-        [styles.neutral]: value === 0,
+        [styles.neutral]: neutral,
-        [styles.new]: isNew,
       })}
-      title={value.toString()}
+      title={title}
     >
-      {!isNew && (
+      {!neutral && (
-        <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -45 : 45} size={size}>
+        <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -90 : 90} size={size}>
           <Icons.ArrowRight />
         </Icon>
       )}

src/components/metrics/MetricCard.tsx

@@ -37,19 +37,21 @@ export const MetricCard = ({
   return (
     <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
       {showLabel && <div className={styles.label}>{label}</div>}
-      <animated.div className={styles.value} title={formatValue(value)}>
+      <animated.div className={styles.value} title={value.toString()}>
         {props?.x?.to(x => formatValue(x))}
       </animated.div>
       {showChange && (
-        <ChangeLabel className={styles.change} value={change} reverseColors={reverseColors}>
+        <ChangeLabel
-          <animated.span title={formatValue(change)}>
+          className={styles.change}
-            {changeProps?.x?.to(x => Math.abs(~~x))}
+          value={change}
-          </animated.span>
+          title={formatValue(change)}
-          %
+          reverseColors={reverseColors}
+        >
+          <animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
         </ChangeLabel>
       )}
       {showPrevious && (
-        <animated.div className={classNames(styles.value, styles.prev)} title={formatValue(diff)}>
+        <animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
           {prevProps?.x?.to(x => formatValue(x))}
         </animated.div>
       )}