app/components/Layout/AlertBar/Cotisation.vue

<!--
Cotisation bar

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

<template>
  <main>
    <UiSystemBar
      v-if="alert && alert.text && alert.callback"
      :text="$t(alert.text)"
      icon="fas fa-info-circle"
      :on-click="alert.callback"
      class="theme-info"
    />
  </main>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
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, pending } = await fetch(
  Cotisation,
  organizationProfile.id,
)

interface Alert {
  text: string
  callback: () => void
}

const alert: ComputedRef<Alert | null> = computed(() => {
  if (pending.value) {
    return null
  }

  cotisationYear.value = cotisation.value.cotisationYear

  const mapping: Record<ALERT_STATE_COTISATION, Alert> = {
    AFFILIATION: { text: 'cotisation_access', callback: goToCotisation },
    INVOICE: { text: 'upload_cotisation_invoice', callback: openInvoiceWindow },
    INSURANCE: { text: 'renew_insurance_cmf', callback: goToInsurancePage },
    ADVERTISINGINSURANCE: {
      text: 'insurance_cmf_subscription',
      callback: openCmfSubscriptionPage,
    },
  }

  if (!cotisation.value.alertState) {
    return null
  }

  return mapping[cotisation.value.alertState as ALERT_STATE_COTISATION]
})
</script>

<style scoped lang="scss">
:deep(.clickable:hover) {
  text-decoration: none !important;
}
</style>