Add billing address component for paid signup flow

This is part of the paid signup flow

ee/app/assets/javascripts/subscriptions/new/components/checkout.vue

@@ -2,9 +2,10 @@
 import { s__ } from '~/locale';
 import ProgressBar from './checkout/progress_bar.vue';
 import SubscriptionDetails from './checkout/subscription_details.vue';
+import BillingAddress from './checkout/billing_address.vue';
 
 export default {
-  components: { ProgressBar, SubscriptionDetails },
+  components: { ProgressBar, SubscriptionDetails, BillingAddress },
   i18n: {
     checkout: s__('Checkout|Checkout'),
   },
@@ -17,6 +18,7 @@ export default {
       <div class="flash-container"></div>
       <h2 class="mt-4 mb-3 mb-lg-5">{{ $options.i18n.checkout }}</h2>
       <subscription-details />
+      <billing-address />
     </div>
   </div>
 </template>

ee/app/assets/javascripts/subscriptions/new/components/checkout/billing_address.vue

+<script>
+import _ from 'underscore';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+import { mapState, mapActions } from 'vuex';
+import { GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import Step from './components/step.vue';
+
+export default {
+  components: {
+    Step,
+    GlFormGroup,
+    GlFormInput,
+    GlFormSelect,
+  },
+  directives: {
+    autofocusonshow,
+  },
+  computed: {
+    ...mapState([
+      'country',
+      'streetAddressLine1',
+      'streetAddressLine2',
+      'city',
+      'countryState',
+      'zipCode',
+      'countryOptions',
+      'stateOptions',
+    ]),
+    countryModel: {
+      get() {
+        return this.country;
+      },
+      set(country) {
+        this.updateCountry(country);
+      },
+    },
+    streetAddressLine1Model: {
+      get() {
+        return this.streetAddressLine1;
+      },
+      set(streetAddressLine1) {
+        this.updateStreetAddressLine1(streetAddressLine1);
+      },
+    },
+    streetAddressLine2Model: {
+      get() {
+        return this.streetAddressLine2;
+      },
+      set(streetAddressLine2) {
+        this.updateStreetAddressLine2(streetAddressLine2);
+      },
+    },
+    cityModel: {
+      get() {
+        return this.city;
+      },
+      set(city) {
+        this.updateCity(city);
+      },
+    },
+    countryStateModel: {
+      get() {
+        return this.countryState;
+      },
+      set(countryState) {
+        this.updateCountryState(countryState);
+      },
+    },
+    zipCodeModel: {
+      get() {
+        return this.zipCode;
+      },
+      set(zipCode) {
+        this.updateZipCode(zipCode);
+      },
+    },
+    isValid() {
+      return (
+        !_.isEmpty(this.country) &&
+        !_.isEmpty(this.streetAddressLine1) &&
+        !_.isEmpty(this.city) &&
+        !_.isEmpty(this.zipCode)
+      );
+    },
+    countryOptionsWithDefault() {
+      return [
+        {
+          text: this.$options.i18n.countrySelectPrompt,
+          value: null,
+        },
+        ...this.countryOptions,
+      ];
+    },
+    stateOptionsWithDefault() {
+      return [
+        {
+          text: this.$options.i18n.stateSelectPrompt,
+          value: null,
+        },
+        ...this.stateOptions,
+      ];
+    },
+  },
+  mounted() {
+    this.fetchCountries();
+  },
+  methods: {
+    ...mapActions([
+      'fetchCountries',
+      'fetchStates',
+      'updateCountry',
+      'updateStreetAddressLine1',
+      'updateStreetAddressLine2',
+      'updateCity',
+      'updateCountryState',
+      'updateZipCode',
+    ]),
+  },
+  i18n: {
+    stepTitle: s__('Checkout|Billing address'),
+    nextStepButtonText: s__('Checkout|Continue to payment'),
+    countryLabel: s__('Checkout|Country'),
+    countrySelectPrompt: s__('Checkout|Please select a country'),
+    streetAddressLabel: s__('Checkout|Street address'),
+    cityLabel: s__('Checkout|City'),
+    stateLabel: s__('Checkout|State'),
+    stateSelectPrompt: s__('Checkout|Please select a state'),
+    zipCodeLabel: s__('Checkout|Zip code'),
+  },
+};
+</script>
+<template>
+  <step
+    step="billingAddress"
+    :title="$options.i18n.stepTitle"
+    :is-valid="isValid"
+    :next-step-button-text="$options.i18n.nextStepButtonText"
+  >
+    <template #body>
+      <gl-form-group :label="$options.i18n.countryLabel" label-size="sm" class="mb-3">
+        <gl-form-select
+          v-model="countryModel"
+          v-autofocusonshow
+          :options="countryOptionsWithDefault"
+          class="js-country"
+          @change="fetchStates"
+        />
+      </gl-form-group>
+      <gl-form-group :label="$options.i18n.streetAddressLabel" label-size="sm" class="mb-3">
+        <gl-form-input v-model="streetAddressLine1Model" type="text" />
+        <gl-form-input v-model="streetAddressLine2Model" type="text" class="mt-2" />
+      </gl-form-group>
+      <gl-form-group :label="$options.i18n.cityLabel" label-size="sm" class="mb-3">
+        <gl-form-input v-model="cityModel" type="text" />
+      </gl-form-group>
+      <div class="combined d-flex">
+        <gl-form-group :label="$options.i18n.stateLabel" label-size="sm" class="mr-3 w-50">
+          <gl-form-select v-model="countryStateModel" :options="stateOptionsWithDefault" />
+        </gl-form-group>
+        <gl-form-group :label="$options.i18n.zipCodeLabel" label-size="sm" class="w-50">
+          <gl-form-input v-model="zipCodeModel" type="text" />
+        </gl-form-group>
+      </div>
+    </template>
+    <template #summary>
+      <div class="js-summary-line-1">{{ streetAddressLine1 }}</div>
+      <div class="js-summary-line-2">{{ streetAddressLine2 }}</div>
+      <div class="js-summary-line-3">{{ city }}, {{ countryState }} {{ zipCode }}</div>
+    </template>
+  </step>
+</template>

ee/app/assets/javascripts/subscriptions/new/constants.js

-export const STEPS = ['subscriptionDetails'];
+export const STEPS = ['subscriptionDetails', 'billingAddress'];
+
+export const COUNTRIES_URL = '/-/countries';
+
+export const STATES_URL = '/-/country_states';
 
 export const TAX_RATE = 0;

ee/app/assets/javascripts/subscriptions/new/store/actions.js

 import * as types from './mutation_types';
-import { STEPS } from '../constants';
+import axios from '~/lib/utils/axios_utils';
+import { s__ } from '~/locale';
+import createFlash from '~/flash';
+import { STEPS, COUNTRIES_URL, STATES_URL } from '../constants';
 
 export const activateStep = ({ commit }, currentStep) => {
   if (STEPS.includes(currentStep)) {
@@ -32,3 +35,72 @@ export const updateNumberOfUsers = ({ commit }, numberOfUsers) => {
 export const updateOrganizationName = ({ commit }, organizationName) => {
   commit(types.UPDATE_ORGANIZATION_NAME, organizationName);
 };
+
+export const fetchCountries = ({ dispatch }) => {
+  axios
+    .get(COUNTRIES_URL)
+    .then(({ data }) => dispatch('fetchCountriesSuccess', data))
+    .catch(() => dispatch('fetchCountriesError'));
+};
+
+export const fetchCountriesSuccess = ({ commit }, data = []) => {
+  const countries = data.map(country => ({ text: country[0], value: country[1] }));
+
+  commit(types.UPDATE_COUNTRY_OPTIONS, countries);
+};
+
+export const fetchCountriesError = () => {
+  createFlash(s__('Checkout|Failed to load countries. Please try again.'));
+};
+
+export const fetchStates = ({ state, dispatch }) => {
+  dispatch('resetStates');
+
+  if (!state.country) {
+    return;
+  }
+
+  axios
+    .get(STATES_URL, { params: { country: state.country } })
+    .then(({ data }) => dispatch('fetchStatesSuccess', data))
+    .catch(() => dispatch('fetchStatesError'));
+};
+
+export const fetchStatesSuccess = ({ commit }, data = {}) => {
+  const states = Object.keys(data).map(state => ({ text: state, value: data[state] }));
+
+  commit(types.UPDATE_STATE_OPTIONS, states);
+};
+
+export const fetchStatesError = () => {
+  createFlash(s__('Checkout|Failed to load states. Please try again.'));
+};
+
+export const resetStates = ({ commit }) => {
+  commit(types.UPDATE_COUNTRY_STATE, null);
+  commit(types.UPDATE_STATE_OPTIONS, []);
+};
+
+export const updateCountry = ({ commit }, country) => {
+  commit(types.UPDATE_COUNTRY, country);
+};
+
+export const updateStreetAddressLine1 = ({ commit }, streetAddressLine1) => {
+  commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, streetAddressLine1);
+};
+
+export const updateStreetAddressLine2 = ({ commit }, streetAddressLine2) => {
+  commit(types.UPDATE_STREET_ADDRESS_LINE_TWO, streetAddressLine2);
+};
+
+export const updateCity = ({ commit }, city) => {
+  commit(types.UPDATE_CITY, city);
+};
+
+export const updateCountryState = ({ commit }, countryState) => {
+  commit(types.UPDATE_COUNTRY_STATE, countryState);
+};
+
+export const updateZipCode = ({ commit }, zipCode) => {
+  commit(types.UPDATE_ZIP_CODE, zipCode);
+};

ee/app/assets/javascripts/subscriptions/new/store/mutation_types.js

@@ -7,3 +7,19 @@ export const UPDATE_IS_SETUP_FOR_COMPANY = 'UPDATE_IS_SETUP_FOR_COMPANY';
 export const UPDATE_NUMBER_OF_USERS = 'UPDATE_NUMBER_OF_USERS';
 
 export const UPDATE_ORGANIZATION_NAME = 'UPDATE_ORGANIZATION_NAME';
+
+export const UPDATE_COUNTRY_OPTIONS = 'UPDATE_COUNTRY_OPTIONS';
+
+export const UPDATE_STATE_OPTIONS = 'UPDATE_STATE_OPTIONS';
+
+export const UPDATE_COUNTRY = 'UPDATE_COUNTRY';
+
+export const UPDATE_STREET_ADDRESS_LINE_ONE = 'UPDATE_STREET_ADDRESS_LINE_ONE';
+
+export const UPDATE_STREET_ADDRESS_LINE_TWO = 'UPDATE_STREET_ADDRESS_LINE_TWO';
+
+export const UPDATE_CITY = 'UPDATE_CITY';
+
+export const UPDATE_COUNTRY_STATE = 'UPDATE_COUNTRY_STATE';
+
+export const UPDATE_ZIP_CODE = 'UPDATE_ZIP_CODE';

ee/app/assets/javascripts/subscriptions/new/store/mutations.js

@@ -20,4 +20,36 @@ export default {
   [types.UPDATE_ORGANIZATION_NAME](state, organizationName) {
     state.organizationName = organizationName;
   },
+
+  [types.UPDATE_COUNTRY_OPTIONS](state, countryOptions) {
+    state.countryOptions = countryOptions;
+  },
+
+  [types.UPDATE_STATE_OPTIONS](state, stateOptions) {
+    state.stateOptions = stateOptions;
+  },
+
+  [types.UPDATE_COUNTRY](state, country) {
+    state.country = country;
+  },
+
+  [types.UPDATE_STREET_ADDRESS_LINE_ONE](state, streetAddressLine1) {
+    state.streetAddressLine1 = streetAddressLine1;
+  },
+
+  [types.UPDATE_STREET_ADDRESS_LINE_TWO](state, streetAddressLine2) {
+    state.streetAddressLine2 = streetAddressLine2;
+  },
+
+  [types.UPDATE_CITY](state, city) {
+    state.city = city;
+  },
+
+  [types.UPDATE_COUNTRY_STATE](state, countryState) {
+    state.countryState = countryState;
+  },
+
+  [types.UPDATE_ZIP_CODE](state, zipCode) {
+    state.zipCode = zipCode;
+  },
 };

ee/app/assets/javascripts/subscriptions/new/store/state.js

@@ -27,6 +27,14 @@ export default ({ planData = '[]', planId, setupForCompany, fullName }) => {
     fullName,
     organizationName: null,
     numberOfUsers: parseBoolean(setupForCompany) ? 0 : 1,
+    country: null,
+    streetAddressLine1: null,
+    streetAddressLine2: null,
+    city: null,
+    countryState: null,
+    zipCode: null,
+    countryOptions: [],
+    stateOptions: [],
     taxRate: TAX_RATE,
     startDate: new Date(Date.now()),
   };

ee/app/assets/stylesheets/pages/subscriptions.scss

@@ -83,15 +83,19 @@ $subscriptions-full-width-lg: 541px;
     flex-grow: 1;
     max-width: 420px;
 
+    legend {
+      border-bottom: 0;
+      font-weight: $gl-font-weight-bold;
+    }
+
     .gl-form-input,
     .gl-form-select {
       height: 32px;
+      line-height: 1rem;
     }
   }
 
   .number {
-    width: 50%;
-
     @media(min-width: map-get($grid-breakpoints, lg)) {
       max-width: 202px;
     }
@@ -99,7 +103,6 @@ $subscriptions-full-width-lg: 541px;
 
   .label {
     padding: 0;
-    width: 50%;
 
     .gl-link {
       font-size: inherit;

ee/spec/frontend/subscriptions/new/components/checkout/billing_address_spec.js

+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import createStore from 'ee/subscriptions/new/store';
+import * as types from 'ee/subscriptions/new/store/mutation_types';
+import Step from 'ee/subscriptions/new/components/checkout/components/step.vue';
+import Component from 'ee/subscriptions/new/components/checkout/billing_address.vue';
+
+describe('Billing Address', () => {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  let store;
+  let wrapper;
+
+  const methodMocks = {
+    fetchCountries: jest.fn(),
+    fetchStates: jest.fn(),
+  };
+
+  const createComponent = () => {
+    wrapper = mount(Component, {
+      localVue,
+      store,
+      methods: methodMocks,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('mounted', () => {
+    it('should load the countries', () => {
+      expect(methodMocks.fetchCountries).toHaveBeenCalled();
+    });
+  });
+
+  describe('country options', () => {
+    const countrySelect = () => wrapper.find('.js-country');
+
+    beforeEach(() => {
+      store.commit(types.UPDATE_COUNTRY_OPTIONS, [{ text: 'Netherlands', value: 'NL' }]);
+    });
+
+    it('should display the select prompt', () => {
+      expect(countrySelect().html()).toContain('<option value="">Please select a country</option>');
+    });
+
+    it('should display the countries returned from the server', () => {
+      expect(countrySelect().html()).toContain('<option value="NL">Netherlands</option>');
+    });
+
+    it('should fetch states when selecting a country', () => {
+      countrySelect().trigger('change');
+
+      return localVue.nextTick().then(() => {
+        expect(methodMocks.fetchStates).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('validations', () => {
+    const isStepValid = () => wrapper.find(Step).props('isValid');
+
+    beforeEach(() => {
+      store.commit(types.UPDATE_COUNTRY, 'country');
+      store.commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, 'address line 1');
+      store.commit(types.UPDATE_CITY, 'city');
+      store.commit(types.UPDATE_ZIP_CODE, 'zip');
+    });
+
+    it('should be valid when country, streetAddressLine1, city and zipCode have been entered', () => {
+      expect(isStepValid()).toBe(true);
+    });
+
+    it('should be invalid when country is undefined', () => {
+      store.commit(types.UPDATE_COUNTRY, null);
+
+      return localVue.nextTick().then(() => {
+        expect(isStepValid()).toBe(false);
+      });
+    });
+
+    it('should be invalid when streetAddressLine1 is undefined', () => {
+      store.commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, null);
+
+      return localVue.nextTick().then(() => {
+        expect(isStepValid()).toBe(false);
+      });
+    });
+
+    it('should be invalid when city is undefined', () => {
+      store.commit(types.UPDATE_CITY, null);
+
+      return localVue.nextTick().then(() => {
+        expect(isStepValid()).toBe(false);
+      });
+    });
+
+    it('should be invalid when zipCode is undefined', () => {
+      store.commit(types.UPDATE_ZIP_CODE, null);
+
+      return localVue.nextTick().then(() => {
+        expect(isStepValid()).toBe(false);
+      });
+    });
+  });
+
+  describe('showing the summary', () => {
+    beforeEach(() => {
+      store.commit(types.UPDATE_COUNTRY, 'country');
+      store.commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, 'address line 1');
+      store.commit(types.UPDATE_STREET_ADDRESS_LINE_TWO, 'address line 2');
+      store.commit(types.UPDATE_COUNTRY_STATE, 'state');
+      store.commit(types.UPDATE_CITY, 'city');
+      store.commit(types.UPDATE_ZIP_CODE, 'zip');
+      store.commit(types.UPDATE_CURRENT_STEP, 'nextStep');
+    });
+
+    it('should show the entered address line 1', () => {
+      expect(wrapper.find('.js-summary-line-1').text()).toEqual('address line 1');
+    });
+
+    it('should show the entered address line 2', () => {
+      expect(wrapper.find('.js-summary-line-2').text()).toEqual('address line 2');
+    });
+
+    it('should show the entered address city, state and zip code', () => {
+      expect(wrapper.find('.js-summary-line-3').text()).toEqual('city, state zip');
+    });
+  });
+});

ee/spec/frontend/subscriptions/new/components/checkout/components/step_spec.js

@@ -3,17 +3,16 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import createStore from 'ee/subscriptions/new/store';
 import * as constants from 'ee/subscriptions/new/constants';
-import component from 'ee/subscriptions/new/components/checkout/components/step.vue';
+import Component from 'ee/subscriptions/new/components/checkout/components/step.vue';
 import StepSummary from 'ee/subscriptions/new/components/checkout/components/step_summary.vue';
 
 describe('Step', () => {
   const localVue = createLocalVue();
   localVue.use(Vuex);
 
+  let store;
   let wrapper;
 
-  const store = createStore();
-
   const initialProps = {
     step: 'secondStep',
     isValid: true,
@@ -21,11 +20,11 @@ describe('Step', () => {
     nextStepButtonText: 'next',
   };
 
-  const factory = propsData => {
-    wrapper = shallowMount(component, {
-      store,
+  const createComponent = propsData => {
+    wrapper = shallowMount(Component, {
       propsData: { ...initialProps, ...propsData },
       localVue,
+      store,
     });
   };
 
@@ -36,6 +35,7 @@ describe('Step', () => {
   constants.STEPS = ['firstStep', 'secondStep'];
 
   beforeEach(() => {
+    store = createStore();
     store.dispatch('activateStep', 'secondStep');
   });
 
@@ -45,14 +45,14 @@ describe('Step', () => {
 
   describe('Step Body', () => {
     it('should display the step body when this step is the current step', () => {
-      factory();
+      createComponent();
 
       expect(wrapper.find('.card > div').attributes('style')).toBeUndefined();
     });
 
     it('should not display the step body when this step is not the current step', () => {
       activatePreviousStep();
-      factory();
+      createComponent();
 
       expect(wrapper.find('.card > div').attributes('style')).toBe('display: none;');
     });
@@ -61,26 +61,26 @@ describe('Step', () => {
   describe('Step Summary', () => {
     it('should be shown when this step is valid and not active', () => {
       activatePreviousStep();
-      factory();
+      createComponent();
 
       expect(wrapper.find(StepSummary).exists()).toBe(true);
     });
 
     it('should not be shown when this step is not valid and not active', () => {
       activatePreviousStep();
-      factory({ isValid: false });
+      createComponent({ isValid: false });
 
       expect(wrapper.find(StepSummary).exists()).toBe(false);
     });
 
     it('should not be shown when this step is valid and active', () => {
-      factory();
+      createComponent();
 
       expect(wrapper.find(StepSummary).exists()).toBe(false);
     });
 
     it('should not be shown when this step is not valid and active', () => {
-      factory({ isValid: false });
+      createComponent({ isValid: false });
 
       expect(wrapper.find(StepSummary).exists()).toBe(false);
     });
@@ -88,7 +88,7 @@ describe('Step', () => {
 
   describe('isEditable', () => {
     it('should set the isEditable property to true when this step is finished and comes before the current step', () => {
-      factory({ step: 'firstStep' });
+      createComponent({ step: 'firstStep' });
 
       expect(wrapper.find(StepSummary).props('isEditable')).toBe(true);
     });
@@ -97,13 +97,13 @@ describe('Step', () => {
   describe('Showing the summary', () => {
     it('shows the summary when this step is finished', () => {
       activatePreviousStep();
-      factory();
+      createComponent();
 
       expect(wrapper.find(StepSummary).exists()).toBe(true);
     });
 
     it('does not show the summary when this step is not finished', () => {
-      factory();
+      createComponent();
 
       expect(wrapper.find(StepSummary).exists()).toBe(false);
     });
@@ -111,25 +111,25 @@ describe('Step', () => {
 
   describe('Next button', () => {
     it('shows the next button when the text was passed', () => {
-      factory();
+      createComponent();
 
       expect(wrapper.text()).toBe('next');
     });
 
     it('does not show the next button when no text was passed', () => {
-      factory({ nextStepButtonText: '' });
+      createComponent({ nextStepButtonText: '' });
 
       expect(wrapper.text()).toBe('');
     });
 
     it('is disabled when this step is not valid', () => {
-      factory({ isValid: false });
+      createComponent({ isValid: false });
 
       expect(wrapper.find(GlButton).attributes('disabled')).toBe('true');
     });
 
     it('is enabled when this step is valid', () => {
-      factory();
+      createComponent();
 
       expect(wrapper.find(GlButton).attributes('disabled')).toBeUndefined();
     });

ee/spec/frontend/subscriptions/new/components/checkout/progress_bar_spec.js

-import { shallowMount } from '@vue/test-utils';
-import component from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Component from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
 
 describe('Progress Bar', () => {
+  const localVue = createLocalVue();
+
   let wrapper;
 
-  const factory = propsData => {
-    wrapper = shallowMount(component, {
+  const createComponent = propsData => {
+    wrapper = shallowMount(Component, {
       propsData,
+      localVue,
     });
   };
 
@@ -14,7 +17,7 @@ describe('Progress Bar', () => {
   const secondStep = () => wrapper.find('.bar div:nth-child(2)');
 
   beforeEach(() => {
-    factory({ step: 2 });
+    createComponent({ step: 2 });
   });
 
   afterEach(() => {

ee/spec/frontend/subscriptions/new/components/checkout/subscription_details_spec.js

@@ -9,6 +9,7 @@ describe('Subscription Details', () => {
   const localVue = createLocalVue();
   localVue.use(Vuex);
 
+  let store;
   let wrapper;
 
   const planData = [
@@ -23,17 +24,17 @@ describe('Subscription Details', () => {
     fullName: 'Full Name',
   };
 
-  const store = createStore(initialData);
+  const isStepValid = () => wrapper.find(Step).props('isValid');
 
-  const createComponent = (opts = {}) => {
+  const createComponent = () => {
     wrapper = mount(Component, {
       localVue,
       store,
-      ...opts,
     });
   };
 
   beforeEach(() => {
+    store = createStore(initialData);
     createComponent();
   });
 
@@ -41,8 +42,6 @@ describe('Subscription Details', () => {
     wrapper.destroy();
   });
 
-  const isStepValid = () => wrapper.find(Step).props('isValid');
-
   describe('Setting up for personal use', () => {
     beforeEach(() => {
       store.commit(types.UPDATE_IS_SETUP_FOR_COMPANY, false);

ee/spec/frontend/subscriptions/new/store/actions_spec.js

 import testAction from 'helpers/vuex_action_helper';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
 import * as actions from 'ee/subscriptions/new/store/actions';
 import * as constants from 'ee/subscriptions/new/constants';
 
+jest.mock('~/flash');
+
 constants.STEPS = ['firstStep', 'secondStep'];
 
+let mock;
+
 describe('Subscriptions Actions', () => {
   describe('activateStep', () => {
     it('set the currentStep to the provided value', done => {
@@ -101,4 +108,237 @@ describe('Subscriptions Actions', () => {
       );
     });
   });
+
+  describe('fetchCountries', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('calls fetchCountriesSuccess with the returned data on success', done => {
+      mock.onGet(constants.COUNTRIES_URL).replyOnce(200, ['Netherlands', 'NL']);
+
+      testAction(
+        actions.fetchCountries,
+        null,
+        {},
+        [],
+        [{ type: 'fetchCountriesSuccess', payload: ['Netherlands', 'NL'] }],
+        done,
+      );
+    });
+
+    it('calls fetchCountriesError on error', done => {
+      mock.onGet(constants.COUNTRIES_URL).replyOnce(500);
+
+      testAction(actions.fetchCountries, null, {}, [], [{ type: 'fetchCountriesError' }], done);
+    });
+  });
+
+  describe('fetchCountriesSuccess', () => {
+    it('transforms and adds fetched countryOptions', done => {
+      testAction(
+        actions.fetchCountriesSuccess,
+        [['Netherlands', 'NL']],
+        {},
+        [{ type: 'UPDATE_COUNTRY_OPTIONS', payload: [{ text: 'Netherlands', value: 'NL' }] }],
+        [],
+        done,
+      );
+    });
+
+    it('adds an empty array when no data provided', done => {
+      testAction(
+        actions.fetchCountriesSuccess,
+        undefined,
+        {},
+        [{ type: 'UPDATE_COUNTRY_OPTIONS', payload: [] }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchCountriesError', () => {
+    it('creates a flash', done => {
+      testAction(actions.fetchCountriesError, null, {}, [], [], () => {
+        expect(createFlash).toHaveBeenCalledWith('Failed to load countries. Please try again.');
+        done();
+      });
+    });
+  });
+
+  describe('fetchStates', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('calls resetStates and fetchStatesSuccess with the returned data on success', done => {
+      mock
+        .onGet(constants.STATES_URL, { params: { country: 'NL' } })
+        .replyOnce(200, { utrecht: 'UT' });
+
+      testAction(
+        actions.fetchStates,
+        null,
+        { country: 'NL' },
+        [],
+        [{ type: 'resetStates' }, { type: 'fetchStatesSuccess', payload: { utrecht: 'UT' } }],
+        done,
+      );
+    });
+
+    it('only calls resetStates when no country selected', done => {
+      mock.onGet(constants.STATES_URL).replyOnce(500);
+
+      testAction(actions.fetchStates, null, { country: null }, [], [{ type: 'resetStates' }], done);
+    });
+
+    it('calls resetStates and fetchStatesError on error', done => {
+      mock.onGet(constants.STATES_URL).replyOnce(500);
+
+      testAction(
+        actions.fetchStates,
+        null,
+        { country: 'NL' },
+        [],
+        [{ type: 'resetStates' }, { type: 'fetchStatesError' }],
+        done,
+      );
+    });
+  });
+
+  describe('fetchStatesSuccess', () => {
+    it('transforms and adds received stateOptions', done => {
+      testAction(
+        actions.fetchStatesSuccess,
+        { Utrecht: 'UT' },
+        {},
+        [{ type: 'UPDATE_STATE_OPTIONS', payload: [{ text: 'Utrecht', value: 'UT' }] }],
+        [],
+        done,
+      );
+    });
+
+    it('adds an empty array when no data provided', done => {
+      testAction(
+        actions.fetchStatesSuccess,
+        undefined,
+        {},
+        [{ type: 'UPDATE_STATE_OPTIONS', payload: [] }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchStatesError', () => {
+    it('creates a flash', done => {
+      testAction(actions.fetchStatesError, null, {}, [], [], () => {
+        expect(createFlash).toHaveBeenCalledWith('Failed to load states. Please try again.');
+        done();
+      });
+    });
+  });
+
+  describe('resetStates', () => {
+    it('resets the selected state and sets the stateOptions to the initial value', done => {
+      testAction(
+        actions.resetStates,
+        null,
+        {},
+        [
+          { type: 'UPDATE_COUNTRY_STATE', payload: null },
+          { type: 'UPDATE_STATE_OPTIONS', payload: [] },
+        ],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateCountry', () => {
+    it('updates country to the provided value', done => {
+      testAction(
+        actions.updateCountry,
+        'country',
+        {},
+        [{ type: 'UPDATE_COUNTRY', payload: 'country' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateStreetAddressLine1', () => {
+    it('updates streetAddressLine1 to the provided value', done => {
+      testAction(
+        actions.updateStreetAddressLine1,
+        'streetAddressLine1',
+        {},
+        [{ type: 'UPDATE_STREET_ADDRESS_LINE_ONE', payload: 'streetAddressLine1' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateStreetAddressLine2', () => {
+    it('updates streetAddressLine2 to the provided value', done => {
+      testAction(
+        actions.updateStreetAddressLine2,
+        'streetAddressLine2',
+        {},
+        [{ type: 'UPDATE_STREET_ADDRESS_LINE_TWO', payload: 'streetAddressLine2' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateCity', () => {
+    it('updates city to the provided value', done => {
+      testAction(
+        actions.updateCity,
+        'city',
+        {},
+        [{ type: 'UPDATE_CITY', payload: 'city' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateCountryState', () => {
+    it('updates countryState to the provided value', done => {
+      testAction(
+        actions.updateCountryState,
+        'countryState',
+        {},
+        [{ type: 'UPDATE_COUNTRY_STATE', payload: 'countryState' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('updateZipCode', () => {
+    it('updates zipCode to the provided value', done => {
+      testAction(
+        actions.updateZipCode,
+        'zipCode',
+        {},
+        [{ type: 'UPDATE_ZIP_CODE', payload: 'zipCode' }],
+        [],
+        done,
+      );
+    });
+  });
 });

ee/spec/frontend/subscriptions/new/store/mutations_spec.js

@@ -7,6 +7,8 @@ const state = () => ({
   isSetupForCompany: true,
   numberOfUsers: 1,
   organizationName: 'name',
+  countryOptions: [],
+  stateOptions: [],
 });
 
 let stateCopy;
@@ -15,42 +17,29 @@ beforeEach(() => {
   stateCopy = state();
 });
 
-describe('UPDATE_CURRENT_STEP', () => {
-  it('should set the currentStep to the given step', () => {
-    mutations[types.UPDATE_CURRENT_STEP](stateCopy, 'secondStep');
-
-    expect(stateCopy.currentStep).toEqual('secondStep');
-  });
-});
-
-describe('UPDATE_SELECTED_PLAN', () => {
-  it('should set the selectedPlan to the given plan', () => {
-    mutations[types.UPDATE_SELECTED_PLAN](stateCopy, 'secondPlan');
-
-    expect(stateCopy.selectedPlan).toEqual('secondPlan');
-  });
-});
-
-describe('UPDATE_IS_SETUP_FOR_COMPANY', () => {
-  it('should set the isSetupForCompany to the given boolean', () => {
-    mutations[types.UPDATE_IS_SETUP_FOR_COMPANY](stateCopy, false);
-
-    expect(stateCopy.isSetupForCompany).toEqual(false);
-  });
-});
-
-describe('UPDATE_NUMBER_OF_USERS', () => {
-  it('should set the numberOfUsers to the given number', () => {
-    mutations[types.UPDATE_NUMBER_OF_USERS](stateCopy, 2);
-
-    expect(stateCopy.numberOfUsers).toEqual(2);
+describe('ee/subscriptions/new/store/mutation', () => {
+  describe.each`
+    mutation                                | value                                 | stateProp
+    ${types.UPDATE_CURRENT_STEP}            | ${'secondStep'}                       | ${'currentStep'}
+    ${types.UPDATE_SELECTED_PLAN}           | ${'secondPlan'}                       | ${'selectedPlan'}
+    ${types.UPDATE_IS_SETUP_FOR_COMPANY}    | ${false}                              | ${'isSetupForCompany'}
+    ${types.UPDATE_NUMBER_OF_USERS}         | ${2}                                  | ${'numberOfUsers'}
+    ${types.UPDATE_ORGANIZATION_NAME}       | ${'new name'}                         | ${'organizationName'}
+    ${types.UPDATE_COUNTRY_OPTIONS}         | ${[{ text: 'country', value: 'id' }]} | ${'countryOptions'}
+    ${types.UPDATE_STATE_OPTIONS}           | ${[{ text: 'state', value: 'id' }]}   | ${'stateOptions'}
+    ${types.UPDATE_COUNTRY}                 | ${'NL'}                               | ${'country'}
+    ${types.UPDATE_STREET_ADDRESS_LINE_ONE} | ${'streetAddressLine1'}               | ${'streetAddressLine1'}
+    ${types.UPDATE_STREET_ADDRESS_LINE_TWO} | ${'streetAddressLine2'}               | ${'streetAddressLine2'}
+    ${types.UPDATE_CITY}                    | ${'city'}                             | ${'city'}
+    ${types.UPDATE_COUNTRY_STATE}           | ${'countryState'}                     | ${'countryState'}
+    ${types.UPDATE_ZIP_CODE}                | ${'zipCode'}                          | ${'zipCode'}
+  `('$mutation', ({ mutation, value, stateProp }) => {
+    it(`should set the ${stateProp} to the given value`, () => {
+      expect(stateCopy[stateProp]).not.toEqual(value);
+
+      mutations[mutation](stateCopy, value);
+
+      expect(stateCopy[stateProp]).toEqual(value);
     });
-});
-
-describe('UPDATE_ORGANIZATION_NAME', () => {
-  it('should set the organizationName to the given name', () => {
-    mutations[types.UPDATE_ORGANIZATION_NAME](stateCopy, 'new name');
-
-    expect(stateCopy.organizationName).toEqual('new name');
   });
 });

ee/spec/frontend/subscriptions/new/store/state_spec.js

@@ -98,15 +98,43 @@ describe('projectsSelector default state', () => {
     });
   });
 
-  describe('taxRate', () => {
+  it('sets the country to null', () => {
+    expect(state.country).toBeNull();
+  });
+
+  it('sets the streetAddressLine1 to null', () => {
+    expect(state.streetAddressLine1).toBeNull();
+  });
+
+  it('sets the streetAddressLine2 to null', () => {
+    expect(state.streetAddressLine2).toBeNull();
+  });
+
+  it('sets the city to null', () => {
+    expect(state.city).toBeNull();
+  });
+
+  it('sets the countryState to null', () => {
+    expect(state.countryState).toBeNull();
+  });
+
+  it('sets the zipCode to null', () => {
+    expect(state.zipCode).toBeNull();
+  });
+
+  it('sets the countryOptions to an empty array', () => {
+    expect(state.countryOptions).toEqual([]);
+  });
+
+  it('sets the stateOptions to an empty array', () => {
+    expect(state.stateOptions).toEqual([]);
+  });
+
   it('sets the taxRate to the TAX_RATE constant', () => {
     expect(state.taxRate).toEqual(0);
   });
-  });
 
-  describe('startDate', () => {
   it('sets the startDate to the current date', () => {
     expect(state.startDate).toEqual(currentDate);
   });
-  });
 });

locale/gitlab.pot

@@ -3359,15 +3359,33 @@ msgstr ""
 msgid "Checkout|3. Your GitLab group"
 msgstr ""
 
+msgid "Checkout|Billing address"
+msgstr ""
+
 msgid "Checkout|Checkout"
 msgstr ""
 
+msgid "Checkout|City"
+msgstr ""
+
 msgid "Checkout|Continue to billing"
 msgstr ""
 
+msgid "Checkout|Continue to payment"
+msgstr ""
+
+msgid "Checkout|Country"
+msgstr ""
+
 msgid "Checkout|Edit"
 msgstr ""
 
+msgid "Checkout|Failed to load countries. Please try again."
+msgstr ""
+
+msgid "Checkout|Failed to load states. Please try again."
+msgstr ""
+
 msgid "Checkout|GitLab plan"
 msgstr ""
 
@@ -3383,6 +3401,18 @@ msgstr ""
 msgid "Checkout|Number of users"
 msgstr ""
 
+msgid "Checkout|Please select a country"
+msgstr ""
+
+msgid "Checkout|Please select a state"
+msgstr ""
+
+msgid "Checkout|State"
+msgstr ""
+
+msgid "Checkout|Street address"
+msgstr ""
+
 msgid "Checkout|Subscription details"
 msgstr ""
 
@@ -3401,6 +3431,9 @@ msgstr ""
 msgid "Checkout|Your organization"
 msgstr ""
 
+msgid "Checkout|Zip code"
+msgstr ""
+
 msgid "Checkout|company or team"
 msgstr ""