diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx index 7194f3662..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' @@ -38,6 +41,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 = ({ open, handleClose, @@ -46,7 +63,8 @@ const JourneyModal: React.FC = ({ stepsData, useNotificationHandlers, profileData, - embedDesignPath + embedDesignPath, + fallbackText = '▶ Having trouble viewing? Watch on YouTube' }) => { const [currentModal, setCurrentModal] = useState(0); const [step, setStep] = useState(null); @@ -147,16 +165,28 @@ const JourneyModal: React.FC = ({ '' )} {data.video !== undefined ? ( - + <> + + + + {fallbackText} + + + ) : ( '' )}