Merge branch 'feat/promote-paid-plan-for-eligible-top-level-group' into 'main-jh'

Feat: promote paid plan for eligible top level group

See merge request gitlab-cn/gitlab!2738

jh/app/assets/javascripts/groups/trials/components/trial_banner.vue

+<script>
+import { GlCard, GlButton } from '@gitlab/ui';
+import CloudTanukiSvg from '@gitlab/svgs/dist/illustrations/cloud-tanuki-sm.svg';
+
+export default {
+  components: {
+    GlCard,
+    GlButton,
+  },
+  props: {
+    trialPath: {
+      type: String,
+      required: true,
+    },
+    exploreOptionsPath: {
+      type: String,
+      required: true,
+    },
+  },
+  tanukiSvgPath: CloudTanukiSvg,
+};
+</script>
+
+<template>
+  <gl-card class="gl-banner gl-mt-6 gl-py-6 gl-pl-6 gl-pr-8" body-class="gl-flex !gl-p-0">
+    <div class="gl-banner-illustration">
+      <!-- eslint-disable-next-line @gitlab/vue-require-i18n-attribute-strings -->
+      <img :src="$options.tanukiSvgPath" alt="" />
+    </div>
+
+    <div class="gl-banner-content">
+      <h2 class="gl-banner-title">{{ __('Start a Free Ultimate Trial') }}</h2>
+      <p>
+        {{
+          s__(
+            'JH|Trials|This group and its projects under the namespace is using the basic version. Want to increase team productivity and use more advanced features? Try out JiHu GitLab premium for free for 60 days.',
+          )
+        }}
+      </p>
+      <gl-button variant="info" category="primary" rel="noreferer noopener" :href="trialPath">
+        {{ __('Start free trial') }}
+      </gl-button>
+      <gl-button variant="default" rel="noreferer noopener" :href="exploreOptionsPath">
+        {{ s__('TierBadgePopover|Explore paid plans') }}
+      </gl-button>
+    </div>
+  </gl-card>
+</template>

jh/app/assets/javascripts/groups/trials/index.js

+import Vue from 'vue';
+import TrialsBanner from './components/trial_banner.vue';
+
+export const initTrialsBanner = () => {
+  const el = document.querySelector('.js-jh-trials-banner');
+
+  if (!el) {
+    return null;
+  }
+
+  const { trialPath, exploreOptionsPath } = el.dataset;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(TrialsBanner, {
+        props: {
+          trialPath,
+          exploreOptionsPath,
+        },
+      });
+    },
+  });
+};

jh/app/assets/javascripts/pages/groups/show/index.js

+import 'ee/pages/groups/show';
+import { initTrialsBanner } from 'jh/groups/trials';
+
+initTrialsBanner();

jh/app/views/groups/_group_activity_analytics.html.haml

+- if @group.root? && @group.trial_active?
+  = render Pajamas::CardComponent.new do |c|
+    - c.with_body do
+      %h4.gl-heading-4.gl-mb-3
+        = s_('JH|Trial|Group premium trial time')
+      .gl-flex.gl-items-center.gl-flex-row.gl-gap-5.gl-mb-5
+        %div
+          %strong
+            = _('Start Time')
+          %span
+            = @group.trial_starts_on
+        %div
+          %strong
+            = _('End Time')
+          %span
+            = @group.trial_ends_on
+      .gl-flex.gl-items-center
+        = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_trial_path(namespace_id: @group.id), button_options: { class: 'gl-mr-3' }) do
+          = s_('JH|Trials|Upgrade to paid versions')
+        = render Pajamas::ButtonComponent.new(variant: :info, href: group_billings_path(@group, source: 'group-top-level-card')) do
+          = s_('TierBadgePopover|Explore paid plans')
+
+
+= render_ee 'groups/group_activity_analytics'

jh/app/views/subscriptions/trials/_alert.html.haml

+- if namespace.root? && show_start_free_trial_messages?(namespace)
+  .js-jh-trials-banner{ data: { trial_path: new_trial_path(namespace_id: namespace.id),
+    explore_options_path: group_billings_path(namespace, source: 'group-top-level-banner') }}
+
+= render_ee 'subscriptions/trials/alert', namespace: namespace

jh/locale/en/gitlab.po

@@ -1328,6 +1328,15 @@ msgstr ""
 msgid "JH|To enable line wrap, run the following command in terminal:"
 msgstr ""
 
+msgid "JH|Trials|This group and its projects under the namespace is using the basic version. Want to increase team productivity and use more advanced features? Try out JiHu GitLab premium for free for 60 days."
+msgstr ""
+
+msgid "JH|Trials|Upgrade to paid versions"
+msgstr ""
+
+msgid "JH|Trial|Group premium trial time"
+msgstr ""
+
 msgid "JH|Trial|Please select a province"
 msgstr "Please select a province"
 

jh/locale/zh_CN/gitlab.po

@@ -1346,6 +1346,15 @@ msgstr ""
 msgid "JH|To enable line wrap, run the following command in terminal:"
 msgstr "执行以下命令来打开换行："
 
+msgid "JH|Trials|This group and its projects under the namespace is using the basic version. Want to increase team productivity and use more advanced features? Try out JiHu GitLab premium for free for 60 days."
+msgstr "此群组及其所有相关项目使用的是基础版本。想要提高团队生产力并使用更多高级功能？免费试用极狐GitLab 专业版 60天。"
+
+msgid "JH|Trials|Upgrade to paid versions"
+msgstr "升级到付费版本"
+
+msgid "JH|Trial|Group premium trial time"
+msgstr "本群组专业版试用时间"
+
 msgid "JH|Trial|Please select a province"
 msgstr "请选择"
 

jh/locale/zh_TW/gitlab.po

@@ -1337,6 +1337,15 @@ msgstr ""
 msgid "JH|To enable line wrap, run the following command in terminal:"
 msgstr "執行以下命令來打開換行："
 
+msgid "JH|Trials|This group and its projects under the namespace is using the basic version. Want to increase team productivity and use more advanced features? Try out JiHu GitLab premium for free for 60 days."
+msgstr "此群組及其所有相關項目使用的是基礎版本。想要提高團隊生產力並使用更多進階功能？免費試用極狐GitLab 專業版 60天。"
+
+msgid "JH|Trials|Upgrade to paid versions"
+msgstr "升級到付費版本"
+
+msgid "JH|Trial|Group premium trial time"
+msgstr "本群組專業版試用時間"
+
 msgid "JH|Trial|Please select a province"
 msgstr "請選擇"
 

jh/spec/features/groups/show_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Group show page', :saas, feature_category: :groups_and_projects do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) do
+    create(:group_with_plan, :private, plan: :ultimate_trial_plan, trial_starts_on: Date.today,
+      trial_ends_on: 10.days.from_now)
+  end
+
+  let_it_be(:sub_group) { create(:group, :private, :with_avatar, parent: group, description: 'bar') }
+
+  let(:path) { group_path(group) }
+  let(:sub_group_path) { group_path(sub_group) }
+
+  before_all do
+    group.add_developer(user)
+  end
+
+  before do
+    allow(group).to receive(:root?).and_return(true)
+
+    sign_in(user)
+  end
+
+  context 'when visiting subgroup' do
+    before do
+      visit sub_group_path
+    end
+
+    it 'does not render any content with trials related card' do
+      expect(page).not_to have_content('Group premium trial time')
+    end
+  end
+
+  context 'when visiting root group' do
+    before do
+      visit path
+    end
+
+    it 'renders trial card for the top-level group' do
+      expect(page).to have_content('Group premium trial time')
+    end
+  end
+end

jh/spec/frontend/groups/trials/components/banner_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import Banner from 'jh/groups/trials/components/trial_banner.vue';
+
+describe('Trials banner', () => {
+  let wrapper;
+  const trialPath = 'https://jihulab.com/trial';
+  const exploreOptionsPath = 'https://jihulab.com/exlpore_options';
+  const createComponent = () => {
+    wrapper = shallowMount(Banner, {
+      propsData: {
+        trialPath,
+        exploreOptionsPath,
+      },
+    });
+  };
+  const findCtaButtons = () => wrapper.findAllComponents(GlButton);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders the banner correctly', () => {
+    const buttons = findCtaButtons();
+
+    expect(buttons.at(0).attributes('href')).toBe(trialPath);
+    expect(buttons.at(1).attributes('href')).toBe(exploreOptionsPath);
+  });
+});