Add confirm order component for paid signup flow

This is part of the paid signup flow

ee/app/assets/javascripts/api.js

@@ -23,6 +23,11 @@ export default {
   cycleAnalyticsStagePath: '/-/analytics/cycle_analytics/stages/:stage_id',
   cycleAnalyticsDurationChartPath: '/-/analytics/cycle_analytics/stages/:stage_id/duration_chart',
   codeReviewAnalyticsPath: '/api/:version/analytics/code_review',
+  countriesPath: '/-/countries',
+  countryStatesPath: '/-/country_states',
+  paymentFormPath: '/-/subscriptions/payment_form',
+  paymentMethodPath: '/-/subscriptions/payment_method',
+  confirmOrderPath: '/-/subscriptions',
 
   userSubscription(namespaceId) {
     const url = Api.buildUrl(this.subscriptionPath).replace(':id', encodeURIComponent(namespaceId));
@@ -231,4 +236,29 @@ export default {
     const url = Api.buildUrl(this.geoDesignsPath);
     return axios.put(`${url}/${projectId}/${action}`, {});
   },
+
+  fetchCountries() {
+    const url = Api.buildUrl(this.countriesPath);
+    return axios.get(url);
+  },
+
+  fetchStates(country) {
+    const url = Api.buildUrl(this.countryStatesPath);
+    return axios.get(url, { params: { country } });
+  },
+
+  fetchPaymentFormParams(id) {
+    const url = Api.buildUrl(this.paymentFormPath);
+    return axios.get(url, { params: { id } });
+  },
+
+  fetchPaymentMethodDetails(id) {
+    const url = Api.buildUrl(this.paymentMethodPath);
+    return axios.get(url, { params: { id } });
+  },
+
+  confirmOrder(params = {}) {
+    const url = Api.buildUrl(this.confirmOrderPath);
+    return axios.post(url, params);
+  },
 };

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

@@ -4,9 +4,10 @@ import ProgressBar from './checkout/progress_bar.vue';
 import SubscriptionDetails from './checkout/subscription_details.vue';
 import BillingAddress from './checkout/billing_address.vue';
 import PaymentMethod from './checkout/payment_method.vue';
+import ConfirmOrder from './checkout/confirm_order.vue';
 
 export default {
-  components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod },
+  components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod, ConfirmOrder },
   i18n: {
     checkout: s__('Checkout|Checkout'),
   },
@@ -22,5 +23,6 @@ export default {
       <billing-address />
       <payment-method />
     </div>
+    <confirm-order />
   </div>
 </template>

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

+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlLoadingIcon,
+  },
+  computed: {
+    ...mapState(['isConfirmingOrder']),
+    ...mapGetters(['currentStep']),
+    isActive() {
+      return this.currentStep === 'confirmOrder';
+    },
+  },
+  methods: {
+    ...mapActions(['confirmOrder']),
+  },
+  i18n: {
+    confirm: s__('Checkout|Confirm purchase'),
+    confirming: s__('Checkout|Confirming...'),
+  },
+};
+</script>
+<template>
+  <div v-if="isActive" class="full-width prepend-bottom-32">
+    <gl-button :disabled="isConfirmingOrder" variant="success" @click="confirmOrder">
+      <gl-loading-icon v-if="isConfirmingOrder" inline size="sm" />
+      {{ isConfirmingOrder ? $options.i18n.confirming : $options.i18n.confirm }}
+    </gl-button>
+  </div>
+</template>

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

 // The order of the steps in this array determines the flow of the application
-export const STEPS = ['subscriptionDetails', 'billingAddress', 'paymentMethod'];
-
-export const COUNTRIES_URL = '/-/countries';
-
-export const STATES_URL = '/-/country_states';
+export const STEPS = ['subscriptionDetails', 'billingAddress', 'paymentMethod', 'confirmOrder'];
 
 export const ZUORA_SCRIPT_URL = 'https://static.zuora.com/Resources/libs/hosted/1.3.1/zuora-min.js';
 
-export const PAYMENT_FORM_URL = '/-/subscriptions/payment_form';
-
 export const PAYMENT_FORM_ID = 'paid_signup_flow';
 
-export const PAYMENT_METHOD_URL = '/-/subscriptions/payment_method';
-
 export const ZUORA_IFRAME_OVERRIDE_PARAMS = {
   style: 'inline',
   submitEnabled: 'true',

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

 import * as types from './mutation_types';
-import axios from '~/lib/utils/axios_utils';
 import { sprintf, s__ } from '~/locale';
 import createFlash from '~/flash';
-import {
-  STEPS,
-  COUNTRIES_URL,
-  STATES_URL,
-  PAYMENT_FORM_URL,
-  PAYMENT_FORM_ID,
-  PAYMENT_METHOD_URL,
-} from '../constants';
+import Api from 'ee/api';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { STEPS, PAYMENT_FORM_ID } from '../constants';
 
 export const activateStep = ({ commit }, currentStep) => {
   if (STEPS.includes(currentStep)) {
@@ -44,8 +38,7 @@ export const updateOrganizationName = ({ commit }, organizationName) => {
 };
 
 export const fetchCountries = ({ dispatch }) =>
-  axios
-    .get(COUNTRIES_URL)
+  Api.fetchCountries()
     .then(({ data }) => dispatch('fetchCountriesSuccess', data))
     .catch(() => dispatch('fetchCountriesError'));
 
@@ -66,8 +59,7 @@ export const fetchStates = ({ state, dispatch }) => {
     return;
   }
 
-  axios
-    .get(STATES_URL, { params: { country: state.country } })
+  Api.fetchStates(state.country)
     .then(({ data }) => dispatch('fetchStatesSuccess', data))
     .catch(() => dispatch('fetchStatesError'));
 };
@@ -115,8 +107,7 @@ export const startLoadingZuoraScript = ({ commit }) =>
   commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
 
 export const fetchPaymentFormParams = ({ dispatch }) =>
-  axios
-    .get(PAYMENT_FORM_URL, { params: { id: PAYMENT_FORM_ID } })
+  Api.fetchPaymentFormParams(PAYMENT_FORM_ID)
     .then(({ data }) => dispatch('fetchPaymentFormParamsSuccess', data))
     .catch(() => dispatch('fetchPaymentFormParamsError'));
 
@@ -167,8 +158,7 @@ export const paymentFormSubmittedError = (_, response) => {
 };
 
 export const fetchPaymentMethodDetails = ({ state, dispatch, commit }) =>
-  axios
-    .get(PAYMENT_METHOD_URL, { params: { id: state.paymentMethodId } })
+  Api.fetchPaymentMethodDetails(state.paymentMethodId)
     .then(({ data }) => dispatch('fetchPaymentMethodDetailsSuccess', data))
     .catch(() => dispatch('fetchPaymentMethodDetailsError'))
     .finally(() => commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, false));
@@ -182,3 +172,28 @@ export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, creditCar
 export const fetchPaymentMethodDetailsError = () => {
   createFlash(s__('Checkout|Failed to register credit card. Please try again.'));
 };
+
+export const confirmOrder = ({ getters, dispatch, commit }) => {
+  commit(types.UPDATE_IS_CONFIRMING_ORDER, true);
+
+  Api.confirmOrder(getters.confirmOrderParams)
+    .then(({ data }) => {
+      if (data.location) dispatch('confirmOrderSuccess', data.location);
+      else dispatch('confirmOrderError', JSON.stringify(data.errors));
+    })
+    .catch(() => dispatch('confirmOrderError'));
+};
+
+export const confirmOrderSuccess = (_, location) => {
+  redirectTo(location);
+};
+
+export const confirmOrderError = ({ commit }, message = null) => {
+  commit(types.UPDATE_IS_CONFIRMING_ORDER, false);
+
+  const errorString = message
+    ? s__('Checkout|Failed to confirm your order: %{message}. Please try again.')
+    : s__('Checkout|Failed to confirm your order! Please try again.');
+
+  createFlash(sprintf(errorString, { message }, false));
+};

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

@@ -15,6 +15,24 @@ export const selectedPlanPrice = (state, getters) =>
 export const selectedPlanDetails = state =>
   state.availablePlans.find(plan => plan.value === state.selectedPlan);
 
+export const confirmOrderParams = state => ({
+  setup_for_company: state.isSetupForCompany,
+  customer: {
+    country: state.country,
+    address_1: state.streetAddressLine1,
+    address_2: state.streetAddressLine2,
+    city: state.city,
+    state: state.countryState,
+    zip_code: state.zipCode,
+    company: state.organizationName,
+  },
+  subscription: {
+    plan_id: state.selectedPlan,
+    payment_method_id: state.paymentMethodId,
+    quantity: state.numberOfUsers,
+  },
+});
+
 export const endDate = state =>
   new Date(state.startDate).setFullYear(state.startDate.getFullYear() + 1);
 

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

@@ -31,3 +31,5 @@ export const UPDATE_PAYMENT_METHOD_ID = 'UPDATE_PAYMENT_METHOD_ID';
 export const UPDATE_CREDIT_CARD_DETAILS = 'UPDATE_CREDIT_CARD_DETAILS';
 
 export const UPDATE_IS_LOADING_PAYMENT_METHOD = 'UPDATE_IS_LOADING_PAYMENT_METHOD';
+
+export const UPDATE_IS_CONFIRMING_ORDER = 'UPDATE_IS_CONFIRMING_ORDER';

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

@@ -68,4 +68,8 @@ export default {
   [types.UPDATE_IS_LOADING_PAYMENT_METHOD](state, isLoadingPaymentMethod) {
     state.isLoadingPaymentMethod = isLoadingPaymentMethod;
   },
+
+  [types.UPDATE_IS_CONFIRMING_ORDER](state, isConfirmingOrder) {
+    state.isConfirmingOrder = isConfirmingOrder;
+  },
 };

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

@@ -39,6 +39,7 @@ export default ({ planData = '[]', planId, setupForCompany, fullName }) => {
     paymentMethodId: null,
     creditCardDetails: {},
     isLoadingPaymentMethod: false,
+    isConfirmingOrder: false,
     taxRate: TAX_RATE,
     startDate: new Date(Date.now()),
   };

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

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import createStore from 'ee/subscriptions/new/store';
+import * as types from 'ee/subscriptions/new/store/mutation_types';
+import { GlButton } from '@gitlab/ui';
+import Component from 'ee/subscriptions/new/components/checkout/confirm_order.vue';
+
+describe('Confirm Order', () => {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  let wrapper;
+
+  const store = createStore();
+
+  const createComponent = (opts = {}) => {
+    wrapper = shallowMount(Component, {
+      localVue,
+      store,
+      ...opts,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Active', () => {
+    beforeEach(() => {
+      store.commit(types.UPDATE_CURRENT_STEP, 'confirmOrder');
+    });
+
+    it('button should be visible', () => {
+      expect(wrapper.find(GlButton).exists()).toBe(true);
+    });
+  });
+
+  describe('Inactive', () => {
+    beforeEach(() => {
+      store.commit(types.UPDATE_CURRENT_STEP, 'otherStep');
+    });
+
+    it('button should not be visible', () => {
+      expect(wrapper.find(GlButton).exists()).toBe(false);
+    });
+  });
+});

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

@@ -557,4 +557,98 @@ describe('Subscriptions Actions', () => {
       });
     });
   });
+
+  describe('confirmOrder', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('calls confirmOrderSuccess with a redirect location on success', done => {
+      mock.onPost(constants.CONFIRM_ORDER_URL).replyOnce(200, { location: 'x' });
+
+      testAction(
+        actions.confirmOrder,
+        null,
+        {},
+        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+        [{ type: 'confirmOrderSuccess', payload: 'x' }],
+        done,
+      );
+    });
+
+    it('calls confirmOrderError with the errors on error', done => {
+      mock.onPost(constants.CONFIRM_ORDER_URL).replyOnce(200, { errors: 'errors' });
+
+      testAction(
+        actions.confirmOrder,
+        null,
+        {},
+        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+        [{ type: 'confirmOrderError', payload: '"errors"' }],
+        done,
+      );
+    });
+
+    it('calls confirmOrderError on failure', done => {
+      mock.onPost(constants.CONFIRM_ORDER_URL).replyOnce(500);
+
+      testAction(
+        actions.confirmOrder,
+        null,
+        {},
+        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: true }],
+        [{ type: 'confirmOrderError' }],
+        done,
+      );
+    });
+  });
+
+  describe('confirmOrderSuccess', () => {
+    it('changes the window location', done => {
+      const spy = jest.spyOn(window.location, 'assign').mockImplementation();
+
+      testAction(actions.confirmOrderSuccess, 'http://example.com', {}, [], [], () => {
+        expect(spy).toHaveBeenCalledWith('http://example.com');
+        done();
+      });
+    });
+  });
+
+  describe('confirmOrderError', () => {
+    it('creates a flash with a default message when no error given', done => {
+      testAction(
+        actions.confirmOrderError,
+        null,
+        {},
+        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: false }],
+        [],
+        () => {
+          expect(createFlash).toHaveBeenCalledWith(
+            'Failed to confirm your order! Please try again.',
+          );
+          done();
+        },
+      );
+    });
+
+    it('creates a flash with a the error message when an error is given', done => {
+      testAction(
+        actions.confirmOrderError,
+        '"Error"',
+        {},
+        [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: false }],
+        [],
+        () => {
+          expect(createFlash).toHaveBeenCalledWith(
+            'Failed to confirm your order: "Error". Please try again.',
+          );
+          done();
+        },
+      );
+    });
+  });
 });

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

@@ -13,6 +13,15 @@ const state = {
     },
   ],
   selectedPlan: 'firstPlan',
+  country: 'Country',
+  streetAddressLine1: 'Street address line 1',
+  streetAddressLine2: 'Street address line 2',
+  city: 'City',
+  countryState: 'State',
+  zipCode: 'Zip code',
+  organizationName: 'Organization name',
+  paymentMethodId: 'Payment method ID',
+  numberOfUsers: 1,
 };
 
 describe('Subscriptions Getters', () => {
@@ -113,4 +122,26 @@ describe('Subscriptions Getters', () => {
       expect(getters.usersPresent({ numberOfUsers: 0 })).toBe(false);
     });
   });
+
+  describe('confirmOrderParams', () => {
+    it('returns the params to confirm the order', () => {
+      expect(getters.confirmOrderParams(state)).toEqual({
+        setup_for_company: true,
+        customer: {
+          country: 'Country',
+          address_1: 'Street address line 1',
+          address_2: 'Street address line 2',
+          city: 'City',
+          state: 'State',
+          zip_code: 'Zip code',
+          company: 'Organization name',
+        },
+        subscription: {
+          plan_id: 'firstPlan',
+          payment_method_id: 'Payment method ID',
+          quantity: 1,
+        },
+      });
+    });
+  });
 });

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

@@ -10,6 +10,7 @@ const state = () => ({
   countryOptions: [],
   stateOptions: [],
   isLoadingPaymentMethod: false,
+  isConfirmingOrder: false,
 });
 
 let stateCopy;
@@ -38,6 +39,7 @@ describe('ee/subscriptions/new/store/mutation', () => {
     ${types.UPDATE_PAYMENT_METHOD_ID}         | ${'paymentMethodId'}                  | ${'paymentMethodId'}
     ${types.UPDATE_CREDIT_CARD_DETAILS}       | ${{ type: 'x' }}                      | ${'creditCardDetails'}
     ${types.UPDATE_IS_LOADING_PAYMENT_METHOD} | ${true}                               | ${'isLoadingPaymentMethod'}
+    ${types.UPDATE_IS_CONFIRMING_ORDER}       | ${true}                               | ${'isConfirmingOrder'}
   `('$mutation', ({ mutation, value, stateProp }) => {
     it(`should set the ${stateProp} to the given value`, () => {
       expect(stateCopy[stateProp]).not.toEqual(value);

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

@@ -153,4 +153,8 @@ describe('projectsSelector default state', () => {
   it('sets isLoadingPaymentMethod to false', () => {
     expect(state.isLoadingPaymentMethod).toEqual(false);
   });
+
+  it('sets isConfirmingOrder to false', () => {
+    expect(state.isConfirmingOrder).toBe(false);
+  });
 });

locale/gitlab.pot

@@ -3371,6 +3371,12 @@ msgstr ""
 msgid "Checkout|City"
 msgstr ""
 
+msgid "Checkout|Confirm purchase"
+msgstr ""
+
+msgid "Checkout|Confirming..."
+msgstr ""
+
 msgid "Checkout|Continue to billing"
 msgstr ""
 
@@ -3392,6 +3398,12 @@ msgstr ""
 msgid "Checkout|Exp %{expirationMonth}/%{expirationYear}"
 msgstr ""
 
+msgid "Checkout|Failed to confirm your order! Please try again."
+msgstr ""
+
+msgid "Checkout|Failed to confirm your order: %{message}. Please try again."
+msgstr ""
+
 msgid "Checkout|Failed to load countries. Please try again."
 msgstr ""