feat: empty state for NearbyLocations #868
Conversation
colton-demetriou
commented
Nov 5, 2025
colton-demetriou
commented
colton-demetriou
requested review from
asanehisa,
benlife5,
briantstephan and
mkilpatrick
|
Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information. |
WalkthroughAdded two new localization keys ( Sequence Diagram(s)sequenceDiagram
participant Editor as User / Editor
participant Nearby as NearbyLocations Component
participant Puck as Puck (editor state)
participant Locale as Localization JSON
Editor->>Nearby: mount / render
Nearby->>Puck: read puck.isEditing
alt editor mode AND no nearby data or disabled
Nearby->>Locale: pt("nearbyLocationsEmptyStateSectionHidden"), pt("nearbyLocationsEmptyState") with entityType & radius (fallback 10)
Locale-->>Nearby: localized strings
Note right of Nearby#lightblue: render editor placeholder\n(MapPinOff + messages)
Nearby-->>Editor: display editor empty-state
else non-editor or data present
Nearby->>Nearby: normal data checks & render standard UI
Nearby-->>Editor: display standard nearby locations UI
end
sequenceDiagram
participant Editor as User / Editor
participant Mapbox as MapboxStaticMap Component
participant Locale as Localization JSON
Editor->>Mapbox: mount / render (missing API key)
alt editor mode AND missing API key
Mapbox->>Locale: pt("staticMapEmptyStateSectionHidden"), pt("staticMapEmptyStateAddApiKey")
Locale-->>Mapbox: localized strings
Note right of Mapbox#lightgreen: render editor empty-state UI\n(using pt(...) instead of t(...))
Mapbox-->>Editor: display static map editor empty-state
else normal flow
Mapbox->>Mapbox: render map or non-editor empty-state
Mapbox-->>Editor: display normal UI
end
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
packages/visual-editor/locales/cs/visual-editor.json(1 hunks)packages/visual-editor/locales/da/visual-editor.json(1 hunks)packages/visual-editor/locales/de/visual-editor.json(1 hunks)packages/visual-editor/locales/en-GB/visual-editor.json(1 hunks)packages/visual-editor/locales/en/visual-editor.json(1 hunks)packages/visual-editor/locales/es/visual-editor.json(1 hunks)packages/visual-editor/locales/et/visual-editor.json(1 hunks)packages/visual-editor/locales/fi/visual-editor.json(1 hunks)packages/visual-editor/locales/fr/visual-editor.json(1 hunks)packages/visual-editor/locales/hr/visual-editor.json(1 hunks)packages/visual-editor/locales/hu/visual-editor.json(1 hunks)packages/visual-editor/locales/it/visual-editor.json(1 hunks)packages/visual-editor/locales/ja/visual-editor.json(1 hunks)packages/visual-editor/locales/lt/visual-editor.json(1 hunks)packages/visual-editor/locales/lv/visual-editor.json(1 hunks)packages/visual-editor/locales/nb/visual-editor.json(1 hunks)packages/visual-editor/locales/nl/visual-editor.json(1 hunks)packages/visual-editor/locales/pl/visual-editor.json(1 hunks)packages/visual-editor/locales/pt/visual-editor.json(1 hunks)packages/visual-editor/locales/ro/visual-editor.json(1 hunks)packages/visual-editor/locales/sk/visual-editor.json(1 hunks)packages/visual-editor/locales/sv/visual-editor.json(1 hunks)packages/visual-editor/locales/tr/visual-editor.json(1 hunks)packages/visual-editor/locales/zh-TW/visual-editor.json(1 hunks)packages/visual-editor/locales/zh/visual-editor.json(1 hunks)packages/visual-editor/src/components/pageSections/NearbyLocations.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (2)
packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)packages/visual-editor/src/utils/index.ts (1)
themeManagerCn(9-9)
🔇 Additional comments (21)
packages/visual-editor/locales/et/visual-editor.json (1)
455-457: Translation key correctly added with proper formatting and alphabetical placement.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly positioned between "name" and "noAvailableFields" in alphabetical order, with correct JSON syntax (proper string delimiters and comma placement). The Estonian translation reads naturally for the intended empty-state message.Please verify that this translation key is referenced in the NearbyLocations component code and that it's been consistently added across all 25 locale files mentioned in the PR summary.
packages/visual-editor/locales/sk/visual-editor.json (1)
457-457: Translation key successfully added to all 25 locale files with correct syntax and formatting.Verification confirms
nearbyLocationsEmptyStateSectionHiddenis present across all visual-editor locale files with proper JSON structure and alphabetical placement.packages/visual-editor/locales/cs/visual-editor.json (1)
457-457: ✅ Localization key properly added and ordered.The new
nearbyLocationsEmptyStateSectionHiddenkey is consistently placed in alphabetical order with an appropriate Czech translation. The change follows the established localization structure.packages/visual-editor/locales/tr/visual-editor.json (1)
456-456: ✅ Turkish localization consistent with other locales.The key is properly positioned alphabetically and includes an appropriate Turkish translation.
packages/visual-editor/locales/zh-TW/visual-editor.json (1)
456-456: ✅ Traditional Chinese localization correctly added.The key placement and Traditional Chinese translation are consistent with the broader localization pattern.
packages/visual-editor/locales/pl/visual-editor.json (1)
457-457: ✅ Polish localization properly integrated.The new translation key is correctly positioned and includes an appropriate Polish translation matching the intended meaning across all locales.
packages/visual-editor/locales/nl/visual-editor.json (1)
456-456: ✅ Dutch localization consistent and complete.The key is properly alphabetically ordered with an appropriate Dutch translation.
packages/visual-editor/locales/sv/visual-editor.json (1)
457-457: ✅ Swedish localization correctly implemented.The addition follows the established pattern with proper alphabetical ordering and an appropriate Swedish translation.
packages/visual-editor/locales/de/visual-editor.json (1)
455-455: ✅ German localization properly added.The key is correctly positioned and includes an appropriate German translation consistent with the other locales.
packages/visual-editor/locales/lv/visual-editor.json (1)
456-456: ✅ Latvian localization complete and consistent.The new translation key is properly positioned and includes an appropriate Latvian translation. All reviewed locale files follow an identical, well-structured pattern.
packages/visual-editor/locales/fi/visual-editor.json (1)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Finnish translation.packages/visual-editor/locales/en-GB/visual-editor.json (1)
455-455: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate British English translation.packages/visual-editor/locales/es/visual-editor.json (1)
455-455: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Spanish translation.packages/visual-editor/locales/nb/visual-editor.json (1)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Norwegian Bokmål translation.packages/visual-editor/locales/hu/visual-editor.json (1)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Hungarian translation.packages/visual-editor/locales/hr/visual-editor.json (1)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Croatian translation.packages/visual-editor/locales/pt/visual-editor.json (1)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Portuguese translation.packages/visual-editor/locales/ro/visual-editor.json (2)
456-456: Localization entry added correctly.The new
nearbyLocationsEmptyStateSectionHiddenkey is properly formatted and positioned, with an appropriate Romanian translation.
1-634: Localization completeness verified across all 25 locales.All 25 locale files contain the
nearbyLocationsEmptyStateSectionHiddenkey with full coverage. No missing locales detected. Consistency and uniform key naming confirmed.packages/visual-editor/locales/zh/visual-editor.json (1)
456-456: LGTM! Translation key added correctly.The new localization key
nearbyLocationsEmptyStateSectionHiddenhas been added consistently across all locale files to support the empty state feature.packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
42-43: New dependencies imported for empty state feature.The imports support the editor-mode empty state placeholder UI:
MapPinOfficon displays when no API key is availablethemeManagerCnapplies consistent styling
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
494-497: Missing translation key (already flagged).As noted in the previous review,
nearbyLocationsEmptyStateNoLocationsis not defined in any locale file and uses template literal interpolation instead of react-i18next's standard syntax.Per the earlier review: add the key to all locale files with
{{radius}}placeholder syntax, then pass the interpolation object:- <Body variant="base" className="text-gray-500 font-normal"> - {pt( - "nearbyLocationsEmptyStateNoLocations", - `No locations within ${data?.radius ?? 10} miles` - )} - </Body> + <Body variant="base" className="text-gray-500 font-normal"> + {pt( + "nearbyLocationsEmptyStateNoLocations", + { radius: data?.radius ?? 10 } + )} + </Body>
🧹 Nitpick comments (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
476-480: Consider separate empty states for distinct scenarios.The current condition merges two different cases: missing configuration (
!enableNearbyLocations) and no results found. Your comment suggests you're already considering whether these should have separate states.While the merged approach works, distinct messages could improve clarity:
- Missing config → "Configuration incomplete" with guidance
- No results → "No locations within X miles" (current message)
This is an optional refinement rather than a defect.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-29T22:00:03.843Z
Learnt from: mkouzel-yext
Repo: yext/visual-editor PR: 833
File: packages/visual-editor/src/components/Locator.tsx:1050-1057
Timestamp: 2025-10-29T22:00:03.843Z
Learning: In packages/visual-editor/src/components/Locator.tsx, the AppliedFilters component is intentionally rendered in two locations (inside the filter modal and outside it) as per the design requirements. This dual rendering should not be flagged as a duplicate issue.
Applied to files:
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)
🔇 Additional comments (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
30-30: LGTM! Appropriate imports for the empty state.The
ptimport is correct for editor-only translations, andMapPinOffis a semantically appropriate icon for the no-locations state.Also applies to: 43-43
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
packages/visual-editor/locales/cs/visual-editor.json(1 hunks)packages/visual-editor/locales/da/visual-editor.json(1 hunks)packages/visual-editor/locales/de/visual-editor.json(1 hunks)packages/visual-editor/locales/en-GB/visual-editor.json(1 hunks)packages/visual-editor/locales/en/visual-editor.json(1 hunks)packages/visual-editor/locales/es/visual-editor.json(1 hunks)packages/visual-editor/locales/et/visual-editor.json(1 hunks)packages/visual-editor/locales/fi/visual-editor.json(1 hunks)packages/visual-editor/locales/fr/visual-editor.json(1 hunks)packages/visual-editor/locales/hr/visual-editor.json(1 hunks)packages/visual-editor/locales/hu/visual-editor.json(1 hunks)packages/visual-editor/locales/it/visual-editor.json(1 hunks)packages/visual-editor/locales/ja/visual-editor.json(1 hunks)packages/visual-editor/locales/lt/visual-editor.json(1 hunks)packages/visual-editor/locales/lv/visual-editor.json(1 hunks)packages/visual-editor/locales/nb/visual-editor.json(1 hunks)packages/visual-editor/locales/nl/visual-editor.json(1 hunks)packages/visual-editor/locales/pl/visual-editor.json(1 hunks)packages/visual-editor/locales/pt/visual-editor.json(1 hunks)packages/visual-editor/locales/ro/visual-editor.json(1 hunks)packages/visual-editor/locales/sk/visual-editor.json(1 hunks)packages/visual-editor/locales/sv/visual-editor.json(1 hunks)packages/visual-editor/locales/tr/visual-editor.json(1 hunks)packages/visual-editor/locales/zh-TW/visual-editor.json(1 hunks)packages/visual-editor/locales/zh/visual-editor.json(1 hunks)packages/visual-editor/src/components/pageSections/NearbyLocations.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (11)
- packages/visual-editor/locales/sk/visual-editor.json
- packages/visual-editor/locales/en-GB/visual-editor.json
- packages/visual-editor/locales/en/visual-editor.json
- packages/visual-editor/locales/nl/visual-editor.json
- packages/visual-editor/locales/fi/visual-editor.json
- packages/visual-editor/locales/nb/visual-editor.json
- packages/visual-editor/locales/pt/visual-editor.json
- packages/visual-editor/locales/lv/visual-editor.json
- packages/visual-editor/locales/cs/visual-editor.json
- packages/visual-editor/locales/fr/visual-editor.json
- packages/visual-editor/locales/zh-TW/visual-editor.json
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: mkouzel-yext
Repo: yext/visual-editor PR: 833
File: packages/visual-editor/src/components/Locator.tsx:1050-1057
Timestamp: 2025-10-29T22:00:03.843Z
Learning: In packages/visual-editor/src/components/Locator.tsx, the AppliedFilters component is intentionally rendered in two locations (inside the filter modal and outside it) as per the design requirements. This dual rendering should not be flagged as a duplicate issue.
📚 Learning: 2025-10-29T22:00:03.843Z
Learnt from: mkouzel-yext
Repo: yext/visual-editor PR: 833
File: packages/visual-editor/src/components/Locator.tsx:1050-1057
Timestamp: 2025-10-29T22:00:03.843Z
Learning: In packages/visual-editor/src/components/Locator.tsx, the AppliedFilters component is intentionally rendered in two locations (inside the filter modal and outside it) as per the design requirements. This dual rendering should not be flagged as a duplicate issue.
Applied to files:
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (2)
packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
TemplateMetadataContext(167-167)packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
[error] 483-483: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
🔇 Additional comments (17)
packages/visual-editor/locales/pl/visual-editor.json (1)
457-458: Localization additions look good.The two new keys (
nearbyLocationsEmptyStateandnearbyLocationsEmptyStateSectionHidden) are properly positioned in alphabetical order after the "name" key, with appropriate Polish translations and correct template variable syntax.packages/visual-editor/locales/es/visual-editor.json (1)
455-456: Localization additions look good.The two new keys are properly placed in alphabetical order with accurate Spanish translations and consistent placeholder formatting ({{entityType}} and {{radius}}).
packages/visual-editor/locales/it/visual-editor.json (1)
456-457: Localization additions look good.Italian translations are properly added in alphabetical order with correct syntax and messaging for the nearby locations empty state feature.
packages/visual-editor/locales/ja/visual-editor.json (1)
456-457: Localization additions look good.Japanese translations are properly integrated in alphabetical order with appropriate template variable handling for entity type and radius parameters.
packages/visual-editor/locales/et/visual-editor.json (1)
456-457: Localization additions look good.Estonian translations are properly positioned in alphabetical order with consistent syntax and appropriate phrasing for the empty state and hidden section messages.
packages/visual-editor/locales/da/visual-editor.json (1)
457-458: Localization additions look good.Danish translations are correctly added in alphabetical order with proper placeholder syntax and contextually appropriate messaging.
packages/visual-editor/locales/lt/visual-editor.json (1)
456-457: Localization additions look good.Lithuanian translations are properly integrated in alphabetical order with correct template variable syntax and appropriate messaging.
packages/visual-editor/locales/ro/visual-editor.json (1)
456-457: Localization additions look good.Romanian translations are correctly positioned in alphabetical order with consistent syntax and appropriate messaging for the nearby locations empty state UI.
packages/visual-editor/locales/de/visual-editor.json (1)
455-456: LGTM! Translation keys added correctly.The two new localization keys for the NearbyLocations empty state are properly formatted with i18next interpolation placeholders (
{{entityType}},{{radius}}).packages/visual-editor/locales/hu/visual-editor.json (1)
456-457: LGTM! Hungarian translations added correctly.The localization keys are properly formatted with the required interpolation variables.
packages/visual-editor/locales/tr/visual-editor.json (1)
456-457: LGTM! Turkish translations added correctly.The localization keys follow the correct i18next interpolation format.
packages/visual-editor/locales/sv/visual-editor.json (1)
457-458: LGTM! Swedish translations added correctly.The new empty state keys are properly formatted with interpolation placeholders.
packages/visual-editor/locales/hr/visual-editor.json (1)
456-457: LGTM! Croatian translations added correctly.The localization keys are properly structured with the required interpolation variables.
packages/visual-editor/locales/zh/visual-editor.json (1)
456-457: LGTM! Chinese translations added correctly.The empty state keys are properly formatted with i18next interpolation syntax.
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (3)
30-30: LGTM! Correct use ofptfor editor-only placeholders.Using
pt(placeholder translation) instead oftis appropriate for editor-only UI elements, as confirmed in the past review comments.
476-521: Verify the different fallback values forentityType.The two empty state messages use different fallback values when
entityTypeDisplayNameis unavailable:
- Line 499:
"page"- Line 510:
"entity"If this is intentional to provide more contextually appropriate defaults, consider adding a comment explaining the reasoning. Otherwise, consider using consistent fallbacks for both messages.
487-518: Editor empty state implementation looks good!The implementation correctly:
- Shows the empty state only in editor mode (
puck.isEditing)- Uses the correct translation keys that were added to all locale files
- Passes proper interpolation variables (
entityType,radius)- Provides a clear visual indicator with the
MapPinOfficon
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (1)
477-519: Consider distinguishing between "disabled" and "no results" scenarios.The empty state is triggered by two distinct conditions:
!enableNearbyLocations– missing required configuration (coordinates, API keys, etc.)- API query completed but returned no results
Currently, both messages are shown for either scenario:
- "Section hidden for this {{entityType}}" (more accurate for missing config)
- "No {{entityType}} within {{radius}} miles" (more accurate for empty results)
When configuration is missing, no search is actually performed, so stating "No {{entityType}} within X miles" may be semantically imprecise. Similarly, "Section hidden" might be misleading when results are simply empty.
Based on your comment "asking Elisabeth if this should be a separate state," this dual-message approach appears intentional, but you may want to verify whether showing both messages for both scenarios provides the clearest user experience.
Minor inconsistency: The fallback values differ between messages ("page" at line 499 vs. "entity" at line 510). This may be intentional for context but could be unified for consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: mkouzel-yext
Repo: yext/visual-editor PR: 833
File: packages/visual-editor/src/components/Locator.tsx:1050-1057
Timestamp: 2025-10-29T22:00:03.843Z
Learning: In packages/visual-editor/src/components/Locator.tsx, the AppliedFilters component is intentionally rendered in two locations (inside the filter modal and outside it) as per the design requirements. This dual rendering should not be flagged as a duplicate issue.
📚 Learning: 2025-10-29T22:00:03.843Z
Learnt from: mkouzel-yext
Repo: yext/visual-editor PR: 833
File: packages/visual-editor/src/components/Locator.tsx:1050-1057
Timestamp: 2025-10-29T22:00:03.843Z
Learning: In packages/visual-editor/src/components/Locator.tsx, the AppliedFilters component is intentionally rendered in two locations (inside the filter modal and outside it) as per the design requirements. This dual rendering should not be flagged as a duplicate issue.
Applied to files:
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (2)
packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
TemplateMetadataContext(167-167)packages/visual-editor/src/components/atoms/index.ts (2)
PageSection(9-9)Body(1-1)
🔇 Additional comments (2)
packages/visual-editor/src/components/pageSections/NearbyLocations.tsx (2)
30-30: LGTM!The new imports are appropriate:
ptfor editor-specific translations,MapPinOfffor the empty state icon, andTemplateMetadataContextfor accessing entity type metadata.Also applies to: 43-44
395-395: LGTM!The
useContexthook is now correctly placed at the top level of the component, resolving the previous critical issue where it was called conditionally. This follows React Hooks rules.
3 participants
