client-ui/source/verify/income/automatic.html

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

<div class="col-sm-12 text-center" ng-init="_ctrl = incomeSummaryController; _ctrl.init()">
    <div class="row">
        <h3 class="no-space">Income Verification</h3>
       
        <!--no status-->
        <div ng-if="!_ctrl.currentLoan.incomeSummary.status" class="text-center">
            <br>
            <i class="fa fa-spinner fa-pulse fa-4x"></i>
        </div>

        <!--if auto refresh fails or reaches max retries-->
        <div class="modal show col-xs-8 col-xs-offset-2" ng-show="_ctrl.refreshLoanError">
            <p class="modal-body bg-danger header-alert">
                {{_ctrl.refreshLoanError}}
                <br/><br/>
                <a href="" ng-click="_ctrl.reloadState()">Refresh Page</a>
            </p>
        </div>

        <!--There was a successful Talx hit-->
        <div ng-if="!_ctrl.showAddMoreIncome && _ctrl.talxHit()">
            <h6>
                We have electronically verified the following <br>annual income from your employer to be approximately:
            </h6><br>
            <div class="col-xs-offset-2 col-xs-8 col-sm-offset-4 col-sm-4">
                <div class="panel panel-default">
                    <h5 class="large-blue-text">{{_ctrl.currentLoan.incomeSummary.providers.theWorkNumber.amount| loanAmount}}</h5>
                </div>
            </div>
            <div class="col-xs-12">
                <a class="btn btn-success large-btn" id="usethis" ng-click="_ctrl.includeProvider('theWorkNumber')"
                   ladda="_ctrl.workingIncludeProvider" data-style="expand-left">
                    Use this amount
                </a>
                <a class="btn btn-success large-btn" id="dontuse" ladda="_ctrl.workingExcludeProvider" data-style="expand-left"
                   ng-click="_ctrl.excludeProvider('theWorkNumber', 'talxSkip')">
                    Do not use
                </a>
            </div>
        </div>
        
        <!--There was NOT a successful Talx hit-->
        <div ng-if="_ctrl.currentLoan.incomeSummary.status && !_ctrl.talxHit()">
            <h6>
                We attempted to automatically verify your annual income but were unsuccessful
            </h6>
            <div class="col-xs-12">
                <a class="btn btn-success large-btn" ui-sref="loanApplication.verify.income.choose" data-style="expand-left">
                    Continue
                </a>
            </div>
        </div>

        <div class="col-xs-12" ng-if="_ctrl.showAddMoreIncome">
            <div class="row">
                <h5>Thank you!</h5>
                <h5>We have verified {{_ctrl.currentLoan.incomeSummary.verified.annualAmount| loanAmount}} of your income.</h5><br>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="box box-border-top box-border-sides box-border-bottom">
                            <h4 class="no-space">Add more income?</h4>
                            <button class="btn btn-success large-btn" id="addMore" ng-click="_ctrl.setStatusGoNext('talxSkip')"
                                    ladda="_ctrl.workingSetStatusGoNext" data-style="expand-left">
                                Yes
                            </button>
                            <button class="btn btn-success large-btn" id="dontAdd" ng-click="_ctrl.setVerified()"
                                    ladda="_ctrl.workingDontAddMore" data-style="expand-left">
                                No
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>