From c083b266d8d51f03f0b13a2cfd9dd185a2d4556d Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:30:28 -0300 Subject: [PATCH 01/11] Refactor js by introducing a object to hold access to HTML elemnts --- static/js/sponsors/applicationForm.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 104ec8ed3..2e5ca77d5 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -1,5 +1,9 @@ $(document).ready(function(){ - let checkboxesContainer = $('#benefits_container'); + const SELECTORS = { + checkboxesContainer: $('#benefits_container'), + } + + let costLabel = $("#cost_label"); let cost = 0; @@ -7,7 +11,7 @@ $(document).ready(function(){ $("#application_form").trigger("reset"); $("#application_form [class=active]").removeClass("active"); $("input[name=package]").prop("checked", false); - checkboxesContainer.find(':checkbox').each(function(){ + SELECTORS.checkboxesContainer.find(':checkbox').each(function(){ $(this).prop('checked', false); if ($(this).attr("package_only")) $(this).attr("disabled", true); }); @@ -20,7 +24,7 @@ $(document).ready(function(){ 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); @@ -29,7 +33,7 @@ $(document).ready(function(){ let packageInfo = $("#package_benefits_" + package); packageInfo.children().each(function(){ let benefit = $(this).html() - let benefitInput = checkboxesContainer.find('[value=' + benefit + ']'); + let benefitInput = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']'); let packageOnlyBenefit = benefitInput.attr("package_only"); benefitInput.removeAttr("disabled"); benefitInput.trigger("click"); @@ -47,7 +51,7 @@ $(document).ready(function(){ 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"); + let active = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']').prop("checked"); if (!active) { return; } else { @@ -57,7 +61,7 @@ $(document).ready(function(){ $('#conflicts_with_' + benefit).children().each(function(){ let conflictId = $(this).html(); - let conflictCheckbox = checkboxesContainer.find('[value=' + conflictId + ']'); + let conflictCheckbox = SELECTORS.checkboxesContainer.find('[value=' + conflictId + ']'); let checked = conflictCheckbox.prop("checked"); if (checked){ conflictCheckbox.trigger("click"); From 0d83e726d13806065dce515e2fb9130daf89c028 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:30:38 -0300 Subject: [PATCH 02/11] Refactor references to cost label --- static/js/sponsors/applicationForm.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 2e5ca77d5..5760e5d08 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -1,10 +1,10 @@ $(document).ready(function(){ const SELECTORS = { checkboxesContainer: $('#benefits_container'), + costLabel: $("#cost_label"), } - let costLabel = $("#cost_label"); let cost = 0; $("#clear_form_btn").click(function(){ @@ -15,14 +15,14 @@ $(document).ready(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(){ let package = this.value; if (package.length == 0) return; - costLabel.html("Updating cost...") + SELECTORS.costLabel.html("Updating cost...") SELECTORS.checkboxesContainer.find(':checkbox').each(function(){ $(this).prop('checked', false); @@ -43,13 +43,16 @@ $(document).ready(function(){ let data = $("form").serialize(); let cost = packageInfo.attr("data-cost"); - costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') + SELECTORS.costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') }); $("input[id^=id_benefits_]").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."); + if (SELECTORS.costLabel.html() != "Updating cost...") { + let msg = "Please submit your customized sponsorship package application and we'll contact you within 2 business days." + SELECTORS.costLabel.html(msg); + } let active = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']').prop("checked"); if (!active) { From 05816c352e0705743e04c3b7524e6fe1d0c45a53 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:33:14 -0300 Subject: [PATCH 03/11] Refactor clear form btn references --- static/js/sponsors/applicationForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 5760e5d08..b7ffa3782 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -2,12 +2,13 @@ $(document).ready(function(){ const SELECTORS = { checkboxesContainer: $('#benefits_container'), costLabel: $("#cost_label"), + clearFormBtn: $("#clear_form_btn"), } let cost = 0; - $("#clear_form_btn").click(function(){ + SELECTORS.clearFormBtn.click(function(){ $("#application_form").trigger("reset"); $("#application_form [class=active]").removeClass("active"); $("input[name=package]").prop("checked", false); From 9e0b4d85e21cbb4e4526fc21aca81505c3748c57 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:34:37 -0300 Subject: [PATCH 04/11] Refactor package input --- static/js/sponsors/applicationForm.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index b7ffa3782..8b50ab6ce 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -3,6 +3,7 @@ $(document).ready(function(){ checkboxesContainer: $('#benefits_container'), costLabel: $("#cost_label"), clearFormBtn: $("#clear_form_btn"), + packageInput: $("input[name=package]"), } @@ -11,7 +12,7 @@ $(document).ready(function(){ SELECTORS.clearFormBtn.click(function(){ $("#application_form").trigger("reset"); $("#application_form [class=active]").removeClass("active"); - $("input[name=package]").prop("checked", false); + SELECTORS.packageInput.prop("checked", false); SELECTORS.checkboxesContainer.find(':checkbox').each(function(){ $(this).prop('checked', false); if ($(this).attr("package_only")) $(this).attr("disabled", true); @@ -19,7 +20,7 @@ $(document).ready(function(){ SELECTORS.costLabel.html(""); }); - $("input[name=package]").change(function(){ + SELECTORS.packageInput.change(function(){ let package = this.value; if (package.length == 0) return; From 166b42d14cf1c34b69d01a969aff2cc21810a2a2 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:37:50 -0300 Subject: [PATCH 05/11] Refactor application form references --- static/js/sponsors/applicationForm.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 8b50ab6ce..f205809ed 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -4,14 +4,15 @@ $(document).ready(function(){ costLabel: $("#cost_label"), clearFormBtn: $("#clear_form_btn"), packageInput: $("input[name=package]"), + applicationForm: $("#application_form") } let cost = 0; SELECTORS.clearFormBtn.click(function(){ - $("#application_form").trigger("reset"); - $("#application_form [class=active]").removeClass("active"); + 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); From e75a6522e6fadfaecf6c483fbc272dc3d8e36c53 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:39:05 -0300 Subject: [PATCH 06/11] Remove unused var --- static/js/sponsors/applicationForm.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index f205809ed..622201322 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -42,9 +42,6 @@ $(document).ready(function(){ benefitInput.trigger("click"); }); - let url = $("#cost_container").attr("calculate_cost_url"); - let data = $("form").serialize(); - let cost = packageInfo.attr("data-cost"); SELECTORS.costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') }); From 204d0387fed9529f48729cc89b820eeb22d03a91 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:56:14 -0300 Subject: [PATCH 07/11] Refactor package info and benefits selector --- static/js/sponsors/applicationForm.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 622201322..7b9308516 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -4,7 +4,9 @@ $(document).ready(function(){ costLabel: $("#cost_label"), clearFormBtn: $("#clear_form_btn"), packageInput: $("input[name=package]"), - applicationForm: $("#application_form") + applicationForm: $("#application_form"), + getPackageInfo: (packageId) => $("#package_benefits_" + packageId), + getPackageBenefits: (packageId) => SELECTORS.getPackageInfo(packageId).children(), } @@ -33,8 +35,8 @@ $(document).ready(function(){ if (packageOnlyBenefit) $(this).attr("disabled", true); }); - let packageInfo = $("#package_benefits_" + package); - packageInfo.children().each(function(){ + let packageInfo = SELECTORS.getPackageInfo(package); + SELECTORS.getPackageBenefits(package).each(function(){ let benefit = $(this).html() let benefitInput = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']'); let packageOnlyBenefit = benefitInput.attr("package_only"); From 04c344593e00c855dfda7fdce284f59041a64bdd Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 09:59:48 -0300 Subject: [PATCH 08/11] Refactor benefits inputs/labels/conflicts selectors --- static/js/sponsors/applicationForm.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 7b9308516..49cb34357 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -7,6 +7,10 @@ $(document).ready(function(){ 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(), } @@ -38,7 +42,7 @@ $(document).ready(function(){ let packageInfo = SELECTORS.getPackageInfo(package); SELECTORS.getPackageBenefits(package).each(function(){ let benefit = $(this).html() - let benefitInput = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']'); + let benefitInput = SELECTORS.getBenefitInput(benefit); let packageOnlyBenefit = benefitInput.attr("package_only"); benefitInput.removeAttr("disabled"); benefitInput.trigger("click"); @@ -48,7 +52,7 @@ $(document).ready(function(){ SELECTORS.costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') }); - $("input[id^=id_benefits_]").change(function(){ + SELECTORS.benefitsInputs.change(function(){ let benefit = this.value; if (benefit.length == 0) return; if (SELECTORS.costLabel.html() != "Updating cost...") { @@ -56,18 +60,17 @@ $(document).ready(function(){ SELECTORS.costLabel.html(msg); } - let active = SELECTORS.checkboxesContainer.find('[value=' + benefit + ']').prop("checked"); + 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(){ + SELECTORS.getBenefitConflicts(benefit).each(function(){ let conflictId = $(this).html(); - let conflictCheckbox = SELECTORS.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"); From 345413a6e8c2a3c6bc78e68a99f8cc54253650ac Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 11:02:54 -0300 Subject: [PATCH 09/11] Should use functions to "refresh" elements data --- static/js/sponsors/applicationForm.js | 35 ++++++++++++++------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 49cb34357..f50198baf 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -1,39 +1,40 @@ $(document).ready(function(){ const SELECTORS = { - checkboxesContainer: $('#benefits_container'), - costLabel: $("#cost_label"), - clearFormBtn: $("#clear_form_btn"), - packageInput: $("input[name=package]"), - applicationForm: $("#application_form"), + 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_]"), + benefitsInputs: () => $("input[id^=id_benefits_]"), getBenefitLabel: (benefitId) => $('label[benefit_id=' + benefitId + ']'), - getBenefitInput: (benefitId) => SELECTORS.benefitsInputs.filter('[value=' + benefitId + ']'), + getBenefitInput: (benefitId) => SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'), getBenefitConflicts: (benefitId) => $('#conflicts_with_' + benefitId).children(), } let cost = 0; - 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(){ + + 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); }); - SELECTORS.costLabel.html(""); + SELECTORS.costLabel().html(""); }); - SELECTORS.packageInput.change(function(){ + SELECTORS.packageInput().change(function(){ let package = this.value; if (package.length == 0) return; - SELECTORS.costLabel.html("Updating cost...") + SELECTORS.costLabel().html("Updating cost...") - SELECTORS.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); @@ -52,7 +53,7 @@ $(document).ready(function(){ SELECTORS.costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') }); - SELECTORS.benefitsInputs.change(function(){ + SELECTORS.benefitsInputs().change(function(){ let benefit = this.value; if (benefit.length == 0) return; if (SELECTORS.costLabel.html() != "Updating cost...") { From 7ddad93178d0d75b8ff5f13c96888b406361e408 Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 11:03:24 -0300 Subject: [PATCH 10/11] New function to display a package cost --- static/js/sponsors/applicationForm.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index f50198baf..7f50c8afa 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -13,8 +13,12 @@ $(document).ready(function(){ getBenefitConflicts: (benefitId) => $('#conflicts_with_' + benefitId).children(), } + 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') + } - let cost = 0; SELECTORS.clearFormBtn().click(function(){ @@ -40,7 +44,6 @@ $(document).ready(function(){ if (packageOnlyBenefit) $(this).attr("disabled", true); }); - let packageInfo = SELECTORS.getPackageInfo(package); SELECTORS.getPackageBenefits(package).each(function(){ let benefit = $(this).html() let benefitInput = SELECTORS.getBenefitInput(benefit); @@ -48,9 +51,7 @@ $(document).ready(function(){ benefitInput.removeAttr("disabled"); benefitInput.trigger("click"); }); - - let cost = packageInfo.attr("data-cost"); - SELECTORS.costLabel.html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') + displayPackageCost(package); }); SELECTORS.benefitsInputs().change(function(){ From c005d866dc2fb99510f76ad183d7fcb4205626ec Mon Sep 17 00:00:00 2001 From: Bernardo Fontes Date: Wed, 25 Nov 2020 11:04:15 -0300 Subject: [PATCH 11/11] Display the package cost if benefits after customization matches with package's ones --- static/js/sponsors/applicationForm.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/static/js/sponsors/applicationForm.js b/static/js/sponsors/applicationForm.js index 7f50c8afa..834cc3e18 100644 --- a/static/js/sponsors/applicationForm.js +++ b/static/js/sponsors/applicationForm.js @@ -11,6 +11,7 @@ $(document).ready(function(){ getBenefitLabel: (benefitId) => $('label[benefit_id=' + benefitId + ']'), getBenefitInput: (benefitId) => SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'), getBenefitConflicts: (benefitId) => $('#conflicts_with_' + benefitId).children(), + getSelectedBenefits: () => SELECTORS.benefitsInputs().filter(":checked"), } displayPackageCost = (packageId) => { @@ -57,11 +58,26 @@ $(document).ready(function(){ SELECTORS.benefitsInputs().change(function(){ let benefit = this.value; if (benefit.length == 0) return; - if (SELECTORS.costLabel.html() != "Updating cost...") { - let msg = "Please submit your customized sponsorship package application and we'll contact you within 2 business days." - SELECTORS.costLabel.html(msg); + + // 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; @@ -69,7 +85,7 @@ $(document).ready(function(){ SELECTORS.getBenefitLabel(benefit).addClass("active"); } - + // check and ensure conflicts constraints between checked benefits SELECTORS.getBenefitConflicts(benefit).each(function(){ let conflictId = $(this).html(); let checked = SELECTORS.getBenefitInput(conflictId).prop("checked");