feat: handle head deploy state

packages/visual-editor/locales/platform/en/visual-editor.json

@@ -550,6 +550,8 @@
   "promoBanner": "Promo Banner",
   "promoMedia": "Promo Media",
   "publishBlocked": {
+    "deploymentFailed": "Publish is disabled because the latest deployment failed. Please fix the issues and try again",
+    "deploymentInactive": "Publish is disabled because the deployment is inactive",
     "deploymentInProgress": "Update is disabled while deployment is in progress"
   },
   "publishError": {

packages/visual-editor/src/internal/components/InternalThemeEditor.tsx

@@ -193,7 +193,7 @@ export const InternalThemeEditor = ({
               setClearLocalChangesModalOpen={setClearLocalChangesModalOpen}
               totalEntityCount={templateMetadata.totalEntityCount}
               localDev={localDev}
-              deploymentInProgress={templateMetadata.deploymentInProgress}
+              headDeployStatus={templateMetadata.headDeployStatus}
             />
           ),
           actionBar: () => <></>,

packages/visual-editor/src/internal/puck/components/LayoutHeader.tsx

@@ -41,6 +41,7 @@ import {
   type ErrorSource,
 } from "../../../contexts/ErrorContext.tsx";
 import { getPublishErrorMessage } from "../../../utils/publishErrors.ts";
+import { getPublishTooltipMessageFromHeadDeployStatus } from "../../utils/getPublishTooltipMessageFromHeadDeployStatus.ts";
 
 const usePuck = createUsePuck();
 const devLogger = new DevLogger();
@@ -124,17 +125,15 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
     }
   };
 
-  const deploymentInProgress = templateMetadata.deploymentInProgress;
   const publishDisabled =
-    histories.length === 1 || hasErrors || deploymentInProgress;
-  const publishTooltipMessage = deploymentInProgress
-    ? pt(
-        "publishBlocked.deploymentInProgress",
-        "Update is disabled while deployment is in progress"
-      )
-    : hasErrors
-      ? getPublishErrorMessage(errorSources, errorDetails)
-      : undefined;
+    histories.length === 1 ||
+    hasErrors ||
+    templateMetadata.headDeployStatus !== "ACTIVE";
+  const publishTooltipMessage =
+    (hasErrors ?? getPublishErrorMessage(errorSources, errorDetails)) ||
+    getPublishTooltipMessageFromHeadDeployStatus(
+      templateMetadata.headDeployStatus
+    );
 
   return (
     <>

packages/visual-editor/src/internal/puck/components/ThemeHeader.tsx

@@ -12,12 +12,14 @@ import { RotateCcw, RotateCw } from "lucide-react";
 import { Separator } from "@radix-ui/react-separator";
 import { LocalDevOverrideButtons } from "./LayoutHeader.tsx";
 import { pt } from "../../../utils/i18n/platform.ts";
+import { HeadDeployStatus } from "../../types/templateMetadata.ts";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "../ui/Tooltip.tsx";
+import { getPublishTooltipMessageFromHeadDeployStatus } from "../../utils/getPublishTooltipMessageFromHeadDeployStatus.ts";
 
 type ThemeHeaderProps = {
   onPublishTheme: () => Promise<void>;
@@ -31,7 +33,7 @@ type ThemeHeaderProps = {
   setClearLocalChangesModalOpen: (newValue: boolean) => void;
   totalEntityCount: number;
   localDev: boolean;
-  deploymentInProgress: boolean;
+  headDeployStatus: HeadDeployStatus;
 };
 
 export const ThemeHeader = (props: ThemeHeaderProps) => {
@@ -47,7 +49,7 @@ export const ThemeHeader = (props: ThemeHeaderProps) => {
     setClearLocalChangesModalOpen,
     totalEntityCount,
     localDev,
-    deploymentInProgress,
+    headDeployStatus,
   } = props;
 
   const getPuck = useGetPuck();
@@ -139,13 +141,10 @@ export const ThemeHeader = (props: ThemeHeaderProps) => {
   }, []);
 
   const publishDisabled =
-    themeHistories?.histories?.length === 1 || deploymentInProgress;
-  const publishTooltipMessage = deploymentInProgress
-    ? pt(
-        "publishBlocked.deploymentInProgress",
-        "Update is disabled while deployment is in progress"
-      )
-    : undefined;
+    themeHistories?.histories?.length === 1 || headDeployStatus !== "ACTIVE";
+
+  const publishTooltipMessage =
+    getPublishTooltipMessageFromHeadDeployStatus(headDeployStatus);
 
   return (
     <header className="puck-header">

packages/visual-editor/src/internal/types/templateMetadata.ts

@@ -1,6 +1,8 @@
 import { FontRegistry } from "../../utils/fonts/visualEditorFonts.ts";
 import DOMPurify from "dompurify";
 
+export type HeadDeployStatus = "RUNNING" | "INACTIVE" | "FAILED" | "ACTIVE";
+
 export type TemplateMetadata = {
   siteId: number;
   templateId: string;
@@ -18,9 +20,9 @@ export type TemplateMetadata = {
   platformLocale?: string;
   locales: string[];
   layoutTaskApprovals: boolean;
-  deploymentInProgress: boolean;
   locatorDisplayFields?: Record<string, FieldTypeData>;
   customFonts?: FontRegistry;
+  headDeployStatus: HeadDeployStatus;
 };
 
 export type FieldTypeData = {
@@ -48,7 +50,7 @@ export function generateTemplateMetadata(): TemplateMetadata {
     platformLocale: "en",
     locales: ["en", "es", "fr"],
     layoutTaskApprovals: false,
-    deploymentInProgress: false,
+    headDeployStatus: "ACTIVE",
     locatorDisplayFields: {
       name: {
         field_id: "name",

packages/visual-editor/src/internal/utils/getPublishTooltipMessageFromHeadDeployStatus.ts

@@ -0,0 +1,26 @@
+import { HeadDeployStatus } from "../types/templateMetadata.ts";
+import { pt } from "../../utils/i18n/platform.ts";
+
+export const getPublishTooltipMessageFromHeadDeployStatus = (
+  headDeployStatus: HeadDeployStatus
+): string | undefined => {
+  switch (headDeployStatus) {
+    case "RUNNING":
+      return pt(
+        "publishBlocked.deploymentInProgress",
+        "Update is disabled while deployment is in progress"
+      );
+    case "FAILED":
+      return pt(
+        "publishBlocked.deploymentFailed",
+        "Publish is disabled because the latest deployment failed. Please fix the issues and try again"
+      );
+    case "INACTIVE":
+      return pt(
+        "publishBlocked.deploymentInactive",
+        "Publish is disabled because the deployment is inactive"
+      );
+    default:
+      return undefined;
+  }
+};