From dbbdf2aac12f2a8d207df126052e4e4522113731 Mon Sep 17 00:00:00 2001 From: VineetBala-AOT <90332175+VineetBala-AOT@users.noreply.github.com> Date: Tue, 8 Aug 2023 09:51:28 -0700 Subject: [PATCH] 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 --- .../widgets/Subscribe/SubscribeWidget.tsx | 92 +++++++++++++++---- met-web/src/models/subscription.ts | 7 ++ 2 files changed, 79 insertions(+), 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 index e22da3084..a49ff8cc6 100644 --- 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([]); + 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 ( + + + + ); + } + return ( { } /> - - - {widget.title} - - - - - If you are interested in getting updates on public engagements at the EAO, you can sign up - below: - - - - setOpen(true)} sx={{ width: '100%' }}> - Sign Up for Updates - - - + {subscribeItems?.map((item) => { + return ( + + + + {widget.title} + + + + {getTextFromDraftJsContentState(item.subscribe_items[0].description)} + + + + setOpen(true)} sx={{ width: '100%' }}> + {item.subscribe_items[0].call_to_action_text} + + + + setOpen(true)} sx={{ cursor: 'pointer' }}> + {item.subscribe_items[0].call_to_action_text} + + + + + + ); + })} ); }; diff --git a/met-web/src/models/subscription.ts b/met-web/src/models/subscription.ts index f42407c4c..69d30eeef 100644 --- 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;