From f7cede4e960c43024ba441fe2ea3c80dec703c94 Mon Sep 17 00:00:00 2001 From: Eryan Cobham Date: Wed, 20 Dec 2023 11:57:22 -0600 Subject: [PATCH] Added DateRange subcomponent; changed email max-width to 690 --- .../email-templates/build-from-scratch.yaml | 1 + content/email-templates/dua-eligible.yaml | 1 + .../overpayment-partially-waived.yaml | 1 + .../status-update-1-2-3-step.yaml | 1 + content/email-templates/status-update.yaml | 1 + .../email-templates/waiver-application.yaml | 1 + src/appTypes.ts | 2 +- .../EditEmailSubComponent.tsx | 3 ++ .../EmailTemplateSubComponents/DateRange.tsx | 52 +++++++++++++++++++ .../__tests__/DateRange.test.tsx | 50 ++++++++++++++++++ src/templates/styles.tsx | 2 +- 11 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 src/templates/EmailTemplateSubComponents/DateRange.tsx create mode 100644 src/templates/EmailTemplateSubComponents/__tests__/DateRange.test.tsx diff --git a/content/email-templates/build-from-scratch.yaml b/content/email-templates/build-from-scratch.yaml index d2c96fe9..b44f6352 100644 --- a/content/email-templates/build-from-scratch.yaml +++ b/content/email-templates/build-from-scratch.yaml @@ -6,6 +6,7 @@ components: - kind: Header subComponents: - kind: DepartmentSeal + - kind: DateRange - kind: Title - kind: ProgramName - kind: Name diff --git a/content/email-templates/dua-eligible.yaml b/content/email-templates/dua-eligible.yaml index 8664de7d..9f9bfbe7 100644 --- a/content/email-templates/dua-eligible.yaml +++ b/content/email-templates/dua-eligible.yaml @@ -6,6 +6,7 @@ components: - kind: Header subComponents: - kind: DepartmentSeal + - kind: DateRange - kind: Title - kind: ProgramName - kind: Name diff --git a/content/email-templates/overpayment-partially-waived.yaml b/content/email-templates/overpayment-partially-waived.yaml index 823721ad..612ddf06 100644 --- a/content/email-templates/overpayment-partially-waived.yaml +++ b/content/email-templates/overpayment-partially-waived.yaml @@ -7,6 +7,7 @@ components: subComponents: - kind: DepartmentSeal required: true + - kind: DateRange - kind: Title required: true - kind: ProgramName diff --git a/content/email-templates/status-update-1-2-3-step.yaml b/content/email-templates/status-update-1-2-3-step.yaml index 2a09cda9..cc967ca9 100644 --- a/content/email-templates/status-update-1-2-3-step.yaml +++ b/content/email-templates/status-update-1-2-3-step.yaml @@ -7,6 +7,7 @@ components: subComponents: - kind: DepartmentSeal required: true + - kind: DateRange - kind: Title required: true - kind: ProgramName diff --git a/content/email-templates/status-update.yaml b/content/email-templates/status-update.yaml index af6b6bd7..154774b5 100644 --- a/content/email-templates/status-update.yaml +++ b/content/email-templates/status-update.yaml @@ -7,6 +7,7 @@ components: subComponents: - kind: DepartmentSeal required: true + - kind: DateRange - kind: Title required: true - kind: ProgramName diff --git a/content/email-templates/waiver-application.yaml b/content/email-templates/waiver-application.yaml index e8ca3dba..afe15c6c 100644 --- a/content/email-templates/waiver-application.yaml +++ b/content/email-templates/waiver-application.yaml @@ -7,6 +7,7 @@ components: subComponents: - kind: DepartmentSeal required: true + - kind: DateRange - kind: Title required: true - kind: ProgramName diff --git a/src/appTypes.ts b/src/appTypes.ts index e9f987a5..cf4a1a3b 100644 --- a/src/appTypes.ts +++ b/src/appTypes.ts @@ -13,7 +13,7 @@ export const EmailTemplateComponentsMapping = { 'InformationalBox', ], Footer: ['AdditionalContent'], - Header: ['Title', 'ProgramName', 'DepartmentSeal'], + Header: ['DateRange', 'Title', 'ProgramName', 'DepartmentSeal'], Name: [], Disclaimer: [], StateSeal: [], diff --git a/src/templates/EmailEditorContent/EditEmailSubComponent.tsx b/src/templates/EmailEditorContent/EditEmailSubComponent.tsx index b7773c18..2d956465 100644 --- a/src/templates/EmailEditorContent/EditEmailSubComponent.tsx +++ b/src/templates/EmailEditorContent/EditEmailSubComponent.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react' import { EmailSubComponentProps } from '../EmailTemplateSubComponents/shared' +import { DateRange } from '../EmailTemplateSubComponents/DateRange' import { Title } from '../EmailTemplateSubComponents/Title' import { useShouldShowEmailPart } from '../ShouldShowEmailPart' import { ProgramName } from '../EmailTemplateSubComponents/ProgramName' @@ -22,6 +23,8 @@ export const EditEmailSubComponent: FC = (props) => { switch (props.emailSubComponent.kind) { case 'AdditionalContent': return + case 'DateRange': + return case 'Title': return case 'ProgramName': diff --git a/src/templates/EmailTemplateSubComponents/DateRange.tsx b/src/templates/EmailTemplateSubComponents/DateRange.tsx new file mode 100644 index 00000000..3780630d --- /dev/null +++ b/src/templates/EmailTemplateSubComponents/DateRange.tsx @@ -0,0 +1,52 @@ +import React, { FC, CSSProperties } from 'react' +import { EditableElement } from 'src/ui/EditableElement' +import { useIsCurrentlyActiveEmailPart } from '../CurrentlyActiveEmailPart' +import { useEmailPartsContentFor } from '../EmailPartsContent' +import { StyleDefaults, Text, Spacing } from '../styles' +import { EmailBlock } from 'src/ui' + +const defaultValue = '[00/00/0000] - [00/00/0000]' + +const { Row } = EmailBlock + +export const useDateRangeValue = (id: string) => { + return useEmailPartsContentFor(id, defaultValue) +} + +export const DateRange: FC<EmailSubComponentProps> = ({ emailSubComponent }) => { + const { activate } = useIsCurrentlyActiveEmailPart(emailSubComponent.id) + const [value, setValue] = useDateRangeValue(emailSubComponent.id) + + return ( + <Row + elements={[ + 'cell', + 'table', + 'row', + { part: 'cell', style: cellContainerStyles, className: StyleDefaults.layout.narrow }, + ]} + > + <EditableElement + element="h3" + label="Date Range" + onClick={activate} + onFocus={activate} + onValueChange={setValue} + style={styles} + value={value} + /> + </Row> + ) +} + +const cellContainerStyles: CSSProperties = { + ...StyleDefaults.inline.colors, +} + +const styles: CSSProperties = { + ...Text.header.h3.bold, + lineHeight: 1, + margin: 0, + marginBottom: Spacing.size.tiny, + padding: 0, +} diff --git a/src/templates/EmailTemplateSubComponents/__tests__/DateRange.test.tsx b/src/templates/EmailTemplateSubComponents/__tests__/DateRange.test.tsx new file mode 100644 index 00000000..63238547 --- /dev/null +++ b/src/templates/EmailTemplateSubComponents/__tests__/DateRange.test.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import { DateRange } from '../DateRange' +import userEvent from '@testing-library/user-event' +import { render } from '@testing-library/react' +import { EmailTemplate } from 'src/appTypes' +import { faker } from '@faker-js/faker' +import { + buildUniqueEmailSubComponent, + emailPartWrapper, + expectActiveEmailPartToBe, + expectActiveEmailPartToNotBe, + expectEmailPartContentFor, +} from 'src/testHelpers' + +describe('Date Range', () => { + let emailSubComponent: EmailTemplate.UniqueSubComponent + + beforeEach(() => { + emailSubComponent = buildUniqueEmailSubComponent('Header', { kind: 'DateRange' }) + }) + + it('is editable', async () => { + const user = userEvent.setup() + const { queryByText, getByLabelText, baseElement } = render( + <DateRange emailSubComponent={emailSubComponent} />, + { wrapper: emailPartWrapper }, + ) + + const value = faker.lorem.words(4) + const key = emailSubComponent.id + const input = getByLabelText('Date Range') + await user.clear(input) + await user.type(input, value) + + expect(queryByText(value)).not.toBeNull() + expectEmailPartContentFor(key, baseElement) + }) + + it('activates when clicked', async () => { + const user = userEvent.setup() + const { getByLabelText, baseElement } = render( + <DateRange emailSubComponent={emailSubComponent} />, + { wrapper: emailPartWrapper }, + ) + const key = emailSubComponent.id + expectActiveEmailPartToNotBe(key, baseElement) + await user.click(getByLabelText('Date Range')) + expectActiveEmailPartToBe(key, baseElement) + }) +}) diff --git a/src/templates/styles.tsx b/src/templates/styles.tsx index 7d982480..2e28cfaf 100644 --- a/src/templates/styles.tsx +++ b/src/templates/styles.tsx @@ -307,7 +307,7 @@ export const Text = { export const Spacing = { layout: { - maxWidth: 690, + maxWidth: 600, }, size: { tiny: 5,