<template>
  <household></household>
  <concerned v-if="hasHouseholdOrLeave"></concerned>
  <dates v-if="showConfirm"></dates>
  <confirmation v-if="showConfirm"></confirmation>
</template>

<script>

import { mapGetters } from 'vuex';
import Concerned from './components/Concerned.vue';
import Household from './components/Household.vue';
import Dates from './components/Dates.vue';
import Confirmation from './components/Confirmation.vue';

export default {
  name: 'App',
  components: {
    Concerned,
    Household,
    Dates,
    Confirmation,
  },
  computed: {
    ...mapGetters([
      'hasHouseholdOrLeave',
      'hasPersonsWellPositionnated',
    ]),
    showConfirm () {
      return this.$store.getters.hasHouseholdOrLeave 
        && this.$store.getters.hasPersonsWellPositionnated;
    },
  }
}

</script>
