app/components/Layout/UpgradePremiumButton.vue

<template>
  <div>
    <div :class="['btn_trial', { minimized }]" @click="trialAction()">
      <v-icon icon="fa fa-ticket" />

      <span v-if="organizationProfile.isTrialActive && !minimized">
        <strong>J-{{ organizationProfile.trialCountDown }}</strong>
        <br />
      </span>

      <span v-if="!minimized">{{ btnLabel }}</span>
    </div>

    <LayoutDialogTrialAlreadyDid
      :show="showDialog"
      @close-dialog="showDialog = false"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Ref } from 'vue'
import UrlUtils from '~/services/utils/urlUtils'
import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'

const runtimeConfig = useRuntimeConfig()
const organizationProfile = useOrganizationProfileStore()
const { apiRequestService } = useApiLegacyRequestService()
const i18n = useI18n()

defineProps({
  minimized: {
    type: Boolean,
    required: false,
    default: false,
  },
})

const showDialog: Ref<boolean> = ref(false)

const btnLabel = computed(() => {
  if (organizationProfile.isTrialActive) {
    return i18n.t('trial_started')
  }
  return organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY'
    ? i18n.t('try_premium')
    : i18n.t('discover_offer')
})

/**
 * Lorsque l'on appuie sur le bouton pour démarrer l'essai / découvrir les offres
 */
const trialAction = async () => {
  const v1BaseURL =
    runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy

  if (organizationProfile.isTrialActive) {
    await navigateTo(UrlUtils.join(v1BaseURL, '#', 'subscribe'), {
      external: true,
    })
  } else if (organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY') {
    try {
      await apiRequestService.get('/trial/is_available')
      await navigateTo(UrlUtils.join(v1BaseURL, '#', 'trial'), {
        external: true,
      })
    } catch (error) {
      showDialog.value = true
    }
  } else {
    await navigateTo('/subscription')
  }
}
</script>

<style scoped lang="scss">
.btn_trial {
  background-color: rgb(var(--v-theme-standout));
  border-radius: 5px;
  border: 1px solid #fff;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  color: #000;
  margin-top: 5px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: pre-line;
  font-size: 12px;

  .v-icon {
    font-size: 16px;
    color: #000;
    padding-right: 5px;
    margin: 0 5px 4px 0;
  }
}

.minimized {
  font-size: 17px;
  margin-left: 7px;
  margin-right: 7px;
  padding: 0;

  .v-icon {
    padding-right: 0;
    margin: 0 0 3px 0;
  }
}
</style>