Promotional Codes

This MFE shows promotion codes that are associated with a customer. Promotion codes and campaign-information are delivered by an API which is accessed in a readonly manner.

# MFE Secret Deals

This MFE shows promotion codes that are associated with a customer. Promotion codes and campaign-information are delivered by an API which is accessed in a readonly manner.

This MFE is only about showing the codes, it is not about applying the codes.

Functional Input needed

• Source-market code like 'NL' or 'BE'
• Customer account ID
• Maximum number of promocodes that needs to be shown

Output delivered

Presentation of promotion codes, promotion conditions, an option to link to relevant deals and a copy-code feature.

Epics, Stories and documentation references

An overview of all the epics and stories related to the implementation of the MFE can be found at:\

• Jira epics and stories in confluence
• Generic (technical) information
• LIT MFE Boilerplate

Projects

The codebase is based upon the Tech-Enables LIT MFE-Boilerplate and can be found in GitLab at:\

• Secret Deals MFE in Source.tui

All commits up until 17 Feb. 2023 are synced into this MFE. The mock-server though isn't a pact.io but based upon MockTTP.

The codebase consists of the following project:

Frontend

The frontend contains html for the PromoCodes-page and an Error-page and currently works only with stub data or mock-server (local only) because access to the real API is still missing.

The frontend consist of:

• a service DayToExpireService that is responsible for calculating the days to expire in the countdown
• analytics events responsible for pushing data to the Google Tag Manager
• an error component containing the errorpage
• a 'No PromoCode' component that is shown when a customer doesn't have active promotioncodes
• a prerender component used to show a shadowed promocodes-page while loading

The frontend uses LIT, Typescript and Javascript.

Backend

The backend defines interfaces containing the contract/data-structure of the GraphQL data and should be used by the frontend. The interfaces can be found in the folder interfaces and they are identified by a prefix 'I' (as in IPromotions).

One Promtions-resolvers is responsible for delivering the Customers PromoCode and Campaign data. This resolver maps the API data to the Interfaces.

See the README.md file for more information on how to add, change and generate GraphQL.

The backend uses GraphQL and Typescript.

Mock server

The Mock server contains endpoints for delivering valid PromoCodes and Campaign-information. A StubGenerator is used to generate the stub data for these endpoints. This generator also contains mock CustomerAccountIds like FourValidCodesCustomerAccountId that needs to be used to match the requests to the stub-endpoints.

The Mock server can only be used locally and is build using MockTTP.

Tests

The StubGenerator can be used to generate stub data needed for testing.

Local development

> All npm commands need to run from the root of the Codebase.

Note to Jetbrains Rider users: > Rider doesn't handle the started node-instances very well. Use Rider as your development tool and use Visual Studio Code to start and stop the instances.

While .eslint and .husky are garding syntax, commits will be rejected because of this. Rider can help you applying the syntax rules upfront. Apply following instructions to activate this:

• https://www.jetbrains.com/help/rider/eslint.html#ws_js_eslint_activate

First time installation, installing packages

Packages needs to be retrieved and installed to be able to run the MFE or to start development.

Execute following command to install packages:

npm ci

Startup the MFE

• Setup environment variables

Environment variables used by the projects need to be set to the local environment, therefor example file .env.example is copied to a new .env file which is used by the projects.\

• Specify mock-server

To attach the mock-server the variable of the BFF API called PROMOCODE_API need to be set to to localhost with the port of the mock-server (i.e. the port specified in the variable MOCK_SERVER_PORT) like for example PROMOCODE_API=http://localhost:7002/

• Create .env file

Execute following command to create a new environment file:

cp .env.example .env

• Run the projects

Execute following command from the root of the MFE to startup Frontend, Backend and Mock-server:

npm run dev

# or start them seperately
npm run dev:frontend
npm run dev:backend
npm run dev:mock

Access the MFE

Use following links to test:

> Adapt the port-numbers in the .env variables (or links) accordingly.

• Frontend: http://localhost:8080/index.html
• Backend Graphql interface: http://localhost:7000/
• Mock server (Promotion codes): Example stub Promotion codes
• Mock server (Campaigns): Example stub Campaigns
• Manifest: http://localhost:8080/openmfe/manifest.yml
• Documentation: http://localhost:8080/openmfe/documentation.md

Writing Mocks~~~~

Please configure you mock server in ./mock-server/src/dev.ts

Language Captions (l10n)

1. Execute following command to generate/ update the *.po files:

npm run l10n -w frontend

2. Then add or change the captions in the *.po files (for all languages)
3. re-run the command again

Manifest

Validate changes to the manifest file by executing:

npx openmfe-validate http://localhost:8080/openmfe/manifest.yml

The manifest file has already been registered at the web.tui website.

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://d14oqvuh8wdh8k.cloudfront.net/main.js" defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.

<tui-promocodes
	theme="VALUE"
	locale="VALUE"
	dataEnvironment="VALUE"
	dataTenant="VALUE"
	sourcemarket="VALUE"
	customerAccountId="VALUE"
	maxItems="VALUE">
</tui-promocodes>

Examples

• Basic example with default parameters and stub data

  <tui-promocodes
  	theme="tui"
  	locale="nl-NL"
  	dataEnvironment="stub"
  	dataTenant="wr"
  	sourcemarket="NL"
  	brands="TUI_NL"
  	customeraccountid=""
  	maxitems="4">
  </tui-promocodes>

Attributes

This microfrontend accepts the following attributes: