Add a check if branding exists to fix typescript errors

Author: deedeeh

dotcom-rendering/src/components/HostedContentHeader.tsx

@@ -15,8 +15,8 @@ import type { Branding } from '../types/branding';
 import { BrandingLabel } from './BrandingLabel';
 
 export type Props = {
-	accentColor: string;
 	branding: Branding;
+	accentColor?: string;
 };
 
 const HOSTED_CONTENT_HEIGHT_MOBILE = 48;
@@ -256,14 +256,14 @@ const HostedContentLogo = () => (
 	</div>
 );
 
-export const HostedContentHeader = ({ accentColor, branding }: Props) => {
+export const HostedContentHeader = ({ branding, accentColor }: Props) => {
 	return (
 		<HeaderWrapper>
 			<Left>
 				<HeaderSection isFirst={true}>
 					<TitleAndBadge
-						accentColor={accentColor}
 						branding={branding}
+						accentColor={accentColor}
 					/>
 				</HeaderSection>
 				<HeaderSection>

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -62,12 +62,12 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	const mainMedia = frontendData.mainMediaElements[0];
 	const mainMediaCaptionText = decideMainMediaCaption(mainMedia);
 
-	const branding =
-		frontendData.commercialProperties[frontendData.editionId].branding;
+	const { branding } =
+		frontendData.commercialProperties[frontendData.editionId];
 
 	return (
 		<>
-			{props.renderingTarget === 'Web' ? (
+			{props.renderingTarget === 'Web' && branding ? (
 				<Stuck>
 					<Section
 						fullWidth={true}
@@ -79,8 +79,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 						element="aside"
 					>
 						<HostedContentHeader
-							accentColor={branding.hostedCampaignColour}
 							branding={branding}
+							accentColor={branding.hostedCampaignColour}
 						/>
 					</Section>
 				</Stuck>

dotcom-rendering/src/layouts/HostedGalleryLayout.tsx

@@ -45,12 +45,12 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
 		format,
 	} = props;
 
-	const branding =
-		frontendData.commercialProperties[frontendData.editionId].branding;
+	const { branding } =
+		frontendData.commercialProperties[frontendData.editionId];
 
 	return (
 		<>
-			{props.renderingTarget === 'Web' ? (
+			{props.renderingTarget === 'Web' && branding ? (
 				<Stuck>
 					<Section
 						fullWidth={true}
@@ -62,8 +62,8 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
 						element="aside"
 					>
 						<HostedContentHeader
-							accentColor={branding.hostedCampaignColour}
 							branding={branding}
+							accentColor={branding.hostedCampaignColour}
 						/>
 					</Section>
 				</Stuck>