Add address and postal code to the payment form (#3604)

* Add address and postal code fields to the payment form

* Add validation styling for address line 2

GitOrigin-RevId: fe5467f1b3de608ccac4d9fa9fae861528b8cb2f

services/web/app/views/subscriptions/new.pug

@@ -116,7 +116,7 @@ block content
 														)
 														span.input-feedback-message  {{ simpleCCForm.firstName.$error.required ? 'This field is required' : '' }}
 												.col-xs-6
-													.form-group(for="last-name",ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-external-error' : ''")
+													.form-group(ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-external-error' : ''")
 														label(for="last-name") #{translate('last_name')}
 														input#last-name.form-control(
 															type="text"
@@ -173,21 +173,62 @@ block content
 															) ?
 
 										div
-											.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-external-error' : ''")
-												label(for="country") #{translate('country')}
-												select#country.form-control(
-													data-recurly="country"
-													ng-model="data.country"
-													name="country"
-													ng-change="updateCountry()"
-													ng-selected="{{country.code == data.country}}"
-													ng-model-options="{ debounce: 200 }"
-													required
-												)
-													option(value='', disabled) #{translate("country")}
-													option(value='-', disabled) --------------
-													option(ng-repeat="country in countries" ng-bind-html="country.name" value="{{country.code}}")
-												span.input-feedback-message {{ simpleCCForm.country.$error.required ? 'This field is required' : '' }}
+											.row
+												.col-xs-12
+													.form-group(ng-class="validation.errorFields.address1 || inputHasError(simpleCCForm.address1) ? 'has-external-error' : ''")
+														label(for="address-line-1") #{translate('address_line_1')}
+														input#address-line-1.form-control(
+															type="text"
+															maxlength="255"
+															data-recurly="address1"
+															name="address1"
+															ng-model="data.address1"
+															required
+														)
+														span.input-feedback-message  {{ simpleCCForm.address1.$error.required ? 'This field is required' : '' }}
+											
+											.row
+												.col-xs-12
+													.form-group.has-feedback(ng-class="validation.errorFields.address2 ? 'has-external-error' : ''")
+														label(for="address-line-2") #{translate('address_line_2')}
+														input#address-line-2.form-control(
+															type="text"
+															maxlength="255"
+															data-recurly="address2"
+															name="address2"
+															ng-model="data.address2"
+														)
+												
+											.row
+												.col-xs-4
+													.form-group(ng-class="validation.errorFields.postal_code || inputHasError(simpleCCForm.postalCode) ? 'has-external-error' : ''")
+														label(for="postal-code") #{translate('postal_code')}
+														input#postal-code.form-control(
+															type="text"
+															maxlength="255"
+															data-recurly="postal_code"
+															name="postalCode"
+															ng-model="data.postal_code"
+															required
+														)
+														span.input-feedback-message  {{ simpleCCForm.postalCode.$error.required ? 'This field is required' : '' }}
+												
+												.col-xs-8
+													.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-external-error' : ''")
+														label(for="country") #{translate('country')}
+														select#country.form-control(
+															data-recurly="country"
+															ng-model="data.country"
+															name="country"
+															ng-change="updateCountry()"
+															ng-selected="{{country.code == data.country}}"
+															ng-model-options="{ debounce: 200 }"
+															required
+														)
+															option(value='', disabled) #{translate("country")}
+															option(value='-', disabled) --------------
+															option(ng-repeat="country in countries" ng-bind-html="country.name" value="{{country.code}}")
+														span.input-feedback-message {{ simpleCCForm.country.$error.required ? 'This field is required' : '' }}
 
 											.form-group
 												.checkbox

services/web/frontend/js/main/new-subscription.js

@@ -238,7 +238,7 @@ export default App.controller('NewSubscriptionController', function(
             address2: $scope.data.address2,
             country: $scope.data.country,
             state: $scope.data.state,
-            postal_code: $scope.data.postal_code
+            zip: $scope.data.postal_code
           },
           ITMCampaign: window.ITMCampaign,
           ITMContent: window.ITMContent

services/web/locales/en.json

@@ -1,4 +1,7 @@
 {
+  "address_line_1": "Address",
+  "address_line_2": "Address (line 2, optional)",
+  "postal_code": "Postal Code",
   "reload_editor": "Reload editor",
   "logs_pane_beta_message": "We are beta testing a new logs pane",
   "logs_pane_beta_message_popup": "We are beta testing a new logs pane. Click here to give feedback and manage your beta program membership.",