Toggle the ticker from the banner design preview

public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import BannerVariantPreview from '../bannerTests/bannerVariantPreview';
+import { BannerDesign } from '../../../models/bannerDesign';
+import { Checkbox, FormControlLabel } from '@material-ui/core';
+import { BannerVariant } from '../../../models/banner';
+import { TickerCountType, TickerEndType, TickerName } from '../helpers/shared';
+import { getDefaultVariant } from '../bannerTests/utils/defaults';
+
+interface Props {
+  design: BannerDesign;
+}
+
+interface TickerToggleProps {
+  shouldShowTicker: boolean;
+  setShouldShowTicker: (shouldShowTicker: boolean) => void;
+}
+
+const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={shouldShowTicker}
+          onChange={() => setShouldShowTicker(!shouldShowTicker)}
+          color="primary"
+        />
+      }
+      label={'Show ticker?'}
+    />
+  );
+};
+
+const buildVariantForPreview = (design: BannerDesign, shouldShowTicker: boolean): BannerVariant => {
+  const tickerSettings = shouldShowTicker
+    ? {
+        countType: TickerCountType.money,
+        endType: TickerEndType.hardstop,
+        currencySymbol: '£',
+        copy: {
+          countLabel: 'contributions in May',
+          goalReachedPrimary: "We've met our goal - thank you!",
+          goalReachedSecondary: '',
+        },
+        name: TickerName.US,
+      }
+    : undefined;
+
+  return {
+    ...getDefaultVariant(),
+    template: { designName: design.name },
+    tickerSettings,
+  };
+};
+
+const BannerDesignPreview: React.FC<Props> = ({ design }: Props) => {
+  const [shouldShowTicker, setShouldShowTicker] = useState<boolean>(false);
+
+  return (
+    <BannerVariantPreview
+      variant={buildVariantForPreview(design, shouldShowTicker)}
+      design={design}
+      controls={
+        <TickerToggle
+          shouldShowTicker={shouldShowTicker}
+          setShouldShowTicker={setShouldShowTicker}
+        />
+      }
+    />
+  );
+};
+
+export { BannerDesignPreview };

public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx

@@ -8,17 +8,8 @@ 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 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 },
-  };
-};
+import { BannerDesignPreview } from './BannerDesignPreview';
 
 const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
   container: {
@@ -157,7 +148,7 @@ const StickyTopBar: React.FC<Props> = ({
               </Button>
             </>
           )}
-          <BannerVariantPreview variant={buildVariantForPreview(design)} design={design} />
+          <BannerDesignPreview design={design} />
         </div>
       </div>
     </header>

public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
-import { Theme, makeStyles, Button } from '@material-ui/core';
+import { Button, makeStyles, Theme } from '@material-ui/core';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import Drawer from '@material-ui/core/Drawer';
 import {
+  BannerContent,
   BannerTemplate,
   BannerVariant,
-  BannerContent,
   isBannerTemplate,
 } from '../../../models/banner';
 import Typography from '@material-ui/core/Typography';
 import { useModule } from '../../../hooks/useModule';
 import useTickerData, { TickerSettingsWithData } from '../hooks/useTickerData';
-import { SelectedAmountsVariant, mockAmountsCardData } from '../../../utils/models';
+import { mockAmountsCardData, SelectedAmountsVariant } from '../../../utils/models';
 import { BannerDesign, BannerDesignProps } from '../../../models/bannerDesign';
 
 // Mock prices data
@@ -178,7 +178,7 @@ const bannerModules = {
   },
 };
 
-const useStyles = makeStyles(({ palette }: Theme) => ({
+const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
   drawer: {
     height: 'auto',
     bottom: 0,
@@ -198,16 +198,26 @@ const useStyles = makeStyles(({ palette }: Theme) => ({
     fontStyle: 'italic',
     fontSize: '20px',
   },
+  controlsContainer: {
+    position: 'fixed',
+    backgroundColor: palette.grey[100],
+    borderRadius: '4px',
+    top: spacing(3),
+    left: spacing(3),
+    padding: spacing(3),
+  },
 }));
 
 interface BannerVariantPreviewProps {
   variant: BannerVariant;
   design?: BannerDesign;
+  controls?: React.ReactElement;
 }
 
 const BannerVariantPreview: React.FC<BannerVariantPreviewProps> = ({
   variant,
   design,
+  controls,
 }: BannerVariantPreviewProps) => {
   const classes = useStyles();
 
@@ -251,6 +261,7 @@ const BannerVariantPreview: React.FC<BannerVariantPreviewProps> = ({
                 <Typography>Click anywhere outside the banner to close</Typography>
               </div>
               <Banner {...props} />
+              {controls && <div className={classes.controlsContainer}>{controls}</div>}
             </div>
           </Drawer>
         </React.Fragment>