npm package: @ikhlasdotcom/email-templates
Description: Ikhlas Email Templates
Latest version: 0.0.68

# README

## CNH Documentations
- https://airasia.atlassian.net/wiki/spaces/AASET/pages/337183033/CNH+API+Spec
- Postman Collection under `docs/Central Notification Hub.postman_collection.json`
- Handlebars CNH helpers https://airasia.atlassian.net/wiki/spaces/AASET/pages/2139553879/CNH+Template+Helpers

## Build Using
- [Maizzle](https://maizzle.com/)
- [TailwindCSS](https://tailwindcss.com/)
- [Handlebars](https://handlebarsjs.com/)

## Development

- yarn dev
- access localhost:3000

For different locale

- LOCALE=ms yarn dev
- access localhost:3000

### Building a template

#### RULES to building the template
- Use **table** for building the layout. **DON'T** use **flex** because it not supported
- For using an image **DON'T** use **SVG**
- Keep in mind, you are building **Handlebars** template. so, the compiled template will have [mustache template system](https://en.wikipedia.org/wiki/Mustache_(template_system)) for passing content(locale and data) that CNH supported.
- Use provided Handlebars [helpers](https://airasia.atlassian.net/wiki/spaces/AASET/pages/2139553879/CNH+Template+Helpers) from CNH for processing the content
- For responsive design can use class name prefix `xs` (max 425px) and `sm` (max 600px) for responsive breakpoint. see `tailwind.config.js`
```html
<!-- In desktop h1 have bold font and device less than sm have normal font -->
<h1 class="sm:font-normal font-bold">
  Hello world
<h1>
```

Steps to building the template

- Building a template can create another file in `src/templates/umrah_refund.html`.
- Variable in template can be used as `@{{fullName}}` and for locale `@{{locale.greeting}}`.
- Translations is stored in static API [Google Sheet](https://docs.google.com/spreadsheets/d/1_9r-0hcwNEIoBnQoI-dCYqWXX7NLL4MURinKpQW8myI/edit)
  - to integrate translations with template, make sure variable `locale_filename` in template file ([Front Matter](https://maizzle.com/docs/templates#front-matter)) is the same as `section` in Google Sheet
- Integrating test data can create a json file in `src/data/umrah_refund.json`.

### Sending the template
- CNH Doc https://airasia.atlassian.net/wiki/spaces/AASET/pages/1571618912/CNH+Send+Notification+API
- Example implementation [Umrah Booking Paid](https://gitlab.airasiatech.com/aaset/ikhlas/ikhlas-web-umrah/-/blob/master/lib/cnh/booking_paid_mailer.ts)

### Modify translations
- Update [Google Sheet](https://docs.google.com/spreadsheets/d/1_9r-0hcwNEIoBnQoI-dCYqWXX7NLL4MURinKpQW8myI/edit)
- Re-run job **deploy-dev** or **deploy-prd** in [CI](https://gitlab.airasiatech.com/aaset/ikhlas/ikhlas-email-templates/pipelines)


### Adding an image
Use ContentStack to attach an image
```html
<img
  src="https://images.contentstack.io/v3/assets/blt2a130c768c36b9df/blt4ef85c6c17c1a956/62ba4a83e218a20f88dda8cd/ikhlas-umrah-logo.png"
  alt="logo"
  width="160"
  height="25"
/>
```

## Commands

- `yarn build` compile template files
- `LOCALE=en yarn preview dimas@airasia.com umrah_booking_paid` preview registered template in CNH send into the email

### Required gcloud login commands
These commands required gcloud login with access/permission manage Key Management Service (KMS). Here's how to login in gcloud-cli
```
# login using Google Account
$ gcloud auth login
# login using service account file
$ gcloud auth activate-service-account --key-file service-accounts/kms-sa.json
```
Then set project id
```
$ gcloud config set project airasia-ikhlas-dev
```

- `yarn template:register:dev` Upload compiled files and translations into CNH server in DEV environment
- `yarn template:register:prd` Upload compiled files and translations into CNH server in PRD environment
- `./bin/kms dev|prd decrypt` To decrypt encrypted service-accounts file
- `./bin/kms dev|prd encrypt` To encrypt service account as encrypted file

## Production Checklist

- [pipelines](https://gitlab.airasiatech.com/aaset/ikhlas/ikhlas-email-templates/-/pipelines) for `deploy-prd` is completed
  - `deploy-prd` job is not printing failed template
- when running command `LOCALE=en yarn preview:prd dimas@airasia.com new_template_name` is received the email. also sender is from `no-reply@notification.ikhlas.com`

## Production Email Manual Trigger
- Use case: if customer entered a wrong email information.
- Make sure to change the template test data file with customer data from PRD. 
- To push email preview manually in PRD, can use this command and it will use `no-reply@notification.ikhlas.com`.
- `LOCALE=en yarn preview:prd {target_email} new_template_name`

## Publishing package
- `yarn publish` then put new version in prompt
- create new branch. i.e `git checkout -b prod/v0.0.11`
- `git push origin prod/v0.0.11 --tags`
- update `@ikhlasdotcom/email-templates` package in [ikhlas-web-admin](https://gitlab.com/airasia-superapp/delivery/ikhlas/ikhlas-web-admin)

## Pull Request Format ##
Whenever you want to create an MR, on the description part, select the "Default Template" that is available there. It will generate the template for your MR.

![Screenshot_2022-11-14_at_1.54.51_PM](/uploads/79c47e3a65a986905a71d32d0cfa21c2/Screenshot_2022-11-14_at_1.54.51_PM.png).


## Pull Request Title Format ##
[COMMIT KEYWORDS] [Jira card number(s)] Description

Example: [FIX] IKHLAS-869 Showing incorrect Islamic date in the app (earlier by 1 day)

Commit Keywords

* [FEAT] (new feature)
* [FIX] (bug fix)
* [DOCS] (changes to documentation)
* [STYLE] (formatting, missing semi colons, etc; no code change)
* [REFACTOR] (refactoring production code)
* [TEST] (adding missing tests, refactoring tests; no production code change)
* [CHORE] (updating grunt tasks etc; no production code change)
* [CLEAN] (removing dead code)
* [WIP] (work in progress for any FIX, FEAT, REFACTOR etc)
* [STAGING] (release version, Eg: 1.0-alpha+build.1)
* [PREPROD] (release version, Eg: 1.0-beta+build.1)
* [PROD] (release version, Eg: 1.0)


If that PR contains more than one commit messages, please try to keep "Description" relevant to those commit messages.<br />
If that PR is for more than one JIRA card, please use comma "," to separate the number. Example: [IKHLAS-849,IKHLAS-834].

For further info, you can check https://airasia.atlassian.net/wiki/spaces/AASET/pages/1988821047/Mobile+Code+Review+Guidelines