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 v-model="openedPanels" :multiple="true">
        <UiExpansionPanel title="informations" icon="fas fa-info">
          <v-container fluid class="container">
            <v-row>
              <v-table>
                <tbody>
                  <tr>
                    <td v-if="smAndUp">{{ $t('client_id') }}</td>
                    <td class="py-2">
                      <h5
                        v-if="!smAndUp"
                        class="text-decoration-underline py-2"
                      >
                        {{ $t('client_id') }}
                      </h5>
                      <span>{{
                        dolibarrAccount ? dolibarrAccount.clientNumber : '-'
                      }}</span>
                    </td>
                  </tr>
                  <tr>
                    <td v-if="smAndUp">{{ $t('version') }}</td>
                    <td class="py-2">
                      <h5
                        v-if="!smAndUp"
                        class="text-decoration-underline py-2"
                      >
                        {{ $t('version') }}
                      </h5>
                      <span>{{
                        dolibarrAccount ? $t(dolibarrAccount.product) : '-'
                      }}</span>
                    </td>
                  </tr>
                  <tr v-if="dolibarrAccount && dolibarrAccount.contract">
                    <td v-if="smAndUp">{{ $t('services') }}</td>
                    <td class="py-2">
                      <h5
                        v-if="!smAndUp"
                        class="text-decoration-underline py-2"
                      >
                        {{ $t('services') }}
                      </h5>
                      <div
                        v-for="line in dolibarrAccount.contract.lines"
                        :key="line.id"
                      >
                        {{ line.serviceLabel }} - {{ $t('until') }} :
                        {{ $d(line.dateEnd) }}
                      </div>
                    </td>
                  </tr>
                  <tr v-if="ability.can('manage', 'texto')">
                    <td v-if="smAndUp">{{ $t('remaining_sms_credit') }}</td>
                    <td class="py-2">
                      <h5
                        v-if="!smAndUp"
                        class="text-decoration-underline py-2"
                      >
                        {{ $t('remaining_sms_credit') }}
                      </h5>
                      <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>
                    </td>
                  </tr>
                </tbody>
              </v-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel
          v-if="showDolibarrPanel"
          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>
                  </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="true" class="container">
            <v-row>
              <!-- Opentalent Artist Premium -->
              <v-col
                v-if="organizationProfile.isArtistProduct"
                :cols="colWidth"
              >
                <v-row>
                  {{ $t('PRODUCT_ARTIST_PREMIUM') }}
                </v-row>
                <v-row class="align-end">
                  <nuxt-img src="/images/Opentalent_Artist.png" />
                </v-row>
                <v-row>
                  <p>
                    {{ $t('get_more_functionalities_with_version') }}
                    <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
                  </p>

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

                  <!-- Not a cmf member -->
                  <div v-else>
                    <p>
                      <b
                        >{{
                          i18n.t('for_only_x_eur_ttc_by_month', {
                            price: formatCurrency(14.0, 'EUR'),
                          })
                        }}&nbsp;*</b
                      >
                    </p>
                    <p>
                      <i>
                        *&nbsp;{{
                          i18n.t('yearly_paid_giving_x_eur_ttc_per_year', {
                            price: formatCurrency(168.0, '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_Opentalent_Artist_CMF.pdf">
                      <b>{{ $t('download_cmf_order_form') }}</b>
                    </a>
                  </p>
                  <p v-else class="mt-3">
                    <a href="/resources/BDC_Opentalent_Artist_Public.pdf">
                      <b>{{ $t('download_order_form') }}</b>
                    </a>
                  </p>
                </v-row>
              </v-col>

              <!-- Opentalent School Premium -->
              <v-col v-if="organizationProfile.isArtist" :cols="colWidth">
                <v-row>
                  {{ $t('PRODUCT_SCHOOL') }}
                </v-row>
                <v-row class="align-end">
                  <nuxt-img src="/images/Opentalent_School.png" />
                </v-row>
                <v-row>
                  <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
                        >{{
                          i18n.t('starting_from_x_eur_ttc_per_month', {
                            price: formatCurrency(26.5, 'EUR'),
                          })
                        }}&nbsp;*</b
                      >
                    </p>
                    <div>
                      <i
                        >*
                        {{
                          i18n.t('yearly_paid_giving_x_eur_ttc_per_year', {
                            price: formatCurrency(318.0, 'EUR'),
                          })
                        }}</i
                      >
                    </div>
                    <div>
                      <i>{{
                        i18n.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') }} ({{
                          i18n.t('public_price_x_ttc_a_year', {
                            price: formatCurrency(529.2, 'EUR'),
                          })
                        }})</i
                      >
                    </div>
                  </div>
                  <!-- Not cmf member -->
                  <div v-else>
                    <p>
                      {{
                        i18n.t('starting_from_x_eur_ttc_per_month', {
                          price: formatCurrency(44.1, 'EUR'),
                        })
                      }}&nbsp;*
                    </p>
                    <div>
                      <i
                        >*&nbsp;{{
                          i18n.t('yearly_paid_giving_x_eur_ttc_per_year', {
                            price: formatCurrency(529.2, 'EUR'),
                          })
                        }}</i
                      >
                    </div>
                    <div>
                      <i>{{
                        i18n.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>
                </v-row>
              </v-col>

              <!-- SMS -->
              <v-col :cols="colWidth">
                <v-row>
                  {{ $t('sms') }}
                </v-row>
                <v-row class="align-end">
                  <nuxt-img src="/images/sms.png" :height="140" :width="175" />
                </v-row>
                <v-row>
                  <p>
                    <b
                      >{{ $t('send_sms') }}
                      {{ $t('to_your_members_from_app') }}</b
                    >
                  </p>

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

                    <p>
                      <b>
                        <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
                          {{ i18n.t('download_cmf_order_form') }}
                        </a>
                      </b>
                    </p>
                  </div>
                  <!-- Not cmf member -->
                  <div v-else>
                    <p>
                      <b
                        >{{
                          i18n.t('starting_from_x_eur_ttc_per_sms', {
                            price: formatCurrency(0.12, 'EUR'),
                          })
                        }}&nbsp;*</b
                      >
                    </p>
                    <p>
                      <i
                        >*&nbsp;{{ i18n.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>
                </v-row>
              </v-col>

              <!-- Custom domain -->
              <v-col :cols="colWidth">
                <v-row>
                  {{ $t('website') }}
                </v-row>
                <v-row class="align-end">
                  <nuxt-img src="/images/nom_de_domaine.png" :height="160" />
                </v-row>
                <v-row>
                  <v-col>
                    <p>
                      <b>{{
                        i18n.t(
                          'get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_year',
                          { price: formatCurrency(44.0, 'EUR') },
                        )
                      }}</b>
                    </p>

                    <p>{{ $t('example') }} :</p>

                    <table>
                      <tbody>
                        <tr>
                          <td class="pa-2" style="width: 190px">
                            {{ $t('domain_name') }}&nbsp;:
                          </td>
                          <td>
                            <i>{{ $t('dummy_domain_name') }}</i>
                          </td>
                        </tr>
                        <tr>
                          <td class="pa-2">
                            {{ $t('associated_mail_address') }}&nbsp;:
                          </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>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </LayoutContainer>
</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'

const ability = useAbility()

definePageMeta({
  name: 'subscription_page',
})

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

const { smAndUp } = useDisplay()

// 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(['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,
)

let mobytStatus: Ref<MobytUserStatus | null>
let mobytPending: Ref<boolean>

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

    mobytStatus = data
    mobytPending = pending
  }
  fetchMobytStatus()
} else {
  mobytStatus = ref(null)
  mobytPending = ref(false)
}

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

// Compute the number of columns of the more_features pannel
const nbCols =
  2 +
  (organizationProfile.isArtist ? 1 : 0) +
  (organizationProfile.isArtistProduct ? 1 : 0)
const colWidth = 12 / nbCols
</script>

<style scoped lang="scss">
#products-section {
  width: 100%;

  .v-col {
    min-width: 260px;
    border: solid 1px rgb(var(--v-theme-on-primary));

    .v-row:nth-child(1) {
      //background: rgb(var(--v-theme-neutral-soft));
      height: 64px;
      color: rgb(var(--v-theme-on-neutral-soft));
      //font-size: 15px;
      font-weight: bold;
      border-bottom: solid 1px rgb(var(--v-theme-neutral));
    }

    .v-row:nth-child(2) {
      height: 230px;
      display: flex;
      justify-content: center;
      border-bottom: solid 1px rgb(var(--v-theme-neutral));
    }

    .v-row:nth-child(3) {
    }
  }

  .v-col:not(:first-child) {
    border-left: none;
  }

  img {
    max-height: 90%;
    max-width: 90%;
  }

  .v-row {
    padding: 12px 18px;
    vertical-align: top;
    border-bottom: solid 1px rgb(var(--v-theme-on-primary));
  }
  .v-row:last-child {
    border: none;
  }

  p {
    margin-bottom: 12px;
  }

  ul {
    padding-left: 24px;
  }
}
</style>