fix: language picker when url templates are in use

packages/visual-editor/src/components/Directory.tsx

@@ -16,7 +16,7 @@ import {
   YextEntityField,
   resolveComponentData,
   HoursStatusAtom,
-  resolveUrlTemplate,
+  resolveUrlTemplateOfChild,
   mergeMeta,
 } from "@yext/visual-editor";
 import { BreadcrumbsComponent } from "./pageSections/Breadcrumbs.tsx";
@@ -294,7 +294,7 @@ const DirectoryCard = ({
   const { document: streamDocument, relativePrefixToRoot } = useTemplateProps();
   const cardStyles: DirectoryProps["styles"]["cards"] = styles["cards"];
 
-  const resolvedUrl = resolveUrlTemplate(
+  const resolvedUrl = resolveUrlTemplateOfChild(
     mergeMeta(profile, streamDocument),
     relativePrefixToRoot,
     puck.metadata?.resolveUrlTemplate

packages/visual-editor/src/components/Locator.tsx

@@ -44,7 +44,7 @@ import {
   useDocument,
   YextField,
   useTemplateProps,
-  resolveUrlTemplate,
+  resolveUrlTemplateOfChild,
   mergeMeta,
   HoursStatusAtom,
 } from "@yext/visual-editor";
@@ -1112,7 +1112,7 @@ const LocationCard = React.memo(
       "TAP_TO_CALL"
     );
 
-    const resolvedUrl = resolveUrlTemplate(
+    const resolvedUrl = resolveUrlTemplateOfChild(
       mergeMeta(location, streamDocument),
       relativePrefixToRoot,
       puck.metadata?.resolveUrlTemplate

packages/visual-editor/src/components/header/languageDropdown.tsx

@@ -12,6 +12,7 @@ import {
   BackgroundStyle,
   Body,
   fetchLocalesToPathsForEntity,
+  useDocument,
 } from "@yext/visual-editor";
 import {
   Accordion,
@@ -43,6 +44,7 @@ export const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
   currentLocale,
   background,
 }) => {
+  const streamDocument = useDocument();
   const scopedLocales = new Set<string>(locales);
   const [validLocalesToPaths, setValidLocalesToPaths] = React.useState<
     Record<string, string>
@@ -72,6 +74,7 @@ export const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
           contentEndpointId,
           contentDeliveryAPIDomain,
           entityId,
+          streamDocument,
         });
 
         const filtered: Record<string, string> = {};

packages/visual-editor/src/components/pageSections/NearbyLocations.tsx

@@ -24,7 +24,7 @@ import {
   MaybeLink,
   resolveComponentData,
   Body,
-  resolveUrlTemplate,
+  resolvePageSetUrlTemplate,
   useTemplateProps,
   mergeMeta,
 } from "@yext/visual-editor";
@@ -314,7 +314,7 @@ const LocationCard = ({
   } = locationData;
   const { document: streamDocument, relativePrefixToRoot } = useTemplateProps();
 
-  const resolvedUrl = resolveUrlTemplate(
+  const resolvedUrl = resolvePageSetUrlTemplate(
     mergeMeta(locationData, streamDocument),
     relativePrefixToRoot,
     puck.metadata?.resolveUrlTemplate

packages/visual-editor/src/docs/hybrid-development.md

@@ -199,7 +199,7 @@ Various existing components require additional data from the hybrid-developer. T
 This could look like:
 
 ```ts
-function resolveUrlTemplate(
+function resolveUrlTemplateOfChild(
   streamDocument: any,
   locale: string,
   relativePrefixToRoot: string,

packages/visual-editor/src/utils/api/fetchLocalesToPathsForEntity.ts

@@ -1,6 +1,7 @@
-import { normalizeSlug } from "../slugifier.ts";
-import { normalizeLocale } from "../normalizeLocale.ts";
+import { mergeMeta } from "../mergeMeta.ts";
 import { StreamDocument } from "../applyTheme.ts";
+import { normalizeLocale } from "../normalizeLocale.ts";
+import { resolvePageSetUrlTemplate } from "../resolveUrlTemplate.ts";
 
 const V_PARAM = "20250407";
 
@@ -10,12 +11,14 @@ export const fetchLocalesToPathsForEntity = async ({
   contentEndpointId,
   contentDeliveryAPIDomain,
   entityId,
+  streamDocument,
 }: {
   businessId: string;
   apiKey: string;
   contentEndpointId: string;
   contentDeliveryAPIDomain: string;
   entityId: string;
+  streamDocument: StreamDocument;
 }): Promise<Record<string, string>> => {
   const url = new URL(
     `${contentDeliveryAPIDomain}/v2/accounts/${businessId}/content/${contentEndpointId}`
@@ -34,9 +37,22 @@ export const fetchLocalesToPathsForEntity = async ({
 
   try {
     const json = await response.json();
+
     for (const profile of json.response.docs) {
-      if (profile?.meta?.locale && getPath(profile)) {
-        localeToPath[normalizeLocale(profile.meta.locale)] = getPath(profile);
+      if (profile?.meta?.locale) {
+        try {
+          // Merge profile with streamDocument metadata
+          const mergedDocument = mergeMeta(profile, streamDocument);
+
+          // Use resolvePageSetUrlTemplate to get the URL based on the current page set template
+          const resolvedUrl = resolvePageSetUrlTemplate(mergedDocument, "");
+          localeToPath[normalizeLocale(profile.meta.locale)] = resolvedUrl;
+        } catch (e) {
+          console.warn(
+            `Failed to resolve URL template for locale ${profile.meta.locale}`,
+            e
+          );
+        }
       }
     }
   } catch (e) {
@@ -45,22 +61,3 @@ export const fetchLocalesToPathsForEntity = async ({
 
   return localeToPath;
 };
-
-// getPath assumes the user is using Visual Editor in-platform. This does not work with some hybrid cases.
-// This should use the exact same logic as getPath in packages/visual-editor/src/vite-plugin/templates/main.tsx
-// as that is the code all in-platform developers are using.
-const getPath = (streamDocument: StreamDocument): string => {
-  if (streamDocument.slug) {
-    return streamDocument.slug;
-  }
-
-  const localePath =
-    streamDocument.meta?.locale !== "en"
-      ? `${streamDocument.meta?.locale}/`
-      : "";
-  const path = streamDocument.address
-    ? `${localePath}${streamDocument.address.region}/${streamDocument.address.city}/${streamDocument.address.line1}-${streamDocument.id}`
-    : `${localePath}${streamDocument.id}`;
-
-  return normalizeSlug(path);
-};

packages/visual-editor/src/utils/getSchema.ts

@@ -1,5 +1,8 @@
 import { StreamDocument } from "./applyTheme.ts";
-import { resolveUrlTemplate } from "./resolveUrlTemplate.ts";
+import {
+  resolvePageSetUrlTemplate,
+  resolveUrlTemplateOfChild,
+} from "./resolveUrlTemplate.ts";
 import { resolveSchemaJson } from "./resolveYextEntityField.ts";
 
 interface TemplateRenderProps {
@@ -19,7 +22,20 @@ export const getSchema = (data: TemplateRenderProps): Record<string, any> => {
     document.path = data.path;
   } else {
     // TODO (SUMO-7941): Check that this resolves correctly for the schema drawer preview
-    document.path = resolveUrlTemplate(document, data.relativePrefixToRoot);
+    if (
+      document?.__?.codeTemplate === "directory" ||
+      document?.__?.codeTemplate === "locator"
+    ) {
+      document.path = resolveUrlTemplateOfChild(
+        document,
+        data.relativePrefixToRoot
+      );
+    } else {
+      document.path = resolvePageSetUrlTemplate(
+        document,
+        data.relativePrefixToRoot
+      );
+    }
   }
 
   const layoutString = document?.__?.layout;

packages/visual-editor/src/utils/index.ts

@@ -22,7 +22,10 @@ export {
   resolveYextStructField,
   resolveSchemaJson,
 } from "./resolveYextEntityField.ts";
-export { resolveUrlTemplate } from "./resolveUrlTemplate.ts";
+export {
+  resolveUrlTemplateOfChild,
+  resolvePageSetUrlTemplate,
+} from "./resolveUrlTemplate.ts";
 export {
   createSearchAnalyticsConfig,
   createSearchHeadlessConfig,

packages/visual-editor/src/utils/mergeMeta.ts

@@ -6,8 +6,19 @@
  * @returns {Object}
  */
 export function mergeMeta(profile: any, streamDocument: any): any {
+  const locale: string = profile?.meta?.locale || streamDocument?.locale;
+
+  let isPrimaryLocale: boolean;
+  if (profile?.meta?.isPrimaryLocale === true) {
+    isPrimaryLocale = true;
+  } else if (profile?.meta?.isPrimaryLocale === false) {
+    isPrimaryLocale = false;
+  } else {
+    isPrimaryLocale = locale === "en";
+  }
+
   return {
-    locale: streamDocument?.locale,
+    locale: locale,
     ...profile,
     meta: {
       ...streamDocument?.meta,
@@ -16,6 +27,7 @@ export function mergeMeta(profile: any, streamDocument: any): any {
     __: {
       ...streamDocument.__,
       ...profile.__,
+      isPrimaryLocale: isPrimaryLocale,
     },
     _pageset: streamDocument._pageset,
   };