Overview

This library is for creating reusable, testable components and email templates using React.

Develop

Setup

1. Open a terminal
2. Clone git repository git clone [email protected]:GitProperly/properly-email-engine.git
3. Go into repository dir cd properly-email-engine
4. Install root dependencies npm install
5. Start storybook npm run storybook or npm 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 from emailComponents folder. This is the final result that will be returned.
  • translations
    • interpolated: Strings with proper variables. All the %s symbols in the original folder are replaced with the proper variables that are used for localization.
    • original: Original string files that are downloaded from the Onesky project.

Dependencies

• react-html-email
• react-intl
• check-prop-types

Adding a new email

1. Create a folder and create a new index.js and stories.js file in EmailComponents folder. If there's any components already created in components folder, use them. Or create your own component. Main style guide and variables are in the /styleGuide.js file.
2. Once you created email, import it from EmailStrings folder.
3. Create an test file in the same folder.
4. Add an export function to src/index.js file.
5. 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.

1. npm run download-strings to download all the language files from the Onesky project.
2. 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 or npm start to start storybook.
  2. Open the browser and go to localhost: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, select Strings > 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. Select Messages > Manual Messages > New Manual Messages.
  6. Select your channel to Email.
  7. Select Write your message section, and select import HTML email button.
  8. Paste the block of code that you copied on step 3.
  9. Select Send 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

1. 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
2. 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
3. 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

1. npm run major | minor | patch to update version and auto deploy storybook to stage environment.
2. 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.
3. If you didn't receive any error message, then hooray! Skull your beer! 🍺

Usage

1. Install npm package via npm: npm install @properly/emails
2. Import an email rendering function import { stringOfResetPasswordEmail } from @properly/emails
3. Send appropriate data when you execute a function. Props are mandatory, Options are optional.
4. 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 protected]&behavior=changePassword'
};
const options = {
	language: 'en',
	currency: 'USD',
	timeZone: 'America/Los_Angeles',
}
stringOfResetPasswordEmail(props, options);