Make share thoughts button optional

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>
     );
 };

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}

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}

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

met-web/src/web-components/components/engagement-banner-wc.tsx

@@ -7,11 +7,12 @@
 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;
     observer: MutationObserver;
     shadowContainer: any;
     constructor(componentToMount: React.ComponentType) {
         super();
         this.observer = new MutationObserver(() => this.update());
@@ -41,18 +42,21 @@
         });
         const shadowTheme = createWcTheme(shadowRootElement);
         this.root = ReactDOM.createRoot(shadowRootElement);
         const props: any = {
             ...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}
                             />
@@ -71,7 +75,7 @@
         this.unmount();
         this.mount();
     }
     getProps(attributes: any) {
         return [...attributes]
             .filter((attr) => attr.name !== 'style')
             .map((attr) => this.convert(attr.name, attr.value))
@@ -83,12 +87,12 @@
             .reduce(
                 (events, ev) => ({
                     ...events,
                     [ev.name]: (args: any) => this.dispatchEvent(new CustomEvent(ev.name, { ...args })),
                 }),
                 {},
             );
     }
     convert(attrName: any, attrValue: any) {
         let value = attrValue;
         if (attrValue === 'true' || attrValue === 'false') value = attrValue === 'true';
         else if (!isNaN(attrValue) && attrValue !== '') value = +attrValue;