From 51809a8b37a28e29bf0e3b55d533859dfe2e4d4a Mon Sep 17 00:00:00 2001
From: Pablo Costa <pablo@botsfactory.io>
Date: Thu, 21 Nov 2024 17:01:08 -0300
Subject: [PATCH 1/2] Fix "View Original" blog page link

---
 site/gatsby-site/playwright/e2e/translationBadge.spec.ts | 7 +++++++
 site/gatsby-site/src/components/blog/PrismicBlogPost.js  | 2 +-
 site/gatsby-site/src/templates/post.js                   | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/site/gatsby-site/playwright/e2e/translationBadge.spec.ts b/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
index d9e756aa83..2a2058a35f 100644
--- a/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
+++ b/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
@@ -9,6 +9,13 @@ test.describe('Translation Badges', () => {
     await expect(page.locator('a', { hasText: 'Ver Original' })).toHaveAttribute('href', '/blog/using-ai-to-connect-ai-incidents/');
   });
 
+  test('Should be visible on Prismic blog post', async ({ page }) => {
+    await page.goto('/es/blog/ai-incident-journalism-analysis');
+    await expect(page.locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).toBeVisible();
+    await expect(page.locator('a', { hasText: 'Ver Original' })).toBeVisible();
+    await expect(page.locator('a', { hasText: 'Ver Original' })).toHaveAttribute('href', '/blog/ai-incident-journalism-analysis');
+  });
+
   test('Should be visible on the discover app', async ({ page, skipOnEmptyEnvironment }) => {
     await page.goto('/es/apps/discover?display=details&incident_id=1&page=1&source_domain=today.com');
     await expect(page.locator('[data-cy="5d34b8c29ced494f010ed45c"]').locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).toBeVisible();
diff --git a/site/gatsby-site/src/components/blog/PrismicBlogPost.js b/site/gatsby-site/src/components/blog/PrismicBlogPost.js
index 6f50575f45..1b677fc8b6 100644
--- a/site/gatsby-site/src/components/blog/PrismicBlogPost.js
+++ b/site/gatsby-site/src/components/blog/PrismicBlogPost.js
@@ -61,7 +61,7 @@ const PrismicBlogPost = ({ post, location }) => {
         {post.data.aitranslated && (
           <>
             <TranslationBadge className="ml-2" />
-            <Link className="ml-2" to={post.data.slug}>
+            <Link className="mx-2" to={`/blog/${post.data.slug}`}>
               <Trans>View Original</Trans>
             </Link>
           </>
diff --git a/site/gatsby-site/src/templates/post.js b/site/gatsby-site/src/templates/post.js
index 53edc94357..e3d7d15f03 100644
--- a/site/gatsby-site/src/templates/post.js
+++ b/site/gatsby-site/src/templates/post.js
@@ -59,7 +59,7 @@ export default function Post(props) {
         {mdx.frontmatter.aiTranslated && (
           <>
             <TranslationBadge className="ml-2" />
-            <Link className="ml-2" to={mdx.frontmatter.slug}>
+            <Link className="mx-2" to={mdx.frontmatter.slug}>
               <Trans>View Original</Trans>
             </Link>
           </>

From 7fd570c5b2bf6c44694e303085a73142eea74214 Mon Sep 17 00:00:00 2001
From: Pablo Costa <pablo@botsfactory.io>
Date: Thu, 21 Nov 2024 19:39:50 -0300
Subject: [PATCH 2/2] Add fallback logic for Prismic blog posts without
 translation

---
 .../playwright/e2e/translationBadge.spec.ts   |  7 ++--
 .../src/templates/prismicBlogPost.js          | 42 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/site/gatsby-site/playwright/e2e/translationBadge.spec.ts b/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
index 2a2058a35f..5964c8845b 100644
--- a/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
+++ b/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
@@ -9,11 +9,10 @@ test.describe('Translation Badges', () => {
     await expect(page.locator('a', { hasText: 'Ver Original' })).toHaveAttribute('href', '/blog/using-ai-to-connect-ai-incidents/');
   });
 
-  test('Should be visible on Prismic blog post', async ({ page }) => {
+  test('Should not be visible on Prismic blog post without translation', async ({ page }) => {
     await page.goto('/es/blog/ai-incident-journalism-analysis');
-    await expect(page.locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).toBeVisible();
-    await expect(page.locator('a', { hasText: 'Ver Original' })).toBeVisible();
-    await expect(page.locator('a', { hasText: 'Ver Original' })).toHaveAttribute('href', '/blog/ai-incident-journalism-analysis');
+    await expect(page.locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).not.toBeVisible();
+    await expect(page.locator('a', { hasText: 'Ver Original' })).not.toBeVisible();
   });
 
   test('Should be visible on the discover app', async ({ page, skipOnEmptyEnvironment }) => {
diff --git a/site/gatsby-site/src/templates/prismicBlogPost.js b/site/gatsby-site/src/templates/prismicBlogPost.js
index 7cf98468eb..b7f7dac947 100644
--- a/site/gatsby-site/src/templates/prismicBlogPost.js
+++ b/site/gatsby-site/src/templates/prismicBlogPost.js
@@ -1,12 +1,28 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PrismicBlogPost from 'components/blog/PrismicBlogPost';
+import { Link } from 'gatsby';
 import HeadContent from 'components/HeadContent';
+import { Trans } from 'react-i18next';
 
 export default function BlogPost(props) {
   const post = props?.data?.post;
 
-  return <>{post && <PrismicBlogPost post={post} location={props.location} />}</>;
+  const originalPost = props?.data?.originalPost;
+
+  if (post) {
+    return <PrismicBlogPost post={post} location={props.location} />;
+  } else if (originalPost) {
+    return <PrismicBlogPost post={originalPost} location={props.location} />;
+  } else if (props?.pageContext?.originalPath) {
+    return (
+      <Link className="mx-2" to={`${props.pageContext.originalPath}`}>
+        <Trans>View Original</Trans>
+      </Link>
+    );
+  } else {
+    return <></>;
+  }
 }
 
 export const Head = (props) => {
@@ -58,5 +74,29 @@ export const pageQuery = graphql`
         author
       }
     }
+    originalPost: prismicBlog(data: { language: { eq: "en" }, slug: { eq: $slug } }) {
+      uid
+      data {
+        metatitle
+        metadescription
+        slug
+        aitranslated
+        language
+        title {
+          text
+        }
+        content {
+          richText
+          text
+          html
+        }
+        image {
+          url
+          gatsbyImageData
+        }
+        date
+        author
+      }
+    }
   }
 `;