gaf-mobile
Version:
GAF mobile Web site
129 lines (118 loc) • 8.27 kB
HTML
<div class="deposit scroll-container" fl-analytics-section="DepositFundsWebview">
<!-- Loading state -->
<div class="loading-container" ng-if="ctrl.loading">
<div class="loadingicon">Loading...</div>
</div>
<!-- Deposit Failure Message -->
<aside class="deposit-alert section-inner" ng-if="ctrl.confirmError">
<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>
<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">
<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">
<h2 class="PaymentSummary-heading">DEPOSIT FUNDS</h2>
<div class="input-group">
<input type="number" required name="amount" placeholder="Enter amount" ng-model="ctrl.deposit.amount" ng-change="ctrl.updateFee(ctrl.deposit, ctrl.feeConfigs['paypal_reference'])" 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 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.updateFee(ctrl.deposit, ctrl.feeConfigs['paypal_reference'])"
fl-analytics="ChangedCurrency" fl-analytics-value="ctrl.deposit.currency.id"></select>
</span>
</div>
<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>
</div>
</div>
</div>
<!-- Payment Summary -->
<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.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>
<div class="deposit-gateway">
<fl-svg class="deposit-gateway-logo" src="/images/deposit/paypal_logo.svg" alt="Deposit with PayPal"></fl-svg>
</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>
<!-- Deposit Success -->
<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>
<p> Click <strong> DONE </strong> to close the view </p>
</span>
</div>
</div>
</section>
</div>