Update public view & subscribe card edit bug (#1985)

* email list & form sign up tabs * add rich text editor to both drawers * push changes * add subscribe widget path * add print statements for debugging * update routes * update column type cleanup pr * cleanup pr * remove unused imports * py lint * lint and add unit test * update revisions * update test file * pylint * Update factory_scenarios.py * add subscription import * pylint * fix head colisions * update tests * update test * add .strip function for json * update * update widget test * add more logs * lint * isort fix * application out of context error * add subscribeformcards * update wrapper style for rich description on form card * update resource layer for delete route, fix sorting & text casing * add editor grid to override styles * update boolean * lint * bug fix for subscribe cards * fix public view button & editor styling * fix description bug * add responsiveness to form cards
bcgov · Aug 10, 2023 · 8182008 · 8182008
1 parent ddded17
commit 8182008
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 27 deletions.
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx
@@ -62,6 +62,7 @@ const EmailListDrawer = () => {
             subscribeItem ? subscribeItem.call_to_action_text : 'Click here to sign up',
         );
         setInitialRichDescription(subscribeItem ? subscribeItem.description : richEmailListDescription);
+        setRichEmailListDescription(subscribeItem ? subscribeItem.description : '');
     }, [subscribeToEdit]);
 
     const { handleSubmit } = methods;

diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/RichEditorStyles.css b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/RichEditorStyles.css
@@ -0,0 +1,16 @@
+.rdw-option-active {
+    box-shadow: 1px 1px 0px #bfbdbd inset !important;
+}
+
+.subscribe-editor-wrapper
+    > .rdw-editor-wrapper
+    > .rdw-editor-main
+    > .DraftEditor-root
+    > .DraftEditor-editorContainer
+    > .public-DraftEditor-content {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 100% !important;
+    max-height: 90px;
+}
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { MetParagraph, MetWidgetPaper } from 'components/common';
-import { Grid, IconButton } from '@mui/material';
+import { Grid, IconButton, useMediaQuery } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import EditIcon from '@mui/icons-material/Edit';
@@ -10,10 +10,12 @@ import { SubscribeContext } from './SubscribeContext';
 import { Editor } from 'react-draft-wysiwyg';
 import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import { styled } from '@mui/system';
+import './RichEditorStyles.css';
 
 const EditorGrid = styled(Grid)`
     padding-top: 0px !important;
 `;
+
 export interface SubscribeInfoPaperProps {
     subscribeForm: SubscribeForm;
     removeSubscribeForm: (_subscribeId: number) => void;
@@ -22,7 +24,7 @@ export interface SubscribeInfoPaperProps {
 const SubscribeInfoPaper = ({ subscribeForm, removeSubscribeForm, ...rest }: SubscribeInfoPaperProps) => {
     const subscribeItem = subscribeForm.subscribe_items[0];
     const { setSubscribeToEdit, handleSubscribeDrawerOpen } = useContext(SubscribeContext);
-
+    const isMediumScreen = useMediaQuery('(max-width:1100px)');
     function capitalizeFirstLetter(str: string) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
@@ -48,29 +50,30 @@ const SubscribeInfoPaper = ({ subscribeForm, removeSubscribeForm, ...rest }: Sub
                         <MetParagraph fontWeight={'bold'}>Email List</MetParagraph>
                     </Grid>
                     <When condition={!!subscribeItem.description}>
-                        <Grid item xs={3}>
+                        <Grid item xs={isMediumScreen ? 4 : 3}>
                             <MetParagraph>Description:</MetParagraph>
                         </Grid>
-                        <EditorGrid item xs={9} sx={{ position: 'relative', height: 'auto' }}>
-                            <Editor
-                                editorState={getEditorStateFromRaw(subscribeItem.description)}
-                                readOnly={true}
-                                toolbarHidden
-                                wrapperStyle={{
-                                    display: 'flex',
-                                    paddingTop: 3,
-                                    lineHeight: '0', // Adjust line-height to match MetParagraph, or as desired
-                                }}
-                                editorStyle={{
-                                    display: 'inherit',
-                                    padding: '0px',
-                                }}
-                            />
+                        <EditorGrid
+                            item
+                            xs={isMediumScreen ? 8 : 9}
+                            sx={{
+                                position: 'relative',
+                                height: 'auto',
+                                marginTop: -1,
+                            }}
+                        >
+                            <div className="subscribe-editor-wrapper">
+                                <Editor
+                                    editorState={getEditorStateFromRaw(subscribeItem.description)}
+                                    readOnly={true}
+                                    toolbarHidden
+                                />
+                            </div>
                         </EditorGrid>
                     </When>
 
                     <Grid item xs={3}>
-                        <MetParagraph>{capitalizeFirstLetter(subscribeItem.call_to_action_type)}</MetParagraph>
+                        <MetParagraph>{capitalizeFirstLetter(subscribeItem.call_to_action_type)}:</MetParagraph>
                     </Grid>
                     <Grid item xs={9}>
                         <MetParagraph overflow="hidden" textOverflow={'ellipsis'} whiteSpace="nowrap">

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,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { MetBody, MetHeader2, MetLabel, MetPaper, MetParagraph, PrimaryButton } from 'components/common';
+import { MetBody, MetHeader2, MetLabel, MetPaper, MetParagraph, SecondaryButton } from 'components/common';
 import { ActionContext } from '../../ActionContext';
 import { Grid, Divider, Link, Typography, Box, RadioGroup, Radio, FormControlLabel, Skeleton } from '@mui/material';
 import { useAppDispatch } from 'hooks';
@@ -221,18 +221,22 @@ const SubscribeWidget = ({ widget }: { widget: Widget }) => {
                             <Grid item xs={12}>
                                 <MetBody>{getTextFromDraftJsContentState(item.subscribe_items[0].description)}</MetBody>
                             </Grid>
-                            <Grid item xs={12}>
+                            <Grid container item xs={12} justifyContent={'flex-end'}>
                                 <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>
+                                    <Grid item xs={6}>
+                                        <SecondaryButton onClick={() => setOpen(true)} sx={{ width: '100%' }}>
+                                            {item.subscribe_items[0].call_to_action_text}
+                                        </SecondaryButton>
+                                    </Grid>
                                 </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>
+                                    <Grid item xs={12}>
+                                        <Link onClick={() => setOpen(true)} sx={{ cursor: 'pointer' }}>
+                                            {item.subscribe_items[0].call_to_action_text}
+                                        </Link>
+                                    </Grid>
                                 </When>
                             </Grid>
                         </Grid>