From f76367253825a9c46b30ce09cc78543efdb3dae6 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Wed, 14 Jun 2023 09:57:46 +0100
Subject: [PATCH] Fix pathing to Optimo image blocks in FrostedGlassPromo
 (#10892)

* Fix pathing to Optimo image blocks in FrostedGlassPromo

* Try wait-on on Cypress E2E
---
 .github/workflows/simorgh-e2e-tests.yml       |  1 +
 .../components/FrostedGlassPromo/withData.tsx | 39 +++++++------------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/simorgh-e2e-tests.yml b/.github/workflows/simorgh-e2e-tests.yml
index 3db9b4c30d8..e23da499e5a 100644
--- a/.github/workflows/simorgh-e2e-tests.yml
+++ b/.github/workflows/simorgh-e2e-tests.yml
@@ -47,3 +47,4 @@ jobs:
           working-directory: ws-nextjs-app
           build: yarn build
           start: yarn start
+          wait-on: 'http://localhost:7081'
diff --git a/src/app/components/FrostedGlassPromo/withData.tsx b/src/app/components/FrostedGlassPromo/withData.tsx
index fec71d1e281..9659e81de06 100644
--- a/src/app/components/FrostedGlassPromo/withData.tsx
+++ b/src/app/components/FrostedGlassPromo/withData.tsx
@@ -16,6 +16,7 @@ import { RequestContext } from '../../contexts/RequestContext';
 
 import styles from './styles';
 import { FormattedPromo, ImageProps, PromoProps } from './types';
+import { OptimoBlock } from '../../models/types/optimo';
 
 const buildImageProperties = (image?: ImageProps) => {
   if (!image) return null;
@@ -82,30 +83,21 @@ const TimestampFooterWithAmp = (props: PromoProps) => {
 };
 
 const optimoPromoFormatter = (props: PromoProps): FormattedPromo => {
-  const altText = pathOr<string>(
-    '',
-    [
-      'item',
-      'images',
-      'defaultPromoImage',
-      'blocks',
-      0,
-      'model',
-      'blocks',
-      0,
-      'model',
-      'blocks',
-      0,
-      'model',
-      'text',
-    ],
+  const defaultPromoImage = pathOr<OptimoBlock[]>(
+    [],
+    ['item', 'images', 'defaultPromoImage', 'blocks'],
     props,
   );
 
-  const imageProps = path<ImageProps>(
-    ['item', 'images', 'defaultPromoImage', 'blocks', 1, 'model'],
-    props,
-  );
+  const altText: string = defaultPromoImage?.find(
+    block => block.type === 'altText',
+    // @ts-expect-error - Optimo nested block structure
+  )?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.text;
+
+  // @ts-expect-error - We don't have types for specific Optimo blocks yet
+  const imageMetadata: ImageProps = defaultPromoImage.find(
+    block => block.type === 'rawImage',
+  ).model;
 
   return {
     children: path<string>(
@@ -126,10 +118,9 @@ const optimoPromoFormatter = (props: PromoProps): FormattedPromo => {
     footer: <TimestampFooterWithAmp {...props} />,
     url: props?.item?.locators?.canonicalUrl,
     image: buildImageProperties({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ...imageProps!,
+      ...imageMetadata,
       altText,
-      copyright: imageProps?.copyrightHolder,
+      copyright: imageMetadata?.copyrightHolder,
     }),
     eventTrackingData: props?.eventTrackingData?.block,
   };