Commit 87c0d8bf authored by Alex Buijs's avatar Alex Buijs

MR Review feedback fixes

Fixes for payment method component
parent f80415d4
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import { ZUORA_SCRIPT_URL } from 'ee/subscriptions/new/constants';
import { ZUORA_SCRIPT_URL, ZUORA_IFRAME_OVERRIDE_PARAMS } from 'ee/subscriptions/new/constants';
export default {
components: {
......@@ -13,40 +13,34 @@ export default {
required: true,
},
},
data() {
return {
loading: true,
overrideParams: {
style: 'inline',
submitEnabled: 'true',
retainValues: 'true',
},
};
},
computed: {
...mapState(['paymentFormParams', 'paymentMethodId', 'creditCardDetails']),
...mapState([
'paymentFormParams',
'paymentMethodId',
'creditCardDetails',
'isLoadingPaymentMethod',
]),
},
watch: {
// The Zuora script has loaded and the parameters for rendering the iframe have been fetched.
paymentFormParams() {
this.renderZuoraIframe();
},
// The Zuora form has been submitted successfully and credit card details are being fetched.
paymentMethodId() {
this.toggleLoading();
},
// The credit card details have been fetched.
creditCardDetails() {
this.toggleLoading();
},
},
mounted() {
this.loadZuoraScript();
},
methods: {
...mapActions(['fetchPaymentFormParams', 'paymentFormSubmitted']),
...mapActions([
'startLoadingZuoraScript',
'fetchPaymentFormParams',
'zuoraIframeRendered',
'paymentFormSubmitted',
]),
loadZuoraScript() {
if (typeof window.Z === 'undefined') {
this.startLoadingZuoraScript();
if (!window.Z) {
const zuoraScript = document.createElement('script');
zuoraScript.type = 'text/javascript';
zuoraScript.async = true;
......@@ -58,19 +52,16 @@ export default {
}
},
renderZuoraIframe() {
const params = { ...this.paymentFormParams, ...this.overrideParams };
window.Z.runAfterRender(this.toggleLoading);
const params = { ...this.paymentFormParams, ...ZUORA_IFRAME_OVERRIDE_PARAMS };
window.Z.runAfterRender(this.zuoraIframeRendered);
window.Z.render(params, {}, this.paymentFormSubmitted);
},
toggleLoading() {
this.loading = !this.loading;
},
},
};
</script>
<template>
<div>
<gl-loading-icon v-if="loading" size="lg" />
<div v-show="active && !loading" id="zuora_payment"></div>
<gl-loading-icon v-if="isLoadingPaymentMethod" size="lg" />
<div v-show="active && !isLoadingPaymentMethod" id="zuora_payment"></div>
</div>
</template>
<script>
import _ from 'underscore';
import { GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { sprintf, s__ } from '~/locale';
import { mapState } from 'vuex';
import Step from './components/step.vue';
import Zuora from './components/zuora.vue';
......@@ -15,7 +14,13 @@ export default {
computed: {
...mapState(['paymentMethodId', 'creditCardDetails']),
isValid() {
return !_.isEmpty(this.paymentMethodId);
return Boolean(this.paymentMethodId);
},
expirationDate() {
return sprintf(this.$options.i18n.expirationDate, {
expirationMonth: this.creditCardDetails.credit_card_expiration_month,
expirationYear: this.creditCardDetails.credit_card_expiration_year.toString(10).slice(-2),
});
},
},
i18n: {
......@@ -34,20 +39,15 @@ export default {
<div class="js-summary-line-1">
<gl-sprintf :message="$options.i18n.creditCardDetails">
<template #cardType>
{{ creditCardDetails.cardType }}
{{ creditCardDetails.credit_card_type }}
</template>
<template #lastFourDigits>
<strong>{{ creditCardDetails.lastFourDigits }}</strong>
<strong>{{ creditCardDetails.credit_card_mask_number.slice(-4) }}</strong>
</template>
</gl-sprintf>
</div>
<div class="js-summary-line-2">
{{
sprintf($options.i18n.expirationDate, {
expirationMonth: creditCardDetails.expirationMonth,
expirationYear: creditCardDetails.expirationYear,
})
}}
{{ expirationDate }}
</div>
</template>
</step>
......
// 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';
......@@ -12,4 +13,10 @@ 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',
retainValues: 'true',
};
export const TAX_RATE = 0;
......@@ -43,12 +43,11 @@ export const updateOrganizationName = ({ commit }, organizationName) => {
commit(types.UPDATE_ORGANIZATION_NAME, organizationName);
};
export const fetchCountries = ({ dispatch }) => {
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] }));
......@@ -112,12 +111,14 @@ export const updateZipCode = ({ commit }, zipCode) => {
commit(types.UPDATE_ZIP_CODE, zipCode);
};
export const fetchPaymentFormParams = ({ dispatch }) => {
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 } })
.then(({ data }) => dispatch('fetchPaymentFormParamsSuccess', data))
.catch(() => dispatch('fetchPaymentFormParamsError'));
};
export const fetchPaymentFormParamsSuccess = ({ commit }, data) => {
if (data.errors) {
......@@ -135,8 +136,13 @@ export const fetchPaymentFormParamsError = () => {
createFlash(s__('Checkout|Credit card form failed to load. Please try again.'));
};
export const paymentFormSubmitted = ({ dispatch }, response) => {
export const zuoraIframeRendered = ({ commit }) =>
commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, false);
export const paymentFormSubmitted = ({ dispatch, commit }, response) => {
if (response.success) {
commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
dispatch('paymentFormSubmittedSuccess', response.refId);
} else {
dispatch('paymentFormSubmittedError', response);
......@@ -160,21 +166,14 @@ export const paymentFormSubmittedError = (_, response) => {
);
};
export const fetchPaymentMethodDetails = ({ state, dispatch }) => {
export const fetchPaymentMethodDetails = ({ state, dispatch, commit }) =>
axios
.get(PAYMENT_METHOD_URL, { params: { id: state.paymentMethodId } })
.then(({ data }) => dispatch('fetchPaymentMethodDetailsSuccess', data))
.catch(() => dispatch('fetchPaymentMethodDetailsError'));
};
export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, data) => {
const creditCardDetails = {
cardType: data.credit_card_type,
lastFourDigits: data.credit_card_mask_number.slice(-4),
expirationMonth: data.credit_card_expiration_month,
expirationYear: data.credit_card_expiration_year % 100,
};
.catch(() => dispatch('fetchPaymentMethodDetailsError'))
.finally(() => commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, false));
export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, creditCardDetails) => {
commit(types.UPDATE_CREDIT_CARD_DETAILS, creditCardDetails);
dispatch('activateNextStep');
......
......@@ -29,3 +29,5 @@ export const UPDATE_PAYMENT_FORM_PARAMS = 'UPDATE_PAYMENT_FORM_PARAMS';
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';
......@@ -64,4 +64,8 @@ export default {
[types.UPDATE_CREDIT_CARD_DETAILS](state, creditCardDetails) {
state.creditCardDetails = creditCardDetails;
},
[types.UPDATE_IS_LOADING_PAYMENT_METHOD](state, isLoadingPaymentMethod) {
state.isLoadingPaymentMethod = isLoadingPaymentMethod;
},
};
......@@ -38,6 +38,7 @@ export default ({ planData = '[]', planId, setupForCompany, fullName }) => {
paymentFormParams: {},
paymentMethodId: null,
creditCardDetails: {},
isLoadingPaymentMethod: false,
taxRate: TAX_RATE,
startDate: new Date(Date.now()),
};
......
......@@ -54,42 +54,34 @@ describe('Zuora', () => {
createComponent();
});
it('shows the loading icon', () => {
expect(findLoading().exists()).toBe(true);
it('does not show the loading icon', () => {
expect(findLoading().exists()).toBe(false);
});
it('the zuora_payment selector should not be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('none');
it('the zuora_payment selector should be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('');
});
describe.each`
desc | commitType | commitPayload
${'when paymentMethodId is updated'} | ${types.UPDATE_PAYMENT_METHOD_ID} | ${'foo'}
${'when creditCardDetails are updated'} | ${types.UPDATE_CREDIT_CARD_DETAILS} | ${{}}
`('$desc', ({ commitType, commitPayload }) => {
describe('when toggling the loading indicator', () => {
beforeEach(() => {
store.commit(commitType, commitPayload);
store.commit(types.UPDATE_IS_LOADING_PAYMENT_METHOD, true);
return localVue.nextTick();
});
it('does not show loading icon', () => {
expect(findLoading().exists()).toBe(false);
it('shows the loading icon', () => {
expect(findLoading().exists()).toBe(true);
});
it('the zuora_payment selector should be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('');
it('the zuora_payment selector should not be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('none');
});
});
});
describe('when not active and not loading', () => {
describe('when not active', () => {
beforeEach(() => {
createComponent({ active: false });
store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'foo');
return localVue.nextTick();
});
it('does not show loading icon', () => {
......@@ -97,7 +89,7 @@ describe('Zuora', () => {
});
it('the zuora_payment selector should not be visible', () => {
expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
expect(findZuoraPayment().element.style.display).toEqual('none');
});
});
......
......@@ -9,20 +9,28 @@ describe('Payment Method', () => {
const localVue = createLocalVue();
localVue.use(Vuex);
let store;
let wrapper;
const store = createStore();
const createComponent = (opts = {}) => {
wrapper = mount(Component, {
localVue,
sync: false,
store,
...opts,
});
};
beforeEach(() => {
store = createStore();
store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {
credit_card_type: 'Visa',
credit_card_mask_number: '************4242',
credit_card_expiration_month: 12,
credit_card_expiration_year: 2009,
});
createComponent();
});
......@@ -34,11 +42,7 @@ describe('Payment Method', () => {
const isStepValid = () => wrapper.find(Step).props('isValid');
it('should be valid when paymentMethodId is defined', () => {
store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(true);
});
expect(isStepValid()).toBe(true);
});
it('should be invalid when paymentMethodId is undefined', () => {
......@@ -51,16 +55,6 @@ describe('Payment Method', () => {
});
describe('showing the summary', () => {
beforeEach(() => {
store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {
cardType: 'Visa',
lastFourDigits: '4242',
expirationMonth: 12,
expirationYear: 19,
});
});
it('should show the entered credit card details', () => {
expect(
wrapper
......@@ -71,7 +65,7 @@ describe('Payment Method', () => {
});
it('should show the entered credit card expiration date', () => {
expect(wrapper.find('.js-summary-line-2').text()).toEqual('Exp 12/19');
expect(wrapper.find('.js-summary-line-2').text()).toEqual('Exp 12/09');
});
});
});
......@@ -12,6 +12,14 @@ constants.STEPS = ['firstStep', 'secondStep'];
let mock;
describe('Subscriptions Actions', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.restore();
});
describe('activateStep', () => {
it('set the currentStep to the provided value', done => {
testAction(
......@@ -110,14 +118,6 @@ 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']);
......@@ -172,14 +172,6 @@ describe('Subscriptions Actions', () => {
});
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' } })
......@@ -342,15 +334,20 @@ describe('Subscriptions Actions', () => {
});
});
describe('fetchPaymentFormParams', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.restore();
describe('startLoadingZuoraScript', () => {
it('updates isLoadingPaymentMethod to true', done => {
testAction(
actions.startLoadingZuoraScript,
undefined,
{},
[{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: true }],
[],
done,
);
});
});
describe('fetchPaymentFormParams', () => {
it('fetches paymentFormParams and calls fetchPaymentFormParamsSuccess with the returned data on success', done => {
mock
.onGet(constants.PAYMENT_FORM_URL, { params: { id: constants.PAYMENT_FORM_ID } })
......@@ -420,14 +417,27 @@ describe('Subscriptions Actions', () => {
});
});
describe('zuoraIframeRendered', () => {
it('updates isLoadingPaymentMethod to false', done => {
testAction(
actions.zuoraIframeRendered,
undefined,
{},
[{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
[],
done,
);
});
});
describe('paymentFormSubmitted', () => {
describe('on success', () => {
it('calls paymentFormSubmittedSuccess with the refID from the response', done => {
it('calls paymentFormSubmittedSuccess with the refID from the response and updates isLoadingPaymentMethod to true', done => {
testAction(
actions.paymentFormSubmitted,
{ success: true, refId: 'id' },
{},
[],
[{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: true }],
[{ type: 'paymentFormSubmittedSuccess', payload: 'id' }],
done,
);
......@@ -480,15 +490,7 @@ describe('Subscriptions Actions', () => {
});
describe('fetchPaymentMethodDetails', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
});
afterEach(() => {
mock.restore();
});
it('fetches paymentMethodDetails and calls fetchPaymentMethodDetailsSuccess with the returned data on success', done => {
it('fetches paymentMethodDetails and calls fetchPaymentMethodDetailsSuccess with the returned data on success and updates isLoadingPaymentMethod to false', done => {
mock
.onGet(constants.PAYMENT_METHOD_URL, { params: { id: 'paymentMethodId' } })
.replyOnce(200, { token: 'x' });
......@@ -497,20 +499,20 @@ describe('Subscriptions Actions', () => {
actions.fetchPaymentMethodDetails,
null,
{ paymentMethodId: 'paymentMethodId' },
[],
[{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
[{ type: 'fetchPaymentMethodDetailsSuccess', payload: { token: 'x' } }],
done,
);
});
it('calls fetchPaymentMethodDetailsError on error', done => {
it('calls fetchPaymentMethodDetailsError on error and updates isLoadingPaymentMethod to false', done => {
mock.onGet(constants.PAYMENT_METHOD_URL).replyOnce(500);
testAction(
actions.fetchPaymentMethodDetails,
null,
{},
[],
[{ type: 'UPDATE_IS_LOADING_PAYMENT_METHOD', payload: false }],
[{ type: 'fetchPaymentMethodDetailsError' }],
done,
);
......@@ -523,7 +525,7 @@ describe('Subscriptions Actions', () => {
actions.fetchPaymentMethodDetailsSuccess,
{
credit_card_type: 'cc_type',
credit_card_mask_number: '4242424242424242',
credit_card_mask_number: '************4242',
credit_card_expiration_month: 12,
credit_card_expiration_year: 2019,
},
......@@ -532,10 +534,10 @@ describe('Subscriptions Actions', () => {
{
type: 'UPDATE_CREDIT_CARD_DETAILS',
payload: {
cardType: 'cc_type',
lastFourDigits: '4242',
expirationMonth: 12,
expirationYear: 19,
credit_card_type: 'cc_type',
credit_card_mask_number: '************4242',
credit_card_expiration_month: 12,
credit_card_expiration_year: 2019,
},
},
],
......
......@@ -9,6 +9,7 @@ const state = () => ({
organizationName: 'name',
countryOptions: [],
stateOptions: [],
isLoadingPaymentMethod: false,
});
let stateCopy;
......@@ -19,20 +20,24 @@ beforeEach(() => {
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 | 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'}
${types.UPDATE_PAYMENT_FORM_PARAMS} | ${{ token: 'x' }} | ${'paymentFormParams'}
${types.UPDATE_PAYMENT_METHOD_ID} | ${'paymentMethodId'} | ${'paymentMethodId'}
${types.UPDATE_CREDIT_CARD_DETAILS} | ${{ type: 'x' }} | ${'creditCardDetails'}
${types.UPDATE_IS_LOADING_PAYMENT_METHOD} | ${true} | ${'isLoadingPaymentMethod'}
`('$mutation', ({ mutation, value, stateProp }) => {
it(`should set the ${stateProp} to the given value`, () => {
expect(stateCopy[stateProp]).not.toEqual(value);
......@@ -43,27 +48,3 @@ describe('ee/subscriptions/new/store/mutation', () => {
});
});
});
describe('UPDATE_PAYMENT_FORM_PARAMS', () => {
it('should set the paymentFormParams to the given paymentFormParams', () => {
mutations[types.UPDATE_PAYMENT_FORM_PARAMS](stateCopy, { token: 'x' });
expect(stateCopy.paymentFormParams).toEqual({ token: 'x' });
});
});
describe('UPDATE_PAYMENT_METHOD_ID', () => {
it('should set the paymentMethodId to the given paymentMethodId', () => {
mutations[types.UPDATE_PAYMENT_METHOD_ID](stateCopy, 'paymentMethodId');
expect(stateCopy.paymentMethodId).toEqual('paymentMethodId');
});
});
describe('UPDATE_CREDIT_CARD_DETAILS', () => {
it('should set the creditCardDetails to the given creditCardDetails', () => {
mutations[types.UPDATE_CREDIT_CARD_DETAILS](stateCopy, { type: 'x' });
expect(stateCopy.creditCardDetails).toEqual({ type: 'x' });
});
});
......@@ -149,4 +149,8 @@ describe('projectsSelector default state', () => {
it('sets the creditCardDetails to an empty object', () => {
expect(state.creditCardDetails).toEqual({});
});
it('sets isLoadingPaymentMethod to false', () => {
expect(state.isLoadingPaymentMethod).toEqual(false);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment