#react-email / mjml with medusajs custom notification

1 messages · Page 1 of 1 (latest)

rigid night
#

Hi, I've created an own email notify service where it sends email via aws ses. I would to somehow use react-email for email templates with custom arguments (for item list of order in email) but I don't know how to implement that. Is it possible to use?

glass wigeon
#

Yes, you can use whatever templating you want. I'm sure ses accepts html and text version. react-mjml/mjml spits out html in the end (or text).
You do it like in the docs: https://docs.medusajs.com/development/notification/create-notification-provider#sendnotification
On the screenshot where you see // TODO send email, you'll pass order into react-email which will spit out the html for you (or text).
You'll then pass the extracted html from react-mjml into the ses sending function.

image.png
rigid night
#

ohh okay thank you. I originally used TransactionBaseService instead of AbstractNotificationService and couldn't figure it out how to pass custom arguments into templates

glass wigeon
#

By the way the actual sending should happen where the // TODO send email comment is
The to and data in return is not used here. This is for resending the email. You can read about this in the link above

rigid night
#

Okay I see, but I have a question how should I transform react-email into html plain text? I mean, how am I supposed to pass jsx elemnt into render function when my service file is .ts? or can I just change it into .tsx? e.g. I would like to pass order's items into <MyTemplate />

image.png
glass wigeon
#

This is not related to medusa. First of all jsx doesn't care about file extension (js,jsx,ts,tsx).

You create your order react-email template (here MyTemplate).

You fetch the order like on my screenshot above.
You import your react template into your notification service and pass the fetched order in props

Some ses pseudocode below, as I don't know the syntax

import { MyTemplate } from './email';
import { render } from '@react-email/render';



const order = await this.orderService.retrieve(data.id)

// ses send function
await sendEmail(
  { 
    to: order.email,
    html: render(<MyTemplate order={order} />), 
    text: render(<MyTemplate order={order} />, {
        plainText: true,
      });
  }
)

If it will yell something about react/jsx (it shouldn't) then do the render in the template file. Export from there two functions that will render html and text version. Import them in notification service and pass the order.

rigid night
#

okay I will try out, thanks!

rigid night
glass wigeon
#

I don't see the yelling. But have you read what I wrote below the code?

rigid night
#

yep I did it and it's throwing "cannot find module" error

glass wigeon
#

Looks like your path is wrong

rigid night
#

but it's not at all or maybe I don't know something about that. In src directory I created 'emails' folder for emails templates and there is a stripe-welcome.tsx file which has default export like that:

image.png
glass wigeon
#

Might be something with typescript and its config. Maybe indeed typescript jsx needs .tsx. I don't use typescript so I can't help.

rigid night
#

okay but thanks for your tries

glass wigeon
#

But the way you're doing is fine. I do the same thing in pure js. Tho I use react-mjml with nodemailer and postmark.
I'll be migrating to react-email too soon. The logic is the same.