retailer-vue/src/routes/retailer/account_dashboard.vue

<template>
    <v-row class="pl-10 pr-10">
      <v-col cols="12" sm="12" md="12" lg="12" class="">
        <div class="h3 text-capitalize body-font1">Retailer dashboard</div>
        <div class="fontsize-18 py-5">
          <b>Holiday Cutoff:</b> The deadline to submit your personalized order
          to receive in time for christmas exired on 12/1.
        </div>

        <v-row>
          <v-col cols="12" sm="12" md="6" lg="4">
            <v-hover v-slot:default="{ hover }">
              <router-link
                class="text-decoration-none"
                :to="{ name: 'CartProducts' }"
              >
                <div
                  :class="hover ? 'primary--text' : 'black--text'"
                  class="
                    border
                    height-130px
                    v-btn--outlined
                    d-flex
                    justify-center
                    align-center
                  "
                >
                  Boxed Order New Order
                </div>
              </router-link>
            </v-hover>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="4">
            <v-hover v-slot:default="{ hover }">
              <router-link
                class="text-decoration-none"
                :to="{ name: 'BoxedOrderHistoryPage' ,params: {id:'order'}}"
              >
                <div
                  :class="hover ? 'primary--text' : 'black--text'"
                  class="
                    border
                    height-130px
                    v-btn--outlined
                    d-flex
                    justify-center
                    align-center
                  "
                >
                  Boxed Order History
                </div>
              </router-link>
            </v-hover>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="4">
            <v-hover v-slot:default="{ hover }">
              <router-link
                class="text-decoration-none"
                :to="{ name: 'PersonalizedOrderSummaryPage' }"
              >
                <div
                  :class="hover ? 'primary--text' : 'black--text'"
                  class="
                    border
                    height-130px
                    v-btn--outlined
                    d-flex
                    justify-center
                    align-center
                  "
                >
                  Personalized Order Status
                </div>
              </router-link>
            </v-hover>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="4">
            <v-hover v-slot:default="{ hover }">
              <router-link
                class="text-decoration-none"
                :to="{ name: 'ResourcesPage' }"
              >
                <div
                  :class="hover ? 'primary--text' : 'black--text'"
                  class="
                    border
                    height-130px
                    v-btn--outlined
                    d-flex
                    justify-center
                    align-center
                  "
                >
                  Resources
                </div>
              </router-link>
            </v-hover>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="4">
            <v-hover v-slot:default="{ hover }">
              <router-link target="_blank"
                class="text-decoration-none"
                :to="{ name: 'PDSPage' }"
              >
                <div
                  
                  :class="hover ? 'primary--text' : 'black--text'"
                  class="
                    border
                    height-130px
                    v-btn--outlined
                    d-flex
                    justify-center
                    align-center
                  "
                >
                  PDS
                </div>
              </router-link>
            </v-hover>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
</template>

<script>
//import { mapState } from "vuex";

import { createHelpers } from "vuex-map-fields";
import { loginInterrupt } from "@/services/nav";
// import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
// import ShippingAddressComponent from "@/components/retailer/address/ShippingAddressComponent";
const { mapFields } = createHelpers({
  getterType: "accountOne/getField",
  mutationType: "accountOne/updateField",
});
export default {
  name: "AccountDashboard",
  data() {
    return {
      hideShow: false,
    };
  },
  components: {
    // BillingAddressComponent,
    // ShippingAddressComponent
  },
  computed: {
    cartProductsProgress: function () {
      return this.$store.state.userCartProduct.cartProductsProgress;
    },
    basicInfo() {
      return this.$store.state.accountOne.one;
    },
    errorMessage: function () {
      return this.$store.state.accountOne.errorMessage;
    },
    shippingAddressDetails: function () {
      return this.$store.state.accountOne.shippingAddressDetails;
    },
    billingAddressDetails: function () {
      return this.$store.state.accountOne.billingAddressDetails;
    },
    addresses: function () {
      return this.$store.state.accountOne.addresses;
    },
    inProgress: function () {
      return this.$store.state.accountOne.inProgress;
    },
    /*addressLength: function(){
      if(this.basicInfo.addresses)
        return this.basicInfo.addresses.length;
      return 0;
    },*/
    successMessage: function () {
      return this.$store.state.accountOne.successMessage;
    },
    ...mapFields(["newsLetterSubscription", "addressIndex"]),
    userAuth: function () {
      return this.$store.state.auth.userAuth;
    },
  },
  methods: {
    editAccount() {
      this.$router.push({
        name: "EditAccountInfo",
      });
    },
    routeToPage(pageName) {
      setTimeout(() => {
        this.$router.push({
          name: pageName,
          params: { address: "shipping" },
        });
      }, 50);
    },
    editAddress(address, index) {
      let addressId = "new";
      if (index == null) {
        this.addressIndex = null;
        this.$store.dispatch("accountOne/setAddress", null);
      } else {
        this.addressIndex = index;
        addressId = address.id;
        this.$store.dispatch("accountOne/setAddress", this.addresses[index]);
      }
      localStorage.setItem("cr_meCurrentPage", "accountDashboard");
      this.$router.push({
        name: "EditAddressBook",
        params: { addressId: addressId },
      });
    },
  },
  created() {
    if (!this.userAuth) {
      loginInterrupt(
        window.location.href,
        "There was an access violation caused by your request. You need to sign back in please."
      );
    }
    this.$store.dispatch("accountOne/basicInfo");
    this.hideShow = true;
    setTimeout(() => {
      this.hideShow = false;
    }, 2000);
  },
};
</script>