Skip to content

Commit

Permalink
Make share thoughts button optional (#2282)
Browse files Browse the repository at this point in the history
  • Loading branch information
jadmsaadaot authored Sep 28, 2023
1 parent ec9349b commit 4870ef7
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 37 deletions.
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -52,7 +52,7 @@ export const EngagementBanner = ({ startSurvey, engagementSlug }: EngagementBann

return (
<BannerSection
startSurvey={startSurvey}
surveyButton={surveyButton}
isEngagementLoading={isEngagementLoading}
savedEngagement={savedEngagement}
isLoggedIn={false}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion met-web/src/components/engagement/view/EngagementView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const EngagementView = () => {
<PreviewBanner />
</Grid>
<Grid item xs={12}>
<EngagementBanner startSurvey={handleStartSurvey} />
<EngagementBanner />
</Grid>
<Grid
container
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Check warning on line 13 in met-web/src/web-components/components/engagement-banner-wc.tsx

View workflow job for this annotation

GitHub Actions / linting (16.x)

Unexpected any. Specify a different type
Expand Down Expand Up @@ -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}
/>
Expand Down

0 comments on commit 4870ef7

Please sign in to comment.