Add other field to in-purchase address

Author: jjeffryes

js/languages/en-US.json

@@ -163,6 +163,7 @@
   "ShipToPostalCode": "Postal code",
   "ShipToOther": "Contact Information",
   "ShipToOtherPlaceholder": "Alternate method(s) the seller can use to contact you, like email",
+  "ShipToOtherPlaceholderShort": "Alternate contact method",
   "ShipToCountry": "Country",
   "EnableNotifications": "Enable Notifications",
   "SSLOn": "SSL on",

js/templates/buyAddresses.html

@@ -27,6 +27,9 @@
               <%= address.city %><% if(address.city && address.state || address.city && address.postal_code) print(",") %>
               <%= address.state %> <%= address.postal_code %>
             </div>
+            <div>
+              <%= address.other %>
+            </div>
             <div>
               <%= address.displayCountry %>
             </div>
@@ -77,6 +80,9 @@
               <%= address.city %><% if(address.city && address.state || address.city && address.postal_code) print(",") %>
               <%= address.state %> <%= address.postal_code %>
             </div>
+            <div>
+              <%= address.other %>
+            </div>
             <div>
               <%= address.displayCountry %>
             </div>

js/templates/buyWizard.html

@@ -418,7 +418,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
                 </div>
               </div>
               <div class="flexCol-7 custCol-border">
-                <input type="text" name="new_ship_to_name" class="fieldItem custCol-text" id="buyWizardNameInput" required/>
+                <input type="text"
+                       name="new_ship_to_name"
+                       class="fieldItem custCol-text"
+                       placeholder="<%= polyglot.t('ShipToName') %>"
+                       id="buyWizardNameInput" required/>
               </div>
             </div>
             <div class="flexRow">
@@ -428,7 +432,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
                 </div>
               </div>
               <div class="flexCol-7 custCol-border">
-                <input type="text" name="new_ship_to_street" class="fieldItem custCol-text" id="buyWizardStreetInput"/>
+                <input type="text"
+                       name="new_ship_to_street"
+                       class="fieldItem custCol-text"
+                       placeholder="<%= polyglot.t('ShipToStreet') %>"
+                       id="buyWizardStreetInput"/>
               </div>
             </div>
             <div class="flexRow">
@@ -438,7 +446,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
                 </div>
               </div>
               <div class="flexCol-7 custCol-border">
-                <input type="text" name="new_ship_to_city" class="fieldItem custCol-text" id="buyWizardCityInput"/>
+                <input type="text"
+                       name="new_ship_to_city"
+                       class="fieldItem custCol-text"
+                       placeholder="<%= polyglot.t('ShipToCity') %>"
+                       id="buyWizardCityInput"/>
               </div>
             </div>
             <div class="flexRow">
@@ -448,7 +460,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
                 </div>
               </div>
               <div class="flexCol-7 custCol-border">
-                <input type="text" name="new_ship_to_state" class="fieldItem custCol-text js-buyWizardStateInput" id="buyWizardStateInput"/>
+                <input type="text"
+                       name="new_ship_to_state"
+                       class="fieldItem custCol-text js-buyWizardStateInput"
+                       placeholder="<%= polyglot.t('ShipToState') %>"
+                       id="buyWizardStateInput"/>
               </div>
             </div>
             <div class="flexRow">
@@ -458,7 +474,25 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
                 </div>
               </div>
               <div class="flexCol-7 custCol-border">
-                <input type="text" name="new_ship_to_street" class="fieldItem custCol-text js-buyWizardPostalInput" id="buyWizardPostalInput"/>
+                <input type="text"
+                       name="new_ship_to_street"
+                       class="fieldItem custCol-text js-buyWizardPostalInput"
+                       placeholder="<%= polyglot.t('ShipToPostalCode') %>"
+                       id="buyWizardPostalInput"/>
+              </div>
+            </div>
+            <div class="flexRow">
+              <div class="flexCol-5 custCol-border">
+                <div class="fieldItem">
+                  <label for="buyWizardOther"><%= polyglot.t('ShipToOther') %></label>
+                </div>
+              </div>
+              <div class="flexCol-7 custCol-border">
+                <input type="text"
+                       name="new_ship_to_other"
+                       class="fieldItem custCol-text js-buyWizardPostalInput"
+                       placeholder="<%= polyglot.t('ShipToOtherPlaceholderShort') %>"
+                       id="buyWizardOther"/>
               </div>
             </div>
             <div class="flexRow">

js/views/buyWizardVw.js

@@ -340,6 +340,7 @@ module.exports = baseModal.extend({
     newAddress.city = this.$el.find('#buyWizardCityInput').val();
     newAddress.state = this.$el.find('#buyWizardStateInput').val();
     newAddress.postal_code = this.$el.find('#buyWizardPostalInput').val();
+    newAddress.other = this.$el.find('#buyWizardOther').val();
     newAddress.country = this.$el.find('#buyWizardCountryInput').val();
     newAddress.displayCountry = this.$el.find('#buyWizardCountryInput option:selected').data('name');