Add consent targeting to RRCP

app/models/BannerTests.scala

@@ -63,6 +63,7 @@ case class BannerTest(
     deviceType: Option[DeviceType] = None,
     campaignName: Option[String] = Some("NOT_IN_CAMPAIGN"),
     signedInStatus: Option[SignedInStatus] = Some(SignedInStatus.All),
+    consentStatus: Option[ConsentStatus] = Some(ConsentStatus.All),
 ) extends ChannelTest[BannerTest] {
 
   override def withChannel(channel: Channel): BannerTest =

app/models/ConsentStatus.scala

@@ -0,0 +1,16 @@
+package models
+
+import io.circe.generic.extras.Configuration
+import io.circe.generic.extras.semiauto.{ deriveEnumerationDecoder, deriveEnumerationEncoder }
+import io.circe.{Decoder, Encoder}
+
+sealed trait ConsentStatus
+
+object ConsentStatus {
+  case object All extends ConsentStatus
+  case object HasConsented extends ConsentStatus
+  case object HasNotConsented extends ConsentStatus
+  implicit val customConfig: Configuration = Configuration.default.withDefaults
+  implicit val decoder: Decoder[ConsentStatus] = deriveEnumerationDecoder[ConsentStatus]
+  implicit val encoder: Encoder[ConsentStatus] = deriveEnumerationEncoder[ConsentStatus]
+}

app/models/EpicTest.scala

@@ -60,6 +60,7 @@ case class EpicTest(
   deviceType: Option[DeviceType] = None,
   campaignName: Option[String] = Some("NOT_IN_CAMPAIGN"),
   signedInStatus: Option[SignedInStatus] = Some(SignedInStatus.All),
+  consentStatus: Option[ConsentStatus] = Some(ConsentStatus.All),
 ) extends ChannelTest[EpicTest] {
 
   override def withChannel(channel: Channel): EpicTest = this.copy(channel = Some(channel))

app/models/HeaderTests.scala

@@ -32,6 +32,7 @@ case class HeaderTest(
   deviceType: Option[DeviceType] = None,
   campaignName: Option[String] = Some("NOT_IN_CAMPAIGN"),
   signedInStatus: Option[SignedInStatus] = Some(SignedInStatus.All),
+  consentStatus: Option[ConsentStatus] = Some(ConsentStatus.All),
 ) extends ChannelTest[HeaderTest] {
 
   override def withChannel(channel: Channel): HeaderTest = this.copy(channel = Some(channel))

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

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Region } from '../../../utils/models';
-import { ArticlesViewedSettings, DeviceType, SignedInStatus, UserCohort } from '../helpers/shared';
+import {
+  ArticlesViewedSettings,
+  ConsentStatus,
+  DeviceType,
+  SignedInStatus,
+  UserCohort,
+} from '../helpers/shared';
 import { ARTICLE_COUNT_TEMPLATE } from '../helpers/validation';
 import { Typography } from '@mui/material';
 import BannerTestVariantEditor from './bannerTestVariantEditor';
@@ -128,6 +134,10 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
     onTestChange({ ...test, signedInStatus });
   };
 
+  const onConsentStatusChange = (consentStatus: ConsentStatus): void => {
+    onTestChange({ ...test, consentStatus });
+  };
+
   const onArticlesViewedSettingsChange = (
     updatedArticlesViewedSettings?: ArticlesViewedSettings,
   ): void => {
@@ -263,6 +273,9 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
             showDeviceTypeSelector={true}
             selectedSignedInStatus={test.signedInStatus}
             onSignedInStatusChange={onSignedInStatusChange}
+            selectedConsentStatus={test.consentStatus}
+            onConsentStatusChange={onConsentStatusChange}
+            showConsentStatusSelector={true}
           />
         </div>
 

public/src/components/channelManagement/epicTests/epicTestEditor.tsx

@@ -8,6 +8,7 @@ import {
   DeviceType,
   SignedInStatus,
   PageContextTargeting,
+  ConsentStatus,
 } from '../helpers/shared';
 import { FormControlLabel, Switch, Typography } from '@mui/material';
 import CampaignSelector from '../CampaignSelector';
@@ -158,6 +159,10 @@ export const getEpicTestEditor = (
       onTestChange({ ...test, signedInStatus });
     };
 
+    const onConsentChange = (consentStatus: ConsentStatus): void => {
+      onTestChange({ ...test, consentStatus });
+    };
+
     const onArticlesViewedSettingsChange = (
       updatedArticlesViewedSettings?: ArticlesViewedSettings,
     ): void => {
@@ -332,6 +337,9 @@ export const getEpicTestEditor = (
               showDeviceTypeSelector={epicEditorConfig.allowDeviceTypeTargeting}
               selectedSignedInStatus={test.signedInStatus}
               onSignedInStatusChange={onSignedInStatusChange}
+              selectedConsentStatus={test.consentStatus}
+              onConsentStatusChange={onConsentChange}
+              showConsentStatusSelector={false}
               platform={epicEditorConfig.platform}
             />
           </div>

public/src/components/channelManagement/headerTests/headerTestEditor.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Region } from '../../../utils/models';
 
-import { DeviceType, SignedInStatus, UserCohort } from '../helpers/shared';
+import { ConsentStatus, DeviceType, SignedInStatus, UserCohort } from '../helpers/shared';
 
 import { Typography } from '@mui/material';
 import HeaderTestVariantEditor from './headerTestVariantEditor';
@@ -73,6 +73,10 @@ const HeaderTestEditor: React.FC<ValidatedTestEditorProps<HeaderTest>> = ({
     onTestChange({ ...test, signedInStatus });
   };
 
+  const onConsentChange = (consentStatus: ConsentStatus): void => {
+    onTestChange({ ...test, consentStatus });
+  };
+
   const renderVariantEditor = (variant: HeaderVariant): React.ReactElement => (
     <HeaderTestVariantEditor
       key={`head-${test.name}-${variant.name}`}
@@ -181,6 +185,9 @@ const HeaderTestEditor: React.FC<ValidatedTestEditorProps<HeaderTest>> = ({
           showDeviceTypeSelector={true}
           selectedSignedInStatus={test.signedInStatus}
           onSignedInStatusChange={onSignedInStatusChange}
+          selectedConsentStatus={test.consentStatus}
+          onConsentStatusChange={onConsentChange}
+          showConsentStatusSelector={false}
         />
       </div>
     </div>

public/src/components/channelManagement/helpers/shared.ts

@@ -27,6 +27,7 @@ export interface Test {
   userCohort?: string;
   channel?: string;
   signedInStatus?: SignedInStatus;
+  consentStatus?: ConsentStatus;
 }
 
 export interface EpicEditorConfig {
@@ -253,6 +254,8 @@ export type ContributionFrequency = 'ONE_OFF' | 'MONTHLY' | 'ANNUAL';
 
 export type DeviceType = 'Mobile' | 'Desktop' | 'All' | 'iOS' | 'Android';
 
+export type ConsentStatus = 'HasConsented' | 'HasNotConsented' | 'All';
+
 export interface Image {
   mainUrl: string;
   altText: string;

public/src/components/channelManagement/testEditorTargetAudienceSelector.tsx

@@ -3,7 +3,13 @@ import React from 'react';
 import { Theme, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { Region } from '../../utils/models';
-import { DeviceType, SignedInStatus, UserCohort, TestPlatform } from './helpers/shared';
+import {
+  DeviceType,
+  SignedInStatus,
+  UserCohort,
+  TestPlatform,
+  ConsentStatus,
+} from './helpers/shared';
 
 import TestEditorTargetRegionsSelector from './testEditorTargetRegionsSelector';
 import TypedRadioGroup from './TypedRadioGroup';
@@ -41,6 +47,9 @@ interface TestEditorTargetAudienceSelectorProps {
   showDeviceTypeSelector: boolean;
   selectedSignedInStatus?: SignedInStatus;
   onSignedInStatusChange: (signedInStatus: SignedInStatus) => void;
+  selectedConsentStatus?: ConsentStatus;
+  onConsentStatusChange: (consentStatus: ConsentStatus) => void;
+  showConsentStatusSelector: boolean;
   platform?: TestPlatform;
 }
 const TestEditorTargetAudienceSelector: React.FC<TestEditorTargetAudienceSelectorProps> = ({
@@ -56,6 +65,9 @@ const TestEditorTargetAudienceSelector: React.FC<TestEditorTargetAudienceSelecto
   showDeviceTypeSelector,
   selectedSignedInStatus,
   onSignedInStatusChange,
+  selectedConsentStatus,
+  onConsentStatusChange,
+  showConsentStatusSelector,
   platform,
 }: TestEditorTargetAudienceSelectorProps) => {
   const classes = useStyles();
@@ -120,6 +132,22 @@ const TestEditorTargetAudienceSelector: React.FC<TestEditorTargetAudienceSelecto
           }}
         />
       </div>
+
+      {showConsentStatusSelector && (
+        <div className={classes.sectionContainer}>
+          <Typography className={classes.heading}>Consent Status</Typography>
+          <TypedRadioGroup
+            selectedValue={selectedConsentStatus ?? 'All'}
+            onChange={onConsentStatusChange}
+            isDisabled={isDisabled}
+            labels={{
+              All: 'All',
+              HasConsented: 'Has consented',
+              HasNotConsented: 'Has not consented',
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };