github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/general/messages/CFacture.vue (about)

     1  <template>
     2    <div>
     3      <div class="mb-2">{{ salutations }},</div>
     4  
     5      <div v-if="isRappel">
     6        Il semble que votre <b>règlement</b> pour votre inscription ne nous soit
     7        pas encore parvenu. Merci de nous le faire parvenir au plus vite à :
     8        <br />
     9        <coordonnees-centre></coordonnees-centre>
    10      </div>
    11      <div v-else>
    12        <b-row>
    13          <b-col>
    14            <b-row>
    15              <b-col cols="auto">
    16                La facture correspondant à votre inscription est disponible.
    17              </b-col>
    18              <b-col class="align-self-center" style="max-width: 120px;">
    19                <b-badge
    20                  class="d-block"
    21                  :href="urlDownload"
    22                  @click="afterDownload"
    23                  >Télécharger</b-badge
    24                >
    25              </b-col>
    26            </b-row>
    27          </b-col>
    28          <b-col v-if="wasDownloaded" class="text-muted text-right" cols="4">
    29            <i>(Téléchargée le {{ time(message.modified) }})</i>
    30          </b-col>
    31        </b-row>
    32        Merci de nous faire parvenir votre <b>réglement</b> à :
    33        <coordonnees-centre></coordonnees-centre>
    34  
    35        <b-card sub-title="Bons CAFs" sub-title-text-variant="fushia">
    36          Si vous bénéficiez de bons vacances valides, merci de nous les
    37          transmettre via cet espace (<b-link :to="routePaiement"
    38            >Ajouter une aide</b-link
    39          >) ou par message.
    40        </b-card>
    41        <b-card sub-title="Chèques" sub-title-text-variant="fushia">
    42          Les chèques sont à l’ordre de <b>ACVE</b>, et sont encaissés une dizaine
    43          de jours avant le début du séjour.
    44        </b-card>
    45        <b-card sub-title="Virement" sub-title-text-variant="fushia">
    46          Si vous le souhaitez, vous pouvez aussi régler par
    47          <b-link :to="routePaiement">virement bancaire</b-link>. Merci de bien
    48          indiquer votre label !
    49        </b-card>
    50        <b-card sub-title="Version papier" sub-title-text-variant="fushia">
    51          Les documents du séjour vous seront envoyés prochainement par mail. Si
    52          vous souhaitez les recevoir par courrier, vous pouvez nous envoyer une
    53          enveloppe timbrée.
    54        </b-card>
    55      </div>
    56      <div class="mt-2">
    57        Pour le centre d'inscriptions, <br />
    58        Marie-Pierre BUFFET
    59      </div>
    60    </div>
    61  </template>
    62  
    63  <script lang="ts">
    64  import Vue from "vue";
    65  import Component from "vue-class-component";
    66  import { PseudoMessage } from "@/shared/logic/types";
    67  import { C } from "../../../logic/controller";
    68  import { isNullDateString, formatDateTime } from "@/shared/logic/utils";
    69  import CoordonneesCentre from "./CoordonneesCentre.vue";
    70  import { RoutePaiment } from "@/pages/espace_perso/router/routes";
    71  
    72  const CFactureProps = Vue.extend({
    73    props: {
    74      message: Object as () => PseudoMessage
    75    }
    76  });
    77  
    78  @Component({
    79    components: { CoordonneesCentre }
    80  })
    81  export default class CFacture extends CFactureProps {
    82    get wasDownloaded() {
    83      return !isNullDateString(this.message.modified);
    84    }
    85  
    86    routePaiement = { name: RoutePaiment };
    87  
    88    time = formatDateTime;
    89  
    90    get salutations() {
    91      return C.salutations;
    92    }
    93  
    94    get isRappel() {
    95      return C.isMessageFactureRappel(this.message);
    96    }
    97  
    98    get urlDownload() {
    99      return C.data.urlFacture;
   100    }
   101  
   102    afterDownload() {
   103      // le téléchargement d'une facture modifie les messages
   104      window.setTimeout(() => C.data.loadData(), 1000);
   105    }
   106  }
   107  </script>
   108  
   109  <style scoped></style>