Merge pull request #623 from guardian/cc/removing-ticker-options

Update to ticker config
guardian · Oct 3, 2024 · a2d23a3 · a2d23a3
2 parents c2d2540 + db78f09
commit a2d23a3
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 65 deletions.
diff --git a/app/models/BannerDesign.scala b/app/models/BannerDesign.scala
@@ -82,12 +82,32 @@ case class CtaDesign(
 )
 
 case class TickerDesign(
-  text: HexColour,
+  text: HexColour, //deprecated
   filledProgress: HexColour,
   progressBarBackground: HexColour,
-  goalMarker: HexColour
+  goalMarker: HexColour, //deprecated
+  headlineColour: Option[HexColour],  //new
+  totalColour: Option[HexColour], //new
+  goalColour: Option[HexColour] //new
 )
 
+object TickerDesign {
+  import io.circe.generic.auto._
+  implicit val encoder = Encoder[TickerDesign]
+
+  // Modify the Decoder to use existing values for the new fields
+  val normalDecoder = Decoder[TickerDesign]
+  implicit val decoder = normalDecoder.map(design => {
+    val headlineColour = design.headlineColour.getOrElse(design.text)
+    val totalColour = design.totalColour.getOrElse(design.text)
+    val goalColour = design.goalColour.getOrElse(design.text)
+    design.copy(
+      headlineColour = Some(headlineColour),
+      totalColour = Some(totalColour),
+      goalColour = Some(goalColour))
+  })
+}
+
 case class BannerDesignColours(
   basic: BannerDesignBasicColours,
   highlightedText: BannerDesignHighlightedTextColours,

diff --git a/app/models/Ticker.scala b/app/models/Ticker.scala
@@ -33,8 +33,8 @@ object TickerName {
 
 case class TickerCopy(
   countLabel: String,
-  goalReachedPrimary: String,
-  goalReachedSecondary: String
+  goalReachedPrimary: Option[String] , //deprecated
+  goalReachedSecondary: Option[String] //deprecated
 )
 
 case class TickerSettings(

diff --git a/public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx b/public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx
@@ -81,7 +81,7 @@ const buildVariantForPreview = (
         currencySymbol: '£',
         copy: {
           countLabel: 'contributions in May',
-          goalReachedPrimary: "We've met our goal - thank you!",
+          goalReachedPrimary: '',
           goalReachedSecondary: '',
         },
         name: TickerName.US,

diff --git a/public/src/components/channelManagement/bannerDesigns/TickerDesignEditor.tsx b/public/src/components/channelManagement/bannerDesigns/TickerDesignEditor.tsx
@@ -31,6 +31,7 @@ export const TickerDesignEditor: React.FC<Props> = ({
 
   return (
     <div className={classes.container}>
+      {/* Deprecated */}
       <ColourInput
         colour={ticker.text}
         name="ticker.text"
@@ -39,14 +40,6 @@ export const TickerDesignEditor: React.FC<Props> = ({
         onChange={colour => onChange({ ...ticker, text: colour })}
         onValidationChange={onValidationChange}
       />
-      <ColourInput
-        colour={ticker.progressBarBackground}
-        name="ticker.progressBarBackground"
-        label="Progress Bar Background Colour"
-        isDisabled={isDisabled}
-        onChange={colour => onChange({ ...ticker, progressBarBackground: colour })}
-        onValidationChange={onValidationChange}
-      />
       <ColourInput
         colour={ticker.filledProgress}
         name="ticker.filledProgress"
@@ -55,6 +48,15 @@ export const TickerDesignEditor: React.FC<Props> = ({
         onChange={colour => onChange({ ...ticker, filledProgress: colour })}
         onValidationChange={onValidationChange}
       />
+      <ColourInput
+        colour={ticker.progressBarBackground}
+        name="ticker.progressBarBackground"
+        label="Progress Bar Background Colour"
+        isDisabled={isDisabled}
+        onChange={colour => onChange({ ...ticker, progressBarBackground: colour })}
+        onValidationChange={onValidationChange}
+      />
+      {/* Deprecated */}
       <ColourInput
         colour={ticker.goalMarker}
         name="ticker.goalMarker"
@@ -63,6 +65,30 @@ export const TickerDesignEditor: React.FC<Props> = ({
         onChange={colour => onChange({ ...ticker, goalMarker: colour })}
         onValidationChange={onValidationChange}
       />
+      <ColourInput
+        colour={ticker.headlineColour}
+        name="ticker.headlineColour"
+        label="Headline Colour"
+        isDisabled={isDisabled}
+        onChange={colour => onChange({ ...ticker, headlineColour: colour })}
+        onValidationChange={onValidationChange}
+      />
+      <ColourInput
+        colour={ticker.totalColour}
+        name="ticker.totalColour"
+        label="Total Colour"
+        isDisabled={isDisabled}
+        onChange={colour => onChange({ ...ticker, totalColour: colour })}
+        onValidationChange={onValidationChange}
+      />
+      <ColourInput
+        colour={ticker.goalColour}
+        name="ticker.goalColour"
+        label="Goal Colour"
+        isDisabled={isDisabled}
+        onChange={colour => onChange({ ...ticker, goalColour: colour })}
+        onValidationChange={onValidationChange}
+      />
     </div>
   );
 };
diff --git a/public/src/components/channelManagement/bannerDesigns/utils/defaults.ts b/public/src/components/channelManagement/bannerDesigns/utils/defaults.ts
@@ -77,10 +77,13 @@ export const createDefaultBannerDesign = (name: string): BannerDesign => ({
       },
     },
     ticker: {
-      text: stringToHexColour('052962'),
+      text: stringToHexColour('052962'), // deprecated
       filledProgress: stringToHexColour('052962'),
       progressBarBackground: stringToHexColour('FFFFFF'),
-      goalMarker: stringToHexColour('000000'),
+      goalMarker: stringToHexColour('000000'), //deprecated
+      headlineColour: stringToHexColour('052962'),
+      totalColour: stringToHexColour('052962'),
+      goalColour: stringToHexColour('052962'),
     },
   },
 });
diff --git a/public/src/components/channelManagement/helpers/shared.ts b/public/src/components/channelManagement/helpers/shared.ts
@@ -261,8 +261,8 @@ export enum TickerName {
 
 interface TickerCopy {
   countLabel: string;
-  goalReachedPrimary: string;
-  goalReachedSecondary: string;
+  goalReachedPrimary?: string;
+  goalReachedSecondary?: string;
 }
 export interface TickerSettings {
   endType: TickerEndType;

diff --git a/public/src/components/channelManagement/tickerEditor.tsx b/public/src/components/channelManagement/tickerEditor.tsx
@@ -29,18 +29,18 @@ const useStyles = makeStyles(({ spacing }: Theme) => ({
 
 interface FormData {
   countLabel: string;
-  goalReachedPrimary: string;
-  goalReachedSecondary: string;
+  goalReachedPrimary?: string; //deprecated for now
+  goalReachedSecondary?: string; //deprecated for now
   currencySymbol: string;
 }
 
 const DEFAULT_TICKER_SETTINGS: TickerSettings = {
   endType: TickerEndType.unlimited,
   countType: TickerCountType.money,
   copy: {
-    countLabel: 'contributions',
-    goalReachedPrimary: "We've hit our goal!",
-    goalReachedSecondary: 'but you can still support us',
+    countLabel: 'Contributions',
+    goalReachedPrimary: '', //deprecated for now
+    goalReachedSecondary: '', //deprecated for now
   },
   currencySymbol: '$',
   name: TickerName.US,
@@ -107,16 +107,11 @@ const TickerEditor: React.FC<TickerEditorProps> = ({
     tickerSettings && updateTickerSettings({ ...tickerSettings, name: selectedName });
   };
 
-  const onSubmit = ({
-    countLabel,
-    goalReachedPrimary,
-    goalReachedSecondary,
-    currencySymbol,
-  }: FormData): void => {
+  const onSubmit = ({ countLabel, currencySymbol }: FormData): void => {
     tickerSettings &&
       updateTickerSettings({
         ...tickerSettings,
-        copy: { countLabel, goalReachedPrimary, goalReachedSecondary },
+        copy: { countLabel },
         currencySymbol: currencySymbol || '$',
       });
   };
@@ -168,33 +163,7 @@ const TickerEditor: React.FC<TickerEditorProps> = ({
             helperText={errors?.countLabel?.message}
             onBlur={handleSubmit(onSubmit)}
             name="countLabel"
-            label="Count Label"
-            margin="normal"
-            variant="outlined"
-            disabled={isDisabled}
-            fullWidth
-          />
-
-          <TextField
-            inputRef={register({ required: true })}
-            error={!!errors.goalReachedPrimary}
-            helperText={errors?.goalReachedPrimary?.message}
-            onBlur={handleSubmit(onSubmit)}
-            name="goalReachedPrimary"
-            label="Goal reached primary text"
-            margin="normal"
-            variant="outlined"
-            disabled={isDisabled}
-            fullWidth
-          />
-
-          <TextField
-            inputRef={register({ required: true })}
-            error={!!errors.goalReachedSecondary}
-            helperText={errors?.goalReachedSecondary?.message}
-            onBlur={handleSubmit(onSubmit)}
-            name="goalReachedSecondary"
-            label="Goal reached secondary text"
+            label="Heading"
             margin="normal"
             variant="outlined"
             disabled={isDisabled}
@@ -220,7 +189,7 @@ const TickerEditor: React.FC<TickerEditorProps> = ({
             <FormControl component="fieldset">
               <FormLabel component="legend">Ticker end type</FormLabel>
               <RadioGroup
-                value={tickerSettings.endType}
+                value={TickerEndType.hardstop}
                 onChange={onEndTypeChanged}
                 aria-label="ticker-end-type"
                 name="ticker-end-type"
@@ -231,12 +200,6 @@ const TickerEditor: React.FC<TickerEditorProps> = ({
                   label="Hard stop"
                   disabled={isDisabled}
                 />
-                <FormControlLabel
-                  value={TickerEndType.unlimited}
-                  control={<Radio />}
-                  label="Unlimited"
-                  disabled={isDisabled}
-                />
               </RadioGroup>
             </FormControl>
           </div>

diff --git a/public/src/models/bannerDesign.ts b/public/src/models/bannerDesign.ts
@@ -31,10 +31,14 @@ export interface CtaDesign {
 }
 
 export interface TickerDesign {
-  text: HexColour;
+  text: HexColour; //deprecated
   filledProgress: HexColour;
   progressBarBackground: HexColour;
-  goalMarker: HexColour;
+  goalMarker: HexColour; //deprecated
+
+  headlineColour: HexColour; //new
+  totalColour: HexColour; //new
+  goalColour: HexColour; //new
 }
 
 export interface BannerDesignHeaderImage {