app/components/Layout/AlertBar/Cotisation.vue

<!--
Cotisation bar

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

<template>
  <main>
    <!-- TODO : fonctionnement à valider -->
    <UiSystemBar v-if="showCotisationAccess" background-color="ot-info" text-color="ot-white">
      <template #bar.text>
        <a @click="goOn('AFFILIATION')">
          <v-icon small>fas fa-info-circle</v-icon>
          {{$t('cotisation_access')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar v-else-if="showUploadInvoice" background-color="ot-info" text-color="ot-white">
      <template #bar.text>
        <a @click="goOn('INVOICE')">
          <v-icon small>fas fa-info-circle</v-icon>
          {{$t('upload_cotisation_invoice')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar v-else-if="showRenewInsurance" background-color="ot-info" text-color="ot-white">
      <template #bar.text>
        <a @click="goOn('INSURANCE')">
          <v-icon small>fas fa-info-circle</v-icon>
          {{$t('renew_insurance_cmf')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar v-else-if="showInsuranceSubscription" background-color="ot-info" text-color="ot-white">
      <template #bar.text>
        <a @click="goOn('ADVERTISINGINSURANCE')">
          <v-icon small>fas fa-info-circle</v-icon>
          {{$t('insurance_cmf_subscription')}}
        </a>
      </template>
    </UiSystemBar>
  </main>
</template>

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

const { fetch } = useEntityFetch()

const organizationProfile = useOrganizationProfileStore()

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

const cotisationYear: Ref<number | null> = ref(null)
const showCotisationAccess: Ref<Boolean> = ref(false)
const showUploadInvoice: Ref<Boolean> = ref(false)
const showRenewInsurance: Ref<Boolean> = ref(false)
const showInsuranceSubscription: Ref<Boolean> = ref(false)

/**
 * On récupère l'état des cotisations via l'API
 */
useAsyncData(async () => {
  if (!organizationProfile.id) {
    throw new Error('missing organization id')
  }
  const { data: cotisation } = await fetch(Cotisation, organizationProfile.id)

  if (cotisation.value !== null) {
    cotisationYear.value = cotisation.value.cotisationYear
    handleShow(cotisation.value.alertState)
  }
})

/**
 * Suivant l'état de l'alerte on affiche tel ou tel message
 * @param alertState
 */
const handleShow = (alertState: ALERT_STATE_COTISATION) =>{
  switch(alertState){
    case ALERT_STATE_COTISATION.AFFILIATION :
      showCotisationAccess.value = true
      break;
    case ALERT_STATE_COTISATION.INVOICE :
      showUploadInvoice.value = true
      break;
    case ALERT_STATE_COTISATION.INSURANCE :
      showRenewInsurance.value = true
      break;
    case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
      showInsuranceSubscription.value = true
      break;
  }
}

/**
 * Suivant le bandeau, une action différente est réalisée
 * @param type
 */
const goOn = (type: ALERT_STATE_COTISATION) => {
  switch(type){
    case ALERT_STATE_COTISATION.AFFILIATION :
      if (!organizationProfile.id) {
        throw new Error('missing organization id')
      }
      window.location.href = Url.join(baseLegacyUrl, '/cotisation/cotisation_steps', organizationProfile.id, 'steps/1')
      break;
    case ALERT_STATE_COTISATION.INVOICE :
      if (!cotisationYear.value) {
        throw new Error('no cotisation year defined')
      }
      window.open(
          Url.join(baseLegacyUrl, 'cotisation/invoice', cotisationYear.value),
          '_blank'
      )
      break;
    case ALERT_STATE_COTISATION.INSURANCE :
      window.location.href = Url.join(baseLegacyUrl, 'cotisation/insuranceedit')
      break;
    case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
      window.open(
          'https://www.cmf-musique.org/services/assurances/assurance-de-groupe/',
          '_blank'
      )
      break;
  }
}
</script>

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}
</style>