Challenge Overview
Replace one link with two links in email templates.
Project Background
Topcode Connect is a client-facing application of Topcoder. When someone is invited to a project he gets an email notification with the invitation to join the project. So far there is only one link in the email which points to the project. If invited users clicks the link to the project he would load the project page with the dialog opened to “Join” or “Decline” invitation. To simplify the process we would like to put into the email two direct links which would automatically trigger the “Join” or “Decline” invitation when users follow them.
We already implemented this functionality in Topcoder Connect and in this challenge we only have to update email templates.
Technology Stack
-
Handlebars
-
Gulp
-
HTML
-
CSS
-
Email
Code access
The work for this challenge has to be done in one repository:
- Notifications Service repo https://github.com/topcoder-platform/tc-notifications branch "dev".
Individual requirements
Currently, for the notification type “connect.notification.project.member.invite.created” we get the next emails: for non-SSO-project and for SSO-project.
Update email template https://github.com/topcoder-platform/tc-notifications/blob/dev/emails/src/partials/project-team.html so in case of “connect.notification.project.member.invite.created” instead of one blue link “View project on Connect” or “SSO Login” we have two links:
-
“Join Project” (blue link, same like now)
-
“Decline” (same size and shape as a blue link, but have “border: 1px solid $grey-hyperlink”, “background-color: $white-background”, text “color: $tc-gray-70” )
-
Add “$tc-gray-70: #555555;” to “emails/src/styles/modules/_color.scss”
-
Space between buttons 10px.
-
For the non-SSO-project links should be:
- “Join Project” → "{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=accept"
- “Decline” → "{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=decline" -
For the SSO-project links should be:
- “Join Project” → "{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Daccept"
- “Decline” → "{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Ddecline"
General requirements
-
The links have to be reaplced only for notification type “connect.notification.project.member.invite.created”. For other notifications types, links should stay as thy are “View project on Connect” for non-SSO-project and “SSO Login” for SSO-project.
-
All the styles should be placed in the CSS files. They would be included automatically during the building process.
-
As HTML/CSS for emails has multiple limitations use only safe CSS properties. Use nesting tables for positioning. And use other HTML emails best practices. Also, see this and this.
-
Make sure that emails are rendered properly. See the verification guide section.
Verification guide
To verify that emails are rendered properly you can generate emails with the notification data provided on the forum:
- how-to-render-email.md - guide
- test-sso-true.json - data to generate an email for SSO-project
- test-sso-false.json - data to generate an email for non-SSO-project
Note, that you have to include generated emails for both cases in your submission.
Final Submission Guidelines
-
Patch to the Notifications Service with the updated template.
-
Rendered email for SSO-project (with 2 links).
-
Rendered email for non-SSO-project (with 2 links).