Topic/sponsorship form fixes (#1761)

* Add sticky class to packages benefits

* Display message if benefits customization

* Replace disclaimer text about benefits customizations and price

* Update package selection color to fits better with background

* Display cost text change as legend

Author: berinhard

static/js/sponsors/applicationForm.js

@@ -45,6 +45,9 @@ $(document).ready(function(){
       benefitInput.prop("checked", true);
     });
 
+    // hide previous custom fee messages
+    $('.custom-fee').hide();
+
     mobileUpdate(package);
   });
 });
@@ -80,9 +83,23 @@ function benefitUpdate(benefitId, packageId) {
   const hiddenInput = benefitsInputs.filter((b) => b.getAttribute('data-benefit-id') == benefitId)[0];
   hiddenInput.checked = !hiddenInput.checked;
   clickedImg.src = newSrc;
-};
 
+  // Check if there are any type of customization. If so, display custom-fee label.
+  let pkgBenefits = Array(...document.getElementById(`package_benefits_${packageId}`).children).map(div => div.textContent).sort();
+  let checkedBenefis = Array(...document.querySelectorAll('[data-benefit-id]')).filter(e => e.checked).map(input => input.value).sort();
+
+  const hasAllBenefts = pkgBenefits.reduce((sum, id) => sum && checkedBenefis.includes(id), true);
+  const sameBenefitsNum = pkgBenefits.length === checkedBenefis.length;
+
+  const customFeeElems = Array(...document.getElementsByClassName(`custom-fee-${packageId}`));
+  if (hasAllBenefts && sameBenefitsNum) {
+    customFeeElems.map(e => e.style.display = 'none');
+  } else {
+    customFeeElems.map(e => e.style.display = 'initial');
+  }
+};
 
+// Callback function when user selects a package;
 function updatePackageInput(packageId){
   const packageInput = document.getElementById(`id_package_${ packageId }`);
   packageInput.click();

static/sass/style.css

@@ -3808,8 +3808,11 @@ span.highlighted {
     border-bottom: none; }
   #select_sponsorship_benefits_container #benefitsTable .package-input {
     cursor: pointer; }
-    #select_sponsorship_benefits_container #benefitsTable .package-input span {
+    #select_sponsorship_benefits_container #benefitsTable .package-input .package-price {
       padding-bottom: 0.5em; }
+    #select_sponsorship_benefits_container #benefitsTable .package-input .custom-fee {
+      font-size: 75%;
+      display: none; }
     #select_sponsorship_benefits_container #benefitsTable .package-input h4 {
       transform: rotateY(35deg); }
   #select_sponsorship_benefits_container #benefitsTable .selected {
@@ -3909,6 +3912,24 @@ span.highlighted {
     @media (max-width: 1200px) and (max-width: 640px) {
       #select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
         width: 80%; } }
+@media (min-width: 1200px) {
+  #select_sponsorship_benefits_container {
+    /* Destkop version have the package selection row as a fixed header after some scrolling.
+       This CSS block address this logic.
+     */ }
+    #select_sponsorship_benefits_container .sticky {
+      position: -webkit-sticky;
+      /* for Safari */
+      position: sticky;
+      top: 0;
+      background-color: #fcfcfc;
+      *zoom: 1;
+      filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF9F9F9', endColorstr='#FFFCFCFC');
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f9f9f9), color-stop(90%, #fcfcfc));
+      background-image: -webkit-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
+      background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
+      background-image: -o-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
+      background-image: linear-gradient(#f9f9f9 10%, #fcfcfc 90%); } }
 
 #thank-you-container {
   background: #417DAF;

static/sass/style.scss

@@ -2673,10 +2673,15 @@ $breakpoint-desktop: 1200px;
     }
 
     .package-input {
-      span {
+      .package-price {
         padding-bottom: 0.5em;
       }
 
+      .custom-fee {
+        font-size: 75%;
+        display: none;
+      }
+
       h4 {
         transform: rotateY(35deg);
       }
@@ -2831,6 +2836,21 @@ $breakpoint-desktop: 1200px;
       }
     }
   }
+
+
+  @media (min-width: $breakpoint-desktop) {
+    /* Destkop version have the package selection row as a fixed header after some scrolling.
+       This CSS block address this logic.
+     */
+    .sticky {
+      position: -webkit-sticky; /* for Safari */
+      position: sticky;
+      top: 0;
+//background-color: #fcfcfc;  /* same as content-wrapper */
+      @include vertical-gradient(#f9f9f9, #fcfcfc);
+    }
+  }
+
 }
 
 #thank-you-container {

templates/sponsors/sponsorship_benefits_form.html

@@ -14,6 +14,7 @@
     <div id="select_sponsorship_benefits_container">
       <h1>Sponsor the PSF</h1>
       <p>Select a sponsorship package or customize the benefits that make the most sense for your business.</p>
+      <p><small>The listed sponsorship costs are subject to change if customization to selected benefits are made.</small></p>
       <br/>
 
       <div class="row section-title">
@@ -24,7 +25,7 @@ <h4 class="col">Select a Sponsorship Package</h4>
       <div id="benefitsTable">
 
         <!-- Package selection --!>
-        <div id="package-selection">
+        <div id="package-selection" class="sticky">
           <div class="row no-border">
              <span class="col">
                {% if form.errors %}
@@ -44,8 +45,9 @@ <h4 class="col">Select a Sponsorship Package</h4>
              {% for package in form.fields.package.queryset %}
              <div class="col col-items package-input" data-package-id="{{ package.id}}" onclick="updatePackageInput({{forloop.counter0}})">
                <h4>{{ package.name|upper }}</h4>
-               <span>${{ package.sponsorship_amount|intcomma }}</span>
+               <span class="package-price">${{ package.sponsorship_amount|intcomma }}<span class="custom-fee-{{ package.id }} custom-fee">*</span></span>
                <input type="radio" name="package" value="{{ package.id }}" id="id_package_{{ forloop.counter0 }}" {% if package.id == form.initial.package %}checked="checked"{% endif %} data-pos={{ forloop.counter0 }} />
+               <span class="custom-fee-{{ package.id }} custom-fee">* Subject to change</span>
              </div>
              {% endfor %}
           </div>