Changes for subscribe widget public view (#1971)

* updates on engagement publish * update email template * adding action drop down * updated changes for User Management * access user details page for users without a role * updating variable name * updating the schema * updating as per review comments * updating schema * adding changes for clone and delete * fixing linting * update * fix for report setting on analytics * fixing lint * Changes for subscribe widget public view * adding changes for the model * updating link
bcgov · Aug 8, 2023 · dbbdf2a · dbbdf2a
1 parent 91368fb
commit dbbdf2a
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 20 deletions.
diff --git a/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx b/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useContext } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { MetBody, MetHeader2, MetLabel, MetPaper, MetParagraph, PrimaryButton } from 'components/common';
 import { ActionContext } from '../../ActionContext';
-import { Grid, Divider, Link, Typography, Box, RadioGroup, Radio, FormControlLabel } from '@mui/material';
+import { Grid, Divider, Link, Typography, Box, RadioGroup, Radio, FormControlLabel, Skeleton } from '@mui/material';
 import { useAppDispatch } from 'hooks';
 import { openNotificationModal } from 'services/notificationModalService/notificationModalSlice';
 import EmailModal from 'components/common/Modals/EmailModal';
@@ -10,15 +10,24 @@ import { createSubscription } from 'services/subscriptionService';
 import { EmailVerificationType } from 'models/emailVerification';
 import { SubscriptionType } from 'constants/subscriptionType';
 import { Widget } from 'models/widget';
+import { getSubscriptionsForms } from 'services/subscriptionService';
+import { WidgetType } from 'models/widget';
+import { openNotification } from 'services/notificationService/notificationSlice';
+import { Subscribe_TYPE, SubscribeForm, CallToActionType } from 'models/subscription';
+import { When } from 'react-if';
+import { getTextFromDraftJsContentState } from 'components/common/RichTextEditor/utils';
 
 const SubscribeWidget = ({ widget }: { widget: Widget }) => {
     const dispatch = useAppDispatch();
-    const { savedEngagement, engagementMetadata } = useContext(ActionContext);
+    const { savedEngagement, engagementMetadata, widgets } = useContext(ActionContext);
     const defaultType = engagementMetadata.project_id ? SubscriptionType.PROJECT : SubscriptionType.ENGAGEMENT;
     const [email, setEmail] = useState('');
     const [open, setOpen] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [subscriptionType, setSubscriptionType] = useState('');
+    const subscribeWidget = widgets.find((widget) => widget.widget_type_id === WidgetType.Subscribe);
+    const [subscribeItems, setSubscribeItems] = useState<SubscribeForm[]>([]);
+    const [isLoadingSubscribeItems, setIsLoadingSubscribeItems] = useState(true);
 
     const sendEmail = async () => {
         try {
@@ -90,10 +99,41 @@ const SubscribeWidget = ({ widget }: { widget: Widget }) => {
         }
     };
 
+    const loadSubscribeItems = async () => {
+        if (!subscribeWidget) {
+            return;
+        }
+        try {
+            setIsLoadingSubscribeItems(true);
+            const loadedSubscribe = await getSubscriptionsForms(subscribeWidget.id);
+            setSubscribeItems(loadedSubscribe);
+            setIsLoadingSubscribeItems(false);
+        } catch (error) {
+            dispatch(
+                openNotification({
+                    severity: 'error',
+                    text: 'An error occurred while trying to load the Subscribe Items',
+                }),
+            );
+        }
+    };
+
+    useEffect(() => {
+        loadSubscribeItems();
+    }, [widgets]);
+
     const handleSubscriptionChange = (type: string) => {
         setSubscriptionType(type);
     };
 
+    if (isLoadingSubscribeItems) {
+        return (
+            <MetPaper elevation={1} sx={{ padding: '1em', minHeight: '12em' }}>
+                <Skeleton />
+            </MetPaper>
+        );
+    }
+
     return (
         <MetPaper elevation={1} sx={{ padding: '1em', minHeight: '12em' }}>
             <EmailModal
@@ -170,23 +210,35 @@ const SubscribeWidget = ({ widget }: { widget: Widget }) => {
                     </Grid>
                 }
             />
-            <Grid spacing={2} container xs={12}>
-                <Grid item xs={12}>
-                    <MetHeader2 bold>{widget.title}</MetHeader2>
-                    <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
-                </Grid>
-                <Grid item xs={12}>
-                    <MetBody>
-                        If you are interested in getting updates on public engagements at the EAO, you can sign up
-                        below:
-                    </MetBody>
-                </Grid>
-                <Grid item xs={12}>
-                    <PrimaryButton onClick={() => setOpen(true)} sx={{ width: '100%' }}>
-                        Sign Up for Updates
-                    </PrimaryButton>
-                </Grid>
-            </Grid>
+            {subscribeItems?.map((item) => {
+                return (
+                    <When condition={item.type == Subscribe_TYPE.EMAIL_LIST}>
+                        <Grid spacing={2} container xs={12}>
+                            <Grid item xs={12}>
+                                <MetHeader2 bold>{widget.title}</MetHeader2>
+                                <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <MetBody>{getTextFromDraftJsContentState(item.subscribe_items[0].description)}</MetBody>
+                            </Grid>
+                            <Grid item xs={12}>
+                                <When
+                                    condition={item.subscribe_items[0].call_to_action_type == CallToActionType.BUTTON}
+                                >
+                                    <PrimaryButton onClick={() => setOpen(true)} sx={{ width: '100%' }}>
+                                        {item.subscribe_items[0].call_to_action_text}
+                                    </PrimaryButton>
+                                </When>
+                                <When condition={item.subscribe_items[0].call_to_action_type == CallToActionType.LINK}>
+                                    <Link onClick={() => setOpen(true)} sx={{ cursor: 'pointer' }}>
+                                        {item.subscribe_items[0].call_to_action_text}
+                                    </Link>
+                                </When>
+                            </Grid>
+                        </Grid>
+                    </When>
+                );
+            })}
         </MetPaper>
     );
 };

diff --git a/met-web/src/models/subscription.ts b/met-web/src/models/subscription.ts
@@ -1,5 +1,7 @@
 export type SubscribeTypeLabel = 'EMAIL_LIST' | 'FORM';
 
+export type CallToActionTypes = 'link' | 'button';
+
 export interface Subscription {
     engagement_id: number;
     email_address: string;
@@ -25,6 +27,11 @@ export const Subscribe_TYPE: { [x: string]: SubscribeTypeLabel } = {
     FORM: 'FORM',
 };
 
+export const CallToActionType: { [x: string]: CallToActionTypes } = {
+    LINK: 'link',
+    BUTTON: 'button',
+};
+
 export interface SubscribeForm {
     id: number;
     title: string;