fix: footer logo field

packages/visual-editor/src/components/atoms/image.tsx

@@ -10,6 +10,7 @@ import { useDocument } from "../../hooks/useDocument.tsx";
 import { AssetImageType, TranslatableAssetImage } from "../../types/images.ts";
 import { TranslatableString } from "../../types/types.ts";
 import { useTranslation } from "react-i18next";
+import { StreamDocument } from "../../utils/types/StreamDocument.ts";
 
 export interface ImageProps {
   image: ImageType | ComplexImageType | TranslatableAssetImage;
@@ -21,6 +22,27 @@ export interface ImageProps {
   loading?: "lazy" | "eager";
 }
 
+export const getImageAltText = (
+  image: ImageType | ComplexImageType | AssetImageType | undefined,
+  locale: string,
+  streamDocument: StreamDocument
+): string | undefined => {
+  if (!image) {
+    return undefined;
+  }
+
+  let altTextField: string | TranslatableString | undefined = undefined;
+  if (isComplexImageType(image)) {
+    altTextField = image.image.alternateText;
+  } else if (image?.alternateText) {
+    altTextField = image.alternateText;
+  }
+
+  return typeof altTextField === "object"
+    ? resolveComponentData(altTextField, locale, streamDocument)
+    : altTextField;
+};
+
 export const Image: React.FC<ImageProps> = ({
   image: rawImage,
   aspectRatio,
@@ -60,17 +82,7 @@ export const Image: React.FC<ImageProps> = ({
     ? `overflow-hidden` // No w-full when width is specified
     : `overflow-hidden w-full`; // Use w-full when no width specified
 
-  let altTextField: string | TranslatableString | undefined = undefined;
-  if (isComplexImageType(image)) {
-    altTextField = image.image.alternateText;
-  } else if (image?.alternateText) {
-    altTextField = image.alternateText;
-  }
-
-  const altText =
-    typeof altTextField === "object"
-      ? resolveComponentData(altTextField, i18n.language, streamDocument)
-      : altTextField;
+  const altText = getImageAltText(image, i18n.language, streamDocument);
 
   return (
     <div

packages/visual-editor/src/components/contentBlocks/image/Image.tsx

@@ -98,6 +98,29 @@ export const ImageWrapperFields: Fields<ImageWrapperProps> = {
   ),
 };
 
+export const getImageUrl = (
+  image: ImageType | ComplexImageType | TranslatableAssetImage | undefined,
+  locale: string
+): string | undefined => {
+  if (!image) {
+    return undefined;
+  }
+
+  if ("hasLocalizedValue" in image) {
+    const localized = image[locale];
+    if (localized && typeof localized === "object") {
+      return localized.url;
+    }
+    return undefined;
+  }
+
+  if ("image" in image) {
+    return image.image?.url;
+  }
+
+  return image.url;
+};
+
 const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
   const {
     data,
@@ -122,29 +145,7 @@ const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
       : resolveComponentData(data.image, i18n.language, streamDocument);
   }, [parentData, data.image, i18n.language, streamDocument]);
 
-  const getImageUrl = (
-    image: ImageType | ComplexImageType | TranslatableAssetImage | undefined
-  ): string | undefined => {
-    if (!image) {
-      return undefined;
-    }
-
-    if ("hasLocalizedValue" in image) {
-      const localized = image[i18n.language];
-      if (localized && typeof localized === "object") {
-        return localized.url;
-      }
-      return undefined;
-    }
-
-    if ("image" in image) {
-      return image.image?.url;
-    }
-
-    return image.url;
-  };
-
-  const imageUrl = getImageUrl(resolvedImage);
+  const imageUrl = getImageUrl(resolvedImage, i18n.language);
   const isEmpty =
     !resolvedImage ||
     !imageUrl ||

packages/visual-editor/src/components/footer/FooterLogoSlot.tsx

@@ -6,14 +6,18 @@ import { msg } from "../../utils/i18n/platform.ts";
 import { useDocument } from "../../hooks/useDocument.tsx";
 import { resolveComponentData } from "../../utils/resolveComponentData.tsx";
 import { MaybeLink } from "../atoms/maybeLink.tsx";
-import { Image } from "../atoms/image.tsx";
+import { getImageAltText, Image } from "../atoms/image.tsx";
 import { YextEntityField } from "../../editor/YextEntityFieldSelector.tsx";
 import { useTranslation } from "react-i18next";
 import { ImageStylingFields } from "../contentBlocks/image/styling.ts";
+import { ComplexImageType, ImageType } from "@yext/pages-components";
+import { getImageUrl } from "../contentBlocks/image/Image.tsx";
 
 export interface FooterLogoSlotProps {
   data: {
-    image: YextEntityField<AssetImageType | TranslatableAssetImage>;
+    image: YextEntityField<
+      ImageType | ComplexImageType | AssetImageType | TranslatableAssetImage
+    >;
     linkTarget?: string;
   };
   styles: {
@@ -27,21 +31,25 @@ const FooterLogoSlotInternal: PuckComponent<FooterLogoSlotProps> = (props) => {
   const streamDocument = useDocument();
   const { i18n, t } = useTranslation();
 
-  const resolvedImage = resolveComponentData(
+  const resolvedImage:
+    | ImageType
+    | ComplexImageType
+    | TranslatableAssetImage
+    | undefined = resolveComponentData(
     data.image,
     i18n.language,
     streamDocument
   );
+  const simplifiedImage: ImageType | AssetImageType | undefined =
+    resolvedImage && "image" in resolvedImage
+      ? resolvedImage.image
+      : resolvedImage && "hasLocalizedValue" in resolvedImage
+        ? resolvedImage[i18n.language]
+        : resolvedImage;
 
-  let imageDataUrl = (
-    typeof resolvedImage === "string" ? { url: resolvedImage } : resolvedImage
-  ) as AssetImageType | TranslatableAssetImage;
+  const imageUrl = getImageUrl(simplifiedImage, i18n.language);
 
-  if (imageDataUrl && "hasLocalizedValue" in imageDataUrl) {
-    imageDataUrl = imageDataUrl[i18n.language] as AssetImageType;
-  }
-
-  if (!imageDataUrl?.url) {
+  if (!simplifiedImage || !imageUrl) {
     return puck.isEditing ? <div className="h-20 w-[100px]" /> : <></>;
   }
 
@@ -50,15 +58,15 @@ const FooterLogoSlotInternal: PuckComponent<FooterLogoSlotProps> = (props) => {
 
   const imgElement = (
     <Image
-      image={imageDataUrl}
+      image={simplifiedImage}
       aspectRatio={aspectRatio}
       width={width}
       className="object-contain"
     />
   );
 
-  const altText = resolveComponentData(
-    imageDataUrl.alternateText ?? "",
+  const altText = getImageAltText(
+    simplifiedImage,
     i18n.language,
     streamDocument
   );
@@ -85,7 +93,10 @@ export const FooterLogoSlot: ComponentConfig<{ props: FooterLogoSlotProps }> = {
       type: "object",
       objectFields: {
         image: YextField(msg("fields.image", "Image"), {
-          type: "image",
+          type: "entityField",
+          filter: {
+            types: ["type.image"],
+          },
         }),
         linkTarget: YextField(msg("fields.linkTarget", "Link Target"), {
           type: "text",

packages/visual-editor/src/docs/components.md

@@ -362,10 +362,10 @@ The background color for the entire footer section.
 
 #### Other Props
 
-| Prop     | Type                                                                                         | Description | Default |
-| :------- | :------------------------------------------------------------------------------------------- | :---------- | :------ |
-| `data`   | `{ image: YextEntityField<AssetImageType \| TranslatableAssetImage>; linkTarget?: string; }` |             |         |
-| `styles` | `{ width?: number; aspectRatio?: number; }`                                                  |             |         |
+| Prop     | Type                                                                                                                          | Description | Default |
+| :------- | :---------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ |
+| `data`   | `{ image: YextEntityField<ImageType \| ComplexImageType \| AssetImageType \| TranslatableAssetImage>; linkTarget?: string; }` |             |         |
+| `styles` | `{ width?: number; aspectRatio?: number; }`                                                                                   |             |         |
 
 ---