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

Jump to bottom

Update banner template selection #452

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Update banner template selection #452

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ef2c74
update banner template selection
marialani May 19, 2023
f6d0984
update material ui radiogroup props
marialani May 19, 2023
b32cfd9
update mui form components
marialani May 22, 2023
4eeffff
Merge branch 'main' into mo-update-banner-template-selection
marialani May 22, 2023
f76d215
updates
marialani May 23, 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
91 changes: 78 additions & 13 deletions public/src/components/channelManagement/bannerTests/bannerTemplateSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React from 'react';
import { MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';
import {
FormControl,
FormControlLabel,
FormLabel,
MenuItem,
Radio,
RadioGroup,
Select,
} from '@material-ui/core';
import { BannerTemplate } from '../../../models/banner';

function isBannerTemplate(s: string): s is BannerTemplate {
Expand All @@ -12,24 +20,42 @@ interface BannerTemplateSelectorProps {
editMode: boolean;
}

const templatesWithLabels = [
{ template: BannerTemplate.AusAnniversaryBanner, label: 'Aus 10 yr moment' },
type TemplateType = 'Contributions' | 'Subscriptions' | 'Moment Template' | 'Bespoke';

const templateTypes: TemplateType[] = [
'Contributions',
'Subscriptions',
'Moment Template',
'Bespoke',
];

const contributionsTemplatesWithLabels = [
{ template: BannerTemplate.ContributionsBanner, label: 'Contributions' },
{
template: BannerTemplate.ContributionsBannerWithSignIn,
label: 'Contributions - with sign in link',
},
{ template: BannerTemplate.CharityAppealBanner, label: 'Charity Appeal' },
];

const subscriptionsTemplatesWithLabels = [
{ template: BannerTemplate.DigitalSubscriptionsBanner, label: 'Digital subscriptions' },
{ template: BannerTemplate.PrintSubscriptionsBanner, label: 'Print subscriptions' },
{ template: BannerTemplate.GuardianWeeklyBanner, label: 'Guardian Weekly' },
{ template: BannerTemplate.InvestigationsMomentBanner, label: 'Investigations moment' },
];

const momentTemplatesWithLabels = [
{ template: BannerTemplate.EnvironmentMomentBanner, label: 'Environment moment' },
{ template: BannerTemplate.GlobalNewYearBanner, label: 'Global New Year moment' },
{
template: BannerTemplate.UkraineMomentBanner,
label: 'Ukraine Moment Banner 2023',
},
{ template: BannerTemplate.AusAnniversaryBanner, label: 'Aus 10 yr moment' },
];

const bespokeTemplatesWithLabels = [
{ template: BannerTemplate.CharityAppealBanner, label: 'Charity Appeal' },
{ template: BannerTemplate.InvestigationsMomentBanner, label: 'Investigations moment' },
{
template: BannerTemplate.ChoiceCardsBannerBlue,
label: 'Choice cards banner - TABS',
Expand All @@ -44,11 +70,29 @@ const templatesWithLabels = [
},
];

const getselectedTemplateType = (selectedTemplateType: TemplateType) => {
switch (selectedTemplateType) {
case 'Contributions':
return contributionsTemplatesWithLabels;
case 'Subscriptions':
return subscriptionsTemplatesWithLabels;
case 'Moment Template':
return momentTemplatesWithLabels;
case 'Bespoke':
return bespokeTemplatesWithLabels;

default:
return contributionsTemplatesWithLabels;
}
};

const BannerTemplateSelector: React.FC<BannerTemplateSelectorProps> = ({
template,
onTemplateChange,
editMode,
}: BannerTemplateSelectorProps) => {
const [selectedTemplateType, setSelectedTemplateType] = useState<TemplateType>('Contributions');

const onChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
const value = event.target.value as string;
if (isBannerTemplate(value)) {
Expand All @@ -57,13 +101,34 @@ const BannerTemplateSelector: React.FC<BannerTemplateSelectorProps> = ({
};

return (
<Select value={template} onChange={onChange} disabled={!editMode}>
{templatesWithLabels.map(withLabel => (
<MenuItem value={withLabel.template} key={withLabel.template}>
{withLabel.label}
</MenuItem>
))}
</Select>
<>
<FormControl component="fieldset">
<FormLabel component="legend">Ticker campaign name</FormLabel>
<RadioGroup
value={selectedTemplateType ?? ''}
onChange={e => setSelectedTemplateType(e.target.value as TemplateType)}
// aria-label=""
// name=""
>
{templateTypes.map(template => (
<FormControlLabel
key={template}
value={template}
control={<Radio />}
label={template}
/>
))}
</RadioGroup>
</FormControl>

<Select value={template} onChange={onChange} disabled={!editMode}>
{getselectedTemplateType(selectedTemplateType ?? 'Contributions').map(withLabel => (
<MenuItem value={withLabel.template} key={withLabel.template}>
{withLabel.label}
</MenuItem>
))}
</Select>
</>
);
};

Expand Down