feat: add trial expiration warning banner (#985)

* refactor: simplify useApiGetter cache keys * refactor: simplify basePath helpers * refactor: add UNLEASH_BASE_PATH frontend env var * refactor: make sure AnnouncerElement does not affect the layout * refactor: draw texture image above footer * refactor: extract domain check helpers * refactor: fix a few ts-expect-errors * feat: add trial expiration warning banner * refactor: fix IInstanceStatus interface prefix * refactor: use ConditionallyRender in InstanceStatus * refactor: simplify env helper functions * refactor: use FC in InstanceStatus * refactor: warn about expired trials * refactor: fix eslint warnings * refactor: disable banner outside of localhost * refactor: use new instance state field name
2025-07-26 13:48:33 +02:00 · 2022-05-19 14:06:18 +02:00 · 2022-05-19 14:06:18 +02:00 · 2e367b3a04
commit 2e367b3a04
parent 06b0a29ea8
37 changed files with 534 additions and 143 deletions
--- a/frontend/src/component/App.styles.ts
+++ b/frontend/src/component/App.styles.ts
@ -2,7 +2,6 @@ import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
    container: {
-        height: '100%',
        '& ul': {
            margin: 0,
        },
--- a/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts
+++ b/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts
@ -9,5 +9,6 @@ export const useStyles = makeStyles()({
        height: 1,
        margin: -1,
        padding: 0,
+        overflow: 'hidden',
    },
 });
--- a/frontend/src/component/common/InstanceStatus/InstanceStatus.tsx
+++ b/frontend/src/component/common/InstanceStatus/InstanceStatus.tsx
@ -0,0 +1,22 @@
+import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
+import React, { FC } from 'react';
+import { InstanceStatusBar } from 'component/common/InstanceStatus/InstanceStatusBar';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+export const InstanceStatus: FC = ({ children }) => {
+    const { instanceStatus } = useInstanceStatus();
+
+    return (
+        <div hidden={!instanceStatus} style={{ height: '100%' }}>
+            <ConditionallyRender
+                condition={Boolean(instanceStatus)}
+                show={() => (
+                    <InstanceStatusBarMemo instanceStatus={instanceStatus!} />
+                )}
+            />
+            {children}
+        </div>
+    );
+};
+
+const InstanceStatusBarMemo = React.memo(InstanceStatusBar);
--- a/frontend/src/component/common/InstanceStatus/InstanceStatusBar.test.tsx
+++ b/frontend/src/component/common/InstanceStatus/InstanceStatusBar.test.tsx
@ -0,0 +1,61 @@
+import { InstanceStatusBar } from 'component/common/InstanceStatus/InstanceStatusBar';
+import { InstanceState } from 'interfaces/instance';
+import { render } from 'utils/testRenderer';
+import { screen } from '@testing-library/react';
+import { addDays } from 'date-fns';
+import { INSTANCE_STATUS_BAR_ID } from 'utils/testIds';
+import { UNKNOWN_INSTANCE_STATUS } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
+
+test('InstanceStatusBar should be hidden by default', async () => {
+    render(<InstanceStatusBar instanceStatus={UNKNOWN_INSTANCE_STATUS} />);
+
+    expect(
+        screen.queryByTestId(INSTANCE_STATUS_BAR_ID)
+    ).not.toBeInTheDocument();
+});
+
+test('InstanceStatusBar should be hidden when the trial is far from expired', async () => {
+    render(
+        <InstanceStatusBar
+            instanceStatus={{
+                plan: 'pro',
+                state: InstanceState.TRIAL,
+                trialExpiry: addDays(new Date(), 15).toISOString(),
+            }}
+        />
+    );
+
+    expect(
+        screen.queryByTestId(INSTANCE_STATUS_BAR_ID)
+    ).not.toBeInTheDocument();
+});
+
+test('InstanceStatusBar should warn when the trial is about to expire', async () => {
+    render(
+        <InstanceStatusBar
+            instanceStatus={{
+                plan: 'pro',
+                state: InstanceState.TRIAL,
+                trialExpiry: addDays(new Date(), 5).toISOString(),
+            }}
+        />
+    );
+
+    expect(screen.getByTestId(INSTANCE_STATUS_BAR_ID)).toBeInTheDocument();
+    expect(await screen.findByTestId(INSTANCE_STATUS_BAR_ID)).toMatchSnapshot();
+});
+
+test('InstanceStatusBar should warn when the trial has expired', async () => {
+    render(
+        <InstanceStatusBar
+            instanceStatus={{
+                plan: 'pro',
+                state: InstanceState.TRIAL,
+                trialExpiry: new Date().toISOString(),
+            }}
+        />
+    );
+
+    expect(screen.getByTestId(INSTANCE_STATUS_BAR_ID)).toBeInTheDocument();
+    expect(await screen.findByTestId(INSTANCE_STATUS_BAR_ID)).toMatchSnapshot();
+});
--- a/frontend/src/component/common/InstanceStatus/InstanceStatusBar.tsx
+++ b/frontend/src/component/common/InstanceStatus/InstanceStatusBar.tsx
@ -0,0 +1,97 @@
+import { styled, Button } from '@mui/material';
+import { colors } from 'themes/colors';
+import { IInstanceStatus, InstanceState } from 'interfaces/instance';
+import { differenceInDays, parseISO } from 'date-fns';
+import { INSTANCE_STATUS_BAR_ID } from 'utils/testIds';
+import { Info } from '@mui/icons-material';
+
+interface IInstanceStatusBarProps {
+    instanceStatus: IInstanceStatus;
+}
+
+export const InstanceStatusBar = ({
+    instanceStatus,
+}: IInstanceStatusBarProps) => {
+    const trialDaysRemaining = calculateTrialDaysRemaining(instanceStatus);
+
+    if (
+        instanceStatus.state === InstanceState.TRIAL &&
+        typeof trialDaysRemaining === 'number' &&
+        trialDaysRemaining <= 0
+    ) {
+        return (
+            <StyledBar data-testid={INSTANCE_STATUS_BAR_ID}>
+                <StyledInfoIcon />
+                <span>
+                    <strong>Heads up!</strong> Your free trial of the{' '}
+                    {instanceStatus.plan.toUpperCase()} version has expired.
+                </span>
+                <ContactButton />
+            </StyledBar>
+        );
+    }
+
+    if (
+        instanceStatus.state === InstanceState.TRIAL &&
+        typeof trialDaysRemaining === 'number' &&
+        trialDaysRemaining <= 10
+    ) {
+        return (
+            <StyledBar data-testid={INSTANCE_STATUS_BAR_ID}>
+                <StyledInfoIcon />
+                <span>
+                    <strong>Heads up!</strong> You have{' '}
+                    <strong>{trialDaysRemaining} days</strong> remaining of your
+                    free trial of the {instanceStatus.plan.toUpperCase()}{' '}
+                    version.
+                </span>
+                <ContactButton />
+            </StyledBar>
+        );
+    }
+
+    return null;
+};
+
+const ContactButton = () => {
+    return (
+        <StyledButton
+            href="mailto:support@getunleash.zendesk.com"
+            variant="outlined"
+        >
+            Contact us
+        </StyledButton>
+    );
+};
+
+const calculateTrialDaysRemaining = (
+    instanceStatus: IInstanceStatus
+): number | undefined => {
+    return instanceStatus.trialExpiry
+        ? differenceInDays(parseISO(instanceStatus.trialExpiry), new Date())
+        : undefined;
+};
+
+const StyledBar = styled('aside')(({ theme }) => ({
+    position: 'relative',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(2),
+    gap: theme.spacing(1),
+    borderBottom: '1px solid',
+    borderColor: colors.blue[200],
+    background: colors.blue[50],
+    color: colors.blue[700],
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+    whiteSpace: 'nowrap',
+    minWidth: '8rem',
+    marginLeft: theme.spacing(2),
+}));
+
+const StyledInfoIcon = styled(Info)(({ theme }) => ({
+    color: colors.blue[500],
+}));
--- a/frontend/src/component/common/InstanceStatus/snapshots/InstanceStatusBar.test.tsx.snap
+++ b/frontend/src/component/common/InstanceStatus/snapshots/InstanceStatusBar.test.tsx.snap
@ -0,0 +1,83 @@
+// Vitest Snapshot v1
+
+exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
+<aside
+  class="mui-1rw10cs"
+  data-testid="INSTANCE_STATUS_BAR_ID"
+>
+  <svg
+    aria-hidden="true"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-cle2im-MuiSvgIcon-root"
+    data-testid="InfoIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+    />
+  </svg>
+  <span>
+    <strong>
+      Heads up!
+    </strong>
+     Your free trial of the
+     
+    PRO
+     version has expired.
+  </span>
+  <a
+    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root mui-l66s6r-MuiButtonBase-root-MuiButton-root"
+    href="mailto:support@getunleash.zendesk.com"
+    tabindex="0"
+  >
+    Contact us
+    <span
+      class="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+    />
+  </a>
+</aside>
+`;
+
+exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
+<aside
+  class="mui-1rw10cs"
+  data-testid="INSTANCE_STATUS_BAR_ID"
+>
+  <svg
+    aria-hidden="true"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-cle2im-MuiSvgIcon-root"
+    data-testid="InfoIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+    />
+  </svg>
+  <span>
+    <strong>
+      Heads up!
+    </strong>
+     You have
+     
+    <strong>
+      4
+       days
+    </strong>
+     remaining of your free trial of the 
+    PRO
+     
+    version.
+  </span>
+  <a
+    class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root mui-l66s6r-MuiButtonBase-root-MuiButton-root"
+    href="mailto:support@getunleash.zendesk.com"
+    tabindex="0"
+  >
+    Contact us
+    <span
+      class="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+    />
+  </a>
+</aside>
+`;
--- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
+++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
@ -4,6 +4,7 @@ interface IPercentageCircleProps {
    styles?: object;
    percentage: number;
    secondaryPieColor?: string;
+    className?: string;
 }

 const PercentageCircle = ({
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@ -54,7 +54,6 @@ const FeatureOverviewEnvironmentMetrics = ({
                </p>
            </div>
            <PercentageCircle
-                // @ts-expect-error
                className={styles.percentageCircle}
                percentage={percentage}
                data-loading
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@ -36,8 +36,7 @@ const FeatureOverviewMetaData = () => {
                        Project: {project}
                    </span>
                    <ConditionallyRender
-                        // @ts-expect-error
-                        condition={description}
+                        condition={Boolean(description)}
                        show={
                            <span className={styles.bodyItem} data-loading>
                                <div>Description:</div>
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
@ -97,8 +97,7 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
        }
    };

-    // @ts-expect-error
-    const renderTag = t => (
+    const renderTag = (t: ITag) => (
        <Chip
            icon={tagIcon(t.type)}
            className={styles.tagChip}
--- a/frontend/src/component/feedback/FeedbackCES/snapshots/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/snapshots/FeedbackCESForm.test.tsx.snap
@ -182,7 +182,7 @@ exports[`FeedbackCESForm 1`] = `
    <div
      aria-atomic="true"
      aria-live="polite"
-      class="tss-1cl4o05-container"
+      class="tss-i8rqz1-container"
      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
      role="status"
    />
--- a/frontend/src/component/feedback/FeedbackCESContext/useFeedbackCESEnabled.ts
+++ b/frontend/src/component/feedback/FeedbackCESContext/useFeedbackCESEnabled.ts
@ -1,10 +1,9 @@
-export const useFeedbackCESEnabled = (): boolean => {
-    const { hostname } = window.location;
+import {
+    isLocalhostDomain,
+    isUnleashDomain,
+    isVercelBranchDomain,
+} from 'utils/env';

-    return (
-        hostname === 'localhost' ||
-        hostname.endsWith('.vercel.app') ||
-        hostname.endsWith('.getunleash.io') ||
-        hostname.endsWith('.unleash-hosted.com')
-    );
+export const useFeedbackCESEnabled = (): boolean => {
+    return isUnleashDomain() || isVercelBranchDomain() || isLocalhostDomain();
 };
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@ -54,19 +54,20 @@ export const MainLayout = ({ children }: IMainLayoutProps) => {
                            {children}
                        </div>
                    </Grid>
-                    <div style={{ overflow: 'hidden' }}>
-                        <img
-                            src={formatAssetPath(textureImage)}
-                            alt=""
-                            style={{
-                                position: 'fixed',
-                                zIndex: 1,
-                                bottom: 0,
-                                right: 0,
-                                width: 400,
-                            }}
-                        />
-                    </div>
+                    <img
+                        src={formatAssetPath(textureImage)}
+                        alt=""
+                        style={{
+                            display: 'block',
+                            position: 'fixed',
+                            zIndex: 0,
+                            bottom: 0,
+                            right: 0,
+                            width: 400,
+                            pointerEvents: 'none',
+                            userSelect: 'none',
+                        }}
+                    />
                </main>
                <Footer />
            </Grid>
--- a/frontend/src/component/menu/Footer/ApiDetails/snapshots/ApiDetails.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/ApiDetails/snapshots/ApiDetails.test.tsx.snap
@ -26,7 +26,7 @@ exports[`renders correctly with empty version 1`] = `
    <div
      aria-atomic="true"
      aria-live="polite"
-      class="tss-1cl4o05-container"
+      class="tss-i8rqz1-container"
      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
      role="status"
    />
@ -60,7 +60,7 @@ exports[`renders correctly with ui-config 1`] = `
    <div
      aria-atomic="true"
      aria-live="polite"
-      class="tss-1cl4o05-container"
+      class="tss-i8rqz1-container"
      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
      role="status"
    />
@ -94,7 +94,7 @@ exports[`renders correctly with versionInfo 1`] = `
    <div
      aria-atomic="true"
      aria-live="polite"
-      class="tss-1cl4o05-container"
+      class="tss-i8rqz1-container"
      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
      role="status"
    />
@ -121,7 +121,7 @@ exports[`renders correctly without uiConfig 1`] = `
    <div
      aria-atomic="true"
      aria-live="polite"
-      class="tss-1cl4o05-container"
+      class="tss-i8rqz1-container"
      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
      role="status"
    />
--- a/frontend/src/component/menu/Footer/Footer.styles.ts
+++ b/frontend/src/component/menu/Footer/Footer.styles.ts
@ -2,7 +2,6 @@ import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
    footer: {
-        background: 'white',
        padding: '2rem 4rem',
        width: '100%',
        flexGrow: 1,
--- a/frontend/src/component/menu/Footer/snapshots/Footer.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/snapshots/Footer.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`should render DrawerMenu 1`] = `
 [
  <footer
-    className="tss-1bvpe5r-footer"
+    className="tss-wd65c0-footer"
  >
    <div
      className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 mui-16chest-MuiGrid-root"
@ -438,7 +438,7 @@ exports[`should render DrawerMenu 1`] = `
  <div
    aria-atomic={true}
    aria-live="polite"
-    className="tss-1cl4o05-container"
+    className="tss-i8rqz1-container"
    data-testid="ANNOUNCER_ELEMENT_TEST_ID"
    role="status"
  />,
@ -448,7 +448,7 @@ exports[`should render DrawerMenu 1`] = `
 exports[`should render DrawerMenu with "features" selected 1`] = `
 [
  <footer
-    className="tss-1bvpe5r-footer"
+    className="tss-wd65c0-footer"
  >
    <div
      className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 mui-16chest-MuiGrid-root"
@ -883,7 +883,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
  <div
    aria-atomic={true}
    aria-live="polite"
-    className="tss-1cl4o05-container"
+    className="tss-i8rqz1-container"
    data-testid="ANNOUNCER_ELEMENT_TEST_ID"
    role="status"
  />,
--- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
+++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
@ -7,7 +7,7 @@ import ExitToApp from '@mui/icons-material/ExitToApp';
 import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
 import NavigationLink from '../NavigationLink/NavigationLink';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { IFlags } from 'interfaces/uiConfig';
 import { IRoute } from 'interfaces/route';
 import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
@ -119,10 +119,7 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
                <Divider />
                <div className={styles.iconLinkList}>
                    {renderLinks()}
-                    <a
-                        className={styles.iconLink}
-                        href={`${getBasePath()}/logout`}
-                    >
+                    <a className={styles.iconLink} href={`${basePath}/logout`}>
                        <ExitToApp className={styles.navigationIcon} />
                        Sign out
                    </a>
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/hooks/useOptimisticUpdate.test.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/hooks/useOptimisticUpdate.test.ts
@ -13,12 +13,9 @@ describe('useOptimisticUpdate', () => {
    });

    it('should have working setter', () => {
-        const { result, rerender } = renderHook(
-            state => useOptimisticUpdate(state),
-            {
-                initialProps: 'initial',
-            }
-        );
+        const { result } = renderHook(state => useOptimisticUpdate(state), {
+            initialProps: 'initial',
+        });

        act(() => {
            result.current[1]('updated');
@ -41,12 +38,9 @@ describe('useOptimisticUpdate', () => {
    });

    it('should have working rollback', () => {
-        const { result, rerender } = renderHook(
-            state => useOptimisticUpdate(state),
-            {
-                initialProps: 'initial',
-            }
-        );
+        const { result } = renderHook(state => useOptimisticUpdate(state), {
+            initialProps: 'initial',
+        });

        act(() => {
            result.current[1]('updated');
--- a/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
+++ b/frontend/src/component/strategies/StrategiesList/snapshots/StrategiesList.test.tsx.snap
@ -256,7 +256,7 @@ exports[`renders correctly 1`] = `
  <div
    aria-atomic={true}
    aria-live="polite"
-    className="tss-1cl4o05-container"
+    className="tss-i8rqz1-container"
    data-testid="ANNOUNCER_ELEMENT_TEST_ID"
    role="status"
  >
--- a/frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap
@ -72,7 +72,7 @@ exports[`renders an empty list correctly 1`] = `
  <div
    aria-atomic={true}
    aria-live="polite"
-    className="tss-1cl4o05-container"
+    className="tss-i8rqz1-container"
    data-testid="ANNOUNCER_ELEMENT_TEST_ID"
    role="status"
  />,
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
@ -9,14 +9,14 @@ import {
    Select,
    Typography,
    SelectChangeEvent,
+    Alert,
 } from '@mui/material';
 import classnames from 'classnames';
 import { useStyles } from 'component/user/UserProfile/UserProfileContent/UserProfileContent.styles';
 import { useThemeStyles } from 'themes/themeStyles';
-import { Alert } from '@mui/material';
 import EditProfile from '../EditProfile/EditProfile';
 import legacyStyles from '../../user.module.scss';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { IUser } from 'interfaces/user';
 import { ILocationSettings } from 'hooks/useLocationSettings';
@ -163,7 +163,7 @@ const UserProfileContent = ({
                                <Button
                                    variant="contained"
                                    color="primary"
-                                    href={`${getBasePath()}/logout`}
+                                    href={`${basePath}/logout`}
                                >
                                    Logout
                                </Button>
--- a/frontend/src/hooks/api/getters/useApiGetter/useApiGetter.ts
+++ b/frontend/src/hooks/api/getters/useApiGetter/useApiGetter.ts
@ -1,11 +1,6 @@
-import useSWR, { SWRConfiguration, mutate } from 'swr';
+import useSWR, { SWRConfiguration, Key } from 'swr';
 import { useCallback } from 'react';

-type CacheKey =
-    | 'apiAdminFeaturesGet'
-    | 'apiAdminArchiveFeaturesGet'
-    | ['apiAdminArchiveFeaturesGet', string?];
-
 interface IUseApiGetterOutput<T> {
    data?: T;
    refetch: () => void;
@ -14,15 +9,15 @@ interface IUseApiGetterOutput<T> {
 }

 export const useApiGetter = <T>(
-    cacheKey: CacheKey,
+    cacheKey: Key,
    fetcher: () => Promise<T>,
    options?: SWRConfiguration
 ): IUseApiGetterOutput<T> => {
-    const { data, error } = useSWR<T>(cacheKey, fetcher, options);
+    const { data, error, mutate } = useSWR<T>(cacheKey, fetcher, options);

    const refetch = useCallback(() => {
-        mutate(cacheKey).catch(console.warn);
-    }, [cacheKey]);
+        mutate().catch(console.warn);
+    }, [mutate]);

    return {
        data,
--- a/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts
+++ b/frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts
@ -0,0 +1,48 @@
+import { IInstanceStatus } from 'interfaces/instance';
+import { useApiGetter } from 'hooks/api/getters/useApiGetter/useApiGetter';
+import { formatApiPath } from 'utils/formatPath';
+import { isLocalhostDomain } from 'utils/env';
+
+export interface IUseInstanceStatusOutput {
+    instanceStatus?: IInstanceStatus;
+    refetchInstanceStatus: () => void;
+    loading: boolean;
+    error?: Error;
+}
+
+export const useInstanceStatus = (): IUseInstanceStatusOutput => {
+    const { data, refetch, loading, error } = useApiGetter(
+        'useInstanceStatus',
+        fetchInstanceStatus
+    );
+
+    return {
+        instanceStatus: data,
+        refetchInstanceStatus: refetch,
+        loading,
+        error,
+    };
+};
+
+const fetchInstanceStatus = async (): Promise<IInstanceStatus> => {
+    if (!enableInstanceStatusBarFeature()) {
+        return UNKNOWN_INSTANCE_STATUS;
+    }
+
+    const res = await fetch(formatApiPath('api/instance/status'));
+
+    if (!res.ok) {
+        return UNKNOWN_INSTANCE_STATUS;
+    }
+
+    return res.json();
+};
+
+// TODO(olav): Enable instance status bar feature outside of localhost.
+const enableInstanceStatusBarFeature = () => {
+    return isLocalhostDomain();
+};
+
+export const UNKNOWN_INSTANCE_STATUS: IInstanceStatus = {
+    plan: 'unknown',
+};
--- a/frontend/src/hooks/useEventSettings.ts
+++ b/frontend/src/hooks/useEventSettings.ts
@ -1,4 +1,4 @@
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
 import React from 'react';

@ -22,6 +22,6 @@ const createInitialValue = (): IEventSettings => {
 };

 const useGlobalState = createPersistentGlobalStateHook<IEventSettings>(
-    `${getBasePath()}:useEventSettings:v1`,
+    `${basePath}:useEventSettings:v1`,
    createInitialValue()
 );
--- a/frontend/src/hooks/useFeaturesSort.ts
+++ b/frontend/src/hooks/useFeaturesSort.ts
@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
 import {
    expired,
@ -38,7 +38,7 @@ export interface IFeaturesFilterSortOption {
 // Store the features sort state globally, and in localStorage.
 // When changing the format of IFeaturesSort, change the version as well.
 const useFeaturesSortState = createPersistentGlobalStateHook<IFeaturesSort>(
-    `${getBasePath()}:useFeaturesSort:v1`,
+    `${basePath}:useFeaturesSort:v1`,
    { type: 'name' }
 );

--- a/frontend/src/hooks/useLocationSettings.ts
+++ b/frontend/src/hooks/useLocationSettings.ts
@ -1,4 +1,4 @@
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
 import React from 'react';

@ -24,6 +24,6 @@ const createInitialValue = (): ILocationSettings => {
 };

 const useGlobalState = createPersistentGlobalStateHook<ILocationSettings>(
-    `${getBasePath()}:useLocationSettings:v1`,
+    `${basePath}:useLocationSettings:v1`,
    createInitialValue()
 );
--- a/frontend/src/hooks/useUsersFilter.ts
+++ b/frontend/src/hooks/useUsersFilter.ts
@ -1,6 +1,6 @@
 import { IUser } from 'interfaces/user';
 import React, { useMemo } from 'react';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { createGlobalStateHook } from 'hooks/useGlobalState';

 export interface IUsersFilter {
@ -16,7 +16,7 @@ export interface IUsersFilterOutput {
 // Store the users filter state globally, and in localStorage.
 // When changing the format of IUsersFilter, change the version as well.
 const useUsersFilterState = createGlobalStateHook<IUsersFilter>(
-    `${getBasePath()}:useUsersFilter:v1`,
+    `${basePath}:useUsersFilter:v1`,
    { query: '' }
 );

--- a/frontend/src/hooks/useUsersSort.ts
+++ b/frontend/src/hooks/useUsersSort.ts
@ -1,6 +1,6 @@
 import { IUser } from 'interfaces/user';
 import React, { useMemo } from 'react';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
 import useUsers from 'hooks/api/getters/useUsers/useUsers';
 import IRole from 'interfaces/role';
@ -26,7 +26,7 @@ export interface IUsersFilterSortOption {
 // Store the users sort state globally, and in localStorage.
 // When changing the format of IUsersSort, change the version as well.
 const useUsersSortState = createPersistentGlobalStateHook<IUsersSort>(
-    `${getBasePath()}:useUsersSort:v1`,
+    `${basePath}:useUsersSort:v1`,
    { type: 'created', desc: false }
 );

--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -10,21 +10,24 @@ import { ThemeProvider } from 'themes/ThemeProvider';
 import { App } from 'component/App';
 import { ScrollTop } from 'component/common/ScrollTop/ScrollTop';
 import { AccessProvider } from 'component/providers/AccessProvider/AccessProvider';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';
 import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
 import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
+import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus';

 ReactDOM.render(
    <DndProvider backend={HTML5Backend}>
        <UIProvider>
            <AccessProvider>
-                <BrowserRouter basename={`${getBasePath()}`}>
+                <BrowserRouter basename={basePath}>
                    <ThemeProvider>
                        <AnnouncerProvider>
                            <FeedbackCESProvider>
-                                <ScrollTop />
-                                <App />
+                                <InstanceStatus>
+                                    <ScrollTop />
+                                    <App />
+                                </InstanceStatus>
                            </FeedbackCESProvider>
                        </AnnouncerProvider>
                    </ThemeProvider>
--- a/frontend/src/interfaces/instance.ts
+++ b/frontend/src/interfaces/instance.ts
@ -0,0 +1,16 @@
+export interface IInstanceStatus {
+    plan: string;
+    trialExpiry?: string;
+    trialStart?: string;
+    trialExtended?: number;
+    billingCenter?: string;
+    state?: InstanceState;
+}
+
+export enum InstanceState {
+    UNASSIGNED = 'UNASSIGNED',
+    TRIAL = 'TRIAL',
+    ACTIVE = 'ACTIVE',
+    EXPIRED = 'EXPIRED',
+    CHURNED = 'CHURNED',
+}
--- a/frontend/src/utils/env.test.ts
+++ b/frontend/src/utils/env.test.ts
@ -0,0 +1,25 @@
+import {
+    isLocalhostDomain,
+    isVercelBranchDomain,
+    isUnleashDomain,
+} from 'utils/env';
+
+test('isLocalhostDomain', () => {
+    expect(isLocalhostDomain()).toEqual(true);
+    expect(isLocalhostDomain('unleash-hosted.com')).toEqual(false);
+});
+
+test('isUnleashDomain', () => {
+    expect(isUnleashDomain()).toEqual(false);
+    expect(isUnleashDomain('vercel.app')).toEqual(false);
+    expect(isUnleashDomain('app.getunleash.io')).toEqual(true);
+    expect(isUnleashDomain('app.unleash-hosted.com')).toEqual(true);
+});
+
+test('isVercelBranchDomain', () => {
+    expect(isVercelBranchDomain()).toEqual(false);
+    expect(isVercelBranchDomain('getunleash.io')).toEqual(false);
+    expect(isVercelBranchDomain('unleash-hosted.com')).toEqual(false);
+    expect(isVercelBranchDomain('vercel.app')).toEqual(false);
+    expect(isVercelBranchDomain('branch.vercel.app')).toEqual(true);
+});
--- a/frontend/src/utils/env.ts
+++ b/frontend/src/utils/env.ts
@ -0,0 +1,9 @@
+export const isLocalhostDomain = (hostname = window.location.hostname) =>
+    hostname === 'localhost';
+
+export const isUnleashDomain = (hostname = window.location.hostname) =>
+    hostname.endsWith('.getunleash.io') ||
+    hostname.endsWith('.unleash-hosted.com');
+
+export const isVercelBranchDomain = (hostname = window.location.hostname) =>
+    hostname.endsWith('.vercel.app');
--- a/frontend/src/utils/formatPath.test.ts
+++ b/frontend/src/utils/formatPath.test.ts
@ -0,0 +1,48 @@
+import {
+    parseBasePath,
+    formatAssetPath,
+    formatApiPath,
+} from 'utils/formatPath';
+
+test('formatBasePath', () => {
+    expect(parseBasePath()).toEqual('');
+    expect(parseBasePath('')).toEqual('');
+    expect(parseBasePath('/')).toEqual('');
+    expect(parseBasePath('a')).toEqual('/a');
+    expect(parseBasePath('/a')).toEqual('/a');
+    expect(parseBasePath('/a/')).toEqual('/a');
+    expect(parseBasePath('a/b/')).toEqual('/a/b');
+    expect(parseBasePath('//a//b//')).toEqual('/a/b');
+});
+
+test('formatAssetPath', () => {
+    expect(formatAssetPath('')).toEqual('');
+    expect(formatAssetPath('/')).toEqual('');
+    expect(formatAssetPath('a')).toEqual('/a');
+    expect(formatAssetPath('/a')).toEqual('/a');
+    expect(formatAssetPath('/a/')).toEqual('/a');
+    expect(formatAssetPath('a/b/')).toEqual('/a/b');
+    expect(formatAssetPath('', '')).toEqual('');
+    expect(formatAssetPath('/', '/')).toEqual('');
+    expect(formatAssetPath('a', 'x')).toEqual('/x/a');
+    expect(formatAssetPath('/a', '/x')).toEqual('/x/a');
+    expect(formatAssetPath('/a/', '/x/')).toEqual('/x/a');
+    expect(formatAssetPath('a/b/', 'x/y/')).toEqual('/x/y/a/b');
+    expect(formatAssetPath('//a//b//', '//x//y//')).toEqual('/x/y/a/b');
+});
+
+test('formatApiPath', () => {
+    expect(formatApiPath('')).toEqual('');
+    expect(formatApiPath('/')).toEqual('');
+    expect(formatApiPath('a')).toEqual('/a');
+    expect(formatApiPath('/a')).toEqual('/a');
+    expect(formatApiPath('/a/')).toEqual('/a');
+    expect(formatApiPath('a/b/')).toEqual('/a/b');
+    expect(formatApiPath('', '')).toEqual('');
+    expect(formatApiPath('/', '/')).toEqual('');
+    expect(formatApiPath('a', 'x')).toEqual('/x/a');
+    expect(formatApiPath('/a', '/x')).toEqual('/x/a');
+    expect(formatApiPath('/a/', '/x/')).toEqual('/x/a');
+    expect(formatApiPath('a/b/', 'x/y/')).toEqual('/x/y/a/b');
+    expect(formatApiPath('//a//b//', '//x//y//')).toEqual('/x/y/a/b');
+});
--- a/frontend/src/utils/formatPath.ts
+++ b/frontend/src/utils/formatPath.ts
@ -1,51 +1,40 @@
-export const getBasePathGenerator = () => {
-    let basePath: string | undefined;
-    const DEFAULT = '::baseUriPath::';
-
-    return () => {
-        if (process.env.NODE_ENV === 'development') {
-            return '';
-        }
-
-        if (basePath !== undefined) {
-            return basePath;
-        }
-        const baseUriPath = document.querySelector<HTMLMetaElement>(
-            'meta[name="baseUriPath"]'
-        );
-
-        if (baseUriPath?.content) {
-            basePath = baseUriPath?.content;
-
-            if (basePath === DEFAULT) {
-                basePath = '';
-                return '';
-            }
-
-            return basePath;
-        }
-        basePath = '';
-        return basePath;
-    };
+export const formatApiPath = (path: string, base = basePath): string => {
+    return joinPaths(base, path);
 };

-export const getBasePath = getBasePathGenerator();
-
-export const formatApiPath = (path: string) => {
-    const basePath = getBasePath();
-
-    if (basePath) {
-        return `${basePath}/${path}`;
-    }
-    return `/${path}`;
-};
-
-export const formatAssetPath = (path: string) => {
-    const basePath = getBasePath();
-
-    if (basePath) {
-        return `${basePath}/${path}`;
+export const formatAssetPath = (path: string, base = basePath): string => {
+    if (import.meta.env.DEV && import.meta.env.BASE_URL !== '/') {
+        // Vite will automatically add BASE_URL to imported assets.
+        return joinPaths(path);
    }

-    return path;
+    return joinPaths(base, path);
 };
+
+// Parse the basePath value from the HTML meta tag.
+export const parseBasePath = (value = basePathMetaTagContent()): string => {
+    if (import.meta.env.DEV && import.meta.env.BASE_URL !== '/') {
+        // Use the `UNLEASH_BASE_PATH` env var instead of the meta tag.
+        return joinPaths(import.meta.env.BASE_URL);
+    }
+
+    return value === '::baseUriPath::' ? '' : joinPaths(value);
+};
+
+// Join paths with a leading separator and without a trailing separator.
+const joinPaths = (...paths: string[]): string => {
+    return ['', ...paths]
+        .join('/')
+        .replace(/\/+$/g, '') // Remove trailing separators.
+        .replace(/\/+/g, '/'); // Collapse repeated separators.
+};
+
+const basePathMetaTagContent = (): string => {
+    const el = document.querySelector<HTMLMetaElement>(
+        'meta[name="baseUriPath"]'
+    );
+
+    return el?.content ?? '';
+};
+
+export const basePath = parseBasePath();
--- a/frontend/src/utils/openapiClient.ts
+++ b/frontend/src/utils/openapiClient.ts
@ -1,10 +1,10 @@
 import { Configuration, AdminApi } from 'openapi';
-import { getBasePath } from 'utils/formatPath';
+import { basePath } from 'utils/formatPath';

 const createAdminApi = (): AdminApi => {
    return new AdminApi(
        new Configuration({
-            basePath: getBasePath(),
+            basePath,
        })
    );
 };
--- a/frontend/src/utils/testIds.ts
+++ b/frontend/src/utils/testIds.ts
@ -50,3 +50,4 @@ export const HEADER_USER_AVATAR = 'HEADER_USER_AVATAR';
 export const SIDEBAR_MODAL_ID = 'SIDEBAR_MODAL_ID';
 export const AUTH_PAGE_ID = 'AUTH_PAGE_ID';
 export const ANNOUNCER_ELEMENT_TEST_ID = 'ANNOUNCER_ELEMENT_TEST_ID';
+export const INSTANCE_STATUS_BAR_ID = 'INSTANCE_STATUS_BAR_ID';
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -4,10 +4,20 @@ import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import envCompatible from 'vite-plugin-env-compatible';

-const API_URL = process.env.UNLEASH_API || 'http://localhost:4242';
+const UNLEASH_API = process.env.UNLEASH_API || 'http://localhost:4242';
+const UNLEASH_BASE_PATH = process.env.UNLEASH_BASE_PATH || '/';
+
+if (!UNLEASH_BASE_PATH.startsWith('/') || !UNLEASH_BASE_PATH.endsWith('/')) {
+    console.error('UNLEASH_BASE_PATH must both start and end with /');
+    process.exit(1);
+}

-// https://vitejs.dev/config/
 export default defineConfig({
+    base: UNLEASH_BASE_PATH,
+    build: {
+        outDir: 'build',
+        assetsDir: 'static',
+    },
    test: {
        globals: true,
        setupFiles: 'src/setupTests.ts',
@ -17,23 +27,19 @@ export default defineConfig({
    server: {
        open: true,
        proxy: {
-            '/api': {
-                target: API_URL,
+            [`${UNLEASH_BASE_PATH}api`]: {
+                target: UNLEASH_API,
                changeOrigin: true,
            },
-            '/auth': {
-                target: API_URL,
+            [`${UNLEASH_BASE_PATH}auth`]: {
+                target: UNLEASH_API,
                changeOrigin: true,
            },
-            '/logout': {
-                target: API_URL,
+            [`${UNLEASH_BASE_PATH}logout`]: {
+                target: UNLEASH_API,
                changeOrigin: true,
            },
        },
    },
-    build: {
-        outDir: 'build',
-        assetsDir: 'static',
-    },
    plugins: [react(), tsconfigPaths(), svgr(), envCompatible()],
 });