All files / ee/app/assets/javascripts/admin/subscriptions/show/components subscription_details_user_info.vue

25% Statements 4/16
0% Branches 0/1
0% Functions 0/6
33.33% Lines 4/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146            4x     4x   4x   4x                                                                                                                                                                                                                                                                        
<script>
import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { s__, n__, __ } from '~/locale';
import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
 
export const billableUsersURL = helpPagePath('subscriptions/self_managed/index', {
  anchor: 'billable-users',
});
export const trueUpURL = `${PROMO_URL}/pricing/licensing-faq/#what-does-users-over-license-mean`;
 
export const usersInSubscriptionUnlimited = __('Unlimited');
 
export const i18n = Object.freeze({
  billableUsersTitle: s__('SuperSonics|Billable users'),
  maximumUsersTitle: s__('SuperSonics|Maximum users'),
  usersOverSubscriptionTitle: s__('SuperSonics|Users over subscription'),
  billableUsersText: s__(
    'SuperSonics|This is the number of %{billableUsersLinkStart}billable users%{billableUsersLinkEnd} on your installation, and this is the minimum number you need to purchase when you renew your license.',
  ),
  maximumUsersText: s__(
    'SuperSonics|This is the highest peak of users on your installation since the license started.',
  ),
  usersInSubscriptionText: s__(
    `SuperSonics|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license.`,
  ),
  usersOverSubscriptionText: s__(
    `SuperSonics|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.`,
  ),
});
 
export default {
  links: {
    billableUsersURL,
    trueUpURL,
  },
  name: 'SubscriptionDetailsUserInfo',
  components: {
    GlCard,
    GlLink,
    GlSprintf,
  },
  props: {
    subscription: {
      type: Object,
      required: true,
    },
  },
  computed: {
    usersInSubscription() {
      return this.subscription.usersInLicenseCount ?? usersInSubscriptionUnlimited;
    },
    billableUsers() {
      return this.subscription.billableUsersCount;
    },
    maximumUsers() {
      return this.subscription.maximumUserCount;
    },
    usersOverSubscription() {
      return this.subscription.usersOverLicenseCount;
    },
    isUsersInSubscriptionVisible() {
      return this.subscription.plan === 'ultimate';
    },
    usersInSubscriptionTitle() {
      Iif (this.subscription.usersInLicenseCount) {
        return n__(
          'SuperSonics|User in subscription',
          'SuperSonics|Users in subscription',
          this.subscription.usersInLicenseCount,
        );
      }
 
      return s__('SuperSonics|Users in subscription');
    },
  },
  i18n,
};
</script>
 
<template>
  <section class="row">
    <div class="col-md-6 gl-mb-5">
      <gl-card class="gl-h-full">
        <header>
          <h2 data-testid="users-in-subscription">{{ usersInSubscription }}</h2>
          <h5 class="gl-font-weight-normal text-uppercase">{{ usersInSubscriptionTitle }}</h5>
        </header>
        <p v-if="isUsersInSubscriptionVisible" data-testid="users-in-subscription-desc">
          {{ $options.i18n.usersInSubscriptionText }}
        </p>
      </gl-card>
    </div>
 
    <div class="col-md-6 gl-mb-5">
      <gl-card class="gl-h-full" data-testid="billable-users">
        <header>
          <h2 data-testid="billable-users-count">{{ billableUsers }}</h2>
          <h5 class="gl-font-weight-normal text-uppercase">
            {{ $options.i18n.billableUsersTitle }}
          </h5>
        </header>
        <p>
          <gl-sprintf :message="$options.i18n.billableUsersText">
            <template #billableUsersLink="{ content }">
              <gl-link :href="$options.links.billableUsersURL" target="_blank">
                {{ content }}
              </gl-link>
            </template>
          </gl-sprintf>
        </p>
      </gl-card>
    </div>
 
    <div class="col-md-6 gl-mb-5">
      <gl-card class="gl-h-full" data-testid="maximum-users">
        <header>
          <h2>{{ maximumUsers }}</h2>
          <h5 class="gl-font-weight-normal text-uppercase">
            {{ $options.i18n.maximumUsersTitle }}
          </h5>
        </header>
        <p>{{ $options.i18n.maximumUsersText }}</p>
      </gl-card>
    </div>
 
    <div class="col-md-6 gl-mb-5">
      <gl-card class="gl-h-full" data-testid="users-over-license">
        <header>
          <h2>{{ usersOverSubscription }}</h2>
          <h5 class="gl-font-weight-normal text-uppercase">
            {{ $options.i18n.usersOverSubscriptionTitle }}
          </h5>
        </header>
        <p>
          <gl-sprintf :message="$options.i18n.usersOverSubscriptionText">
            <template #trueUpLink="{ content }">
              <gl-link :href="$options.links.trueUpURL">{{ content }}</gl-link>
            </template>
          </gl-sprintf>
        </p>
      </gl-card>
    </div>
  </section>
</template>