From 73c182aef243e9cd12bec6194fba5618fba4c9dc Mon Sep 17 00:00:00 2001
From: Yuriy Yakym <yakym.yuriy@gmail.com>
Date: Tue, 21 Jan 2025 10:20:13 +0700
Subject: [PATCH] Render EmbedFallback when third-party consent is not given

---
 .../ContentRenderer/components/Embed.tsx      | 13 +++++++++
 .../components/EmbedFallback.module.scss      |  4 +++
 .../components/EmbedFallback.tsx              | 27 +++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 components/ContentRenderer/components/EmbedFallback.module.scss
 create mode 100644 components/ContentRenderer/components/EmbedFallback.tsx

diff --git a/components/ContentRenderer/components/Embed.tsx b/components/ContentRenderer/components/Embed.tsx
index f0ccc66c4..57148e9a6 100644
--- a/components/ContentRenderer/components/Embed.tsx
+++ b/components/ContentRenderer/components/Embed.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @next/next/no-img-element */
+
 'use client';
 
 import { MEDIA, useAnalytics } from '@prezly/analytics-nextjs';
@@ -5,6 +7,11 @@ import { Elements } from '@prezly/content-renderer-react-js';
 import type { EmbedNode } from '@prezly/story-content-format';
 import { useCallback, useRef } from 'react';
 
+import { useCookieConsent } from '@/modules/CookieConsent/CookieConsentContext';
+import { ConsentCategory } from '@/modules/CookieConsent/types';
+
+import { EmbedFallback } from './EmbedFallback';
+
 interface Props {
     node: EmbedNode;
 }
@@ -12,6 +19,8 @@ interface Props {
 export function Embed({ node }: Props) {
     const { track } = useAnalytics();
     const isEventTracked = useRef(false);
+    const { consent } = useCookieConsent();
+    const hasThirdPartyConsent = consent?.categories.includes(ConsentCategory.THIRD_PARTY_COOKIES);
 
     const handlePlay = useCallback(() => {
         if (!isEventTracked.current) {
@@ -20,5 +29,9 @@ export function Embed({ node }: Props) {
         }
     }, [track]);
 
+    if (!hasThirdPartyConsent) {
+        return <EmbedFallback node={node} />;
+    }
+
     return <Elements.Embed node={node} onPlay={handlePlay} />;
 }
diff --git a/components/ContentRenderer/components/EmbedFallback.module.scss b/components/ContentRenderer/components/EmbedFallback.module.scss
new file mode 100644
index 000000000..44f8c3dc9
--- /dev/null
+++ b/components/ContentRenderer/components/EmbedFallback.module.scss
@@ -0,0 +1,4 @@
+.imageFallback {
+    display: block;
+    margin: $spacing-4 0;
+}
diff --git a/components/ContentRenderer/components/EmbedFallback.tsx b/components/ContentRenderer/components/EmbedFallback.tsx
new file mode 100644
index 000000000..0f396ea7e
--- /dev/null
+++ b/components/ContentRenderer/components/EmbedFallback.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable @next/next/no-img-element */
+
+'use client';
+
+import type { EmbedNode } from '@prezly/story-content-format';
+import NextLink from 'next/link';
+
+import styles from './EmbedFallback.module.scss';
+
+interface Props {
+    node: EmbedNode;
+}
+
+export function EmbedFallback({ node }: Props) {
+    if (node.oembed.screenshot_url) {
+        return (
+            <NextLink className={styles.imageFallback} href={node.url} target="__blank">
+                <img
+                    src={node.oembed.screenshot_url}
+                    alt={node.oembed.title || node.oembed.description || ''}
+                />
+            </NextLink>
+        );
+    }
+
+    return null;
+}