yext · colton-demetriou · Nov 5, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 5, 2025
diff --git a/packages/visual-editor/locales/cs/visual-editor.json b/packages/visual-editor/locales/cs/visual-editor.json
diff --git a/packages/visual-editor/locales/da/visual-editor.json b/packages/visual-editor/locales/da/visual-editor.json
diff --git a/packages/visual-editor/locales/de/visual-editor.json b/packages/visual-editor/locales/de/visual-editor.json
diff --git a/packages/visual-editor/locales/en-GB/visual-editor.json b/packages/visual-editor/locales/en-GB/visual-editor.json
diff --git a/packages/visual-editor/locales/en/visual-editor.json b/packages/visual-editor/locales/en/visual-editor.json
@@ -536,6 +536,8 @@
   "siteColors": "Site Colors",
   "spacingDefaultLabel": "Default",
   "staticContent": "Static content",
+  "staticMapEmptyStateAddApiKey": "Add an API key to preview your map",
+  "staticMapEmptyStateSectionHidden": "Section hidden for all locations",
   "sunday": "Sunday",
   "teamMember": "Team Member",
   "temporarilyClosed": "Temporarily Closed",

diff --git a/packages/visual-editor/locales/es/visual-editor.json b/packages/visual-editor/locales/es/visual-editor.json
diff --git a/packages/visual-editor/locales/et/visual-editor.json b/packages/visual-editor/locales/et/visual-editor.json
diff --git a/packages/visual-editor/locales/fi/visual-editor.json b/packages/visual-editor/locales/fi/visual-editor.json
diff --git a/packages/visual-editor/locales/fr/visual-editor.json b/packages/visual-editor/locales/fr/visual-editor.json
diff --git a/packages/visual-editor/locales/hr/visual-editor.json b/packages/visual-editor/locales/hr/visual-editor.json
diff --git a/packages/visual-editor/locales/hu/visual-editor.json b/packages/visual-editor/locales/hu/visual-editor.json
diff --git a/packages/visual-editor/locales/it/visual-editor.json b/packages/visual-editor/locales/it/visual-editor.json
diff --git a/packages/visual-editor/locales/ja/visual-editor.json b/packages/visual-editor/locales/ja/visual-editor.json
diff --git a/packages/visual-editor/locales/lt/visual-editor.json b/packages/visual-editor/locales/lt/visual-editor.json
diff --git a/packages/visual-editor/locales/lv/visual-editor.json b/packages/visual-editor/locales/lv/visual-editor.json
diff --git a/packages/visual-editor/locales/nb/visual-editor.json b/packages/visual-editor/locales/nb/visual-editor.json
diff --git a/packages/visual-editor/locales/nl/visual-editor.json b/packages/visual-editor/locales/nl/visual-editor.json
diff --git a/packages/visual-editor/locales/pl/visual-editor.json b/packages/visual-editor/locales/pl/visual-editor.json
diff --git a/packages/visual-editor/locales/pt/visual-editor.json b/packages/visual-editor/locales/pt/visual-editor.json
diff --git a/packages/visual-editor/locales/ro/visual-editor.json b/packages/visual-editor/locales/ro/visual-editor.json
diff --git a/packages/visual-editor/locales/sk/visual-editor.json b/packages/visual-editor/locales/sk/visual-editor.json
diff --git a/packages/visual-editor/locales/sv/visual-editor.json b/packages/visual-editor/locales/sv/visual-editor.json
diff --git a/packages/visual-editor/locales/tr/visual-editor.json b/packages/visual-editor/locales/tr/visual-editor.json
diff --git a/packages/visual-editor/locales/zh-TW/visual-editor.json b/packages/visual-editor/locales/zh-TW/visual-editor.json
diff --git a/packages/visual-editor/locales/zh/visual-editor.json b/packages/visual-editor/locales/zh/visual-editor.json
diff --git a/packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx b/packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx
@@ -8,10 +8,13 @@ import {
   YextField,
   msg,
   pt,
+  themeManagerCn,
+  Body,
 } from "@yext/visual-editor";
-import { ComponentConfig, Field, Fields } from "@measured/puck";
+import { ComponentConfig, Field, Fields, PuckComponent } from "@measured/puck";
 import { StreamDocument } from "../../utils/applyTheme";
 import mapboxLogo from "../assets/mapbox-logo-black.svg";
+import { Map } from "lucide-react";
 
 export type MapboxStaticProps = {
   apiKey: string;
@@ -78,12 +81,13 @@ const getPrimaryColor = (streamDocument: StreamDocument) => {
   }
 };
 
-export const MapboxStaticMapComponent = ({
+export const MapboxStaticMapComponent: PuckComponent<MapboxStaticProps> = ({
   apiKey,
   coordinate: coordinateField,
   zoom = 14,
   mapStyle = "light-v11",
-}: MapboxStaticProps) => {
+  puck,
+}) => {
   const { t, i18n } = useTranslation();
   const streamDocument = useDocument<any>();
 
@@ -93,12 +97,40 @@ export const MapboxStaticMapComponent = ({
     streamDocument
   );
 
+  // Show empty state in editor mode when API key is missing
+  if (!apiKey) {
+    if (puck?.isEditing) {
+      return (
+        <div
+          className={themeManagerCn(
+            "relative h-[300px] w-full bg-gray-100 rounded-lg border border-gray-200 flex flex-col items-center justify-center py-8 gap-2.5"
+          )}
+        >
+          <Map className="w-12 h-12 text-gray-400" />
+          <div className="flex flex-col items-center gap-0">
+            <Body variant="base" className="text-gray-500 font-medium">
+              {t(
+                "staticMapEmptyStateSectionHidden",
+                "Section hidden for all locations"
+              )}
+            </Body>
+            <Body variant="base" className="text-gray-500 font-normal">
+              {t(
+                "staticMapEmptyStateAddApiKey",
+                "Add an API key to preview your map"
+              )}
+            </Body>
+          </div>
+        </div>
+      );
+    }
+    console.warn("API Key is required for MapboxStaticMap");
+    return <></>;
+  }
+
   if (!coordinate) {
     console.warn(`${coordinateField.field} is not present in the stream`);
     return <></>;
-  } else if (!apiKey) {
-    console.warn("API Key is required for MapboxStaticMap");
-    return <></>;
   }
 
   const marker = `pin-l+${getPrimaryColor(streamDocument)}(${coordinate.longitude},${coordinate.latitude})`;
@@ -169,5 +201,5 @@ export const MapboxStaticMap: ComponentConfig<{ props: MapboxStaticProps }> = {
     },
     mapStyle: "streets-v12",
   },
-  render: (props: MapboxStaticProps) => <MapboxStaticMapComponent {...props} />,
+  render: (props) => <MapboxStaticMapComponent {...props} />,
 };
diff --git a/packages/visual-editor/src/components/pageSections/StaticMapSection.tsx b/packages/visual-editor/src/components/pageSections/StaticMapSection.tsx
@@ -10,7 +10,7 @@ import {
   MapboxStaticMapComponent,
   mapStyleField,
 } from "../contentBlocks/MapboxStaticMap.tsx";
-import { ComponentConfig, Fields } from "@measured/puck";
+import { ComponentConfig, Fields, PuckComponent } from "@measured/puck";
 
 export interface StaticMapData {
   /**
@@ -88,7 +88,12 @@ const staticMapSectionFields: Fields<StaticMapSectionProps> = {
   }),
 };
 
-const StaticMapSectionWrapper = ({ data, styles }: StaticMapSectionProps) => {
+const StaticMapSectionWrapper: PuckComponent<StaticMapSectionProps> = ({
+  data,
+  styles,
+  puck,
+  id,
+}) => {
   return (
     <PageSection
       background={styles?.backgroundColor}
@@ -104,6 +109,8 @@ const StaticMapSectionWrapper = ({ data, styles }: StaticMapSectionProps) => {
           },
         }}
         mapStyle={styles?.mapStyle}
+        puck={puck}
+        id={id}
       />
     </PageSection>
   );