Merge branch 'growth-87-subscription-details' into 'master'

Checkout and progress bar components for paid signup flow

See merge request gitlab-org/gitlab!21500

ee/app/assets/javascripts/pages/subscriptions/new/index.js

+import mountSubscriptionsApplication from 'ee/subscriptions/new';
+
+document.addEventListener('DOMContentLoaded', () => mountSubscriptionsApplication());

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

+<script>
+import { s__ } from '~/locale';
+import ProgressBar from './checkout/progress_bar.vue';
+
+export default {
+  components: { ProgressBar },
+  i18n: {
+    checkout: s__('Checkout|Checkout'),
+  },
+};
+</script>
+<template>
+  <div class="checkout d-flex flex-column justify-content-between w-100">
+    <div class="full-width">
+      <progress-bar :step="2" />
+      <div class="flash-container"></div>
+      <h2 class="header-title">{{ $options.i18n.checkout }}</h2>
+    </div>
+  </div>
+</template>

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

+<script>
+import { s__ } from '~/locale';
+
+export default {
+  props: {
+    step: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    classObject(stepNumber) {
+      return {
+        phase: true,
+        bold: true,
+        center: true,
+        finished: this.step > stepNumber,
+        current: this.step === stepNumber,
+      };
+    },
+  },
+  i18n: {
+    yourProfile: s__('Checkout|1. Your profile'),
+    checkout: s__('Checkout|2. Checkout'),
+    yourGroup: s__('Checkout|3. Your GitLab group'),
+  },
+};
+</script>
+<template>
+  <div class="bar d-flex">
+    <div v-for="(value, name, index) in $options.i18n" :key="name" :class="classObject(index + 1)">
+      {{ value }}
+    </div>
+  </div>
+</template>

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

+import Vue from 'vue';
+import Checkout from './components/checkout.vue';
+
+export default () => {
+  const checkoutEl = document.getElementById('checkout');
+
+  return new Vue({
+    el: checkoutEl,
+    components: { Checkout },
+    render(createElement) {
+      return createElement('checkout', {});
+    },
+  });
+};

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

@@ -29,4 +29,54 @@
       padding-right: $gl-padding * 3;
     }
   }
+
+  .checkout {
+    align-items: center;
+    flex-grow: 1;
+    margin-top: $gl-padding;
+    max-width: 454px;
+
+    @media(min-width: map-get($grid-breakpoints, lg)) {
+      justify-content: inherit !important;
+      margin-top: 36px;
+      max-width: none;
+    }
+
+    .full-width {
+      max-width: 541px;
+      width: 100%;
+    }
+  }
+
+  .bar {
+    @media(min-width: map-get($grid-breakpoints, lg)) {
+      width: 400px;
+    }
+
+    .phase {
+      border-bottom: 5px solid $gray-200;
+      color: $gray-700;
+      flex-basis: 100%;
+      font-size: $gl-font-size-12;
+      line-height: $gl-line-height;
+      padding-bottom: $gl-padding-8;
+
+      &.current,
+      &.finished {
+        border-bottom-color: $blue-400;
+      }
+
+      &.current {
+        color: $gray-900;
+      }
+    }
+  }
+
+  .header-title {
+    margin: 24px 0 16px;
+
+    @media(min-width: map-get($grid-breakpoints, lg)) {
+      margin-bottom: 32px;
+    }
+  }
 }

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

+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(localVue.extend(component), {
+      propsData,
+      localVue,
+      sync: false,
+    });
+  };
+
+  const firstStep = () => wrapper.find('.bar div:nth-child(1)');
+  const secondStep = () => wrapper.find('.bar div:nth-child(2)');
+
+  beforeEach(() => {
+    factory({ step: 2 });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('current', () => {
+    it('step 1 is not current', () => {
+      expect(firstStep().classes()).not.toContain('current');
+    });
+
+    it('step 2 is current', () => {
+      expect(secondStep().classes()).toContain('current');
+    });
+  });
+
+  describe('finished', () => {
+    it('step 1 is finished', () => {
+      expect(firstStep().classes()).toContain('finished');
+    });
+
+    it('step 2 is not finished', () => {
+      expect(secondStep().classes()).not.toContain('finished');
+    });
+  });
+});

locale/gitlab.pot

@@ -3226,6 +3226,18 @@ msgstr ""
 msgid "Checkout"
 msgstr ""
 
+msgid "Checkout|1. Your profile"
+msgstr ""
+
+msgid "Checkout|2. Checkout"
+msgstr ""
+
+msgid "Checkout|3. Your GitLab group"
+msgstr ""
+
+msgid "Checkout|Checkout"
+msgstr ""
+
 msgid "Cherry-pick this commit"
 msgstr ""