Feat: add link for user to compare plans

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

@@ -2,7 +2,7 @@
 <script>
 import Tracking from '~/tracking';
 import BillingAddress from 'jh/subscriptions/new/components/checkout/billing_address.vue';
-import SubscriptionDetails from 'ee/subscriptions/new/components/checkout/subscription_details.vue';
+import SubscriptionDetails from './checkout/subscription_details.vue';
 import ConfirmOrder from './checkout/confirm_order.vue';
 
 export default {

jh/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue

+<script>
+import {
+  GlAlert,
+  GlFormGroup,
+  GlFormInput,
+  GlFormSelect,
+  GlLink,
+  GlLoadingIcon,
+  GlSprintf,
+} from '@gitlab/ui';
+import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
+import EESubscriptionDetails from 'ee/subscriptions/new/components/checkout/subscription_details.vue';
+
+export default {
+  components: {
+    GlAlert,
+    GlFormGroup,
+    GlFormSelect,
+    GlFormInput,
+    GlSprintf,
+    GlLink,
+    GlLoadingIcon,
+    Step,
+  },
+  extends: EESubscriptionDetails,
+};
+</script>
+<template>
+  <step
+    v-if="isLoading"
+    :step-id="$options.stepId"
+    :title="$options.i18n.stepTitle"
+    :is-valid="false"
+  >
+    <template #body>
+      <div
+        data-testid="subscription-loading-container"
+        class="gl-h-200! gl-flex gl-flex-col gl-items-center gl-justify-center"
+      >
+        <gl-loading-icon v-if="true" size="lg" />
+        <span>{{ $options.i18n.loadingText }}</span>
+      </div>
+    </template>
+  </step>
+  <step
+    v-else
+    :step-id="$options.stepId"
+    :title="$options.i18n.stepTitle"
+    :is-valid="isValid"
+    :next-step-button-text="$options.i18n.nextStepButtonText"
+    @nextStep="trackStepTransition"
+    @stepEdit="trackStepEdit"
+  >
+    <template #body>
+      <gl-form-group :label="$options.i18n.selectedPlanLabel" label-size="sm" class="mb-3">
+        <gl-form-select
+          v-model="selectedPlanModel"
+          v-auto-focus-on-show
+          :options="availablePlans"
+          data-testid="plan-name"
+        />
+      </gl-form-group>
+      <div class="gl-flex gl-flex-row-reverse">
+        <gl-link href="https://gitlab.cn/pricing" rel="noopener noreferer" target="_blank">
+          {{ s__('JH|Checkout|Compare plans') }}
+        </gl-link>
+      </div>
+      <gl-form-group
+        v-if="isShowingGroupSelector"
+        data-testid="group-select-form-group"
+        :label="$options.i18n.selectedGroupLabel"
+        :description="groupSelectDescription"
+        label-size="sm"
+        class="mb-3"
+      >
+        <gl-form-select
+          ref="group-select"
+          v-model="selectedGroupModel"
+          :options="groupOptionsWithDefault"
+          data-testid="group-name"
+        />
+      </gl-form-group>
+      <gl-form-group
+        v-if="isShowingNameOfCompanyInput"
+        :label="$options.i18n.organizationNameLabel"
+        label-size="sm"
+        class="mb-3"
+      >
+        <gl-form-input ref="organization-name" v-model="organizationNameModel" type="text" />
+      </gl-form-group>
+      <div class="combined gl-flex">
+        <gl-form-group
+          data-testid="number-of-users-field"
+          :label="$options.i18n.numberOfUsersLabel"
+          label-size="sm"
+          class="gl-mb-5"
+          :label-description="numberOfUsersLabelDescription"
+          :invalid-feedback="numberOfSeatsInvalidFeedback"
+        >
+          <template v-if="hasMaximumSeatLimit" #label-description>
+            <div class="gl-mb-3">
+              <gl-sprintf :message="$options.i18n.maximumSeatLimitMessage" class="">
+                <template #maximumSeatLimit>{{ maximumSeatLimit }}</template>
+                <template #maxSeatLink="{ content }">
+                  <gl-link href="" target="_blank">{{ content }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </div>
+          </template>
+
+          <gl-form-input
+            ref="number-of-users"
+            v-model.number="numberOfUsersModel"
+            class="number"
+            type="number"
+            :min="billableData.minimumSeats"
+            :disabled="shouldDisableNumberOfUsers"
+            :state="hasValidSeatInput"
+            data-testid="number-of-users"
+          />
+          <template #invalid-feedback>
+            {{ numberOfSeatsInvalidFeedback }}
+          </template>
+        </gl-form-group>
+        <gl-form-group
+          v-if="shouldDisableNumberOfUsers"
+          ref="company-link"
+          class="label ml-3 align-self-end gl-mb-0"
+        >
+          <gl-sprintf :message="$options.i18n.needMoreUsersLink">
+            <template #company>
+              <gl-link @click="toggleIsSetupForCompany">{{ $options.i18n.companyOrTeam }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </gl-form-group>
+      </div>
+      <gl-alert
+        v-if="!hasMaximumSeatLimit"
+        class="gl-mb-5"
+        :dismissible="false"
+        variant="info"
+        data-testid="qsr-overage-message"
+      >
+        <gl-sprintf :message="$options.i18n.qsrOverageMessage">
+          <template #qsrOverageLink="{ content }">
+            <gl-link :href="$options.qsrReconciliationLink" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+    </template>
+    <template #summary>
+      <span ref="summary-line-1" class="gl-font-bold">
+        {{ selectedPlanTextLine }}
+      </span>
+      <div v-if="isSetupForCompany" ref="summary-line-2">
+        {{ $options.i18n.group }}: {{ organizationName || selectedGroupName }}
+      </div>
+      <div ref="summary-line-3">{{ $options.i18n.users }}: {{ numberOfUsers }}</div>
+    </template>
+  </step>
+</template>

jh/locale/en/gitlab.po

@@ -378,6 +378,9 @@ msgstr ""
 msgid "JH|Checking email availability..."
 msgstr ""
 
+msgid "JH|Checkout|Compare plans"
+msgstr ""
+
 msgid "JH|Checkout|Please select a country"
 msgstr "Please select a country/region"
 

jh/locale/zh_CN/gitlab.po

@@ -396,6 +396,9 @@ msgstr ""
 msgid "JH|Checking email availability..."
 msgstr "检查邮箱是否可用..."
 
+msgid "JH|Checkout|Compare plans"
+msgstr "对比不同计划"
+
 msgid "JH|Checkout|Please select a country"
 msgstr "请选择一个国家或地区"
 

jh/locale/zh_TW/gitlab.po

@@ -387,6 +387,9 @@ msgstr "您的極狐GitLab 帳戶被鎖定。在執行機器人命令之前請
 msgid "JH|Checking email availability..."
 msgstr "檢查郵箱是否可用..."
 
+msgid "JH|Checkout|Compare plans"
+msgstr "比較不同計劃"
+
 msgid "JH|Checkout|Please select a country"
 msgstr "請選擇一個國家或地區"