app_vue2/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">
      <h3 class="margin-bottom-20">
        {{ $t('my_subscription') }}
      </h3>

      <v-expansion-panels focusable multiple :value="[0,1]">
        <UiExpansionPanel id="informations" icon="fa-info">
          <v-container fluid class="container">
            <v-row>
              <v-simple-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>
                      <div
                        v-for="line in dolibarrAccount.contract.lines"
                        :key="line.id"
                        style="list-style: none;"
                      >
                        {{ line.serviceLabel }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>{{ $t('remaining_sms_credit') }}</td>
                    <td>
                      <UiDisplayMobytStatus />
                    </td>
                  </tr>
                  <tr v-if="organizationProfile.isCmf && organizationProfile.isArtistProduct">
                    <td>{{ $t('paying_structure') }}</td>
                    <td>
                      CMF
                    </td>
                  </tr>
                </tbody>
              </v-simple-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel id="bills" icon="fa-file">
          <v-container fluid class="container">
            <v-row>
              <v-simple-table v-if="!dolibarrAccountFetch.pending && dolibarrAccount && dolibarrAccount.bills">
                <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>{{ $moment(bill.date).format($moment.localeData($i18n.locale).longDateFormat('L')) }}</td>
                    <td>{{ bill.taxExcludedAmount.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}</td>
                    <td>{{ bill.status === 1 ? $t('paid') : $t('unpaid') }}</td>
                  </tr>
                </tbody>
              </v-simple-table>
              <div v-else class="ma-2">
                <i>{{ $t('no_bill_to_display') }}</i>
              </div>
            </v-row>
          </v-container>
        </UiExpansionPanel>

        <UiExpansionPanel id="more_features" icon="fa-plus">
          <v-container id="products-section" fluid class="container">
            <v-row>
              <v-simple-table>
                <template #default>
                  <thead>
                    <tr>
                      <th v-if="organizationProfile.isArtistProduct">
                        Opentalent Artist Premium
                      </th>
                      <th v-if="organizationProfile.isArtist">
                        Opentalent School
                      </th>
                      <th v-if="organizationProfile.isSchoolProduct">
                        Opentalent School Premium
                      </th>
                      <th>
                        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 v-if="organizationProfile.isSchoolProduct">
                        <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>Opentalent Artist Premium</b>
                        </p>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>
                            {{ $t('for_only_x_eur_ttc_by_month', { price: '6.33' }) }} *
                          </p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '76' }) }}
                              {{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: '168' }) }})
                            </i>
                          </p>
                        </div>

                        <!-- Not cmf member -->
                        <div v-else>
                          <p>
                            {{ $t('for_only_x_eur_ttc_by_month', { price: '14' }) }} *
                          </p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '168' }) }}
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentartist.pdf">
                            {{ $t('product_sheet') }} Opentalent Artist Premium
                          </a>
                        </p>

                        <p v-if="organizationProfile.isCmf">
                          <a href="">
                            {{ $t('download_cmf_order_form') }}
                          </a>
                        </p>
                        <p v-else>
                          <a href="">
                            {{ $t('download_order_form') }}
                          </a>
                        </p>
                      </td>

                      <!-- Opentalent School -->
                      <td v-if="organizationProfile.isArtist">
                        <p>
                          {{ $t('a_suitable_solution_for_your_artistic_school') }}
                        </p>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '16.45' }) }} *</p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '198' }) }}
                              {{ $t('version_x_up_to_x_students', { product: 'Opentalent School Standard', max_students: '69' }) }}
                              {{ $t('excluding_license_and_training_fees') }}.
                              {{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: '358.80' }) }})
                            </i>
                          </p>
                        </div>
                        <!-- Not a cmf member -->
                        <div v-else>
                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '29.90' }) }} *</p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '358' }) }}
                              {{ $t('version_x_up_to_x_students', { product: 'Opentalent School Standard', max_students: '69' }) }}
                              {{ $t('excluding_license_and_training_fees') }}.
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentschool">
                            {{ $t('product_sheet') }} Opentalent School
                          </a>
                        </p>

                        <p>
                          {{ $t('freely_try_our_software') }} !
                          {{ $t('contact_us_for_show_and_demo') }}.
                        </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>

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

                        <ul>
                          <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>{{ $t('starting_from_x_eur_ttc_per_month', { price: '22,30' }) }} *</p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '267,60' }) }}
                              {{ $t('version_x_up_to_x_students', { product: 'Opentalent School Premium', max_students: '69' }) }}
                              {{ $t('excluding_license_and_training_fees') }}.
                              {{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: '438' }) }})
                            </i>
                          </p>
                        </div>
                        <!-- Not cmf member -->
                        <div v-else>
                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '36,50' }) }} *</p>
                          <p>
                            <i>
                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '438' }) }}
                              {{ $t('version_x_up_to_x_students', { product: 'Opentalent School Premium', max_students: '69' }) }}
                              {{ $t('excluding_license_and_training_fees') }}.
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentschool">
                            {{ $t('product_sheet') }} Opentalent 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>{{ $t('send_sms_from_app_to_your_members') }}</p>

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

                          <p>
                            <a href="https://www.opentalent.fr/uploads/opentalent/Bon_commande_SMS_ouverture-CMF.pdf">
                              {{ $t('download_cmf_order_form') }}
                            </a>
                          </p>
                        </div>
                        <!-- Not cmf member -->
                        <div v-else>
                          <p>{{ $t('starting_from_x_eur_ttc_per_sms', { price: '0.12' }) }} *</p>
                          <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>

                          <p>
                            <a href="https://www.opentalent.fr/uploads/opentalent/Bon_commande_SMS_ouverture-public.pdf">
                              {{ $t('download_order_form') }}
                            </a>
                          </p>
                        </div>
                      </td>

                      <!-- Custom domain -->
                      <td>
                        <p>
                          {{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: '34,80' }) }}
                        </p>

                        <p>{{ $t('example') }} :</p>
                        <table>
                          <tr>
                            <td style="width: 200px;">
                              {{ $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>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </LayoutContainer>
</template>

<script lang="ts">
import { defineComponent, useFetch, useContext, ref, Ref } from '@nuxtjs/composition-api'
import { $organizationProfile } from '~/services/profile/organizationProfile'
import { QUERY_TYPE } from '~/types/enums'
import { ApiResponse, DolibarrAccount } from '~/types/interfaces'

export default defineComponent({
  name: 'Subscription',
  setup () {
    const { store, $dataProvider } = useContext()
    const organizationProfile = $organizationProfile(store)
    const id: number = store.state.profile.organization.id
    const dolibarrAccount: Ref<DolibarrAccount | null> = ref(null)

    // fetch the dolibarr account's data
    const { fetchState } = useFetch(async () => {
      try {
        const response: ApiResponse = await $dataProvider.invoke({
          type: QUERY_TYPE.DEFAULT,
          url: '/api/dolibarr/account/' + id
        })
        dolibarrAccount.value = response.data as DolibarrAccount
      } catch (Error) {
        // eslint-disable-next-line no-console
        console.error('Error: Dolibarr account not found')
      }
    })

    return {
      organizationProfile,
      dolibarrAccount,
      dolibarrAccountFetch: fetchState
    }
  }
})
</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;
  }

</style>