Some quick fixes after a user had some confusion over how the email templating works, just adding some detail that should help explain.

This commit is contained in:
mike12345567 2021-07-14 11:23:24 +01:00
parent 1f5b3b4467
commit c20fde41ee
5 changed files with 50 additions and 32 deletions

View File

@ -16,6 +16,7 @@
import Editor from "components/integration/QueryEditor.svelte" import Editor from "components/integration/QueryEditor.svelte"
import TemplateBindings from "./_components/TemplateBindings.svelte" import TemplateBindings from "./_components/TemplateBindings.svelte"
// this is the email purpose
export let template export let template
let htmlEditor let htmlEditor
@ -24,9 +25,11 @@
$: selectedTemplate = $email.templates?.find( $: selectedTemplate = $email.templates?.find(
({ purpose }) => purpose === template ({ purpose }) => purpose === template
) )
$: name = $email.definitions?.info[template]?.name
$: description = $email.definitions?.info[template]?.description
$: baseTemplate = $email.templates?.find(({ purpose }) => purpose === "base") $: baseTemplate = $email.templates?.find(({ purpose }) => purpose === "base")
$: templateBindings = $: templateBindings =
$email.definitions?.bindings?.[selectedTemplate.purpose] || [] $email.definitions?.bindings?.[selectedTemplate?.purpose] || []
$: previewContent = makePreviewContent(baseTemplate, selectedTemplate) $: previewContent = makePreviewContent(baseTemplate, selectedTemplate)
async function saveTemplate() { async function saveTemplate() {
@ -81,13 +84,15 @@
</div> </div>
<header> <header>
<Heading> <Heading>
Email Template: {template} Email Template: {name}
</Heading> </Heading>
<Button cta on:click={saveTemplate}>Save</Button> <Button cta on:click={saveTemplate}>Save</Button>
</header> </header>
<Detail>Description</Detail>
<Body>{description}</Body>
<Body <Body
>Change the email template here. Add dynamic content by using the bindings >Change the email template here. Add dynamic content by using the bindings
menu on the right.</Body menu on the right.</Body
> >
</Layout> </Layout>
<Tabs selected="Edit" on:select={fixMountBug}> <Tabs selected="Edit" on:select={fixMountBug}>

View File

@ -1,13 +0,0 @@
<script>
import { goto } from "@roxi/routify"
export let value
</script>
<span on:click={() => $goto(`./${value}`)}>{value}</span>
<style>
span {
text-transform: capitalize;
}
</style>

View File

@ -14,7 +14,6 @@
Checkbox, Checkbox,
} from "@budibase/bbui" } from "@budibase/bbui"
import { email } from "stores/portal" import { email } from "stores/portal"
import TemplateLink from "./_components/TemplateLink.svelte"
import api from "builderStore/api" import api from "builderStore/api"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
@ -23,23 +22,30 @@
} }
const templateSchema = { const templateSchema = {
purpose: { name: {
displayName: "Email", displayName: "Name",
editable: false, editable: false,
}, },
category: {
displayName: "Category",
editable: false,
}
} }
const customRenderers = [ $: emailInfo = getEmailInfo($email.definitions)
{
column: "purpose",
component: TemplateLink,
},
]
let smtpConfig let smtpConfig
let loading let loading
let requireAuth = false let requireAuth = false
function getEmailInfo(definitions) {
if (!definitions) {
return []
}
const entries = Object.entries(definitions.info)
return entries.map(([key, value]) => ({ purpose: key, ...value }))
}
async function saveSmtp() { async function saveSmtp() {
// clone it so we can remove stuff if required // clone it so we can remove stuff if required
const smtp = cloneDeep(smtpConfig) const smtp = cloneDeep(smtpConfig)
@ -159,8 +165,7 @@
</Body> </Body>
</Layout> </Layout>
<Table <Table
{customRenderers} data={emailInfo}
data={$email.templates}
schema={templateSchema} schema={templateSchema}
{loading} {loading}
on:click={({ detail }) => $goto(`./${detail.purpose}`)} on:click={({ detail }) => $goto(`./${detail.purpose}`)}

View File

@ -28,12 +28,18 @@ exports.save = async ctx => {
exports.definitions = async ctx => { exports.definitions = async ctx => {
const bindings = {} const bindings = {}
const info = {}
for (let template of TemplateMetadata.email) { for (let template of TemplateMetadata.email) {
bindings[template.purpose] = template.bindings bindings[template.purpose] = template.bindings
info[template.purpose] = {
name: template.name,
description: template.description,
category: template.category,
}
} }
ctx.body = { ctx.body = {
info,
bindings: { bindings: {
...bindings, ...bindings,
common: Object.values(TemplateBindings), common: Object.values(TemplateBindings),

View File

@ -96,7 +96,9 @@ const TemplateBindings = {
const TemplateMetadata = { const TemplateMetadata = {
[TemplateTypes.EMAIL]: [ [TemplateTypes.EMAIL]: [
{ {
name: "Base Format", name: "Base format",
description: "This is the base template, all others are based on it. The {{ body }} will be replaced with another email template.",
category: "miscellaneous",
purpose: EmailTemplatePurpose.BASE, purpose: EmailTemplatePurpose.BASE,
bindings: [ bindings: [
{ {
@ -110,7 +112,9 @@ const TemplateMetadata = {
], ],
}, },
{ {
name: "Password Recovery", name: "Password recovery",
description: "When a user requests a password reset, this template will be used.",
category: "user management",
purpose: EmailTemplatePurpose.PASSWORD_RECOVERY, purpose: EmailTemplatePurpose.PASSWORD_RECOVERY,
bindings: [ bindings: [
{ {
@ -126,7 +130,16 @@ const TemplateMetadata = {
], ],
}, },
{ {
name: "New User Invitation", name: "User welcome",
description: "When a new user is added to the system, the welcome email will use this template.",
category: "user management",
purpose: EmailTemplatePurpose.WELCOME,
bindings: [],
},
{
name: "User invitation",
description: "When using the email invitation system, this template will be used.",
category: "user management",
purpose: EmailTemplatePurpose.INVITATION, purpose: EmailTemplatePurpose.INVITATION,
bindings: [ bindings: [
{ {
@ -143,6 +156,8 @@ const TemplateMetadata = {
}, },
{ {
name: "Custom", name: "Custom",
description: "A custom format, this is currently used for SMTP email actions in automations.",
category: "automations",
purpose: EmailTemplatePurpose.CUSTOM, purpose: EmailTemplatePurpose.CUSTOM,
bindings: [ bindings: [
{ {