client-ui
Version:
Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront
168 lines (153 loc) • 10.5 kB
HTML
<div class="container-fluid">
<div class="col-md-10 col-md-offset-1 text-center" ng-init="_ctrl = incomeSummaryController; _ctrl.init()">
<h3 class="no-space">Verify Income Electronically</h3><br>
<div class="row">
<div class="row box-border-top box box-border-sides box-border-bottom">
<div ng-if="!_ctrl.currentLoan.incomeSummary.providers.decisionLogic.source.length && !_ctrl.bankLoginError" ng-include="'verify/income/decision-logic-explanation.html'">
</div>
<form name="_ctrl.bankNameSearch"
class="form-horizontal text-left"
ng-if="!_ctrl.currentLoan.incomeSummary.providers.decisionLogic.source.length && _ctrl.clientBank === null && !_ctrl.bankLoginError"
xt-form
role="form"
focus-error="true"
ng-submit="_ctrl.submitBankName()"
novalidate>
<div class="row">
<div class="form-group col-sm-10"
ng-class="{'has-error': _ctrl.bankNameSearch.bankName.$invalid && _ctrl.bankNameSearch.$submitted}">
<h5 class="col-sm-6 text-center" style="margin-top: 0; line-height: 1.6;">Find your bank:</h5>
<div class="col-sm-6">
<input type="text"
autofocus
ng-model="_ctrl.searchedBankName"
class="form-control"
id="bankName"
name="bankName"
placeholder="Bank Name"
pattern="([A-Za-z\-\ \.]{3,})"
required
xt-validation-tooltip
msg-required="Please enter your bank name"
msg-pattern="Please enter at least 3 non-numeric characters to search" />
</div>
</div>
<div class="form-group col-sm-2 text-center">
<button class="btn btn-success"
type="submit"
ng-disabled="_ctrl.bankNameSearch.$invalid"
ladda="_ctrl.working"
data-style="expand-left">Search</button>
</div>
</div>
</form>
<div class="bank-search-results" ng-if="_ctrl.bankSearchResults !== null && !_ctrl.bankLoginError && !_ctrl.currentLoan.incomeSummary.providers.decisionLogic.source.length">
<div>
<h5 ng-if="!_ctrl.bankLoginIframeSrc">Please select your bank from the list:</h5>
<a ng-repeat="bank in _ctrl.bankSearchResults" href="" class="btn btn-warning"
ng-click="_ctrl.requestBankLogin(bank);" ng-hide="_ctrl.clientBank !== null && _ctrl.clientBank.ContentServiceId !== bank.ContentServiceId">
{{bank.ContentServiceDisplayName}}
</a>
<a href="" class="btn btn-warning col-sm-offset-1" ng-click="_ctrl.resetBankChoice()" ng-show="_ctrl.clientBank !== null">Not your bank?</a>
<div class="col-xs-10 col-xs-offset-1" ng-if="_ctrl.bankSearchResults.length === 0">
<p class="text-danger">
Whoops! We don't find any bank name matching your search.
</p>
<p>
Please double check the spelling of your bank name. You don't need to type the whole name, but try at least 4 letters.
</p>
</div>
</div>
</div>
<iframe id="decisionLogicBankLoginIframe" ng-src="{{_ctrl.bankLoginIframeSrc}}" ng-if="_ctrl.bankLoginIframeSrc" class="col-xs-10 col-xs-offset-1" height="480px" frameborder=0 ></iframe>
<div class="col-xs-10 col-xs-offset-1" ng-if="_ctrl.bankLoginError || _ctrl.yodleeFailReason">
<p>
<br/>
Last login result:
<em class="text-danger">{{_ctrl.bankLoginError || _ctrl.yodleeFailReason}}</em>
</p>
<br/>
<p>You may try to log in again {{_ctrl.bankLoginError ? 'later ' : ''}} or continue your loan application by uploading documents to verify your income.</p>
<div>
<a class="btn btn-success large-btn" ng-click="_ctrl.setStatusGoNext('choseManual', 'loanApplication.verify.income.manual')"
ladda="_ctrl.workingUpdateStatus" data-style="expand-left">Upload Documents</a>
</div>
</div>
<!--There was a successful Decision Logic hit-->
<div ng-if="_ctrl.currentLoan.incomeSummary.providers.decisionLogic.source.length">
<div ng-if="!_ctrl.showAddMoreIncome">
<div class="col-xs-12">
<div class="row text-left">
<h5>
Great news! We found at least one source of direct deposit income in your bank account.
</h5>
<p>
Check the box next to each deposit listed below that reflects your approximate income.
</p>
<p>
Please do not include household income (i.e. Income from Parents, Spouse, etc.). If the sources or amounts are incorrect, just click the Upload Documents button to manually verify your income.
</p>
</div>
</div>
<div ng-repeat="source in _ctrl.currentLoan.incomeSummary.providers.decisionLogic.source" ng-init="sourceIndex = $index" class="col-xs-12 text-left" style="margin-top: .5em;">
<label class="checkbox-label">
<input
type="checkbox"
name="incomeSummarySource"
data-toggle="checkbox"
ng-model="source.include"
ng-disabled="_ctrl.working"
ng-change="_ctrl.handleSourceChange(_ctrl.currentLoan.incomeSummary.providers.decisionLogic.provider, sourceIndex)">
<strong style="font-size: 110%;">{{source.avgPeriodicAmount| statedIncome}} {{source.payInterval.split('|')[1].toLowerCase()}} from <span class="text-nowrap">"{{source.provider}}"</strong></span> <span class="text-nowrap">(approx. {{source.amount| statedIncome}}/year gross)</span>
</label>
</div>
</div>
<div class="col-xs-offset-2 col-xs-8 col-sm-offset-4 col-sm-4">
<br>
<div class="panel panel-default">
<h5 class="large-blue-text">{{_ctrl.currentLoan.incomeSummary.providers.decisionLogic.amount| loanAmount}}</h5>
</div>
</div>
<div class="col-xs-12" ng-if="!_ctrl.showAddMoreIncome">
<div class="row">
<button class="btn btn-success large-btn" id="usethis" ng-click="_ctrl.includeProvider('decisionLogic')"
ng-disabled="_ctrl.currentLoan.incomeSummary.providers.decisionLogic.amount === 0 || _ctrl.working"
ladda="_ctrl.workingIncludeProvider" data-style="expand-left">
Use this amount
</button>
<button class="btn btn-success large-btn" ladda="incomeSummaryController.workingExcludeProvider" data-style="expand-left" ng-click="_ctrl.excludeProvider('decisionLogic', 'choseManual')" >
Upload Documents
</button>
<br><br>
<div class="alert alert-warning">
<small>
<u>Note</u>: By checking the box next to each income source above and clicking [Use this amount],
you acknowledge and affirm that the income amount calculated is a reasonable approximation of your actual income from each source.
</small>
</div>
</div>
</div>
</div>
<div class="col-xs-12" ng-if="_ctrl.showAddMoreIncome">
<div class="row">
<h5>{{_ctrl.currentLoan.incomeSummary.verified.annualAmount| loanAmount}} of income has been added</h5>
<h4>Add more income?</h4>
<button class="btn btn-success large-btn" ng-click="_ctrl.setStatusGoNext('choseManual', 'loanApplication.verify.income.manual')">
Yes
</button>
<button class="btn btn-success large-btn" ng-click="_ctrl.setVerified()">
No
</button>
</div>
</div>
</div>
<div class="col-xs-12" ng-if="!_ctrl.showAddMoreIncome && !_ctrl.currentLoan.incomeSummary.providers.decisionLogic.source.length && !(_ctrl.bankLoginError || _ctrl.yodleeFailReason)">
(Never mind – I want to
<a href="" ng-click="_ctrl.setStatusGoNext('choseManual', 'loanApplication.verify.income.manual')" >
upload documents
</a>
instead.)
</div>
</div>
</div>
</div>