Check Cloudflare headers for country info. Closes #2129

components/pages/reports/FieldAddForm.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from 'lib/constants';
-import PopupForm from '../PopupForm';
+import PopupForm from './PopupForm';
-import FieldSelectForm from '../FieldSelectForm';
+import FieldSelectForm from './FieldSelectForm';
-import FieldAggregateForm from '../FieldAggregateForm';
+import FieldAggregateForm from './FieldAggregateForm';
-import FieldFilterForm from '../FieldFilterForm';
+import FieldFilterForm from './FieldFilterForm';
 import styles from './FieldAddForm.module.css';
 
 export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {

components/pages/reports/insights/FieldAddForm.js

@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-import { REPORT_PARAMETERS } from 'lib/constants';
-import PopupForm from '../PopupForm';
-import FieldSelectForm from '../FieldSelectForm';
-import FieldAggregateForm from '../FieldAggregateForm';
-import FieldFilterForm from '../FieldFilterForm';
-import styles from './FieldAddForm.module.css';
-
-export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
-  const [selected, setSelected] = useState();
-
-  const handleSelect = value => {
-    const { type } = value;
-
-    if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
-      value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
-      handleSave(value);
-      return;
-    }
-
-    setSelected(value);
-  };
-
-  const handleSave = value => {
-    onAdd(group, value);
-    onClose();
-  };
-
-  return createPortal(
-    <PopupForm className={styles.popup} element={element} onClose={onClose}>
-      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
-      {selected && group === REPORT_PARAMETERS.fields && (
-        <FieldAggregateForm {...selected} onSelect={handleSave} />
-      )}
-      {selected && group === REPORT_PARAMETERS.filters && (
-        <FieldFilterForm {...selected} onSelect={handleSave} />
-      )}
-    </PopupForm>,
-    document.body,
-  );
-}
-
-export default FieldAddForm;

components/pages/reports/insights/FieldAddForm.module.css

@@ -1,38 +0,0 @@
-.menu {
-  width: 360px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-radius: var(--border-radius);
-}
-
-.item:hover {
-  background: var(--base75);
-}
-
-.type {
-  color: var(--font-color300);
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.popup {
-  display: flex;
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dropdown {
-  min-width: 60px;
-}

lib/detect.ts

@@ -62,6 +62,14 @@ export async function getLocation(ip, req) {
     return;
   }
 
+  // Cloudflare headers
+  if (req.headers['cf-ipcountry']) {
+    return {
+      country: req.headers['cf-ipcountry'],
+    };
+  }
+
+  // Vercel headers
   if (req.headers['x-vercel-ip-country']) {
     const country = req.headers['x-vercel-ip-country'];
     const region = req.headers['x-vercel-ip-country-region'];

pages/reports/insights.js

@@ -1,13 +1,13 @@
 import AppLayout from 'components/layout/AppLayout';
-import EventDataReport from 'components/pages/reports/event-data/EventDataReport';
+import InsightsReport from 'components/pages/reports/insights/InsightsReport';
 import { useMessages } from 'hooks';
 
 export default function () {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <AppLayout title={`${formatMessage(labels.eventData)} - ${formatMessage(labels.reports)}`}>
+    <AppLayout title={`${formatMessage(labels.insights)} - ${formatMessage(labels.reports)}`}>
-      <EventDataReport />
+      <InsightsReport />
     </AppLayout>
   );
 }