THEMES-1906: Use correct info when calling signing service (#2162)

* THEMES-1906: added test code for finding image id in URLs. * THEMES-1906: updated promo blocks with getManualImageID helper. * THEMES-1906: added new helper to the hero block. * THEMES-1906: updated components in package lock.
WPMedia · Jun 13, 2024 · 1ecfe5c · 1ecfe5c
1 parent 18d582f
commit 1ecfe5c
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 37 deletions.
diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx
@@ -5,9 +5,10 @@ import { useComponentContext, useFusionContext } from "fusion:context";
 import { useContent, useEditableContent } from "fusion:content";
 import getProperties from "fusion:properties";
 import {
-	getFocalFromANS,
 	Conditional,
 	formatURL,
+	getFocalFromANS,
+	getManualImageID,
 	Heading,
 	HeadingSection,
 	Image,
@@ -48,13 +49,14 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 	const shouldLazyLoad = lazyLoad && !isAdmin;
 
 	const resizedImage = imageId && imageAuth && imageAuth !== "{}" && imageURL?.includes(imageId);
+	const manualImageId = getManualImageID(imageURL, resizedImage);
 
 	let resizedAuth = useContent(
 		resizedImage || !imageURL
 			? {}
 			: {
 				source: "signing-service",
-				query: { id: imageURL },
+				query: { id: manualImageId || imageURL },
 			}
 	);
 	if (imageAuth && !resizedAuth) {
@@ -69,7 +71,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 	}
 
 	const ansImage = {
-		_id: resizedImage ? imageId : "",
+		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
 		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined

diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -13,6 +13,7 @@ import {
 	formatAuthors,
 	getFocalFromANS,
 	getImageFromANS,
+	getManualImageID,
 	getVideoFromANS,
 	Heading,
 	HeadingSection,
@@ -256,10 +257,11 @@ const ExtraLargePromo = ({ customFields }) => {
 		imageOverrideAuth &&
 		imageOverrideAuth !== "{}" &&
 		imageOverrideURL?.includes(imageOverrideId);
+	const manualImageId = getManualImageID(imageOverrideURL, resizedImage);
 	let resizedAuth = useContent(
 		resizedImage || !imageOverrideURL
 			? {}
-			: { source: "signing-service", query: { id: imageOverrideURL } },
+			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } },
 	);
 	if (imageOverrideAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageOverrideAuth);
@@ -312,7 +314,7 @@ const ExtraLargePromo = ({ customFields }) => {
 			? {
 					ansImage: imageOverrideURL
 						? {
-							_id: resizedImage ? imageOverrideId : "",
+							_id: resizedImage ? imageOverrideId : manualImageId,
 							url: imageOverrideURL,
 							auth: resizedAuth || {},
 						}

diff --git a/blocks/hero-block/features/hero/default.jsx b/blocks/hero-block/features/hero/default.jsx
@@ -9,6 +9,7 @@ import getProperties from "fusion:properties";
 // https://github.com/WPMedia/arc-themes-components/
 import {
 	Button,
+	getManualImageID,
 	Heading,
 	HeadingSection,
 	imageANSToImageSrc,
@@ -45,11 +46,11 @@ function Hero({ customFields }) {
 	const { searchableField } = useEditableContent();
 	const { fallbackImage, resizerURL } = getProperties(arcSite);
 	const imageId = imageDesktopURL
-		? imageDesktopURL.split("/").pop().split(".").shift()
+		? getManualImageID(imageDesktopURL)
 		: desktopImgId;
 
 	const imageMobileId = imageMobileURL
-		? imageMobileURL.split("/").pop().split(".").shift()
+		? getManualImageID(imageMobileURL)
 		: imgMobileId;
 	let desktopAuth = useContent(
 		!imageDesktopAuth && imageId

diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -5,14 +5,15 @@ import { useComponentContext, useFusionContext } from "fusion:context";
 import { useContent, useEditableContent } from "fusion:content";
 import getProperties from "fusion:properties";
 import {
-	getFocalFromANS,
 	Conditional,
-	Image,
-	isServerSide,
 	formatURL,
+	getFocalFromANS,
+	getManualImageID,
 	Grid,
 	Heading,
 	HeadingSection,
+	Image,
+	isServerSide,
 	LazyLoad,
 	Link,
 	MediaItem,
@@ -59,13 +60,13 @@ const LargeManualPromo = ({ customFields }) => {
 	const shouldLazyLoad = lazyLoad && !isAdmin;
 
 	const resizedImage = imageId && imageAuth && imageAuth !== "{}" && imageURL?.includes(imageId);
-
+	const manualImageId = getManualImageID(imageURL, resizedImage);
 	let resizedAuth = useContent(
 		resizedImage || !imageURL
 			? {}
 			: {
 				source: "signing-service",
-				query: { id: imageURL },
+				query: { id: manualImageId || imageURL },
 			}
 	);
 	if (imageAuth && !resizedAuth) {
@@ -79,7 +80,7 @@ const LargeManualPromo = ({ customFields }) => {
 		return null;
 	}
 	const ansImage = {
-		_id: resizedImage ? imageId : "",
+		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
 		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined

diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -20,6 +20,7 @@ import {
 	formatURL,
 	getFocalFromANS,
 	getImageFromANS,
+	getManualImageID,
 	getVideoFromANS,
 	isServerSide,
 	Overline,
@@ -266,11 +267,12 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 		imageOverrideAuth &&
 		imageOverrideAuth !== "{}" &&
 		imageOverrideURL?.includes(imageOverrideId);
+	const manualImageId = getManualImageID(imageOverrideURL, resizedImage);
 
 	let resizedAuth = useContent(
 		resizedImage || !imageOverrideURL
 			? {}
-			: { source: "signing-service", query: { id: imageOverrideURL } }
+			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }
 	);
 	if (imageOverrideAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageOverrideAuth);
@@ -353,7 +355,7 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 			? {
 					ansImage: imageOverrideURL
 						? {
-								_id: resizedImage ? imageOverrideId : "",
+								_id: resizedImage ? imageOverrideId : manualImageId,
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }

diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -5,9 +5,10 @@ import { useContent, useEditableContent } from "fusion:content";
 import { useComponentContext, useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import {
-	getFocalFromANS,
 	Conditional,
 	formatURL,
+	getFocalFromANS,
+	getManualImageID,
 	Heading,
 	HeadingSection,
 	Image,
@@ -43,13 +44,14 @@ const MediumManualPromo = ({ customFields }) => {
 	const shouldLazyLoad = lazyLoad && !isAdmin;
 
 	const resizedImage = imageId && imageAuth && imageAuth !== "{}" && imageURL?.includes(imageId);
+	const manualImageId = getManualImageID(imageURL, resizedImage);
 
 	let resizedAuth = useContent(
 		resizedImage || !imageURL
 			? {}
 			: {
 				source: "signing-service",
-				query: { id: imageURL },
+				query: { id: manualImageId || imageURL },
 			}
 	);
 	if (imageAuth && !resizedAuth) {
@@ -64,7 +66,7 @@ const MediumManualPromo = ({ customFields }) => {
 	}
 
 	const ansImage = {
-		_id: resizedImage ? imageId : "",
+		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
 		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined

diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -13,6 +13,7 @@ import {
 	formatURL,
 	getFocalFromANS,
 	getImageFromANS,
+	getManualImageID,
 	getPromoType,
 	Heading,
 	HeadingSection,
@@ -142,10 +143,11 @@ const MediumPromo = ({ customFields }) => {
 		imageOverrideAuth &&
 		imageOverrideAuth !== "{}" &&
 		imageOverrideURL?.includes(imageOverrideId);
+	const manualImageId = getManualImageID(imageOverrideURL, resizedImage);
 	let resizedAuth = useContent(
 		resizedImage || !imageOverrideURL
 			? {}
-			: { source: "signing-service", query: { id: imageOverrideURL } }
+			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }
 	);
 	if (imageOverrideAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageOverrideAuth);
@@ -185,7 +187,7 @@ const MediumPromo = ({ customFields }) => {
 			? {
 					ansImage: imageOverrideURL
 						? {
-								_id: resizedImage ? imageOverrideId : "",
+								_id: resizedImage ? imageOverrideId : manualImageId,
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }

diff --git a/blocks/results-list-block/features/results-list/results/result-item.jsx b/blocks/results-list-block/features/results-list/results/result-item.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useEditableContent } from "fusion:content";
 import { useComponentContext } from "fusion:context";
 import getProperties from "fusion:properties";
 
@@ -79,7 +78,6 @@ const ResultItem = React.memo(
 
 			/* Author Formatting */
 			const ansImage = getImageFromANS(element)
-			const { searchableField } = useEditableContent();
 			const hasAuthors = showByline ? credits?.by?.some((author) => author?.name !== "") : null;
 			const contentHeading = showHeadline ? headlineText : null;
 			const formattedDate = Date.parse(displayDate)
@@ -122,7 +120,7 @@ const ResultItem = React.memo(
 					className={`${BLOCK_CLASS_NAME}${showImage ? ` ${BLOCK_CLASS_NAME}--show-image` : ""}`}
 				>
 					{showImage ? (
-						<MediaItem {...searchableField("imageOverrideURL")} suppressContentEditableWarning>
+						<MediaItem>
 							<Conditional
 								component={Link}
 								condition={url}

diff --git a/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx b/blocks/small-manual-promo-block/features/small-manual-promo/default.jsx
@@ -5,8 +5,9 @@ import { useContent, useEditableContent } from "fusion:content";
 import { useComponentContext, useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import {
-	getFocalFromANS,
 	formatURL,
+	getFocalFromANS,
+	getManualImageID,
 	Heading,
 	HeadingSection,
 	Image,
@@ -97,13 +98,14 @@ const SmallManualPromo = ({ customFields }) => {
 	const shouldLazyLoad = lazyLoad && !isAdmin;
 
 	const resizedImage = imageId && imageAuth && imageAuth !== "{}" && imageURL?.includes(imageId);
+	const manualImageId = getManualImageID(imageURL, resizedImage);
 
 	let resizedAuth = useContent(
 		resizedImage || !imageURL
 			? {}
 			: {
 				source: "signing-service",
-				query: { id: imageURL },
+				query: { id: manualImageId || imageURL },
 			}
 	);
 	if (imageAuth && !resizedAuth) {
@@ -118,7 +120,7 @@ const SmallManualPromo = ({ customFields }) => {
 	}
 
 	const ansImage = {
-		_id: resizedImage ? imageId : "",
+		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
 		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined

diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -9,6 +9,7 @@ import {
 	formatURL,
 	getFocalFromANS,
 	getImageFromANS,
+	getManualImageID,
 	Grid,
 	Heading,
 	HeadingSection,
@@ -106,10 +107,11 @@ const SmallPromo = ({ customFields }) => {
 		imageOverrideAuth &&
 		imageOverrideAuth !== "{}" &&
 		imageOverrideURL?.includes(imageOverrideId);
+	const manualImageId = getManualImageID(imageOverrideURL, resizedImage);
 	let resizedAuth = useContent(
 		resizedImage || !imageOverrideURL
 			? {}
-			: { source: "signing-service", query: { id: imageOverrideURL } }
+			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }
 	);
 	if (imageOverrideAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageOverrideAuth);
@@ -133,7 +135,7 @@ const SmallPromo = ({ customFields }) => {
 		? {
 			ansImage: imageOverrideURL
 				? {
-						_id: resizedImage ? imageOverrideId : "",
+						_id: resizedImage ? imageOverrideId : manualImageId,
 						url: imageOverrideURL,
 						auth: resizedAuth || {},
 					}