@properly/emails v3.3.15
Overview
This library is for creating reusable, testable components and email templates using React.
Develop
Setup
- Open a terminal
- Clone git repository
git clone git@github.com:GitProperly/properly-email-engine.git
- Go into repository dir
cd properly-email-engine
- Install root dependencies
npm install
- Start storybook
npm run storybook
ornpm start
Storybook
Check this page to read more about storybook: https://storybook.js.org/
Folder structure
.circleci
: CircleCI configuration..storybook
: Storybook configuration.src
-_snapshots_
: Snapshot files for test. -components
: Small components like header, footer, dashboard. -customComponents
: Email layout components. -emailComponents
: Rendered HTML email files. -emailStrings
: String files of rendered HTML emails fromemailComponents
folder. This is the final result that will be returned. -translations
-interpolated
: Strings with proper variables. All the%s
symbols in theoriginal
folder are replaced with the proper variables that are used for localization. -original
: Original string files that are downloaded from the Onesky project.
Dependencies
Adding a new email
- Create a folder and create a new index.js and stories.js file in
EmailComponents
folder. If there's any components already created incomponents
folder, use them. Or create your own component. Main style guide and variables are in the/styleGuide.js
file. - Once you created email, import it from
EmailStrings
folder. - Create an test file in the same folder.
- Add an export function to
src/index.js
file. npm test
to check if it's all good.
Note: Kindly refrain from using CSS3 in the project, only some of the email client support CSS3.Take a look at email support guide before implementing css.
Localization
To check entire localization process, please check this document.
npm run download-strings
to download all the language files from the Onesky project.- Use
<FormattedMessage>
component and pass a string ID, default message, and the values should be dynamic.
Examples
import { reactIntlInitialize } from '../../translations';
import { FormattedMessage } from 'react-intl';
<FormattedMessage
id="learn.more.about.badges"
defaultMessage="Learn more about badges"
values={{ firstName, hostName }}
/>
Test
- Functional test:
npm test
- Rendering test: Currently, we don't have an automatic process to test email rendering by each email client and platform.
1.
npm run storybook
ornpm start
to start storybook. 2. Open the browser and go tolocalhost:9001
or any other localhost that runs storybook. 3. Copy the rendered HTML email string from the story view. For example, if you want to test the Job Finished Notification Email rendering, selectStrings > JobRequest > JobFinished > String
on the sidebar navigation of Storybook page and copy the code block that printed on the story view. 4. Go to the Intercom Messages tab and login. 5. SelectMessages > Manual Messages > New Manual Messages
. 6. Select your channel toEmail
. 7. SelectWrite your message
section, and selectimport HTML email
button. 8. Paste the block of code that you copied on step 3. 9. SelectSend a test email
button. It will send a test email to the email address that you type. Test email rendering. I recommend you to test email rendering at least on these three platforms: Gmail web, Gmail iOS, Gmail Android. - To find email notification history: Connect Properly Mongo DB via Robo 3T. Search
db.getCollection('Notification').find({type: [emailTypeName]})
.
Deploy storybook to environments
- run
npm run everest | develop | sandbox | beta
to deploy the storybook to respective environments and can be accessed by below mentioned links as per env - To deploy to stage , run npm run major | minor | bump (patch), this will upgrade the version as per semvar and auto deploy to stage environment
- To deploy to production , run
npm run prod
,this will make sure that the storybook is deployed as well as the version gets published to npm registry.
- Everest- email-engine-everest.getproperly.com
- Stage- email-engine-staging.getproperly.com
- Prod- email-engine.getproperly.com
Publish
npm run major | minor | patch
to update version and auto deploy storybook to stage environment.- Run
npm run prod
and then the CircleCI will kindly test, build, and publish the package for you and automatically deploy storybook out to production environment. - If you didn't receive any error message, then hooray! Skull your beer! 🍺
Usage
- Install npm package via npm:
npm install @properly/emails
- Import an email rendering function
import { stringOfResetPasswordEmail } from @properly/emails
- Send appropriate data when you execute a function. Props are mandatory, Options are optional.
- If the data/props are appropriate, you'll get a string of rendered email as return. Otherwise, you'll get ruthless errors as return.
Available functions
- Password Behaviours
-
stringOfResetPasswordEmail()
: -props = { firstName(string), passwordToken(string) }
-stringOfSetupPasswordEmail()
: -props = { firstName(string), passwordToken(string) }
- Job Requests
- Hosts side
-
stringOfJobAcceptedEmail()
-stringOfJobDeclinedEmail()
-stringOfCleanerJobCanceledEmail()
-stringOfJobStartedEmail()
-stringOfJobFinishedEmail()
-stringOfJobSummaryEmail()
-stringOfReportedProblemsEmail()
- Service Providers side -stringOfNewJobRequestEmail()
-stringOfJobNotAvailableEmail()
-stringOfHostJobCanceledEmail()
Bookings - Airbnb -
stringOfAirbnbNewBookingEmail()
- MyVR -stringOfMyVRNewBookingEmail()
-stringOfMyVRBookingChangedEmail()
-stringOfMyVRBookingCanceledEmail()
Invitations - Service Providers -
stringOfNewInvitationEmail()
-stringOfNewInvitationWithRequestEmail()
- Partner -stringOfNewPartnerInvitationEmail()
-stringOfExistingPartnerInvitationEmail()
- Company -stringOfVerifyCompanyDomainEmail()
-stringOfNewEmployeeInvitationEmail()
Badges - Loved -
stringOfLovedBadgeCompleteEmail()
- Experienced -stringOfExperiencedBadgeFirstEmail()
-stringOfExperiencedBadgeCompleteEmail()
- Checklist Champion -stringOfChecklistChampionBadgeCompleteEmail()
- Punctuality -stringOfPunctualityBadgeCompleteEmail()
- Fast Responder -stringOfFastResponderBadgeCompleteEmail()
Found Service Provider On Location -
stringOfServiceProviderFoundOnLocationEmail()
stringOfServiceProviderFoundOnLocationWithSubscriptionEmail()
Examples
import { stringOfResetPasswordEmail } from @properly/emails;
const props = {
firstName: 'Caroline',
passwordToken: 'https://app.getproperly.com/#/password/new?token=tokenId8&email=test@getproperly.com&behavior=changePassword'
};
const options = {
language: 'en',
currency: 'USD',
timeZone: 'America/Los_Angeles',
}
stringOfResetPasswordEmail(props, options);
18 days ago
19 days ago
19 days ago
24 days ago
2 months ago
3 months ago
3 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago