OUT-3357 | Add banner to prevent WRITEs to old Client Home

src/app/components/EditorInterface.tsx

@@ -70,13 +70,15 @@ interface IEditorInterface {
   token: string
   font: string
   customLabels?: CustomLabels
+  pauseUpdates?: boolean
 }
 
 const EditorInterface = ({
   settings,
   token,
   font,
   customLabels,
+  pauseUpdates,
 }: IEditorInterface) => {
   const appState = useAppState()
 
@@ -341,6 +343,7 @@ const EditorInterface = ({
         appState?.setToken(token)
         appState?.setFont(font)
         appState?.setCustomLabels(customLabels)
+        appState?.setPauseUpdates(!!pauseUpdates)
       }
       appState?.setLoading(false)
     })()

src/app/components/Footer.tsx

@@ -174,6 +174,26 @@ export const Footer = () => {
     return () => clearTimeout(t)
   }, [])
 
+  if (appState?.appState.pauseUpdates && appState?.appState.changesCreated) {
+    return (
+      <div
+        className='w-full flex flex-col items-center gap-1 py-4 px-6 fixed bottom-0 bg-white border-t border-slate-300'
+        style={{
+          fontFamily: getFont(appState),
+        }}
+      >
+        <p className='text-[13px] text-new-dark font-semibold'>
+          Client Home is currently under maintenance - you will not be able to
+          make any changes to your content or settings in the meanwhile.
+        </p>
+        <p className='text-[13px] text-new-dark'>
+          Clients will be able to view the Client Home content as usual without
+          any interruptions during this time.
+        </p>
+      </div>
+    )
+  }
+
   return (
     <When
       condition={

src/app/page.tsx

@@ -2,7 +2,7 @@ import EditorInterface from '@/app/components/EditorInterface'
 import InvalidToken from '@/app/components/InvalidToken'
 import SideBarInterface from '@/app/components/SideBarInterface'
 import NotificationsModal from '@/components/NotificationsModal'
-import { apiUrl } from '@/config'
+import { apiUrl, pauseUpdates } from '@/config'
 import {
   ClientsResponseSchema,
   CompanyResponse,
@@ -102,6 +102,7 @@ export default async function Page({
               token={token}
               font={workspace.font}
               customLabels={labels}
+              pauseUpdates={pauseUpdates}
             />
           </div>
           <div

src/config/index.ts

@@ -8,6 +8,8 @@ export const apiUrl = `${
   process.env.VERCEL_ENV === 'development' ? 'http://' : 'https://'
 }${process.env.VERCEL_URL}`
 
+export const pauseUpdates = !!process.env.FLG_PAUSE_UPDATES
+
 export const SentryConfig = {
   DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
   AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,

src/context/index.tsx

@@ -37,6 +37,7 @@ export interface IAppState {
   tasks?: number
   customLabels?: CustomLabels
   brandName?: string
+  pauseUpdates?: boolean
 }
 
 export interface IAppContext {
@@ -66,6 +67,7 @@ export interface IAppContext {
   setTasks: (tasks: number) => void
   setCustomLabels: (customLabels?: CustomLabels) => void
   setBrandName: (brandName?: string | null) => void
+  setPauseUpdates: (v: boolean) => void
   /* eslint-enable no-unused-vars */
 }
 
@@ -103,6 +105,7 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
     tasks: undefined,
     customLabels: undefined,
     brandName: '',
+    pauseUpdates: false,
   })
 
   useEffect(() => {
@@ -210,6 +213,10 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
     setState((prev) => ({ ...prev, brandName: brandName || '' }))
   }
 
+  const setPauseUpdates = (v: boolean) => {
+    setState((prev) => ({ ...prev, pauseUpdates: v }))
+  }
+
   return (
     <AppContext.Provider
       value={{
@@ -238,6 +245,7 @@ export const AppContextProvider: FC<IAppCoreProvider> = ({ children }) => {
         setTasks,
         setCustomLabels,
         setBrandName,
+        setPauseUpdates,
       }}
     >
       <AppDataProvider>{children}</AppDataProvider>