approval-analytics-frontend

This is the front-end for the Underwriting Application's processing forms. Forward Financing's processing team in the Dominican Republic uses these forms to input applications that we receive from our partners.

What's new

Fetch Error Handling

A fetch promise does not reject on HTTP error statuses.

New logic:

Additions:

• New status constants (FAILURE, SUCCESS, CREATING)
• catch statement with all fetch
• New error reducer, filter all FAILURE responses
• New error object available in store
• Component Library StatusBar renders when error is present

| FETCH | FETCH | FETCH | |:------------------------------------------------:|:---------------------------------------:|-----------------------------------------| | PROMISE (RECEIVE) | PROMISE (RECEIVE) | NETWORK ERROR (RECEIVE) | | SERVER SUCCESS | SERVER ERROR | CATCH ERROR | | REDUCER FILTERS ON SUCCESS | THROW ERROR | ERROR REDUCER FILTERS ON FAILURE STATUS | | COMPONENT RENDERS | CATCH ERROR | COMPONENT + ERROR STATUS BAR RENDER | | _ | ERROR REDUCER FILTERS ON FAILURE STATUS | | | _ | COMPONENT + ERROR STATUS BAR RENDER | |

Dependencies

• Node 8.4.0

To manage the above, we need to use a package manager such as asdf

To get started with asdf, perform the following commands:

git clone https://github.com/asdf-vm/asdf.git ~/.asdf

# for bash users
echo '. $HOME/.asdf/asdf.sh' >> ~/.bash_profile
echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.bash_profile
source ~/.bash_profile

# for zsh users
echo '. $HOME/.asdf/asdf.sh' >> ~/.zshrc
echo '. $HOME/.asdf/completions/asdf.bash' >> ~/.zshrc
source ~/.zshrc

asdf plugin-add nodejs

asdf install nodejs 8.4.0
asdf local nodejs 8.4.0

• run npm install

Running the application

Run the app locally with npm start. The app will run on localhost:3002/short_form

Prerequisites: Be sure to have an underwriting user in both local auth and underwriting databases that have a matching api_key.

Locally, check your environment variables to find a PROCESSING user. env | grep PROCESSING

Run:

cd /path/to/auth && iex -S mix

Auth.Repo.get_by(Auth.User, email: "[email protected]")

Copy api_key field

• note that you will have to add the below tag to the head in the public/index.html file, to ensure you can authenticate locally
• ensure that you are changing the public/index.html file

<script type="text/javascript">
  window._t = "paste_api_key_field" ;
</script>

Run:

• underwriting

Use foreman start to ensure sidekiq starts

• sf_service

Use foreman start to ensure sidekiq starts

• funding

• auth

• banking Navigate to localhost:3002/short_form Check the partner dropdown is populated

In order to automate filling the short form, clone chrome extension delorean. Follow readme to install.

Notable Dependencies

This application is built using React 16 with Redux.

• To get more insight into the application install and enable redux-dev tools
• see configureStore.js to do this after you have installed the browser extension Styling is handled by the Bulma framework.

Testing

Unit Testing

The test suite for this app uses a combination of Facebook's Jest framework and AirBnB's Enzyme testing utilities.

Run the test suite with npm test.

Review line-by-line coverage in the LCOV report locally:

open ./coverage/lcov-report/index.html

Local QA

Repeatedly filling out the form on the first page of the app can be a PITA.

To speed up testing, Zach made a debugging branch, which hardcodes some valid form values into state.

You can add that to you branch by merging it in and then rebasing it out later: zc-debuggering

Deployment

This project is integrated into our Heroku continuous deployment pipeline.

To Production

Once your feature is successfully verified by the QA team, simply merge your feature branch into develop and merge develop into master.

To Staging

Upon opening up a Pull Request for your feature branch, a review app will be generated!

Open up Heroku and find out the name of your review app in our approval-analytics-frontend pipeline.

You can then access that review app by appending it to the underwriting short_form staging URL as a ?spa= param. For example if your review app name is ff-approval-analytics-s-pr-1234 , navigate to https://secure.staging.forwardfinancing.com/short_form?spa=ff-approval-analytics-s-pr-1234 to see your changes in action.