Subscribe Widget - Create Subscribe Widget Drawer

met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeOptionCard.tsx

@@ -10,9 +10,11 @@ import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { optionCardStyle } from '../Phases/PhasesOptionCard';
 import { useCreateWidgetMutation } from 'apiManager/apiSlices/widgets';
+import { WidgetTabValues } from '../type';
 
 const SubscribeOptionCard = () => {
-    const { widgets, loadWidgets, handleWidgetDrawerOpen } = useContext(WidgetDrawerContext);
+    const { widgets, loadWidgets, handleWidgetDrawerOpen, handleWidgetDrawerTabValueChange } =
+        useContext(WidgetDrawerContext);
     const { savedEngagement } = useContext(ActionContext);
     const dispatch = useAppDispatch();
     const [createWidget] = useCreateWidgetMutation();
@@ -21,6 +23,7 @@ const SubscribeOptionCard = () => {
     const handleCreateWidget = async () => {
         const alreadyExists = widgets.some((widget) => widget.widget_type_id === WidgetType.Subscribe);
         if (alreadyExists) {
+            handleWidgetDrawerTabValueChange(WidgetTabValues.SUBSCRIBE_FORM);
             return;
         }
 
@@ -38,7 +41,7 @@ const SubscribeOptionCard = () => {
                 }),
             );
             setIsCreatingWidget(false);
-            handleWidgetDrawerOpen(false);
+            handleWidgetDrawerTabValueChange(WidgetTabValues.SUBSCRIBE_FORM);
         } catch (error) {
             setIsCreatingWidget(false);
             dispatch(
@@ -76,7 +79,7 @@ const SubscribeOptionCard = () => {
                             xs={8}
                         >
                             <Grid item xs={12}>
-                                <MetHeader4>Sign Up for Updates</MetHeader4>
+                                <MetHeader4> Sign Up for Updates/Subscribe</MetHeader4>
                             </Grid>
                             <Grid item xs={12}>
                                 <MetBody>Offer members of the public to sign up for updates</MetBody>

met-web/src/components/engagement/form/EngagementWidgets/Subscribe/index.tsx

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import { Grid, Divider, FormControlLabel, Checkbox } from '@mui/material';
+import { PrimaryButton, MetHeader3, WidgetButton, MetParagraph, MetLabel } from 'components/common';
+import { WidgetDrawerContext } from '../WidgetDrawerContext';
+import BorderColorIcon from '@mui/icons-material/BorderColor';
+
+const SubscribeForm = () => {
+    const { handleWidgetDrawerOpen } = useContext(WidgetDrawerContext);
+
+    return (
+        <Grid item xs={12} container alignItems="flex-start" justifyContent={'flex-start'} spacing={3}>
+            <Grid item xs={12}>
+                <Grid container item>
+                    <MetHeader3 bold sx={{ paddingRight: 1 }}>
+                        Sign-up for updates
+                    </MetHeader3>
+                    <BorderColorIcon />
+                </Grid>
+                <Divider sx={{ marginTop: '1em' }} />
+                <FormControlLabel control={<Checkbox />} label={<MetLabel>Hide title</MetLabel>} />
+            </Grid>
+            <Grid item xs={12} container direction="row" spacing={1} justifyContent={'flex-start'}>
+                <Grid item xs={12}>
+                    <MetParagraph>
+                        The email list will collect email addresses for a mailing list. A "double-opt-in" email will be
+                        sent to confirm the subscription.Only the email addresses that have been double-opted-in will be
+                        on the list. Please include the unsubscribe link provided on the Email List screen in every
+                        future communication. Unsubscribed email addresses will be removed from the list. Please
+                        downloaded the list before each communication.
+                    </MetParagraph>
+                </Grid>
+                <Grid item xs={12} marginBottom="1em">
+                    <MetParagraph>
+                        The form sign-up will open the pre-defined form. The text and CTA for both are customizable.
+                    </MetParagraph>
+                </Grid>
+                <Grid item>
+                    <WidgetButton>Email List</WidgetButton>
+                </Grid>
+                <Grid item>
+                    <WidgetButton>Form Sign-up</WidgetButton>
+                </Grid>
+            </Grid>
+            <Grid item xs={12} container direction="row" spacing={1} justifyContent={'flex-start'} marginTop="2em">
+                <Grid item>
+                    <PrimaryButton
+                        onClick={() => {
+                            handleWidgetDrawerOpen(false);
+                        }}
+                    >
+                        Close
+                    </PrimaryButton>
+                </Grid>
+            </Grid>
+        </Grid>
+    );
+};
+
+export default SubscribeForm;

met-web/src/components/engagement/form/EngagementWidgets/WidgetCardSwitch.tsx

@@ -62,6 +62,10 @@ export const WidgetCardSwitch = ({ widget, removeWidget }: WidgetCardSwitchProps
                         onDelete={() => {
                             removeWidget(widget.id);
                         }}
+                        onEdit={() => {
+                            handleWidgetDrawerTabValueChange(WidgetTabValues.SUBSCRIBE_FORM);
+                            handleWidgetDrawerOpen(true);
+                        }}
                     />
                 </Case>
                 <Case condition={widget.widget_type_id === WidgetType.Events}>

met-web/src/components/engagement/form/EngagementWidgets/WidgetDrawerTabs.tsx

@@ -10,6 +10,7 @@ import Phases from './Phases';
 import EventsForm from './Events';
 import MapForm from './Map';
 import VideoForm from './Video';
+import SubscribeForm from './Subscribe';
 
 const WidgetDrawerTabs = () => {
     const { widgetDrawerTabValue } = useContext(WidgetDrawerContext);
@@ -25,6 +26,9 @@ const WidgetDrawerTabs = () => {
                 <TabPanel sx={{ width: '100%' }} value={WidgetTabValues.DOCUMENT_FORM}>
                     <Documents />
                 </TabPanel>
+                <TabPanel sx={{ width: '100%' }} value={WidgetTabValues.SUBSCRIBE_FORM}>
+                    <SubscribeForm />
+                </TabPanel>
                 <TabPanel sx={{ width: '100%' }} value={WidgetTabValues.PHASES_FORM}>
                     <Phases />
                 </TabPanel>

met-web/src/components/engagement/form/EngagementWidgets/type.tsx

@@ -3,6 +3,7 @@ export const WidgetTabValues = {
     WHO_IS_LISTENING_CREATE: 'WHO_IS_LISTENING_CREATE',
     WHO_IS_LISTENING_FORM: 'WHO_IS_LISTENING_FORM',
     DOCUMENT_FORM: 'DOCUMENT_FORM',
+    SUBSCRIBE_FORM: 'SUBSCRIBE_FORM',
     PHASES_FORM: 'PHASES_FORM',
     EVENTS_FORM: 'EVENTS_FORM',
     MAP_FORM: 'MAP_FORM',

met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx

@@ -127,7 +127,7 @@ function SubscribeWidget() {
                 </Grid>
                 <Grid item xs={12}>
                     <PrimaryButton onClick={() => setOpen(true)} sx={{ width: '100%' }}>
-                        Sign Up for Updates from the EAO
+                        Sign Up for Updates
                     </PrimaryButton>
                 </Grid>
             </Grid>