feat(preview): add send email button

[affanshahid]

Component / Package Name: jsx-email

This PR contains:

• bugfix
• feature
• refactor
• documentation
• other

Are tests included?

• yes (bugfixes and features will not be merged without tests)
• no

Breaking Changes?

• yes (breaking changes will not be merged unless absolutely necessary)
• no

Description

This PR ports the "send preview email" feature from react-email using Resend. This is really useful for testing emails in your email client by directly sending them from the preview UI.

I think this is a really important feature to have but let me know what you think.

I did not add tests because I could not find other tests for the preview app.

[lordelogos]

Hello @affanshahid,

Appreciate your pull request. Nevertheless, we're currently exploring an alternative method to incorporate this feature, steering away from a direct port from react-email.

I'll be closing this now. Feel free to connect on Discord for any questions or inquiries.

[shellscape]

A bit premature to close this one.

[shellscape]

@affanshahid we've got some things cooking behind the scenes, and would like to integrate your work into it. please hold tight, we're going to leave the PR open but it'll probably go a tad slower than normal for this project.

[shellscape]

Good news; we got some info back from a provider we're going to partner with. Will drop some information on the PR here tomorrow.

[shellscape]

hey @affanshahid we didn't forget about this. @lordelogos is working on a gist with info for the provider we're going to roll with.

the one bit of feedback I did immediately have was that I'd like to keep the "view selection" button group floated to the right. if you're cool with it, I'd like to move the Send button so it's floating over the iframe, under the top bar - similar to how the copy and download buttons are floating over the editor in the code views. I'd also like to change that from Send to using the paper-airplane icon from https://heroicons.com/. feel free to add some padding or effects to it to draw attention if you'd like to.

does that sound good?

[affanshahid]

Sounds good, I'll make the changes

[lordelogos]

Hey @affanshahid

Here's a doc containing the implementation details
https://gist.github.com/lordelogos/7845d104dc90c066d94068d210be7850

Let me know if you have any questions or need any help

[affanshahid]

@lordelogos Just a note, I had to exclude the from param in the body otherwise I get a 401. Excluding it works though and the email comes in from the email in the gist.

Also, the provided logo has a white background which looks like this:

Not sure if it would be right to alter SVG to remove the bg but if I do, it looks like this:

If I change the color to match the theme (again, not sure if a good idea), it looks like this:

Let me know which approach you would prefer.

[lordelogos]

Hey @affanshahid,
Will check out these changes. Thank you!

(btw, personally I prefer the last option that matches the theme)

[affanshahid]

I've changed the button, this is what it looks like now:

Screen.Recording.2024-01-14.at.7.14.57.PM.mov

I had to add a bg, unlike the buttons in the code view otherwise it becomes hard to see on light backgrounds. I think we can do without the bounce animation, or at least disable it in the mobile view.

[shellscape]

That looks fantastic! I really do love the bounce animation, but agree that we don't need it on the mobile view. Two bounces is probably enough, and probably only when the first email template is opened (not sure how hard that would be to implement). @affanshahid what are your thoughts on that approach?

[shellscape]

Also a fan of the "pulse" CTA as well. Totally up to you https://codepen.io/saigowthamr/pen/PowdZqy / https://www.florin-pop.com/blog/2019/03/css-pulse-effect/ (I used one on a project years ago and always liked it https://github.com/shellscape/webpack-plugin-serve?tab=readme-ov-file#status)

[affanshahid]

Yes makes sense to only run the animation once or twice. Here's a comparison of bounce vs pulse:

Screen.Recording.2024-01-14.at.9.29.35.PM.mov

Screen.Recording.2024-01-14.at.9.39.12.PM.mov

Both look fine to me

[shellscape]

I'm partial to the pulse, but I'd like to give you the final say 😄

[affanshahid]

Pulse it is 👍🏻

[shellscape]

awesome. I'll clone your branch here and give things a run through in a bit. this is a huge win for the project!

[lordelogos]

Hey guys,

I know i'm late to the party but I'm for bounce

especially the 2 bounces at the start
@affanshahid @shellscape

[shellscape]

@affanshahid you've got two different opinions from maintainers haha 😆 as the PR author I think it's fair for you to be the deciding vote!

[affanshahid]

I think the pulse might be more attention grabbing, so let's go with that for now.

[shellscape]

@affanshahid had the chance to check out your branch tonight. everything worked great!

I've got one more request, if you're up for it: when the Send button is clicked, could we show an animation on the button and change the color to indicate that it's disabled while we wait for the API call to complete? And when the API call completes, change the dialog (or an overlay) to a message like "Your template was sent!" and then close the dialog?

[shellscape]

just checked out those changes and they look awesome. thanks for adding that!

[affanshahid]

This is what it looks like now:

Screen.Recording.2024-01-16.at.7.37.47.PM.mov