

<template>
  <v-container>
     <div class="homepage-overflow-x-hidden white" v-if=" retailerCommunicationsPage">
      <div class="h3 my-5 py-5 body-font1">{{  retailerCommunicationsPage.contentHeading }}</div>
      <div v-html=" retailerCommunicationsPage.content"></div>
    </div>
    <!-- <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>

    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font "
          :to="{ name: 'ServiceLevels' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading "
          >
           Service Levels
          </div>
        </router-link>
      </v-hover>
    </div>

    
   
    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: 'ResourcesPage' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Back to Resources
          </div>
        </router-link>
      </v-hover>
    </div> -->
  </v-container>
</template>
<script>
export default {
  name: "RetailerCommunications",
   computed: {
    retailerCommunicationsPage: function () {
      let data = null;
      let pageContent = this.$store.state.layout.pageContent;
      if (pageContent.length) {
        data = pageContent.filter((element) => {
          return element.identifier === "retailer-communications";
        })[0];
      }

      return data;
    },
  },
};
</script>

<style src="./retailer-communications.scss" lang="scss" scoped/>