client-ui
Version:
Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront
118 lines (115 loc) • 7.2 kB
HTML
<div ng-init="_ctrl = makePaymentController;
_ctrl.init();">
<div class="row">
<div class="col-sm-12">
<h2>Make a payment</h2>
<p>
If you would like to make an early payment on your loan, enter the amount you would like to pay off
(you can pay off anything from a few dollars to your entire balance).
Your payment will be withdrawn from the bank account you have on file with us on the next business day.
</p>
<p>
We’re here to help you take control of your money — so we don’t charge any fees for making additional payments on your loan.
</p>
<div class="collapse-header box-border-sides box-border-top">
<h4>Bank Account Details</h4>
</div>
<div class="collapse-body box-border-sides box-border-bottom">
<form name="_ctrl.makePaymentForm" class="form-horizontal"
xt-form role="form" focus-error="true" novalidate>
<div class="make-payment-form">
<div class="form-group">
<label class="col-sm-4">Account Number</label>
<div class="col-sm-8 text-left">
<label ng-bind="'************' + _ctrl.servicingAccount.last4"></label>
</div>
</div>
<div class="form-group">
<label class="col-sm-4">Routing Number</label>
<div class="col-sm-8 text-left">
<label ng-bind="_ctrl.servicingAccount.routingNo"></label>
</div>
</div>
<div ng-if="!_ctrl.payoff.amount" class="text-center">
<i class="fa fa-spinner fa-pulse fa-4x"></i>
</div>
<div class="form-group" ng-show="_ctrl.payoff.validUntil">
<label class="col-sm-4">Payoff Amount</label>
<div class="col-sm-8 text-left">
<label ng-bind="_ctrl.payoff.amount | currency"> </label>
<label>(Valid Until {{_ctrl.payoff.validUntil| date: 'yyyy-MM-dd'}})</label>
</div>
</div>
<div class="about-us-header" ng-hide="_ctrl.successMessage">
<div class="form-group">
<label class="col-sm-4">Payment Date</label>
<div class="col-sm-8 paymentDate">
<input class="input-small customDatePicker hidden-xs"
type="text"
show-weeks="false"
min="_ctrl.userInput.date"
ng-model="_ctrl.userInput.date"
date-disabled="_ctrl.isDisabledDate(date)"
data-datepicker="datepicker"
ng-required="true">
<div class="hidden-lg hidden-md hidden-sm">
<select class="form-control"
ng-model="_ctrl.userInput.date"
ng-options="date as (date | date : 'fullDate') for date in _ctrl.validDates">
<option value="" disabled selected>Please select a payment date</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4">Payment Amount</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number"
ng-model="_ctrl.userInput.amount"
maxlength="15"
min="1"
max="{{_ctrl.payoff.amount}}"
class="form-control"
name="amount"
required
msg-required="Please enter an amount"
msg-min="Please enter Payment Amount greater than or equal to $1.00"
msg-max="Please enter an amount less than your existing balance of {{_ctrl.payoff.amount| currency}}"
xt-validation-tooltip/>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<br>
<div class="alert alert-danger" ng-if="_ctrl.errorMessage" ng-bind="_ctrl.errorMessage" ng-hide="_ctrl.successMessage">
</div>
<div class="alert alert-success" ng-if="_ctrl.successMessage">
Successfully scheduled a payment of {{_ctrl.submitted.amount| currency}} from your account on {{_ctrl.submitted.date| date: 'MM/dd/yyyy' }}
</div>
</div>
</div>
<div class="form-group" ng-hide="_ctrl.successMessage">
<div class="col-sm-12 text-center">
<button class="btn btn-success large-btn"
ladda="_ctrl.working"
data-style="expand-left"
ng-confirm-payment
ng-disabled="_ctrl.makePaymentForm.$invalid"
ng-confirm-message="Are you sure you want to make an additional payment of ${{_ctrl.userInput.amount}} on your loan on {{_ctrl.userInput.date | date: 'MM-dd-yyyy'}} ?"
makepaymentfn="_ctrl.makePayment()"
amount="_ctrl.userInput.amount"
item="item">Make Payment
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script> config.enableBootstrapJsElements();</script>