Remove RegionTargetingType and add changes for Banners

app/models/BannerTests.scala

@@ -38,6 +38,7 @@ case class BannerTest(
     nickname: Option[String],
     userCohort: UserCohort,
     locations: List[Region] = Nil,
+    targetedCountries: List[String] = Nil,
     contextTargeting: PageContextTargeting = PageContextTargeting(Nil,Nil,Nil,Nil),
     variants: List[BannerVariant],
     articlesViewedSettings: Option[ArticlesViewedSettings] = None,

app/models/EpicTest.scala

@@ -47,7 +47,6 @@ case class EpicTest(
   nickname: Option[String],
   locations: List[Region] = Nil,
   targetedCountries: List[String] = Nil,
-  regionTargetingType : Option[RegionTargetingType] = None,
   tagIds: List[String] = Nil,
   sections: List[String] = Nil,
   excludedTagIds: List[String] = Nil,

public/src/components/channelManagement/MultiSelectCountryEditor.tsx

@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
 import { makeStyles } from '@mui/styles';
 import { grey } from '@mui/material/colors';
 import { Theme } from '@mui/material/styles';
-import { countryNames, Region } from '../../utils/models';
+import { countryNames } from '../../utils/models';
 
 const useStyles = makeStyles(({ spacing }: Theme) => ({
   container: {

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

@@ -135,6 +135,10 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
     updateTest({ ...test, locations: updatedRegions });
   };
 
+  const onCountriesChange = (updatedCountries: string[]): void => {
+    updateTest({ ...test, targetedCountries: updatedCountries });
+  };
+
   const onCohortChange = (updatedCohort: UserCohort): void => {
     updateTest({ ...test, userCohort: updatedCohort });
   };
@@ -297,6 +301,8 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
           <TestEditorTargetAudienceSelector
             selectedRegions={test.locations}
             onRegionsUpdate={onRegionsChange}
+            selectedCountries={test.targetedCountries}
+            onCountriesUpdate={onCountriesChange}
             selectedCohort={test.userCohort}
             onCohortChange={onCohortChange}
             selectedDeviceType={test.deviceType ?? 'All'}

public/src/components/channelManagement/bannerTests/utils/defaults.ts

@@ -50,6 +50,7 @@ const DEV_AND_CODE_DEFAULT_BANNER_TEST: BannerTest = {
   status: 'Draft',
   userCohort: UserCohort.AllNonSupporters,
   locations: [],
+  targetedCountries: [],
   variants: [DEV_AND_CODE_DEFAULT_VARIANT],
   articlesViewedSettings: undefined,
   contextTargeting: { tagIds: [], sectionIds: [], excludedTagIds: [], excludedSectionIds: [] },
@@ -62,6 +63,7 @@ const PROD_DEFAULT_BANNER: BannerTest = {
   status: 'Draft',
   userCohort: UserCohort.AllNonSupporters,
   locations: [],
+  targetedCountries: [],
   variants: [],
   articlesViewedSettings: undefined,
   contextTargeting: { tagIds: [], sectionIds: [], excludedTagIds: [], excludedSectionIds: [] },

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

@@ -151,7 +151,7 @@ export const getEpicTestEditor = (
     };
 
     const onRegionsChange = (updatedRegions: Region[]): void => {
-      updateTest({ ...test, locations: updatedRegions }); // TODO change to targetingType
+      updateTest({ ...test, locations: updatedRegions });
     };
     const onCountriesChange = (updatedCountries: string[]): void => {
       updateTest({ ...test, targetedCountries: updatedCountries });
@@ -353,8 +353,8 @@ export const getEpicTestEditor = (
             <TestEditorTargetAudienceSelector
               selectedRegions={test.locations}
               onRegionsUpdate={onRegionsChange}
-              selectedCountries={test.targetedCountries} //TODO
-              onCountriesUpdate={onCountriesChange} //TODO
+              selectedCountries={test.targetedCountries}
+              onCountriesUpdate={onCountriesChange}
               selectedCohort={test.userCohort}
               onCohortChange={onCohortChange}
               supportedRegions={epicEditorConfig.supportedRegions}

public/src/components/channelManagement/epicTests/utils/defaults.ts

@@ -1,17 +1,13 @@
 import { Cta, SecondaryCtaType, UserCohort } from '../../helpers/shared';
 
 import { getStage } from '../../../../utils/stage';
-import { EpicTest, EpicVariant, MaxEpicViews, RegionTargetingType } from '../../../../models/epic';
+import { EpicTest, EpicVariant, MaxEpicViews } from '../../../../models/epic';
 
 export const DEFAULT_MAX_EPIC_VIEWS: MaxEpicViews = {
   maxViewsCount: 4,
   maxViewsDays: 30,
   minDaysBetweenViews: 0,
 };
-export const DEFAULT_TARGETING_TYPE: RegionTargetingType = {
-  locations: [],
-  targetedCountries: [],
-};
 
 export const DEFAULT_PRIMARY_CTA: Cta = {
   text: 'Continue',
@@ -66,7 +62,6 @@ const DEV_AND_CODE_DEFAULT_TEST: EpicTest = {
   status: 'Draft',
   locations: [],
   targetedCountries: [],
-  targetingType: DEFAULT_TARGETING_TYPE,
   tagIds: [],
   sections: [],
   excludedTagIds: [],
@@ -87,7 +82,6 @@ const PROD_DEFAULT_TEST: EpicTest = {
   status: 'Draft',
   locations: [],
   targetedCountries: [],
-  targetingType: DEFAULT_TARGETING_TYPE,
   tagIds: [],
   sections: [],
   excludedTagIds: [],

public/src/components/channelManagement/testEditorTargetAudienceSelector.tsx

@@ -25,6 +25,11 @@ const useStyles = makeStyles(({ spacing, palette }: Theme) => ({
     color: palette.grey[900],
     fontWeight: 500,
   },
+  container1: {
+    display: 'inline',
+    gap: spacing(12),
+    flexWrap: 'wrap',
+  },
 }));
 
 interface TestEditorTargetAudienceSelectorProps {
@@ -73,21 +78,22 @@ const TestEditorTargetAudienceSelector: React.FC<TestEditorTargetAudienceSelecto
 
   return (
     <div className={classes.container}>
-      <Typography className={classes.heading}>Region</Typography>
-      <TestEditorTargetRegionsSelector
-        selectedRegions={selectedRegions}
-        onRegionsUpdate={onRegionsUpdate}
-        supportedRegions={supportedRegions}
-        isDisabled={isDisabled}
-        platform={platform}
-      />
-
-      <MultiSelectCountryEditor
-        disabled={isDisabled}
-        selectedCountries={selectedCountries}
-        onCountriesUpdate={onCountriesUpdate}
-      />
+      <div className={classes.container1}>
+        <Typography className={classes.heading}>Region</Typography>
+        <TestEditorTargetRegionsSelector
+          selectedRegions={selectedRegions}
+          onRegionsUpdate={onRegionsUpdate}
+          supportedRegions={supportedRegions}
+          isDisabled={isDisabled}
+          platform={platform}
+        />
 
+        <MultiSelectCountryEditor
+          disabled={isDisabled}
+          selectedCountries={selectedCountries ?? []}
+          onCountriesUpdate={onCountriesUpdate ?? (() => {})}
+        />
+      </div>
       {showSupporterStatusSelector && (
         <>
           <Typography className={classes.heading}>Supporter Status</Typography>

public/src/models/banner.ts

@@ -45,6 +45,7 @@ export interface BannerTest extends Test {
   status: Status;
   userCohort: UserCohort;
   locations: Region[];
+  targetedCountries?: string[];
   variants: BannerVariant[];
   articlesViewedSettings?: ArticlesViewedSettings;
   controlProportionSettings?: ControlProportionSettings;

public/src/models/epic.ts

@@ -44,18 +44,12 @@ export interface MaxEpicViews {
   minDaysBetweenViews: number;
 }
 
-export interface RegionTargetingType {
-  locations?: Region[];
-  targetedCountries?: string[];
-}
-
 export interface EpicTest extends Test {
   name: string;
   nickname?: string;
   status: Status;
   locations: Region[];
-  targetedCountries: string[];
-  targetingType?: RegionTargetingType;
+  targetedCountries?: string[];
   tagIds: string[];
   sections: string[];
   excludedTagIds: string[];

public/src/utils/models.tsx

@@ -287,7 +287,7 @@ export const countries: CommonStringObject = {
   ZW: 'Zimbabwe',
 };
 
-export const countryNames = Object.entries(countries).map(_ =>[_[0], _[1]]);
+export const countryNames = Object.entries(countries).map(_ => [_[0], _[1]]);
 export type Country = keyof typeof countries;
 
 export interface AmountValuesObject {