Fintech MF UI

Contains Fintech related pages like seller and buyer billing.

Owners

• [email protected]

Technology Stack

• ReactJS ( FrontEnd Library )
• Redux ( Application State Container )
• NPM ( Package Manager )

Run under a host app locally

• Make sure to use node version 16.14

• Go to the command line/git bash of your workspace and download the repository.

  • git clone https://<freightos_user_name>@bitbucket.org/freightos/fintech-mf.git

• Move into the directory and run npm install, then start it by running npm run start

• In the host APP inject the entry file in a header script either on demand(recommended) or statically,

  • <script src="http://localhost:3004/paymentMfEntry.js"/>

• Make sure you have the same version of react, react-dom, react-router-dom and add them in webpack config file under the shared modules of the module federation plug in.

• Follow the Module federation load component approach to extract the component from the entry file to load it

  • check https://webpack.js.org/concepts/module-federation/
  • where module = './App' and scope = 'fintechMf'
  • pass the proper configs according to the configs table below

• In order for the MF to handle the routes:

  • include the main fintech-mf routes in the host app
  • navigate to them to render the micro-front(prev step)
  • make sure to pass the baseUrl of routes to the MF so that it append them to its routes paths

Run under a host app

• Go through the same steps of running it locally and skip point 2,3
• Regarding the entry file path
  • production path: https://storage.googleapis.com/festatic-production/microfronts/fintech-mf/latest/fintechMfEntry.js
  • testing path: https://storage.googleapis.com/festatic/microfronts/fintech-mf/latest/fintechMfEntry.js

Deployment

• Merging to dev pipeline will handle building and uploading the build files to the production cloud storage.
• Merging to master pipeline will handle building and uploading the build files to the test cloud storage.
• Make sure to pass the proper configs and add the new routes from the host app to handle the changes done in the MF.

Eslint:

• Download “ESLint” extension and make sure to enable it.
• You can find all eslint rules configured in ".eslintrc” file.

configs

| Field | Type | Required | Default value and Description
|------------------------------------------|--------------|--------------|-------------------------------------------------------------------------------------------------------------------------|
| httpClientConfigs.httpClientInstance | axios object | no | if not passed by default it will use webcargo http client provider, this is to handle authorization from the host app | | httpClientConfigs.baseUrl | string | no | baseUrl for the API calls |
| httpClientInstance.isCallingGateway | boolean | no | true by default it will call the billing service directly if passed as false |
| routerProps.baseUrl | string | no | baseUrl that is appended to the fintech MF routes so that the MF can handle them ex: '/ebookings/' |
| routerProps.hashType | string | no | in-case the host is using hash route pass the hashType, ex: 'noslash' |

configs - Seller billing page

| Field | Type | Required | Default value and Description |
|------------------------------------------|--------------|--------------|-------------------------------------------------------------------------------------------------------------------------| | vendorId | string | depends | if you are calling the billing service directly its required |

configs - Buyer billing page

| Field | Type | Required | Default value and Description |
|------------------------------------------|--------------|--------------|-------------------------------------------------------------------------------------------------------------------------| | customerId | string | depends | if you are calling the billing service directly its required |
| currency | string | yes | the buyer currency |
| isWalletEnabled | boolean | no | if the user has wallet display the balance banner |
| balanceBannerConfigs | object | yes | check payment component repo | | balanceId | string | depends | required for portal when requesting from billing service directly |