yext · benlife5 · Dec 17, 2025 · Dec 17, 2025 · Dec 17, 2025 · Dec 17, 2025
diff --git a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocations.test.tsx b/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocations.test.tsx
@@ -192,6 +192,10 @@ const tests: ComponentTest[] = [
       }),
       _yext: { contentDeliveryAPIDomain: "https://cdn.yextapis.com" },
       c_nearbyHeader: "Nearby",
+      yextDisplayCoordinate: {
+        latitude: 25.73398,
+        longitude: -80.319968,
+      },
     },
     props: {
       data: {
@@ -361,6 +365,10 @@ const tests: ComponentTest[] = [
       }),
       _yext: { contentDeliveryAPIDomain: "https://cdn.yextapis.com" },
       c_nearbyHeader: "Nearby",
+      yextDisplayCoordinate: {
+        latitude: 25.73398,
+        longitude: -80.319968,
+      },
     },
     props: {
       styles: {

diff --git a/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocations.tsx b/packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocations.tsx
@@ -15,16 +15,9 @@ import {
   VisibilityWrapper,
   msg,
   HeadingTextProps,
-  Body,
-  pt,
 } from "@yext/visual-editor";
 import { AnalyticsScopeProvider } from "@yext/pages-components";
-import {
-  defaultNearbyLocationsCardsProps,
-  NearbyLocationCardsWrapperProps,
-} from "./NearbyLocationsCardsWrapper";
-import { MapPinOff } from "lucide-react";
-import { useTemplateMetadata } from "../../../internal/hooks/useMessageReceivers";
+import { defaultNearbyLocationsCardsProps } from "./NearbyLocationsCardsWrapper";
 
 export interface NearbyLocationsSectionProps {
   /**
@@ -99,63 +92,16 @@ const nearbyLocationsSectionFields: Fields<NearbyLocationsSectionProps> = {
   ),
 };
 
-/** @internal */
-const NearbyLocationsEmptyState: React.FC<{
-  backgroundColor?: BackgroundStyle;
-  radius?: number;
-}> = ({ backgroundColor, radius }) => {
-  const templateMetadata = useTemplateMetadata();
-  const entityTypeDisplayName =
-    templateMetadata?.entityTypeDisplayName?.toLowerCase();
-
-  return (
-    <PageSection background={backgroundColor}>
-      <div className="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">
-        <MapPinOff 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">
-            {pt(
-              "nearbyLocationsEmptyStateSectionHidden",
-              "Section hidden for this {{entityType}}",
-              {
-                entityType: entityTypeDisplayName
-                  ? entityTypeDisplayName
-                  : "page",
-              }
-            )}
-          </Body>
-          <Body variant="base" className="text-gray-500 font-normal">
-            {pt(
-              "nearbyLocationsEmptyState",
-              "No {{entityType}} within {{radius}} miles",
-              {
-                entityType: entityTypeDisplayName
-                  ? entityTypeDisplayName
-                  : "entity",
-                radius: radius ?? 10,
-              }
-            )}
-          </Body>
-        </div>
-      </div>
-    </PageSection>
-  );
-};
-
 const NearbyLocationsComponent: PuckComponent<NearbyLocationsSectionProps> = (
   props
 ) => {
   const { styles, slots, puck } = props;
   const cardsWrapperRef = React.useRef<HTMLDivElement>(null);
-  const [showSection, setShowSection] = React.useState<boolean>(true);
-  const [isEmptyState, setIsEmptyState] = React.useState<boolean>(false);
-
-  // Get cards wrapper props to access radius for empty state
-  const cardsWrapperSlot = slots.CardsWrapperSlot;
-  const cardsWrapperProps =
-    Array.isArray(cardsWrapperSlot) && cardsWrapperSlot[0]
-      ? (cardsWrapperSlot[0].props as NearbyLocationCardsWrapperProps)
-      : undefined;
+  // Hide the header if there are no nearby locations and it is the editor
+  const [showHeading, setShowHeading] = React.useState<boolean>(true);
+  // Hide the entire section if there are no nearby locations and it is the live page
+  const [hideEntireSection, setHideEntireSection] =
+    React.useState<boolean>(false);
 
   React.useEffect(() => {
     // Watch the cards wrapper element to see if any cards are rendered
@@ -172,8 +118,8 @@ const NearbyLocationsComponent: PuckComponent<NearbyLocationsSectionProps> = (
       const isLoading = element.querySelector('[data-loading="true"]') !== null; // Check for loading state
       const shouldShow =
         hasContent || isLoading || (hasHeight && !hasEmptyStateMarker);
-      setShowSection(shouldShow);
-      setIsEmptyState(hasEmptyStateMarker && puck.isEditing);
+      setShowHeading(shouldShow);
+      setHideEntireSection(hasEmptyStateMarker && !puck.isEditing);
     };
 
     const observer = new ResizeObserver(() => {
@@ -201,22 +147,14 @@ const NearbyLocationsComponent: PuckComponent<NearbyLocationsSectionProps> = (
   }, [puck.isEditing]);
 
   // Show empty state if detected
-  if (isEmptyState) {
-    return (
-      <NearbyLocationsEmptyState
-        backgroundColor={styles?.backgroundColor}
-        radius={cardsWrapperProps?.data?.radius}
-      />
-    );
+  if (hideEntireSection) {
+    return <></>;
   }
 
   return (
-    <PageSection
-      background={styles?.backgroundColor}
-      outerClassName={showSection ? undefined : "p-0 m-0"}
-    >
+    <PageSection background={styles?.backgroundColor}>
       <div className="space-y-6">
-        {showSection && (
+        {showHeading && (
           <slots.SectionHeadingSlot style={{ height: "auto" }} allow={[]} />
         )}
         <div ref={cardsWrapperRef}>

diff --git a/...visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx b/...visual-editor/src/components/pageSections/NearbyLocations/NearbyLocationsCardsWrapper.tsx
@@ -2,30 +2,25 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { ComponentConfig, Fields, PuckComponent } from "@measured/puck";
 import { useQuery } from "@tanstack/react-query";
-import { Coordinate } from "@yext/pages-components";
 import {
   backgroundColors,
   BackgroundStyle,
   Body,
   HeadingLevel,
   msg,
+  pt,
   resolveComponentData,
   useDocument,
-  YextEntityField,
   YextField,
 } from "@yext/visual-editor";
 import { parseDocument, fetchNearbyLocations } from "./utils";
 import { NearbyLocationCard } from "./NearbyLocationCard";
+import { useTemplateMetadata } from "../../../internal/hooks/useMessageReceivers";
+import { MapPinOff } from "lucide-react";
 
 export type NearbyLocationCardsWrapperProps = {
   /** The search parameters for finding nearby locations. */
   data: {
-    /**
-     * The central coordinate (`latitude`, `longitude`) to search from.
-     * @defaultValue 'yextDisplayCoordinate' field
-     */
-    coordinate: YextEntityField<Coordinate>;
-
     /**
      * The search radius in miles.
      * @defaultValue 10
@@ -82,13 +77,6 @@ const nearbyLocationCardsWrapperFields: Fields<NearbyLocationCardsWrapperProps>
     data: YextField(msg("fields.data", "Data"), {
       type: "object",
       objectFields: {
-        coordinate: YextField<any, Coordinate>(
-          msg("fields.coordinates", "Coordinates"),
-          {
-            type: "entityField",
-            filter: { types: ["type.coordinate"] },
-          }
-        ),
         radius: YextField(msg("fields.radiusMiles", "Radius (Miles)"), {
           type: "number",
           min: 0,
@@ -204,7 +192,14 @@ const NearbyLocationCardsWrapperComponent: PuckComponent<
   const locale = i18n.language;
 
   const coordinate = resolveComponentData(
-    data?.coordinate,
+    {
+      field: "yextDisplayCoordinate",
+      constantValue: {
+        latitude: 0,
+        longitude: 0,
+      },
+      constantValueEnabled: false,
+    },
     locale,
     streamDocument
   );
@@ -279,13 +274,14 @@ const NearbyLocationCardsWrapperComponent: PuckComponent<
     );
   }
 
-  // do not render the component if there's no data or it's not enabled
+  // Render an empty state if no nearby locations are found
+  // The parent component will hide the entire section if it is the live page
   if (!enableNearbyLocations || !nearbyLocationsData?.response?.docs?.length) {
-    // Return a marker element so parent can detect empty state
     if (puck.isEditing) {
-      return <div data-empty-state="true" style={{ display: "none" }} />;
+      return <NearbyLocationsEmptyState radius={data.radius} />;
+    } else {
+      return <div data-empty-state="true" />;
     }
-    return <></>;
   }
 
   return (
@@ -317,13 +313,6 @@ const NearbyLocationCardsWrapperComponent: PuckComponent<
 export const defaultNearbyLocationsCardsProps: NearbyLocationCardsWrapperProps =
   {
     data: {
-      coordinate: {
-        field: "yextDisplayCoordinate",
-        constantValue: {
-          latitude: 0,
-          longitude: 0,
-        },
-      },
       radius: 10,
       limit: 3,
     },
@@ -351,3 +340,46 @@ export const NearbyLocationCardsWrapper: ComponentConfig<{
   defaultProps: defaultNearbyLocationsCardsProps,
   render: (props) => <NearbyLocationCardsWrapperComponent {...props} />,
 };
+
+/** @internal */
+const NearbyLocationsEmptyState: React.FC<{
+  radius?: number;
+}> = ({ radius }) => {
+  const templateMetadata = useTemplateMetadata();
+  const entityTypeDisplayName =
+    templateMetadata?.entityTypeDisplayName?.toLowerCase();
+
+  return (
+    <div
+      data-empty-state="true"
+      className="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"
+    >
+      <MapPinOff 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">
+          {pt(
+            "nearbyLocationsEmptyStateSectionHidden",
+            "Section hidden for this {{entityType}}",
+            {
+              entityType: entityTypeDisplayName
+                ? entityTypeDisplayName
+                : "page",
+            }
+          )}
+        </Body>
+        <Body variant="base" className="text-gray-500 font-normal">
+          {pt(
+            "nearbyLocationsEmptyState",
+            "No {{entityType}} within {{radius}} miles",
+            {
+              entityType: entityTypeDisplayName
+                ? entityTypeDisplayName
+                : "entity",
+              radius: radius ?? 10,
+            }
+          )}
+        </Body>
+      </div>
+    </div>
+  );
+};
diff --git a/...iewsSection/[desktop] default props with document data (after interactions).png b/...iewsSection/[desktop] default props with document data (after interactions).png
diff --git a/...sting/screenshots/ReviewsSection/[desktop] default props with document data.png b/...sting/screenshots/ReviewsSection/[desktop] default props with document data.png
diff --git a/...sSection/[desktop] version 10 props with French locale (after interactions).png b/...sSection/[desktop] version 10 props with French locale (after interactions).png
diff --git a/...ng/screenshots/ReviewsSection/[desktop] version 10 props with French locale.png b/...ng/screenshots/ReviewsSection/[desktop] version 10 props with French locale.png
diff --git a/...sSection/[desktop] version 10 props with document data (after interactions).png b/...sSection/[desktop] version 10 props with document data (after interactions).png
diff --git a/...ng/screenshots/ReviewsSection/[desktop] version 10 props with document data.png b/...ng/screenshots/ReviewsSection/[desktop] version 10 props with document data.png
diff --git a/...sSection/[desktop] version 39 props with document data (after interactions).png b/...sSection/[desktop] version 39 props with document data (after interactions).png
diff --git a/...ng/screenshots/ReviewsSection/[desktop] version 39 props with document data.png b/...ng/screenshots/ReviewsSection/[desktop] version 39 props with document data.png
diff --git a/...viewsSection/[mobile] default props with document data (after interactions).png b/...viewsSection/[mobile] default props with document data (after interactions).png
diff --git a/...esting/screenshots/ReviewsSection/[mobile] default props with document data.png b/...esting/screenshots/ReviewsSection/[mobile] default props with document data.png
diff --git a/...wsSection/[mobile] version 10 props with French locale (after interactions).png b/...wsSection/[mobile] version 10 props with French locale (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[mobile] version 10 props with French locale.png b/...ing/screenshots/ReviewsSection/[mobile] version 10 props with French locale.png
diff --git a/...wsSection/[mobile] version 10 props with document data (after interactions).png b/...wsSection/[mobile] version 10 props with document data (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[mobile] version 10 props with document data.png b/...ing/screenshots/ReviewsSection/[mobile] version 10 props with document data.png
diff --git a/...wsSection/[mobile] version 39 props with document data (after interactions).png b/...wsSection/[mobile] version 39 props with document data (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[mobile] version 39 props with document data.png b/...ing/screenshots/ReviewsSection/[mobile] version 39 props with document data.png
diff --git a/...viewsSection/[tablet] default props with document data (after interactions).png b/...viewsSection/[tablet] default props with document data (after interactions).png
diff --git a/...esting/screenshots/ReviewsSection/[tablet] default props with document data.png b/...esting/screenshots/ReviewsSection/[tablet] default props with document data.png
diff --git a/...wsSection/[tablet] version 10 props with French locale (after interactions).png b/...wsSection/[tablet] version 10 props with French locale (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[tablet] version 10 props with French locale.png b/...ing/screenshots/ReviewsSection/[tablet] version 10 props with French locale.png
diff --git a/...wsSection/[tablet] version 10 props with document data (after interactions).png b/...wsSection/[tablet] version 10 props with document data (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[tablet] version 10 props with document data.png b/...ing/screenshots/ReviewsSection/[tablet] version 10 props with document data.png
diff --git a/...wsSection/[tablet] version 39 props with document data (after interactions).png b/...wsSection/[tablet] version 39 props with document data (after interactions).png
diff --git a/...ing/screenshots/ReviewsSection/[tablet] version 39 props with document data.png b/...ing/screenshots/ReviewsSection/[tablet] version 39 props with document data.png
diff --git a/packages/visual-editor/src/vite-plugin/defaultLayoutData.ts b/packages/visual-editor/src/vite-plugin/defaultLayoutData.ts
@@ -1,7 +1,7 @@
 const mainDefaultLayout = {
   root: {
     props: {
-      version: 41,
+      version: 46,
       title: { field: "name", constantValue: "", constantValueEnabled: false },
       description: {
         field: "description",
@@ -3376,10 +3376,6 @@ const mainDefaultLayout = {
               props: {
                 id: "NearbyLocationCardsWrapper-7d43eba1-9a72-49eb-876d-3b77d672198b",
                 data: {
-                  coordinate: {
-                    field: "yextDisplayCoordinate",
-                    constantValue: { latitude: 0, longitude: 0 },
-                  },
                   radius: 10,
                   limit: 3,
                 },