Merge branch 'dev' into analytics

next.config.js

@@ -76,6 +76,9 @@ if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN
 
 const config = {
   env: {
+    cloudMode: process.env.CLOUD_MODE,
+    cloudUrl: process.env.CLOUD_URL,
+    configUrl: '/config',
     currentVersion: pkg.version,
     defaultLocale: process.env.DEFAULT_LOCALE,
     isProduction: process.env.NODE_ENV === 'production',

src/components/common/HamburgerButton.js

@@ -3,12 +3,11 @@ import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 
 export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const menuItems = [
     {

src/components/hooks/useConfig.js

@@ -7,15 +7,16 @@ let loading = false;
 export function useConfig() {
   const { config } = useStore();
   const { get } = useApi();
+  const configUrl = process.env.configUrl;
 
   async function loadConfig() {
-    const data = await get('/config');
+    const data = await get(configUrl);
     loading = false;
     setConfig(data);
   }
 
   useEffect(() => {
-    if (!config && !loading) {
+    if (!config && !loading && configUrl) {
       loading = true;
       loadConfig();
     }

src/components/input/ProfileButton.js

@@ -3,16 +3,15 @@ import { useRouter } from 'next/router';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
-import useConfig from 'components/hooks/useConfig';
 import styles from './ProfileButton.module.css';
 import useLocale from 'components/hooks/useLocale';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
-  const { cloudMode } = useConfig();
   const router = useRouter();
   const { dir } = useLocale();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const handleSelect = key => {
     if (key === 'profile') {

src/components/layout/AppLayout.js

@@ -9,7 +9,7 @@ export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
 
-  if (!user || !config) {
+  if (!user || !config || config?.uiDisabled) {
     return null;
   }
 

src/components/layout/PageHeader.module.css

@@ -37,10 +37,6 @@
     margin-bottom: 10px;
   }
 
-  .title {
-    font-size: 18px;
-  }
-
   .actions {
     flex-basis: 100%;
     order: -1;

src/components/layout/SettingsLayout.js

@@ -3,14 +3,13 @@ import { useRouter } from 'next/router';
 import SideNav from './SideNav';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 import styles from './SettingsLayout.module.css';
 
 export function SettingsLayout({ children }) {
   const { user } = useUser();
   const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const items = [
     { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },

src/components/layout/SettingsLayout.module.css

@@ -13,4 +13,8 @@
   .menu {
     display: none;
   }
+
+  .content {
+    margin-top: 20px;
+  }
 }

src/components/pages/settings/profile/ProfileDetails.js

@@ -6,13 +6,12 @@ import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 import { ROLES } from 'lib/constants';
 
 export function ProfileDetails() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   if (!user) {
     return null;

src/components/pages/settings/teams/TeamSettings.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
-import Link from 'next/link';
+import { Item, Tabs, useToasts } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
@@ -44,16 +43,7 @@ export function TeamSettings({ teamId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      <PageHeader
-        title={
-          <Breadcrumbs>
-            <Item>
-              <Link href="/settings/teams">{formatMessage(labels.teams)}</Link>
-            </Item>
-            <Item>{values?.name}</Item>
-          </Breadcrumbs>
-        }
-      />
+      <PageHeader title={values?.name} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="members">{formatMessage(labels.members)}</Item>

src/components/pages/settings/users/UserSettings.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
-import Link from 'next/link';
+import { Item, Tabs, useToasts } from 'react-basics';
 import UserEditForm from 'components/pages/settings/users/UserEditForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -44,16 +43,7 @@ export function UserSettings({ userId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      <PageHeader
-        title={
-          <Breadcrumbs>
-            <Item>
-              <Link href="/settings/users">{formatMessage(labels.users)}</Link>
-            </Item>
-            <Item>{values?.username}</Item>
-          </Breadcrumbs>
-        }
-      />
+      <PageHeader title={values?.username} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>

src/components/pages/settings/websites/TrackingCode.js

@@ -1,15 +1,19 @@
 import { TextArea } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useConfig from 'components/hooks/useConfig';
+import { useRouter } from 'next/router';
 
 export function TrackingCode({ websiteId }) {
   const { formatMessage, messages } = useMessages();
-  const { basePath, trackerScriptName, trackerScriptOrigin } = useConfig();
+  const { basePath } = useRouter();
+  const config = useConfig();
+
+  const trackerScriptName =
+    config?.trackerScriptName?.split(',')?.map(n => n.trim())?.[0] || 'script.js';
+
   const url = trackerScriptName?.startsWith('http')
     ? trackerScriptName
-    : `${trackerScriptOrigin || location.origin}${basePath}/${
-        trackerScriptName?.split(',')?.map(n => n.trim())?.[0] || 'script.js'
-      }`;
+    : `${process.env.analyticsUrl || location.origin}${basePath}/${trackerScriptName}`;
 
   const code = `<script async src="${url}" data-website-id="${websiteId}"></script>`;
 

src/components/pages/settings/websites/WebsiteSettings.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
+import { Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
@@ -49,16 +49,7 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
 
   return (
     <Page loading={isLoading || !values}>
-      <PageHeader
-        title={
-          <Breadcrumbs>
-            <Item>
-              <Link href="/settings/websites">{formatMessage(labels.websites)}</Link>
-            </Item>
-            <Item>{values?.name}</Item>
-          </Breadcrumbs>
-        }
-      >
+      <PageHeader title={values?.name}>
         <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>

src/components/pages/websites/WebsitesPage.js

@@ -4,7 +4,6 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import WebsiteList from 'components/pages/settings/websites/WebsitesList';
 import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
-import useConfig from 'components/hooks/useConfig';
 import { ROLES } from 'lib/constants';
 import { useState } from 'react';
 import {
@@ -24,8 +23,8 @@ export function WebsitesPage() {
   const [tab, setTab] = useState('my-websites');
   const [fetch, setFetch] = useState(1);
   const { user } = useUser();
-  const { cloudMode } = useConfig();
   const { showToast } = useToasts();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const handleSave = async () => {
     setFetch(fetch + 1);

src/lib/detect.ts

@@ -65,19 +65,27 @@ export async function getLocation(ip, req) {
 
   // Cloudflare headers
   if (req.headers['cf-ipcountry']) {
+    const country = safeDecodeURIComponent(req.headers['cf-ipcountry']);
+    const subdivision1 = safeDecodeURIComponent(req.headers['cf-region-code']);
+    const city = safeDecodeURIComponent(req.headers['cf-ipcity']);
+
     return {
-      country: safeDecodeURIComponent(req.headers['cf-ipcountry']),
-      subdivision1: safeDecodeURIComponent(req.headers['cf-region-code']),
-      city: safeDecodeURIComponent(req.headers['cf-ipcity']),
+      country,
+      subdivision1: subdivision1.includes('-') ? subdivision1 : `${country}-${subdivision1}`,
+      city,
     };
   }
 
   // Vercel headers
   if (req.headers['x-vercel-ip-country']) {
+    const country = safeDecodeURIComponent(req.headers['x-vercel-ip-country']);
+    const subdivision1 = safeDecodeURIComponent(req.headers['x-vercel-ip-country-region']);
+    const city = safeDecodeURIComponent(req.headers['x-vercel-ip-city']);
+
     return {
-      country: safeDecodeURIComponent(req.headers['x-vercel-ip-country']),
-      subdivision1: safeDecodeURIComponent(req.headers['x-vercel-ip-country-region']),
-      city: safeDecodeURIComponent(req.headers['x-vercel-ip-city']),
+      country,
+      subdivision1: subdivision1.includes('-') ? subdivision1 : `${country}-${subdivision1}`,
+      city,
     };
   }
 

src/pages/_app.js

@@ -6,7 +6,6 @@ import Script from 'next/script';
 import { useRouter } from 'next/router';
 import ErrorBoundary from 'components/common/ErrorBoundary';
 import useLocale from 'components/hooks/useLocale';
-import useConfig from 'components/hooks/useConfig';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/700.css';
 import 'react-basics/dist/styles.css';
@@ -27,22 +26,10 @@ const client = new QueryClient({
 export default function App({ Component, pageProps }) {
   const { locale, messages } = useLocale();
   const { basePath, pathname } = useRouter();
-  const config = useConfig();
-
-  const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
-
-  if (config?.uiDisabled) {
-    return null;
-  }
 
   return (
     <QueryClientProvider client={client}>
-      <IntlProvider
-        locale={locale}
-        messages={messages[locale]}
-        textComponent={Wrapper}
-        onError={() => null}
-      >
+      <IntlProvider locale={locale} messages={messages[locale]} onError={() => null}>
         <ReactBasicsProvider>
           <ErrorBoundary>
             <Head>

src/pages/api/config.ts

@@ -2,21 +2,19 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { ok, methodNotAllowed } from 'next-basics';
 
 export interface ConfigResponse {
-  basePath: string;
-  trackerScriptName: string;
-  updatesDisabled: boolean;
   telemetryDisabled: boolean;
-  cloudMode: boolean;
+  trackerScriptName: string;
+  uiDisabled: boolean;
+  updatesDisabled: boolean;
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>) => {
   if (req.method === 'GET') {
     return ok(res, {
-      basePath: process.env.BASE_PATH || '',
-      trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
-      updatesDisabled: !!process.env.DISABLE_UPDATES,
       telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
-      cloudMode: !!process.env.CLOUD_MODE,
+      trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
+      uiDisabled: !!process.env.DISABLE_UI,
+      updatesDisabled: !!process.env.DISABLE_UPDATES,
     });
   }