fintech-mf

Fintech MF UI

Contains Fintech related pages like seller and buyer billing.

Owners

• [e-mail]

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