Display warning on preview environment to notify users if page is Mozart

src/app/components/react-testing-library-with-providers.tsx

@@ -31,6 +31,7 @@ interface Props extends PropsWithChildren {
   isNextJs?: boolean;
   pageLang?: string;
   isUK?: boolean | null;
+  requestServiceChain?: string | null;
 }
 
 const AllTheProviders: FC<Props> = ({
@@ -53,6 +54,7 @@ const AllTheProviders: FC<Props> = ({
   statusCode = null,
   isNextJs = false,
   isUK = null,
+  requestServiceChain = null,
 }: Props) => {
   return (
     <ToggleContextProvider toggles={toggles}>
@@ -75,6 +77,7 @@ const AllTheProviders: FC<Props> = ({
           showCookieBannerBasedOnCountry={showCookieBannerBasedOnCountry}
           statusCode={statusCode}
           isUK={isUK}
+          requestServiceChain={requestServiceChain}
         >
           <EventTrackingContextProvider data={pageData} atiData={atiData}>
             <UserContextProvider>
@@ -112,6 +115,7 @@ const customRender = (
     isNextJs,
     pageLang,
     isUK,
+    requestServiceChain,
   } = options || {};
 
   return render(ui, {
@@ -135,6 +139,7 @@ const customRender = (
         isNextJs={isNextJs}
         pageLang={pageLang}
         isUK={isUK}
+        requestServiceChain={requestServiceChain}
       >
         {children}
       </AllTheProviders>

src/app/contexts/RequestContext/index.test.tsx

@@ -61,6 +61,7 @@ const input = {
   showAdsBasedOnLocation: true,
   mvtExperiments: [{ experimentName: 'foo', variation: 'bar' }],
   isUK: true,
+  requestServiceChain: 'SIMORGH',
 };
 
 const expectedOutput = {
@@ -92,6 +93,7 @@ const expectedOutput = {
   service: 'service',
   pathname: '/current-path',
   mvtExperiments: input.mvtExperiments,
+  requestServiceChain: 'SIMORGH',
 };
 
 describe('RequestContext', () => {

src/app/contexts/RequestContext/index.tsx

@@ -34,6 +34,7 @@ export type RequestContextProps = {
   pathname: string;
   platform: Platforms;
   previousPath: string | null;
+  requestServiceChain: string | null;
   service: Services;
   showAdsBasedOnLocation: boolean;
   showCookieBannerBasedOnCountry: boolean;
@@ -67,6 +68,7 @@ type RequestProviderProps = {
   mvtExperiments?: MvtExperiment[] | null;
   variant?: Variants | null;
   isUK?: boolean | null;
+  requestServiceChain?: string | null;
 };
 
 export const RequestContextProvider = ({
@@ -89,6 +91,7 @@ export const RequestContextProvider = ({
   timeOnServer = null,
   variant = null,
   isUK = null,
+  requestServiceChain = null,
 }: PropsWithChildren<RequestProviderProps>) => {
   const { origin } = getOriginContext(bbcOrigin);
   const env: Environments = getEnv(origin);
@@ -142,6 +145,7 @@ export const RequestContextProvider = ({
       pathname,
       ...getMetaUrls(origin, pathname),
       mvtExperiments,
+      requestServiceChain,
     }),
     [
       derivedPageType,
@@ -158,6 +162,7 @@ export const RequestContextProvider = ({
       pathname,
       platform,
       previousPath,
+      requestServiceChain,
       service,
       showAdsBasedOnLocation,
       showCookieBannerBasedOnCountry,

src/app/legacy/containers/App/App.jsx

@@ -49,6 +49,7 @@ export const App = ({ initialData, bbcOrigin }) => {
     toggles,
     mvtExperiments,
     isUK,
+    requestServiceChain,
   } = initialData;
 
   const routeProps = getRouteProps(pathname);
@@ -67,6 +68,7 @@ export const App = ({ initialData, bbcOrigin }) => {
     showCookieBannerBasedOnCountry,
     mvtExperiments,
     isUK,
+    requestServiceChain,
   });
 };
 

src/app/legacy/containers/PageHandlers/__snapshots__/withContexts.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`withContexts HOC should return all context providers 1`] = `
     {"lang":"en-GB","articleAuthor":"https://www.facebook.com/bbcnews","articleTimestampPrefix":"Updated","articleTimestampSuffix":"","atiAnalyticsAppName":"news","atiAnalyticsProducerId":"64","chartbeatDomain":"bbc.co.uk","brandName":"BBC News","product":"BBC News","defaultImage":"https://static.files.bbci.co.uk/ws/simorgh-assets/public/news/images/metadata/poster-1024x576.png","defaultImageAltText":"BBC News","dir":"ltr","externalLinkText":", external","imageCaptionOffscreenText":"Image caption, ","videoCaptionOffscreenText":"Video caption, ","audioCaptionOffscreenText":"Audio caption","defaultCaptionOffscreenText":"Caption, ","imageCopyrightOffscreenText":"Image source, ","locale":"en_GB","datetimeLocale":"en-gb","service":"news","serviceName":"News","languageName":"English","twitterCreator":"@BBCNews","twitterSite":"@BBCNews","noBylinesPolicy":"https://www.bbc.com/news/help-41670342#authorexpertise","publishingPrinciples":"https://www.bbc.com/news/help-41670342","isTrustProjectParticipant":true,"script":{"atlas":{"groupA":{"fontSize":78,"lineHeight":84},"groupB":{"fontSize":96,"lineHeight":104},"groupD":{"fontSize":140,"lineHeight":148}},"elephant":{"groupA":{"fontSize":60,"lineHeight":64},"groupB":{"fontSize":78,"lineHeight":84},"groupD":{"fontSize":116,"lineHeight":124}},"imperial":{"groupA":{"fontSize":50,"lineHeight":54},"groupB":{"fontSize":64,"lineHeight":72},"groupD":{"fontSize":96,"lineHeight":104}},"royal":{"groupA":{"fontSize":40,"lineHeight":44},"groupB":{"fontSize":52,"lineHeight":60},"groupD":{"fontSize":76,"lineHeight":84}},"foolscap":{"groupA":{"fontSize":32,"lineHeight":36},"groupB":{"fontSize":40,"lineHeight":44},"groupD":{"fontSize":56,"lineHeight":60}},"canon":{"groupA":{"fontSize":28,"lineHeight":32},"groupB":{"fontSize":32,"lineHeight":36},"groupD":{"fontSize":44,"lineHeight":48}},"trafalgar":{"groupA":{"fontSize":20,"lineHeight":24},"groupB":{"fontSize":24,"lineHeight":28},"groupD":{"fontSize":32,"lineHeight":36}},"paragon":{"groupA":{"fontSize":20,"lineHeight":24},"groupB":{"fontSize":22,"lineHeight":26},"groupD":{"fontSize":28,"lineHeight":32}},"doublePica":{"groupA":{"fontSize":18,"lineHeight":22},"groupB":{"fontSize":20,"lineHeight":24},"groupD":{"fontSize":24,"lineHeight":28}},"greatPrimer":{"groupA":{"fontSize":18,"lineHeight":22},"groupB":{"fontSize":18,"lineHeight":22},"groupD":{"fontSize":20,"lineHeight":24}},"bodyCopy":{"groupA":{"fontSize":15,"lineHeight":20},"groupB":{"fontSize":16,"lineHeight":22},"groupD":{"fontSize":16,"lineHeight":22}},"pica":{"groupA":{"fontSize":15,"lineHeight":20},"groupB":{"fontSize":16,"lineHeight":20},"groupD":{"fontSize":16,"lineHeight":20}},"longPrimer":{"groupA":{"fontSize":15,"lineHeight":18},"groupB":{"fontSize":15,"lineHeight":18},"groupD":{"fontSize":14,"lineHeight":18}},"brevier":{"groupA":{"fontSize":14,"lineHeight":18},"groupB":{"fontSize":14,"lineHeight":18},"groupD":{"fontSize":13,"lineHeight":16}},"minion":{"groupA":{"fontSize":12,"lineHeight":16},"groupB":{"fontSize":12,"lineHeight":16},"groupD":{"fontSize":12,"lineHeight":16}}},"manifestPath":"/articles/manifest.json","frontPageTitle":"Home","showAdPlaceholder":false,"showRelatedTopics":true,"translations":{"ads":{"advertisementLabel":"Advertisement"},"home":"Home","currentPage":"Current page","skipLinkText":"Skip to content","relatedContent":"Related content","relatedTopics":"Related topics","navMenuText":"Sections","mediaAssetPage":{"mediaPlayer":"Media player","audioPlayer":"Audio player","videoPlayer":"Video player"},"liveExperiencePage":{"liveLabel":"Live","liveCoverage":"Live Coverage","breaking":"Breaking","postedAt":"Posted at","summary":"Summary","shareButtonText":"Share"},"downloads":{"instructions":"You can download and view today’s news.","title":"File Download"},"gist":"At a glance","error":{"404":{"statusCode":"404","title":"Page cannot be found","message":"Sorry, we're unable to bring you the page you're looking for. Please try:","solutions":["Double checking the url","Hitting the refresh button in your browser","Searching for this page using the BBC search bar"],"callToActionFirst":"Alternatively, please visit the ","callToActionLinkText":"BBC News homepage.","callToActionLast":"","callToActionLinkUrl":"https://www.bbc.com/news"},"500":{"statusCode":"500","title":"Internal server error","message":"Sorry, we're currently unable to bring you the page you're looking for. Please try:","solutions":["Hitting the refresh button in your browser","Coming back again later"],"callToActionFirst":"Alternatively, please visit the ","callToActionLinkText":"BBC News homepage.","callToActionLast":"","callToActionLinkUrl":"https://www.bbc.com/news"}},"consentBanner":{"privacy":{"title":"We've updated our Privacy and Cookies Policy","description":{"uk":{"first":"We've made some important changes to our Privacy and Cookies Policy and we want you to know what this means for you and your data.","linkText":null,"last":null,"linkUrl":null},"international":{"first":"We've made some important changes to our Privacy and Cookies Policy and we want you to know what this means for you and your data.","linkText":null,"last":null,"linkUrl":null}},"accept":"OK","reject":"Find out what's changed","rejectUrl":"https://www.bbc.co.uk/usingthebbc/your-data-matters"},"cookie":{"amp":{"accept":"Accept data collection and continue","reject":"Reject data collection and continue","initial":{"title":"Let us know you agree to data collection on AMP","description":{"first":"We and our partners use technologies, such as ","linkText":"cookies","last":", and collect browsing data to give you the best online experience and to personalise the content and advertising shown to you. Please let us know if you agree.","linkUrl":"https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"},"manage":"Manage my settings"},"manage":{"title":"Manage consent settings on AMP pages","description":{"para1":"These settings apply to AMP pages only. You may be asked to set these preferences again when you visit non-AMP BBC pages.","para2":"The lightweight mobile page you have visited has been built using Google AMP technology.","heading2":"Strictly necessary data collection","para3":"To make our web pages work, we store some limited information on your device without your consent.","para4":{"text":"Read more about the essential information we store on your device to make our web pages work.","url":"https://www.bbc.co.uk/usingthebbc/strictly-necessary-cookies/"},"para5":"We use local storage to store your consent preferences on your device.","heading3":"Optional data collection","para6":"When you consent to data collection on AMP pages you are consenting to allow us to display personalised ads that are relevant to you when you are outside of the UK.","para7":{"text":"Read more about how we personalise ads in the BBC and our advertising partners.","url":"https://www.bbc.com/usingthebbc/cookies/how-does-the-bbc-use-cookies-for-advertising/"},"para8":"You can choose not to receive personalised ads by clicking “Reject data collection and continue” below. Please note that you will still see advertising, but it will not be personalised to you.","para9":"You can change these settings by clicking “Ad Choices / Do not sell my info” in the footer at any time."}}},"canonical":{"title":"Let us know you agree to cookies","description":{"uk":{"first":"We use ","linkText":"cookies","last":" to give you the best online experience. Please let us know if you agree to all of these cookies.","linkUrl":"https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"},"international":{"first":"We use ","linkText":"cookies","last":" to give you the best online experience. Please let us know if you agree to all of these cookies.","linkUrl":"https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"}},"accept":"Yes, I agree","reject":"No, take me to settings","rejectUrl":"https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"}}},"media":{"noJs":"To play this content, please enable JavaScript, or try a different browser","contentExpired":"This content is no longer available","audio":"Audio","photogallery":"Image gallery","video":"Video","listen":"Listen","watch":"Watch","liveLabel":"LIVE","nextLabel":"NEXT","previousRadioShow":"Previous radio show","nextRadioShow":"Next radio show","duration":"Duration"},"socialEmbed":{},"featuresAnalysisTitle":"More to explore"},"mostRead":{"header":"Most read","lastUpdated":"Last updated:","numberOfItems":10,"hasMostRead":true},"radioSchedule":{"hasRadioSchedule":false},"recommendations":{"hasStoryRecommendations":false},"footer":{"trustProjectLink":{"href":"https://www.bbc.com/news/help-41670342","text":"Why you can trust the BBC"},"externalLink":{"href":"https://www.bbc.co.uk/editorialguidelines/guidance/feeds-and-links","text":"Read about our approach to external linking."},"links":[{"href":"https://www.bbc.com/terms","text":"Terms of Use"},{"href":"https://www.bbc.co.uk/aboutthebbc/","text":"About the BBC"},{"href":"https://www.bbc.com/privacy/","text":"Privacy Policy"},{"href":"https://www.bbc.com/usingthebbc/cookies/","text":"Cookies"},{"href":"https://www.bbc.com/accessibility/","text":"Accessibility Help"},{"href":"https://www.bbc.com/contact/","text":"Contact the BBC"},{"id":"COOKIE_SETTINGS","href":"#","text":"Do not share or sell my info","lang":"en-GB"}],"copyrightText":"BBC. The BBC is not responsible for the content of external sites."},"timezone":"Europe/London","navigation":[{"title":"Home","url":"/news"},{"title":"UK","url":"/news/uk"},{"title":"World","url":"/news/world"},{"title":"Business","url":"/news/business"},{"title":"Politics","url":"/news/politics"},{"title":"Tech","url":"/news/technology"},{"title":"Science","url":"/news/science_and_environment"},{"title":"Health","url":"/news/health"},{"title":"Family & Education","url":"/news/education"},{"title":"Entertainment & Arts","url":"/news/entertainment_and_arts"},{"title":"Stories","url":"/news/stories"}]}
   </span>
   <span>
-    {"env":"live","id":"c0000000000o","isUK":true,"origin":"https://www.bbc.com","pageType":"article","derivedPageType":null,"isAmp":true,"isApp":false,"isLite":false,"isNextJs":false,"platform":"amp","statsDestination":"NEWS_PS_TEST","statsPageIdentifier":"news.articles.c0000000000o.page","statusCode":200,"previousPath":null,"variant":null,"timeOnServer":null,"showAdsBasedOnLocation":true,"showCookieBannerBasedOnCountry":true,"service":"news","pathname":"/pathname","canonicalLink":"https://www.bbc.com/pathname","ampLink":"https://www.bbc.com/pathname.amp","canonicalUkLink":"https://www.bbc.co.uk/pathname","ampUkLink":"https://www.bbc.co.uk/pathname.amp","canonicalNonUkLink":"https://www.bbc.com/pathname","ampNonUkLink":"https://www.bbc.com/pathname.amp","mvtExperiments":[{"experimentName":"foo","variation":"bar"}]}
+    {"env":"live","id":"c0000000000o","isUK":true,"origin":"https://www.bbc.com","pageType":"article","derivedPageType":null,"isAmp":true,"isApp":false,"isLite":false,"isNextJs":false,"platform":"amp","statsDestination":"NEWS_PS_TEST","statsPageIdentifier":"news.articles.c0000000000o.page","statusCode":200,"previousPath":null,"variant":null,"timeOnServer":null,"showAdsBasedOnLocation":true,"showCookieBannerBasedOnCountry":true,"service":"news","pathname":"/pathname","canonicalLink":"https://www.bbc.com/pathname","ampLink":"https://www.bbc.com/pathname.amp","canonicalUkLink":"https://www.bbc.co.uk/pathname","ampUkLink":"https://www.bbc.co.uk/pathname.amp","canonicalNonUkLink":"https://www.bbc.com/pathname","ampNonUkLink":"https://www.bbc.com/pathname.amp","mvtExperiments":[{"experimentName":"foo","variation":"bar"}],"requestServiceChain":null}
   </span>
   <span>
     {"toggleState":{"testToggle":{"enabled":false}},"toggleDispatch":"*function - bound dispatchReducerAction*"}

src/app/legacy/containers/PageHandlers/withContexts.jsx

@@ -30,6 +30,7 @@ const WithContexts = Component => {
       mvtExperiments = null,
       isNextJs = false,
       isUK = false,
+      requestServiceChain = null,
     } = props;
 
     const { metadata: { atiAnalytics } = {} } = pageData ?? {};
@@ -60,6 +61,7 @@ const WithContexts = Component => {
             mvtExperiments={mvtExperiments}
             isNextJs={isNextJs}
             isUK={isUK}
+            requestServiceChain={requestServiceChain}
           >
             <EventTrackingContextProvider
               atiData={atiAnalytics}

src/app/legacy/psammead/psammead-brand/src/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import {
   GEL_GROUP_0_SCREEN_WIDTH_MAX,
@@ -11,6 +11,7 @@ import {
   GEL_SPACING_HLF,
   GEL_SPACING,
 } from '#psammead/gel-foundations/src/spacings';
+import { RequestContext } from '#app/contexts/RequestContext';
 import { focusIndicatorThickness } from '../../../../components/ThemeProvider/focusIndicator';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 
@@ -165,7 +166,31 @@ const StyledBrand = ({ linkId, product, serviceLocalisedName = null, svg }) => (
   </>
 );
 
+const PreviewEnvironmentIndicator = () => {
+  const StyledDiv = styled.div`
+    color: ${props => props.theme.palette.WHITE};
+  `;
+  return <StyledDiv aria-hidden>⚠️ Mozart</StyledDiv>;
+};
+
 const Brand = forwardRef((props, ref) => {
+  const [isPreview, setIsPreview] = useState(false);
+
+  useEffect(() => {
+    const hostnameMatchesPreview = window.location.hostname.match(/preview/g);
+    const isPreviewEnvironment =
+      hostnameMatchesPreview && hostnameMatchesPreview.length > 0;
+
+    if (isPreviewEnvironment) {
+      setIsPreview(isPreviewEnvironment);
+    }
+  }, []);
+
+  const { requestServiceChain } = useContext(RequestContext);
+
+  const shouldDisplayPreviewIndicator =
+    isPreview && requestServiceChain && requestServiceChain.includes('MOZART');
+
   const {
     svgHeight,
     maxWidth,
@@ -205,6 +230,7 @@ const Brand = forwardRef((props, ref) => {
         )}
         {skipLink}
         {scriptLink && <div>{scriptLink}</div>}
+        {shouldDisplayPreviewIndicator && <PreviewEnvironmentIndicator />}
       </SvgWrapper>
     </Banner>
   );

src/app/legacy/psammead/psammead-brand/src/index.test.jsx

@@ -1,5 +1,10 @@
 import React, { useRef, useEffect } from 'react';
-import { suppressPropWarnings } from '#psammead/psammead-test-helpers/src';
+import {
+  suppressPropWarnings,
+  setWindowValue,
+  resetWindowValue,
+} from '#psammead/psammead-test-helpers/src';
+
 import { POSTBOX, WHITE } from '../../../../components/ThemeProvider/palette';
 import { render } from '../../../../components/react-testing-library-with-providers';
 import Brand from '.';
@@ -196,4 +201,55 @@ describe('Brand', () => {
       expect(brandLink).toBe(container.querySelector('a'));
     });
   });
+
+  describe('Preview Indicator', () => {
+    const windowLocation = window.location;
+
+    afterEach(() => {
+      resetWindowValue('location', windowLocation);
+    });
+
+    it('should only be displayed when the hostname includes preview and requestServiceChain contains MOZART', () => {
+      setWindowValue('location', {
+        hostname: 'http://localhost-preview.test.bbc.com',
+      });
+
+      const { getByText } = render(<Brand />, {
+        requestServiceChain: 'MOZART,SIMORGH',
+      });
+
+      expect(getByText('⚠️ Mozart')).toBeInTheDocument();
+    });
+
+    it.each([
+      'http://localhost:7080/pidgin',
+      'https://www.test.bbc.com/pidgin',
+      'https://www.bbc.com/pidgin',
+    ])(
+      'should not be displayed when hostname is %s because hostname does not include preview',
+      hostname => {
+        setWindowValue('location', {
+          hostname,
+        });
+
+        const { queryByText } = render(<Brand />, {
+          requestServiceChain: 'MOZART,SIMORGH',
+        });
+
+        expect(queryByText('⚠️ Mozart')).not.toBeInTheDocument();
+      },
+    );
+
+    it('should not be displayed when hostname is preview but requestServiceChain does not contain MOZART', () => {
+      setWindowValue('location', {
+        hostname: 'http://localhost-preview.test.bbc.com',
+      });
+
+      const { queryByText } = render(<Brand />, {
+        requestServiceChain: 'SIMORGH',
+      });
+
+      expect(queryByText('⚠️ Mozart')).not.toBeInTheDocument();
+    });
+  });
 });