bermudalamb
7df897c0fd
The six email templates lived at the bottom of the Settings tab, under the cart-expiry card and inside a 720px wrapper. Finding them took knowing they were there — "Settings" reads as app configuration and the only thing visible on that tab was a 480px card about cart expiry. Reaching them, the editor was then crushed: EmailTemplateEditor splits a markdown pane and a rendered preview side by side, and 720px left each half under 350px, so the preview showed the email at a width nothing like how it will be read and the markdown toolbar wrapped. Emails is now its own tab, between Customers and Settings, with no width cap. Within it the email types are a left vertical rail rather than a strip across the top: six labels wrapped on narrower displays, and stacking them is what leaves the editor the width the split needs. Settings keeps the cart-expiry card and nothing else. The Default/Customised tag comes off the labels. Six antd tags stacked down a rail stop it being scannable, so a customised template gets a dot and the state in full moves into the editor beside the Restore default button that acts on it. The dot carries aria-label="Customised" so the word stays in the tab's accessible name and the state is not conveyed by a mark alone. Emails owns the fetch it inherited from Settings, and adds a Spin over it. templates starts empty, so the gap before the request lands would otherwise render an empty rail that reads as "there are no emails to edit". Closes #135
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import Tabs from 'antd/es/tabs';
|
|
import Spin from 'antd/es/spin';
|
|
import Typography from 'antd/es/typography';
|
|
import message from 'antd/es/message';
|
|
import { EmailTemplate, fetchEmailTemplates } from './emailTemplatesApi';
|
|
import EmailTemplateEditor from './EmailTemplateEditor';
|
|
|
|
const { Text } = Typography;
|
|
|
|
export default function Emails() {
|
|
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchEmailTemplates()
|
|
.then(setTemplates)
|
|
// Reported rather than swallowed: an empty list would otherwise read as
|
|
// "there are no templates" instead of "they could not be loaded".
|
|
.catch(() => message.error('Could not load the email templates'))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
// Replaces the one that changed so the customised marker and the Restore
|
|
// button reflect what the server now holds, without refetching the rest.
|
|
function handleTemplateChanged(updated: EmailTemplate) {
|
|
setTemplates(current =>
|
|
current.map(t => (t.key === updated.key ? { ...t, subject: updated.subject, body: updated.body } : t))
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Text type="secondary">
|
|
The wording customers receive. Leave one alone and it sends the built-in copy.
|
|
</Text>
|
|
{/* Spinner rather than an empty rail: with templates starting empty, the
|
|
gap before the fetch lands reads as "there are no emails to edit". */}
|
|
{loading ? (
|
|
<div style={{ padding: 48, textAlign: 'center' }}>
|
|
<Spin />
|
|
</div>
|
|
) : (
|
|
/* A left rail rather than a strip across the top. Six labels wrapped on
|
|
narrower displays, and stacking them leaves the editor the full width
|
|
it needs for a markdown pane and a rendered preview side by side. */
|
|
<Tabs
|
|
tabPosition="left"
|
|
style={{ marginTop: 16 }}
|
|
items={templates.map(template => ({
|
|
key: template.key,
|
|
label: (
|
|
<>
|
|
{template.label}
|
|
{/* A dot, not a Tag — six tags down a rail stop it being
|
|
scannable. aria-label keeps the word in the tab's
|
|
accessible name, so the state is not colour-only. */}
|
|
{(template.subject !== null || template.body !== null) && (
|
|
<span aria-label="Customised" title="Customised" style={{ marginLeft: 6 }}>
|
|
•
|
|
</span>
|
|
)}
|
|
</>
|
|
),
|
|
children: (
|
|
<EmailTemplateEditor template={template} onChanged={handleTemplateChanged} />
|
|
)
|
|
}))}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|