UNPKG

client-ui

Version:

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

132 lines 10.6 kB
<div class="text-center" ng-init="_ctrl = debitController; _ctrl.init()"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <h2>How would you like to receive your money?</h2> <div ng-show="_ctrl.fundingAccount.type !== 'debit' && !_ctrl.editBankInfo"> <h6 class="text-left">By using your Debit Card, we might be able to deliver your money in minutes! Please note that not all banks participate in the network. If you select Debit Card and we are unable to process it immediately, we'll let you know, and default to using your bank account information already provided. </h6> <br> <div class="row" equal-height-columns> <div class="col-md-6 text-left" style="margin-bottom: 1.5em;"> <div class="text-center about-us-header box-border-sides box-border-top"> <h3>By using your Debit Card:</h3> </div> <div class="box box-border-sides equal-height"> <h5 class="text-center ">Coming Soon !</h5> <h6 style="color: #ccc;">If your card is issued through a participating bank, you can receive your money in minutes! We won't know until your card number is entered, and if for some reason we are unable to process using your Debit Card we'll default to using the bank account information already provided.</h6> </div> <div class="text-center box-border-sides box-border-bottom"> <a class="btn btn-success large-btn" ng-click="_ctrl.editBank()" id="useDebit" disabled>Use Debit</a> </div> </div> <div class="col-md-6 text-left"> <div class="text-center about-us-header box-border-sides box-border-top"> <h3>By using your Bank Account:</h3> </div> <div class="box box-border-sides equal-height"> <h6>If you select this method, we’ll transfer your money using Automated Clearing House (ACH), and your money should be in your account within 1-3 business days. </h6> </div> <div class="text-center box-border-sides box-border-bottom"> <a ui-sref="loanApplication.loanOverview" class="btn btn-success large-btn" id="useACH">Use Bank</a> </div> </div> </div> </div> <div class="container-fluid" ng-if="_ctrl.fundingAccount.type === 'debit'" ng-hide="_ctrl.editBankInfo"> <div class="row-fluid"> <p style="padding-top: 20px;">All set! Your debit card has been verified.</p> <h5> **** **** **** {{_ctrl.fundingAccount.last4}} <a href="" class="btn btn-xs btn-warning" ng-click="_ctrl.editBank()">EDIT CARD</a> </h5> </div> <a class="btn btn-success large-btn" ng-click="_ctrl.goToNextStep()"> Continue Loan</a> </div> <div id="debitForm"> <form id="clientDebitInfo" class="form-horizontal" name="updateBankInfoForm" ng-submit="_ctrl.submitBankInfo()" xt-form novalidate role="form" focus-error="true"> <div ng-show="_ctrl.editBankInfo" class="container-fluid"> <div> <p>If you would like to receive your money today, you'll need to provide us with your debit card information. On the off chance that we are unable to verify your card, you can expect money to be distributed in your bank account within 1-3 business days.</p> <hr> </div> <div class="form-group" ng-class="{'has-error': updateBankInfoForm.debitCardholderName.$invalid && updateBankInfoForm.$submitted}"> <label class="col-md-3 control-label" for="debitCardholderName">Cardholder Name:</label> <div class="col-md-9"> <input id="debitCardholderName" name="debitCardholderName" type="text" required class="form-control" ng-model="_ctrl.debitAccount.cardholderName" placeholder="First Name Last Name" xt-validation-tooltip msg-required="Cardholder Name cannot be blank" /> </div> </div> <div class="form-group" ng-class="{'has-error': (updateBankInfoForm.debitCardNumber.$invalid || _ctrl.cardResponse.cardNumber.failed) && updateBankInfoForm.$submitted}"> <label class="col-md-3 control-label" for="debitCardNumber">Debit Card Number:</label> <div class="col-md-9"> <div class="input-group"> <a rel="popover" data-img="images/DebitCard2.svg" class="input-group-addon btn"> <span class="primary-tooltip" data-toggle="tooltip">?</span> </a> <input id="debitCardNumber" name="debitCardNumber" type="tel" required ng-minlength="16" ng-maxlength="16" class="form-control" ng-model="_ctrl.debitAccount.accountNo" placeholder="4444 4444 4444 4444" xt-validation-tooltip msg-required="Card number is required" validate-card-bin msg-validatecardbin="This card is not eligible for fast funding." /> </div> </div> </div> <div class="form-group" ng-class="{'has-error': (updateBankInfoForm.year.$invalid || _ctrl.cardResponse.expired.failed) && updateBankInfoForm.$submitted}"> <label class="col-md-3 control-label">Expiration:</label> <div class="col-md-9"> <div class="row"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">Month</span> <select name="month" id="month" class="form-control" ng-model="_ctrl.monthChosen" ng-options="month for month in config.months" required xt-validation-tooltip msg-required="Choose card expiration month"> <option value="" selected="" disabled="">Select</option> </select> </div> </div> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">Year</span> <select name="year" id="year" class="form-control" ng-model="_ctrl.yearChosen" ng-options="year for year in config.cardExpirationYears" required xt-validation-tooltip msg-required="Choose card expiration year"> <option value="" selected="" disabled="">Select</option> </select> </div> </div> </div> </div> </div> <div class="form-group" ng-class="{'has-error': (updateBankInfoForm.debitCardCVV.$invalid || _ctrl.cardResponse.cvv.failed) && updateBankInfoForm.$submitted}"> <label class="col-md-3 control-label" for="debitCardCVV">Card CVV:</label> <div class="col-md-3"> <div class="input-group"> <a rel="popover" data-img="images/DebitCard4.svg" class="input-group-addon btn"> <span class="primary-tooltip" data-toggle="tooltip">?</span> </a> <input id="debitCardCVV" name="debitCardCVV" type="tel" required ng-minlength="3" ng-maxlength="3" class="form-control" ng-model="_ctrl.debitAccount.cvv" placeholder="123" xt-validation-tooltip msg-required="3-digit Card Verification Value (CVV) is required" /> </div> </div> </div> <div class="form-group text-center"> <button id="submit" class="btn btn-success large-btn" type="submit" ladda="_ctrl.working" data-style="expand-left" ng-disabled="updateBankInfoForm.$invalid"> Submit </button> <a href="" ng-click="_ctrl.fundingAccount.type !== 'debit' ? _ctrl.goToNextStep() : _ctrl.cancelEditBank();" class="btn"> <span class="text-danger">Cancel</span> </a> </div> </div> </form> <div class="col-xs-12" ng-if="_ctrl.cardResponseError"> <div class="alert alert-danger"> <p ng-repeat="(key, value) in _ctrl.cardResponse" ng-show="value.failed">{{value.message}}</p> <p>You can try another card or <a href="" ng-click="_ctrl.goToNextStep()">go on to the next step</a>.</p> <p ng-if="_ctrl.fundingAccount"> <span ng-if="_ctrl.fundingAccount.type !== 'debit'">You are still on track to receive your money in 1-3 business days using the bank account</span> <span ng-if="_ctrl.fundingAccount.type === 'debit'">We will simply deposit your money using the debit card</span> already on file! </p> </div> </div> <div class="col-xs-12 alert alert-danger" ng-if="_ctrl.loanSuspended"> <p>Unfortunately, your loan application has been suspended. Please <a href="talk-to-us.html">contact us</a> right away to get things sorted out!</p> </div> </div> </div> </div> </div>