Skip to content

Add an EmailLayout component (replace abandoned enabel/layout-bundle email base) #17

@damienlagae

Description

@damienlagae

Context

enabel/layout-bundle shipped @EnabelLayout/emails/base.html.twig — a table-based outer wrapper with Enabel footer (address + "Responses to this e-mail will not be read." + © year). Every project that sent emails extended this template.

Now that the bundle is abandoned, each project copies the same ~100-line HTML+inline-CSS file to internalize. Observed:

  • Impalatemplates/emails/base.html.twig, copy of the bundle template (PR #2138)

This is a perfect candidate for an enabel/ux component, since the markup is fully reusable and the only inputs are translation keys for the footer text.

Proposed API

final class EmailLayout
{
    public ?string $logo = '@images/enabel-logo-email.png';   // any Twig namespace
    public string $address = 'Belgian Development Agency';
    public string $addressLine = 'Rue Haute 147 - 1000 Brussels';
    public ?string $noreply = 'Responses to this e-mail will not be read.';
    public ?int $copyrightYear = null;                         // defaults to date('Y')
    public string $copyrightHolder = 'Enabel';
}

The component exposes a {% block content %} block for the email body. Inline images use the Symfony Mailer email.image() helper, so the project just needs to register the corresponding Twig namespace (e.g. @imagespublic/images).

Example usage

{# templates/emails/password_reset.html.twig #}
{% component 'Enabel:Ux:EmailLayout' with {
    noreply: 'app.email.noreply'|trans,
} %}
    {% block content %}
        <tr><td class="wrapper">
            <p>Dear {{ user.displayName }},</p>
            <p>You requested a password reset…</p>
            <p><a href="{{ url('app_reset_password', { token: resetToken.token }) }}">Reset password</a></p>
        </td></tr>
    {% endblock %}
{% endcomponent %}

Pre-requisite

Email components have to be table-based with inline styles. The current bundle template is already that — just lift it into enabel/ux and parameterize the footer pieces.

The current template uses email.image('@EnabelLayoutImages/enabel-logo-email.png') which depends on the bundle's path mapping. After internalization that becomes @images/... and apps register their own Twig path. Worth documenting in the component's README.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions