Make share thoughts button optional (#2282)

bcgov · Sep 28, 2023 · 4870ef7 · 4870ef7
1 parent ec9349b
commit 4870ef7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 37 deletions.
diff --git a/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx b/met-web/src/components/engagement/view/EngagementBanner/BannerSection.tsx
@@ -1,46 +1,25 @@
 import React from 'react';
-import { Grid, Skeleton } from '@mui/material';
+import { Skeleton } from '@mui/material';
 import { Banner } from '../../../banner/Banner';
-import { PrimaryButton } from 'components/common';
 import { SubmissionStatus } from 'constants/engagementStatus';
-import { When } from 'react-if';
 import EngagementInfoSection from '../EngagementInfoSection';
 import { Engagement } from 'models/engagement';
 
 export interface EngagementBannerProps {
-    startSurvey: () => void;
     isEngagementLoading: boolean;
     savedEngagement: Engagement | null;
-    mockStatus?: SubmissionStatus;
     isLoggedIn: boolean;
+    mockStatus?: SubmissionStatus;
+    surveyButton?: React.ReactNode;
 }
-export const BannerSection = ({
-    startSurvey,
-    isEngagementLoading,
-    savedEngagement,
-    isLoggedIn,
-    mockStatus,
-}: EngagementBannerProps) => {
-    const surveyId = savedEngagement?.surveys[0]?.id ?? '';
-    const isPreview = isLoggedIn;
-    const currentStatus = isPreview ? mockStatus : savedEngagement?.submission_status;
-    const isOpen = currentStatus === SubmissionStatus.Open;
-
+export const BannerSection = ({ isEngagementLoading, savedEngagement, surveyButton }: EngagementBannerProps) => {
     if (isEngagementLoading || !savedEngagement) {
         return <Skeleton variant="rectangular" width="100%" height="35em" />;
     }
 
     return (
         <Banner imageUrl={savedEngagement.banner_url} height="480px">
-            <EngagementInfoSection savedEngagement={savedEngagement}>
-                <When condition={surveyId && isOpen}>
-                    <Grid item container direction={{ xs: 'column', sm: 'row' }} xs={12} justifyContent="flex-end">
-                        <PrimaryButton data-testid="EngagementBanner/share-your-thoughts-button" onClick={startSurvey}>
-                            Share Your Thoughts
-                        </PrimaryButton>
-                    </Grid>
-                </When>
-            </EngagementInfoSection>
+            <EngagementInfoSection savedEngagement={savedEngagement}>{surveyButton}</EngagementInfoSection>
         </Banner>
     );
 };
diff --git a/met-web/src/components/engagement/view/EngagementBanner/StandAloneBanner.tsx b/met-web/src/components/engagement/view/EngagementBanner/StandAloneBanner.tsx
@@ -5,10 +5,10 @@ import { getEngagementIdBySlug } from 'services/engagementSlugService';
 import { getEngagement } from 'services/engagementService';
 
 interface EngagementBannerProps {
-    startSurvey: () => void;
     engagementSlug: string;
+    surveyButton?: React.ReactNode;
 }
-export const EngagementBanner = ({ startSurvey, engagementSlug }: EngagementBannerProps) => {
+export const EngagementBanner = ({ engagementSlug, surveyButton }: EngagementBannerProps) => {
     const [isEngagementLoading, setIsEngagementLoading] = useState(true);
     const [savedEngagement, setSavedEngagement] = useState<Engagement | null>(null);
     const [engagementId, setEngagementId] = useState<number | null>(null);
@@ -52,7 +52,7 @@ export const EngagementBanner = ({ startSurvey, engagementSlug }: EngagementBann
 
     return (
         <BannerSection
-            startSurvey={startSurvey}
+            surveyButton={surveyButton}
             isEngagementLoading={isEngagementLoading}
             savedEngagement={savedEngagement}
             isLoggedIn={false}

diff --git a/met-web/src/components/engagement/view/EngagementBanner/index.tsx b/met-web/src/components/engagement/view/EngagementBanner/index.tsx
@@ -3,16 +3,12 @@ import { ActionContext } from '../ActionContext';
 import { useAppSelector } from 'hooks';
 import { BannerSection } from './BannerSection';
 
-interface EngagementBannerProps {
-    startSurvey: () => void;
-}
-export const EngagementBanner = ({ startSurvey }: EngagementBannerProps) => {
+export const EngagementBanner = () => {
     const { isEngagementLoading, savedEngagement, mockStatus } = useContext(ActionContext);
     const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated);
 
     return (
         <BannerSection
-            startSurvey={startSurvey}
             isEngagementLoading={isEngagementLoading}
             savedEngagement={savedEngagement}
             mockStatus={mockStatus}

diff --git a/met-web/src/components/engagement/view/EngagementView.tsx b/met-web/src/components/engagement/view/EngagementView.tsx
@@ -53,7 +53,7 @@ export const EngagementView = () => {
                     <PreviewBanner />
                 </Grid>
                 <Grid item xs={12}>
-                    <EngagementBanner startSurvey={handleStartSurvey} />
+                    <EngagementBanner />
                 </Grid>
                 <Grid
                     container

diff --git a/met-web/src/web-components/components/engagement-banner-wc.tsx b/met-web/src/web-components/components/engagement-banner-wc.tsx
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom/client';
 import { EngagementBanner } from '../../components/engagement/view/EngagementBanner/StandAloneBanner';
 import createWcTheme from '../styles/wcTheme';
 import { store } from '../../store';
+import { PrimaryButton } from 'components/common';
 
 export default class EngagementBannerWC extends HTMLElement {
     root: any;
@@ -45,14 +46,17 @@ export default class EngagementBannerWC extends HTMLElement {
             ...this.getProps(this.attributes),
             ...this.getEvents(),
         };
-        console.log('Props', props);
         this.root.render(
             <React.StrictMode>
                 <Provider store={store}>
                     <CacheProvider value={cache}>
                         <ThemeProvider theme={shadowTheme}>
                             <EngagementBanner
-                                startSurvey={() => window.open(props['engagementurl'], '_blank')}
+                                surveyButton={
+                                    <PrimaryButton onClick={() => window.open(props['engagementurl'], '_blank')}>
+                                        Share Your Thoughts
+                                    </PrimaryButton>
+                                }
                                 engagementSlug={this._getSlugFromUrl(props['engagementurl'])}
                                 {...props}
                             />