app_vue2/pages/organization/subscription.vue

<!--
Page 'Mon abonnement'

@see https://ressources.opentalent.fr/display/SPEC/Mon+abonnement
-->
<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="12" md="12">
      <h3>{{ $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></td>
                  </tr>
                  <tr>
                    <td>{{ $t('version') }}</td>
                    <td>{{ organizationProfile.product }}</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="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>
                        Site internet
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <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>
                          Bénéficiez de plus de fonctionnalités avec la version
                          <b>Opentalent Artist Premium</b>
                        </p>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>
                            Pour seulement 6,33 €.TTC par mois *
                          </p>
                          <p>
                            <i>
                              * Payable annuellement, soit 76 €.TTC / an.
                              Offre réservée aux adhérents CMF (Prix public: 168€.TTC/an)
                            </i>
                          </p>
                        </div>

                        <!-- Not cmf member -->
                        <div v-else>
                          <p>
                            Pour seulement 14 € TTC par mois *
                          </p>
                          <p>
                            <i>
                              * Payable annuellement soit 168 €.TTC/an
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentartist.pdf">
                            Fiche produit Opentalent Artist Premium
                          </a>
                        </p>

                        <p v-if="organizationProfile.isCmf">
                          <a href="">
                            Télécharger le bon de commande CMF
                          </a>
                        </p>
                        <p v-else>
                          <a href="">
                            Télécharger le bon de commande
                          </a>
                        </p>
                      </td>

                      <!-- Opentalent School -->
                      <td v-if="organizationProfile.isArtist()">
                        <p>
                          Une solution économique adaptée à votre établissement d'enseignement
                          artistique
                        </p>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>A partir de 16.45€ TTC par mois *</p>
                          <p>
                            <i>
                              * Payable annuellement, soit 198€ TTC par an
                              Version <b>Opentalent School Standard</b> jusqu'à 69 élèves.
                              Hors frais de licence d'utilisation et de formation.
                              Offre réservée aux adhérents CMF (prix public: 358.80€ TTC par an)
                            </i>
                          </p>
                        </div>
                        <!-- Not cmf member -->
                        <div v-else>
                          <p>A partir de 29.90€ TTC par mois *</p>
                          <p>
                            <i>
                              * Payable annuellement, soit 358 € TTC par an
                              Version <b>Opentalent School Standard</b> jusqu'à 69 élèves.
                              Hors frais de licence d'utilisation et de formation.
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentschool">
                            Fiche produit Opentalent School
                          </a>
                        </p>

                        <p>
                          Essayez notre logiciel en toute liberté ! Contactez-nous sans plus tarder pour obtenir
                          une présentation ainsi qu'un accès de démonstration.
                        </p>
                        <p>
                          Contactez-nous au <a href="tel:+33972126017">0 972 126 017</a>, ou par mail à l'adresse
                          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
                        </p>
                      </td>

                      <!-- Opentalent School Premium -->
                      <td v-if="organizationProfile.isSchoolProduct()">
                        <p>
                          Passez à la version <b>Opentalent School Premium</b> et bénéficiez:
                        </p>

                        <ul>
                          <li>de comptes pour vos professeurs et élèves</li>
                          <li>d'un site internet complet</li>
                        </ul>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>A partir de 22.30€ TTC par mois *</p>
                          <p>
                            <i>* Payable annuellement, soit 267.60€ TTC par an
                              Version <b>Opentalent School Premium</b> jusqu'à 69 élèves.
                              Hors frais de licence d'utilisation et de formation.
                              Offre réservée aux adhérents CMF (prix public: 438€ TTC/an)</i>
                          </p>
                        </div>
                        <!-- Not cmf member -->
                        <div v-else>
                          <p>A partir de 36.50€ TTC par mois *</p>
                          <p>
                            <i>
                              * Payable annuellement, soit 438€ TTC par an
                              Version <b>Opentalent School Premium</b> jusqu'à 69 élèves.
                              Hors frais de licence d'utilisation et de formation.
                            </i>
                          </p>
                        </div>

                        <p>
                          <a href="https://www.opentalent.fr/uploads/opentalent/ficheproduit_Opentalentschool">
                            Fiche produit Opentalent School
                          </a>
                        </p>

                        <p>
                          Contactez-nous au <a href="tel:+33972126017">0-972 126 017</a>, ou par mail à l'adresse
                          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
                        </p>
                      </td>

                      <!-- SMS -->
                      <td>
                        <p>Envoyez des <b>SMS</b> directement depuis votre logiciel à vos membres / élèves</p>

                        <!-- Cmf member -->
                        <div v-if="organizationProfile.isCmf">
                          <p>A partir de 0.10 €.TTC/sms *</p>
                          <p><i>* pour 5000 SMS</i></p>

                          <p>
                            <a href="https://www.opentalent.fr/uploads/opentalent/Bon_commande_SMS_ouverture-CMF.pdf">
                              Télécharger le bon de commande CMF
                            </a>
                          </p>
                        </div>
                        <!-- Not cmf member -->
                        <div v-else>
                          <p>A partir de 0.12 €.TTC/sms *</p>
                          <p><i>* pour 5000 SMS</i></p>

                          <p>
                            <a href="https://www.opentalent.fr/uploads/opentalent/Bon_commande_SMS_ouverture-public.pdf">
                              Télécharger le bon de commande
                            </a>
                          </p>
                        </div>
                      </td>

                      <!-- Custom domain -->
                      <td>
                        <p>
                          Bénéficiez de votre <b>propre nom de domaine</b> et 5 adresses email
                          pour seulement 34.80 €.TTC / mois
                        </p>

                        <p>Exemple:</p>

                        <table>
                          <tr>
                            <td>Nom de domaine</td>
                            <td>ma-structure.fr</td>
                          </tr>
                          <tr>
                            <td>Adresse email associée</td>
                            <td>contact@NomDeMaStructure.fr</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { defineComponent, useContext } from '@nuxtjs/composition-api'
import { $organizationProfile } from '~/services/profile/organizationProfile'

export default defineComponent({
  name: 'Subscription',
  setup () {
    const { store } = useContext()
    const organizationProfile = $organizationProfile(store)

    console.log(organizationProfile)

    return {
      organizationProfile
    }
  }
})
</script>

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

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

  #products-section tr:first-child td {
    text-align: center;
  }

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

</style>