gaf-mobile

<div class="deposit scroll-container" fl-analytics-section="DepositFunds">  <div class="loading-container" ng-if="ctrl.loading"> <div class="loadingicon">Loading...</div> </div>  <header class="PageHeader"> <div class="section-inner"> <h1 class="PageHeader-title">Deposit Funds</h1> </div> </header>  <aside class="deposit-alert section-inner" ng-if="ctrl.confirmError && ctrl.deposit.type === 'paypal_reference'"> <div class="alert alert-error"> <span class="alert-title">Deposit Failed</span> <span class="alert-content">Unfortunately your attempt to deposit funds was unsuccessful.</span> <span class="alert-content">Please try again.</span> </div> </aside>  <aside class="deposit-alert section-inner" ng-if="ctrl.action === 'create_milestone' && !ctrl.success"> <div class="alert alert-danger"> <span class="alert-content">You do not have sufficient funds to create this milestone, please fill out your payment details below.</span> </div> </aside> <section ng-if="ctrl.start"> <form name="depositForm" ng-submit="ctrl.processDeposit(ctrl.deposit)"> <div class="SectionDetails"> <div class="section-inner"> <div class="SectionDetails-row" ng-if="!ctrl.hideAccountBalance"> <span class="SectionDetails-label"> Account Balance </span> <span class="SectionDetails-value"> <sup class="SectionDetails-currency">{{ctrl.userBalance.currency.sign || ctrl.deposit.currency.sign}}</sup> {{ctrl.userBalance.amount || 0}} <sub class="SectionDetails-currencyCode">{{ctrl.userBalance.currency.code || ctrl.deposit.currency.code}}</sub> </span> </div> <div class="SectionDetails-row deposit-creditCardList"> <h4 class="deposit-options-title">Select Payment Method</h4> <div class="FilterTabs"> <ul class="FilterTabs-list"> <li class="FilterTabs-item"> <a class="FilterTabs-link" fl-active-tab ng-click="ctrl.changeDepositMethod(ctrl.deposit, 'fln_billing')" tab="fln_billing" fl-analytics="ChangedPaymentMethod" fl-analytics-label="CreditCard"> <fl-svg class="FilterTabs-link-icon" src="images/deposit/credit-cards/cc-creditcards.svg" alt="Credit Card Icon"></fl-svg> </a> </li> <li class="FilterTabs-item"> <a class="FilterTabs-link" fl-active-tab ng-click="ctrl.changeDepositMethod(ctrl.deposit, 'paypal_reference')" tab="paypal_reference" fl-analytics="ChangedPaymentMethod" fl-analytics-label="Paypal"> <fl-svg class="FilterTabs-link-icon" src="images/deposit/paypal_logo.svg" alt="Credit Card Logo"></fl-svg> </a> </li> </ul> </div> </div> <div class="SectionDetails-row deposit-formContainer" ng-if="ctrl.hasSavedAccounts(ctrl.deposit.type)"> <h2 class="PaymentSummary-heading">Use Your Saved Accounts</h2> <ul class="PaymentSummary-list"> <li ng-repeat="method in ctrl.availablePaymentMethods"> <label for="{{method.token}}" ng-class="{'PaymentMethod--text-light PaymentMethod--cc': ctrl.deposit.type === 'fln_billing'}" ng-if="ctrl.deposit.type === method.deposit_method" class="PaymentMethod"> <span class="PaymentMethod-tick"> <input class="PaymentMethod-radio CustomRadio" name="payment-method" id="{{method.token}}" value="{{method.token}}" ng-model="ctrl.deposit.token" ng-click="ctrl.onPaymentMethodClick(method, ctrl.deposit)" type="radio"> <span></span> </span> <span ng-if="ctrl.deposit.type === 'fln_billing' && method.deposit_method === 'fln_billing'" class="PaymentMethod-icon" ng-switch="method.credit_card.card_type"> <fl-svg ng-switch-when="mastercard" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-mastercard.svg" alt="Deposit with mastercard"></fl-svg> <fl-svg ng-switch-when="visa" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa.svg" alt="Deposit with visa"></fl-svg> <fl-svg ng-switch-when="amex" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-amex.svg" alt="Deposit with amex"></fl-svg> <fl-svg ng-switch-when="jcb" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-jcb.svg" alt="Deposit with jcb"></fl-svg> <fl-svg ng-switch-when="visa-electron" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa-electron.svg" alt="Deposit with visa-electron"></fl-svg> <fl-svg ng-switch-when="delta" class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-delta.svg" alt="Deposit with delta"></fl-svg> </span> <span ng-if="ctrl.deposit.type === 'paypal_reference' && method.deposit_method === 'paypal_reference'" class="PaymentMethod-icon"> <fl-svg src="/images/deposit/paypal_logo.svg" alt="Deposit with Paypal"></fl-svg> </span> <div class="PaymentMethod-details"> <span ng-if="ctrl.deposit.type === 'fln_billing' && method.deposit_method === 'fln_billing'" class="PaymentMethod-title"> **** **** **** {{method.credit_card.credit_card_number.slice(-4)}} </span> <span class="PaymentMethod-desc"> {{method.currency.name}} ({{method.currency.code}}) </span> </div> </label> </li> <li> <label class="PaymentMethod PaymentMethod--simple" for="add-new"> <span class="PaymentMethod-tick"> <input class="PaymentMethod-radio CustomRadio" name="payment-method" id="add-new" value="new" ng-model="ctrl.deposit.token" ng-click="ctrl.exchangeRate=1" type="radio"> <span></span> </span> <div class="PaymentMethod-details"> <span class="PaymentMethod-desc"> <span ng-if="ctrl.deposit.type === 'fln_billing'" class="PaymentSummary-action-title">Use new credit card</span> <span ng-if="ctrl.deposit.type === 'paypal_reference'" class="PaymentSummary-action-title">Use new account</span> </span> </div> </label> </li> </ul> </div> <div class="SectionDetails-row"> <h2 class="PaymentSummary-heading">DEPOSIT FUNDS</h2> <div class="input-group"> <input type="number" id="deposit-amount" required name="amount" placeholder="Enter amount" ng-model="ctrl.deposit.amount" ng-change="ctrl.updateFee(ctrl.deposit, ctrl.feeConfigs[ctrl.deposit.type])" ng-disabled="ctrl.errors.currencyNotSupported" step="0.01" min="{{ctrl.feeConfig.min_amount}}" max="{{ctrl.feeConfig.max_amount}}" fl-analytics="ChangedAmount"> <span class="input-group-addon input-group-addon--select deposit-selectCurrency"> <select id="deposit-currency" name="currency" required ng-model="ctrl.deposit.currency" ng-options="c.code for c in ctrl.currencies | orderBy:'code' track by c.id" ng-change="ctrl.onCurrencyChange(ctrl.deposit, ctrl.feeConfigs)" fl-analytics="ChangedCurrency" fl-analytics-value="ctrl.deposit.currency.id"></select> </span> </div> <span ng-if="ctrl.exchangeRate !== 1 && ctrl.deposit.token !== 'new'" class="SectionDetails-label SectionDetails-label--note"> Your card will be charged in {{ctrl.paymentMethodCode}} (1.00 {{ctrl.deposit.currency.code}} = {{ctrl.exchangeRate.toFixed(5)}} {{ctrl.paymentMethodCode}}) </span> <aside ng-show="depositForm.amount.$touched || depositForm.$submitted" ng-messages="depositForm.amount.$error"> <span class="validation validation-error" ng-message="required"> <span class="icon-notification"> </span> Please enter an amount. </span> <span class="validation validation-error" ng-message="number"> <span class="icon-notification"> </span> Please enter a valid number. </span> <span class="validation validation-error" ng-message="min"> <span class="icon-notification"> </span> The minimum deposit amount is {{ctrl.deposit.currency.sign}}{{ctrl.feeConfig.min_amount}} {{ctrl.deposit.currency.code}}. </span> <span class="validation validation-error" ng-message="max"> <span class="icon-notification"> </span> The maximum deposit amount is {{ctrl.deposit.currency.sign}}{{ctrl.feeConfig.max_amount}} {{ctrl.deposit.currency.code}}. </span> </aside> <span class="validation validation-error" ng-if="ctrl.errors.currencyNotSupported"> <span class="icon-notification"> </span> {{ctrl.deposit.currency.code}} not supported. Please choose another currency. </span> <iframe id="iframe-payment-method-cc" ng-show="ctrl.deposit.type === 'fln_billing' && ctrl.deposit.token === 'new'" class="deposit-creditCardForm" ng-src="{{ctrl.iframe}}"></iframe> </div> </div> </div>  <section class="PaymentSummary"> <div class="section-inner"> <h2 class="PaymentSummary-heading">Payments Breakdown</h2> <div class="PaymentSummary-row"> <span class="PaymentSummary-label">Deposit Amount</span> <span class="PaymentSummary-value">{{ctrl.deposit.amount || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}</span> </div> <div class="PaymentSummary-row"> <span class="PaymentSummary-label">Deposit fee</span> <span class="PaymentSummary-value">{{ctrl.deposit.fee || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}</span> </div> <div class="PaymentSummary-row PaymentSummary-total"> <span class="PaymentSummary-label">Total amount</span> <span class="PaymentSummary-value">{{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}</span> </div> </div> </section> <section class="section-inner"> <aside ng-messages="ctrl.errors" class="deposit-error-message"> <span class="validation validation-error" ng-message="depositSetupFailure"> <span class="icon-notification"> </span> Unable to set up Paypal API. Please retry later. </span> <span class="validation validation-error" ng-message="unknownError"> <span class="icon-notification"> </span> {{ctrl.errors.unknownError}} </span> </aside> <button type="submit" ng-if="!ctrl.errors.currencyNotSupported && ctrl.deposit.type === 'fln_billing'" class="deposit-btn btn btn-primary" fl-analytics="DepositFunds" fl-analytics-subsection="cc" fl-analytics-label="Pay {{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}"> Pay {{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}} </button> <button type="submit" ng-if="!ctrl.errors.currencyNotSupported && ctrl.deposit.type === 'paypal_reference' && ctrl.deposit.amount > 0" class="deposit-btn btn btn-primary" fl-analytics="DepositFunds" fl-analytics-subsection="paypal" fl-analytics-label="Pay {{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}"> Pay {{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}} </button>  <aside class="deposit-alert" ng-if="ctrl.confirmError && ctrl.deposit.type === 'fln_billing'"> <div class="alert alert-error"> <span class="alert-title">Deposit Failed</span> <span class="alert-content">Unfortunately your attempt to deposit funds was unsuccessful.</span> <span class="alert-content">Please try again.</span> </div> </aside> <div class="deposit-gateway" ng-switch="ctrl.deposit.type">  <fl-svg ng-switch-when="paypal_reference" class="deposit-gateway-logo" src="/images/deposit/paypal_logo.svg" alt="Deposit with PayPal"></fl-svg>  <span class="deposit-creditCardList" ng-switch-when="fln_billing"> <h6 class="deposit-creditCardList-header"><strong> Accepted Cards </strong></h6> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa.svg" alt="Deposit with PayPal"></fl-svg> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-mastercard.svg" alt="Deposit with PayPal"></fl-svg> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-amex.svg" alt="Deposit with PayPal"></fl-svg> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-jcb.svg" alt="Deposit with PayPal"></fl-svg> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa-electron.svg" alt="Deposit with PayPal"></fl-svg> <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-delta.svg" alt="Deposit with PayPal"></fl-svg> </span> </div> <div class="deposit-security"> <img class="deposit-security-icon" src="/images/deposit/payment-encryption-lock@3x.png" alt="Secure encrypted payments"> <p class="deposit-security-desc">This is a secure 128 bit SSL encrypted payment.</p> </div> </section> </form> </section>  <section class="deposit-success section-inner" ng-if="ctrl.success"> <div class="deposit-success-header make-row make-row-responsive"> <div class="deposit-success-header-icon make-col"> <fl-svg class="deposit-success-tick flicon-tick-circled" src="/images/icons/flicon-tick-circled.svg"></fl-svg> </div> <div class="deposit-success-header-content make-col"> <h2 class="deposit-success-header-title">Deposit Complete!</h2> <span class="PaymentSummary-value">Successfully deposited <strong>{{(ctrl.deposit.amount + ctrl.deposit.fee) || 0 | currency:ctrl.deposit.currency.sign:2}} {{ctrl.deposit.currency.code}}. </strong></span> </div> </div> <button class="deposit-success-continue btn btn-secondary" ng-if="ctrl.urls.return.length > 0" ng-click="ctrl.goToReturnUrl()" fl-analytics="ReturnToUrl">Continue</button> <a class="deposit-success-continue btn btn-secondary" ng-if="ctrl.urls.return.length === 0" ng-click="ctrl.reload()" fl-analytics="ReturnToUrl">Continue</a> </section> </div>