Skip to content

Conversation

@colton-demetriou
Copy link
Contributor

Screenshot 2025-11-05 at 11 28 11 AM

@github-actions
Copy link
Contributor

github-actions bot commented Nov 5, 2025

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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 5, 2025

Walkthrough

Adds two locale keys (reviewsEmptyStateNoReviews, reviewsEmptyStateSectionHidden) across visual-editor locales. Refactors ReviewsSectionInternal to a PuckComponent, introduces an internal ReviewsEmptyState component, and makes rendering editor-aware: when puck.isEditing and reviews are absent or the reviews data is not in a success state, ReviewsEmptyState is rendered; when not editing, behavior remains unchanged.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Editor as Visual Editor (puck)
  participant Component as ReviewsSectionInternal
  participant Data as ReviewsData
  participant Empty as ReviewsEmptyState
  participant UI as PageSection

  Note over Editor,Component: Editor-aware rendering added
  Editor->>Component: render({ puck, backgroundColor })
  Component->>Data: read reviews state
  alt data success and count > 0
    Component->>UI: render reviews list
  else puck.isEditing AND (no reviews or data not success)
    Component->>Empty: render ReviewsEmptyState (uses i18n keys)
    Empty->>UI: render editor placeholder (icon + label)
  else not editing AND (no reviews or data not success)
    Component->>UI: render nothing
  end
Loading

Possibly related PRs

  • feat: add mapbox empty state #864 — Adds editor empty-state UI and converts visual-editor components to PuckComponent signatures; touches same editor-integration pattern.

Suggested labels

create-dev-release

Suggested reviewers

  • briantstephan
  • mkilpatrick
  • asanehisa

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: empty state for reviews section' directly and clearly summarizes the main change—adding an empty state UI for the reviews section, which is confirmed by the localization additions and ReviewsSection.tsx modifications.
Description check ✅ Passed The description includes a screenshot of the implemented feature, which is directly related to the changeset (empty state for reviews section). While minimal, it conveys the practical context of what was built.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch empty-reviews

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between effea40 and ad442ec.

📒 Files selected for processing (1)
  • packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (7 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-06T14:55:12.385Z
Learnt from: benlife5
Repo: yext/visual-editor PR: 862
File: packages/visual-editor/src/utils/schema/resolveSchema.ts:118-135
Timestamp: 2025-11-06T14:55:12.385Z
Learning: In `packages/visual-editor/src/utils/schema/resolveSchema.ts`, the `OpeningHoursSchema` and `PhotoGallerySchema` functions from `yext/pages-components` contain internal type validation and handle invalid inputs gracefully (returning empty objects or undefined) rather than throwing TypeErrors, so no pre-validation guards are needed before calling them.

Applied to files:

  • packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
  • BackgroundStyle (35-42)
packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
  • useTemplateMetadata (167-167)
packages/visual-editor/src/components/atoms/index.ts (2)
  • PageSection (9-9)
  • Body (1-1)
packages/visual-editor/src/hooks/useDocument.tsx (1)
  • useDocument (31-31)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx

[error] 124-124: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

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 (2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (2)

36-74: LGTM! Hook violation fixed.

The useTemplateMetadata() hook is now called unconditionally at the top level, correctly addressing the previous Rules of Hooks violation. The implementation properly handles missing metadata with sensible fallbacks and applies appropriate text transformations for natural UI copy.


155-161: Empty state logic correctly preserves loading UI.

The condition !isLoading && reviewCount === 0 properly gates the empty state on "finished loading with zero reviews," addressing the previous concern about maintaining the loading state. When isLoading is true, the component continues to render the normal UI with the "Loading reviews..." message visible.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d394ba and c6bdc6f.

📒 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/ReviewsSection.tsx (6 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/index.ts (2)
  • BackgroundStyle (38-38)
  • themeManagerCn (9-9)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
  • BackgroundStyle (35-42)
packages/visual-editor/src/components/atoms/index.ts (2)
  • PageSection (9-9)
  • Body (1-1)
packages/visual-editor/src/hooks/useDocument.tsx (1)
  • useDocument (31-31)
🔇 Additional comments (16)
packages/visual-editor/locales/lt/visual-editor.json (1)

524-525: Locale additions look good.

Added two new Lithuanian translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/cs/visual-editor.json (1)

525-526: Locale additions look good.

Added two new Czech translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/hu/visual-editor.json (1)

524-525: Locale additions look good.

Added two new Hungarian translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/fi/visual-editor.json (1)

524-525: Locale additions look good.

Added two new Finnish translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/en/visual-editor.json (1)

523-524: Locale additions look good.

Added two new English translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/es/visual-editor.json (1)

523-524: Locale additions look good.

Added two new Spanish translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/zh/visual-editor.json (1)

524-525: Locale additions look good.

Added two new Chinese translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/pt/visual-editor.json (1)

524-525: Locale additions look good.

Added two new Portuguese translations for empty-state review messaging. Keys are correctly placed in alphabetical order and follow existing naming conventions.

packages/visual-editor/locales/nb/visual-editor.json (1)

524-525: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Norwegian locale with valid JSON syntax and appropriate translations.

packages/visual-editor/locales/et/visual-editor.json (1)

524-525: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Estonian locale with valid JSON syntax and appropriate translations.

packages/visual-editor/locales/en-GB/visual-editor.json (1)

523-524: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to English (GB) locale with clear, idiomatic English phrasing and valid JSON syntax.

packages/visual-editor/locales/de/visual-editor.json (1)

523-524: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to German locale with appropriate German phrasing and valid JSON syntax.

packages/visual-editor/locales/da/visual-editor.json (1)

525-526: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Danish locale with appropriate translations and valid JSON syntax.

packages/visual-editor/locales/nl/visual-editor.json (1)

524-525: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Dutch locale with appropriate Dutch phrasing and valid JSON syntax.

packages/visual-editor/locales/tr/visual-editor.json (1)

524-525: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Turkish locale with appropriate translations and valid JSON syntax.

packages/visual-editor/locales/lv/visual-editor.json (1)

524-525: ✓ Localization keys added correctly.

The two empty-state review keys are properly added to Latvian locale with appropriate translations and valid JSON syntax.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)

164-170: Loading state issue already flagged; add optional chaining for puck.

The loading state concern (returning empty output when reviewsStatus !== "success") was already raised in a previous review.

Additionally, line 166 should use optional chaining on puck:

-    if (puck.isEditing) {
+    if (puck?.isEditing) {
       return <ReviewsEmptyState backgroundColor={backgroundColor} />;
     }

Without optional chaining, the code will throw if puck is undefined.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c6bdc6f and 1a60899.

📒 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/ReviewsSection.tsx (6 hunks)
🚧 Files skipped from review as they are similar to previous changes (18)
  • packages/visual-editor/locales/pt/visual-editor.json
  • packages/visual-editor/locales/lt/visual-editor.json
  • packages/visual-editor/locales/hu/visual-editor.json
  • packages/visual-editor/locales/it/visual-editor.json
  • packages/visual-editor/locales/tr/visual-editor.json
  • packages/visual-editor/locales/sv/visual-editor.json
  • packages/visual-editor/locales/es/visual-editor.json
  • packages/visual-editor/locales/fr/visual-editor.json
  • packages/visual-editor/locales/da/visual-editor.json
  • packages/visual-editor/locales/zh-TW/visual-editor.json
  • packages/visual-editor/locales/hr/visual-editor.json
  • packages/visual-editor/locales/lv/visual-editor.json
  • packages/visual-editor/locales/en-GB/visual-editor.json
  • packages/visual-editor/locales/cs/visual-editor.json
  • packages/visual-editor/locales/et/visual-editor.json
  • packages/visual-editor/locales/sk/visual-editor.json
  • packages/visual-editor/locales/nl/visual-editor.json
  • packages/visual-editor/locales/nb/visual-editor.json
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
  • BackgroundStyle (35-42)
packages/visual-editor/src/internal/hooks/useMessageReceivers.ts (1)
  • useTemplateMetadata (167-167)
packages/visual-editor/src/components/atoms/index.ts (2)
  • PageSection (9-9)
  • Body (1-1)
packages/visual-editor/src/hooks/useDocument.tsx (1)
  • useDocument (31-31)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx

[error] 41-41: 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 (10)
packages/visual-editor/locales/fi/visual-editor.json (1)

524-525: LGTM!

The new Finnish localization keys are well-formatted, use consistent placeholder syntax with the rest of the file, and follow the established naming conventions. The translations read correctly for Finnish grammar.

packages/visual-editor/locales/pl/visual-editor.json (1)

525-526: Polish locale entries for reviews empty state look structurally sound.

Both new keys follow the established JSON convention and use the {{entityType}} placeholder consistently with other similar keys in the file (e.g., line 26, 121). The logical placement adjacent to responseFrom groups them with other review-related content appropriately.

Please verify that:

  1. The Polish translations are grammatically natural and align with terminology used elsewhere in the Polish locale
  2. The keys are correctly referenced and used in the ReviewsSection component logic (mentioned in the PR summary)

If you have access to the other localized versions (en, de, etc.) that were updated similarly, a quick cross-reference would confirm the message intent is preserved across languages.

packages/visual-editor/locales/zh/visual-editor.json (1)

524-525: Chinese locale translations verified across all language variants.

The two new keys (reviewsEmptyStateNoReviews and reviewsEmptyStateSectionHidden) are properly formatted, correctly positioned alphabetically, and consistently implemented across all 25 locale files in the codebase. The Chinese translations accurately convey the intended messaging.

packages/visual-editor/locales/en/visual-editor.json (1)

523-524: LGTM! Locale keys properly support dynamic entity types.

The new empty state keys use {{entityType}} placeholders for flexible reuse across different entity types, which aligns with the editor's template-aware architecture.

packages/visual-editor/locales/de/visual-editor.json (1)

523-524: LGTM! German translations properly maintain placeholder structure.

packages/visual-editor/locales/ro/visual-editor.json (1)

524-525: LGTM! Romanian translations maintain consistent structure.

packages/visual-editor/locales/ja/visual-editor.json (1)

524-525: LGTM! Japanese translations maintain consistent structure.

packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (3)

4-4: LGTM! New imports support editor-aware empty state functionality.

The imports are properly scoped and all utilized in the new ReviewsEmptyState component and PuckComponent integration.

Also applies to: 23-23, 25-25, 27-27


107-110: LGTM! PuckComponent integration enables editor-aware behavior.

The type change and prop destructuring properly expose the puck.isEditing flag for conditional empty state rendering.


185-185: LGTM! Background prop usage is consistent with destructuring.

benlife5
benlife5 previously approved these changes Nov 6, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)

159-164: Restore the loading state and use optional chaining.

By checking reviewsStatus !== "success" on line 160, the component returns the empty state during the initial fetch when status is "pending". This removes the Loading reviews... message from ReviewsHeader (line 208) and causes a layout jump when data arrives.

Additionally, line 161 should use optional chaining for defensive programming.

Apply this diff to show empty state only after loading completes with zero reviews:

-  if (reviewsStatus !== "success" || (!isLoading && reviewCount === 0)) {
-    if (puck.isEditing) {
+  if (reviewsStatus === "success" && reviewCount === 0) {
+    if (puck?.isEditing) {
       return <ReviewsEmptyState backgroundColor={backgroundColor} />;
     }
     return <></>;
   }

This ensures:

  • During loading: renders ReviewsHeader with "Loading reviews..." message
  • After successful fetch with zero reviews: shows ReviewsEmptyState in editor mode
  • After successful fetch with data: renders reviews normally
🧹 Nitpick comments (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (1)

36-74: Consider localization concerns with manual capitalization.

The component manually transforms entityTypeDisplayName using .toLowerCase() (line 53) and .charAt(0).toUpperCase() + .slice(1) (lines 64-65). These JavaScript string operations don't respect locale-specific capitalization rules and may not work correctly for all languages (e.g., Turkish 'i' vs 'İ', German nouns always capitalized).

Additionally, the hardcoded fallback strings "page" and "Entity" are English-only and won't be localized.

Consider one of these approaches:

  1. Store properly cased variants of entity type names in the template metadata
  2. Use separate translation keys for different cases: pt("reviewsEmptyStateNoReviews.{{entityType}}")
  3. Let translators handle all case variations via ICU MessageFormat's select syntax

Example using approach 3:

pt(
  "reviewsEmptyStateNoReviews",
  "{entityType, select, location {Location has no first party reviews} other {{entityType} has no first party reviews}}",
  { entityType: entityTypeDisplayName || "entity" }
)
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1a60899 and effea40.

📒 Files selected for processing (1)
  • packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (6 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-06T14:55:12.385Z
Learnt from: benlife5
Repo: yext/visual-editor PR: 862
File: packages/visual-editor/src/utils/schema/resolveSchema.ts:118-135
Timestamp: 2025-11-06T14:55:12.385Z
Learning: In `packages/visual-editor/src/utils/schema/resolveSchema.ts`, the `OpeningHoursSchema` and `PhotoGallerySchema` functions from `yext/pages-components` contain internal type validation and handle invalid inputs gracefully (returning empty objects or undefined) rather than throwing TypeErrors, so no pre-validation guards are needed before calling them.

Applied to files:

  • packages/visual-editor/src/components/pageSections/ReviewsSection.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (4)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
  • BackgroundStyle (35-42)
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)
packages/visual-editor/src/hooks/useDocument.tsx (1)
  • useDocument (31-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: call_unit_test / unit_tests (20.x)
  • GitHub Check: call_unit_test / unit_tests (18.x)
  • GitHub Check: semgrep/ci
🔇 Additional comments (2)
packages/visual-editor/src/components/pageSections/ReviewsSection.tsx (2)

4-27: LGTM! Imports are correctly added.

All new imports are properly used in the new empty state functionality.


102-105: LGTM! Component signature correctly updated for Puck integration.

The refactor from React.FC to PuckComponent properly enables editor-aware rendering.

benlife5
benlife5 previously approved these changes Nov 6, 2025
@colton-demetriou colton-demetriou merged commit f59cd8e into main Nov 6, 2025
15 checks passed
@colton-demetriou colton-demetriou deleted the empty-reviews branch November 6, 2025 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants