app/pages/subscription.vue

<!--
Page 'Mon abonnement'

@see https://ressources.opentalent.fr/display/SPEC/Mon+abonnement
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-expansion-panels :multiple="true" v-model="openedPanels">
        <UiExpansionPanel title="informations" icon="fas fa-info">
          <v-container fluid class="container">
            <v-row>
              <v-table>
                <tbody>
                <tr>
                  <td>{{ $t('client_id') }}</td>
                  <td>{{ dolibarrAccount ? dolibarrAccount.clientNumber : '-' }}</td>
                </tr>
                <tr>
                  <td>{{ $t('version') }}</td>
                  <td>{{ dolibarrAccount ? $t(dolibarrAccount.product) : '-' }}</td>
                </tr>
                <tr v-if="dolibarrAccount && dolibarrAccount.contract">
                  <td>{{ $t('services') }}</td>
                  <td class="py-2">
                    <div
                        v-for="line in dolibarrAccount.contract.lines"
                        :key="line.id"
                    >
                      {{ line.serviceLabel }} - {{ $t('until') }} :
                      {{ $d(line.dateEnd) }}
                    </div>
                  </td>
                </tr>
                <tr v-if="$can('manage', 'texto')">
                  <td>{{ $t('remaining_sms_credit') }}</td>
                  <td>
                    <span v-if="!mobytPending && mobytStatus !== null && mobytStatus.active">
                      {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
                      {{ $t('convert_price_to_sms', { nb_sms: mobytStatus.amount }) }}
                    </span>
                  </td>
                </tr>
                </tbody>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel v-if="showDolibarrPanel" title="bills" icon="fas fa-file">
          <v-container fluid class="container">
            <v-row>
              <v-table>
                <thead>
                <tr>
                  <th>{{ $t('reference') }}</th>
                  <th>{{ $t('date') }}</th>
                  <th>{{ $t('taxExcludedAmount') }}</th>
                  <th>{{ $t('status') }}</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>
                </tr>
                </tbody>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel title="more_features" icon="fas fa-plus">
          <v-container id="products-section" fluid class="container">
            <v-row>
              <v-table>
                <template #default>
                  <thead>
                  <tr>
                    <th v-if="organizationProfile.isArtistProduct">
                      {{ $t('PRODUCT_ARTIST_PREMIUM') }}
                    </th>
                    <th v-if="organizationProfile.isArtist">
                      {{ $t('PRODUCT_SCHOOL') }}
                    </th>
                    <th>
                      {{ $t('sms') }}
                    </th>
                    <th>
                      {{ $t('website') }}
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr class="center-td-content">
                    <td v-if="organizationProfile.isArtistProduct">
                      <nuxt-img src="/images/Artist-Square.jpg" />
                    </td>
                    <td v-if="organizationProfile.isArtist">
                      <nuxt-img src="/images/School-Square.jpg" />
                    </td>
                    <td>
                      <nuxt-img src="/images/sms_big.png" />
                    </td>
                    <td>
                      <nuxt-img src="/images/nom-de-domaine.jpg" />
                    </td>
                  </tr>
                  <tr>
                    <!-- Opentalent Artist Premium -->
                    <td v-if="organizationProfile.isArtistProduct">
                      <p>
                        {{ $t('get_more_functionalities_with_version') }} <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
                      </p>

                      <!-- Cmf member -->
                      <div v-if="organizationProfile.isCmf">
                        <p>
                          <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }} *</b>
                        </p>
                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(87.00, 'EUR') }) }}</i></div>
                        <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(168.00, 'EUR') }) }})</i></div>
                      </div>

                      <!-- Not a cmf member -->
                      <div v-else>
                        <p>
                          <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(14.00, 'EUR') }) }} *</b>
                        </p>
                        <p>
                          <i>
                            * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(168.00, 'EUR') }) }}
                          </i>
                        </p>
                      </div>

                      <p class="mt-3">
                        <a href="/resources/Fiche_produit_Opentalent_Artist.pdf" target="_blank">
                          {{ $t('product_sheet') }} {{ $t('PRODUCT_ARTIST_PREMIUM') }}
                        </a>
                      </p>

                      <p v-if="organizationProfile.isCmf" class="mt-3">
                        <a href="/resources/BDC_Artist_Premium_CMF.pdf">
                          <b>{{ $t('download_cmf_order_form') }}</b>
                        </a>
                      </p>
                      <p v-else class="mt-3">
                        <a href="/resources/BDC_Artist_Premium_Public.pdf">
                          <b>{{ $t('download_order_form') }}</b>
                        </a>
                      </p>
                    </td>

                    <!-- Opentalent School Premium -->
                    <td v-if="organizationProfile.isArtist">
                      <p>
                        {{ $t('switch_to_version') }} <b>{{ $t('PRODUCT_SCHOOL_PREMIUM') }}</b> {{ $t('and_benefit') }} :
                      </p>

                      <ul class="mb-2">
                        <li>{{ $t('of_accounts_for_teachers_and_students') }}</li>
                        <li>{{ $t('of_a_complete_website') }}</li>
                      </ul>

                      <!-- Cmf member -->
                      <div v-if="organizationProfile.isCmf">
                        <p><b>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(26.50, 'EUR') }) }} *</b></p>
                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(318.00, 'EUR') }) }}</i></div>
                        <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
                        <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
                        <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(529.20, 'EUR') }) }})</i></div>
                      </div>
                      <!-- Not cmf member -->
                      <div v-else>
                        <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(44.10, 'EUR') }) }} *</p>
                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(529.20, 'EUR') }) }}</i></div>
                        <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
                        <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
                      </div>

                      <p class="mt-4">
                        <a href="/resources/Fiche_produit_Opentalent_School.pdf" target="_blank">
                          {{ $t('product_sheet') }} {{ $t('PRODUCT_SCHOOL') }}
                        </a>
                      </p>

                      <p>
                        {{ $t('contact_us_at') }} <a href="tel:+33972126017">0 972 126 017</a>, {{ $t('or_by_mail_at') }}
                        <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
                      </p>
                    </td>

                    <!-- SMS -->
                    <td>
                      <p><b>{{ $t('send_sms') }} {{ $t('to_your_members_from_app') }}</b></p>

                      <!-- Cmf member -->
                      <div v-if="organizationProfile.isCmf">
                        <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.10, 'EUR') }) }} *</b></p>
                        <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>

                        <p>
                          <b>
                            <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
                              {{ $t('download_cmf_order_form') }}
                            </a>
                          </b>
                        </p>
                      </div>
                      <!-- Not cmf member -->
                      <div v-else>
                        <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.12, 'EUR') }) }} *</b></p>
                        <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>

                        <p>
                          <a href="/resources/BDC_SMS_Public.pdf" target="_blank">
                            <b>{{ $t('download_order_form') }}</b>
                          </a>
                        </p>
                      </div>
                    </td>

                    <!-- Custom domain -->
                    <td>
                      <p>
                        <b>{{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: formatCurrency(34.80, 'EUR') }) }}</b>
                      </p>

                      <p>{{ $t('example') }} :</p>
                      <table>
                        <tbody>
                        <tr>
                          <td style="width: 190px;">
                            {{ $t('domain_name') }} :
                          </td>
                          <td>
                            <i>{{ $t('dummy_domain_name') }}</i>
                          </td>
                        </tr>
                        <tr>
                          <td>{{ $t('associated_mail_address') }} : </td>
                          <td>
                            <i>{{ $t('dummy_email_address') }}</i>
                          </td>
                        </tr>
                        </tbody>
                      </table>

                      <p>
                        <a href="/resources/BDC_Nom_de_domaine.pdf" target="_blank">
                          <b>{{ $t('download_order_form') }}</b>
                        </a>
                      </p>
                    </td>
                  </tr>
                  </tbody>
                </template>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </LayoutContainer>
</template>

<script setup lang="ts">
  import {useAbility} from "@casl/vue";
  import {useOrganizationProfileStore} from "~/stores/organizationProfile";
  import {useEntityFetch} from "~/composables/data/useEntityFetch";
  import {DolibarrAccount} from "~/models/Organization/DolibarrAccount";
  import {MobytUserStatus} from "~/models/Organization/MobytUserStatus";
  import {Ref} from "@vue/reactivity";
  import {useAbilityUtils} from "~/composables/utils/useAbilityUtils";
  import {useAccessProfileStore} from "~/stores/accessProfile";

  const ability = useAbility()

  onBeforeMount(() => {
    if(!ability.can('display', 'subscription_page'))
      return navigateTo('/error')
  })

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

  // On ouvre les panneaux 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(['informations', 'bills', 'more_features'])`
  const openedPanels: Ref<Array<string>> = ref([])
  onMounted(() => {
    openedPanels.value = ['informations', 'bills', 'more_features']
  })

  const i18n = useI18n()
  const organizationProfile = useOrganizationProfileStore()
  if (organizationProfile.id === null) {
    throw new Error("Missing organization's id")
  }

  const { fetch } = useEntityFetch()

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

  if (organizationProfile.hasModule('Sms')) {
    const {data: mobytStatus, pending: mobytPending} = fetch(MobytUserStatus, organizationProfile.id)
  } else {
    const mobytStatus = ref(null)
    const mobytPending = ref(false)
  }

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

<style>
#products-section table {
  table-layout: fixed;
  width: 100%;
}

#products-section table img {
  max-height: 250px;
  max-width: 100%;
}

#products-section tr.center-td-content td {
  text-align: center;
}

#products-section td {
  padding: 12px 18px;
  vertical-align: top;
}

#products-section p {
  margin-bottom: 12px;
}

#products-section ul {
  padding-left: 24px;
}

.theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
  background:none;
}

.products-pictures img {
  width: 70%;
}
</style>