easy_pay_u_latam 0.1.15 → 0.1.16

data/app/assets/javascripts/easy_pay_u_latam/subscriptions/controllers/Main.js

@@ -0,0 +1,158 @@
+
+var EasyPayULatam = {
+  init: function(){
+    var module = angular.module('easy_pay_u_latam', ['subscriptions-module']);
+
+    document.addEventListener("turbolinks:load", function() {
+      var element = angular.element(document.querySelector('#easy_pay_u_latam'));
+
+      var isInitialized = element.injector();
+      if (!isInitialized) {
+        angular.bootstrap(document.querySelector('#easy_pay_u_latam'), ['easy_pay_u_latam'])
+      }
+    });
+
+    $(document).ready(function(){
+      var element = angular.element(document.querySelector('#easy_pay_u_latam'));
+
+      var isInitialized = element.injector();
+      if (!isInitialized) {
+        angular.bootstrap(document.querySelector('#easy_pay_u_latam'), ['easy_pay_u_latam'])
+      }
+    });
+
+    module.directive('httpRequestLoader', ['$http', function($http) {
+      return function(scope, element, attrs) {
+        scope.html_loader = "<i class='fa-spin fa-2x fas fa-circle-notch active_loader'></i>";
+        scope.active_loaders = [];
+        scope.isLoading = function() {
+          return {
+            status: $http.pendingRequests.length > 0,
+            requests: $http.pendingRequests
+          };
+        };
+        setInterval(function(){
+          scope.$evalAsync(function(){
+            var res = scope.isLoading();
+            //Verificar loaders ya no existentes
+            for (var i = 0; i < scope.active_loaders.length; i++) {
+              var loader = scope.active_loaders[i];
+              var exists = false;
+              for (var j = 0; j < res.requests.length; j++) {
+                var req = res.requests[j];
+                if (loader.url == req.url){
+                  exists = true;
+                  break;
+                }
+              }
+              if (exists == false){
+                //NO EXISTE YA LA PETICIÓN EN EL REQUESTS
+                //QUITAR DEL HTML
+                $(loader.target).find(".active_loader").remove();
+              }
+            }
+
+            //Adicionar nuevos loaders
+            for (var i = 0; i < res.requests.length; i++) {
+              var req = res.requests[i];
+              if (req.params != null && req.params._target != null){
+                scope.active_loaders.push({url: req.url, target: req.params._target});
+                //MOSTRAR LOADER EN HTML
+                if ($(req.params._target).find(".active_loader").length == 0){
+                  $(req.params._target).append(scope.html_loader);
+                }
+              }
+            }
+          });
+        }, 1000);
+        // scope.$watch(scope.isLoading, function(res, $http) {
+        //   if (res.status){
+        //     console.log("FINISH LOADING: " + res.requests.length);
+        //     element.removeClass('ng-hide');
+        //   }
+        //   else{
+        //     console.log("START LOADING: " + res.requests.length);
+        //     element.addClass('ng-hide');
+        //   }
+        // });
+      }
+    }]);
+
+    module.directive("inputCurrency", ["$locale","$filter", function ($locale, $filter) {
+
+      // For input validation
+      var isValid = function(val) {
+        return angular.isNumber(val) && !isNaN(val);
+      };
+
+      // Helper for creating RegExp's
+      var toRegExp = function(val) {
+        var escaped = val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        return new RegExp(escaped, 'g');
+      };
+
+      // Saved to your $scope/model
+      var toModel = function(val) {
+
+        // Locale currency support
+        var decimal = toRegExp($locale.NUMBER_FORMATS.DECIMAL_SEP);
+        var group = toRegExp($locale.NUMBER_FORMATS.GROUP_SEP);
+        var currency = toRegExp($locale.NUMBER_FORMATS.CURRENCY_SYM);
+
+        // Strip currency related characters from string
+        val = val.replace(decimal, '').replace(group, '').replace(currency, '').trim();
+
+        return parseInt(val, 10);
+      };
+
+      // Displayed in the input to users
+      var toView = function(val) {
+        return $filter('currency')(val, '$', 0);
+      };
+
+      // Link to DOM
+      var link = function($scope, $element, $attrs, $ngModel) {
+        $ngModel.$formatters.push(toView);
+        $ngModel.$parsers.push(toModel);
+        $ngModel.$validators.currency = isValid;
+
+        $element.on('keyup', function() {
+          $ngModel.$viewValue = toView($ngModel.$modelValue);
+          $ngModel.$render();
+        });
+      };
+
+      return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: link
+      };
+    }]);
+
+
+    module.filter('myCurrency', ['$filter', function ($filter) {
+      return function(input) {
+        input = parseFloat(input);
+
+        if(input % 1 === 0) {
+          input = input.toFixed(0);
+        }
+        else {
+          input = input.toFixed(2);
+        }
+
+        return '$' + input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      };
+    }]);
+
+    module.directive('onLastRepeat', function() {
+      return function(scope, element, attrs) {
+        if (scope.$last) setTimeout(function(){
+          scope.$emit('onRepeatLast', element, attrs);
+        }, 1);
+      };
+    });
+
+  }
+
+}

data/app/assets/javascripts/easy_pay_u_latam/subscriptions/controllers/Subscriptions.js

@@ -0,0 +1,368 @@
+(function () {
+  var module = angular.module("subscriptions-module", ['gavruk.card', 'puigcerber.countryPicker', 'ngSanitize']);
+
+  module.controller('SubscriptionsController', ['$http', '$scope', '$compile', '$rootScope', function ($http, $scope, $compile, $rootScope) {
+
+    var self = this;
+    //Atributos de Planes
+    this.actual_plan = null;
+    this.selected_plan = null;
+    this.plans = [];
+
+    //Atributos de Subscripciones
+    this.subscriptions = [];
+    this.subscription_loading = false;
+    this.create_subscription_after_new_card = false;
+
+    //Atributos de Tarjetas
+    this.user_default_card = null;
+    this.cards = [];
+    this.card_loading = false;
+
+    this.cardPlaceholders = {
+      name: 'Nombre...',
+      number: 'xxxx xxxx xxxx xxxx',
+      expiry: 'MM/YY',
+      cvc: 'xxx'
+    };
+
+    this.cardMessages = {
+      validDate: 'valid\nthru',
+      monthYear: 'MM/YYYY',
+    };
+
+    this.cardOptions = {
+      debug: false,
+      formatting: true,
+      width: 500 //optional
+    };
+
+    this.init = function(uuid, token, plans){
+      this.user_uuid = uuid;
+      this.user_token = token;
+      this.ClearCard();
+      this.GetClient();
+      //No tengo ni idea porque me toco hacer eso pero sin el timeout simplemente el ng-repeat no renderiza plans
+      setTimeout(function(){
+        $scope.$evalAsync(function(){
+          self.SetPlans(plans);
+        });
+      }, 100);
+
+      $('#new-credit-card-modal').on('shown.bs.modal', function () {
+        if (self.create_subscription_after_new_card == true){
+          swal({
+            title: 'Confirmación',
+            text: "Cargaremos a tu tarjeta principal mensualmente el valor del plan hasta que canceles la subscripción.",
+            type: 'info',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Si, continuar',
+            cancelButtonText: "Cancelar"
+          }).then((result) => {
+            if (result) {
+              $scope.$evalAsync(function(){
+                ('#new-credit-card-modal').modal("show");
+              });
+            }
+            else{
+              self.create_subscription_after_new_card = false;
+            }
+          });
+        }
+      })
+    }
+
+    //Métodos de Clientes
+
+    this.GetClient = function(){
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token
+      };
+
+      $http.post("/easy_pay_u_latam/api/v1/pay_u_clients.json", params).then(
+        function(res, status){
+          self.GetCards();
+          self.GetSubscriptions();
+        },
+        function(res, status){
+        }
+      );
+    }
+
+    //Métodos de Tarjetas
+
+    this.ClearCard = function(){
+      this.card = {
+        name: '',
+        number: '',
+        expiry: '',
+        cvc: '',
+        type: '',
+        document: '',
+        address: {
+          line1: '',
+          city: '',
+          state: '',
+          country: '',
+          phone: ''
+        }
+      };
+    }
+
+    this.GetCards = function(){
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token
+      };
+
+      $http.get("/easy_pay_u_latam/api/v1/pay_u_cards.json", {params: params}).then(
+        function(res, status){
+          self.cards = res.data.cards;
+        },
+        function(res, status){
+        }
+      );
+    }
+
+    this.GetCardType = function(){
+      var card_ele = $(".jp-card").first();
+      var classes = card_ele.prop("class");
+      this.card.type = classes.split(" ")[1].split("-")[2].toUpperCase();
+      if (this.card.type == "IDENTIFIED"){
+        this.card.type = classes.split(" ")[2].split("-")[2].toUpperCase();
+      }
+    }
+
+    this.CreateCards = function(){
+      this.GetCardType();
+
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token,
+        card: this.card
+      };
+
+      this.card_loading = true;
+
+      $http.post("/easy_pay_u_latam/api/v1/pay_u_cards.json", params).then(
+        function(res, status){
+          self.card_loading = false;
+          self.ClearCard();
+          self.GetCards();
+          $("#new-credit-card-modal").modal("hide");
+          swal("¡Excelente!", "¡La tarjeta de crédito creada con éxito!", "success");
+
+          //Si el usuario seleccinó un plan se crea la subscripción automaticamente
+          if (self.create_subscription_after_new_card == true){
+            self.CreateSubscription();
+          }
+        },
+        function(res, status){
+          self.card_loading = false;
+          swal("¡Información!", res.data.message, "error");
+        }
+      );
+    }
+
+    this.MarkAsPrimaryCard = function(card){
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token
+      };
+
+      $http.put("/easy_pay_u_latam/api/v1/pay_u_cards/"+card.token+".json", params).then(
+        function(res, status){
+          self.user_default_card = card.token;
+          swal("¡Excelente!", "¡Tarjeta marcada como primaria correctamente!", "success");
+        },
+        function(res, status){
+          swal("¡Información!", res.data.message, "error");
+        }
+      );
+    }
+
+    this.DeleteCard = function(card){
+      swal({
+        title: '¿Estás seguro(a)?',
+        text: "¡Está acción no se puede deshacer! Siempre puedes volver a adicionar la tarjeta como un nuevo medio de pago.",
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, continuar',
+        cancelButtonText: "Cancelar"
+      }).then((result) => {
+        if (result) {
+          $scope.$evalAsync(function(){
+            var params = {
+              user_email: self.user_uuid,
+              user_token: self.user_token
+            };
+
+            $http.delete("/easy_pay_u_latam/api/v1/pay_u_cards/"+card.token+".json", {params: params}).then(
+              function(res, status){
+                for (var i = 0; i < self.cards.length; i++) {
+                  if (self.cards[i].token == card.token){
+                    self.cards.splice(i, 1);
+                    break;
+                  }
+                }
+                swal("¡Información!", "¡La tarjeta de crédito ha sido eliminada con éxito!", "success");
+              },
+              function(res, status){
+                swal("¡Información!", res.data.message, "error");
+              }
+            );
+          });
+        }
+      });
+    }
+
+    //Métodos de Subscripciones
+    this.GetSubscriptions = function(){
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token
+      };
+
+      $http.get("/easy_pay_u_latam/api/v1/pay_u_subscriptions.json", {params: params}).then(
+        function(res, status){
+          self.subscriptions = res.data.subscriptions;
+        },
+        function(res, status){
+        }
+      );
+    }
+
+    this.IntToDate = function(int){
+      var date = new Date(int);
+      return date;
+    }
+
+    //Métodos Planes
+    this.SetPlans = function(plans){
+      this.plans = plans;
+    }
+
+    this.ChangePlan = function(){
+      this.selected_plan = null;
+    }
+
+    this.SelectPlan = function(plan){
+
+      if (this.actual_plan != null && this.actual_plan.id == plan.id){
+        swal("Información", "Actualmente estás estas suscrito a este plan.", "info");
+        return;
+      }
+
+      swal({
+        title: 'Confirmación',
+        text: "Cargaremos a tu tarjeta principal mensualmente el valor del plan hasta que canceles la subscripción.",
+        type: 'info',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, continuar',
+        cancelButtonText: "Cancelar"
+      }).then((result) => {
+        if (result) {
+          $scope.$evalAsync(function(){
+            self.selected_plan = plan;
+
+            if (self.cards.length > 0){
+              //Crear suscripcion
+              self.CreateSubscription();
+            }
+            else{
+              //Pedir creación de tarjeta (Abrir modal)
+              //Luego Crear suscripcion en el callback del create
+              self.create_subscription_after_new_card = true;
+              $("#new-credit-card-modal").modal("show");
+            }
+          });
+        }
+      });
+
+    }
+
+    //Métodos Subscripciones
+    this.CreateSubscription = function(){
+      var params = {
+        user_email: self.user_uuid,
+        user_token: self.user_token,
+        subscription: {
+          quantity: "1",
+          installments: "1",
+          trialDays: "15",
+          customer: {
+            id: "",
+            creditCards: [
+              {
+                token: ""
+              }
+            ]
+          },
+          plan: {
+            planCode: this.selected_plan.payu_plan_code
+          }
+        }
+      };
+
+      this.subscription_loading = true;
+
+      $http.post("/easy_pay_u_latam/api/v1/pay_u_subscriptions.json", params).then(
+        function(res, status){
+          self.subscription_loading = false;
+          //Mirar si se muestra alerta y se fuerza un refresh
+          //O recirbir respuesta json y actualizar variables necesarias desde el API
+        },
+        function(res, status){
+          self.subscription_loading = false;
+        }
+      );
+    }
+
+    this.DeleteSubscription = function(){
+      swal({
+        title: 'Confirmación',
+        text: "Volverás al plan Grátis una vez se caduque el plan que tenías.",
+        type: 'info',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Si, continuar',
+        cancelButtonText: "Cancelar"
+      }).then((result) => {
+        if (result) {
+          $scope.$evalAsync(function(){
+            var params = {
+              user_email: self.user_uuid,
+              user_token: self.user_token
+            };
+
+            this.subscription_loading = true;
+
+            $http.delete("/easy_pay_u_latam/api/v1/pay_u_subscriptions/0000.json", {params: params}).then(
+              function(res, status){
+                self.subscription_loading = false;
+                //Mirar si se muestra alerta y se fuerza un refresh
+                //O recirbir respuesta json y actualizar variables necesarias desde el API
+              },
+              function(res, status){
+                self.subscription_loading = false;
+              }
+            );
+          });
+        }
+      });
+    }
+
+    // $scope.$on("StartChangeUnit", function(event, args) {
+    //   self.row = args.row;
+    // });
+
+  }]);
+})();