Bug 896605: Updates to Gear Request Form

1 files changed, 106 insertions, 33 deletions

diff --git a/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
index 3772120a0..a3bf854ea 100644
--- a/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
@@ -71,6 +71,24 @@ items = [
 [%
 mozspaces = [
   {
+    name     => 'Berlin',
+    address1 => 'MZ Denmark ApS - Germany',
+    address2 => 'Rungestrasse 22 - 24',
+    city     => 'Berlin',
+    state    => 'Germany',
+    country  => 'Germany',
+    postcode => '10179',
+  },
+  {
+    name     => 'London',
+    address1 => 'Mozilla London',
+    address2 => '101 St. Martin\'s Lane, 3rd Floor',
+    city     => 'London',
+    state    => 'Greater London',
+    country  => 'UK',
+    postcode => 'WC2N 4AZ',
+  },
+  {
     name     => 'Mountain View',
     address1 => 'Mozilla',
     address2 => '650 Castro St., Suite 300',
@@ -80,9 +98,27 @@ mozspaces = [
     postcode => '94041-2072',
   },
   {
+    name     => 'Paris',
+    address1 => 'Mozilla',
+    address2 => '16 bis Boulevard Montmartre',
+    city     => 'Paris',
+    state    => 'Paris',
+    country  => 'France',
+    postcode => '75009',
+  },
+  {
+    name     => 'Portland',
+    address1 => 'Mozilla Portland',
+    address2 => 'Brewery Block 2, 1120 NW Couch St. Suite 320',
+    city     => 'Portland',
+    state    => 'OR',
+    country  => 'USA',
+    postcode => '97209',
+  },
+  {
     name     => 'San Francisco',
     address1 => 'Mozilla',
-    address2 => '2 Harrison Street, 7th Floor',
+    address2 => '2 Harrison Street, Suite 175',
     city     => 'San Francisco',
     state    => 'CA',
     country  => 'USA',
@@ -106,33 +142,6 @@ mozspaces = [
     country  => 'Canada',
     postcode => 'V6B 1H5',
   },
-  {
-    name     => 'London',
-    address1 => 'Mozilla London',
-    address2 => '101 St. Martin\'s Lane, 3rd Floor',
-    city     => 'London',
-    state    => 'Greater London',
-    country  => 'UK',
-    postcode => 'WC2N 4AZ',
-  },
-  {
-    name     => 'Paris',
-    address1 => 'Mozilla',
-    address2 => '28 Boulevard Poissonnière',
-    city     => 'Paris',
-    state    => 'Paris',
-    country  => 'France',
-    postcode => '75009',
-  },
-  {
-    name     => 'Berlin',
-    address1 => 'MZ Denmark ApS - Germany',
-    address2 => 'Rungestrasse 22 - 24',
-    city     => 'Berlin',
-    state    => 'Germany',
-    country  => 'Germany',
-    postcode => '10179',
-  },
 ]
 %]
 
@@ -161,6 +170,7 @@ var needed = {
   '[% item.id FILTER js %]': 0[% ',' UNLESS loop.last %]
 [% END %]
 };
+var needed_freeform = [];
 
 var gear = [
 [% FOREACH item = items %]
@@ -307,7 +317,7 @@ function onRecognitionChange() {
   getField('shiptostate').mandatory = mandatory;
   getField('shiptocountry').mandatory = mandatory;
   getField('shiptopostcode').mandatory = mandatory;
-  getField('shiptophone').mandatory = mandatory && !Dom.get('shipto_mozspace').checked;
+  getField('shiptophone').mandatory = mandatory;
   tagMandatoryFields();
 }
 
@@ -342,6 +352,25 @@ function onShipToMozSpaceClick() {
   onRecognitionChange();
 }
 
+function onAddGearChange(focusInput) {
+  var add_gear = Dom.get('add_gear').value;
+  var isFreeform = add_gear == 'custom' || add_gear == 'other';
+  if (isFreeform) {
+    Dom.addClass('quantity', 'bz_default_hidden');
+    resetFreeform();
+    Dom.get('freeform_quantity').value = Dom.get('quantity').value;
+    Dom.removeClass('freeform_quantity', 'bz_default_hidden');
+    Dom.removeClass('add_freeform', 'bz_default_hidden');
+    if (focusInput)
+      Dom.get('freeform_add').focus();
+  } else {
+    Dom.get('quantity').value = Dom.get('freeform_quantity').value;
+    Dom.removeClass('quantity', 'bz_default_hidden');
+    Dom.addClass('freeform_quantity', 'bz_default_hidden');
+    Dom.addClass('add_freeform', 'bz_default_hidden');
+  }
+}
+
 function firstChild(parent, name) {
   var a = parent.getElementsByTagName(name);
   return a.length == 0 ? false : a[0];
@@ -356,19 +385,39 @@ function getField(id) {
 }
 
 function addGear() {
-  var quantity = parseInt(Dom.get('quantity').value, 10);
   var id = Dom.get('add_gear').value;
-  if (!quantity || !id) return;
-  needed[id] += quantity;
+  if (id == 'custom' || id == 'other') {
+    var quantity = parseInt(Dom.get('freeform_quantity').value, 10);
+    var name = Dom.get('freeform_add').value;
+    if (!quantity || !name) return;
+    needed_freeform.push({ 'type': id, 'quantity': quantity, 'name': name });
+    Dom.get('add_gear').value = '';
+    resetFreeform();
+    onAddGearChange();
+  } else {
+    var quantity = parseInt(Dom.get('quantity').value, 10);
+    if (!quantity || !id) return;
+    needed[id] += quantity;
+  }
   showGear();
 }
 
+function resetFreeform() {
+  Dom.get('freeform_quantity').value = '1';
+  Dom.get('freeform_add').value = '';
+}
+
 function removeGear(id) {
   if (!id) return;
   needed[id] = 0;
   showGear();
 }
 
+function removeFreeform(index) {
+  needed_freeform.splice(index, 1);
+  showGear();
+}
+
 function showGear() {
   var html = '<table border="0" cellpadding="2" cellspacing="0">';
   var text = '';
@@ -386,6 +435,16 @@ function showGear() {
             '</tr>';
     text += needed[id] + ' x ' + id + ' ' + item.name + "\n";
   }
+  for (var i = 0, l = needed_freeform.length; i < l; i++) {
+    var item = needed_freeform[i];
+    count += item.quantity;
+    html += '<tr>' +
+            '<td>' + item.quantity + ' x&nbsp;</td>' +
+            '<td>(' + item.type + ') ' + YAHOO.lang.escapeHTML(item.name) + '</td>' +
+            '<td><button onclick="removeFreeform(\'' + i + '\');return false">Remove</button></td>' +
+            '</tr>';
+    text += item.quantity + ' x (' + item.type + ') ' + item.name + "\n";
+  }
   if (!count)
     html += '<tr><td><i>No gear selected.</i></td></tr>';
   html += '</table>';
@@ -517,7 +576,7 @@ function showGear() {
 
     <input type="text" size="2" id="quantity" value="1"
            onblur="this.value = parseInt(this.value, 10) ? Math.floor(parseInt(this.value, 10)) : 1">
-    <select id="add_gear">
+    <select id="add_gear" onChange="onAddGearChange(true)">
       <option value="">Please select..</option>
       [% first_group = 1 %]
       [% FOREACH item = items %]
@@ -530,7 +589,20 @@ function showGear() {
         [% END %]
       [% END %]
       [% "</optgroup>" UNLESS first_group %]
+      <optgroup label="otherwise">
+        <option value="custom">custom</option>
+        <option value="other">other</option>
+      </optgroup>
     </select>
+    <span id="add_freeform" class="bz_default_hidden">
+      <br>
+      Tell us how many and what you are looking for here. Add details in the
+      comments field below.
+      <br>
+      <input type="text" size="2" id="freeform_quantity" value="1"
+            onblur="this.value = parseInt(this.value, 10) ? Math.floor(parseInt(this.value, 10)) : 1">
+      <input type="text" id="freeform_add" size="40">
+    </span>
     <button onclick="addGear();return false">Add</button>
     <br>
 
@@ -744,6 +816,7 @@ function showGear() {
 <script>
   initFields();
   onPurposeChange();
+  onAddGearChange();
   tagMandatoryFields();
   showGear();
 </script>