cobuild-angular-stack/modules/coupleAccount/views/auth.pay.fixedprice.html

Base stack angular sass jade gulp

<!-- Bar -->
    <div>

        <header class="header-checkout-user">

            <div class="section-main-tools row">
                <div class="col-md-12" style="padding: 0px">
                    <button type="button" class="btn col-sm-6 col-md-6 btn-active" ng-disable="true">
                        <div></div>
                        1. {{'order' | translate}}
                    </button>
                    <button type="button" class="btn col-sm-6 col-md-6 btn-default" ng-disable="true">
                        <div></div>
                        2. {{'confirmation' | translate}}
                    </button>
                </div>
            </div>
        </header>
    </div>
    <!-- Form -->
    <div class="row checkout-payment">
        <div class="col-md-12">
            <div class="text-center">
                <div class="header-gray">{{'payment-detail' | translate}}</div>
            </div>
            <form name="form_pay" ng-submit="form_pay.$valid && ccCtrl.pay()">
                <div class="body-checkout-user">
                    <div class="text-center pay-methods">
                      <div class="form-group">
                          <div class="radio">
                              <input id="pay-method-paypal" type="radio" ng-model="paymentInfo.method" value="paypal">
                              <label for="pay-method-paypal">
                                  <div></div>
                              </label>
                              <label for="pay-method-paypal">
                                  <img src="img/paypal.png">
                                  <p>PayPal</p>
                              </label>
                          </div>
                      </div>
                      <div class="form-group">
                          <div class="radio">
                              <input id="pay-method-cc" type="radio" ng-model="paymentInfo.method" value="cc">
                              <label for="pay-method-cc">
                                  <div></div>
                              </label>
                              <label for="pay-method-cc">
                                  <img src="img/credit-card.png">
                                  <p class="text-center">{{'credit-or-debit-card' | translate}}</p>
                              </label>
                          </div>
                      </div>
                      <!-- Mercado Pago
                       <div class="form-group">
                        <div class="radio">
                            <input id="pay-method-mercado" type="radio" ng-model="paymentInfo.method" value="mercado">
                            <label for="pay-method-mercado">
                                <div></div>
                            </label>
                            <label for="pay-method-mercado">
                                <img src="img/mercado.png">
                                <div>
                                    <p>{{'mercado' | translate}}</p>
                                </div>
                            </label>
                        </div>
                        </div>-->
                    </div>

                     <!-- Mercado Pago -->

                    <div class="row" ng-if="paymentInfo.method==='mercado'">
                        <div class="row">
                            <!-- <p class="pay-message">{{ 'addition-info-credit-card' | translate  }} </p> -->
                            <p class="pay-message">{{'mercado-title' | translate}}</p>
                        </div>

                        <div class="text-center pay-methods">
                            <div class="form-group" ng-repeat="(key ,value) in mercadoMedios" ng-if="value.onCouple">
                            <div class="radio" >
                                <input id="pay-method-mercado-{{key}}" type="radio"
                                    ng-model="paymentInfo.mercado.method" value="{{key}}">
                                <label for="pay-method-mercado-{{key}}">
                                    <div></div>
                                </label>
                                <label for="pay-method-mercado-{{key}}">
                                    <img src="{{value.image}}">
                                    <div>
                                        <p class="text-center">{{value.name}}</p>
                                    </div>
                                </label>
                            </div>
                            </div>
                        </div>
                    </div>

                    <!-- FIN MERCADO PAGO -->

                    <div class="row" ng-if="paymentInfo.method == 'cc' ">
                        <p class="pay-message">{{ 'addition-info-credit-card' | translate  }} </p>
                    </div>

                    <!-- start form row-->
                    <div class="row margin-top" ng-if="paymentInfo.method !== 'percent' &&
                                                        (paymentInfo.method === 'cc' || (paymentInfo.method === 'mercado' &&
                                                        (paymentInfo.mercado.method === 'debit_card' ||
                                                        paymentInfo.mercado.method === 'credit_card' ||
                                                        paymentInfo.mercado.method === 'prepaid_card' )))">
                      <!-- left column -->
                      <div class="col-md-6 col-xs-12 margin-top-2">
                          <div>
                            <h4 class="dark-font">{{'billing-information' | translate}}</h4>
                          </div>

                          <div class="form-group  margin-top-2" ng-class="{'has-warning':form.fullname.isInvalid}">
                            <label for="payer_fullname">{{'first-last' | translate}}</label>
                            <input required type="text" ng-keyup="ccCtrl.hideField('fullname')" class="form-control" ng-model="paymentInfo.payer.fullname" name="payer_fullname" placeholder="{{'name' | translate}}" />
                            <span class="error" style="color: red;" ng-show="form.fullname.isInvalid">{{ form.fullname.description }}</span>
                          </div>

                          <div class="form-group" ng-class="{'has-warning':form.email.isInvalid}">
                            <label for="payer_email">{{'email' | translate}}</label>
                            <input name="payer_email" ng-keyup="ccCtrl.hideField('email')" required ng-model="paymentInfo.payer.email" type="email" class="form-control" placeholder="email@xxx.com" />
                            <span class="error" style="color: red;" ng-show="form.email.isInvalid">{{ form.email.description }}</span>
                          </div>

                          <div class="form-group" ng-class="{'has-warning':form.confirmEmail.isInvalid}">
                            <label for="confirmEmail">{{'confirm-email' | translate}}</label>
                            <input name="confirmEmail" ng-keyup="ccCtrl.hideField('confirmEmail')" required ng-model="ccCtrl.confirmEmail" type="email" class="form-control" placeholder="email@xxx.com" />
                            <span class="error" style="color: red;" ng-show="form.confirmEmail.isInvalid">{{ form.confirmEmail.description }}</span>
                          </div>

                          <div class="form-group" ng-class="{'has-warning':form.phone.isInvalid}">
                            <label for="payer_tel">{{'phone' | translate}}</label>
                            <input required ng-keyup="ccCtrl.hideField('phone')" ng-model="paymentInfo.payer.phone" name="payer_tel" type="tel" class="form-control" placeholder="+51 000 00 00" />
                            <span class="error" style="color: red;" ng-show="form.phone.isInvalid">{{ form.phone.description }}</span>
                          </div>
                      </div>
                      <!-- end left column -->

                      <!-- start right column -->
                      <div class="col-md-6 col-xs-12 margin-top-2">
                          <div>
                            <h4 class="dark-font">{{'payment-information' | translate}}</h4>
                          </div>
                          <div class="form- margin-top-2">
                            <div class="row">
                                <div class="col-md-6 col-xs-12">
                                    <label for="payer_country">{{'country' | translate}}</label>
                                    <select class="form-control"  name="payer_country" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" ng-model="paymentInfo.payer.country">
                                        <option ng-repeat="country in countries" value="{{country.alpha2}}">
                                            {{country.name}}
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6 col-xs-12" ng-class="{'has-warning':form.city.isInvalid}">
                                    <label for="payer_city">{{'city' | translate}}</label>
                                    <input name="payer_city" ng-keyup="ccCtrl.hideField('city')" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" ng-model="paymentInfo.payer.city" type="text" class="form-control" placeholder="{{'city-name' | translate}}" />
                                    <span class="error" style="color: red;" ng-show="form.city.isInvalid">{{ form.city.description }}</span>
                                </div>
                            </div>
                          </div>
                          <div class="form-group margin-top-2" ng-if="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" ng-class="{'has-warning':form.number.isInvalid}">
                            <label for="pay_number">{{'card-number' | translate}}</label>
                            <input type="text" ng-keypress="ccCtrl.validNumber($event); ccCtrl.hideField('number')" ng-keyup="ccCtrl.typeCard()" name="pay_number" class="form-control" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" ng-model="paymentInfo.pay.number" placeholder="000 000 00 00 000" />
                            <span class="error" style="color: red;" ng-show="form.number.isInvalid">{{ form.number.description }}</span>
                          </div>
                          <div class="form-group" style="margin-bottom: 0px;">
                                <label>{{'due-date' | translate}}</label>
                          </div>
                          <div class="form-group" style="height: 33px;">
                            <div class="col-xs-12 col-md-4" ng-class="{'has-warning':form.exp_month.isInvalid}">
                                <select name="date" ng-change="ccCtrl.hideField('exp_month')" name="pay_expire_month" ng-model="paymentInfo.pay.exp_month" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" class="form-control">
                                    <option disabled value="">{{'month' | translate}}</option>
                                    <option ng-repeat="num in months" ng-value="num">{{num}}
                                    </option>
                                </select>
                                <span class="error" style="color: red;" ng-show="form.exp_month.isInvalid">{{ form.exp_month.description }}</span>
                            </div>
                            <div class="col-xs-12 col-md-4" ng-class="{'has-warning':form.exp_year.isInvalid}">
                                <select name="date" ng-change="ccCtrl.hideField('exp_year')" name="pay_expire_year" ng-model="paymentInfo.pay.exp_year" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" class="form-control">
                                    <option disabled value="">{{'year' | translate}}</option>
                                    <option ng-repeat="num in years" ng-value="num">{{num}}</option>
                                </select>
                                <span class="error" style="color: red;" ng-show="form.exp_year.isInvalid">{{ form.exp_year.description }}</span>
                            </div>
                            <div class="col-xs-9 col-md-3" ng-class="{'has-warning':form.pay_cvv.isInvalid}">
                                <input name="pay_cvv" ng-keyup="ccCtrl.hideField('pay_cvv')" minlength="{{ paymentInfo.otro.pay_type == 'amex' ? 4 : 3 }}"  maxlength="{{ paymentInfo.otro.pay_type == 'amex' ? 4 : 3 }}" ng-keypress="ccCtrl.validNumber($event)" ng-required="(paymentInfo.method==='cc' || paymentInfo.method === 'mercado')" ng-model="paymentInfo.pay.cvc" type="text" class="form-control" placeholder="CVC" />
                                <span class="error" style="color: red;" ng-show="form.pay_cvv.isInvalid">{{ form.pay_cvv.description }}</span>
                            </div>
                            <div class="col-xs-3 col-md-1" >
                                <div uib-tooltip="{{'cvc_help' | translate}}" tooltip-class="customClass" tooltip-placement="left">
                                    <img src="../img/sino-.png" style="width:32px;height:32px;margin-top: 5px;" >
                                </div>
                            </div>
                          </div>
                          <div class="form-group margin-top-2">
                            <label for="">{{'Meses sin intereses' | translate}}</label>
                            <select name="date" name="msi" ng-model="paymentInfo.pay.msi" ng-if="!ccCtrl.code" class="form-control">
                                <option disabled value="">1 - {{ selectPay  | currency:'$': 2}}</option>
                                <option value="2">2 - {{ selectPay / 2 | currency:'$': 2 }}</option>
                                <option value="3">3 - {{ selectPay / 3 | currency:'$': 2 }}</option>
                            </select>
                          </div>
                      </div>
                      <!-- end right column -->

                    </div>
                    <!-- end form row-->

                    <div class="row" ng-if="paymentInfo.method !== 'percent'">
                        <div class="col-md-12 text-center">
                             <button type="submit" ng-click="ccCtrl.payValidate()" class="btn btn-inverse btn-lg">Pagar {{ selectPay | currency:'$': 2 }} MXN </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="loading-init hidden" style="opacity: 0.95;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 2040 !important;background-color: #fff;">
            <div class="content-loader" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);min-width: 180px;">
                    <img  class="loader-image-home hidden" id="loader_1" style="height:40px; width: 40px" src="./img/1_regalo.png">
                    <img  class="loader-image-home hidden" id="loader_2" style="height:12px; width: 12px" src="./img/2_mas.png">
                    <img  class="loader-image-home hidden" id="loader_3" style="height:40px; width: 40px" src="./img/3_pesos.png">
                    <img  class="loader-image-home hidden" id="loader_4" style="height:12px; width: 12px" src="./img/4-igual.png">
                    <img  class="loader-image-home hidden" id="loader_5" style="height:40px; width: 40px" src="./img/5_avion.png">
            </div>
    </div>