From bc560182f692912854feeccdb5eab848bd7b69d5 Mon Sep 17 00:00:00 2001
From: Tom Wey <tom.wey@theguardian.com>
Date: Fri, 13 Oct 2023 10:09:19 +0100
Subject: [PATCH] Support previewing a design directly (#514)

No support for showing a ticker yet.
---
 .../bannerDesigns/BannerDesignEditor.tsx      |  2 +-
 .../bannerDesigns/StickyTopBar.tsx            | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/src/components/channelManagement/bannerDesigns/BannerDesignEditor.tsx b/public/src/components/channelManagement/bannerDesigns/BannerDesignEditor.tsx
index 04f7ba81..a4a5c2e3 100644
--- a/public/src/components/channelManagement/bannerDesigns/BannerDesignEditor.tsx
+++ b/public/src/components/channelManagement/bannerDesigns/BannerDesignEditor.tsx
@@ -69,7 +69,7 @@ const BannerDesignEditor: React.FC<Props> = ({
         onSave={onSaveWithValidation}
         userHasLock={userHasLock}
         lockStatus={lockStatus}
-        status={design.status}
+        design={design}
         onStatusChange={onStatusChange}
       />
       <div className={classes.scrollableContainer}>
diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
index 9b619eb0..513e9352 100644
--- a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
+++ b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
@@ -8,7 +8,17 @@ import SaveIcon from '@material-ui/icons/Save';
 import { grey } from '@material-ui/core/colors';
 import { LockStatus } from '../helpers/shared';
 import LiveSwitch from '../../shared/liveSwitch';
-import { Status } from '../../../models/bannerDesign';
+import BannerVariantPreview from '../bannerTests/bannerVariantPreview';
+import { getDefaultVariant } from '../bannerTests/utils/defaults';
+import { BannerVariant } from '../../../models/banner';
+import { BannerDesign, Status } from '../../../models/bannerDesign';
+
+const buildVariantForPreview = (design: BannerDesign): BannerVariant => {
+  return {
+    ...getDefaultVariant(),
+    template: { designName: design.name },
+  };
+};
 
 const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
   container: {
@@ -64,7 +74,7 @@ const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
 
 interface Props {
   name: string;
-  status: Status;
+  design: BannerDesign;
   onLock: (name: string, force: boolean) => void;
   onUnlock: (name: string) => void;
   onSave: (name: string) => void;
@@ -75,7 +85,7 @@ interface Props {
 
 const StickyTopBar: React.FC<Props> = ({
   name,
-  status,
+  design,
   onLock,
   onUnlock,
   onSave,
@@ -96,7 +106,7 @@ const StickyTopBar: React.FC<Props> = ({
         <div className={classes.switchContainer}>
           <LiveSwitch
             label="Status"
-            isLive={status === 'Live'}
+            isLive={design.status === 'Live'}
             onChange={(isLive: boolean) => onStatusChange(isLive ? 'Live' : 'Draft')}
             isDisabled={userHasLock && lockStatus.locked}
           />
@@ -147,6 +157,7 @@ const StickyTopBar: React.FC<Props> = ({
               </Button>
             </>
           )}
+          <BannerVariantPreview variant={buildVariantForPreview(design)} design={design} />
         </div>
       </div>
     </header>