app/components/Layout/AlertBar/Cotisation.vue

<!--
Cotisation bar

Barre d'alerte qui s'affiche pour donner l'état de la cotisation
-->

<template>
  <main>
    <!-- TODO : vérifier le bon fonctionnement -->
    <UiSystemBar
        v-if="show"
        :text="$t(alertTextKey)"
        icon="fas fa-info-circle"
        :on-click="alertOnClick"
        background-color="ot-info"
        text-color="ot-white"
    />
  </main>
</template>

<script setup lang="ts">
import {useOrganizationProfileStore} from "~/stores/organizationProfile";
import {Ref} from "vue";
import UrlUtils from "~/services/utils/urlUtils";
import {ALERT_STATE_COTISATION} from "~/types/enum/enums";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import Cotisation from "~/models/Organization/Cotisation";

const organizationProfile = useOrganizationProfileStore()

const runtimeConfig = useRuntimeConfig()
const baseLegacyUrl: string = runtimeConfig.baseUrlAdminLegacy

const cotisationYear: Ref<number | null> = ref(null)


/**
 * Redirige l'utilisateur vers la page des cotisations
 */
const goToCotisation = () => {
  if (!organizationProfile.id) {
    throw new Error('missing organization id')
  }
  window.location.href = UrlUtils.join(baseLegacyUrl, '/cotisation/cotisation_steps', organizationProfile.id, 'steps/1')
}

/**
 * Ouvre la page facturation dans un nouvel onglet
 */
const openInvoiceWindow = () => {
  if (!cotisationYear.value) {
    throw new Error('no cotisation year defined')
  }
  window.open(UrlUtils.join(baseLegacyUrl, 'cotisation/invoice', cotisationYear.value), '_blank')
}

/**
 * Redirige l'utilisateur vers la page des assurances
 */
const goToInsurancePage = () => {
  window.location.href = UrlUtils.join(baseLegacyUrl, 'cotisation/insuranceedit')
}

/**
 * Redirige (dans un nouvel onglet) l'utilsateur vers le site web de la CMF
 */
const openCmfSubscriptionPage = () => {
  window.open('https://www.cmf-musique.org/services/assurances/assurance-de-groupe/', '_blank')
}

// On récupère l'état des cotisations via l'API
if (!organizationProfile.id) {
  throw new Error('missing organization id')
}

const { fetch } = useEntityFetch()
const { data: cotisation } = await fetch(Cotisation, organizationProfile.id)

const show: Ref<boolean> = ref(false)
const alertTextKey: Ref<string> = ref('')
const alertOnClick: Ref<() => void> = ref(() => {})

if (cotisation.value !== null) {
  cotisationYear.value = cotisation.value.cotisationYear
  show.value = true

  switch(cotisation.value.alertState) {
    case ALERT_STATE_COTISATION.AFFILIATION :
      alertTextKey.value = 'cotisation_access'
      alertOnClick.value = goToCotisation
      break;
    case ALERT_STATE_COTISATION.INVOICE :
      alertTextKey.value = 'upload_cotisation_invoice'
      alertOnClick.value = openInvoiceWindow
      break;
    case ALERT_STATE_COTISATION.INSURANCE :
      alertTextKey.value = 'renew_insurance_cmf'
      alertOnClick.value = goToInsurancePage
      break;
    case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
      alertTextKey.value = 'insurance_cmf_subscription'
      alertOnClick.value = openCmfSubscriptionPage
      break;
  }
}

</script>