Composants

PriceCard

Carte d'affichage d'une offre de maintenance avec prix et caractéristiques

Composant de carte affichant une offre de maintenance avec ses prix (HT/TTC), ses caractéristiques, et un badge "Populaire" si applicable.

Usage

Basic

Utilisez le composant PriceCard avec une offre :

<template>
  <PriceCard
    :price="offer"
    :selected="selectedOfferId === offer.id"
    @select-price="selectedOfferId = $event"
  />
</template>

<script setup>
const offer = {
  id: '1',
  maintenanceOffer: {
    id: 'offer-1',
    best: false,
    name: 'Offre Essentielle',
    description: 'Maintenance de base',
    features: [
      { label: 'Visite annuelle' },
      { label: 'Assistance téléphonique' }
    ]
  },
  price: {
    ht: 5000,
    ttc: 6000
  }
};
const selectedOfferId = ref(null);
</script>

Avec mode professionnel

<template>
  <PriceCard
    :price="offer"
    :selected="selectedOfferId === offer.id"
    :is-pro="true"
    payment-type="subscription"
    @select-price="selectedOfferId = $event"
  />
</template>

Prop	Type	Default	Description
`price`	`Price`	-	Objet contenant l'offre et les prix (requis)
`selected`	`boolean`	`false`	Indique si cette carte est sélectionnée
`isPro`	`boolean`	`false`	Mode professionnel (affiche HT en priorité)
`paymentType`	`'one_shot' \| 'subscription'`	`'subscription'`	Type de paiement (paiement unique ou abonnement)

Event	Payload	Description
`selectPrice`	`string`	Émis lorsque l'utilisateur clique sur la carte (ID de l'offre)

Exemples

Exemple 1 : Liste d'offres

<template>
  <div class="grid grid-cols-3 gap-4">
    <PriceCard
      v-for="offer in offers"
      :key="offer.id"
      :price="offer"
      :selected="selectedOfferId === offer.id"
      :is-pro="isPro"
      :payment-type="paymentType"
      @select-price="selectedOfferId = $event"
    />
  </div>
</template>

<script setup>
const offers = ref([...]);
const selectedOfferId = ref(null);
const isPro = ref(false);
const paymentType = ref('subscription');
</script>

Exemple 2 : Comparaison d'offres

<template>
  <div>
    <h2>Choisissez votre offre</h2>
    <div class="grid grid-cols-3 gap-4">
      <PriceCard
        v-for="offer in offers"
        :key="offer.id"
        :price="offer"
        :selected="form.offerId === offer.maintenanceOffer.id"
        @select-price="form.offerId = $event"
      />
    </div>
  </div>
</template>

<script setup>
const form = reactive({
  offerId: null
});
</script>

Notes

Le composant affiche automatiquement un badge "Populaire" si price.maintenanceOffer.best === true. Les prix sont calculés dynamiquement selon le paymentType :

subscription : Prix mensuel (€/mois)
one_shot : Prix total (€)

En mode professionnel (isPro: true), le prix HT est mis en avant. Sinon, c'est le prix TTC qui est mis en avant. Les prix avec réduction affichent le prix barré si htBase ou ttcBase sont présents.

EquipmentCard

Carte d'affichage d'équipement avec sélection de quantité

StepNavigation

Composant de navigation multi-étapes avec barre de progression