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
• TailwindCSS
• Handlebars

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 for passing content(locale and data) that CNH supported.
• Use provided Handlebars 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

<!-- 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
  • to integrate translations with template, make sure variable locale_filename in template file (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

Modify translations

• Update Google Sheet
• Re-run job deploy-dev or deploy-prd in CI

Adding an image

Use ContentStack to attach an image

<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 [email protected] 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 for deploy-prd is completed
  • deploy-prd job is not printing failed template
• when running command LOCALE=en yarn preview:prd [email protected] new_template_name is received the email. also sender is from [email protected]

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 [email protected].
• 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

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.

.

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. 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