Email notifications: signer modal component and transaction

[dmtrjsg]

Context

• Email Notifications Dev Epic #4230

Backend

⚠️ Link to BE API implementation >

Dependencies

Blocks:

• Subscribe to email notifications from Settings page #4231
• Display sign up to email notifications on first login of existing users #4237

Blocked by:

• [backend] Write nicer html emails #4274

Scope

• Create component (Signer modal for connecting tx email with membership.) Link to Design >
  -- email input
  -- membership controller account displayed which is used to sign
  -- Ctas: "sign and authorize email"; "Not now"
  -- state when email is not provided -> CTA "sign and authorise" is disabled unless email is provided
• When email is provided and modal signed, confirmation email must be sent..
• Confirmation email template for email auth. HTML template is required to be used see
• [backend] Write nicer html emails #4274 point 1.
• Following the link user is brought back to the App with confirmation modal shown. Link to design>

Design

Links are added to acceptance criteria
Preview:

[IlyaSmiyukha]

I have a few questions about styling the modal.

1. I didn't find text for the tooltip in label
2. Can I remove the such a big gap between footer and blue alert?
3. I see background-color: #E8EDF6; for footer in figma, but default color is #fff for all modals. Should I change it?

[dmtrjsg]

@IlyaSmiyukha
Thanks for the questions.

1. Tooltip text: Add your email address here to receive notifications. It can be the same or different to the one added to the membership profile.
2. Let's keep the modal dimensions as this component is standardized.
3. Feel free to use the default colour for the modal footers.

[IlyaSmiyukha]

@dmtrjsg Got it. Thanks for the quick response

[dmtrjsg]

@IlyaSmiyukha have you managed to run the backend to be able to test this?

[IlyaSmiyukha]

@dmtrjsg No, I got this error. But .env I copied from .env.dev

[dmtrjsg]

@IlyaSmiyukha ok thx for letting us know i'll try to resolve asap. Monday is a day off for most of our team so perhaps this would need to wait till Tuesday morning.

[thesan]

@dmtrjsg No, I got this error. But .env I copied from .env.dev

@IlyaSmiyukha this means that you shouldn't define both the sendgrid and the mailgun config. But for the purpose of this issue, you don't need to define an email provider. So all the variables in the Email (only one of the api provider should be defined) section should be removed or commented from your .env file.

[IlyaSmiyukha]

@thesan it helped, thanks

[thesan]

@IlyaSmiyukha np !

I just fixed issues with the sign-up/sign-in mutations on the branch of this PR: #4337. So you should run the backend from this branch to implement this modal.