From f1bdf439c838810c890ed031ecbabb285a9bc076 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Tue, 24 Sep 2024 14:29:09 -0700
Subject: [PATCH] Undo changes to AuthoringFeedback.tsx

---
 .../create/authoring/AuthoringFeedback.tsx    | 403 +++++++++++++-----
 .../admin/create/authoring/types.ts           |   7 +
 2 files changed, 302 insertions(+), 108 deletions(-)

diff --git a/met-web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx b/met-web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx
index f61093cdc..488d60441 100644
--- a/met-web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx
+++ b/met-web/src/components/engagement/admin/create/authoring/AuthoringFeedback.tsx
@@ -1,21 +1,239 @@
-import { Grid, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+// import React from 'react';
+// export const AuthoringFeedback = () => {
+//     return <div>AuthoringFeedback</div>;
+// };
+// export default AuthoringFeedback;
+
+import { Grid, IconButton, MenuItem, Select, SelectChangeEvent, Tab, Tabs } from '@mui/material';
 import { EyebrowText as FormDescriptionText } from 'components/common/Typography';
 import { colors, MetLabel, MetHeader3, MetLabel as MetBigLabel } from 'components/common';
 import { Button, TextField } from 'components/common/Input';
+import React, { SyntheticEvent, useState } from 'react';
 import { RichTextArea } from 'components/common/Input/RichTextArea';
-import { EditorState } from 'draft-js';
-import React, { useState } from 'react';
+import { AuthoringTemplateOutletContext, DetailsTabProps, TabValues } from './types';
+import { useOutletContext } from 'react-router-dom';
 import { Palette } from 'styles/Theme';
+import { Unless, When } from 'react-if';
+import { TabContext, TabPanel } from '@mui/lab';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faX } from '@fortawesome/pro-regular-svg-icons';
+import { EditorState } from 'draft-js';
+
+const handleDuplicateTabNames = (newTabs: TabValues[], newTabName: string) => {
+    // Will add a sequencial number suffix for up to 10 numbers if there is a duplicate, then add (copy) if none of those are available.
+    for (let i = 2; i < 12; i++) {
+        if (!newTabs.find((tab) => tab.heading === `${newTabName} (${i})`)) {
+            return `${newTabName} (${i})`;
+        }
+    }
+    return `${newTabName} (copy)`;
+};
+
+const AuthoringDetails = () => {
+    const {
+        setValue,
+        contentTabsEnabled,
+        tabs,
+        setTabs,
+        setSingleContentValues,
+        setContentTabsEnabled,
+        singleContentValues,
+        defaultTabValues,
+    }: AuthoringTemplateOutletContext = useOutletContext(); // Access the form functions and values from the authoring template
+    const [currentTab, setCurrentTab] = useState(tabs[0]);
+
+    const tabsStyles = {
+        borderBottom: `2px solid ${colors.surface.gray[60]}`,
+        overflow: 'hidden',
+        '& .MuiTabs-flexContainer': {
+            justifyContent: 'flex-start',
+            width: 'max-content',
+        },
+    };
+    const tabStyles = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '48px',
+        padding: '4px 18px 2px 18px',
+        fontSize: '14px',
+        borderRadius: '0px 16px 0px 0px',
+        border: `1px solid ${colors.surface.gray[60]}`,
+        borderBottom: 'none',
+        boxShadow:
+            '0px 2px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20)',
+        backgroundColor: 'gray.10',
+        color: 'text.secondary',
+        fontWeight: 'normal',
+        '&.Mui-selected': {
+            backgroundColor: 'primary.main',
+            borderColor: 'primary.main',
+            color: 'white',
+            fontWeight: 'bold',
+        },
+        outlineOffset: '-4px',
+        '&:focus-visible': {
+            outline: `2px solid`,
+            outlineColor: '#12508F',
+            border: '4px solid',
+            borderColor: '#12508F',
+            padding: '0px 20px 0px 14px',
+        },
+    };
+
+    const handleCloseTab = (e: React.MouseEvent, tab: TabValues) => {
+        e.stopPropagation();
+        const index = tabs.findIndex((t) => t.heading === tab.heading);
+        if (-1 < index) {
+            const newTabs = [...tabs];
+            newTabs.splice(index, 1);
+            if (1 === newTabs.length) {
+                // If we're switching back to single content mode
+                'Tab 1' !== tabs[0].heading
+                    ? setSingleContentValues(tabs[0])
+                    : setSingleContentValues({ ...tabs[0], heading: '' }); // If the current Section Heading is "Tab 1" then change it to a blank value.
+                setTabs([tabs[0]]);
+                setContentTabsEnabled('false');
+            } else {
+                setTabs(newTabs);
+                tab === currentTab && setCurrentTab(newTabs[index - 1]); // Switch tabs if you're closing the current one
+            }
+        }
+    };
 
-const AuthoringFeedback = () => {
-    const [sectionHeading, setSectionHeading] = useState('');
-    // const [bodyText, setBodyText] = useState('');
-    const [editorState, setEditorState] = useState<EditorState>();
-    const [surveyButtonText, setSurveyButtonText] = useState('');
-    const [thirdPartyCtaText, setThirdPartyCtaText] = useState('');
-    const [thirdPartyCtaLink, setThirdPartyCtaLink] = useState('');
-    const [currentWidget, setCurrentWidget] = useState('');
+    const handleAddTab = () => {
+        const newTabs = [...tabs];
+        const newTabName = 'Tab ' + (newTabs.length + 1);
+        newTabs.find((tab) => newTabName === tab.heading)
+            ? newTabs.push({ ...defaultTabValues, heading: handleDuplicateTabNames(newTabs, newTabName) })
+            : newTabs.push({ ...defaultTabValues, heading: newTabName }); // Don't create duplicate entries
+        setTabs(newTabs);
+        setCurrentTab(newTabs[newTabs.length - 1]);
+    };
 
+    return (
+        <Grid item sx={{ maxWidth: '700px' }} direction="column">
+            <When condition={'true' === contentTabsEnabled && 1 < tabs.length}>
+                <Grid sx={{ borderBottom: '1', borderColor: 'divider' }} item>
+                    <TabContext
+                        value={
+                            tabs.find((tab) => tab.heading === currentTab.heading)
+                                ? tabs[tabs.findIndex((t) => t.heading === currentTab.heading)].heading
+                                : tabs[tabs.length - 1].heading
+                        }
+                    >
+                        <Tabs
+                            component="nav"
+                            variant="scrollable"
+                            aria-label="Admin Engagement View Tabs"
+                            TabIndicatorProps={{ sx: { display: 'none' } }}
+                            sx={tabsStyles}
+                            value={
+                                tabs.find((tab) => tab.heading === currentTab.heading)
+                                    ? tabs[tabs.findIndex((t) => t.heading === currentTab.heading)].heading
+                                    : tabs[tabs.length - 1].heading
+                            }
+                            onChange={(event: SyntheticEvent<Element, Event>, value: string) =>
+                                tabs.find((tab) => tab.heading === value) &&
+                                setCurrentTab(tabs[tabs.findIndex((tab) => tab.heading === value)])
+                            }
+                        >
+                            {tabs.map((tab, key) => {
+                                return (
+                                    <Tab
+                                        sx={tabStyles}
+                                        label={
+                                            <span>
+                                                <span style={{ marginRight: '1rem' }}>{tab.heading}</span>
+                                                <When condition={0 !== key}>
+                                                    <IconButton
+                                                        size="small"
+                                                        component="span"
+                                                        onClick={(e: React.MouseEvent) => handleCloseTab(e, tab)}
+                                                    >
+                                                        <FontAwesomeIcon
+                                                            icon={faX}
+                                                            style={{
+                                                                fontSize: '0.9rem',
+                                                                marginTop: '-4px',
+                                                                color:
+                                                                    currentTab.heading === tab.heading
+                                                                        ? colors.surface.white
+                                                                        : Palette.text.primary,
+                                                            }}
+                                                        />
+                                                    </IconButton>
+                                                </When>
+                                            </span>
+                                        }
+                                        key={key}
+                                        value={tab.heading}
+                                        disableFocusRipple
+                                    />
+                                );
+                            })}
+                            <Button
+                                sx={{
+                                    border: 'none !important',
+                                    boxShadow: 'none !important',
+                                    backgroundColor: 'transparent !important',
+                                    color: '#12508F !important',
+                                    fontSize: '0.9rem',
+                                }}
+                                onClick={() => {
+                                    handleAddTab();
+                                }}
+                            >
+                                + Add Tab
+                            </Button>
+                        </Tabs>
+                        {tabs.map((tab, key) => {
+                            return (
+                                <TabPanel value={tab.heading} key={key} sx={{ padding: '1rem 0' }}>
+                                    <DetailsTab
+                                        // setValue={setValue}
+                                        setTabs={setTabs}
+                                        setCurrentTab={setCurrentTab}
+                                        setSingleContentValues={setSingleContentValues}
+                                        tabs={tabs}
+                                        tabIndex={key}
+                                        singleContentValues={singleContentValues}
+                                        defaultTabValues={defaultTabValues}
+                                    />
+                                </TabPanel>
+                            );
+                        })}
+                    </TabContext>
+                </Grid>
+            </When>
+            <Unless condition={'true' === contentTabsEnabled}>
+                <DetailsTab
+                    // setValue={setValue}
+                    setTabs={setTabs}
+                    setCurrentTab={setCurrentTab}
+                    setSingleContentValues={setSingleContentValues}
+                    tabs={tabs}
+                    tabIndex={0}
+                    singleContentValues={singleContentValues}
+                    defaultTabValues={defaultTabValues}
+                />
+            </Unless>
+        </Grid>
+    );
+};
+
+export default AuthoringDetails;
+
+const DetailsTab = ({
+    //    setValue,
+    setTabs,
+    setCurrentTab,
+    setSingleContentValues,
+    tabs,
+    tabIndex,
+    singleContentValues,
+    defaultTabValues,
+}: DetailsTabProps) => {
     // Define the styles
     const metBigLabelStyles = {
         fontSize: '1.05rem',
@@ -40,13 +258,15 @@ const AuthoringFeedback = () => {
     const metLabelStyles = {
         fontSize: '0.95rem',
     };
-    const buttonStyles = {
-        height: '2.6rem',
+    const conditionalSelectStyles = {
+        width: '100%',
+        backgroundColor: colors.surface.white,
         borderRadius: '8px',
-        border: 'none',
-        padding: '0 1rem',
-        minWidth: '8.125rem',
-        fontSize: '0.9rem',
+        boxShadow: '0 0 0 1px #7A7876 inset',
+        lineHeight: '1.4375em',
+        height: '48px',
+        marginTop: '8px',
+        padding: '0',
     };
     const widgetPreviewStyles = {
         margin: '2rem 4rem 4rem',
@@ -57,16 +277,15 @@ const AuthoringFeedback = () => {
         justifyContent: 'center',
         borderRadius: '16px',
     };
-    const conditionalSelectStyles = {
-        width: '100%',
-        backgroundColor: colors.surface.white,
+    const buttonStyles = {
+        height: '2.6rem',
         borderRadius: '8px',
-        boxShadow: '0 0 0 1px #7A7876 inset',
-        lineHeight: '1.4375em',
-        height: '48px',
-        marginTop: '8px',
-        padding: '0',
+        border: 'none',
+        padding: '0 1rem',
+        minWidth: '8.125rem',
+        fontSize: '0.9rem',
     };
+
     const toolbar = {
         options: ['inline', 'list', 'link', 'blockType', 'history'],
         inline: {
@@ -76,31 +295,57 @@ const AuthoringFeedback = () => {
         list: { options: ['unordered', 'ordered'] },
     };
 
-    const handleEditorChange = (newEditorState: EditorState) => {
-        setEditorState(newEditorState);
-        // const plainText = newEditorState.getCurrentContent().getPlainText();
-        // setBodyText(plainText);
+    const handleSectionHeadingChange = (value: string) => {
+        const newHeading = value;
+        if (2 > tabs.length && 0 === tabIndex) {
+            // If there are no tabs
+            setSingleContentValues({ ...singleContentValues, heading: newHeading });
+            setTabs([{ ...defaultTabValues, heading: newHeading }]);
+        } else {
+            // If there are tabs
+            const newTabs = [...tabs];
+            newTabs[tabIndex].heading = newTabs.find((tab) => tab.heading === newHeading)
+                ? handleDuplicateTabNames(newTabs, newHeading)
+                : newHeading; // If the new name is the same as an existing one, rename it
+            setSingleContentValues(newTabs[0]);
+            setTabs([...newTabs]);
+            setCurrentTab(newTabs[tabIndex]);
+        }
     };
 
     const handleWidgetChange = (event: SelectChangeEvent<string>) => {
-        setCurrentWidget(event.target.value);
+        const newWidget = event.target.value;
+        const newTabs = [...tabs];
+        newTabs[tabIndex].widget = newWidget;
+        setTabs(newTabs);
     };
 
     const handleRemoveWidget = () => {
-        if ('' === currentWidget) {
+        if ('' === tabs[tabIndex].widget) {
             return;
         } else {
-            setCurrentWidget('');
+            const newTabs = [...tabs];
+            newTabs[tabIndex].widget = '';
+            setTabs(newTabs);
         }
     };
 
+    const handleBodyTextChange = (newEditorState: EditorState) => {
+        const plainText = newEditorState.getCurrentContent().getPlainText();
+        const newTabs = [...tabs];
+        newTabs[tabIndex].bodyCopyEditorState = newEditorState;
+        newTabs[tabIndex].bodyCopyPlainText = plainText;
+        setTabs(newTabs);
+    };
+
     return (
         <Grid container sx={{ maxWidth: '700px', mt: '1rem' }} direction="column">
             <Grid item sx={{ mt: '1rem' }}>
                 <MetHeader3 style={metHeader3Styles}>Primary Content (Required)</MetHeader3>
                 <FormDescriptionText style={formDescriptionTextStyles}>
-                    This section of content should provide a brief overview of what your engagement is about and what
-                    you would like your audience to do.
+                    Primary content will display on the left two thirds of the page on large screens and full width on
+                    small screens. (If you add optional supporting content in the section below, on small screens, your
+                    primary content will display first (on top) followed by your supporting content (underneath).
                 </FormDescriptionText>
             </Grid>
 
@@ -114,36 +359,39 @@ const AuthoringFeedback = () => {
                     </FormDescriptionText>
                     <TextField
                         sx={{ backgroundColor: colors.surface.white }}
-                        value={sectionHeading}
+                        value={1 < tabs.length ? tabs[tabIndex].heading : singleContentValues.heading}
                         id="section_heading"
                         counter
                         maxLength={60}
                         placeholder="Section heading message"
-                        onChange={(value) => {
-                            setSectionHeading(value);
-                        }}
+                        onChange={handleSectionHeadingChange}
                     />
                 </label>
             </Grid>
 
             <Grid sx={{ ...formItemContainerStyles, backgroundColor: colors.surface.blue[10] }} item>
-                <label htmlFor="body_copy">
+                <label htmlFor="description">
                     <MetBigLabel style={metBigLabelStyles}>
                         Body Copy
                         <span style={{ fontWeight: 'normal' }}> (Required)</span>
                     </MetBigLabel>
                     <FormDescriptionText style={formDescriptionTextStyles}>
-                        You must either include links to your engagement feedback methods within this section’s body
-                        copy using the link button in the WSIWYG editor below, or, Call to Action Buttons in the
-                        following two fields.
+                        If the content you add for this tab is quite long, a “read more” expander will be added to your
+                        content at approximately xx (large screens) and xx (small screens). In this case, you will want
+                        to ensure that the most important body copy is first so that your audience will see it even if
+                        they do not interact with the Read More expander.
                     </FormDescriptionText>
                     <RichTextArea
+                        ariaLabel="Body copy: If the content you add for this tab is quite long, a “read more” expander will be added to your
+                        content at approximately xx (large screens) and xx (small screens). In this case, you will want
+                        to ensure that the most important body copy is first so that your audience will see it even if
+                        they do not interact with the Read More expander."
                         spellCheck
-                        editorState={editorState}
-                        onEditorStateChange={handleEditorChange}
+                        editorState={tabs[tabIndex].bodyCopyEditorState}
+                        onEditorStateChange={handleBodyTextChange}
                         handlePastedText={() => false}
                         editorStyle={{
-                            height: '15em',
+                            height: '40em',
                             padding: '1em',
                             resize: 'vertical',
                             backgroundColor: colors.surface.white,
@@ -153,65 +401,6 @@ const AuthoringFeedback = () => {
                 </label>
             </Grid>
 
-            <Grid sx={{ ...formItemContainerStyles, backgroundColor: colors.surface.gray[10] }} item>
-                <label htmlFor="survey_button_text">
-                    <MetBigLabel style={metBigLabelStyles}>
-                        Survey Call to Action Button <span style={{ fontWeight: 'normal' }}>(Optional)</span>
-                    </MetBigLabel>
-                    <FormDescriptionText style={formDescriptionTextStyles}>
-                        This is the button that will link to your engagement's Survey feedback method. You should use
-                        short, action oriented text.
-                    </FormDescriptionText>
-                    <TextField
-                        sx={{ backgroundColor: colors.surface.white }}
-                        value={surveyButtonText}
-                        id="survey_button_text"
-                        counter
-                        maxLength={60}
-                        placeholder="https://"
-                        onChange={(value) => {
-                            setSurveyButtonText(value);
-                        }}
-                    />
-                </label>
-            </Grid>
-
-            <Grid sx={{ ...formItemContainerStyles, backgroundColor: colors.surface.gray[10] }} item>
-                <label htmlFor="third_party_cta">
-                    <MetBigLabel style={metBigLabelStyles}>
-                        3rd Party Call to Action Button <span style={{ fontWeight: 'normal' }}>(Optional)</span>
-                    </MetBigLabel>
-                    <FormDescriptionText style={formDescriptionTextStyles}>
-                        This is the button that will link to your engagement's <strong>3rd Party</strong> feedback
-                        method. You should use short, action oriented text.
-                    </FormDescriptionText>
-                    <MetLabel style={metLabelStyles}>Primary CTA (Button) Text</MetLabel>
-                    <TextField
-                        sx={{ backgroundColor: colors.surface.white }}
-                        value={thirdPartyCtaText}
-                        id="third_party_cta"
-                        counter
-                        maxLength={20}
-                        placeholder="3rd Party button text"
-                        onChange={(value) => {
-                            setThirdPartyCtaText(value);
-                        }}
-                    />
-                </label>
-                <label htmlFor="third_party_cta_link">
-                    <MetLabel style={metLabelStyles}>URL</MetLabel>
-                    <TextField
-                        sx={{ backgroundColor: colors.surface.white }}
-                        value={thirdPartyCtaLink}
-                        id="third_party_cta_link"
-                        placeholder="3rd Party button text"
-                        onChange={(value) => {
-                            setThirdPartyCtaLink(value);
-                        }}
-                    />
-                </label>
-            </Grid>
-
             <Grid item sx={{ mt: '1rem' }}>
                 <MetHeader3 style={metHeader3Styles}>Supporting Content (Optional)</MetHeader3>
                 <FormDescriptionText style={formDescriptionTextStyles}>
@@ -228,7 +417,7 @@ const AuthoringFeedback = () => {
                         sx={{ ...conditionalSelectStyles, maxWidth: '300px' }}
                         id="widget_select"
                         onChange={handleWidgetChange}
-                        value={currentWidget}
+                        value={tabs[tabIndex].widget}
                     >
                         <MenuItem value="Video">Video</MenuItem>
                         <MenuItem value="Other">Other</MenuItem>
@@ -246,7 +435,7 @@ const AuthoringFeedback = () => {
                 item
             >
                 <MetLabel style={{ minHeight: '1.5rem' }}>
-                    {currentWidget} {currentWidget && 'Widget'}
+                    {tabs[tabIndex].widget} {tabs[tabIndex].widget && 'Widget'}
                 </MetLabel>
                 <Grid xs={12} sx={widgetPreviewStyles} item>
                     {/* todo: show a preview of the widget here */}
@@ -284,5 +473,3 @@ const AuthoringFeedback = () => {
         </Grid>
     );
 };
-
-export default AuthoringFeedback;
diff --git a/met-web/src/components/engagement/admin/create/authoring/types.ts b/met-web/src/components/engagement/admin/create/authoring/types.ts
index 2407013a7..35d100254 100644
--- a/met-web/src/components/engagement/admin/create/authoring/types.ts
+++ b/met-web/src/components/engagement/admin/create/authoring/types.ts
@@ -62,6 +62,13 @@ export interface AuthoringTemplateOutletContext {
     setDefaultValues: Dispatch<SetStateAction<EngagementUpdateData>>;
     fetcher: FetcherWithComponents<object>;
     pageName: string;
+    contentTabsEnabled: string;
+    tabs: TabValues[];
+    setTabs: Dispatch<SetStateAction<TabValues[]>>;
+    setSingleContentValues: Dispatch<SetStateAction<TabValues>>;
+    setContentTabsEnabled: Dispatch<SetStateAction<string>>;
+    singleContentValues: TabValues;
+    defaultTabValues: TabValues;
 }
 
 export interface DetailsTabProps {