From 23e2d151c146053d5aa77d6f56fbd856c21050aa Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Tue, 7 Jul 2026 07:05:07 +0000
Subject: [PATCH 1/3] Resolve YouTube Error 153 and add graceful degradation in
 JourneyModal

Signed-off-by: Parth Gartan <parthgartan26feb@gmail.com>
---
 .../GettingStartedWidget/JourneyModal.tsx     | 46 +++++++++++++++----
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 7194f3662..70a80745c 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -38,6 +38,20 @@ export const ModalVideo = styled('video')(() => ({
   paddingBlock: '1rem'
 }));
 
+const FallbackLink = styled('div')(({ theme }) => ({
+  textAlign: 'center',
+  marginTop: '0.5rem',
+  marginBottom: '1rem',
+  '& a': {
+    color: theme.palette.text.brand,
+    textDecoration: 'none',
+    fontWeight: 'bold',
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  }
+}));
+
 const JourneyModal: React.FC<JourneyModalProps> = ({
   open,
   handleClose,
@@ -147,16 +161,28 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
           ''
         )}
         {data.video !== undefined ? (
-          <iframe
-            style={{
-              aspectRatio: '16/9',
-              width: '100%'
-            }}
-            src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowFullScreen={true}
-          ></iframe>
+          <>
+            <iframe
+              style={{
+                aspectRatio: '16/9',
+                width: '100%'
+              }}
+              src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen={true}
+              referrerPolicy="strict-origin-when-cross-origin"
+            ></iframe>
+            <FallbackLink>
+              <a
+                href="https://www.youtube.com/watch?v=Do7htKrRzDA"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                ▶ Having trouble viewing? Watch on YouTube
+              </a>
+            </FallbackLink>
+          </>
         ) : (
           ''
         )}

From 41e33540b5d9d34b0990f9c0b2ac4bc7223a73c6 Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Tue, 7 Jul 2026 07:23:57 +0000
Subject: [PATCH 2/3] Add fallbackText prop for i18n and extract
 YOUTUBE_VIDEO_ID constant

Signed-off-by: Parth Gartan <parthgartan26feb@gmail.com>
---
 .../GettingStartedWidget/JourneyModal.tsx            | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 70a80745c..89e07d2e0 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -18,8 +18,11 @@ interface JourneyModalProps {
   };
   profileData?: ProfileData;
   embedDesignPath: string;
+  fallbackText?: string;
 }
 
+const YOUTUBE_VIDEO_ID = 'Do7htKrRzDA';
+
 const stepperType = {
   Previous: 'Previous',
   Next: 'Next'
@@ -60,7 +63,8 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
   stepsData,
   useNotificationHandlers,
   profileData,
-  embedDesignPath
+  embedDesignPath,
+  fallbackText = '▶ Having trouble viewing? Watch on YouTube'
 }) => {
   const [currentModal, setCurrentModal] = useState<number>(0);
   const [step, setStep] = useState<StepData | null>(null);
@@ -167,7 +171,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
                 aspectRatio: '16/9',
                 width: '100%'
               }}
-              src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
+              src={`https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?si=5iMQ5a1JUf3qpIiH`}
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               allowFullScreen={true}
@@ -175,11 +179,11 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
             ></iframe>
             <FallbackLink>
               <a
-                href="https://www.youtube.com/watch?v=Do7htKrRzDA"
+                href={`https://www.youtube.com/watch?v=${YOUTUBE_VIDEO_ID}`}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                ▶ Having trouble viewing? Watch on YouTube
+                {fallbackText}
               </a>
             </FallbackLink>
           </>

From 69112c0724c988a574b4b17070a9b306cb73d577 Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Tue, 21 Jul 2026 08:57:55 +0000
Subject: [PATCH 3/3] revert fallback and add referrerPolicy to iframe

Signed-off-by: Parth Gartan <parthgartan26feb@gmail.com>
---
 .../GettingStartedWidget/JourneyModal.tsx     | 53 +++++--------------
 1 file changed, 12 insertions(+), 41 deletions(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 89e07d2e0..9e6d8a8e0 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -18,11 +18,8 @@ interface JourneyModalProps {
   };
   profileData?: ProfileData;
   embedDesignPath: string;
-  fallbackText?: string;
 }
 
-const YOUTUBE_VIDEO_ID = 'Do7htKrRzDA';
-
 const stepperType = {
   Previous: 'Previous',
   Next: 'Next'
@@ -41,20 +38,6 @@ export const ModalVideo = styled('video')(() => ({
   paddingBlock: '1rem'
 }));
 
-const FallbackLink = styled('div')(({ theme }) => ({
-  textAlign: 'center',
-  marginTop: '0.5rem',
-  marginBottom: '1rem',
-  '& a': {
-    color: theme.palette.text.brand,
-    textDecoration: 'none',
-    fontWeight: 'bold',
-    '&:hover': {
-      textDecoration: 'underline'
-    }
-  }
-}));
-
 const JourneyModal: React.FC<JourneyModalProps> = ({
   open,
   handleClose,
@@ -63,8 +46,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
   stepsData,
   useNotificationHandlers,
   profileData,
-  embedDesignPath,
-  fallbackText = '▶ Having trouble viewing? Watch on YouTube'
+  embedDesignPath
 }) => {
   const [currentModal, setCurrentModal] = useState<number>(0);
   const [step, setStep] = useState<StepData | null>(null);
@@ -165,28 +147,17 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
           ''
         )}
         {data.video !== undefined ? (
-          <>
-            <iframe
-              style={{
-                aspectRatio: '16/9',
-                width: '100%'
-              }}
-              src={`https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?si=5iMQ5a1JUf3qpIiH`}
-              title="YouTube video player"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allowFullScreen={true}
-              referrerPolicy="strict-origin-when-cross-origin"
-            ></iframe>
-            <FallbackLink>
-              <a
-                href={`https://www.youtube.com/watch?v=${YOUTUBE_VIDEO_ID}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {fallbackText}
-              </a>
-            </FallbackLink>
-          </>
+          <iframe
+            style={{
+              aspectRatio: '16/9',
+              width: '100%'
+            }}
+            src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen={true}
+            referrerPolicy="strict-origin-when-cross-origin"
+          ></iframe>
         ) : (
           ''
         )}