feat(HNT-1444) - Allow curators to determine whether a section is followable or allows ads

src/api/fragments/SectionData.ts

@@ -20,6 +20,8 @@ export const BaseSectionData = gql`
     startDate
     endDate
     status
+    followable
+    allowAds
   }
 `;
 export const SectionData = gql`

src/api/generatedTypes.ts

@@ -608,6 +608,8 @@ export type CreateCollectionStoryInput = {
 export type CreateCustomSectionInput = {
   /** Indicates whether or not a Section is available for display. */
   active: Scalars['Boolean'];
+  /** Whether ads can be displayed in this section. */
+  allowAds?: InputMaybe<Scalars['Boolean']>;
   /** The source which created the Section. */
   createSource: ActivitySource;
   /** The description of the custom section displayed to the users. */
@@ -622,6 +624,8 @@ export type CreateCustomSectionInput = {
    * Format: YYYY-MM-DD.
    */
   endDate?: InputMaybe<Scalars['Date']>;
+  /** Whether users can follow this section. */
+  followable?: InputMaybe<Scalars['Boolean']>;
   /** An optional description or supporting text for use in hero modules. */
   heroDescription?: InputMaybe<Scalars['String']>;
   /** An optional title used in hero modules. */
@@ -2165,6 +2169,8 @@ export type Section = {
   __typename?: 'Section';
   /** Indicates whether or not a Section is available for display. */
   active: Scalars['Boolean'];
+  /** Whether ads can be displayed in this section. */
+  allowAds: Scalars['Boolean'];
   /** The source which created the Section. */
   createSource: ActivitySource;
   /** A Unix timestamp of when the Section was created. */
@@ -2183,6 +2189,8 @@ export type Section = {
   endDate?: Maybe<Scalars['Date']>;
   /** An alternative primary key in UUID format. */
   externalId: Scalars['ID'];
+  /** Whether users can follow this section. */
+  followable: Scalars['Boolean'];
   /**
    * An optional description or supporting text for use in hero modules.
    * Relevant for custom sections.
@@ -2539,12 +2547,16 @@ export type UpdateCollectionStorySortOrderInput = {
 
 /** Input data for updating a Custom Editorial Section */
 export type UpdateCustomSectionInput = {
+  /** Whether ads can be displayed in this section. */
+  allowAds?: InputMaybe<Scalars['Boolean']>;
   /** The description of the custom section displayed to the users. */
   description: Scalars['String'];
   /** An optional date of when the Section should stop being displayed. */
   endDate?: InputMaybe<Scalars['Date']>;
   /** An alternative primary key in UUID format supplied by ML. */
   externalId: Scalars['ID'];
+  /** Whether users can follow this section. */
+  followable?: InputMaybe<Scalars['Boolean']>;
   /** An optional description or supporting text for use in hero modules. */
   heroDescription?: InputMaybe<Scalars['String']>;
   /** An optional title used in hero modules. */
@@ -2793,6 +2805,8 @@ export type BaseSectionDataFragment = {
   startDate?: any | null;
   endDate?: any | null;
   status: SectionStatus;
+  followable: boolean;
+  allowAds: boolean;
   iab?: {
     __typename?: 'IABMetadata';
     taxonomy: string;
@@ -2817,6 +2831,8 @@ export type SectionDataFragment = {
   startDate?: any | null;
   endDate?: any | null;
   status: SectionStatus;
+  followable: boolean;
+  allowAds: boolean;
   sectionItems: Array<{
     __typename?: 'SectionItem';
     createdAt: number;
@@ -3393,6 +3409,8 @@ export type CreateCustomSectionMutation = {
     startDate?: any | null;
     endDate?: any | null;
     status: SectionStatus;
+    followable: boolean;
+    allowAds: boolean;
     iab?: {
       __typename?: 'IABMetadata';
       taxonomy: string;
@@ -3635,6 +3653,8 @@ export type DisableEnableSectionMutation = {
     startDate?: any | null;
     endDate?: any | null;
     status: SectionStatus;
+    followable: boolean;
+    allowAds: boolean;
     sectionItems: Array<{
       __typename?: 'SectionItem';
       createdAt: number;
@@ -4338,6 +4358,8 @@ export type UpdateCustomSectionMutation = {
     startDate?: any | null;
     endDate?: any | null;
     status: SectionStatus;
+    followable: boolean;
+    allowAds: boolean;
     iab?: {
       __typename?: 'IABMetadata';
       taxonomy: string;
@@ -5213,6 +5235,8 @@ export type GetSectionsWithSectionItemsQuery = {
     startDate?: any | null;
     endDate?: any | null;
     status: SectionStatus;
+    followable: boolean;
+    allowAds: boolean;
     sectionItems: Array<{
       __typename?: 'SectionItem';
       createdAt: number;
@@ -5472,6 +5496,8 @@ export const BaseSectionDataFragmentDoc = gql`
     startDate
     endDate
     status
+    followable
+    allowAds
   }
 `;
 export const BaseSectionItemDataFragmentDoc = gql`

src/curated-corpus/components/CustomSectionDetails/CustomSectionDetails.tsx

@@ -16,6 +16,8 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import AdUnitsIcon from '@mui/icons-material/AdUnits';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import { DateTime } from 'luxon';
 import { useMutation } from '@apollo/client';
 import {
@@ -470,6 +472,40 @@ export const CustomSectionDetails: React.FC<CustomSectionDetailsProps> = ({
                   {section.sectionItems?.length || 0} items
                 </Typography>
               </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <Typography variant="caption" color="text.secondary">
+                  Followable
+                </Typography>
+                <Box mt={0.5}>
+                  <Chip
+                    variant="outlined"
+                    color={section.followable ? 'success' : 'warning'}
+                    label={section.followable ? 'Followable' : 'Not Followable'}
+                    icon={
+                      section.followable ? (
+                        <BookmarkIcon />
+                      ) : (
+                        <BookmarkBorderIcon />
+                      )
+                    }
+                    size="small"
+                  />
+                </Box>
+              </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <Typography variant="caption" color="text.secondary">
+                  Ads
+                </Typography>
+                <Box mt={0.5}>
+                  <Chip
+                    variant="outlined"
+                    color={section.allowAds ? 'success' : 'warning'}
+                    label={section.allowAds ? 'Ads Allowed' : 'No Ads'}
+                    icon={<AdUnitsIcon />}
+                    size="small"
+                  />
+                </Box>
+              </Grid>
             </Grid>
 
             {/* IAB Category */}

src/curated-corpus/components/CustomSectionForm/CustomSectionForm.test.tsx

@@ -89,4 +89,49 @@ describe('CustomSectionForm', () => {
       screen.getByRole('button', { name: /save changes/i }),
     ).toBeInTheDocument();
   });
+
+  it('should render followable and allow ads checkboxes checked by default', () => {
+    render(
+      <CustomSectionForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />,
+    );
+
+    expect(screen.getByRole('checkbox', { name: /followable/i })).toBeChecked();
+    expect(screen.getByRole('checkbox', { name: /allow ads/i })).toBeChecked();
+  });
+
+  it('should reflect initial values for followable and allowAds', () => {
+    render(
+      <CustomSectionForm
+        onSubmit={mockOnSubmit}
+        onCancel={mockOnCancel}
+        initialValues={{ followable: false, allowAds: false }}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', { name: /followable/i }),
+    ).not.toBeChecked();
+    expect(
+      screen.getByRole('checkbox', { name: /allow ads/i }),
+    ).not.toBeChecked();
+  });
+
+  it('should toggle followable and allowAds checkboxes', () => {
+    render(
+      <CustomSectionForm onSubmit={mockOnSubmit} onCancel={mockOnCancel} />,
+    );
+
+    const followableCheckbox = screen.getByRole('checkbox', {
+      name: /followable/i,
+    });
+    const allowAdsCheckbox = screen.getByRole('checkbox', {
+      name: /allow ads/i,
+    });
+
+    fireEvent.click(followableCheckbox);
+    expect(followableCheckbox).not.toBeChecked();
+
+    fireEvent.click(allowAdsCheckbox);
+    expect(allowAdsCheckbox).not.toBeChecked();
+  });
 });

src/curated-corpus/components/CustomSectionForm/CustomSectionForm.tsx

@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import { DateTime } from 'luxon';
 import { Formik, Form, Field } from 'formik';
-import { Box, TextField, MenuItem, Button } from '@mui/material';
+import {
+  Box,
+  TextField,
+  MenuItem,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+} from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
@@ -51,6 +59,8 @@ export const CustomSectionForm: React.FC<CustomSectionFormProps> = ({
     startDate: DateTime.now(),
     endDate: null,
     iabCategory: '',
+    followable: true,
+    allowAds: true,
   };
 
   const mergedInitialValues = {
@@ -172,6 +182,31 @@ export const CustomSectionForm: React.FC<CustomSectionFormProps> = ({
                 ))}
               </Field>
 
+              <FormGroup row>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={values.followable}
+                      onChange={(e) =>
+                        setFieldValue('followable', e.target.checked)
+                      }
+                    />
+                  }
+                  label="Followable"
+                />
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={values.allowAds}
+                      onChange={(e) =>
+                        setFieldValue('allowAds', e.target.checked)
+                      }
+                    />
+                  }
+                  label="Allow Ads"
+                />
+              </FormGroup>
+
               <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                 {isEditMode && onDelete && (
                   <Button