TNO-2195: Split view for managing folders and new configure page

app/subscriber/src/components/basic-search/styled/BasicSearch.tsx

@@ -13,12 +13,12 @@ export const BasicSearch = styled(Row)<{ inHeader?: boolean }>`
       background: ${props.theme.css.bkSecondary};
       margin: 0.25em;
       border-color: ${props.theme.css.inputGrey};
+      margin-bottom: 1em;
       border-style: solid;
       border-width: 1px;
       border-radius: 1em;
       box-shadow: ${props.theme.css.boxShadow};
       padding: 0.5em;
-      margin: 0 1rem;
   `}
   align-items: center;
 

app/subscriber/src/components/navbar/NavbarItems.tsx

@@ -84,7 +84,7 @@ export const NavbarOptions: INavbarOptions = {
   folders: {
     groupName: 'MY CONTENT',
     label: 'My Folders',
-    path: 'landing/folders',
+    path: 'folders',
     icon: <FaFolder />,
   },
   myReports: {

app/subscriber/src/components/table/styled/SubscriberTableContainer.tsx

@@ -6,11 +6,8 @@ export const SubscriberTableContainer = styled(Col)`
   overflow: hidden;
 
   .header {
-    color: ${(props) => props.theme.css.fPrimaryColor};
-    font-size: 1em;
     border-top: none;
     border-bottom: 1px solid ${(props) => props.theme.css.linePrimaryColor};
-    margin-bottom: 0.5rem;
   }
 
   .label {
@@ -40,20 +37,16 @@ export const SubscriberTableContainer = styled(Col)`
   }
 
   .row {
-    font-size: 1em;
+    &:hover {
+      cursor: pointer;
+    }
     font-weight: bold;
     color: ${(props) => props.theme.css.btnBkPrimary};
     gap: 0.25rem;
     padding: 0.25rem 0.25rem;
     align-items: center;
 
-    &:nth-child(odd) {
-      background: ${(props) => props.theme.css.tableOddRow};
-    }
-
-    &:nth-child(even) {
-      background: ${(props) => props.theme.css.tableEvenRow};
-    }
+    background: ${(props) => props.theme.css.bkWhite};
 
     &:hover {
       background: ${(props) => props.theme.css.tableHoverRow};

app/subscriber/src/css/_variables.module.scss

@@ -21,6 +21,7 @@
   highlightPrimary: $highlightPrimary;
   highlightSecondary: $highlightSecondary;
   highlightTertiary: $highlightTertiary;
+  highlightActive: $highlight-active;
 
   // Fonts
   fPrimary: $f-primary;
@@ -46,6 +47,8 @@
   btnPrimaryColor: $btn-primary-color;
   btnGrayColor: $btn-gray-color;
   btnRedColor: $btn-red-color;
+  btnYellowColor: $btn-yellow-color;
+  btnYellowBkColor: $btn-yellow-bk-color;
 
   // Lines
   linePrimaryColor: $line-primary-color;
@@ -149,4 +152,4 @@
   blackRgb: $bs-black-rgb;
   textOpacity: $bs-text-opacity;
   bcSans: $f-primary;
-}
+}

app/subscriber/src/css/_variables.scss

@@ -15,6 +15,7 @@ $bk-main: #dedede;
 $highlightPrimary: #e8e9f1;
 $highlightSecondary: #f8f7f8;
 $highlightTertiary: #d6d9e7;
+$highlight-active: #03bfdc;
 
 // Shadows
 $drop-shadow: drop-shadow(0 2px 6px 1px rgba(0, 0, 0, 25%));
@@ -51,6 +52,9 @@ $btn-bk-primary: #6750a4;
 $btn-primary-color: #fff;
 $btn-gray-color: #9f9196;
 $btn-red-color: #971d29;
+$btn-red-bk-color: #fef2f3;
+$btn-yellow-color: #876503;
+$btn-yellow-bk-color: #fff7e1;
 
 // Lines
 $line-primary-color: #807e9b;

app/subscriber/src/features/landing/Landing.tsx

@@ -7,7 +7,6 @@ import { MediaOverviewIcons } from 'features/daily-overview/MediaOverviewIcons';
 import { FilterMedia } from 'features/filter-media';
 import { Home } from 'features/home';
 import { HomeFilters } from 'features/home/home-filters';
-import { MyFolders } from 'features/my-folders';
 import { MyMinister } from 'features/my-minister/MyMinister';
 import { MyProducts } from 'features/my-products';
 import { MySearches } from 'features/my-searches';
@@ -93,9 +92,6 @@ export const Landing: React.FC = () => {
             <Show visible={activeItem === NavbarOptions.mySearches.label}>
               <MySearches />
             </Show>
-            <Show visible={activeItem === NavbarOptions.folders.label}>
-              <MyFolders />
-            </Show>
             <Show visible={activeItem === NavbarOptions.eveningOverview.label}>
               <AVOverviewPreview />
             </Show>

app/subscriber/src/features/manage-folder/ManageFolder.tsx

@@ -6,7 +6,7 @@ import { castToSearchResult, determinePreview } from 'features/utils';
 import parse from 'html-react-parser';
 import React from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { FaArrowLeft, FaGripLines } from 'react-icons/fa';
+import { FaGripLines } from 'react-icons/fa';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContent } from 'store/hooks';
 import { useFolders } from 'store/hooks/subscriber/useFolders';
@@ -58,9 +58,9 @@ export const ManageFolder: React.FC = () => {
         })
         .catch(() => {});
     });
-    // Only on initialize, or when sort order changes
+    // Only on initialize, or when id changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [id]);
 
   /** function that runs after a user drops an item in the list */
   const handleDrop = React.useCallback(
@@ -118,14 +118,7 @@ export const ManageFolder: React.FC = () => {
 
   return (
     <styled.ManageFolder>
-      <PageSection
-        header={
-          <Row className="header">
-            <FaArrowLeft className="back-arrow" onClick={() => navigate(-1)} />
-            <div className="manage-title">{`Manage Folder: ${folder?.name}`}</div>
-          </Row>
-        }
-      >
+      <PageSection header={`Manage Folder: ${folder?.name}`}>
         <div className="main-manage">
           <ContentListActionBar
             content={selected}

app/subscriber/src/features/my-folders/ConfigureFolder.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { FaArrowLeft } from 'react-icons/fa6';
+import { FaGear } from 'react-icons/fa6';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { useContent, useFilters, useFolders } from 'store/hooks';
 import {
   Button,
-  Col,
+  Checkbox,
   FieldSize,
   getDistinct,
   IContentModel,
@@ -14,25 +14,38 @@ import {
   IFolderModel,
   IFolderScheduleModel,
   IOptionItem,
+  Modal,
   Row,
   Select,
-  Show,
   sortObject,
+  useModal,
 } from 'tno-core';
 
 import { getFilterOptions } from './constants';
 import { Schedule } from './Schedule';
 import * as styled from './styled';
 import { createSchedule } from './utils';
 
-export const ConfigureFolder: React.FC = () => {
+export interface IConfigureFolderProps {
+  active?: IFolderModel;
+  myFolders: IFolderModel[];
+  setMyFolders: React.Dispatch<React.SetStateAction<IFolderModel[]>>;
+}
+
+export const ConfigureFolder: React.FC<IConfigureFolderProps> = ({
+  active,
+  myFolders,
+  setMyFolders,
+}) => {
   const [{ myFilters }, { findMyFilters }] = useFilters();
   const [, { findContentWithElasticsearch }] = useContent();
-  const [, { getFolder, updateFolder }] = useFolders();
+  const [, { getFolder, updateFolder, deleteFolder }] = useFolders();
   const { id } = useParams();
+  const { toggle, isShowing } = useModal();
   const navigate = useNavigate();
 
   const [activeFilter, setActiveFilter] = React.useState<IFilterModel>();
+  const [actionName, setActionName] = React.useState<'delete' | 'empty'>();
   const [currentFolder, setCurrentFolder] = React.useState<IFolderModel>();
   const [filterOptions, setFilterOptions] = React.useState<IOptionItem[]>(
     getFilterOptions(myFilters, activeFilter?.id ?? 0),
@@ -49,13 +62,28 @@ export const ConfigureFolder: React.FC = () => {
   }, []);
 
   React.useEffect(() => {
-    if (!currentFolder && id) {
-      getFolder(Number(id)).then((data) => {
-        setCurrentFolder(data);
-        if (data.filter) setActiveFilter(data.filter);
+    currentFolder &&
+      !currentFolder.events.length &&
+      setCurrentFolder({
+        ...currentFolder,
+        events: [createSchedule(currentFolder.name, currentFolder.description)],
       });
+  }, [currentFolder]);
+
+  React.useEffect(() => {
+    if ((!currentFolder && id) || currentFolder?.id !== Number(id)) {
+      getFolder(Number(id))
+        .then((data) => {
+          setCurrentFolder(data);
+          if (data.filter) setActiveFilter(data.filter);
+        })
+        .catch(() => {
+          toast.error('Failed to load folder.');
+        });
     }
-  }, [currentFolder, getFolder, id]);
+    // Only do when id / currentFolder changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentFolder, id]);
 
   const handleRun = React.useCallback(
     async (filter: IFilterModel) => {
@@ -108,16 +136,23 @@ export const ConfigureFolder: React.FC = () => {
       ignoreLastChildGap
       header={
         <Row width={FieldSize.Stretch}>
-          <span className="back-to-folders" onClick={() => navigate(-1)}>
-            <FaArrowLeft /> Back to folders
-          </span>
-          <span className="name">Configuring folder: "{currentFolder?.name}"</span>
+          <FaGear className="gear" /> {currentFolder?.name}
         </Row>
       }
     >
       <div className="main-container">
+        <h2>Folder automation settings</h2>
+        <Row>
+          <FaGear className="small-gear" /> <h3>Content collection</h3>
+        </Row>
         <div className="add-filter">
-          <div className="choose-text">Choose a filter to apply to this folder.</div>
+          <p>
+            A folder can be set up here to populate stories automatically based on one of your Saved
+            Searches. Choose your Saved Search first and then setup your preferred scheduling
+            options.
+          </p>
+          <Checkbox name="auto-pop" label="Auto-populate this folder" defaultChecked />
+          <label>Choose one of your Saved Searches to apply to this folder</label>
           <Row className="choose-filter">
             <Select
               options={filterOptions}
@@ -133,50 +168,86 @@ export const ConfigureFolder: React.FC = () => {
               }}
             />
             <Button className="run" onClick={() => !!activeFilter && handleRun(activeFilter)}>
-              Run
+              Apply
             </Button>
           </Row>
         </div>
-        <Col className="add-schedule">
+        <Schedule
+          folderSchedule={currentFolder?.events[0] ?? undefined}
+          onScheduleChange={async (value: IFolderScheduleModel) => {
+            setCurrentFolder({
+              ...(currentFolder as IFolderModel),
+              events: [value],
+            });
+          }}
+        />
+        <Row className="action-buttons">
+          <Button className="cancel" onClick={() => navigate(`/folders`)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              handleSaveSchedule(currentFolder as IFolderModel);
+            }}
+            className="save"
+          >
+            Save
+          </Button>
+        </Row>
+        <div className="remove-container">
           <Row>
-            <span className="schedule-text">
-              Configure when you would like to have content removed automatically.
-            </span>
-            <Show visible={!currentFolder?.events?.length}>
-              <Button
-                className="add-schedule-btn"
-                onClick={() =>
-                  currentFolder &&
-                  setCurrentFolder({
-                    ...currentFolder,
-                    events: [createSchedule(currentFolder.name, currentFolder.description)],
-                  })
-                }
-              >
-                Add Clearance Schedule
-              </Button>
-            </Show>
+            <FaGear className="small-gear" />
+            <h3>Remove content</h3>
           </Row>
-          <Schedule
-            folderSchedule={currentFolder?.events[0] ?? undefined}
-            onScheduleChange={async (value: IFolderScheduleModel) => {
-              setCurrentFolder({
-                ...(currentFolder as IFolderModel),
-                events: [value],
-              });
-            }}
-          />
-          <Show visible={!!currentFolder?.events?.length}>
+          <div className="remove-action-buttons">
+            <p>Proceed with caution as these actions may not be undone.</p>
             <Button
+              className="warning"
               onClick={() => {
-                handleSaveSchedule(currentFolder as IFolderModel);
+                setActionName('empty');
+                toggle();
               }}
             >
-              Save
+              Empty folder
             </Button>
-          </Show>
-        </Col>
+            <Button
+              className="danger"
+              onClick={() => {
+                setActionName('delete');
+                toggle();
+              }}
+            >
+              Delete folder
+            </Button>
+          </div>
+        </div>
       </div>
+
+      <Modal
+        headerText="Confirm Removal"
+        body={`Are you sure you wish to ${actionName} this folder?`}
+        isShowing={isShowing}
+        hide={toggle}
+        type="delete"
+        confirmText="Yes, Remove It"
+        onConfirm={() => {
+          try {
+            if (actionName === 'empty' && !!active) {
+              updateFolder({ ...active, content: [] }).then((data) => {
+                toast.success(`${active.name} updated successfully`);
+                setMyFolders(myFolders.map((item) => (item.id === active.id ? data : item)));
+              });
+            } else if (actionName === 'delete' && !!active) {
+              deleteFolder(active).then(() => {
+                toast.success(`${active.name} deleted successfully`);
+                setMyFolders(myFolders.filter((folder) => folder.id !== active.id));
+              });
+            }
+          } finally {
+            toggle();
+          }
+        }}
+      />
     </styled.ConfigureFolder>
   );
 };