Better control of sponsor package's price display after customization (#1690)

* Refactor js by introducing a object to hold access to HTML elemnts

* Refactor references to cost label

* Refactor clear form btn references

* Refactor package input

* Refactor application form references

* Remove unused var

* Refactor package info and benefits selector

* Refactor benefits inputs/labels/conflicts selectors

* Should use functions to "refresh" elements data

* New function to display a package cost

* Display the package cost if benefits after customization matches with package's ones

Author: berinhard

static/js/sponsors/applicationForm.js

@@ -1,64 +1,94 @@
 $(document).ready(function(){
-    let checkboxesContainer = $('#benefits_container');
-    let costLabel = $("#cost_label");
-    let cost = 0;
+    const SELECTORS = {
+        checkboxesContainer: () => $('#benefits_container'),
+        costLabel:  () => $("#cost_label"),
+        clearFormBtn:  () => $("#clear_form_btn"),
+        packageInput:  () => $("input[name=package]"),
+        applicationForm:  () => $("#application_form"),
+        getPackageInfo: (packageId) => $("#package_benefits_" + packageId),
+        getPackageBenefits: (packageId) => SELECTORS.getPackageInfo(packageId).children(),
+        benefitsInputs: () => $("input[id^=id_benefits_]"),
+        getBenefitLabel: (benefitId) => $('label[benefit_id=' + benefitId + ']'),
+        getBenefitInput: (benefitId) => SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'),
+        getBenefitConflicts: (benefitId) => $('#conflicts_with_' + benefitId).children(),
+        getSelectedBenefits: () => SELECTORS.benefitsInputs().filter(":checked"),
+    }
 
-    $("#clear_form_btn").click(function(){
-        $("#application_form").trigger("reset");
-        $("#application_form [class=active]").removeClass("active");
-        $("input[name=package]").prop("checked", false);
-        checkboxesContainer.find(':checkbox').each(function(){
+    displayPackageCost = (packageId) => {
+      let packageInfo = SELECTORS.getPackageInfo(packageId);
+      let cost = packageInfo.attr("data-cost");
+      SELECTORS.costLabel().html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD')
+    }
+
+
+
+    SELECTORS.clearFormBtn().click(function(){
+        SELECTORS.applicationForm().trigger("reset");
+        SELECTORS.applicationForm().find("[class=active]").removeClass("active");
+        SELECTORS.packageInput().prop("checked", false);
+        SELECTORS.checkboxesContainer().find(':checkbox').each(function(){
             $(this).prop('checked', false);
             if ($(this).attr("package_only")) $(this).attr("disabled", true);
         });
-        $("#cost_label").html("");
+        SELECTORS.costLabel().html("");
     });
 
-    $("input[name=package]").change(function(){
+    SELECTORS.packageInput().change(function(){
       let package = this.value;
       if (package.length == 0) return;
 
-      costLabel.html("Updating cost...")
+      SELECTORS.costLabel().html("Updating cost...")
 
-      checkboxesContainer.find(':checkbox').each(function(){
+      SELECTORS.checkboxesContainer().find(':checkbox').each(function(){
           $(this).prop('checked', false);
           let packageOnlyBenefit = $(this).attr("package_only");
           if (packageOnlyBenefit) $(this).attr("disabled", true);
       });
 
-      let packageInfo = $("#package_benefits_" + package);
-      packageInfo.children().each(function(){
+      SELECTORS.getPackageBenefits(package).each(function(){
           let benefit = $(this).html()
-          let benefitInput = checkboxesContainer.find('[value=' + benefit + ']');
+          let benefitInput = SELECTORS.getBenefitInput(benefit);
           let packageOnlyBenefit = benefitInput.attr("package_only");
           benefitInput.removeAttr("disabled");
           benefitInput.trigger("click");
       });
-
-      let url = $("#cost_container").attr("calculate_cost_url");
-      let data = $("form").serialize();
-
-      let cost = packageInfo.attr("data-cost");
-      costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD')
+      displayPackageCost(package);
     });
 
-    $("input[id^=id_benefits_]").change(function(){
+    SELECTORS.benefitsInputs().change(function(){
       let benefit = this.value;
       if (benefit.length == 0) return;
-      if (costLabel.html() != "Updating cost...") costLabel.html("Please submit your customized sponsorship package application and we'll contact you within 2 business days.");
 
-      let active = checkboxesContainer.find('[value=' + benefit + ']').prop("checked");
+      // display package cost if custom benefit change result matches with package's benefits list
+      let isChangeFromPackageChange = SELECTORS.costLabel().html() == "Updating cost..."
+      if (!isChangeFromPackageChange) {
+        let selectedBenefits = SELECTORS.getSelectedBenefits();
+        selectedBenefits = $.map(selectedBenefits, (b) => $(b).val()).sort();
+        let selectedPackageId = SELECTORS.packageInput().filter(":checked").val()
+        let packageBenefits = SELECTORS.getPackageBenefits(selectedPackageId);
+        packageBenefits = $.map(packageBenefits, (b) => $(b).text()).sort();
+
+        // check same num of benefits and join with string. if same string, both lists have the same benefits
+        if (packageBenefits.length == selectedBenefits.length && packageBenefits.join(',') === selectedBenefits.join(',')){
+            displayPackageCost(selectedPackageId);
+        } else {
+            let msg = "Please submit your customized sponsorship package application and we'll contact you within 2 business days.";
+            SELECTORS.costLabel().html(msg);
+        }
+      }
+
+      // updates the input to be active if needed
+      let active = SELECTORS.getBenefitInput(benefit).prop("checked");
       if (!active) {
           return;
       } else {
-          $('label[benefit_id=' + benefit + ']').addClass("active");
+          SELECTORS.getBenefitLabel(benefit).addClass("active");
       }
 
-
-      $('#conflicts_with_' + benefit).children().each(function(){
+      // check and ensure conflicts constraints between checked benefits
+      SELECTORS.getBenefitConflicts(benefit).each(function(){
           let conflictId = $(this).html();
-          let conflictCheckbox = checkboxesContainer.find('[value=' + conflictId + ']');
-          let checked = conflictCheckbox.prop("checked");
+          let checked = SELECTORS.getBenefitInput(conflictId).prop("checked");
           if (checked){
             conflictCheckbox.trigger("click");
             conflictCheckbox.parent().removeClass("active");