app/pages/subscription.vue

<!--
Page 'Mon abonnement'

@see https://ressources.opentalent.fr/display/SPEC/Mon+abonnement
-->
<template>
  <div>
    <LayoutContainer>
      <v-expansion-panels v-model="openedPanels" :multiple="true" class="mt-4">
        <UiExpansionPanel title="subscription_page" icon="fas fa-info">
          <v-container fluid class="container">
            <v-row>
              <v-col cols="12" lg="6" sm="12">
                {{ $t('version') }} :
                <strong>{{
                  dolibarrAccount ? $t(dolibarrAccount.product) : '-'
                }}</strong>
              </v-col>
              <v-col cols="12" lg="6" sm="12">
                {{ $t('client_id') }} :
                {{ dolibarrAccount ? dolibarrAccount.clientNumber : '-' }}
              </v-col>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel
          v-if="dolibarrAccount && dolibarrAccount.contract"
          title="service_detail"
          icon="fas fa-info"
        >
          <v-container fluid class="container">
            <v-row>
              <v-col
                v-for="line in dolibarrAccount.contract.lines"
                :key="line.id"
                cols="12"
                lg="12"
              >
                <strong>{{ line.serviceLabel }}</strong> - {{ $t('until') }} :
                {{ $d(line.dateEnd) }}
              </v-col>

              <v-col v-if="ability.can('manage', 'texto')" cols="12" lg="12">
                <strong>{{ $t('remaining_sms_credit') }}</strong> -
                <span
                  v-if="
                    !mobytPending && mobytStatus !== null && mobytStatus.active
                  "
                >
                  {{
                    mobytStatus.money.toLocaleString($i18n.locale, {
                      style: 'currency',
                      currency: 'EUR',
                    })
                  }}
                  {{
                    i18n.t('convert_price_to_sms', {
                      nb_sms: mobytStatus.amount,
                    })
                  }}
                </span>
              </v-col>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel
          v-if="dolibarrAccount !== null && dolibarrAccount.order"
          title="purchase_order"
          icon="fas fa-file"
        >
          <v-container :fluid="true" class="container">
            <v-row>
              <v-table>
                <thead>
                  <tr>
                    <th>{{ $t('reference') }}</th>
                    <th>{{ $t('date') }}</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{ dolibarrAccount.order.ref }}</td>
                    <td>{{ $d(dolibarrAccount.order.date) }}</td>
                    <td>
                      <a
                        class="clickable"
                        @click="
                          downloadDolibarrBillingDoc(
                            DOLIBARR_BILLING_DOC_TYPE.ORDER,
                            dolibarrAccount.order.ref,
                          )
                        "
                      >
                        {{ $t('download') }}
                      </a>
                    </td>
                  </tr>
                </tbody>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel
          v-if="showDolibarrBillsPanel"
          title="bills"
          icon="fas fa-file"
        >
          <v-container :fluid="true" class="container">
            <v-row>
              <v-table v-if="dolibarrAccount !== null">
                <thead>
                  <tr>
                    <th>{{ $t('reference') }}</th>
                    <th>{{ $t('date') }}</th>
                    <th>{{ $t('taxExcludedAmount') }}</th>
                    <th>{{ $t('status') }}</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="bill in dolibarrAccount.bills" :key="bill.id">
                    <td>{{ bill.ref }}</td>
                    <td>{{ $d(bill.date) }}</td>
                    <td>
                      {{
                        bill.taxExcludedAmount.toLocaleString($i18n.locale, {
                          style: 'currency',
                          currency: 'EUR',
                        })
                      }}
                    </td>
                    <td>
                      {{ bill.paid === true ? $t('paid') : $t('unpaid') }}
                    </td>
                    <td>
                      <a
                        class="clickable"
                        @click="
                          downloadDolibarrBillingDoc(
                            DOLIBARR_BILLING_DOC_TYPE.INVOICE,
                            bill.ref,
                          )
                        "
                      >
                        {{ $t('download') }}
                      </a>
                    </td>
                  </tr>
                </tbody>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel
          v-if="!organizationProfile.isManagerProduct"
          title="opentalent_offers"
          icon="fas fa-plus"
        >
          <v-container fluid class="container">
            <v-row
              v-if="!md && mdAndUp && !organizationProfile.isSchool"
              class="offer_title"
            >
              <v-col
                cols="12"
                :lg="
                  organizationProfile.isArtistPremiumProduct &&
                  !organizationProfile.isTrialActive
                    ? 4
                    : 8
                "
                sm="12"
              >
                <span class="theme-artist"
                  >Pour les orchestres, chorales, <br />compagnies et troupes
                  artistiques</span
                >
              </v-col>
              <v-col cols="12" lg="4" sm="12">
                <span class="theme-school"
                  >Pour les établissements d'enseignements <br />
                  artistiques*</span
                >
              </v-col>
            </v-row>

            <v-row class="card-container">
              <v-col
                v-if="
                  organizationProfile.isArtistProduct ||
                  organizationProfile.isTrialActive
                "
                lg="4"
                sm="12"
                md="6"
              >
                <LayoutPagesSubscriptionCard
                  class="artistCard"
                  title="Logiciel Artist Standard"
                  :extra-header="
                    organizationProfile.isArtistProduct
                      ? 'Votre version actuelle'
                      : undefined
                  "
                  color="artist"
                  :list="listCheck.artist"
                >
                  <template #card.subTitle>
                    <div class="priceBlock">
                      <span v-if="organizationProfile.isCmf"
                        ><strong>{{ $t('price_include_cmf') }}*</strong></span
                      >
                      <span v-else
                        ><span class="price">{{
                          formatCurrency(14.0, 'EUR')
                        }}</span>
                        TTC/mois*</span
                      >
                    </div>
                  </template>
                  <template #card.action>
                    <v-row>
                      <v-col
                        v-if="
                          !organizationProfile.isArtistProduct &&
                          !organizationProfile.isTrialActive
                        "
                        cols="12"
                      >
                        <v-btn
                          class="theme-artist btn"
                          href="https://logiciels.opentalent.fr/opentalent-artist"
                          target="_blank"
                        >
                          {{ $t('to_know_more') }}
                          <i class="fa-solid fa-greater-than small" />
                        </v-btn>
                      </v-col>
                      <v-col cols="12">
                        <span
                          v-if="organizationProfile.isCmf"
                          class="special_conditions"
                        >
                          *En cas de non-réadhésion, il reste accessible au
                          tarif public de 14€ TTC/mois (Tarif 2025. Abonnement
                          payable annuellement).
                        </span>
                        <span v-else class="special_conditions">
                          *Tarif public 2025. Abonnement payable annuellement.
                        </span>
                      </v-col>
                    </v-row>
                  </template>
                </LayoutPagesSubscriptionCard>
              </v-col>

              <v-col v-if="organizationProfile.isArtist" lg="4" sm="12" md="6">
                <LayoutPagesSubscriptionCard
                  class="artistCard"
                  title="Logiciel Artist Premium*"
                  :extra-header="
                    organizationProfile.isArtistPremiumProduct
                      ? organizationProfile.isTrialActive
                        ? `Version en cours d'essai J-${organizationProfile.trialCountDown}`
                        : 'Votre version actuelle'
                      : '1 mois d\'essai offert'
                  "
                  color="artist"
                  :list="listCheck.artistPremium"
                >
                  <template #card.subTitle>
                    <div
                      v-if="
                        !organizationProfile.isArtistPremiumProduct ||
                        organizationProfile.isTrialActive
                      "
                      class="priceBlock"
                    >
                      <span class="price">{{
                        organizationProfile.isCmf
                          ? formatCurrency(7.5, 'EUR')
                          : formatCurrency(18.0, 'EUR')
                      }}</span>
                      TTC/mois**
                    </div>
                  </template>
                  <template #card.action>
                    <v-row>
                      <v-col
                        v-if="
                          !organizationProfile.isArtistPremiumProduct &&
                          (accessProfileStore.isAdmin ||
                            accessProfileStore.isCaMember)
                        "
                        cols="12"
                      >
                        <v-btn class="btn trialBtn" @click="startTrial">
                          {{ $t('try_premium_version') }}
                          <i class="fa-solid fa-greater-than small" />
                        </v-btn>
                      </v-col>
                      <v-col
                        v-if="
                          (!organizationProfile.isArtistPremiumProduct ||
                            organizationProfile.isTrialActive) &&
                          (accessProfileStore.isAdmin ||
                            accessProfileStore.isCaMember)
                        "
                        cols="12"
                      >
                        <v-btn class="theme-artist btn" @click="subscription">
                          {{ $t('subscribe_to_the_offer') }}
                          <i class="fa-solid fa-greater-than small" />
                        </v-btn>
                      </v-col>

                      <v-col
                        v-if="
                          organizationProfile.isTrialActive &&
                          (accessProfileStore.isAdmin ||
                            accessProfileStore.isCaMember)
                        "
                        cols="12"
                      >
                        <v-btn class="stop_btn" @click="showStopTrialDialog">
                          {{ $t('stop_trial') }}
                        </v-btn>
                      </v-col>
                      <v-col cols="12">
                        <span class="special_conditions">
                          *Convient aux petites écoles sans besoins spécifiques
                          de gestion pédagogique, de facturation, etc. Pour une
                          solution complète optez pour Opentalent School
                          <span
                            v-if="
                              !organizationProfile.isArtistPremiumProduct ||
                              organizationProfile.isTrialActive
                            "
                          >
                            <br />
                            **Tarif
                            <span v-if="organizationProfile.isCmf"
                              >adhérent CMF</span
                            ><span v-else>public</span> 2025. Abonnement payable
                            annuellement.
                          </span>
                        </span>
                      </v-col>
                    </v-row>
                  </template>
                </LayoutPagesSubscriptionCard>
              </v-col>

              <v-col
                lg="4"
                sm="12"
                md="6"
                :offset="
                  !md && mdAndUp ? (organizationProfile.isSchool ? 4 : 0) : 0
                "
              >
                <LayoutPagesSubscriptionCard
                  class="schoolCard"
                  :title="
                    !organizationProfile.isSchool
                      ? 'Logiciel School Standard / Premium'
                      : organizationProfile.isSchoolPremiumProduct
                        ? 'Logiciel School Premium'
                        : 'Logiciel School Standard'
                  "
                  :sub-title="!organizationProfile.isSchool ? 'Sur devis' : ''"
                  :extra-header="
                    organizationProfile.isSchool
                      ? 'Votre version actuelle'
                      : undefined
                  "
                  color="school"
                  :list="listCheck.school"
                >
                  <template #card.action>
                    <v-row>
                      <v-col cols="12">
                        <v-btn
                          v-if="!organizationProfile.isSchool"
                          class="theme-school btn"
                          href="https://logiciels.opentalent.fr/opentalent-school"
                          target="_blank"
                        >
                          {{ $t('to_know_more') }}
                          <i class="fa-solid fa-greater-than small" />
                        </v-btn>
                      </v-col>
                      <v-col cols="12">
                        <span class="special_conditions">
                          *Extranet disponible uniquement dans la version
                          Opentalent School Premium
                        </span>
                      </v-col>
                    </v-row>
                  </template>
                </LayoutPagesSubscriptionCard>
              </v-col>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel title="opentalent_options" icon="fas fa-plus">
          <v-container fluid class="container card-container">
            <v-row cols="12">
              <v-col lg="3" sm="12" md="6">
                <LayoutPagesSubscriptionCard
                  class="optionsCard"
                  title="SMS"
                  sub-title="Option payante"
                  color="primary"
                  :list="listCheck.sms"
                >
                  <template #card.action>
                    <v-btn
                      class="theme-primary btn"
                      :href="
                        runtimeConfig.public.fileStorageBaseUrl +
                        (organizationProfile.isCmf
                          ? '/Bon_de_commande/Achat_SMS_CMF.pdf'
                          : '/Bon_de_commande/Achat_SMS_Public.pdf')
                      "
                      target="_blank"
                    >
                      acheter des credits SMS
                      <i class="fa-solid fa-greater-than small" />
                    </v-btn>
                  </template>
                </LayoutPagesSubscriptionCard>
              </v-col>

              <v-col lg="3" sm="12" md="6">
                <LayoutPagesSubscriptionCard
                  class="optionsCard"
                  title="Nom de domaine"
                  sub-title="Option payante"
                  color="primary"
                  :list="listCheck.domain"
                >
                  <template #card.action>
                    <v-btn
                      class="theme-primary btn"
                      :href="
                        runtimeConfig.public.fileStorageBaseUrl +
                        '/Bon_de_commande/Nom_de_domaine.pdf'
                      "
                      target="_blank"
                    >
                      souscrire à l'option
                      <i class="fa-solid fa-greater-than small" />
                    </v-btn>
                  </template>
                </LayoutPagesSubscriptionCard>
              </v-col>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </LayoutContainer>

    <LayoutDialogTrialAlreadyDid
      :show="showDialogTrialAllReadyDid"
      @close-dialog="showDialogTrialAllReadyDid = false"
    />

    <LayoutDialogTrialStopConfirmation
      :show="showDialogTrialStopConfirmation"
      @close-dialog="showDialogTrialStopConfirmation = false"
      @stop-trial="stopTrial"
    />
  </div>
</template>

<script setup lang="ts">
import { useAbility } from '@casl/vue'
import type { Ref } from 'vue'
import { useDisplay } from 'vuetify'
import type { AsyncData } from '#app'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import DolibarrAccount from '~/models/Organization/DolibarrAccount'
import MobytUserStatus from '~/models/Organization/MobytUserStatus'
import UrlUtils from '~/services/utils/urlUtils'
import { useDownloadFromRoute } from '~/composables/utils/useDownloadFromRoute'
import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'
import { usePageStore } from '~/stores/page'
import { DOLIBARR_BILLING_DOC_TYPE } from '~/types/enum/enums'

// meta
definePageMeta({
  name: 'subscription_page',
})

// Get composables
const ability = useAbility()
const runtimeConfig = useRuntimeConfig()
const { mdAndUp, md } = useDisplay()
const { fetch } = useEntityFetch()
const i18n = useI18n()
const { apiRequestService } = useApiLegacyRequestService()

// Init ref
const showDialogTrialAllReadyDid: Ref<boolean> = ref(false)
const showDialogTrialStopConfirmation: Ref<boolean> = ref(false)
const openedPanels: Ref<Array<string>> = initPanel()
const organizationProfile = getOrganizationProfile()
const accessProfileStore = useAccessProfileStore()
const { mobytStatus, mobytPending } = getMobytInformations()

const { data: dolibarrAccount, pending: dolibarrPending } = fetch(
  DolibarrAccount,
  organizationProfile.id,
)

const showDolibarrBillsPanel = computed(
  () =>
    !dolibarrPending.value &&
    dolibarrAccount.value &&
    dolibarrAccount.value.bills.length > 0,
)

const formatCurrency = (value: number, currency: string): string => {
  return value.toLocaleString(i18n.locale.value, {
    style: 'currency',
    currency,
  })
}

const listCheck: Record<string, Array<string>> = {
  artist: [
    '100 Mo de stockage',
    '75 comptes utilisateurs',
    'Gestion de la structure',
    'Site internet restreint',
    'Options disponibles',
  ],
  artistPremium: [
    '1Go de stockage',
    '150 comptes utilisateurs',
    'Gestion de la structure',
    'Module de communication',
    'Site internet illimité',
    'Options disponibles',
  ],
  school: [
    '500 Mo ou 1Go de stockage',
    '3 comptes administrateurs',
    'Extranet élèves, tuteurs, professeurs*',
    'Gestion de la structure',
    'Suivi pédagogique, facturation, ...',
    'Site internet complet',
    'Options adaptées à chaque structure',
  ],
  sms: [
    'Envoyez des SMS depuis votre logiciel',
    'Choisissez le nombre de crédits',
  ],
  domain: [
    'Bénéficiez de votre propre nom de domaine',
    "Et d'une adresse mail personnalisée",
  ],
}

/**
 * Initialisation des panels ouverts
 */
function initPanel(): Ref<Array<string>> {
  // On déplie les expansion panels dans le onMounted en attendant la résolution du bug : https://github.com/vuetifyjs/vuetify/issues/16427#issuecomment-1380927133
  // TODO: quand le bug ci dessus est résolu, remplacer par `const openedPanels: Ref<Array<string>> = ref([...])`
  const openedPanels: Ref<Array<string>> = ref([])
  onMounted(() => {
    openedPanels.value = [
      'subscription_page',
      'service_detail',
      'purchase_order',
      'bills',
      'opentalent_offers',
      'opentalent_options',
    ]
  })
  return openedPanels
}

/**
 * Récupération de l'organization profile
 */
function getOrganizationProfile() {
  const organizationProfile = useOrganizationProfileStore()
  if (organizationProfile.id === null) {
    throw new Error("Missing organization's id")
  }
  return organizationProfile
}

/**
 * Récupération des informations Mobyt
 */
function getMobytInformations(): {
  mobytStatus: Ref<MobytUserStatus | null>
  mobytPending: Ref<boolean>
} {
  const mobytStatus: Ref<MobytUserStatus | null> = ref(null)
  const mobytPending: Ref<boolean> = ref(false)

  if (ability.can('manage', 'texto')) {
    const { data, pending } = fetch(
      MobytUserStatus,
      organizationProfile!.id!,
    ) as AsyncData<MobytUserStatus | null, Error | null>
    mobytStatus.value = data
    mobytPending.value = pending
  }

  return { mobytStatus, mobytPending }
}

/**
 * Action lorsque l'on souhaite démarrer l'essai
 */
async function startTrial() {
  try {
    await apiRequestService.get('/trial/is_available')
    const v1BaseURL =
      runtimeConfig.baseUrlAdminLegacy ||
      runtimeConfig.public.baseUrlAdminLegacy
    await navigateTo(UrlUtils.join(v1BaseURL, '#', 'trial'), {
      external: true,
    })
  } catch (error) {
    showDialogTrialAllReadyDid.value = true
  }
}

/**
 * Action lorsque l'on souhaite souscrire à artist premium
 */
async function subscription() {
  const v1BaseURL =
    runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
  await navigateTo(UrlUtils.join(v1BaseURL, '#', 'subscribe'), {
    external: true,
  })
}

/**
 * Action lorsque l'on souhaite afficher la modal de confirmation pour stopper
 */
function showStopTrialDialog() {
  showDialogTrialStopConfirmation.value = true
}

/**
 * Action lorsque l'on souhaite stopper l'essai
 */
async function stopTrial() {
  usePageStore().loading = true
  await apiRequestService.post('/trial/stop')
  const v1BaseURL =
    runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
  await navigateTo(UrlUtils.join(v1BaseURL, '#', 'dashboard'), {
    external: true,
  })
}

const downloadDolibarrBillingDoc = (
  type: DOLIBARR_BILLING_DOC_TYPE,
  ref: string,
): void => {
  const route = UrlUtils.join(
    'api/dolibarr/download',
    type,
    encodeURIComponent(ref),
  )

  useDownloadFromRoute(route, `${ref}.pdf`)
}
</script>

<style scoped lang="scss">
.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.offer_title {
  span {
    border-radius: 5px;
    display: block;
    font-weight: bold;
    text-align: center;
    padding: 5px;
  }
}

.card-container {
  .v-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
  }
  .v-row > [class*='v-col-'] {
    display: flex;
    flex-direction: column;
  }
  .small {
    font-size: 6px;
    padding-top: 5px;
    padding-left: 5px;
  }
  .priceBlock {
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
    .price {
      text-transform: uppercase;
      font-size: 30px;
      font-weight: bold;
    }
  }
}

.special_conditions {
  font-size: 10px;
  font-style: italic;
}

.trialBtn {
  color: #000;
  border: 1px solid rgb(var(--v-theme-artist));
}

.btn {
  font-size: 12px;
}

.optionsCard {
  :deep(.margin-sup) {
    margin-top: 0;
  }
}

.stop_btn {
  color: rgb(var(--v-theme-danger));
}

.plus_btn {
  color: rgb(var(--v-theme-on-neutral));
}
</style>