Fetch storage plans for purchase flow

ee/app/assets/javascripts/subscriptions/buy_minutes/components/checkout.vue → ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/checkout.vue

 <script>
 import updateState from 'ee/subscriptions/graphql/mutations/update_state.mutation.graphql';
+import BillingAddress from 'ee/vue_shared/purchase_flow/components/checkout/billing_address.vue';
+import ConfirmOrder from 'ee/vue_shared/purchase_flow/components/checkout/confirm_order.vue';
+import PaymentMethod from 'ee/vue_shared/purchase_flow/components/checkout/payment_method.vue';
 import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import AddonPurchaseDetails from './checkout/addon_purchase_details.vue';
-import BillingAddress from './checkout/billing_address.vue';
-import ConfirmOrder from './checkout/confirm_order.vue';
-import PaymentMethod from './checkout/payment_method.vue';
 
 export default {
   components: { AddonPurchaseDetails, BillingAddress, PaymentMethod, ConfirmOrder },

ee/app/assets/javascripts/subscriptions/buy_minutes/components/checkout/addon_purchase_details.vue → ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/checkout/addon_purchase_details.vue

 <script>
 import { GlAlert, GlFormInput, GlSprintf } from '@gitlab/ui';
-import { CI_MINUTES_PER_PACK } from 'ee/subscriptions/buy_minutes/constants';
+import { CI_MINUTES_PER_PACK } from 'ee/subscriptions/buy_addons_shared/constants';
 import { STEPS } from 'ee/subscriptions/constants';
 import updateState from 'ee/subscriptions/graphql/mutations/update_state.mutation.graphql';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';

ee/app/assets/javascripts/subscriptions/buy_minutes/constants.js → ee/app/assets/javascripts/subscriptions/buy_addons_shared/constants.js

 /* eslint-disable @gitlab/require-i18n-strings */
 export const planTags = {
   CI_1000_MINUTES_PLAN: 'CI_1000_MINUTES_PLAN',
+  STORAGE_PLAN: 'STORAGE_PLAN',
 };
 /* eslint-enable @gitlab/require-i18n-strings */
 export const CUSTOMER_CLIENT = 'customerClient';

ee/app/assets/javascripts/subscriptions/buy_minutes/components/app.vue

@@ -4,10 +4,10 @@ import { GlEmptyState } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import StepOrderApp from 'ee/vue_shared/purchase_flow/components/step_order_app.vue';
 import { ERROR_FETCHING_DATA_HEADER, ERROR_FETCHING_DATA_DESCRIPTION } from '~/ensure_data';
+import Checkout from '../../buy_addons_shared/components/checkout.vue';
+import OrderSummary from '../../buy_addons_shared/components/order_summary.vue';
+import { planTags, CUSTOMER_CLIENT } from '../../buy_addons_shared/constants';
 import plansQuery from '../../graphql/queries/plans.customer.query.graphql';
-import { planTags, CUSTOMER_CLIENT } from '../constants';
-import Checkout from './checkout.vue';
-import OrderSummary from './order_summary.vue';
 
 export default {
   name: 'BuyCIMinutesApp',

ee/app/assets/javascripts/subscriptions/buy_minutes/index.js

 import Vue from 'vue';
 import ensureData from '~/ensure_data';
+import apolloProvider from '../buy_addons_shared/graphql';
+import { writeInitialDataToApolloCache } from '../buy_addons_shared/utils';
 import App from './components/app.vue';
-import apolloProvider from './graphql';
-import { writeInitialDataToApolloCache } from './utils';
 
 export default (el) => {
   if (!el) {

ee/app/assets/javascripts/subscriptions/buy_storage/components/app.vue

 <script>
+import emptySvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
+import { GlEmptyState } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import StepOrderApp from 'ee/vue_shared/purchase_flow/components/step_order_app.vue';
+import { ERROR_FETCHING_DATA_HEADER, ERROR_FETCHING_DATA_DESCRIPTION } from '~/ensure_data';
+import Checkout from '../../buy_addons_shared/components/checkout.vue';
+import OrderSummary from '../../buy_addons_shared/components/order_summary.vue';
+import { planTags, CUSTOMER_CLIENT } from '../../buy_addons_shared/constants';
+import plansQuery from '../../graphql/queries/plans.customer.query.graphql';
 
 export default {
+  name: 'BuyStorageApp',
   components: {
+    Checkout,
+    GlEmptyState,
+    OrderSummary,
     StepOrderApp,
   },
+  i18n: {
+    ERROR_FETCHING_DATA_HEADER,
+    ERROR_FETCHING_DATA_DESCRIPTION,
+  },
+  emptySvg,
+  data() {
+    return {
+      hasError: false,
+    };
+  },
+  apollo: {
+    plans: {
+      client: CUSTOMER_CLIENT,
+      query: plansQuery,
+      variables: {
+        tags: [planTags.STORAGE_PLAN],
+      },
+      update(data) {
+        if (!data?.plans?.length) {
+          this.hasError = true;
+          return null;
+        }
+
+        return data.plans;
+      },
+      error(error) {
+        this.hasError = true;
+        Sentry.captureException(error);
+      },
+    },
+  },
 };
 </script>
 <template>
-  <step-order-app>
-    <template #checkout></template>
-    <template #order-summary></template>
+  <gl-empty-state
+    v-if="hasError"
+    :title="$options.i18n.ERROR_FETCHING_DATA_HEADER"
+    :description="$options.i18n.ERROR_FETCHING_DATA_DESCRIPTION"
+    :svg-path="`data:image/svg+xml;utf8,${encodeURIComponent($options.emptySvg)}`"
+  />
+  <step-order-app v-else-if="!$apollo.loading">
+    <template #checkout>
+      <checkout :plan="plans[0]" />
+    </template>
+    <template #order-summary>
+      <order-summary :plan="plans[0]" />
+    </template>
   </step-order-app>
 </template>

ee/app/assets/javascripts/subscriptions/buy_storage/index.js

 import Vue from 'vue';
+import ensureData from '~/ensure_data';
+import apolloProvider from '../buy_addons_shared/graphql';
+import { writeInitialDataToApolloCache } from '../buy_addons_shared/utils';
 import App from './components/app.vue';
 
 export default (el) => {
+  if (!el) {
+    return null;
+  }
+
+  const extendedApp = ensureData(App, {
+    parseData: writeInitialDataToApolloCache.bind(null, apolloProvider),
+    data: el.dataset,
+    shouldLog: true,
+  });
+
   return new Vue({
     el,
-    components: {
-      App,
-    },
+    apolloProvider,
     render(createElement) {
-      return createElement(App);
+      return createElement(extendedApp);
     },
   });
 };

ee/spec/frontend/subscriptions/buy_minutes/components/app_spec.js

@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import App from 'ee/subscriptions/buy_minutes/components/app.vue';
 import StepOrderApp from 'ee/vue_shared/purchase_flow/components/step_order_app.vue';
 import waitForPromises from 'helpers/wait_for_promises';
+import { planTags } from '../../../../../app/assets/javascripts/subscriptions/buy_addons_shared/constants';
 import { createMockApolloProvider } from '../spec_helper';
 
 const localVue = createLocalVue();
@@ -12,11 +13,10 @@ localVue.use(VueApollo);
 describe('App', () => {
   let wrapper;
 
-  function createComponent(options = {}) {
-    const { apolloProvider, propsData } = options;
+  function createComponent(apolloProvider) {
     return shallowMount(App, {
       localVue,
-      propsData,
+      propsData: { plan: planTags.CI_1000_MINUTES_PLAN },
       apolloProvider,
     });
   }
@@ -28,7 +28,7 @@ describe('App', () => {
   describe('when data is received', () => {
     it('should display the StepOrderApp', async () => {
       const mockApollo = createMockApolloProvider();
-      wrapper = createComponent({ apolloProvider: mockApollo });
+      wrapper = createComponent(mockApollo);
       await waitForPromises();
 
       expect(wrapper.findComponent(StepOrderApp).exists()).toBe(true);
@@ -41,7 +41,7 @@ describe('App', () => {
       const mockApollo = createMockApolloProvider({
         plansQueryMock: jest.fn().mockResolvedValue({ data: null }),
       });
-      wrapper = createComponent({ apolloProvider: mockApollo });
+      wrapper = createComponent(mockApollo);
       await waitForPromises();
 
       expect(wrapper.findComponent(StepOrderApp).exists()).toBe(false);
@@ -52,7 +52,7 @@ describe('App', () => {
       const mockApollo = createMockApolloProvider({
         plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: null } }),
       });
-      wrapper = createComponent({ apolloProvider: mockApollo });
+      wrapper = createComponent(mockApollo);
       await waitForPromises();
 
       expect(wrapper.findComponent(StepOrderApp).exists()).toBe(false);
@@ -63,7 +63,7 @@ describe('App', () => {
       const mockApollo = createMockApolloProvider({
         plansQueryMock: jest.fn().mockResolvedValue({ data: { plans: {} } }),
       });
-      wrapper = createComponent({ apolloProvider: mockApollo });
+      wrapper = createComponent(mockApollo);
       await waitForPromises();
 
       expect(wrapper.findComponent(StepOrderApp).exists()).toBe(false);
@@ -76,7 +76,7 @@ describe('App', () => {
       const mockApollo = createMockApolloProvider({
         plansQueryMock: jest.fn().mockRejectedValue(new Error('An error happened!')),
       });
-      wrapper = createComponent({ apolloProvider: mockApollo });
+      wrapper = createComponent(mockApollo);
       await waitForPromises();
 
       expect(wrapper.findComponent(StepOrderApp).exists()).toBe(false);

ee/spec/frontend/subscriptions/buy_minutes/components/checkout/addon_purchase_details_spec.js

@@ -2,8 +2,8 @@ import { GlAlert } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
-import AddonPurchaseDetails from 'ee/subscriptions/buy_minutes/components/checkout/addon_purchase_details.vue';
-import subscriptionsResolvers from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import AddonPurchaseDetails from 'ee/subscriptions/buy_addons_shared/components/checkout/addon_purchase_details.vue';
+import subscriptionsResolvers from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import Step from 'ee/vue_shared/purchase_flow/components/step.vue';

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

 import { mount, createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
-import BillingAddress from 'ee/subscriptions/buy_minutes/components/checkout/billing_address.vue';
-import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { resolvers } from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import BillingAddress from 'ee/vue_shared/purchase_flow/components/checkout/billing_address.vue';
 import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
 import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
 import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';

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

@@ -2,9 +2,9 @@ import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import Api from 'ee/api';
-import ConfirmOrder from 'ee/subscriptions/buy_minutes/components/checkout/confirm_order.vue';
 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import ConfirmOrder from 'ee/vue_shared/purchase_flow/components/checkout/confirm_order.vue';
 import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
 import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
 import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';

ee/spec/frontend/subscriptions/buy_minutes/components/checkout/payment_method_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
-import PaymentMethod from 'ee/subscriptions/buy_minutes/components/checkout/payment_method.vue';
-import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { resolvers } from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import PaymentMethod from 'ee/vue_shared/purchase_flow/components/checkout/payment_method.vue';
 import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
 import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
 import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';

ee/spec/frontend/subscriptions/buy_minutes/components/checkout/zuora_spec.js

@@ -3,10 +3,10 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
-import Zuora from 'ee/subscriptions/buy_minutes/components/checkout/zuora.vue';
-import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { resolvers } from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import Zuora from 'ee/vue_shared/purchase_flow/components/checkout/zuora.vue';
 import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
 import { createMockApolloProvider } from 'ee_jest/vue_shared/purchase_flow/spec_helper';
 import axios from '~/lib/utils/axios_utils';

ee/spec/frontend/subscriptions/buy_minutes/components/order_summary/summary_details_spec.js

 import { GlSprintf } from '@gitlab/ui';
-import SummaryDetails from 'ee/subscriptions/buy_minutes/components/order_summary/summary_details.vue';
+import SummaryDetails from 'ee/subscriptions/buy_addons_shared/components/order_summary/summary_details.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('SummaryDetails', () => {

ee/spec/frontend/subscriptions/buy_minutes/components/order_summary_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
-import OrderSummary from 'ee/subscriptions/buy_minutes/components/order_summary.vue';
-import subscriptionsResolvers from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import OrderSummary from 'ee/subscriptions/buy_addons_shared/components/order_summary.vue';
+import subscriptionsResolvers from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import purchaseFlowResolvers from 'ee/vue_shared/purchase_flow/graphql/resolvers';
 import {

ee/spec/frontend/subscriptions/buy_minutes/graphql/resolvers_spec.js

 import Api from 'ee/api';
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
-import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { resolvers } from 'ee/subscriptions/buy_addons_shared/graphql/resolvers';
 import { ERROR_FETCHING_COUNTRIES, ERROR_FETCHING_STATES } from 'ee/subscriptions/constants';
 import createFlash from '~/flash';
 
@@ -49,7 +49,7 @@ const countries = [
 
 const states = { California: 'CA' };
 
-describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
+describe('~/subscriptions/buy_addons_shared/graphql/resolvers', () => {
   describe('Query', () => {
     describe('countries', () => {
       describe('on success', () => {

ee/spec/frontend/subscriptions/buy_minutes/utils_spec.js

-import apolloProvider from 'ee/subscriptions/buy_minutes/graphql';
-import { writeInitialDataToApolloCache } from 'ee/subscriptions/buy_minutes/utils';
+import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
+import { writeInitialDataToApolloCache } from 'ee/subscriptions/buy_addons_shared/utils';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import { mockNamespaces, mockParsedNamespaces } from './mock_data';