Skip to content

Commit 306d9ec

Browse files
nicki-nhsnicki-nhs
committed
1 parent 251055c commit 306d9ec

File tree

14 files changed

+542
-36
lines changed

14 files changed

+542
-36
lines changed

‎frontend/src/app/message-plans/choose-templates/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use server';
2+
3+
import { Metadata } from 'next';
4+
import { CreateEditMessagePlan } from '@organisms/CreateEditMessagePlan/CreateEditMessagePlan';
5+
6+
export async function generateMetadata(): Promise<Metadata> {
7+
return {
8+
title: 'Choose templates for your message plan - NHS Notify',
9+
};
10+
}
11+
12+
export default async function ChooseTemplatesPage() {
13+
const plan = {
14+
id: 'b838b13c-f98c-4def-93f0-515d4e4f4ee1',
15+
name: 'test',
16+
status: 'Draft',
17+
};
18+
19+
return <CreateEditMessagePlan plan={plan} />;
20+
}

‎frontend/src/components/molecules/MessageFormatting/MessageFormatting.module.scss‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎frontend/src/components/molecules/MessagePlanBlock/MessagePlanBlock.module.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.message-plan-block {
2+
border: solid 1px blue;
3+
margin-bottom: 70px;
4+
position: relative;
5+
list-style: none;
6+
7+
&-number {
8+
width: 40px;
9+
height: 40px;
10+
padding-top: 5px;
11+
margin-right: 20px;
12+
background-color: #005eb8;
13+
border-radius: 20px;
14+
color: #ffffff;
15+
font-size: 20px;
16+
font-weight: bold;
17+
text-align: center;
18+
display: inline-block;
19+
float: left;
20+
}
21+
22+
&-outer {
23+
padding: 20px;
24+
margin-left: 60px;
25+
background-color: #ffffff;
26+
border: 1px solid #d8dde0;
27+
}
28+
29+
&-inner {
30+
padding: 20px;
31+
background-color: #ffffff;
32+
border: 2px solid #d8dde0;
33+
}
34+
35+
&:last-child::after {
36+
content: none;
37+
}
38+
39+
&::after {
40+
content: '';
41+
height: calc(100% + 30px);
42+
display: block;
43+
border: dashed 2px #005eb8;
44+
position: absolute;
45+
top: 40px;
46+
left: 18px;
47+
}
48+
}

‎frontend/src/components/molecules/MessagePlanBlock/MessagePlanBlock.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import classNames from 'classnames';
2+
import { TemplateDto } from 'nhs-notify-backend-client';
3+
import { MessagePlanChannelTemplate } from '@molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate';
4+
5+
import styles from '@molecules/MessagePlanBlock/MessagePlanBlock.module.scss';
6+
7+
export function MessagePlanBlock({
8+
number,
9+
title,
10+
template,
11+
children,
12+
}: {
13+
number: number;
14+
title: string;
15+
template: TemplateDto;
16+
children?: React.ReactNode;
17+
}) {
18+
return (
19+
<li
20+
className={classNames(
21+
styles['message-plan-block'],
22+
'notify-channel-block'
23+
)}
24+
>
25+
<div className='notify-channel-block-channel'>
26+
<div className={styles['message-plan-block-number']} aria-hidden='true'>
27+
{number}
28+
</div>
29+
<h2 className='nhsuk-heading-m nhsuk-u-padding-top-1'>{title}</h2>
30+
</div>
31+
32+
<MessagePlanChannelTemplate template={template} />
33+
34+
{children && (
35+
<ul className={styles['channel-list-nested']}>{children}</ul>
36+
)}
37+
</li>
38+
);
39+
}

‎frontend/src/components/molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.module.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.message-plan-block {
2+
border: solid 1px blue;
3+
margin-bottom: 70px;
4+
position: relative;
5+
list-style: none;
6+
7+
&-number {
8+
width: 40px;
9+
height: 40px;
10+
padding-top: 5px;
11+
margin-right: 20px;
12+
background-color: #005eb8;
13+
border-radius: 20px;
14+
color: #ffffff;
15+
font-size: 20px;
16+
font-weight: bold;
17+
text-align: center;
18+
display: inline-block;
19+
float: left;
20+
}
21+
22+
&-outer {
23+
padding: 20px;
24+
margin-left: 60px;
25+
background-color: #ffffff;
26+
border: 1px solid #d8dde0;
27+
}
28+
29+
&-inner {
30+
padding: 20px;
31+
background-color: #ffffff;
32+
border: 2px solid #d8dde0;
33+
}
34+
35+
&:last-child::after {
36+
content: none;
37+
}
38+
39+
&::after {
40+
content: '';
41+
height: calc(100% + 30px);
42+
display: block;
43+
border: dashed 2px #005eb8;
44+
position: absolute;
45+
top: 40px;
46+
left: 18px;
47+
}
48+
}

‎frontend/src/components/molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import Link from 'next/link';
2+
import { TemplateDto } from 'nhs-notify-backend-client';
3+
import { templateTypeDisplayMappings } from 'nhs-notify-web-template-management-utils';
4+
import content from '@content/content';
5+
6+
import styles from '@molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.module.scss';
7+
8+
const { messagePlanChannelTemplate } = content.components;
9+
10+
export function MessagePlanChannelTemplate({
11+
template: { templateType, name: templateName, id: templateId },
12+
}: {
13+
template: TemplateDto;
14+
}) {
15+
return (
16+
<div className={styles['message-plan-block-outer']}>
17+
<div className={styles['message-plan-block-inner']}>
18+
<h3 className='nhsuk-heading-s'>
19+
{templateTypeDisplayMappings(templateType)}
20+
</h3>
21+
22+
{!templateId && (
23+
<Link href='#'>
24+
{messagePlanChannelTemplate.templateLinks.choose}
25+
<span className='nhsuk-u-visually-hidden'>
26+
{templateTypeDisplayMappings(templateType)}
27+
</span>
28+
{messagePlanChannelTemplate.templateLinks.template}
29+
</Link>
30+
)}
31+
32+
{templateId && (
33+
<>
34+
<p>
35+
{templateName}
36+
<br />
37+
<Link href='#'>
38+
{messagePlanChannelTemplate.templateLinks.change}
39+
<span className='nhsuk-u-visually-hidden'>
40+
{templateTypeDisplayMappings(templateType)}
41+
</span>
42+
{messagePlanChannelTemplate.templateLinks.template}
43+
</Link>
44+
</p>
45+
<p>
46+
<Link
47+
href='#'
48+
style={{ color: '#d5281b' }}
49+
className='nhsuk-link nhsuk-link--no-visited-state'
50+
>
51+
{messagePlanChannelTemplate.templateLinks.remove}
52+
<span className='nhsuk-u-visually-hidden'>
53+
{templateTypeDisplayMappings(templateType)}
54+
</span>
55+
{messagePlanChannelTemplate.templateLinks.template}
56+
</Link>
57+
</p>
58+
</>
59+
)}
60+
</div>
61+
</div>
62+
);
63+
}

‎frontend/src/components/molecules/MessagePlanFallbackConditions/MessagePlanFallbackConditions.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.fallback-conditions-branch-icon {
2+
content: '';
3+
width: 40px;
4+
height: 40px;
5+
margin-right: 20px;
6+
padding-top: 5px;
7+
background-color: #f0f4f5;
8+
border: #005eb8 3px solid;
9+
border-radius: 20px;
10+
text-align: center;
11+
display: inline-block;
12+
float: left;
13+
position: relative;
14+
z-index: 999;
15+
}

‎frontend/src/components/molecules/MessagePlanFallbackConditions/MessagePlanFallbackConditions.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import classNames from 'classnames';
2+
import { Details } from 'nhsuk-react-components';
3+
import { FallbackConditionBlock } from '@content/content';
4+
import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
5+
6+
import styles from '@molecules/MessagePlanFallbackConditions/MessagePlanFallbackConditions.module.scss';
7+
8+
export function MessagePlanFallbackConditions({
9+
title,
10+
content,
11+
}: FallbackConditionBlock) {
12+
return (
13+
<li className='notify-channel-block notify-channel-block__rules'>
14+
<div className='notify-channel-block-outer'>
15+
<div className='notify-channel-block-channel' aria-hidden='true'>
16+
<div
17+
className={classNames(
18+
styles['fallback-conditions-branch-icon'],
19+
'notify-channel-block-icon-branch'
20+
)}
21+
>
22+
<svg
23+
viewBox='0 0 499.694748 700.749167'
24+
version='1.1'
25+
xmlns='http://www.w3.org/2000/svg'
26+
>
27+
<g
28+
id='Page-1'
29+
stroke='none'
30+
stroke-width='1'
31+
fill='none'
32+
fill-rule='evenodd'
33+
>
34+
<g
35+
id='branch-svgrepo-com'
36+
transform='translate(250.007401, 350.374584) scale(-1, 1) rotate(90.000000) translate(-250.007401, -350.374584) translate(-149.992599, -49.625416)'
37+
>
38+
<path
39+
d='M650,450 C604.526092,450.130889 564.879924,480.959947 553.55,525 L450,525 C408.597492,524.954532 375.045468,491.402508 375,450 L375,350 C374.90465,322.865486 365.895962,296.514017 349.36,275 L553.55,275 C566.139176,323.757668 613.019668,355.54813 662.975013,349.20297 C712.930358,342.857809 750.374584,300.356703 750.374584,250 C750.374584,199.643297 712.930358,157.142191 662.975013,150.79703 C613.019668,144.45187 566.139176,176.242332 553.55,225 L246.45,225 C233.860824,176.242332 186.980332,144.45187 137.024987,150.79703 C87.0696422,157.142191 49.6254163,199.643297 49.6254163,250 C49.6254163,300.356703 87.0696422,342.857809 137.024987,349.20297 C186.980332,355.54813 233.860824,323.757668 246.45,275 L250,275 C291.402508,275.045468 324.954532,308.597492 325,350 L325,450 C325.081278,519.001899 380.998101,574.918722 450,575 L553.55,575 C566.624846,625.202218 615.96959,657.0262 667.095128,648.228835 C718.220666,639.431469 754.090123,592.944356 749.632835,541.259282 C745.175547,489.574208 701.876844,449.914506 650,450 Z M650,200 C677.614237,200 700,222.385763 700,250 C700,277.614237 677.614237,300 650,300 C622.385763,300 600,277.614237 600,250 C600.031687,222.398898 622.398898,200.031687 650,200 Z M150,300 C122.385763,300 100,277.614237 100,250 C100,222.385763 122.385763,200 150,200 C177.614237,200 200,222.385763 200,250 C199.972439,277.602813 177.602813,299.972439 150,300 L150,300 Z M650,600 C622.385763,600 600,577.614237 600,550 C600,522.385763 622.385763,500 650,500 C677.614237,500 700,522.385763 700,550 C699.962817,577.598821 677.598821,599.962817 650,600 Z'
40+
id='Shape'
41+
fill='#000000'
42+
fill-rule='nonzero'
43+
></path>
44+
<rect
45+
id='_Transparent_Rectangle_'
46+
x='0'
47+
y='0'
48+
width='800'
49+
height='800'
50+
></rect>
51+
</g>
52+
</g>
53+
</svg>
54+
</div>
55+
</div>
56+
<Details>
57+
<Details.Summary>{title}</Details.Summary>
58+
<Details.Text>
59+
<ul className='nhsuk-list nhsuk-list--tick'>
60+
{content.stop && (
61+
<li>
62+
<svg
63+
className='nhsuk-icon nhsuk-icon__tick'
64+
xmlns='http://www.w3.org/2000/svg'
65+
viewBox='0 0 24 24'
66+
fill='none'
67+
aria-hidden='true'
68+
width='34'
69+
height='34'
70+
>
71+
<path
72+
stroke-width='4'
73+
stroke-linecap='round'
74+
d='M18.4 7.8l-8.5 8.4L5.6 12'
75+
stroke='#007f3b'
76+
/>
77+
</svg>
78+
<ContentRenderer content={content.stop} />
79+
</li>
80+
)}
81+
{content.continue && (
82+
<li>
83+
<svg
84+
transform='rotate(90)'
85+
className='nhsuk-icon nhsuk-icon__arrow-right'
86+
xmlns='http://www.w3.org/2000/svg'
87+
viewBox='0 0 24 24'
88+
aria-hidden='true'
89+
width='34'
90+
height='34'
91+
>
92+
<path d='M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z' />
93+
</svg>
94+
<ContentRenderer content={content.continue} />
95+
</li>
96+
)}
97+
</ul>
98+
</Details.Text>
99+
</Details>
100+
</div>
101+
</li>
102+
);
103+
}

‎frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.module.scss‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,4 @@
11
.preview {
2-
background-color: var(--nhsuk-card-background-colour);
3-
border: solid 1px var(--nhsuk-border-colour);
4-
5-
& :global(.nhsuk-summary-list__key) {
6-
width: 20%;
7-
padding: 1rem;
8-
9-
@media screen and (max-width: 768px) {
10-
width: auto;
11-
}
12-
}
13-
14-
& :global(.nhsuk-summary-list__value) {
15-
width: 80%;
16-
padding: 1rem;
17-
18-
@media screen and (max-width: 768px) {
19-
width: auto;
20-
}
21-
}
22-
232
&__content {
243
word-wrap: anywhere;
254

‎frontend/src/components/organisms/CreateEditMessagePlan/CreateEditMessagePlan.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.channel-list {
2+
list-style: none;
3+
padding: 0;
4+
margin: 0 0 48px 0;
5+
}

0 commit comments

Comments
 (0)