Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle the ticker from the banner design preview #517

Merged
merged 7 commits into from
Oct 16, 2023
Merged

Toggle the ticker from the banner design preview #517

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef2c6b4
Basic ticker toggle working
tjmw Oct 13, 2023
bb8e288
Styling
tjmw Oct 13, 2023
83801a7
This can be simplified
tjmw Oct 13, 2023
c42b7a6
This isn't true any more
tjmw Oct 13, 2023
4b0f771
Fix ticker name
tjmw Oct 13, 2023
816ff2a
Lift complexity of toggling ticker out of the preview component
tjmw Oct 16, 2023
048b53f
Pull previewing a design into its own component
tjmw Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,11 @@ const StickyTopBar: React.FC<Props> = ({
</Button>
</>
)}
<BannerVariantPreview variant={buildVariantForPreview(design)} design={design} />
<BannerVariantPreview
variant={buildVariantForPreview(design)}
design={design}
shouldShowTickerToggle={true}
/>
</div>
</div>
</header>
Expand Down
68 changes: 63 additions & 5 deletions public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import React, { useState } from 'react';
import { Theme, makeStyles, Button } from '@material-ui/core';
import { Button, Checkbox, FormControlLabel, makeStyles, Theme } from '@material-ui/core';
import VisibilityIcon from '@material-ui/icons/Visibility';
import Drawer from '@material-ui/core/Drawer';
import {
BannerContent,
BannerTemplate,
BannerVariant,
BannerContent,
isBannerTemplate,
} from '../../../models/banner';
import Typography from '@material-ui/core/Typography';
import { useModule } from '../../../hooks/useModule';
import useTickerData, { TickerSettingsWithData } from '../hooks/useTickerData';
import { SelectedAmountsVariant, mockAmountsCardData } from '../../../utils/models';
import { mockAmountsCardData, SelectedAmountsVariant } from '../../../utils/models';
import { BannerDesign, BannerDesignProps } from '../../../models/bannerDesign';
import { TickerCountType, TickerEndType, TickerName } from '../helpers/shared';

// Mock prices data
interface ProductPriceData {
Expand Down Expand Up @@ -178,7 +179,7 @@ const bannerModules = {
},
};

const useStyles = makeStyles(({ palette }: Theme) => ({
const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
drawer: {
height: 'auto',
bottom: 0,
Expand All @@ -198,17 +199,63 @@ const useStyles = makeStyles(({ palette }: Theme) => ({
fontStyle: 'italic',
fontSize: '20px',
},
controlsContainer: {
position: 'fixed',
backgroundColor: palette.grey[100],
borderRadius: '4px',
top: spacing(3),
left: spacing(3),
padding: spacing(3),
},
}));

interface BannerVariantPreviewProps {
variant: BannerVariant;
design?: BannerDesign;
shouldShowTickerToggle?: boolean;
}

const DEFAULT_TICKER_SETTINGS: TickerSettingsWithData = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if instead of hardcoding this in here we could include tickerSettings in the variant data prop? And let useTickerData do its thing

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've refactored to support this - most of the complexity around toggling the ticker is now outside of the BannerVariantPreview component. When toggled on for a design the ticker data is threaded through as part of the variant (as usual).

tickerData: {
total: 50_000,
goal: 100_000,
},
countType: TickerCountType.money,
endType: TickerEndType.hardstop,
currencySymbol: '£',
copy: {
countLabel: 'contributions in May',
goalReachedPrimary: "We've met our goal - thank you!",
goalReachedSecondary: '',
},
name: TickerName.US,
};

interface TickerToggleProps {
shouldShowTicker: boolean;
setShouldShowTicker: (shouldShowTicker: boolean) => void;
}
const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => {
return (
<FormControlLabel
control={
<Checkbox
checked={shouldShowTicker}
onChange={() => setShouldShowTicker(!shouldShowTicker)}
color="primary"
/>
}
label={'Show ticker?'}
/>
);
};

const BannerVariantPreview: React.FC<BannerVariantPreviewProps> = ({
variant,
design,
shouldShowTickerToggle = false,
}: BannerVariantPreviewProps) => {
const [shouldShowTicker, setShouldShowTicker] = useState<boolean>(false);
const classes = useStyles();

const [drawerOpen, setDrawerOpen] = useState<boolean>();
Expand All @@ -231,7 +278,10 @@ const BannerVariantPreview: React.FC<BannerVariantPreviewProps> = ({
setDrawerOpen(open);
};

const props = buildProps(variant, tickerSettingsWithData, design);
const tickerSettings =
tickerSettingsWithData || (shouldShowTicker ? DEFAULT_TICKER_SETTINGS : undefined);

const props = buildProps(variant, tickerSettings, design);

return (
<div>
Expand All @@ -251,6 +301,14 @@ const BannerVariantPreview: React.FC<BannerVariantPreviewProps> = ({
<Typography>Click anywhere outside the banner to close</Typography>
</div>
<Banner {...props} />
{shouldShowTickerToggle && (
<div className={classes.controlsContainer}>
<TickerToggle
shouldShowTicker={shouldShowTicker}
setShouldShowTicker={setShouldShowTicker}
/>
</div>
)}
</div>
</Drawer>
</React.Fragment>
Expand Down