Payment Failed Emails cannot be styled with css by including the default email header

[gwharton]

Preconditions and environment

2.4.7-p1

Steps to reproduce

Deploy vanilla 2.4.7-p1
Configure payment provider in test mode, such that payment failed emails can be triggered
Configure the payment failed emails to generate and specify a recipient email address
Modify the standard payment failed email template to include the standard header and footer includes.
Trigger a failed payment

Expected result

The email received has the standard email headers and footers and is styled via css.

Actual result

The email contains the following error.

CSS inlining error: Compilation from source: LESS file is empty: adminhtml////css/email-inline.less

This is correct, email style sheets are not generated for the admin theme.

Either the emails should be sent under the scope of the store that generated the failed payment, or email styles should be included in the admin theme?

Additional information

No response

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant]

Hi @gwharton. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant]

Hi @engcom-Delta. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[mrtuvn]

you should add styles via less file ? Add via email header can missed in some case depends on devices/app
i will suggest you add styles via less and magento will auto inject inline to email
https://github.com/magento/magento2/blob/2.4-develop/app/design/frontend/Magento/blank/web/css/source/_email-extend.less

[gwharton]

Email styles are completely missing from the admin theme, so it's not just a case of adding a style to admin themes email less files. You would need to copy over the email.less files from your frontend theme Into admin theme and maintain them both for style consistency. This I suspect wouldn't be a straight forward process due to the differences between the admin and frontend theme dependencies.

[engcom-Delta]

Hi @gwharton ,

Thank you for your reporting and collaboration.

We are still working on this issue and will update you soon.

Thanks,

[mrtuvn]

so you want styles preview in admin email same as output in frontend ?@gwharton

[mrtuvn]

It's limitation of core base. I think it's need some extra customise when it's difference store/area code
admin -> always store 0 and area code -> adminhtml
So you need re-set store follow email store view and set area code frontend to archieve your demand

[m2-assistant]

Hi @engcom-November. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-November]

Hello @gwharton,
Thank you for the report and collaboration!
Thank you @mrtuvn for the input!

We are able to reproduce this on 2.4.7-p1 instance.
The payment failed email with default luma header and footer is not being generated in the mail.
we are seeing an exception as below:

UnexpectedValueException: Template file 'header.html' is not found. in /opt/homebrew/var/www/magento247p1/vendor/magento/module-email/Model/Template/Config.php:253

@gwharton can you try with the workaround mentioned here, and let us know if this fixes your issue.

Thank you.

[engcom-November]

Hello @gwharton,

As there is no activity on this issue for a long time, we believe the issue has been resolved, hence closing this issue.
Feel free to raise a new issue or reopen this if you need more assistance.

Thank you.

[hostep]

@engcom-November: you reproduced the bug but closed it anyways? That's not a good way of doing things.
Can you re-open? It sounds like a core bug to me (unless somebody can tell me otherwise?)

[gwharton]

I guess not so much a bug, but design feature. email styles are just not present in the admin theme, so any attempt to add any sort of styling to any emails sent out under the ADMIN scope are doomed to be dull.

I tried adding the email styles less files to my admin theme, but soon lost the will to live due to the different dependency and inheritance oddities between the frontend and backend themes.

[engcom-November]

Hello @gwharton,

The result we got is different from what is mentioned in the actual result, instead of the styles being empty we are getting the header template is missing.

This is the template used:

{{template config_path="design/email/header_template"}}


<h1>{{trans "Payment Transaction Failed"}}</h1>

<ul>
    <li>
        <strong>{{trans "Reason"}}</strong><br />
        {{var reason}}
    </li>
    <li>
        <strong>{{trans "Checkout Type"}}</strong><br />
        {{var checkoutType}}
    </li>
    <li>
        <strong>{{trans "Customer:"}}</strong><br />
        <a href="mailto:{{var customerEmail}}">{{var customer}}</a> <{{var customerEmail}}>
    </li>
    <li>
        <strong>{{trans "Items"}}</strong><br />
        {{var items|raw}}
    </li>
    <li>
        <strong>{{trans "Total:"}}</strong><br />
        {{var total}}
    </li>
    <li>
        <strong>{{trans "Billing Address:"}}</strong><br />
        {{var billingAddressHtml|raw}}
    </li>
    <li>
        <strong>{{trans "Shipping Address:"}}</strong><br />
        {{var shippingAddressHtml|raw}}
    </li>
    <li>
        <strong>{{trans "Shipping Method:"}}</strong><br />
        {{var shippingMethod}}
    </li>
    <li>
        <strong>{{trans "Payment Method:"}}</strong><br />
        {{var paymentMethod}}
    </li>
    <li>
        <strong>{{trans "Date & Time:"}}</strong><br />
        {{var dateAndTime}}
    </li>
</ul>

{{template config_path="design/email/footer_template"}}

Can you let us know if we are missing something here.