From b30e6d0f2a98597731c9224c59155fe82739e749 Mon Sep 17 00:00:00 2001
From: rakesh <inaniyar7@gmail.com>
Date: Wed, 14 Jun 2023 15:53:01 +0530
Subject: [PATCH] fixes ui

---
 src/components/common/SnackbarComponent.vue   |   12 +-
 src/components/common/SubscriptionDialog.vue  |  221 ----
 .../retailer/breadcrumb/Breadcrumb.scss       |    8 -
 .../retailer/breadcrumb/Breadcrumb.vue        |  153 ---
 .../retailer/filter/FilterComponent.scss      |   31 -
 .../retailer/filter/FilterComponent.vue       |  114 --
 .../gift-guide/GiftGuideComponent.vue         |  240 ----
 .../retailer/home/HomeComponent.scss          |  103 --
 .../retailer/home/HomeComponent.vue           |  433 -------
 .../retailer/home/PostScriptBlog.scss         |   61 -
 .../retailer/home/PostScriptBlog.vue          |  130 ---
 .../ConfiguredProductDetailComponent.scss     |   44 -
 .../ConfiguredProductDetailComponent.vue      |  956 ----------------
 .../GiftCardDetailsComponent.scss             |   13 -
 .../GiftCardDetailsComponent.vue              |  899 ---------------
 .../ProductDetailComponent.scss               |   57 -
 .../product-detail/ProductDetailComponent.vue | 1016 -----------------
 .../RecentlyViewedComponent.scss              |   45 -
 .../RecentlyViewedComponent.vue               |  287 -----
 .../RelatedProductsComponent.scss             |   43 -
 .../RelatedProductsComponent.vue              |  148 ---
 .../RetailerSearchProducts.scss               |   16 -
 .../RetailerSearchProducts.vue                |  161 +--
 .../retailer/search/SearchProducts.scss       |   16 -
 .../retailer/search/SearchProducts.vue        |  694 -----------
 .../ShippingAndDeliveryComponent.scss         |    3 -
 .../ShippingAndDeliveryComponent.vue          |  695 -----------
 src/routes/retailer/cart_products.vue         |   11 +-
 28 files changed, 8 insertions(+), 6602 deletions(-)
 delete mode 100644 src/components/common/SubscriptionDialog.vue
 delete mode 100644 src/components/retailer/breadcrumb/Breadcrumb.scss
 delete mode 100644 src/components/retailer/breadcrumb/Breadcrumb.vue
 delete mode 100644 src/components/retailer/filter/FilterComponent.scss
 delete mode 100644 src/components/retailer/filter/FilterComponent.vue
 delete mode 100644 src/components/retailer/gift-guide/GiftGuideComponent.vue
 delete mode 100644 src/components/retailer/home/HomeComponent.scss
 delete mode 100644 src/components/retailer/home/HomeComponent.vue
 delete mode 100644 src/components/retailer/home/PostScriptBlog.scss
 delete mode 100644 src/components/retailer/home/PostScriptBlog.vue
 delete mode 100644 src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss
 delete mode 100644 src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue
 delete mode 100644 src/components/retailer/product-detail/GiftCardDetailsComponent.scss
 delete mode 100644 src/components/retailer/product-detail/GiftCardDetailsComponent.vue
 delete mode 100644 src/components/retailer/product-detail/ProductDetailComponent.scss
 delete mode 100644 src/components/retailer/product-detail/ProductDetailComponent.vue
 delete mode 100644 src/components/retailer/product-detail/RecentlyViewedComponent.scss
 delete mode 100644 src/components/retailer/product-detail/RecentlyViewedComponent.vue
 delete mode 100644 src/components/retailer/product-detail/RelatedProductsComponent.scss
 delete mode 100644 src/components/retailer/product-detail/RelatedProductsComponent.vue
 delete mode 100644 src/components/retailer/search/SearchProducts.scss
 delete mode 100644 src/components/retailer/search/SearchProducts.vue
 delete mode 100644 src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss
 delete mode 100644 src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue

diff --git a/src/components/common/SnackbarComponent.vue b/src/components/common/SnackbarComponent.vue
index 1b3eb8f..839a765 100644
--- a/src/components/common/SnackbarComponent.vue
+++ b/src/components/common/SnackbarComponent.vue
@@ -3,8 +3,7 @@
     <v-snackbar
       :color="snackbar.color"
       v-model="snackbar.show"
-      right
-      top
+      location="right top"
       :timeout="snackbar.timeout"
     >{{ snackbar.message }}</v-snackbar>
   </v-container>
@@ -13,14 +12,5 @@
 export default {
   name: "SnackbarComponent",
   props:["snackbar"],
-  data: () => ({
-  }),
-  components: {},
-  computed: {
-  },
-  methods: {
-  },
-  created() {
-  }
 };
 </script>
diff --git a/src/components/common/SubscriptionDialog.vue b/src/components/common/SubscriptionDialog.vue
deleted file mode 100644
index bb7844c..0000000
--- a/src/components/common/SubscriptionDialog.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <v-container class="py-0 my-0">
-    <v-dialog
-      v-model="subscriptionDialog"
-      :max-width="$vuetify.display.xlOnly?1100:800"
-      :scrollable="false"
-      :overlay-opacity="0.5"
-    >
-      <v-card
-        flat
-        tile
-        :img="isDesktop? `http://media.crane.com/9441/popup_v3.jpg` : ''"
-        :class="isDesktop?'':'dialog-background'"
-      >
-        <v-card-title class="px-2 px-sm-4 pb-0 pt-0 pt-sm-4">
-          <v-row no-gutters>
-            <v-col cols="12" class="d-flex justify-end">
-              <v-btn @click="subscriptionDialog=false" class="dailog-close-button" icon>
-                <v-icon :large="isDesktop" :small="!isDesktop">mdi-window-close</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card-title>
-        <v-card-text class="pb-1 pb-sm-3 px-2 px-sm-4">
-          <v-row no-gutters class="mx-0">
-            <v-col cols="12" sm="6">
-              <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
-                <v-form ref="subscribeForm" v-model="footerFormValid">
-                  <div class="pa-md-1">
-                    <v-col cols="12" class="pt-0 mb-sm-4">
-                      <span
-                        class="primary--text h3 font-weight-regular text-uppercase"
-                      >{{stayInTouch}}</span>
-                      <p
-                        class="subscribe-fontcolor-black-darken body-font ls-n10 mb-0 pt-2 pt-sm-4"
-                      >Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
-                    </v-col>
-                    <v-col cols="12" class="pb-0 pt-2 pt-sm-3 d-md-block">
-                      <v-row no-gutters>
-                        <v-col cols="12">
-                          <v-text-field
-                            @blur="resetEmailValidation"
-                            label="Your Email"
-                            id="emailTextBox"
-                            class="footerpage_email_textbox fontsize-14 regular-font"
-                            solo
-                            flat
-                            dense
-                            :rules="emailRules"
-                            tile
-                            v-model="email"
-                          ></v-text-field>
-                        </v-col>
-                        <v-col cols="12">
-                          <v-btn
-                            depressed
-                            :block="!isDesktop"
-                            color="primary"
-                            class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
-                            @click="submit()"
-                          >SUBMIT</v-btn>
-                        </v-col>
-                      </v-row>
-                    </v-col>
-                  </div>
-                </v-form>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row v-if="!isDesktop"  class="regular-font subscribe-fontcolor-black-darken mx-0 px-sm-6 px-2">
-            <v-col cols="12" sm="3">
-              <router-link to class="subscribe-fontcolor-black-darken">
-                <span @click="subscriptionDialog=false">No, thank you</span>
-              </router-link>
-            </v-col>
-            <v-col cols="12" sm="9" class="pt-0 pt-sm-3">
-              By signing up, you agree to our and
-              <router-link
-                to
-                @click.native="goToLink('https://www.crane.com/privacy-policy')"
-                title="Privacy Policy"
-                class="subscribe-fontcolor-black-darken"
-              >
-                <span>Privacy Policy</span>
-              </router-link>and
-              <router-link
-                to
-                @click.native="goToLink('https://www.crane.com/terms-of-use')"
-                title="Terms of Service"
-                class="subscribe-fontcolor-black-darken"
-              >
-                <span>Terms of Service</span>
-              </router-link>.
-            </v-col>
-          </v-row>
-        </v-card-text>
-        </v-card>
-        <v-row v-if="isDesktop"  class="regular-font subscribe-fontcolor-black-darken bottom-div-background mx-0">
-          <v-col cols="12" sm="3">
-              <router-link to class="subscribe-fontcolor-black-darken">
-                <span @click="subscriptionDialog=false">No, thank you</span>
-              </router-link>
-          </v-col>
-          <v-col cols="12" sm="9" class="pt-0 pt-sm-3">
-              By signing up, you agree to our  and 
-              <router-link to
-                  @click.native="goToLink('https://www.crane.com/privacy-policy')"   title="Privacy Policy" class="subscribe-fontcolor-black-darken">
-                <span>Privacy Policy</span>
-              </router-link>
-              and
-              <router-link to
-                  @click.native="goToLink('https://www.crane.com/terms-of-use')" title="Terms of Service" class="subscribe-fontcolor-black-darken">
-                <span>Terms of Service</span>
-              </router-link>.
-          </v-col>
-      </v-row>
-    </v-dialog>
-    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
-  </v-container>
-</template>
-<script>
-/*eslint-disable*/
-import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
-export default {
-  name: "SubscriptionDialog",
-  data: () => ({
-    subscriptionDialog: false,
-    footerFormValid: false,
-    emailRules: [
-      (v) => !!v || "Email is required",
-      (v) => /.+@.+\..+/.test(v) || "Email must be valid",
-    ],
-    stayInTouch: "LET'S STAY IN TOUCH",
-    email: null,
-    snackbar: {
-      show: false,
-      message: null,
-      color: null,
-      timeout: 0,
-    },
-  }),
-  components: { SnackbarComponent },
-  computed: {
-    isDesktop: function () {
-      return this.$vuetify.display.xsOnly ? false : true;
-    },
-  },
-  methods: {
-    goToLink(pageLink) {
-      window.location.replace(pageLink);
-      //} else {
-      //window.open(routeSecond, "_self");
-      //}
-    },
-    submit: function () {
-      if (this.$refs.subscribeForm.validate()) {
-        this.$store
-          .dispatch("emailSubscriber/fetchEmailSubscriber", {
-            email: this.email,
-          })
-          .then((status) => {
-            if (status === "you have successfully subscribed.") {
-              this.snackbar = {
-                message: status,
-                color: "success",
-                show: true,
-                timeout: 5000,
-              };
-            } else {
-              this.snackbar = {
-                message: status,
-                color: "error",
-                show: true,
-                timeout: 5000,
-              };
-            }
-          })
-          .catch((error) => {
-            this.snackbar = {
-              message: error.message,
-              color: "error",
-              show: true,
-              timeout: 5000,
-            };
-          });
-        this.email = null;
-        this.$refs.subscribeForm.resetValidation();
-        this.subscriptionDialog = false;
-      }
-    },
-
-    resetEmailValidation() {
-      this.$refs.subscribeForm.resetValidation();
-    },
-  },
-  mounted() {          
-    // setTimeout(() => {    
-    //  let userVisitCount= localStorage.getItem("cr_userVisitCount");     
-    //   if (!userVisitCount||userVisitCount == 1) this.subscriptionDialog = true;
-    //   else this.subscriptionDialog = false;
-    // }, 4000);
-  },
-};
-</script>
-<style>
-.bottom-div-background {
-  background: rgba(217 218 221 / 20%);
-}
-.dialog-background {
-  background-color: #97cfe3 !important;
-}
-.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
-  opacity: 0 !important;
-}
-.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
-  opacity: 0 !important;
-}
-.subscribe-fontcolor-black-darken {
-  color: #1d1d1d !important;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/retailer/breadcrumb/Breadcrumb.scss b/src/components/retailer/breadcrumb/Breadcrumb.scss
deleted file mode 100644
index 213c92d..0000000
--- a/src/components/retailer/breadcrumb/Breadcrumb.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.disabled {
-    color: #2c50da;
-    pointer-events: none;
-}
-
-.text-color-black {
-    color: #B7B7B7;
-}
\ No newline at end of file
diff --git a/src/components/retailer/breadcrumb/Breadcrumb.vue b/src/components/retailer/breadcrumb/Breadcrumb.vue
deleted file mode 100644
index 2197d9d..0000000
--- a/src/components/retailer/breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div>
-    <v-breadcrumbs
-      :items="breadsCrumbItems"
-      class="apps-breadcrumb pl-0"
-      large
-      divider="/"
-    >
-      <template slot="item" slot-scope="props">
-        <a
-          href="#"
-          :class="[props.item.disabled ? 'disabled' : 'text-color-black']"
-          class="text-decoration-none"
-          @click.prevent="categoryProducts(props.item.href)"
-          >{{ props.item.text }}</a
-        >
-      </template>
-    </v-breadcrumbs>
-  </div>
-</template>
-<script>
-import {
-  customAttributeValue,
-  goToCategoryPageRouting,
-  getCategoryOne,
- // googleAanalyticsEventCategory,
-} from "@/services/util.service";
-import { mapState } from "vuex";
-
-export default {
-  name: "BreadcrumbComponent",
-  props: ["breadcrumbVal", "search"],
-  data: () => ({
-    breadsCrumbItems: [],
-    subCategory: null,
-    breadsCrumbArray: [],
-    newArray: [],
-  }),
-  computed: {
-    ...mapState({
-      searchTerms: (state) => state.catalogBrowser.searchTerms,
-      keywordsSearch: (state) => state.catalogBrowser.searchTerms.keywords,
-    }),
-    categoryDetailsList: function () {
-      return this.$store.state.headerCategoryList.categoryDetails;
-    },
-    categoryListIdWise: function () {
-      return this.$store.state.headerCategoryList.categoryListIdWise;
-    },
-  },
-  watch: {
-    keywordsSearch() {
-      this.createBreadsCrumbArray();
-    },
-  },
-  methods: {
-    getCustomAttributeValue(customAttributes, attributeCode) {
-      return customAttributeValue(customAttributes, attributeCode);
-    },
-    /* eslint-disable no-alert, no-console ,  no-debugger */
-    createBreadsCrumbArray() {
-      this.newArray = [];
-      this.breadsCrumbItems = [];
-      if (this.breadcrumbVal == "keyword") {
-        let obj = {
-          text: "Search results for : '" + this.searchTerms.keywords + "'",
-          href: "",
-          disabled: true,
-        };
-        this.newArray.push(obj);
-      } else {
-        let newObj = this.getParentId(this.breadcrumbVal);
-        if (newObj.length > 0) {
-          let obj = {
-            text: newObj[0].n,
-            href: newObj[0].id,
-            disabled: true,
-          };
-          this.newArray.push(obj);
-          while (newObj[0].pid != 2) {
-            newObj = this.getParentId(newObj[0].pid);
-            obj = {
-              text: newObj[0].n,
-              href: newObj[0].id,
-              disabled: false,
-            };
-            this.newArray.push(obj);
-          }
-        }
-      }
-      this.newArray.push({
-        text: "Home",
-        href: "Home",
-        disabled: false,
-      });
-      let filterArray = this.newArray.reverse();
-      this.breadsCrumbItems = filterArray;
-    },
-
-    getParentId(categoryId) {
-      return this.categoryListIdWise.filter((element) => {
-        return element.id === categoryId;
-      });
-    },
-    async categoryProducts(categoryId) {
-      this.$store.dispatch("headerCategoryList/setCategoryId", categoryId);
-      localStorage.removeItem("cr_subCategoryItemId");
-      let data = localStorage.getItem("cr_subCategoryId");
-      if (data >= categoryId) {
-        localStorage.removeItem("cr_subCategoryId");
-      }
-      if (categoryId === "Home") {
-        this.$router.push({
-          name: "HomePage",
-        });
-      } else {
-        if (this.categoryDetailsList) {
-          let categoryOne = await getCategoryOne(
-            this.categoryDetailsList,
-            categoryId
-          );
-          if (categoryOne) {
-            this.$store.dispatch("layout/setHeroContent", categoryOne);
-            console.log(categoryOne.n, categoryOne);
-            let vm = this;
-            // googleAanalyticsEventCategory("browse_category", "ecommerce", {
-            //   name: categoryOne.n,
-            //   id: categoryId,
-            // });
-            goToCategoryPageRouting(vm, categoryOne);
-            this.$store
-              .dispatch("catalogBrowser/search", {
-                fullCatalog: window.craneCatalog,
-                keywords: "",
-                filters: [{ label: "Category", prop: "ci", value: categoryId }],
-                pageNumber: 1,
-                pageSize: 9,
-                sortBy: "position",
-              })
-              .catch((error) => {
-                error;
-              });
-          }
-        }
-      }
-    },
-  },
-  created() {
-    this.createBreadsCrumbArray();
-  },
-};
-</script>
-<style src="./Breadcrumb.scss" lang="scss" scoped />
\ No newline at end of file
diff --git a/src/components/retailer/filter/FilterComponent.scss b/src/components/retailer/filter/FilterComponent.scss
deleted file mode 100644
index a5a785a..0000000
--- a/src/components/retailer/filter/FilterComponent.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.primary--text {
-    color: #2c50da !important;
-}
-
-.filter-panel-heading:hover {
-    color: #CCB7FF!important;
-}
-
-.filter-panel-subheading:hover {
-    color: #CCB7FF!important;
-}
-
-.filter-panel-heading:hover :before {
-    color: #CCB7FF!important;
-}
-
-.filter-panel-icon.filter-panel-heading:hover :before {
-    color: #CCB7FF!important;
-}
-
-.filter-panel-icon.filter-panel-heading :before {
-    color: #2c50da !important;
-}
-
-ul {
-    list-style: none;
-}
-
-.expansion-text-black {
-    color: #1d1d1d!important;
-}
\ No newline at end of file
diff --git a/src/components/retailer/filter/FilterComponent.vue b/src/components/retailer/filter/FilterComponent.vue
deleted file mode 100644
index 53e4106..0000000
--- a/src/components/retailer/filter/FilterComponent.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <div>
-    <v-row class="mt-12" justify="center" v-if="inProgress">
-    
-      <v-col
-        v-for="(i, index) in 4"
-        v-bind:key="index"
-        lg="12"
-        md="12"
-        sm="12"
-        cols="12"
-        class="pr-lg-3 cursor-pointer"
-      >
-        <v-skeleton-loader type="list-item-two-line"></v-skeleton-loader>
-      </v-col>
-    </v-row>
-    <v-expansion-panels
-      v-model="filterPanel"
-      multiple
-      flat
-      accordion
-      v-else-if="filterList"
-    >
-      <v-expansion-panel
-        tile
-        class="transparent-background first-v-expansion-panel filter-expansion-panel"
-        v-for="(attribute, index) in filterList"
-        :key="index"
-      >
-        <v-expansion-panel-header
-          class="fontsize-14 body ls-n09 color-1d text-uppercase px-3 py-0 my-n1 expansion-text-black"
-          :class="attribute.label == checkName(attribute.label ) ?'primary--text filter-panel-icon':'expansion-text-black'"
-          v-if="attribute.counts.length"
-          >{{ attribute.label  }}
-          <template v-slot:actions>
-            <v-icon class="expansion-text-black">$expand</v-icon>
-          </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content class="pt-2">
-          <ul
-            v-for="(option, index) in attribute.counts"
-            :key="index"
-            class="pl-0 filter-expansion-panel-list"
-          >
-            <li 
-              class="cursor-pointer filter-panel-subheading pb-1"
-              :class="option.value == checkValue(option.value) ?'primary--text':'expansion-text-black'"
-              v-if="option.value"
-               @click="createFilter(
-                 attribute.label,
-                  attribute.prop,
-                  option.value)"
-            > {{ option.value}}({{option.count}})
-            </li>
-          </ul>
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </div>
-</template>
-<script>
-/* eslint-disable no-alert, no-console ,  no-debugger */
-export default {
-  name: "FilterComponent",
-  data: () => ({
-      filterPanel: []
-  }),
-  props:["filterList","inProgress"],
-  computed: {
-    enabledFilters(){
-      return this.$store.state.catalogBrowser.enabledFilters;
-    },
-     categoryId() {
-      return this.$route.meta.id;
-    },
-  },
-  watch: {
-    enabledFilters(){
-      this.showSelectedPanel();
-    }
-  },
-  methods: {
-    async createFilter(label, prop,value) {
-      this.$emit("applyNewFilter",{label:label, prop:prop,value:value});
-    },
-    checkName(attribute) {
-      let data = this.enabledFilters.filter(obj => obj.label === attribute);
-      return data.length?data[0].label:"";
-    },
-    checkValue(attributeValue) {
-      let data = this.enabledFilters.filter(obj => obj.value === attributeValue);
-      return data.length?data[0].value:"";
-    },
-    showSelectedPanel() {
-      this.filterPanel = [];
-      if (this.enabledFilters.length > 0) {
-        for (let i = 0; i < this.enabledFilters.length; i++) {
-          this.filterList.filter(
-           (x,index) => {
-             if(x.label === this.enabledFilters[i].label)
-              this.filterPanel.push(index);
-           }
-          );
-        }
-      }
-    },
-  },
-  created(){
-    this.showSelectedPanel();
-  } 
-};
-</script>
-
-<style src="./FilterComponent.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/components/retailer/gift-guide/GiftGuideComponent.vue b/src/components/retailer/gift-guide/GiftGuideComponent.vue
deleted file mode 100644
index 3b76b0d..0000000
--- a/src/components/retailer/gift-guide/GiftGuideComponent.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div class="homepage-overflow-x-hidden white">
-    <!--<v-container v-show="callOutsBlock.length" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
-      <v-col class="px-md-5 px-0">
-        <div v-html="getBlockContent()"></div>
-      </v-col>ImageBlock-01
-    </v-container>-->
-   <div class="homepage-overflow-x-hidden white" v-if="pageContent.length">
-      <div v-html="getPageContent()"></div>
-    </div>
-       
-  </div>
-</template>
-<script>
-import {
-  goToCategoryPageRouting,
-  getCategoryOne,
-} from "@/services/util.service";
-export default {
-  name: "GiftGuideComponent",
-  components: {},
-  computed: {
-    pageContent: function () {
-      return this.$store.state.layout.pageContent;
-    },
-    imgHeadTextFirst: function () {
-      return "Downton Abbey stationery".replace(/(S+s*){1,2}/g, "$&</br>");
-    },
-    imgHeadTextSecond: function () {
-      return "Vera Wang Papers".replace(/(S+s*){1,2}/g, "$&</br>");
-    },
-    blockOne() {
-      return this.$store.state.block.footerBlock;
-    },
-    callOutsBlock: function () {
-      return this.$store.state.layout.cmsBlockContent;
-    },
-    categoryDetailsList: function () {
-      return this.$store.state.headerCategoryList.categoryDetails;
-    },
-    /* pageId: function(){
-      return this.$route.meta.pid
-     }*/
-  },
-  data: () => ({
-    categoryId: 10,
-    calloutsblockId: 9,
-    pageUrlKey: "home-page-content",
-    //pageId:150
-  }),
-  methods: {
-    /* goToLink(link) {
-      window.open(link, "_self");
-    },*/
-    getPageContent() {
-      if (this.pageContent.length) {
-        let data = this.pageContent.filter((element) => {
-          return element.identifier === "gift-guide";
-        });
-        if (data.length > 0) {
-          let path = data[0].content;
-          var div = document.createElement("div");
-          div.innerHTML = path;
-          let imgSrcUrls = div.getElementsByTagName("img");
-          for (let i = 0; i < imgSrcUrls.length; i++) {
-            let urlValue = imgSrcUrls[i].getAttribute("src");
-            if (urlValue) {
-              imgSrcUrls[i].setAttribute(
-                "src",
-                this.imageBasePathUrl() +
-                  "/media/" +
-                  imgSrcUrls[i].src
-                    .replace(window.location.href, "")
-                    .replace(window.location.origin, "")
-                    .replace(/%22%7D%7D/g, "")
-                    .replace(/%7B%7B/g, "")
-                    .replace(/%20url=%22/g, "")
-                    .replace("media", "")
-              );
-            }
-          }
-          return div.innerHTML;
-        }
-      }
-    },
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
-    },
-    getBlockContent() {
-      if (this.callOutsBlock.length) {
-        let data = this.callOutsBlock.filter((element) => {
-          return element.id === this.calloutsblockId;
-        });
-        let path = data[0].content;
-        var div = document.createElement("div");
-        div.innerHTML = path;
-        let imgSrcUrls = div.getElementsByTagName("img");
-        for (let i = 0; i < imgSrcUrls.length; i++) {
-          let urlValue = imgSrcUrls[i].getAttribute("src");
-          if (urlValue) {
-            imgSrcUrls[i].setAttribute(
-              "src",
-
-              this.imageBasePathUrl() +
-                "/media/" +
-                imgSrcUrls[i].src
-                  .replace(window.location.href, "")
-                  .replace(window.location.origin, "")
-                  .replace(/%22%7D%7D/g, "")
-                  .replace(/%7B%7B/g, "")
-                  .replace(/%20url=%22/g, "")
-                  .replace("media", "")
-            );
-          }
-        }
-        return div.innerHTML;
-      }
-    },
-    routeToPage(pageName) {
-      if (pageName == "CategoryPage") {
-        let vm = this;
-        goToCategoryPageRouting(vm, { n: "Stationery", id: 10 });
-      }
-    },
-    goToPageRoutePage(pageName) {
-      this.$router
-        .push({
-          name: pageName,
-        })
-        .catch((error) => {
-          error;
-        });
-    },
-    initialLink() {
-      return import.meta.env.VITE_APP_HOME_PAGE_URL;
-    },
-    async goToPage(main, sub, child, categoryId) {
-      let categoryOne = await getCategoryOne(
-        this.categoryDetailsList,
-        categoryId
-      );
-      let vm = this;
-      goToCategoryPageRouting(vm, categoryOne);
-    },
-    goToLink(pageLink) {
-      window.location.replace(pageLink);
-      //} else {
-      //window.open(routeSecond, "_self");
-      //}
-    },
-  },
-
-  created() {
-    // this.$store.dispatch("block/fetchOne",10)
-    //this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
-    //this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
-  },
-};
-</script>
-<style  lang="scss">
-.gift-guide-hero-image {
-  height: 62.5%;
-  width: 100%;
-}
-.gift-guide-featured-img-height-500 {
-  width: 100%;
-}
-.gift-guide-content-maxwidth-750 {
-  max-width: 750px;
-}
-
-.gift-guide-row {
-  display: flex;
-  height: 100%;
-  //width:100%;
-}
-.gift-guide-block {
-  display: block;
-  height: 100%;
-  //width:100%;
-}
-
-.gift-guide-col-6 {
-  width: 50%;
-  display: block;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.gift-guide-moss-red-block {
-  background-color: #C53C44;
-}
-.gift-guide-pink-text-block {
-  background-color: #FFEAEA;
-}
-.gift-guide-text {
-  color: #FFEAEA;
-  font-weight: 100;
-}
-.gift-guide-red-text {
-  color: #C53C44;
-}
-.gift-guide-blue-link {
-  color: #2544dd;
-}
-@media screen and (max-width: 600px) {
-  .gift-guide-col-6 {
-    width: 100%;
-    display: block;
-    height: 100%;
-  }
-
-  .gift-guide-row {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.gift-guide-link {
-  color: #2544dd !important;
-  & .home-page-icon {
-    background-image: url("@/assets/blue-arrow.png");
-    max-width: 22px;
-    height: 14px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-.gift-guide-link:hover {
-  color: #ccb7ff !important;
-  & .home-page-icon {
-    background-image: url("@/assets/hover-arrow.png");
-    max-width: 22px;
-    height: 14px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/retailer/home/HomeComponent.scss b/src/components/retailer/home/HomeComponent.scss
deleted file mode 100644
index 585c1a1..0000000
--- a/src/components/retailer/home/HomeComponent.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-/*.title-color {
-	color: #000000;
-}*/
-
-.homepage-overflow-x-hidden {
-    overflow-x: hidden;
-}
-
-.homepage-featured-img-height-500 {
-    height: 500px;
-}
-
-.homepage-background-color-f3f2f2 {
-    background: #f3f2f2;
-}
-
-.homepage-background-color-eb7525 {
-    background: #eb7525;
-}
-.homepage-background-color-2d5d84 {
-    background: #2d5d84;
-}
-.homepage-line {
-    border-bottom: 1px solid #3d4973;
-    width: 1.87rem;
-    margin: 1.53rem 0rem 1.21rem 0rem;
-    size: 1.87rem;
-}
-// .homepage-contentlink-color{
-//     color:#CCB7FF !important;
-// }
-.homepage-bottom-margin-64 {
-    margin-bottom: 4rem;
-}
-
-.homepage-font-color-FFC3D7 {
-    color: #FFC3D7;
-}
-.homepage-max-width-600 {
-    max-width: 600px;
-}
-.homepage-business-block-image{
-    max-height:595px; 
-    min-height:350px;
-}
-@media screen and (max-width: 600px) {
-    .homepage-featured-img-height-500 {
-        height: auto;
-        width: 100%;
-    }
-}
-.homepage-content-min600-max764 {
-    display: none;
-}
-@media (min-width:600px) and (max-width:764px) {
-    .homepage-content {
-        display: none;
-    }
-    .homepage-content-min600-max764 {
-        display: block;
-    }
-}
-.homepage-route-link:active{
-    color: #2c50da !important;
-    & .homepage-route-icon {
-        color:#2c50da !important;
-    }
-}
-.home-right-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-    height:13px;
-    background-position: right center;
-    background-size:contain;
-}
-.home-right-hover-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:13px;
-   background-position: right center;
-   background-size:contain;
-}
-.homepage-route-link:active .home-right-hover-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-   height:13px;
-   background-position: right center;
-   background-size:contain;
-}
-.home-right-white-icon{
-    background-image: url('@/assets/white-arrow.png'); 
-    max-width:22px;
-    height:13px;
-    background-position: right center;
-    background-size:contain;
-}
-.home-right-dark-icon{
-    background-image: url('@/assets/strong-blue-arrow.png'); 
-    max-width:22px;
-    height:13px;
-    background-position: right center;
-    background-size:contain;
-}
\ No newline at end of file
diff --git a/src/components/retailer/home/HomeComponent.vue b/src/components/retailer/home/HomeComponent.vue
deleted file mode 100644
index 1d3b678..0000000
--- a/src/components/retailer/home/HomeComponent.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<template>
-  <div class="homepage-overflow-x-hidden white">
-    <!--<v-container v-show="callOutsBlock.length" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
-      <v-col class="px-md-5 px-0">
-        <div v-html="getBlockContent()"></div>
-      </v-col>ImageBlock-01
-    </v-container>-->
-    <div class="homepage-overflow-x-hidden white" v-if="homePageContent.length">
-    <div v-html="getHomePageContent()">
-    </div>
-  </div>
-  
-    <PostScriptBlog />
-  </div>
-</template>
-<script>
-import {
-  goToCategoryPageRouting,
-} from "@/services/util.service";
-import PostScriptBlog from "@/components/retailer/home/PostScriptBlog";
-export default {
-  name: "HomeComponent",
-  components: {
-    PostScriptBlog
-  },
-  computed: {
-     homePageContent: function() {
-     return this.$store.state.layout.pageContent;
-     },
-    imgHeadTextFirst: function() {
-      return "Downton Abbey stationery".replace(/(\S+\s*){1,2}/g, "$&</br>");
-    },
-    imgHeadTextSecond: function() {
-      return "Vera Wang Papers".replace(/(\S+\s*){1,2}/g, "$&</br>");
-    },
-    blockOne() {
-      return this.$store.state.block.footerBlock;
-    },
-    callOutsBlock: function() {
-      return this.$store.state.layout.cmsBlockContent;
-    },
-    categoryDetailsList: function() {
-      return this.$store.state.headerCategoryList.categoryDetails;
-    },
-    /* pageId: function(){
-      return this.$route.meta.pid
-     }*/
-  },
-  data: () => ({
-    categoryId: 10,
-    calloutsblockId: 9,
-    pageUrlKey:'home-page-content',
-    //pageId:150
-  }),
-  methods: {
-    /* goToLink(link) {
-      window.open(link, "_self");
-    },*/
-    getHomePageContent(){
-      if (this.homePageContent.length) {
-       let data = this.homePageContent.filter(element=>{
-      return element.identifier === "home-page-content"});
-             if(data.length > 0){
-        let path = data[0].content;
-        var div = document.createElement("div");
-        div.innerHTML = path;
-        let imgSrcUrls = div.getElementsByTagName("img");
-        for (let i = 0; i < imgSrcUrls.length; i++) {
-          let urlValue = imgSrcUrls[i].getAttribute("src");
-          if (urlValue) {
-            imgSrcUrls[i].setAttribute(
-              "src",
-              this.imageBasePathUrl() +
-                "/media/" +
-                imgSrcUrls[i].src
-                  .replace(window.location.href, "")
-                  .replace(window.location.origin, "")
-                  .replace(/%22%7D%7D/g, "")
-                  .replace(/%7B%7B/g, "")
-                  .replace(/%20url=%22/g, "")
-                  .replace("media", "")
-            );
-          }
-        }
-        return div.innerHTML;
-             }
-      }
-    },
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
-    },
-    getBlockContent() {
-      if (this.callOutsBlock.length) {
-        let data = this.callOutsBlock.filter(element => {
-          return element.id === this.calloutsblockId;
-        });
-        let path = data[0].content;
-        var div = document.createElement("div");
-        div.innerHTML = path;
-        let imgSrcUrls = div.getElementsByTagName("img");
-        for (let i = 0; i < imgSrcUrls.length; i++) {
-          let urlValue = imgSrcUrls[i].getAttribute("src");
-          if (urlValue) {
-            imgSrcUrls[i].setAttribute(
-              "src",
-
-              this.imageBasePathUrl() +
-                "/media/" +
-                imgSrcUrls[i].src
-                  .replace(window.location.href, "")
-                  .replace(window.location.origin, "")
-                  .replace(/%22%7D%7D/g, "")
-                  .replace(/%7B%7B/g, "")
-                  .replace(/%20url=%22/g, "")
-                  .replace("media", "")
-            );
-          }
-        }
-        return div.innerHTML;
-      }
-    },
-    routeToPage(pageName) {
-      if (pageName == "CategoryPage") {
-        let vm = this;
-        goToCategoryPageRouting(vm, {n:"Stationery",id:10});
-      }
-    },
-    goToPageRoutePage(pageName) {
-      this.$router
-        .push({
-          name: pageName
-        })
-        .catch(error => {
-          error;
-        });
-    },
-    initialLink() {
-      return import.meta.env.VITE_APP_HOME_PAGE_URL;
-    },
-   /* async goToPage(main, sub, child, categoryId) {
-      let categoryOne = await getCategoryOne(
-        this.categoryDetailsList,
-        categoryId
-      );
-      let vm = this;
-      goToCategoryPageRouting(vm, categoryOne);
-    },*/
-    goToLink(pageLink) {
-      window.location.replace(pageLink);
-      //} else {
-      //window.open(routeSecond, "_self");
-      //}
-    }
-  },
-mounted() {
-   window.onload = function() {
-     if(document.getElementById("imgTarget")){
-     var x = document.getElementById("imgTarget").offsetWidth;
-     document.getElementById("imgTarget").style.height = x + "px";
-}
-}
-    window.onresize = function() {
-      if(document.getElementById("imgTarget")){
-      var x = document.getElementById("imgTarget").offsetWidth;
-      document.getElementById("imgTarget").style.height = x + "px";
-    }
-    }
-  },
-  created() {
-    // this.$store.dispatch("block/fetchOne",10)
-    //this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
-    //this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
-  }
-};
-</script>
-<style  lang="scss">
-#imgTarget {
-  display: inline-block;
-}
-.home-page-hero-image{
-  height:62.5%;
-  width:100%;
-}
-.home-page-mobile-hero-image{
-  width:100%;
-}
-.home-page-top-margin-56{
-  margin-top:56px;
-}
-.home-page-link-block{
-  display:contents !important;
-}
-.home-page-hero-button{
-  border: thin solid #fff !important;
-  max-width:212.56px;
-  padding-top:9px;
-  padding-bottom:9px;
-  background-color: #fff;
-   opacity: 0.9;
-  color:#404040;
-   font-family: 'Whyte-Book', sans-serif;
-   letter-spacing: 1.42857px;
-}
-.home-page-hero-button:hover{
-  border: thin solid #2c50da  !important;
-  max-width:212.56px;
-  padding-top:9px;
-  padding-bottom:9px;
-  background-color: #2c50da ;
-  color:#ffffff;
-   opacity: 0.9;
-   font-family: 'Whyte-Book', sans-serif;
-   letter-spacing: 1.42857px;
-}
-.home-page-mobile-hero-text{
-  color: #404040!important;
-}
-.homepage-business-block-image{
-    max-height:595px; 
-    min-height:350px;
-    width:100%;
-}
-.homepage-featured-img-height-500 {
-    height: 500px;
-    max-width: 100%;
-}
-.home-page-hero-text {
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-}
-.homepage-max-width-600 {
-    max-width: 600px;
-}
-.home-page-col-12{
-  width: 100%;
-  display:flex;
-  height:100%;
-}
-.home-page-row{
-  display:flex;
-  height:100%;
-  //width:100%;
-}
-.homepage-font-color-FFC3D7 {
-    color: #FFC3D7;
-}
-.homepage-background-color-eb7525 {
-    background: #eb7525;
-}
-.homepage-background-color-f3f2f2 {
-    background: #f3f2f2;
-}
-.home-page-col-6{
-   width: 50%;
-  display: block;
-  //margin-top:auto;
- // margin-bottom:auto;
-}
-.home-page-craft-col-6{
-   width: 50%;
-  display: grid;
-  //margin-top:auto;
- // margin-bottom:auto;
-}
-.home-page-explore-col-8{
-   width: 66.66%;
-  display: grid;
-}
-.home-page-explore-col-4{
-   width: 33.33%;
-  display: grid;
-  //margin-top:auto;
-  //margin-bottom:auto;
-}
-.home-page-craft-link{
-   color: #2d5d84 !important;
-    & .home-page-icon{
-    background-image: url('@/assets/strong-blue-arrow.png'); 
-    max-width:22px;
-    height:14px;
-    background-position: right center;
-    background-size:contain;
-}
-}
-.home-page-craft-link:hover{
-    color: #CCB7FF !important;
-    & .home-page-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:14px;
-   background-position: right center;
-   background-size:contain;
-}
-}
-.home-page-white-link{
-   color: #ffffff !important;
-    & .home-page-icon{
-    background-image: url('@/assets/white-arrow.png'); 
-    max-width:22px;
-    height:14px;
-    background-position: right center;
-    background-size:contain;
-}
-}
-.home-page-white-link:hover{
-    color: #CCB7FF !important;
-    & .home-page-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:14px;
-   background-position: right center;
-   background-size:contain;
-}
-}
-.home-page-link{
-    color: #2c50da !important;
-    & .home-page-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-    height:13px;
-    background-position: right center;
-    background-size:contain;
-}
-}
-.home-page-link:hover{
-    color: #CCB7FF !important;
-    & .home-page-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:13px;
-   background-position: right center;
-   background-size:contain;
-}
-}
-.home-page-image{
-  width:100%;
-  height:auto;
-}
-.homepage-image-card .v-ripple__container {
-  opacity: 0 !important;
-}
-
-.homepage-image-card.v-card--link:focus:before {
-  opacity: 0 !important;
-}
-.callouts-container {
-  display: flex;
-  justify-content: center;
-}
-.callout img {
-  width: -webkit-fill-available;
-  width: 100%;
-  height: auto;
-}
-
-.col-right img {
-  width: -webkit-fill-available;
-  width: 100%;
-  height: auto;
-}
-.col-left {
-  width: 40%;
-  display: block;
-  padding-right: 10px;
-}
-.col-right {
-  width: 60%;
-  display: grid;
-  gap: 10px;
-  padding-left: 10px;
-}
-.homepage-background-color-strongblue{
-  background:#2d5d84;
-}
-@media screen and (max-width: 600px) {
-  .homepage-featured-img-height-500 {
-    height: auto;
-    width: 100%;
-}
-  .home-page-col-12{
-  width: 100%;
-  display:block;
-  height:100%;
-}
-  .home-page-craft-col-6{
-   width: 100%;
-  display: flex;
-  //margin-top:auto;
- // margin-bottom:auto;
-}
-  .home-page-explore-col-8{
-   width: 100%;
-  display: block;
-}
-.home-page-explore-col-4{
-   width: 100%;
-  display: block;
-  //margin-top:auto;
-  //margin-bottom:auto;
-}
-  .home-page-col-6{
-   width: 100%;
-  display: block;
-  //margin-top:auto;
- // margin-bottom:auto;
-}
-.home-page-row{
-  display:block;
-  height:100%;
-  width:100%;
-}
-  .callouts-container {
-    display: block;
-    justify-content: center;
-    margin: 0px;
-  }
-  .col-left {
-    width: 100%;
-    padding-right: 0px;
-  }
-  .col-right {
-    width: 100%;
-    padding-top: 30px;
-    padding-left: 0px;
-    gap: 30px;
-  }
-}
-</style>
-<style src="./HomeComponent.scss" lang="scss" scoped /> 
\ No newline at end of file
diff --git a/src/components/retailer/home/PostScriptBlog.scss b/src/components/retailer/home/PostScriptBlog.scss
deleted file mode 100644
index 93d3cf5..0000000
--- a/src/components/retailer/home/PostScriptBlog.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.postscriptblog-route-link:active{
-    color: #2c50da !important;
-    & .postscriptblog-route-icon {
-        color:#2c50da !important;
-    }
-  }
-  /*.title-color {
-	color: #000000;
-}*/
-
-.postscriptblog-line {
-    border-bottom: 1px solid #3d4973;
-    width: 1.87rem;
-    margin: 1.53rem 0rem 1.21rem 0rem;
-    size: 1.87rem;
-}
-// .homepage-contentlink-color{
-//     color:#CCB7FF !important;
-// }
-.postscriptblog-image-card .v-ripple__container{
-    opacity: 0 !important;
-  }
-  
-  .postscriptblog-image-card.v-card--link:focus:before {
-    opacity: 0 !important;
-  }
-  .postscriptblog-right-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-    height:14px;
-    background-position: right center;
-   background-size:contain;
-}
-.postscriptblog-right-hover-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:14px;
-   background-position: right center;
-   background-size:contain;
-}
-.postscriptblog-route-link:active .postscriptblog-right-hover-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-   height:14px;
-   background-position: right center;
-   background-size:contain;
-}
-.postscriptblog-right-white-icon{
-    background-image: url('@/assets/white-arrow.png'); 
-    max-width:22px;
-    height:14px;
-    background-position: right center;
-   background-size:contain;
-}
-.postscriptblog-right-dark-icon{
-    background-image: url('@/assets/strong-blue-arrow.png'); 
-    max-width:22px;
-    height:14px;
-    background-position: right center;
-    background-size:contain;
-}
\ No newline at end of file
diff --git a/src/components/retailer/home/PostScriptBlog.vue b/src/components/retailer/home/PostScriptBlog.vue
deleted file mode 100644
index 6d0d418..0000000
--- a/src/components/retailer/home/PostScriptBlog.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <div v-html="getPostScriptContent()"></div>
-  </div>
-</template>
-<script>
-export default {
-  name: "PostScriptBlog",
-  computed: {
-      homeBaseUrl() {
-      return import.meta.env.VITE_APP_HOME_PAGE_URL;
-    },
-     postScriptContent: function() {
-      return this.$store.state.layout.cmsBlockContent;
-    }
-  },
-  methods: {
-      imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
-    },
-     getPostScriptContent(){
-      if (this.postScriptContent.length) {
-        let data = this.postScriptContent.filter(element => {
-          return element.identifier === "post-script";
-        });
-         if(data.length > 0){
-        let path = data[0].content;
-        var div = document.createElement("div");
-        div.innerHTML = path;
-        let imgSrcUrls = div.getElementsByTagName("img");
-        for (let i = 0; i < imgSrcUrls.length; i++) {
-          let urlValue = imgSrcUrls[i].getAttribute("src");
-          if (urlValue) {
-            imgSrcUrls[i].setAttribute(
-              "src",
-
-              this.imageBasePathUrl() +
-                "/media/" +
-                imgSrcUrls[i].src
-                  .replace(window.location.href, "")
-                  .replace(window.location.origin, "")
-                  .replace(/%22%7D%7D/g, "")
-                  .replace(/%7B%7B/g, "")
-                  .replace(/%20url=%22/g, "")
-                  .replace("media", "")
-            );
-          }
-        }
-        return div.innerHTML;
-      }
-      }
-    },
-     goToLink(pageName) {
-      /* eslint-disable */
-      window.location.replace(this.homeBaseUrl+pageName);
-      //} else {
-      //window.open(routeSecond, "_self");
-      //}
-    }
-  },
-  
-  created() {
-    // this.$store.dispatch("block/fetchOne",10)
-   // this.$store.dispatch("block/fetchPostScriptBlock", this.blockId);
-  }
-};
-</script>
-<style lang="scss">
-.post-script-block-image{
-  width:100%;
-  height:auto;
-}
-.postscriptblog-image-card .v-ripple__container{
-    opacity: 0 !important;
-  }
-  
-  .postscriptblog-image-card.v-card--link:focus:before {
-    opacity: 0 !important;
-  }
-  .postscriptblog-line {
-    border-bottom: 1px solid #3d4973;
-    width: 1.87rem;
-    margin: 1.53rem 0rem 1.21rem 0rem;
-    size: 1.87rem;
-}
-.post-script-link{
-    color: #2c50da !important;
-    & .home-page-icon{
-    background-image: url('@/assets/blue-arrow.png'); 
-    max-width:22px;
-    height:13px;
-    background-position: right center;
-    background-size:contain;
-}
-}
-.post-script-link:hover{
-    color: #CCB7FF !important;
-    & .home-page-icon{
-    background-image: url('@/assets/hover-arrow.png');
-    max-width:22px;
-   height:13px;
-   background-position: right center;
-   background-size:contain;
-}
-}
-.post-script-row{
-  display:flex;
-  height:100%;
-  width:100%;
-}
-.post-script-col-4{
-  width:33.33%;
-  display:flex;
-}
-@media screen and (max-width: 600px) {
-  .post-script-row{
-  display:block;
-  height:100%;
-  width:100%;
-}
-.post-script-col-4{
-  width:100%;
-  display:block;
-}
-.container{
-  padding:0px;
-}
-}
-</style>
-<style src="./PostScriptBlog.scss" lang="scss" scoped /> 
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss b/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss
deleted file mode 100644
index 2a54e6e..0000000
--- a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.productpage-icon{
-    color:#1D1D1D;
-    position: relative;
-   top:-3px;
-  }
-  .productpage-button.theme--light.v-btn:hover:before {
-    opacity:0 !important;
-}
-.productpage-select-button {
-  & .v-select__slot {
-    outline: 2px !important;
-    border-bottom: 0px !important;
-  }
-  &
-    .v-application--is-ltr
-    .v-overflow-btn
-    .v-select__selection--comma:first-child {
-    margin-left: 4px !important;
-  }
-  &.v-overflow-btn .v-input__append-inner {
-    max-width: 30px !important;
-    margin-top: -4px !important;
-  }
-  & .v-menu.v-menu__content{
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-}
-.v-menu.v-menu__content {
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-.productpage-button.v-btn:before{
-    background-color: transparent !important;
-}
-.productpage-button:active{
-  background-color: transparent !important;
-}
-.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
-{
- background-color: transparent !important; 
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue b/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue
deleted file mode 100644
index 4907365..0000000
--- a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue
+++ /dev/null
@@ -1,956 +0,0 @@
-<template>
-  <v-container class="white" ref="divOne">
-    <v-row class="mt-12" justify="center" v-if="fetchInProgress || updateProgress">
-      <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-    </v-row>
-    <v-row class="mb-md-10" v-else-if="!fetchErrorMessage && configuredProductDetails">
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length">
-        <div
-          v-for="(productImage,index) in configuredProductDetails[0].mediaGalleryEntries"
-          v-bind:key="index"
-        >
-          <div v-if="productImage.mediaType === 'image'">
-            <v-col class="pb-2 pt-0 pl-0 pr-0">
-              <v-hover v-slot:default="{ hover }">
-                <v-card
-                  outlined
-                  @click="setSelected(productImage.file,index)"
-                  :color="hover ? blue : white"
-                  v-bind:class="{ 'primary': index==selected }"
-                  tile
-                  v-if="productImage.file"
-                >
-                  <v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-                </v-card>
-              </v-hover>
-            </v-col>
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length==0">
-        <v-col class="pb-2 pt-0 px-0">
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              outlined
-              :color="hover ? blue : white"
-              class="primary"
-              tile
-            >
-              <v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="7"
-        md="7"
-        class="my-6 py-6 mt-sm-12 pt-sm-12 mt-md-12 pt-md-12"
-        align="center"
-        v-if="configuredProductProgress"
-      >
-        <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-      </v-col>
-      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else-if="imagepath">
-        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
-          <h1 class="text-uppercase h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
-        </v-col>
-        <v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-      </v-col>
-      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="configuredProductDetails[0].mediaGalleryEntries.length">
-        <v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
-        <v-col
-          v-else
-          v-for="(productImage,index) in configuredProductDetails[0].mediaGalleryEntries"
-          v-bind:key="index"
-          v-show="productImage.mediaType === 'image'"
-          class="px-2"
-          cols="3"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto"
-              outlined
-              @click="setSelected(productImage.file,index)"
-              :color="hover ? blue : white"
-              v-bind:class="{ 'primary': index==selected }"
-              tile
-              v-if="productImage.file"
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl + productImage.file"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                :alt="productDetails.name" :title="productDetails.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length==0">
-        <v-col
-          class="px-2"
-          cols="3"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto primary"
-              outlined
-              :color="hover ? blue : white"
-              tile
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl+''"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                :alt="productDetails.name" :title="productDetails.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <!-- <v-progress-circular :size="60" color="primary" indeterminate v-if="fetchInProgress"></v-progress-circular>-->
-      <v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
-        <v-row>
-          <v-col md="12" cols="12" class="pr-0 pt-0">
-            <p
-              class="d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
-            >{{ productDetails.name}}</p>
-            <p
-              v-if="!selectedLetter"
-              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
-            >{{ productDetails.sku}}</p>
-            <p
-              v-else
-              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
-            >{{configuredProductDetails[0].sku}}</p>
-          </v-col>
-          <!--<v-col md="1" cols="2" align="right" justify="right" class="pl-0 pt-0">
-            <v-icon light class="pt-1 d-none d-sm-block">mdi-heart-outline</v-icon>
-            <v-icon light class="d-block d-sm-none productpage-icon">mdi-heart-outline</v-icon>
-          </v-col>-->
-        </v-row>
-        <p
-          v-if="!selectedLetter"
-          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
-        >sku {{productDetails.sku}}</p>
-        <p
-          v-else
-          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
-        >sku {{configuredProductDetails[0].sku}}</p>
-        <p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
-        <v-row class="pt-3">
-          <v-col cols="6" sm="12" md="12" lg="5" class="pr-0 pb-0">
-            <p
-              class="body-font mb-0 caption ls-n008 fontcolor-grey-darken pb-1"
-            >{{productDetails.unitDescription}}</p>
-            <!-- <p
-              class="body title-color-black"
-            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p> (old code )-->
-            <div v-if="configuredProductDetails">
-            <p
-              v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price')"
-              class="body title-color-black"
-            >From ${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price'))}} {{productDetails.uom}}</p>
-            <div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
-              <div v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price') ">
-                <s>${{Number( configuredProductDetails[0].price)}}</s> &nbsp;
-                <span
-                  class="red--text mb-0"
-                >${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price'))}}</span>
-                / {{productDetails.uom}}
-              </div>
-              <p
-                v-else
-                class="body title-color-black"
-              >${{configuredProductDetails[0].price}} / {{ productDetails.uom}}</p>
-            </div>
-            </div>
-            <!-- <p
-              v-else
-              class="body title-color-black"
-            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p>-->
-          </v-col>
-          <v-col
-            align="right"
-            justify="right"
-            cols="6"
-            sm="12"
-            md="12"
-            lg="7"
-            class="d-none d-sm-block pb-0"
-          >
-            <v-select
-              :items="numberOptions"
-              class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-              dense
-              attach
-              flat
-              solo
-              v-model="selectedQty"
-              ref="selectedQty1"
-              background-color="transparent"
-              append-icon="mdi-plus"
-            ></v-select>
-          </v-col>
-          <v-col align="right" justify="right" cols="12" class="pl-4 pb-0">
-            <v-form ref="configuredLetter" v-model="valid" :lazy-validation="lazy">
-              <v-select
-                :items="productDetails.configurableProductLinksDetails"
-                class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 select-change-icon"
-                :class="checkLetter?'':'productpage-select-button'"
-                dense
-                attach
-                flat
-                solo
-                :outlined="checkLetter"
-                :color="checkLetter?'error':'primary'"
-                v-model="selectedLetter"
-                @blur="resetValidation()"
-                ref="selectedQty2"
-                item-text="letterLabel"
-                item-value="letterLabel"
-                label="Choose an option..."
-                @change="getImages(productDetails.configurableProductOptions[0].options, selectedLetter, productDetails.configurableProductLinks)"
-                background-color="transparent"
-                append-icon="mdi-plus"
-                :rules="[v => !!v || 'This is a required field.']"
-              >
-                <template v-slot:selection="data">
-                  <span class="fontsize-14">{{data.item.letterLabel}}</span>
-                </template>
-                <template v-slot:item="data">
-                  <template>
-                    <v-list-item-content>
-                      <v-list-item-title class="text-uppercase">{{data.item.letterLabel}}</v-list-item-title>
-                    </v-list-item-content>
-                  </template>
-                </template>
-              </v-select>
-            </v-form>
-          </v-col>
-        </v-row>
-        <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
-        <p class="py-0 my-0 red--text">{{ errorMessage }}</p>
-        <v-row v-if="!itemId">
-          <v-col
-            class="pt-4"
-            v-if="productDetails.status=='1' && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0' ) && stockFlag"
-          >
-         <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                depressed
-                @click="addToConfiguredCart(productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId,productDetails)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  block
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-                <span v-if="!inProgress">ADD TO CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-          <v-col
-            v-else-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1')  && productDetails.status=='1'&& qtyPriceOptions.length > 0 && stockFlag"
-          >
-             <v-hover v-slot:default="{ hover }">
-              <v-btn
-                block
-                x-large
-                class="text-uppercase ls-0 body pb-1 productpage-button"
-                :outlined="!hover"
-                :color="hover?'primary':'white'"
-                :class="hover?'white--text':'primary--text'"
-                tile
-                depressed
-                @click="gotoPersonalize()"
-              >PERSONALIZE</v-btn>
-            </v-hover>
-          </v-col>
-          <v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
-            <v-btn
-              block
-              x-large
-              class="text-uppercase ls-0 body pb-1 white--text"
-              tile
-              color="#97ABB4"
-              depressed
-            >UNAVAILABLE</v-btn>
-          </v-col>
-          </v-row>
-
-          <v-row v-else> 
-          <v-col
-            class="pt-4"
-            v-if="itemId && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')"
-          >
-          <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                depressed
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                @click="updateToConfiguredCart(productDetails.name,productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-                <span v-if="!inProgress">UPDATE CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-        </v-row>
-      
-  
-        <v-row>
-          <v-col class="pt-5">
-            <v-tabs color="black" class="product-overview-tabs">
-              <v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
-              <v-tab-item>
-               <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
-                  <li>Standard shipping available</li>
-                  <li>Expedited shipping available</li>
-                  <li>Ships from Cohoes, NY</li>
-                </ul>
-              </v-tab-item>
-            </v-tabs>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-    <v-row v-else>
-      <v-col class="text-center">
-        <v-alert type="error" text>{{fetchErrorMessage}}</v-alert>
-      </v-col>
-    </v-row>
-    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
-  </v-container>
-</template>
-<script>
-const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
-const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
-//import * as easings from "vuetify/es5/services/goto/easing-patterns";
-import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
-import { getLable, customAttributeValue ,setCategoryNameInLocal} from "@/services/util.service";
-//import { getAuthUser } from "@/services/auth";
-export default {
-  productDefaultImage:require('@/assets/defaultProduct.jpg'),
-  name: "ConfiguredProductDetailComponent",
-  props: ["productDetails","stockFlag","categoryId"],
-  components: { SnackbarComponent },
-  data: () => ({
-    updateProgress: "",
-    dropDownIcon: "mdi mdi-plus",
-    iconColor: "black--text",
-    isActive: true,
-    isLetterActive: true,
-    easings: Object.keys(easings),
-    snackbar: {
-      show: false,
-      message: null,
-      color: null,
-      timeout: 0
-    },
-    lazy: false,
-    textRules: [
-      v => !!v || "This field is required",
-      v => (v && v.length >= 3) || "This field must be at least 3 characters"
-    ],
-    valid: true,
-    optionValue: "",
-    selectedQty: "",
-    selectedLetter: "",
-    blue: "primary",
-    checkLetter: false,
-    white: "white",
-    errorMessage: "",
-    itemNumber: "193C",
-    quantity: "25",
-    savFromKey: "Ub07GxNhS3yyoDfO",
-    ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
-    selected: "",
-    imagepath: "",
-    fav: true,
-    menu: false,
-    message: false,
-    hints: true,
-    
-    priceOptions: [
-      { text: "31 ($110.00)", callback: () => "31 ($110.00)" },
-      { text: "32 ($110.00)", callback: () => "32 ($110.00)" },
-      { text: "33 ($110.00)", callback: () => "33 ($110.00)" }
-    ]
-    /*numberOptions: [
-      { qty: "1 ", callback: () => "1" },
-      { qty: "2", callback: () => "2" },
-      { qty: "3", callback: () => "3" }
-    ]*/
-  }),
-  computed: {
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-    /*  productAttributes() {
-      return this.$store.state.productList.attributeList;
-    },*/
-    sku: function() {
-      return this.$route.meta.sku ? this.$route.meta.sku : this.$route.params.sku;
-    },
-    itemId: function() {
-      this.pageScrollUp();
-      return this.$route.query.itemId;
-    },
-    qty: function() {
-      return this.$route.query.qty;
-    },
-    /*numberOptions: function() {
-      let nums = [];
-      for (let i = 0; i <= 98; i++) {
-        nums[i] = i + 1;
-      }
-      if (nums.length > 0) return nums;
-      else return "";
-    },*/
-    qtyPriceOptions() {
-      let vm = this;
-      let list = JSON.parse(
-        this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "qty_price"
-        )
-      );
-      if (this.qty) {
-        vm.selectedQty = this.qty.toString();
-      } else {
-        vm.selectedQty = list[0].qty;
-      }
-      return list;
-    },
-    numberOptions: function() {
-      let vm = this;
-      if (this.productDetails.customAttribute) {
-        let minSalesQty = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_min_sales_qty"
-        );
-        let qtyIncrements = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_qty_increments"
-        );
-        minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
-        qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;
-
-        let nums = [];
-        nums[0] = minSalesQty;
-        if (this.qty) {
-          vm.selectedQty = Number(this.qty);
-        } else {
-          vm.selectedQty = minSalesQty;
-        }
-        for (let i = 1; i <= 98; i++) {
-          minSalesQty = minSalesQty + qtyIncrements;
-          nums[i] = minSalesQty;
-        }
-        if (nums.length > 0) return nums;
-        else return "";
-
-        // return minSalesQty + "   " + qtyIncrements;
-      } else {
-        return "";
-      }
-    },
-    configuredProductDetails() {
-      return this.$store.state.productOne.configuredProductDetails.items;
-    },
-    userAuth: function() {
-      return this.$store.state.auth.userAuth;
-    },
-    
-    inProgress: function() {
-      if (this.userAuth) {
-        return this.$store.state.userCartProduct.inProgress;
-      } else {
-        return this.$store.state.cartProduct.inProgress;
-      }
-    },
-    configuredProductProgress: function() {
-      return this.$store.state.productOne.configuredProductProgress;
-    },
-    fetchInProgress: function() {
-      return this.$store.state.productOne.fetchInProgress;
-    },
-    fetchErrorMessage: function() {
-      return this.$store.state.productOne.errorMessage;
-    },
-    productAttributes() {
-      return this.$store.state.productList.attributeList;
-    }
-  },
-  watch: {
-    configuredProductDetails() {
-      this.imagepath =this.productDetails.mediaGalleryEntries? this.productDetails.mediaGalleryEntries[0].file:"";
-    },
-    valid() {
-      if (!this.valid) {
-        this.$refs.configuredLetter.reset();
-      }
-    }
-    /* qtyPriceOptions()
-    {
-      if(this.qtyPriceOptions.length > 0)
-      this.selectedQty=this.qtyPriceOptions[0];
-    }*/
-  },
-  methods: {
-     setAltImg() { 
-      event.target.src =this.productDefaultImage
-    },
-    resetValidation() {
-      this.isLetterActive = true;
-      this.checkLetter = false;
-      if (!this.valid) {
-        this.$refs.configuredLetter.reset();
-      }
-    },
-    getImages(letterArray, letter, configuredlink) {
-      this.checkLetter = false;
-      this.selected = 0;
-      this.errorMessage = "";
-      let index = letterArray.findIndex(x => x.label === letter);
-      let code = configuredlink[index];
-
-      let indexOption = letterArray.filter(x => x.label === letter);
-      this.optionValue = indexOption[0].valueIndex;
-      /* eslint-disable */
-      //debugger
-      this.$store
-        .dispatch("productOne/fetchConfiguredProductDetails", code)
-        .then(
-          () =>
-            (this.imagepath = this.configuredProductDetails[0].mediaGalleryEntries?this.configuredProductDetails[0].mediaGalleryEntries[0].file:"")
-        );
-      this.isLetterActive=true  
-    },
-    getCustomAttributeValue(customAttributes, attributeCode) {
-      return customAttributeValue(customAttributes, attributeCode);
-    },
-    addToConfiguredCart(sku, typeId, optionId,productDetails) {
-      this.checkLetter = true;
-       let vm =this;
-      if (this.$refs.configuredLetter.validate()) {
-        this.checkLetter = false;
-        if (this.selectedQty) {
-           let qtyNew=this.selectedQty;
-          this.errorMessage = "";
-          if (this.userAuth) {
-            this.$store
-              .dispatch("userCartProduct/addToConfiguredCart", {
-                sku: sku,
-                qty: this.selectedQty,
-                typeId: typeId,
-                optionId: optionId,
-                optionValue: this.optionValue
-              })
-              .then((res) => {
-               // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-                if(this.categoryId)
-              {
-                setCategoryNameInLocal(this.categoryId,res);
-              }
-                this.$store.dispatch("userCartProduct/cartProductList");
-               // this.$store.dispatch("userCartProduct/productTotalAmt");
-                this.$store.dispatch("userCartProduct/cartDrawer", true);
-                this.snackbar = {
-                  message: "Product Added Successfully",
-                  color: "success",
-                  show: true,
-                  timeout: 2000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              })
-              .catch(error => {
-                this.snackbar = {
-                  message: error.message,
-                  color: "error",
-                  show: true,
-                  timeout: 2000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              });
-          } else {
-            this.$store
-              .dispatch("cartProduct/addToConfiguredCart", {
-                sku: sku,
-                qty: this.selectedQty,
-                typeId: typeId,
-                optionId: optionId,
-                optionValue: this.optionValue
-              })
-              .then((res) => {
-                // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-                 if(this.categoryId)
-              {
-                setCategoryNameInLocal(this.categoryId,res);
-              }
-                this.snackbar = {
-                  message: "Product Added Successfully",
-                  color: "success",
-                  show: true,
-                  timeout: 2000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              })
-              .catch(error => {
-                this.snackbar = {
-                  message: error.message,
-                  color: "error",
-                  show: true,
-                  timeout: 2000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              });
-          }
-        } else {
-          this.errorMessage = "This is a required field.";
-        }
-      }
-    },
-    updateToConfiguredCart(productName,sku, typeId, optionId) {
-      if (this.$refs.configuredLetter.validate()) {
-        if (this.selectedQty) {
-          this.errorMessage = "";
-          if (this.userAuth) {
-            this.$store
-              .dispatch("userCartProduct/updateToConfiguredCart", {
-                sku: sku,
-                qty: this.selectedQty,
-                itemId: this.itemId,
-                typeId: typeId,
-                optionId: optionId,
-                optionValue: this.optionValue
-              })
-              .then(() => {
-                this.snackbar = {
-                  message: "Product Updated Successfully",
-                  color: "success",
-                  show: true,
-                  timeout: 3000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              })
-              .catch(error => {
-                this.snackbar = {
-                  message: error.message,
-                  color: "error",
-                  show: true,
-                  timeout: 3000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              });
-          } else {
-            this.$store
-              .dispatch("cartProduct/updateToConfiguredCart", {
-                sku: sku,
-                qty: this.selectedQty,
-                itemId: this.itemId,
-                typeId: typeId,
-                optionId: optionId,
-                optionValue: this.optionValue
-              })
-              .then(() => {
-                this.snackbar = {
-                  message: "Product Updated Successfully",
-                  color: "success",
-                  show: true,
-                  timeout: 3000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              })
-              .catch(error => {
-                this.snackbar = {
-                  message: error.message,
-                  color: "error",
-                  show: true,
-                  timeout: 3000
-                };
-                // setTimeout(() => {
-                //   this.$router.push({
-                //     name: "CategoryPage",
-                //     params: { category: "stationery" }
-                //   });
-                // }, 5000);
-              });
-          }
-          if(this.$route.name == productName)
-            this.$router.push({
-              name: productName,
-              query: { "qty": this.selectedQty, "itemId": this.itemId }
-            }).catch(error => {
-            error;
-        });
-        } else {
-          this.errorMessage = "Please Select Quantity";
-        }
-      }
-    },
-    /* getAttribute(customAttributes, attributeCode) {
-      return attribute(customAttributes, attributeCode, this.productAttributes);
-    },*/
-    getCustomAttributeLable(customAttributes, attributeCode) {
-      return getLable(customAttributes, attributeCode);
-    },
-
-    setValue(color) {
-      return (this.selected = color) && (this.errorMessage = "");
-    },
-    submit() {
-      if (this.selected !== "") {
-        return (this.selected = "") && (this.errorMessage = "");
-      } else {
-        this.errorMessage = "Please Select Color";
-      }
-    },
-    gotoPersonalize() {
-      // window.open(`${personlizeUrl}/product/${this.sku}`, "_blank");
-      if (
-        this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "builder_version"
-        ) === "1.0" ||
-        this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "builder_version"
-        ) === ""
-      ) {
-        this.$router.push({
-          name: "CraneConnection",
-          params: {
-            retailorId: retailorId,
-            quantity: this.selectedQty,
-            itemNumber: this.sku
-          }
-        });
-      } else {
-        let itemCode = this.itemId ? this.itemId : "new";
-        window.open(
-          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
-          "_blank"
-        );
-      }
-    },
-    setSelected(part, index) {
-      this.imagepath = part;
-      this.selected = index;
-    },
-    pageScrollUp() {
-       
-      this.updateProgress = true;
-      setTimeout(() => {
-        this.updateProgress = false;
-      }, 3000);
-    }
-  },
-  mounted() {
-    this.pageScrollUp();
-   // console.log('this.productDetails.configurableProductlinks',this.productDetails.configurableProductLinks);
-    if(this.productDetails.configurableProductLinks)
-    {
-        this.$store.dispatch(
-          "productOne/fetchConfiguredProductDetails",
-          this.productDetails.configurableProductLinks[0]
-        );
-    }
-  },
-  created() {
-    if (this.itemId) {
-      this.updateProgress = true;
-      setTimeout(() => {
-        this.updateProgress = false;
-      }, 3000);
-    }
-   
-  }
-};
-</script>
-<style lang="scss">
-.overflow-button .v-select__slot {
-  border-left: 1px solid #dcdddd !important;
-  border-right: 1px solid #dcdddd !important;
-}
-.product-overview-tabs .v-tabs-slider-wrapper {
-  color: #2850da;
-  height: 4px !important;
-}
-.overflow-button.v-overflow-btn.v-input--is-focused .v-input__slot {
-  box-shadow: none !important;
-  border-top: 1px solid #dcdddd !important;
-  border-bottom: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-/*.v-autocomplete__content.v-menu__content {
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-}*/
-.product-overview-tabs .v-tabs-items {
-  background-color: transparent !important;
-}
-.product-overview-tabs .v-tabs-bar {
-  background-color: transparent !important;
-  height: 35px !important;
-}
-.product-overview-tabs .v-slide-group__prev {
-  display: none !important;
-}
-.v-text-field .v-input__control {
-  border-radius: unset !important;
-}
-.productpage-select-button .v-input__control .v-input__slot {
-  border: thin solid #8b8b8b !important;
-}
-.productpage-select-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
-  color: #2850da !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-/*.productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
-  .v-input__append-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 5px;
-  border-left: 1px solid #2850da;
-  padding-left: 10px;
-  height: 34px;
-}*/
-/*.productpage-select-button.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
-  > .v-input__control
-  > .v-input__slot {
-  padding: 0 !important;
-}
-.productpage-select-button .v-select__slot {
-  border: thin solid #dcdddd;
-  height: 48px;
-}
-.productpage-select-button .v-select__slot:hover {
-  border: thin solid #2850da !important;
-  height: 48px;
-}
-.productpage-select-button .v-input__icon.v-input__icon--append {
-  padding-right: 15px;
-}
-.productpage-select-button.v-select.v-input--dense .v-select__selection--comma {
-  margin-left: 10px;
-}
-.productpage-select-button.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  margin-top: 0;
-  border-left: 1px solid #dcdddd;
-  height: 48px;
-  padding-top: 12px;
-  padding-left: 15px;
-}*/
-</style>
-<style src="./ProductDetailComponent.scss" lang="scss" scoped/>
diff --git a/src/components/retailer/product-detail/GiftCardDetailsComponent.scss b/src/components/retailer/product-detail/GiftCardDetailsComponent.scss
deleted file mode 100644
index 4ada2a4..0000000
--- a/src/components/retailer/product-detail/GiftCardDetailsComponent.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.productpage-button.v-btn:before{
-    background-color: transparent !important;
-}
-.productpage-button:active{
-  background-color: transparent !important;
-}
-.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
-{
- background-color: transparent !important; 
-}
-.productpage-button.theme--light.v-btn:hover:before {
-    opacity:0 !important;
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/GiftCardDetailsComponent.vue b/src/components/retailer/product-detail/GiftCardDetailsComponent.vue
deleted file mode 100644
index ab824c0..0000000
--- a/src/components/retailer/product-detail/GiftCardDetailsComponent.vue
+++ /dev/null
@@ -1,899 +0,0 @@
-<template>
-  <v-container class="white">
-    <v-row class="mb-md-10">
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-if="productDetails.mediaGalleryEntries.length">
-        <div v-for="(productImage,index) in productDetails.mediaGalleryEntries" v-bind:key="index">
-          <div v-if="productImage.mediaType === 'image'">
-            <v-col class="pb-2 pt-0 pl-0 pr-0">
-              <v-hover v-slot:default="{ hover }">
-                <v-card
-                  outlined
-                  @click="setSelected(productImage.file,index)"
-                  :color="hover ? blue : white"
-                  v-bind:class="{ 'primary': index==selected }"
-                  tile
-                >
-                  <v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" 
-                  :alt="productDetails.name" :title="productDetails.name"></v-img>
-                </v-card>
-              </v-hover>
-            </v-col>
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="productDetails.mediaGalleryEntries.length==0">
-        <v-col class="pb-2 pt-0 px-0">
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              outlined
-              :color="hover ? blue : white"
-              class="primary"
-              tile
-            >
-              <v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name" ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-col>
-      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-if="imagepath">
-        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
-          <h1 class="text-uppercase h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
-        </v-col>
-        <v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-      </v-col>
-      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else>
-        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
-          <h1 class="text-uppercase h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
-        </v-col>
-        <v-img v-bind:src="imageBasePathUrl + (this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:'')" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-      </v-col>
-      <v-row align="center" class="pl-4 pr-3 d-flex d-sm-none px-1" v-if="productDetails.mediaGalleryEntries.length">
-        <v-col
-          v-for="(productImage,index) in productDetails.mediaGalleryEntries"
-          v-bind:key="index"
-          v-show="productImage.mediaType === 'image'"
-          class="px-2"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto"
-              outlined
-              @click="setSelected(productImage.file,index)"
-              :color="hover ? blue : white"
-              v-bind:class="{ 'primary': index==selected }"
-              tile
-              v-if="productImage.file"
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl + productImage.file"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                :alt="productDetails.name" :title="productDetails.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="productDetails.mediaGalleryEntries.length==0">
-        <v-col
-          class="px-2"
-          cols="3"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto primary"
-              outlined
-              :color="hover ? blue : white"
-              tile
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl+''"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                :alt="productDetails.name" :title="productDetails.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
-        <v-row>
-          <v-col md="12" cols="12" class="pr-0 pt-0">
-            <p
-              class="d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
-            >{{ productDetails.name}}</p>
-            <p
-              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
-            >{{productDetails.sku}}</p>
-          </v-col>
-        </v-row>
-        <p
-          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
-        >sku {{productDetails.sku}}</p>
-        <p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
-        <div v-show="!inProgress">
-        <div v-if="!fetchInProgress">
-          <v-form ref="giftCardForm" v-model="valid">
-            <v-row class>
-              <v-col cols="12" sm="6" md="6" class="pb-0">
-                <p class="body body-font mb-0 ls-n01 fontcolor-black-darken">Amount</p>
-                <div v-if="getCustomAttributeLable(productDetails.customAttribute,'giftcard_amounts')"
-                >
-                <div v-show="!userAuth">
-                  <v-hover v-slot:default="{ hover }">
-                <v-select
-                    :items="giftPriceOptions()"
-                    class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                    dense
-                    attach
-                    flat
-                    solo
-                    item-text="value"
-                    item-value="value"
-                    single-line
-                    v-model="giftCardAmtGuest"
-                    ref="selectedGiftCardAmt"
-                    background-color="transparent"
-                    append-icon="mdi-plus"
-                    :rules="!userAuth? priceRules:[]"
-                    label="Choose an Amount"
-                    required
-                    :class="giftCardAmtGuest ?  '':'v-select-error-border'"
-                  >
-                    <template v-slot:selection="data">
-                      <span
-                        class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                        :class="hover || !isActive?'primary--text':'black--text'"
-                      >${{data.item.websiteValue}}</span>
-                    </template>
-                    <template v-slot:item="data">
-                      <template>
-                        <v-list-item-content @click="isActive = true">
-                          <v-list-item-title
-                            class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                          >${{data.item.websiteValue}}</v-list-item-title>
-                        </v-list-item-content>
-                      </template>
-                    </template>
-                  </v-select>
-                </v-hover>
-                </div>
-                <div v-show="userAuth">
-                  <v-hover v-slot:default="{ hover }">
-                <v-select
-                    :items="giftPriceOptions()"
-                    class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button  select-change-icon"
-                    dense
-                    attach
-                    flat
-                    solo
-                    item-text="value"
-                    item-value="value"
-                    single-line
-                    v-model="giftCardAmt"
-                    ref="selectedGiftCardAmt"
-                    background-color="transparent"
-                    append-icon="mdi-plus"
-                    :rules="userAuth? priceRules:[]"
-                    label="Choose an Amount"
-                    required
-                    :class=" giftCardAmt ?  '':'v-select-error-border'"
-                  >
-                    <template v-slot:selection="data">
-                      <span
-                        class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                        :class="hover || !isActive?'primary--text':'black--text'"
-                      >${{data.item.websiteValue}}</span>
-                    </template>
-                    <template v-slot:item="data">
-                      <template>
-                        <v-list-item-content @click="isActive = true">
-                          <v-list-item-title
-                            class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                          >${{data.item.websiteValue}}</v-list-item-title>
-                        </v-list-item-content>
-                      </template>
-                    </template>
-                  </v-select>
-                </v-hover>
-                </div>
-                </div>
-                <div v-else>
-                  <h2 class="body-font mb-0 ls-n01 fontcolor-black-darken">${{productDetails.price}}</h2>
-                </div> 
-              </v-col>
-              <v-col align="right" justify="right" cols="12" sm="6" md="6" class="pb-0">
-                <p class="body body-font ls-n01 mb-0 fontcolor-black-darken text-left">Qty</p>
-                <div
-                  v-if="getCustomAttributeLable(productDetails.customAttribute,'qty_price') && productDetails.status=='1' "
-                >
-                  <v-overflow-btn
-                    right
-                    class="body title-color-black py-0 mt-0 overflow-button"
-                    :items="JSON.parse(getCustomAttributeLable(productDetails.customAttribute,'qty_price'))"
-                    label="30 ($110.00)"
-                    segmented
-                    dense
-                    target="#dropdown-example"
-                    item-text="price"
-                    item-value="qty"
-                    single-line
-                    elevation="0"
-                    v-model="selectedQty"
-                  >
-                    <template v-slot:selection="data">
-                      <span>{{data.item.qty}} ($ {{ data.item.price }} )</span>
-                    </template>
-                    <template v-slot:item="data">
-                      <template>
-                        <v-list-item-content>
-                          <v-list-item-title
-                            class="text-uppercase"
-                          >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
-                        </v-list-item-content>
-                      </template>
-                    </template>
-                  </v-overflow-btn>
-                </div>
-                <div v-else-if="productDetails.status=='1'">
-                  <!--<v-overflow-btn
-                    v-model="giftCardAmt"
-                    right
-                    dense
-                    class="body title-color-black py-0 mt-0 overflow-button"
-                    :items="numberOptions"
-                    elevation="0"
-                    label="Select Quantity"
-                    :rules="[v => !!v || 'Please select the Quantity']"
-                  ></v-overflow-btn>-->
-                  <v-select
-                    :items="numberOptions"
-                    class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                    dense
-                    attach
-                    flat
-                    solo
-                    v-model="selectedQty"
-                    background-color="transparent"
-                    ref="selectedQty4"
-                    append-icon="mdi-plus"
-                    :rules="[v => !!v || 'Please select the Quantity']"
-                  ></v-select>
-                </div>
-              </v-col>
-            </v-row>
-            <v-row v-show="!userAuth">
-              <v-col cols="12" class="pb-1">
-                <v-text-field
-                  label="Sender Name"
-                  ref="fullName"
-                  v-model="senderNameGuest"
-                  :rules="!userAuth? textRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-                <v-text-field
-                  label="Sender Email"
-                  ref="email"
-                  type="email"
-                  id="senderEmail"
-                  v-model="senderEmailGuest"
-                  :rules="!userAuth? emailRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-              </v-col>
-
-              <v-col cols="12" class="py-0">
-                <v-text-field
-                  label="Recipient Name"
-                  ref="fullName"
-                  v-model="recipientNameGuest"
-                  :rules="!userAuth? textRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-
-                <v-text-field
-                  label="Recipient Email"
-                  ref="email"
-                  v-model="recipientEmailGuest"
-                  type="email"
-                  id="recipientEmail"
-                  :rules="!userAuth? emailRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" class="py-0">
-                <v-textarea outlined auto-grow rows="5" v-model="senderMessageGuest"></v-textarea>
-              </v-col>
-            </v-row>
-            <v-row v-show="userAuth">
-              <v-col cols="12" class="pb-1">
-                <v-text-field
-                  label="Sender Name"
-                  ref="fullName"
-                  v-model="firstname"
-                  :rules="userAuth? textRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-                <v-text-field
-                  label="Sender Email"
-                  ref="email"
-                  type="email"
-                  id="senderEmail"
-                  v-model="email"
-                  :rules="userAuth? emailRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" class="py-0">
-                <v-text-field
-                  label="Recipient Name"
-                  ref="fullName"
-                  v-model="recipientName"
-                  :rules="userAuth? textRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-
-                <v-text-field
-                  label="Recipient Email"
-                  ref="email"
-                  v-model="recipientEmail"
-                  type="email"
-                  id="recipientEmail"
-                  :rules="userAuth? emailRules:[]"
-                  outlined
-                  required
-                  dense
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" class="py-0">
-                <v-textarea outlined auto-grow rows="5" v-model="senderMessage"></v-textarea>
-              </v-col>
-            </v-row>
-          </v-form>
-          <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
-        </div>
-        <div v-else class="text-center">
-          <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-        </div>
-        </div>
-    <v-row v-if="!itemId">
-          <v-col
-            class="pt-4"
-            v-if="productDetails.status=='1' && stockFlag "
-          >
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                depressed
-                @click="addToGiftCart(productDetails.sku,productDetails)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  block
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-                <span v-if="!inProgress">ADD TO CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-           
-          <v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
-            <v-btn
-              block
-              x-large
-              class="text-uppercase ls-0 body pb-1 white--text"
-              tile
-              color="#97ABB4"
-              depressed
-            >UNAVAILABLE</v-btn>
-          </v-col>
-          </v-row>
-         <v-row>
-          <v-col class="pt-4" v-if="itemId">
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                depressed
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                @click="updateToGiftCart(productDetails.name, productDetails.sku)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-                <span v-if="!inProgress">UPDATE CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col class="pt-5">
-            <v-tabs color="black" class="product-overview-tabs">
-              <v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
-                 <!-- <li>Standard shipping available</li>
-                  <li>Expedited shipping available</li>
-                  <li>Ships from Cohoes, NY</li>-->
-                </ul>
-              </v-tab-item>
-            </v-tabs>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
-  </v-container>
-</template>
-<script>
-//const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
-import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
-import { getLable ,customAttributeValue,setCategoryNameInLocal} from "@/services/util.service";
-import { createHelpers } from "vuex-map-fields";
-//import * as easings from "vuetify/es5/services/goto/easing-patterns";
-
-const { mapFields: guest } = createHelpers({
-  getterType: "cartProduct/getField",
-  mutationType: "cartProduct/updateField"
-});
-const { mapFields: customer } = createHelpers({
-  getterType: "userCartProduct/getField",
-  mutationType: "userCartProduct/updateField"
-});
-const { mapFields: customerInfo } = createHelpers({
-  getterType: "accountOne/getField",
-  mutationType: "accountOne/updateField"
-});
-export default {
-  name: "GiftCardDetailsComponent",
-  props: ["productDetails","stockFlag","categoryId"],
-  components: { SnackbarComponent },
-  data: () => ({
-    productDefaultImage:require('@/assets/defaultProduct.jpg'),
-    isAmtActive: true,
-    isQtyActive: true,
-    isActive: true,
-    easings: Object.keys(easings),
-    snackbar: {
-      show: false,
-      message: null,
-      color: null,
-      timeout: 0
-    },
-    textRules: [
-      v => !!v || "This field is required",
-      v => (v && v.length >= 3) || "This field must be at least 3 characters"
-    ],
-    priceRules: [
-      v => !!v || "This field is required"
-    ],
-     emailRules: [
-      v => !!v || "Email Id is required",
-      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
-    ],
-    valid: true,
-    selectedQty: "",
-    blue: "primary",
-    white: "white",
-    errorMessage: "",
-    selected: "",
-    imagepath: "",
-    fav: true,
-    menu: false,
-    message: false,
-    hints: true,
-  }),
-/* eslint-disable no-alert, no-console ,  no-debugger */
-  computed: {
-    ...guest([
-      "giftCartDetailsGuest",
-      "giftCartDetailsGuest.senderNameGuest",
-      "giftCartDetailsGuest.senderEmailGuest",
-      "giftCartDetailsGuest.recipientNameGuest",
-      "giftCartDetailsGuest.recipientEmailGuest",
-      "giftCartDetailsGuest.senderMessageGuest",
-      //"giftCartDetails.giftCardQty",
-       "giftCartDetailsGuest.giftCardAmtGuest"
-    ]),
-    ...customer([
-      "giftCartDetails",
-      // "giftCartDetails.senderName",
-      //"giftCartDetails.senderEmail",
-      "giftCartDetails.recipientName",
-      "giftCartDetails.recipientEmail",
-      "giftCartDetails.senderMessage",
-      //"giftCartDetails.giftCardQty",
-       "giftCartDetails.giftCardAmt"
-    ]),
-    ...customerInfo(["one", "one.firstname", "one.email"]),
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-
-    itemId: function() {
-      this.pageScrollUp();
-      return this.$route.query.itemId;
-    },
-    qty: function() {
-      this.getMessageDetails();
-      return this.$route.query.qty;
-    },
-
-    amtOptions: function() {
-      if (this.productDetails.customAttribute) {
-        let minSalesQty = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "additional_feature_1"
-        );
-        let qtyIncrements = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_qty_increments"
-        );
-        minSalesQty = Number(minSalesQty) ? 50 : 50;
-        qtyIncrements = Number(qtyIncrements) ? 25 : 25;
-
-        let nums = [];
-        nums[0] = minSalesQty;
-        for (let i = 1; minSalesQty <= 750; i++) {
-          minSalesQty = minSalesQty + qtyIncrements;
-          nums[i] = minSalesQty;
-        }
-        if (nums.length > 0) return nums;
-        else return "";
-
-        // return minSalesQty + "   " + qtyIncrements;
-      } else {
-        return "";
-      }
-    },
-    numberOptions: function() {
-      let vm = this;
-      if (this.productDetails.customAttribute) {
-        let minSalesQty = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_min_sales_qty"
-        );
-        let qtyIncrements = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_qty_increments"
-        );
-        minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
-        qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;
-
-        let nums = [];
-        nums[0] = minSalesQty;
-        if (this.qty) {
-          vm.selectedQty = Number(this.qty);
-        } else {
-          vm.selectedQty = minSalesQty;
-        }
-        for (let i = 1; i <= 98; i++) {
-          minSalesQty = minSalesQty + qtyIncrements;
-          nums[i] = minSalesQty;
-        }
-        if (nums.length > 0) return nums;
-        else return "";
-
-        // return minSalesQty + "   " + qtyIncrements;
-      } else {
-        return "";
-      }
-    },
-    userAuth: function() {
-      return this.$store.state.auth.userAuth;
-    },
-    
-    inProgress: function() {
-      if (this.userAuth) {
-        return this.$store.state.userCartProduct.inProgress;
-      } else {
-        return this.$store.state.cartProduct.inProgress;
-      }
-    },
-    fetchInProgress: function() {
-      if (this.userAuth) {
-        return this.$store.state.userCartProduct.fetchInProgress;
-      } else {
-        return this.$store.state.cartProduct.fetchInProgress;
-      }
-    }
-  },
-  watch: {
-    productDetails() {
-      this.imagepath = this.productDetails.mediaGalleryEntries?this.productDetails.mediaGalleryEntries[0].file:"";
-    }
-  },
-  methods: {
-      getCustomAttributeValue(customAttributes, attributeCode) {
-      return customAttributeValue(customAttributes, attributeCode);
-    },
-     setAltImg() { 
-      event.target.src =this.productDefaultImage
-    },
-    giftPriceOptions() {
-      let vm = this;
-      let list = vm.getCustomAttributeLable(this.productDetails.customAttribute,'giftcard_amounts');
-      return list;
-    },
-    addToGiftCart(sku,productDetails) {
-      if (this.$refs.giftCardForm.validate()) {
-       let vm =this;
-        let qtyNew=this.selectedQty;
-        if (this.userAuth) {
-          this.$store
-            .dispatch("userCartProduct/addToGiftCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              senderName: this.one.firstname,
-              senderEmail: this.one.email
-            })
-            .then((res) => {
-              // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-               if(this.categoryId)
-              {
-                setCategoryNameInLocal(this.categoryId,res);
-              }
-              this.$store.dispatch("userCartProduct/cartProductList");
-              //this.$store.dispatch("userCartProduct/productTotalAmt");
-              this.$store.dispatch("userCartProduct/cartDrawer", true);
-              this.snackbar = {
-                message: "Product Added Successfully",
-                color: "success",
-                show: true,
-                timeout: 2000
-              };
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 2000
-              };
-            });
-        } else {
-          this.$store
-            .dispatch("cartProduct/addToGiftCart", {
-              sku: sku,
-              qty: this.selectedQty
-            })
-            .then((res) => {
-              // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-               if(this.categoryId)
-              {
-                setCategoryNameInLocal(this.categoryId,res);
-              }
-              this.snackbar = {
-                message: "Product Added Successfully",
-                color: "success",
-                show: true,
-                timeout: 2000
-              };
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 2000
-              };
-            });
-        }
-      }
-    },
-  async  updateToGiftCart(productName,sku) {
-      if (this.selectedQty) {
-        this.errorMessage = "";
-        if (this.userAuth) {
-          try{
-            await this.$store.dispatch("userCartProduct/updateToGiftCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              itemId: this.itemId,
-              senderName: this.one.firstname,
-              senderEmail: this.one.email
-            });
-            this.snackbar = {
-                message: "Product Updated Successfully",
-                color: "success",
-                show: true,
-                timeout: 3000
-              };
-          }
-          catch(error){
-            this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 3000
-              };
-          }      
-        } 
-        if(this.$route.name == productName)
-            this.$router.push({
-              name: productName,
-              query: { "qty": this.selectedQty, "itemId": this.itemId }
-            }).catch(error => {
-            error;
-        });
-      } else {
-        this.errorMessage = "Please Select Quantity";
-      }
-    },
-    getCustomAttributeLable(customAttributes, attributeCode) {
-      return getLable(customAttributes, attributeCode);
-    },
-    setSelected(part, index) {
-      this.imagepath = part;
-      this.selected = index;
-    },
-    pageScrollUp() {
-     /* if (this.$refs.divOne)
-        this.$vuetify.goTo(this.$refs.divOne, {
-          duration: 300,
-          easing: "easeInOutCubic"
-        });*/
-    },
-   async getMessageDetails() {
-      if (this.itemId) {
-        if (this.userAuth) {
-           await this.$store.dispatch("userCartProduct/cartProductList");
-           await this.$store.dispatch("userCartProduct/fetchGiftMessage", {
-            itemId: this.itemId
-          });
-        } 
-      }
-    }
-  },
-  mounted() {
-    this.pageScrollUp();
-  },
-  created() {
-  }
-};
-</script>
-<style lang="scss">
-/*.overflow-button .v-select__slot {
-  border-left: 1px solid #dcdddd !important;
-  border-right: 1px solid #dcdddd !important;
-}*/
-.product-overview-tabs .v-tabs-slider-wrapper {
-  color: #2850da;
-  height: 4px !important;
-}
-
-.product-overview-tabs .v-tabs-items {
-  background-color: transparent !important;
-}
-.product-overview-tabs .v-tabs-bar {
-  background-color: transparent !important;
-  height: 35px !important;
-}
-.product-overview-tabs1 .v-slide-group__prev {
-  display: none !important;
-}
-.v-text-field .v-input__control {
-  border-radius: unset !important;
-  height: auto; //48px;
-}
-.productpage-select-button .v-input__control .v-input__slot {
-  border: thin solid #8b8b8b !important;
-}
-.productpage-select-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
-  color: #2850da !important;
-}
-.productpage-select-button .v-input__append-inner .v-input__icon .v-icon {
-  font-size:20px !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-/*.productpage-select-button.v-text-field.v-text-field--solo
-  .v-input__append-inner{
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 7px;
-  border-left: 1px solid #8b8b8b;
-  padding-left: 10px;
-  height: 37px;
-}*/
-.productpage-select-button.v-text-field.v-text-field--solo.v-select--is-menu-active .v-input__append-inner{
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 7px;
-  border-left: 1px solid #2850da;
-  padding-left: 12px;
-  height: 37px;
-}
-.productpage-select-button .v-input__control .v-select__slot .v-select__selections{
-  justify-content: center;
-}
-.productpage-select-button.v-select.v-text-field input{
-   display:none;
-}
-.productpage-select-button .v-input__control .v-input__slot{
-  padding-left:0px !important;
-}
-.v-select-error-border.error--text .v-input__control .v-input__slot
-{
-   border: 2px solid #ff5252 !important;
-}
-</style>
-<style src="./ProductDetailComponent.scss" lang="scss" scoped/>
diff --git a/src/components/retailer/product-detail/ProductDetailComponent.scss b/src/components/retailer/product-detail/ProductDetailComponent.scss
deleted file mode 100644
index 4aa6756..0000000
--- a/src/components/retailer/product-detail/ProductDetailComponent.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-  .productpage-icon{
-    color:#1D1D1D;
-    position: relative;
-   top:-3px;
-  }
-  .productpage-button.theme--light.v-btn:hover:before {
-    opacity:0 !important;
-}
-.productpage-select-button {
-  & .v-select__slot {
-    outline: 2px !important;
-    border-bottom: 0px !important;
-  }
-  &
-    .v-application--is-ltr
-    .v-overflow-btn
-    .v-select__selection--comma:first-child {
-    margin-left: 4px !important;
-  }
-  &.v-overflow-btn .v-input__append-inner {
-    max-width: 30px !important;
-    margin-top: -4px !important;
-  }
-  & .v-menu.v-menu__content{
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-}
-.v-menu.v-menu__content {
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-.productpage-button.v-btn:before{
-    background-color: transparent !important;
-}
-.productpage-button:active{
-  background-color: transparent !important;
-}
-.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
-{
- background-color: transparent !important; 
-}
-
-.select-change-icon.v-select--is-menu-active .mdi-plus::before{
-  content: "\F0374" !important;
-}
-.select-change-icon .v-menu__content {
-  box-shadow: none !important;
-  border-left: 1px solid #2850da !important;
-  outline: none !important;
-  border-right: 1px solid #2850da !important;
-  border-bottom: 1px solid #2850da !important;
-  border-radius: 0px !important;
-  background-color:#ffffff;
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ProductDetailComponent.vue b/src/components/retailer/product-detail/ProductDetailComponent.vue
deleted file mode 100644
index 364740c..0000000
--- a/src/components/retailer/product-detail/ProductDetailComponent.vue
+++ /dev/null
@@ -1,1016 +0,0 @@
-<template>
-  <v-container class="white">
-    <v-row class="mt-12" justify="center" v-if="fetchInProgress || updateProgress">
-      <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-    </v-row>
-    <v-row class="mb-md-10" v-else-if="!fetchErrorMessage">
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-if="productDetails.mediaGalleryEntries.length">
-        <div v-for="(productImage,index) in productDetails.mediaGalleryEntries" v-bind:key="index">
-          <div v-if="productImage.mediaType === 'image'">
-            <v-col class="pb-2 pt-0 pl-0 pr-0">
-              <v-hover v-slot:default="{ hover }">
-                <v-card
-                  outlined
-                  @click="setSelected(productImage.file,index)"
-                  :color="hover ? blue : white"
-                  v-bind:class="{ 'primary': index==selected }"
-                  tile
-                  v-if="productImage.file"
-                >
-                  <v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-                </v-card>
-              </v-hover>
-            </v-col>
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="productDetails.mediaGalleryEntries.length==0">
-        <v-col class="pb-2 pt-0 px-0">
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              outlined
-              :color="hover ? blue : white"
-              class="primary"
-              tile
-            >
-              <v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-col>
-      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-if="imagepath">
-        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
-          <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
-        </v-col>
-        <v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name" ></v-img>
-      </v-col>
-       <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else>
-        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
-          <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
-        </v-col>
-        <v-img :src="imageBasePathUrl + (this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:'')"  @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
-      </v-col>
-      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="productDetails.mediaGalleryEntries.length">
-        <v-col
-          v-for="(productImage,index) in productDetails.mediaGalleryEntries"
-          v-bind:key="index"
-          v-show="productImage.mediaType === 'image'"
-          class="px-2"
-          cols="3"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto"
-              outlined
-              @click="setSelected(productImage.file,index)"
-              :color="hover ? blue : white"
-              v-bind:class="{ 'primary': index==selected }"
-              tile
-              v-if="productImage.file"
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl + productImage.file"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                :alt="productImage.name" :title="productImage.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="productDetails.mediaGalleryEntries.length==0">
-        <v-col
-          class="px-2"
-          cols="3"
-        >
-          <v-hover v-slot:default="{ hover }">
-            <v-card
-              max-width="70"
-              max-height="70"
-              class="mx-auto primary"
-              outlined
-              :color="hover ? blue : white"
-              tile
-            >
-              <v-img
-                v-bind:src="imageBasePathUrl+''"
-                max-width="70"
-                max-height="70"
-                @error="setAltImg()"
-                 :alt="productDetails.name" :title="productDetails.name"
-              ></v-img>
-            </v-card>
-          </v-hover>
-        </v-col>
-      </v-row>
-      <!-- <v-progress-circular :size="60" color="primary" indeterminate v-if="fetchInProgress"></v-progress-circular>-->
-      <v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
-        <v-row>
-          <v-col md="12" cols="12" class="pr-0 pt-0">
-            <h1
-              class="font-weight-300 d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
-            >{{ productDetails.name}}</h1>
-            <p
-              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
-            >{{productDetails.sku}}</p>
-          </v-col>
-          <!--<v-col md="1" cols="2" align="right" justify="right" class="pl-0 pt-0">
-            <v-icon light class="pt-1 d-none d-sm-block">mdi-heart-outline</v-icon>
-            <v-icon light class="d-block d-sm-none productpage-icon">mdi-heart-outline</v-icon>
-          </v-col>-->
-        </v-row>
-        <p
-          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
-        >sku {{productDetails.sku}}</p>
-        <p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
-        <v-row class="pt-3">
-          <v-col cols="6" sm="12" md="12" lg="5" class="pr-0 pb-0">
-            <p
-              class="body-font mb-0 caption ls-n008 fontcolor-grey-darken pb-1"
-            >{{productDetails.unitDescription}}</p>
-            <!-- <p
-              class="body title-color-black"
-            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p> (old code )-->
-            <p
-              v-if="getCustomAttributeValue(productDetails.customAttribute,'lowest_price')"
-              class="body title-color-black"
-            >From ${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'lowest_price'), true)}} {{ productDetails.uom}}</p>
-            <div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
-              <div v-if="getCustomAttributeValue(productDetails.customAttribute,'special_price') ">
-                <s>${{priceFormatter( productDetails.price, true)}}</s> &nbsp;
-                <span
-                  class="red--text mb-0"
-                >${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'special_price'), true)}}</span>
-                / {{ productDetails.uom}}
-              </div>
-              <p
-                v-else
-                class="body title-color-black"
-              >${{priceFormatter(productDetails.price, true)}} / {{ productDetails.uom}}</p>
-            </div>
-
-            <!-- <p
-              v-else
-              class="body title-color-black"
-            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p>-->
-          </v-col>
-          <v-col
-            align="right"
-            justify="right"
-            cols="6"
-            sm="12"
-            md="12"
-            lg="7"
-            class="d-none d-sm-block pb-0"
-          >
-            <div
-              v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
-            >
-              <v-hover v-slot:default="{ hover }">
-                <v-select
-                  :items="qtyPriceOptions"
-                  class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                  dense
-                  attach
-                  flat
-                  solo
-                  item-text="price"
-                  item-value="qty"
-                  single-line
-                  v-model="selectedQty"
-                  ref="selectedQty1"
-                  background-color="transparent"
-                  append-icon="mdi-plus"
-                >
-                  <template v-slot:selection="data">
-                    <span
-                      class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                      :class="hover || !isActive?'primary--text':'black--text'"
-                    >{{data.item.qty}} ($ {{ data.item.price }} )</span>
-                  </template>
-                  <template v-slot:item="data">
-                    <template>
-                      <v-list-item-content @click="isActive = true">
-                        <v-list-item-title
-                          class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                        >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
-                      </v-list-item-content>
-                    </template>
-                  </template>
-                </v-select>
-              </v-hover>
-            </div>
-            <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
-              <v-select
-                :items="numberOptions"
-                class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                dense
-                attach
-                flat
-                solo
-                v-model="selectedQty"
-                ref="selectedQty2"
-                background-color="transparent"
-                append-icon="mdi-plus"
-              ></v-select>
-            </div>
-          </v-col>
-
-          <v-col align="right" justify="right" cols="6" class="d-block d-sm-none pl-4 pb-0">
-            <div
-              v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
-            >
-              <v-hover v-slot:default="{ hover }">
-                <v-select
-                  :items="qtyPriceOptions"
-                  class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                  dense
-                  attach
-                  flat
-                  solo
-                  item-text="price"
-                  item-value="qty"
-                  single-line
-                  v-model="selectedQty"
-                  ref="selectedQty3"
-                  background-color="transparent"
-                  append-icon="mdi-plus"
-                >
-                  <template v-slot:selection="data">
-                    <span
-                      class="fontsize-14 d-block text-truncate ml-1 line-height-21 ls-n009 regular-font font-weight-400"
-                      :class="hover || !isActive?'primary--text':'black--text'"
-                    >{{data.item.qty}} ($ {{ data.item.price }} )</span>
-                  </template>
-                  <template v-slot:item="data">
-                    <template>
-                      <v-list-item-content @click="isActive = true">
-                        <v-list-item-title
-                          class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
-                        >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
-                      </v-list-item-content>
-                    </template>
-                  </template>
-                </v-select>
-              </v-hover>
-            </div>
-            <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
-              <v-hover v-slot:default="{ hover }">
-                <v-select
-                  :items="numberOptions"
-                  class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
-                  dense
-                  attach
-                  flat
-                  solo
-                  outlined
-                  :class="hover?'primary--text':'black--text'"
-                  v-model="selectedQty"
-                  background-color="transparent"
-                  ref="selectedQty4"
-                  append-icon="mdi-plus"
-                ></v-select>
-              </v-hover>
-            </div>
-          </v-col>
-        </v-row>
-        <!--<v-row>
-          <v-col cols="auto" class="pr-0 pt-0">
-            <div v-for="(colors,index) in productDetails.customAttribute" v-bind:key="index">
-              <div v-if="colors.attributeCode === 'color'">
-                <v-btn-toggle
-                  v-for="(color,index) in colors.value"
-                  v-bind:key="index"
-                  v-model="selected"
-                  :color="color"
-                  group
-                  rounded
-                >
-                  <v-btn
-                    elevation="0"
-                    class="ml-0 mr-2"
-                    @click="setValue(color)"
-                    :color="color"
-                    :value="color"
-                    small
-                  ></v-btn>
-                </v-btn-toggle>
-              </div>
-            </div>
-          </v-col>
-        </v-row>-->
-        <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
-        <p class="py-0 my-0 red--text">{{ errorMessage }}</p>
-        <v-row v-if="!itemId">
-          <v-col
-            class="pt-4"
-            v-if="productDetails.status=='1' && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0' ) && stockFlag"
-          >
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                depressed
-                @click="addToCart(productDetails.sku,productDetails)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  block
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-               <span v-if="!inProgress">ADD TO CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-          <v-col
-            v-else-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1')  && productDetails.status=='1'&& qtyPriceOptions.length > 0 && stockFlag"
-          >
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                block
-                x-large
-                class="text-uppercase ls-0 body pb-1 productpage-button"
-                :outlined="!hover"
-                :color="hover?'primary':'white'"
-                :class="hover?'white--text':'primary--text'"
-                tile
-                depressed
-                @click="gotoPersonalize(productDetails)"
-              >PERSONALIZE</v-btn>
-            </v-hover>
-          </v-col>
-          <v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
-            <v-btn
-              block
-              x-large
-              class="text-uppercase ls-0 body pb-1 white--text"
-              tile
-              color="#97ABB4"
-              depressed
-            >UNAVAILABLE</v-btn>
-          </v-col>
-          </v-row>
-
-          <v-row v-else> 
-          <v-col
-            class="pt-4"
-            v-if="itemId && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')"
-          >
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                depressed
-                :outlined="!inProgress ? hover:false"
-                :color="hover?'white':'primary'"
-                :class="hover?'primary--text':'white--text'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                @click="updateToCart(productDetails.name,productDetails.sku)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-                <span v-if="!inProgress">UPDATE CART</span>
-              </v-btn>
-            </v-hover>
-          </v-col>
-        </v-row>
-        <v-row>
-          
-        </v-row>
-        <v-row>
-          <v-col class="pt-5">
-            <v-tabs color="black" class="product-overview-tabs">
-              <v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
-                </ul>
-              </v-tab-item>
-              <v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
-              <v-tab-item>
-                <ul class="py-3 fontsize-16 body-font ls-n008">
-                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
-                  <li>Standard shipping available</li>
-                  <li>Expedited shipping available</li>
-                  <li>Ships from Cohoes, NY</li>
-                </ul>
-              </v-tab-item>
-            </v-tabs>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-    <v-row v-else>
-      <v-col class="text-center">
-        <v-alert type="error" text>{{fetchErrorMessage}}</v-alert>
-      </v-col>
-    </v-row>
-    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
-  </v-container>
-</template>
-<script>
-const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
-const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
-//import * as easings from "vuetify/es5/services/goto/easing-patterns";
-import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
-import { priceFormatter, getLable, customAttributeValue , /*criteoForCurrentProduct, */setCategoryNameInLocal} from "@/services/util.service";
-//import { getAuthUser } from "@/services/auth";
-/* eslint-disable no-alert, no-console ,  no-debugger */
-export default {
-  name: "ProductDetailsComponent",
-  props: ["productDetails","stockFlag","categoryId"],
-  components: { SnackbarComponent },
-  data: () => ({
-    productDefaultImage:require('@/assets/defaultProduct.jpg'),
-    updateProgress: "",
-    dropDownIcon: "mdi mdi-plus",
-    iconColor: "black--text",
-    isActive: true,
-    easings: Object.keys(easings),
-    snackbar: {
-      show: false,
-      message: null,
-      color: null,
-      timeout: 0
-    },
-    selectedQty: "",
-    blue: "primary",
-    white: "white",
-    errorMessage: "",
-    itemNumber: "193C",
-    quantity: "25",
-    savFromKey: "Ub07GxNhS3yyoDfO",
-    ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
-    selected: "",
-    imagepath: "",
-    fav: true,
-    menu: false,
-    message: false,
-    hints: true,
-    priceOptions: [
-      { text: "31 ($110.00)", callback: () => "31 ($110.00)" },
-      { text: "32 ($110.00)", callback: () => "32 ($110.00)" },
-      { text: "33 ($110.00)", callback: () => "33 ($110.00)" }
-    ],
-    priceFormatter: priceFormatter,
-    /*numberOptions: [
-      { qty: "1 ", callback: () => "1" },
-      { qty: "2", callback: () => "2" },
-      { qty: "3", callback: () => "3" }
-    ]*/
-  }),
-  computed: {
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-    /*  productAttributes() {
-      return this.$store.state.productList.attributeList;
-    },*/
-    sku: function() {
-      return this.$route.meta.sku ? this.$route.meta.sku : this.$route.params.sku;
-    },
-    itemId: function() {
-      this.pageScrollUp();
-      return this.$route.query.itemId;
-    },
-    qty: function() {
-      return this.$route.query.qty;
-    },
-    /*numberOptions: function() {
-      let nums = [];
-      for (let i = 0; i <= 98; i++) {
-        nums[i] = i + 1;
-      }
-      if (nums.length > 0) return nums;
-      else return "";
-    },*/
-    qtyPriceOptions() {
-      let vm = this;
-      let qtyPriceArray = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "qty_price"
-        );
-      if(qtyPriceArray){
-        let list = JSON.parse(
-            this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "qty_price"
-        )
-        );
-        if (this.qty) {
-          vm.selectedQty = this.qty.toString();
-        } else {
-          vm.selectedQty = list[0].qty;
-        }
-        vm.validPersonalisedProduct = true;
-        return list;
-      }else{
-        vm.validPersonalisedProduct = false;
-      }
-      return [];
-    },
-    numberOptions: function() {
-      let vm = this;
-      if (this.productDetails.customAttribute) {
-        let minSalesQty = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_min_sales_qty"
-        );
-        let qtyIncrements = this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "ba_qty_increments"
-        );
-        minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
-        qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;
-
-        let nums = [];
-        nums[0] = minSalesQty;
-        if (this.qty) {
-          vm.selectedQty = Number(this.qty);
-        } else {
-          vm.selectedQty = minSalesQty;
-        }
-        for (let i = 1; i <= 98; i++) {
-          minSalesQty = minSalesQty + qtyIncrements;
-          nums[i] = minSalesQty;
-        }
-        if (nums.length > 0) return nums;
-        else return "";
-
-        // return minSalesQty + "   " + qtyIncrements;
-      } else {
-        return "";
-      }
-    },
-    userAuth: function() {
-      return this.$store.state.auth.userAuth;
-    },
-    
-    inProgress: function() {
-      if (this.userAuth) {
-        return this.$store.state.userCartProduct.inProgress;
-      } else {
-        return this.$store.state.cartProduct.inProgress;
-      }
-    },
-    fetchInProgress: function() {
-      return this.$store.state.productOne.fetchInProgress;
-    },
-    fetchErrorMessage: function() {
-      return this.$store.state.productOne.errorMessage;
-    }
-  },
-  watch: {
-    productDetails() {
-      this.imagepath = this.productDetails.mediaGalleryEntries && this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:"";
-     // criteoForCurrentProduct(this.productDetails.id);
-    }
-    /* qtyPriceOptions()
-    {
-      if(this.qtyPriceOptions.length > 0)
-      this.selectedQty=this.qtyPriceOptions[0];
-    }*/
-  },
-  methods: {
-    setAltImg() {
-      event.target.src =this.productDefaultImage
-    },
-    getCustomAttributeValue(customAttributes, attributeCode) {
-      return customAttributeValue(customAttributes, attributeCode);
-    },
-    addToCart(sku,productDetails) {
-      let vm =this;
-      let qtyNew=this.selectedQty;
-      if (this.selectedQty) {
-        this.errorMessage = "";
-        if (this.userAuth) {
-          this.$store
-            .dispatch("userCartProduct/addToCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              ccid: null,
-              price: null,
-              personalizeDetails: null
-            })
-            .then((res) => {
-            // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-             if(this.categoryId)
-             {
-              setCategoryNameInLocal(this.categoryId,res);
-             }
-              
-              this.$store.dispatch("userCartProduct/cartProductList");
-             // this.$store.dispatch("userCartProduct/productTotalAmt");
-              this.$store.dispatch("userCartProduct/cartDrawer", true);
-              this.snackbar = {
-                message: "Product Added Successfully",
-                color: "success",
-                show: true,
-                timeout: 2000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 2000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            });
-        } else {
-          this.$store
-            .dispatch("cartProduct/addToCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              ccid: null,
-              price: null,
-              personalizeDetails: null
-            })
-            .then((res) => {
-             // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
-              if(this.categoryId)
-              {
-                setCategoryNameInLocal(this.categoryId,res);
-              }
-              this.snackbar = {
-                message: "Product Added Successfully",
-                color: "success",
-                show: true,
-                timeout: 2000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 2000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            });
-        }
-      } else {
-        this.errorMessage = "Please Select Quantity";
-      }
-    },
-    updateToCart(productName,sku) {
-      if (this.selectedQty) {
-        this.errorMessage = "";
-        if (this.userAuth) {
-          this.$store
-            .dispatch("userCartProduct/updateToCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              itemId: this.itemId,
-              ccid: null,
-              price: null,
-              personalizeDetails: null
-            })
-            .then(() => {
-              this.snackbar = {
-                message: "Product Updated Successfully",
-                color: "success",
-                show: true,
-                timeout: 3000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 3000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            });
-        } else {
-          this.$store
-            .dispatch("cartProduct/updateToCart", {
-              sku: sku,
-              qty: this.selectedQty,
-              itemId: this.itemId,
-              ccid: null,
-              price: null,
-              personalizeDetails: null
-            })
-            .then(() => {
-              this.snackbar = {
-                message: "Product Updated Successfully",
-                color: "success",
-                show: true,
-                timeout: 3000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            })
-            .catch(error => {
-              this.snackbar = {
-                message: error.message,
-                color: "error",
-                show: true,
-                timeout: 3000
-              };
-              // setTimeout(() => {
-              //   this.$router.push({
-              //     name: "CategoryPage",
-              //     params: { category: "stationery" }
-              //   });
-              // }, 5000);
-            });
-        }
-        if(this.$route.name == productName)
-          this.$router.push({
-            name: productName,
-            query: { "qty": this.selectedQty, "itemId": this.itemId }
-          }).catch(error => {
-            error;
-        });
-      } else {
-        this.errorMessage = "Please Select Quantity";
-      }
-    },
-    /* getAttribute(customAttributes, attributeCode) {
-      return attribute(customAttributes, attributeCode, this.productAttributes);
-    },*/
-    getCustomAttributeLable(customAttributes, attributeCode) {
-      return getLable(customAttributes, attributeCode);
-    },
-
-    setValue(color) {
-      return (this.selected = color) && (this.errorMessage = "");
-    },
-    submit() {
-      if (this.selected !== "") {
-        return (this.selected = "") && (this.errorMessage = "");
-      } else {
-        this.errorMessage = "Please Select Color";
-      }
-    },
-    gotoPersonalize(productDetails) {      
-      // window.open(`${personlizeUrl}/product/${this.sku}`, "_self");
-      if (
-        this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "builder_version"
-        ) === "1.0" ||
-        this.getCustomAttributeLable(
-          this.productDetails.customAttribute,
-          "builder_version"
-        ) === ""
-      ) {
-      //  googleAanalyticsEvent('personalize_cc', 'ecommerce', productDetails);
-        this.$router.push({
-          name: "CraneConnection",
-          params: {
-            retailorId: retailorId,
-            quantity: this.selectedQty,
-            itemNumber: this.sku
-          }
-        });
-      } else {
-        let itemCode = this.itemId ? this.itemId : "new";
-      //googleAanalyticsEvent('personalize_builder', 'ecommerce', productDetails);        
-        if(this.categoryId)
-        {
-         window.open(
-          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}?categoryId=${this.categoryId}`,
-          "_self"
-        );
-        }
-        else
-        {
-         window.open(
-          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
-          "_self"
-        );
-        }
-        
-      }
-    },
-    setSelected(part, index) {
-      this.imagepath = part;
-      this.selected = index;
-    },
-    pageScrollUp() {
-     /* if (this.$refs.divOne)
-        this.$vuetify.goTo(this.$refs.divOne, {
-          duration: 300,
-          easing: "easeInOutCubic"
-        });*/
-      this.updateProgress = true;
-      setTimeout(() => {
-        this.updateProgress = false;
-      }, 3000);
-    }
-  },
-  mounted() {
-    this.pageScrollUp();
-  },
-  created() {
-    if (this.itemId) {
-      this.updateProgress = true;
-      setTimeout(() => {
-        this.updateProgress = false;
-      }, 3000);
-    }
-  }
-};
-</script>
-<style lang="scss">
-.overflow-button .v-select__slot {
-  border-left: 1px solid #dcdddd !important;
-  border-right: 1px solid #dcdddd !important;
-}
-.product-overview-tabs .v-tabs-slider-wrapper {
-  color: #2850da;
-  height: 4px !important;
-}
-.overflow-button.v-overflow-btn.v-input--is-focused .v-input__slot {
-  box-shadow: none !important;
-  border-top: 1px solid #dcdddd !important;
-  border-bottom: 1px solid #dcdddd !important;
-  border-radius: 0px !important;
-}
-/*.v-autocomplete__content.v-menu__content {
-  box-shadow: none !important;
-  border: 1px solid #dcdddd !important;
-}*/
-.v-menu__content {
-  box-shadow: none !important;
-  outline: 1px solid #2850da !important;
-  //border-right: 1px solid #2850da !important;
-  //border-bottom: 1px solid #2850da !important;
-  border-radius: 0px !important;
-}
-.product-overview-tabs .v-tabs-items {
-  background-color: transparent !important;
-}
-.product-overview-tabs .v-tabs-bar {
-  background-color: transparent !important;
-  height: 35px !important;
-}
-.product-overview-tabs .v-slide-group__prev {
-  display: none !important;
-}
-.v-text-field .v-input__control {
-  border-radius: unset !important;
-}
-.productpage-select-button .v-input__control .v-input__slot {
-  border: thin solid #8b8b8b !important;
-}
-.productpage-select-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
-  color: #2850da !important;
-}
-.productpage-select-button .v-input__append-inner .v-input__icon .v-icon {
-  font-size:20px !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-/*.productpage-select-button.v-text-field.v-text-field--solo
-  .v-input__append-inner{
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 7px;
-  border-left: 1px solid #8b8b8b;
-  padding-left: 10px;
-  height: 37px;
-}*/
-.productpage-select-button.v-text-field.v-text-field--solo.v-select--is-menu-active .v-input__append-inner{
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 7px;
-  border-left: 1px solid #2850da;
-  padding-left: 12px !important;
-  height: 37px;
-}
-.productpage-select-button .v-input__control .v-select__slot .v-select__selections{
-  justify-content: center;
-}
-.productpage-select-button.v-select.v-text-field input{
-   display:none;
-}
-.productpage-select-button .v-input__control .v-input__slot{
-  padding-left:0px !important;
-}
-//productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo.v-input__append-inner
-/*.productpage-select-button.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
-  > .v-input__control
-  > .v-input__slot {
-  padding: 0 !important;
-}
-.productpage-select-button .v-select__slot {
-  border: thin solid #dcdddd;
-  height: 48px;
-}
-.productpage-select-button .v-select__slot:hover {
-  border: thin solid #2850da !important;
-  height: 48px;
-}
-.productpage-select-button .v-input__icon.v-input__icon--append {
-  padding-right: 15px;
-}
-.productpage-select-button.v-select.v-input--dense .v-select__selection--comma {
-  margin-left: 10px;
-}
-.productpage-select-button.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  margin-top: 0;
-  border-left: 1px solid #dcdddd;
-  height: 48px;
-  padding-top: 12px;
-  padding-left: 15px;
-}*/
-</style>
-<style src="./ProductDetailComponent.scss" lang="scss"/>
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RecentlyViewedComponent.scss b/src/components/retailer/product-detail/RecentlyViewedComponent.scss
deleted file mode 100644
index 7c870f8..0000000
--- a/src/components/retailer/product-detail/RecentlyViewedComponent.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.hr-line-100px{
-    border: 0.0625rem solid #000;
-    width: 6.25rem;
-    content: "";
-    display: block;
-}
-.relatedproduct-fcolor-black-darken-2{
-    color: #1d1d1d;
-}
-
-.relatedproduct-black-lighten-2{
-  color:rgba(0,0,0,1);
-}
-.recentproducts-image-card .v-ripple__container{
-  opacity: 0 !important;
-}
-
-.recentproducts-image-card.v-card--link:focus:before {
-  opacity: 0 !important;
-}
-.recentproducts-images .vueperslides__track-inner{
-transform: translate3d(0%, 0px, 0px)!important;
-}
-.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
-  margin-left:10px !important;
-  color:#2850da;
-  padding-bottom:80px !important;
-}
-.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
-  margin-right:10px !important;
-  color:#2850da;
-  padding-bottom:80px !important;
-}
-@media screen and (max-width:764px) {
-  .recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
-    margin-left:-10px !important;
-    color:#2850da;
-    padding-bottom:80px !important;
-  }
-  .recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
-    margin-right:-10px !important;
-    color:#2850da;
-    padding-bottom:80px !important;
-  }
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RecentlyViewedComponent.vue b/src/components/retailer/product-detail/RecentlyViewedComponent.vue
deleted file mode 100644
index a5e02db..0000000
--- a/src/components/retailer/product-detail/RecentlyViewedComponent.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <v-container class="pt-0 pt-sm-8 white">
-    <v-row no-gutters justify="center" class="pa-0 d-none d-sm-flex">
-      <div class="hr-line-100px"></div>
-    </v-row>
-    <!-----------  mobile view -------->
-    <v-content
-      align="center"
-      class="pa-0 mt-md-5 pt-5 mb-9 d-sm-none ls-n01"
-      v-if="recentlyViewed && recentlyViewed.length >0"
-    >
-      <p
-        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
-      >Recently</p>
-      <p
-        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
-      >Viewed</p>
-    </v-content>
-    <!-----------  mobile view end -------->
-    <div v-if="recentlyViewed && recentlyViewed.length >0">
-      <v-content align="center" class="pa-0 mt-md-5 mt-5 mb-12 d-none d-sm-block ls-n01">
-        <p
-          class="text-uppercase fontsize-28 mt-5 mx-2 px-2 text-center line-height-36 regular-font"
-        >Recently Viewed</p>
-      </v-content>
-      <v-row no-gutters>
-        <v-container class="pa-0 pa-sm-3">
-          <v-col lg="12" md="12" cols="12" sm="12" class="pa-0 pa-sm-3">
-            <vueper-slides
-              class="no-shadow mb-0 recentproducts-image-slider"
-              :class="recentlyViewed.length > 4 ? '':'recentproducts-images'"
-              :visible-slides="perSlides"
-              :dragging-distance="1"
-              :fixed-height="slideHeight"
-              :touchable="false"
-            >
-              <vueper-slide v-for="(products, index) in recentlyViewed.slice(0, 16)" v-bind:key="index">
-                <template v-slot:content>
-                  <div class="vueperslide__content-wrapper vueperslide__title">
-                    <v-card
-                      tile
-                      class="transparent-background recentproducts-image-card vueperslide__title px-sm-4 py-3"
-                      @click="OpenProductDetails(products.name)"
-                      flat
-                    >
-                      <v-img
-                        v-bind:src="imageBasePathUrl + getCustomAttributeValue(products.customAttributes,'image')"
-                        height="auto"
-                        :max-height="imageMaxHeight"
-                        width="100%"
-                        :alt="products.name" :title="products.name"
-                      >
-                        <!--<div class="text-right">
-                            <v-icon icon class="pa-4 white--text">mdi-heart-outline</v-icon>
-                        </div>-->
-                      </v-img>
-                      <v-row no-gutters class="pt-4">
-                        <v-col class="pb-0" cols="6">
-                          <h1
-                            class="font-weight-300 text-left mb-3 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
-                          >{{products.name}}</h1>
-                        </v-col>
-                       <!-- <v-col class="pb-0" cols="6">
-                          <p
-                            class="text-right mb-0 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
-                          >${{Number(products.price)}}/ {{getAttribute(products.customAttributes,'uom')}}</p>
-                        </v-col>-->
-                        <v-col class="py-0" cols="12">
-                          <p
-                            class="mb-3 text-left fontsize-14 body-font ls-n009 word_break fontcolor-grey-darken"
-                          >
-                            {{getCustomAttributeValue(products.customAttributes,'unit_description'
-                            )}}
-                          </p>
-                        </v-col>
-                        <!-- <v-col class="py-0 d-none d-sm-block" sm="12">
-                        <div v-for="(items, index) in products.customAttributes" :key="index">
-                          <div v-if="items.attributeCode === 'color'">
-                            <v-row no-gutters>
-                              <v-col
-                                v-for="(color,index) in items.value"
-                                v-bind:key="index"
-                                class="mr-2 mr-md-1 pa-0"
-                                cols="1"
-                              >
-                                <v-btn
-                                  :color="color"
-                                  fab
-                                  depressed
-                                  max-height="16px"
-                                  max-width="16px"
-                                ></v-btn>
-                              </v-col>
-                            </v-row>
-                          </div>
-                        </div>
-                        </v-col>-->
-                      </v-row>
-                    </v-card>
-                  </div>
-                </template>
-              </vueper-slide>
-            </vueper-slides>
-          </v-col>
-        </v-container>
-      </v-row>
-
-      <v-row no-gutters align="center" justify="center" class="d-none d-sm-flex pa-0 pt-7">
-        <div class="hr-line-100px"></div>
-      </v-row>
-    </div>
-    <v-row no-gutters align="center" justify="center" class="d-flex d-sm-none pa-0 pt-12">
-      <div class="hr-line-100px"></div>
-    </v-row>
-    <v-row no-gutters class="mt-5 d-none d-sm-block">
-      <v-col align="center">
-        <h2
-          class="text-uppercase body-font fontsize-28px ls-n01 title-color-black text-center mb-4 line-height-36"
-        >the craftsmanship of crane</h2>
-        <p class="text-center pt-4 ls-n01 body-font fontcolor-black-darken">
-          Luxurious Lettra and touchable embossing elevate a simple sentiment for
-          <br />this refined holiday card. Friends and family will cherish your personal
-          <br />message and lovingly chosen photograph.
-        </p>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="mt-5 d-block d-sm-none">
-      <v-col align="center">
-        <h2
-          class="text-uppercase body-font fontsize-28px ls-n01 title-color-black text-center mb-4 line-height-36"
-        >
-          the
-          <br />craftsmanship
-          <br />of crane
-        </h2>
-        <p class="text-center pt-1 ls-n01 body-font fontcolor-black-darken">
-          Luxurious Lettra and touchable
-          <br />embossing elevate a simple sentiment
-          <br />for
-          this refined holiday card. Friends and
-          <br />family will cherish your personal
-          <br />message and lovingly chosen
-          <br />photograph.
-        </p>
-      </v-col>
-    </v-row>
-
-    <div class="d-none d-sm-flex flex-column flex-start pt-5 pb-4">
-      <v-container class="px-0">
-        <v-row class="pb-9">
-          <v-col md="4" sm="4" class="cursor-pointer"  @click="goToPage('/about-us')">
-            <v-img
-              :src="require('@/assets/3c75d46ae8685185bce31e5663ae5bed29fd76f1.png')"
-              class="align-center text-center white--text"
-            >
-              <span
-                class="regular-font line-height-36 fontsize-28 ls-n01 text-uppercase"
-              >Legacy of Excellence</span>
-            </v-img>
-          </v-col>
-
-          <v-col md="4" sm="4" class="cursor-pointer"  @click="goToPage('/our-papers')">
-            <v-img
-              :src="require('@/assets/32d33cfd6ead3276031a1281a4ddf1ad3a627cde.png')"
-              class="align-center text-center white--text"
-            >
-              <span
-                class="regular-font line-height-36 fontsize-28 text-uppercase ls-n01"
-              >Details Matter</span>
-            </v-img>
-          </v-col>
-
-          <v-col md="4" sm="4" class="cursor-pointer"  @click="goToPage('/printing-processes')">
-            <v-img
-              :src="require('@/assets/cd3983401dbf31b8feaf4a4a75f277ccbb24a7e4.png')"
-              class="align-center text-center white--text"
-            >
-              <span
-                class="regular-font line-height-36 fontsize-28 text-uppercase ls-n01"
-              >Handcrafted</span>
-            </v-img>
-          </v-col>
-        </v-row>
-      </v-container>
-    </div>
-
-    <!------- mobile view code --------------------------------->
-    <v-row no-gutters class="d-sm-none mt-5">
-      <v-container class="mb-7 mt-7 pa-0">
-        <v-row>
-          <v-col cols="12" class="pa-3 px-0 cursor-pointer"  @click="goToPage('/about-us')">
-            <v-img
-              :src="require('@/assets/3c75d46ae8685185bce31e5663ae5bed29fd76f1.png')"
-              class="align-center text-center white--text"
-            >
-              <span class="h3 ls-n008 text-uppercase">Legacy of Excellence</span>
-            </v-img>
-          </v-col>
-
-          <v-col cols="12" class="pa-3 px-0 cursor-pointer"  @click="goToPage('/our-papers')">
-            <v-img
-              :src="require('@/assets/32d33cfd6ead3276031a1281a4ddf1ad3a627cde.png')"
-              class="align-center text-center white--text"
-            >
-              <span class="h3 text-uppercase ls-n008">Details Matter</span>
-            </v-img>
-          </v-col>
-
-          <v-col cols="12" class="pa-3 px-0 cursor-pointer"  @click="goToPage('/printing-processes')">
-            <v-img
-              :src="require('@/assets/cd3983401dbf31b8feaf4a4a75f277ccbb24a7e4.png')"
-              class="align-center text-center white--text"
-            >
-              <span class="h3 text-uppercase ls-n008">Handcrafted</span>
-            </v-img>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-row>
-    <!------- end mobile view code --------------------------------->
-  </v-container>
-</template>
-<script>
-import { VueperSlides, VueperSlide } from "vueperslides";
-import { attribute, customAttributeValue } from "@/services/util.service";
-
-export default {
-  name: "RecentlyViewedComponent",
-  props: ["recentlyViewed"],
-  components: {
-    VueperSlides,
-    VueperSlide
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    productAttributes() {
-      return this.$store.state.productList.attributeList;
-    },
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-    perSlides: function() {
-      if (this.$vuetify.display.xsOnly) return 1;
-      else if (this.$vuetify.display.smOnly) return 3;
-      else return this.$vuetify.display.mdAndUp ? 4 : 4;
-    },
-    slideHeight: function() {
-      return this.$vuetify.display.xsOnly ? "400px" : "350px";
-    },
-    showArrows: function() {
-      if (this.$vuetify.display.smAndDown) return false;
-      else return true;
-    },
-    imageMaxHeight: function() {
-      if (this.$vuetify.display.xsOnly) return "250px";
-      else return "300px";
-    }
-  },
-  methods: {
-      initialLink() {
-      return import.meta.env.VITE_APP_HOME_PAGE_URL;
-    },
-     goToPage(pageLink) {
-      window.location.replace(this.initialLink()+pageLink);
-    },
-    getAttribute(customAttributes, attributeCode) {
-      return attribute(customAttributes, attributeCode, this.productAttributes);
-    },
-
-    getCustomAttributeValue(customAttributes, attributeCode) {
-      return customAttributeValue(customAttributes, attributeCode);
-    },
-    OpenProductDetails(productName) {
-      this.$router
-        .push({
-          name: productName,
-        })
-        .catch(error => {
-          error;
-        });
-    }
-  }
-};
-</script>
-<style src="./RecentlyViewedComponent.scss" lang="scss" />
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RelatedProductsComponent.scss b/src/components/retailer/product-detail/RelatedProductsComponent.scss
deleted file mode 100644
index d0bb93b..0000000
--- a/src/components/retailer/product-detail/RelatedProductsComponent.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.hr-line-100px {
-    border: 0.0625rem solid #1d1d1d !important;
-    width: 6.25rem;
-    content: "";
-    display: block;
-}
-
-.relatedproduct-fcolor-black-darken-2 {
-    color: #1d1d1d;
-}
-
-.relatedproduct-black-lighten-2 {
-    color: rgba(0, 0, 0, 1);
-}
-.relatedproducts-image-card .v-ripple__container{
-    opacity: 0 !important;
-}
-
-.relatedproducts-image-card.v-card--link:focus:before {
-    opacity: 0 !important;
-}
-.relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
-    margin-left:10px !important;
-    color:#2850da;
-    padding-bottom:80px !important;
-  }
-  .relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
-    margin-right:10px !important;
-    color:#2850da;
-    padding-bottom:80px !important;
-  }
-@media screen and (max-width:764px) {
-    .relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
-      margin-left:-10px !important;
-      color:#2850da;
-      padding-bottom:80px !important;
-    }
-    .relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
-      margin-right:-10px !important;
-      color:#2850da;
-      padding-bottom:80px !important;
-    }
-  }
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RelatedProductsComponent.vue b/src/components/retailer/product-detail/RelatedProductsComponent.vue
deleted file mode 100644
index b683d5e..0000000
--- a/src/components/retailer/product-detail/RelatedProductsComponent.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <v-container class="py-0 pa-sm-3 white">
-    <v-row no-gutters justify="center" class="pa-0 mt-md-12 mt-sm-10">
-      <div class="hr-line-100px"></div>
-    </v-row>
-    <!-----------  mobile view -------->
-    <v-content align="center" class="pa-0 mt-md-5 mt-5 mb-4 d-sm-none ls-n01">
-      <p
-        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
-      >Related</p>
-      <p
-        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
-      >Products</p>
-    </v-content>
-    <!-----------  mobile view end -------->
-    <v-content align="center" class="pa-0 mt-md-5 mt-5 d-none d-sm-block ls-n01">
-      <p
-        class="text-uppercase fontsize-28 mt-5 mb-9 mx-2 px-2 text-center line-height-36 regular-font"
-      >Related Products</p>
-    </v-content>
-    <v-row no-gutters>
-      <v-container class="pa-0 pa-sm-3">
-        <v-col lg="12" md="12" cols="12" sm="12" class="pa-0 pa-sm-3">
-          <vueper-slides
-            class="no-shadow mb-0"
-            :visible-slides="perSlides"
-            :dragging-distance="1"
-            :fixed-height="slideHeight"
-            :touchable="false"
-          >
-            <vueper-slide v-for="(products, index) in relatedProducts" v-bind:key="index">
-              <template v-slot:content>
-                <div class="vueperslide__content-wrapper vueperslide__title">
-                  <v-card
-                    tile
-                    class="transparent-background relatedproducts-image-card vueperslide__title px-sm-4 py-3"
-                    @click="OpenProductDetails(products.name)"
-                    flat
-                  >
-                    <v-img
-                      v-bind:src="imageBasePathUrl + products.image[0].file"
-                      height="auto"
-                      :max-height="imageMaxHeight"
-                      width="100%"
-                     :alt="products.name" :title="products.name"
-                    >
-                      <!--<div class="text-right">
-                            <v-icon icon class="pa-4 white--text">mdi-heart-outline</v-icon>
-                      </div>-->
-                    </v-img>
-                    <v-row no-gutters class="pt-4">
-                      <v-col class="pb-0" cols="6">
-                        <h1
-                          class="font-weight-300 text-left mb-3 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
-                        >{{products.name}}</h1>
-                      </v-col>
-                     <!-- <v-col class="pb-0" cols="6">
-                        <p
-                          class="text-right mb-0 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
-                        >${{Number(products.price)}}/ {{products.uom}}</p>
-                      </v-col>-->
-                      <v-col class="py-0" cols="12">
-                        <p
-                          class="mb-3 text-left fontsize-14 body-font ls-n009 word_break fontcolor-grey-darken"
-                        >{{products.unitDiscription}}</p>
-                      </v-col>
-                      <!-- <v-col class="py-0 d-none d-sm-block" sm="12">
-                        <div v-for="(items, index) in products.customAttributes" :key="index">
-                          <div v-if="items.attributeCode === 'color'">
-                            <v-row no-gutters>
-                              <v-col
-                                v-for="(color,index) in items.value"
-                                v-bind:key="index"
-                                class="mr-2 mr-md-1 pa-0"
-                                cols="1"
-                              >
-                                <v-btn
-                                  :color="color"
-                                  fab
-                                  depressed
-                                  max-height="16px"
-                                  max-width="16px"
-                                ></v-btn>
-                              </v-col>
-                            </v-row>
-                          </div>
-                        </div>
-                      </v-col>-->
-                    </v-row>
-                  </v-card>
-                </div>
-              </template>
-            </vueper-slide>
-          </vueper-slides>
-        </v-col>
-      </v-container>
-    </v-row>
-  </v-container>
-</template>
- <script>
-import { VueperSlides, VueperSlide } from "vueperslides";
-import "vueperslides/dist/vueperslides.css";
-//const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
-export default {
-  name: "RelatedProductsComponent",
-  props: ["relatedProducts"],
-  components: {
-    VueperSlides,
-    VueperSlide
-  },
-  computed: {
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-    perSlides: function() {
-      if (this.$vuetify.display.xsOnly) return 1;
-      else if (this.$vuetify.display.smOnly) return 3;
-      else return this.$vuetify.display.mdAndUp ? 4 : 4;
-    },
-    slideHeight: function() {
-      return this.$vuetify.display.xsOnly ? "400px" : "350px";
-    },
-    showArrows: function() {
-      if (this.$vuetify.display.smAndDown) return false;
-      else return true;
-    },
-    imageMaxHeight: function() {
-      if (this.$vuetify.display.xsOnly) return "250px";
-      else return "300px";
-    }
-  },
-
-  data() {
-    return {};
-  },
-  methods: {
-    OpenProductDetails(productsName) {
-      this.$router.push({
-        name: productsName,
-      })
-        .catch(error => {
-          error;
-        });
-    }
-  }
-};
-</script>
-<style src="./RelatedProductsComponent.scss" lang="scss" scopped/>
\ No newline at end of file
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.scss b/src/components/retailer/retailer-search/RetailerSearchProducts.scss
index a865840..e69de29 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.scss
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.scss
@@ -1,16 +0,0 @@
-.fontcolor-grey-shade8b {
-    color: #8b8b8b;
-}
-
-.categorybaseproducts-select-button {
-    max-width: 300px !important;
-}
-
-.categorybaseproduct-cancel-buttons.v-icon.v-icon::after {
-    opacity: 0 !important;
-}
-@media screen and (max-width:320px) {
-    .searchproducts-sortby{
-     font-size:14px !important;
-    }
-  }
\ No newline at end of file
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.vue b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
index 3065788..dc328c9 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.vue
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
@@ -231,164 +231,5 @@ export default {
   created() {},
 };
 </script>
-<style lang="scss" >
-.sort-button.theme--light.v-text-field--solo
-  > .v-input__control
-  > .v-input__slot {
-  background: transparent !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__item--active {
-  outline: #ffffff !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__item {
-  outline: #ffffff !important;
-  box-shadow: none !important;
-  padding: 0px !important;
-  margin: 0px !important;
-}
-.categorybaseproducts-pagination-button {
-  justify-content: flex-start;
-}
-.categorybaseproducts-overflow-button .v-select__slot {
-  border-left: 1px solid #dcdddd !important;
-  border-right: 1px solid #dcdddd !important;
-  max-width: 85px !important;
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button {
-  max-width: 85px !important;
-}
-.categorybaseproducts-overflow-button .v-select__slot .v-input__append-inner {
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button .v-overflow-btn .v-select__slot {
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-pagination-button
-  .v-pagination__navigation.v-pagination__navigation--disabled {
-  display: none;
-}
-.categorybaseproducts-pagination-button
-  .v-pagination__navigation
-  .v-icon.v-icon {
-  font-style: normal !important;
-  color: #1d1d1d !important;
-  text-transform: uppercase !important;
-  font-size: 14px;
-  font-family: "Whyte-Regular", sans-serif;
-  letter-spacing: -0.1px;
-}
-.categorybaseproducts-select-button .v-input__control .v-input__slot {
-  border: thin solid #8b8b8b !important;
-}
-.categorybaseproducts-select-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-select-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-select-button:hover
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__navigation {
-  outline: #ffffff !important;
-  box-shadow: none !important;
-  padding: 0px !important;
-  //margin: 0px 10px !important;
-}
-.custom-pagination li:nth-child(1) {
-  margin-right: 15px !important;
-  margin-left: 15px;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.theme--light.v-select
-  .v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-sortby-button .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 5px;
-  border-left: 1px solid #2850da;
-  padding-left: 10px;
-  height: 34px;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 5px;
-  border-left: 1px solid #2850da;
-  padding-left: 10px;
-  height: 34px;
-}
-.searchproducts-cancel-buttons.v-icon.v-icon::after {
-  opacity: 0 !important;
-}
-.categorybaseproducts-sortby-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-overflow-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-filter-button .v-text-field__details {
-  display: none;
-}
-.filter-component-width .v-expansion-panels {
-  display: inline-block;
-}
- 
-</style>
+
 <style src="./RetailerSearchProducts.scss" lang="scss" scoped />
\ No newline at end of file
diff --git a/src/components/retailer/search/SearchProducts.scss b/src/components/retailer/search/SearchProducts.scss
deleted file mode 100644
index a865840..0000000
--- a/src/components/retailer/search/SearchProducts.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.fontcolor-grey-shade8b {
-    color: #8b8b8b;
-}
-
-.categorybaseproducts-select-button {
-    max-width: 300px !important;
-}
-
-.categorybaseproduct-cancel-buttons.v-icon.v-icon::after {
-    opacity: 0 !important;
-}
-@media screen and (max-width:320px) {
-    .searchproducts-sortby{
-     font-size:14px !important;
-    }
-  }
\ No newline at end of file
diff --git a/src/components/retailer/search/SearchProducts.vue b/src/components/retailer/search/SearchProducts.vue
deleted file mode 100644
index 0d906b1..0000000
--- a/src/components/retailer/search/SearchProducts.vue
+++ /dev/null
@@ -1,694 +0,0 @@
-<template>
-  <div v-resize="OnResize">
-    <v-container class="px-5 px-sm-3 px-md-3 px-lg-3">
-      <div :class="isIpad ? 'd-flex flex-column-reverse' : 'pt-lg-5 pb-lg-2'">
-        <div :class="newUser ? 'pt-lg-6 mt-lg-12' : ''">
-          <v-row>
-            <v-col cols="12" lg="9" md="12" sm="12" ref="divOne" class="py-0">
-              <div v-if="categoryListIdWise">
-                <BreadcrumbComponent :breadcrumbVal="breadcrumbData" :key="breadcrumbData" />
-              </div>
-            </v-col>
-          </v-row>
-        </div>
-        <CategoryHeroContent v-if="!isMobile" :categoryContent="categoryPageContent"></CategoryHeroContent>
-      </div>
-
-      <v-row v-if="isIpadOrMobile && searchResults.page.length">
-        <v-col cols="12" class="pa-0">
-          <v-col cols="12" sm="4" >
-            <span>
-              <ul class="pl-0" v-for="(value, index) in enabledFilters" :key="index">
-                <li class="d-flex justify-space-between pb-1" v-if="value.label !='Category'">
-                  <div>
-                    <b>
-                      <span class="text-uppercase">{{ value.label }}</span>
-                    </b>
-                    : {{ value.value }}
-                  </div>
-                  <v-hover v-slot:default="{ hover }">
-                    <v-icon
-                      :color="hover ? 'primary' : ''"
-                      @click.stop="deleteFilter(value,index)"
-                      class="searchproducts-cancel-buttons cursor-pointer transparent-background"
-                    >mdi-close</v-icon>
-                  </v-hover>
-                </li>
-              </ul>
-            </span>
-          </v-col>
-        </v-col>
-        <v-col cols="12" sm="4" class="d-lg-none pt-1 pb-5">
-          <v-menu
-            allow-overflow
-            id="filterSelect"
-            offset-y
-            :close-on-content-click="closeFilterMenu"
-          >
-            <template v-slot:activator="{ on, attrs }">
-              <v-select
-                v-bind="attrs"
-                v-on="on"
-                class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-filter-button select-change-icon"
-                dense
-                attach="#filterSelect"
-                flat
-                solo
-                single-line
-                background-color="transparent"
-                append-icon="mdi-plus"
-                label="FILTERS"
-                color="primary"
-                @click="setFilterValue"
-              ></v-select>
-            </template>
-            <v-list class="categorybaseproducts-filter-options mx-auto">
-              <v-list-item>
-                <v-list-item-title class="filter-component-width">
-                  <v-row>
-                    <v-col cols="12">
-                      <v-btn
-                        block
-                        class="text-uppercase ls-0 body pb-1 productpage-button"
-                        outlined
-                        :class="
-                          checkClear ? 'white--text primary' : 'primary--text'
-                        "
-                        tile
-                        depressed
-                        @click="clearFilter()"
-                      >CLEAR</v-btn>
-                    </v-col>
-                  </v-row>
-                  <FilterComponent
-                    @clearAction="actionClear"
-                    :filterList="availalableFilters"
-                    :inProgress="inProgress"
-                    :enabledFilters="enabledFilters"
-                    @applyNewFilter="applyFilter"
-                  ></FilterComponent>
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-        <v-col lg="10" md="4" sm="4" cols="3" class="pt-0 pb-4 pr-0 pr-sm-2">
-          <p
-            class="text-uppercase Whyte-Regular primary--text my-3 mr-1 fontsize-16 ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b searchproducts-sortby"
-            :class="isIpad ? 'float-right' : 'float-left'"
-          >Sort by:</p>
-        </v-col>
-        <v-col cols="9" lg="2" md="4" sm="4" class="py-0 pt-1 pl-3 pr-3">
-          <v-select
-            :items="criteria"
-            class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button select-change-icon regular-font"
-            dense
-            flat
-            attach
-            solo
-            ref="sortAndNextPage"
-            @change="sortAndNextPage()"
-            item-text="label"
-            item-value="value"
-            background-color="transparent"
-            v-model="sortBy"
-            append-icon="mdi-plus"
-          ></v-select>
-        </v-col>
-        <v-col md="12" sm="12" cols="12" class="py-0">
-          <p
-            class="h3 regular-font mb-1"
-            v-if="searchPageContent"
-          >Search results for : '{{ keywords }}'</p>
-        </v-col>
-      </v-row>
-
-      <CategoryHeroContent v-if="isMobile" :categoryContent="categoryPageContent"></CategoryHeroContent>
-      <v-row class="d-none d-sm-flex" v-if="!isIpadOrMobile">
-        <v-col cols="12" lg="3" md="4" sm="4">
-          <span>
-            <ul class="pl-0" v-for="(value, index) in enabledFilters" :key="index">
-              <li class="d-flex justify-space-between pb-1" v-if="value.label !='Category'">
-                <div>
-                  <b>
-                    <span class="text-uppercase">{{ value.label }}</span>
-                  </b>
-                  : {{ value.value }}
-                </div>
-                <v-hover v-slot:default="{ hover }">
-                  <v-icon
-                    :color="hover ? 'primary' : ''"
-                    @click.stop="deleteFilter(value,index)"
-                    class="ccategorybaseproduct-cancel-buttons cursor-pointer"
-                  >mdi-close</v-icon>
-                </v-hover>
-              </li>
-            </ul>
-          </span>
-        </v-col>
-      </v-row>
-      <v-row v-if="searchResults.page.length">
-        <v-col lg="3" md="1" sm="1" class="d-none d-lg-block pt-12 pr-md-12">
-          <v-row justify="center" class="pt-6">
-            <FilterComponent
-              :filterList="availalableFilters"
-              :inProgress="inProgress"
-              :enabledFilters="enabledFilters"
-              @applyNewFilter="applyFilter"
-            />
-          </v-row>
-        </v-col>
-        <v-col cols="12" lg="9" md="12" sm="12" class="pl-lg-12" ref="divOnesecond">
-          <v-row>
-            <v-row v-if="!isIpadOrMobile" align="center" >
-              <v-col lg="6" md="4" sm="4" cols="4" class="py-0">
-                <p
-                  class="h3 regular-font mb-1"
-                  v-if="searchPageContent"
-                >Search results for : '{{ keywords }}'</p>
-              </v-col>
-              <v-col lg="2" md="4" sm="4" cols="4" class="py-0">
-                <p
-                  class="text-uppercase primary--text my-3 mr-2 fontsize-14 body float-right ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b"
-                >Sort by:</p>
-              </v-col>
-              <v-col lg="4" md="3" sm="3" cols="4" class="py-0 pt-1 pl-2 pr-7">
-                <v-select
-                  :items="criteria"
-                  class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button categorybaseproducts-select-button select-change-icon regular-font"
-                  dense
-                  attach
-                  flat
-                  solo
-                  ref="sortAndNextPage"
-                  @change="sortAndNextPage()"
-                  item-text="label"
-                  item-value="value"
-                  background-color="transparent"
-                  v-model="sortBy"
-                  append-icon="mdi-plus"
-                ></v-select>
-              </v-col>
-            </v-row>
-          </v-row>
-          <v-row v-if="inProgress">
-            <v-col
-              v-for="(i, index) in 9"
-              v-bind:key="index"
-              lg="4"
-              md="4"
-              sm="4"
-              cols="12"
-              class="pr-lg-4 cursor-pointer"
-            >
-              <v-skeleton-loader type="card"></v-skeleton-loader>
-            </v-col>
-          </v-row>
-          <v-row v-if="searchResults.page.length > 0">
-            <v-col
-              v-for="(product, index) in searchResults.page"
-              v-bind:key="index"
-              lg="4"
-              md="4"
-              sm="4"
-              cols="12"
-              class="pr-lg-4 cursor-pointer pt-lg-6"
-              @click="gotoProductDetails(product.n)"
-            >
-              <v-img
-                :src="imageBasePathUrl + product.i + imageBaseParams"
-                width="100%"
-                :alt="product.n"
-                :title="product.n"
-              ></v-img>
-              <v-row>
-                <v-col cols="7" class="pb-0">
-                  <h1
-                    class="float-left fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
-                  >{{ product.n }}</h1>
-                </v-col>
-                <v-col cols="5" class="pb-0">
-                  <p
-                    v-if="product.lp"
-                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
-                  >
-                    From ${{ product.lp }}
-                    {{ product.u }}
-                  </p>
-                  <div
-                    v-else
-                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
-                  >
-                    <div v-if="product.sp">
-                      <s>${{ product.p }}</s> &nbsp;
-                      <p class="red--text mb-0">${{ roundUp(product.sp) }}</p>
-                      / {{ product.u }}
-                    </div>
-                    <div v-else-if="product.p != 0">
-                      <p>
-                        ${{ product.p }} /
-                        {{ product.u }}
-                      </p>
-                    </div>
-                    <div v-else>
-                      <p>TBD</p>
-                    </div>
-                  </div>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <v-row class="pr-5">
-            <v-col cols="12" sm="6" md="8" lg="8">
-              <v-col
-                cols="12"
-                sm="6"
-                md="8"
-                lg="8"
-                class="pa-0 custom-pagination d-flex flex-column"
-              >
-                <v-pagination
-                  v-if="pageSize != 'ALL'"
-                  prev-icon="Previous"
-                  next-icon="Next"
-                  class="categorybaseproducts-pagination-button d-flex justify-flex-start"
-                  v-model="pageNumber"
-                  :length="totalVisiblePages"
-                  elevation="0"
-                  @input="pageViewChange()"
-                  circle
-                ></v-pagination>
-              </v-col>
-            </v-col>
-            <v-col sm="6" md="4" lg="4" class="pt-0 d-none d-sm-block">
-              <v-row align="center" justify="end">
-                <p
-                  class="mr-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-black-darken pt-6"
-                >Show:</p>
-                <v-overflow-btn
-                  class="fontsize-16 body ls-n01 transparent-background fontcolor-black-darken categorybaseproducts-overflow-button"
-                  :items="pageNum"
-                  label="9"
-                  v-model="pageSize"
-                  flat
-                  target="#dropdown-example"
-                  height="36"
-                  @change="pageSizeWiseProduct()"
-                ></v-overflow-btn>
-                <p
-                  class="ml-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-grey-shade8b pt-6"
-                >Per Page</p>
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-       <v-row v-else class="text-center">
-            <v-col
-            lg="12"
-              md="12"
-              sm="12"
-              cols="12">
-              <v-alert type="error" text class="font-weight-300 body-font h3">{{
-                noProducts
-              }}</v-alert>
-            </v-col>
-          </v-row>
-    </v-container>
-  </div>
-</template>
-<script>
-/* eslint-disable no-alert, no-console ,  no-debugger */
-//import * as easings from "vuetify/es5/services/goto/easing-patterns";
-import BreadcrumbComponent from "@/components/retailer/breadcrumb/Breadcrumb.vue";
-import { createHelpers } from "vuex-map-fields";
-import { mapState } from "vuex";
-import CategoryHeroContent from "@/components/retailer/category/CategoryHeroContent.vue";
-import FilterComponent from "@/components/retailer/filter/FilterComponent.vue";
- 
-const { mapFields } = createHelpers({
-  getterType: "catalogBrowser/getField",
-  mutationType: "catalogBrowser/updateField"
-});
-export default {
-  name: "SearchProductsComponent",
-  components: {
-    FilterComponent,
-    CategoryHeroContent,
-    BreadcrumbComponent
-  },
-  props: [
-    "criteria",
-    "searchPageContent",
-    "breadcrumbData",
-    "categoryPageContent"
-  ],
-  computed: {
-    ...mapState({
-      searchResults: state => state.catalogBrowser.searchResults,
-      enabledFilters: state => state.catalogBrowser.enabledFilters,
-      searchTerms: state => state.catalogBrowser.searchTerms,
-      inProgress: state => state.catalogBrowser.inProgress,
-      totalProducts: state => state.catalogBrowser.totalItems,
-      availalableFilters: state => state.catalogBrowser.availalableFilters
-    }),
-    ...mapFields([
-      "searchTerms",
-      "searchTerms.pageNumber",
-      "searchTerms.pageSize",
-      "searchTerms.keywords",
-      "searchTerms.sortBy",
-      "searchTerms.filters"
-    ]),
-    easingOptions() {
-      return {
-        duration: this.duration,
-        easing: this.easing
-      };
-    },
-    categoryListIdWise: function() {
-      return this.$store.state.headerCategoryList.categoryListIdWise;
-    },
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_PATH_URL;
-    },
-    imageBaseParams() {
-      return import.meta.env.VITE_APP_IMAGE_CATEGORY_PARAMS;
-    },
-    isIpadOrMobile: function() {
-      return this.$vuetify.display.mdAndDown ? true : false;
-    },
-    isIpad: function() {
-      return this.$vuetify.display.smOnly || this.$vuetify.display.mdOnly
-        ? true
-        : false;
-    },
-    isMobile: function() {
-      return this.$vuetify.display.xs ? true : false;
-    },
-     categoryId: function() {
-      return this.$route.meta.id;
-    }, 
-    newUser() {
-      if (this.$vuetify.display.smAndDown) return false;
-      let userVisits = this.$store.state.layout.user.userVisits;
-      if (userVisits && Number(userVisits) > 1) return false;
-      else return true;
-    }
-  },
-  watch: {
-    totalProducts() {
-      if (this.pageSize != "ALL") {
-        this.totalVisiblePages = Math.ceil(
-          this.totalProducts / Number(this.pageSize)
-        );
-        //  this.updatePageNumber(); 
-      }
-    },
-    searchResults(){
-    //  googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    keywords(){
-    //  googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    categoryId(){
-   // googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    pageSize() {
-      if (this.pageSize != "ALL" && this.totalProducts) {
-        this.totalVisiblePages = Math.ceil(
-          this.totalProducts / Number(this.pageSize)
-        );
-      }
-    }
-  },
-  data: () => ({
-    closeFilterMenu: false,
-    checkClear: false,
-    easing: "easeInOutCubic",
-    easings: Object.keys(easings), 
-    duration: 100,
-    totalVisiblePages: 0, 
-    menu: false, 
-    showDrawarFilter: false,
-    pageNum: [
-      { text: 9, callback: () => 9 },
-      { text: 18, callback: () => 18 },
-      { text: 27, callback: () => 27 },
-      { text: "ALL", callback: () => "ALL" }
-    ],
-    noProducts: "No products found.",
-  }),
-  methods: {
-    async clearFilter() {
-      await this.$store.dispatch("catalogBrowser/clearFilter");
-      this.closeFilterMenu = true;
-      this.pageNumber=1;
-      this.$emit("criteriaChanged");
-    },
-    async deleteFilter(value,index) {
-      await this.$store.dispatch("catalogBrowser/deleteSelectedFilter", {
-        index: index
-      });
-      this.pageNumber=1;
-      this.$emit("criteriaChanged");
-      // googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-
-    setFilterValue() {
-      this.closeFilterMenu = false;
-    },
-    async applyFilter(filterObj) {
-      await this.$store.dispatch("catalogBrowser/setNewFilter", filterObj);
-      this.closeFilterMenu = true;
-      this.pageNumber=1;
-      this.$emit("criteriaChanged");
-         //    googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-
-    },
-    async actionClear() {
-      await this.$store.dispatch("catalogBrowser/clearFilter");
-      this.closeFilterMenu = true;
-    },
-    OnResize() {
-      setTimeout(() => {
-        if (this.$vuetify.display.lgAndUp) {
-          this.showDrawarFilter = false;
-        }
-      }, 200);
-    },
-    gotoProductDetails(productName) {
-    //  googleAanalyticsEventSelectContent('select_content',product,this.categoryId)
-      this.$router.push({
-        name: productName,
-         query: {
-            categoryId: this.categoryId,
-          }
-      });
-    },
-    pageViewChange() {
-      this.$emit("criteriaChanged");
-       //googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    pageSizeWiseProduct() {
-      this.updatePageNumber();
-      this.$emit("criteriaChanged");
-       // googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    sortAndNextPage() {
-     this.$emit("criteriaChanged");
-//googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-    },
-    scrollToTop() {
-      window.scrollTo(0, 0);
-    },
-    updatePageNumber() {
-      if (this.pageNumber * Number(this.pageSize) > this.totalProducts) {
-        let quotient = Math.floor(this.totalProducts / Number(this.pageSize));
-        let remainder = this.totalProducts % Number(this.pageSize);
-        this.pageNumber = quotient + (remainder == 0 ? 0 : 1);
-      } else {
-        //this.pageNumber = Number(this.$route.query.pageNumber);
-      }
-    },
-    roundUp(num) {
-      var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
-      return with2Decimals;
-    }
-  },
-
-  created() {
-     if(this.searchTerms)
-     {
-       // googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
-          }
-    if (this.totalProducts)
-      this.totalVisiblePages = Math.ceil(
-        this.totalProducts / Number(this.pageSize)
-      );
-  }
-};
-</script>
-<style lang="scss" >
-.sort-button.theme--light.v-text-field--solo
-  > .v-input__control
-  > .v-input__slot {
-  background: transparent !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__item--active {
-  outline: #ffffff !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__item {
-  outline: #ffffff !important;
-  box-shadow: none !important;
-  padding: 0px !important;
-  margin: 0px !important;
-}
-.categorybaseproducts-pagination-button {
-  justify-content: flex-start;
-}
-.categorybaseproducts-overflow-button .v-select__slot {
-  border-left: 1px solid #dcdddd !important;
-  border-right: 1px solid #dcdddd !important;
-  max-width: 85px !important;
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button {
-  max-width: 85px !important;
-}
-.categorybaseproducts-overflow-button .v-select__slot .v-input__append-inner {
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button .v-overflow-btn .v-select__slot {
-  max-height: 36px !important;
-}
-.categorybaseproducts-overflow-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-pagination-button
-  .v-pagination__navigation.v-pagination__navigation--disabled {
-  display: none;
-}
-.categorybaseproducts-pagination-button
-  .v-pagination__navigation
-  .v-icon.v-icon {
-  font-style: normal !important;
-  color: #1d1d1d !important;
-  text-transform: uppercase !important;
-  font-size: 14px;
-  font-family: "Whyte-Regular", sans-serif;
-  letter-spacing: -0.1px;
-}
-.categorybaseproducts-select-button .v-input__control .v-input__slot {
-  border: thin solid #8b8b8b !important;
-}
-.categorybaseproducts-select-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-select-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-select-button:hover
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-pagination-button .v-pagination__navigation {
-  outline: #ffffff !important;
-  box-shadow: none !important;
-  padding: 0px !important;
-  //margin: 0px 10px !important;
-}
-.custom-pagination li:nth-child(1) {
-  margin-right: 15px !important;
-  margin-left: 15px;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.theme--light.v-select
-  .v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-sortby-button .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover .v-input__control .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
-  .v-input__control
-  .v-input__slot {
-  border: thin solid #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button:hover
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button
-  .v-input__append-inner
-  .v-input__icon
-  .v-icon {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
-  .v-select__selection.v-select__selection--comma {
-  color: #2850da !important;
-}
-.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 5px;
-  border-left: 1px solid #2850da;
-  padding-left: 10px;
-  height: 34px;
-}
-.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
-  .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding-top: 5px;
-  border-left: 1px solid #2850da;
-  padding-left: 10px;
-  height: 34px;
-}
-.searchproducts-cancel-buttons.v-icon.v-icon::after {
-  opacity: 0 !important;
-}
-.categorybaseproducts-sortby-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-overflow-button .v-text-field__details {
-  display: none;
-}
-.categorybaseproducts-filter-button .v-text-field__details {
-  display: none;
-}
-.filter-component-width .v-expansion-panels {
-  display: inline-block;
-}
-// .v-text-field__details {
-//   display: none;
-// }
-</style>
-<style src="./SearchProducts.scss" lang="scss" scoped />
\ No newline at end of file
diff --git a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss b/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss
deleted file mode 100644
index 6b856eb..0000000
--- a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-table, th, td {
-    border: 1px solid black;
-  }
\ No newline at end of file
diff --git a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue b/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue
deleted file mode 100644
index f6af6b2..0000000
--- a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue
+++ /dev/null
@@ -1,695 +0,0 @@
-<template>
-  <div>
-    <div v-if="pageContent.length">
-      <div v-html="getPageContent()"></div>
-    </div>
-  </div>
-</template>
-<script>
-/* eslint-disable */
-export default {
-  name: "ShippingAndDeliveryComponent",
-  components: {},
-  computed: {
-    pageContent: function() {
-      return this.$store.state.layout.pageContent;
-    },
-  },
-  data: () => ({
-    pageUrlKey: "shipping-and-delivery",
-  }),
-  methods: {
-    getPageContent() {
-      if (this.pageContent.length) {
-        let data = this.pageContent.filter(element => {
-          return element.identifier === "shipping-and-delivery";
-        });
-        if (data.length > 0) {
-          let path = data[0].content;
-          var div = document.createElement("div");
-          div.innerHTML = path;
-          let imgSrcUrls = div.getElementsByTagName("img");
-          for (let i = 0; i < imgSrcUrls.length; i++) {
-            let urlValue = imgSrcUrls[i].getAttribute("src");
-            if (urlValue) {
-              imgSrcUrls[i].setAttribute(
-                "src",
-                this.imageBasePathUrl() +
-                  "/media/" +
-                  imgSrcUrls[i].src
-                    .replace(window.location.href, "")
-                    .replace(window.location.origin, "")
-                    .replace(/%22%7D%7D/g, "")
-                    .replace(/%7B%7B/g, "")
-                    .replace(/%20url=%22/g, "")
-                    .replace("media", "")
-              );
-            }
-          }
-          return div.innerHTML;
-        }
-      }
-    },
-    imageBasePathUrl() {
-      return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
-    }
-  },
-  mounted() {
-    window.onload = function() {
-      document.getElementById("firstColumn").onmouseover = function() {
-        firstcolumnFunction();
-      };
-      document.getElementById("firstColumnOut").onmouseout = function() {
-        firstcolumnFunctionout();
-      };
-
-      document.getElementById("secondColumn").onmouseover = function() {
-        secondcolumnFunction();
-      };
-      document.getElementById("secondColumnOut").onmouseout = function() {
-        secondcolumnFunctionout();
-      };
-
-      document.getElementById("thirdColumn").onmouseover = function() {
-        thirdcolumnFunction();
-      };
-      document.getElementById("thirdColumnOut").onmouseout = function() {
-        thirdcolumnFunctionout();
-      };
-
-      function firstcolumnFunction() {
-        var x = document.getElementById("actualTable");
-        var y = document.getElementById("firstColumnTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-      function firstcolumnFunctionout() {
-        var x = document.getElementById("firstColumnTable");
-        var y = document.getElementById("actualTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-      function secondcolumnFunction() {
-        var x = document.getElementById("actualTable");
-        var y = document.getElementById("secondColumnTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-      function secondcolumnFunctionout() {
-        var x = document.getElementById("secondColumnTable");
-        var y = document.getElementById("actualTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-
-      function thirdcolumnFunction() {
-        var x = document.getElementById("actualTable");
-        var y = document.getElementById("thirdColumnTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-      function thirdcolumnFunctionout() {
-        var x = document.getElementById("thirdColumnTable");
-        var y = document.getElementById("actualTable");
-
-        y.style.display = "table";
-        x.style.display = "none";
-      }
-
-      document.getElementById("firstCall").onclick = function() {
-        firstTableFunction();
-      };
-      document.getElementById("secondCall").onclick = function() {
-        secondTableFunction();
-      };
-      document.getElementById("thirdCall").onclick = function() {
-        thirdTableFunction();
-      };
-
-      document.getElementById("fourCall").onclick = function() {
-        fourTableFunction();
-      };
-
-      document.getElementById("fiveCall").onclick = function() {
-        fiveTableFunction();
-      };
-
-      document.getElementById("sixCall").onclick = function() {
-        sixTableFunction();
-      };
-      function firstTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("secondTable");
-        var z = document.getElementById("thirdTable");
-        if (x.style.display === "none") {
-          x.style.display = "block";
-          y.style.display = "none";
-          z.style.display = "none";
-        } else {
-          y.style.display = "block";
-          x.style.display = "none";
-          z.style.display = "none";
-        }
-      }
-      function secondTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("secondTable");
-        var z = document.getElementById("thirdTable");
-
-        if (y.style.display === "none") {
-          y.style.display = "block";
-          x.style.display = "none";
-          z.style.display = "none";
-        } else {
-          y.style.display = "none";
-          z.style.display = "none";
-
-          x.style.display = "block";
-        }
-      }
-      function thirdTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("thirdTable");
-        var z = document.getElementById("secondTable");
-
-        if (y.style.display === "none") {
-          y.style.display = "block";
-          x.style.display = "none";
-          z.style.display = "none";
-        } else {
-          y.style.display = "none";
-          z.style.display = "none";
-          x.style.display = "block";
-        }
-      }
-      function fourTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("thirdTable");
-        var z = document.getElementById("secondTable");
-
-        if (y.style.display === "none") {
-          y.style.display = "block";
-          x.style.display = "none";
-          z.style.display = "none";
-        } else {
-          y.style.display = "none";
-          z.style.display = "none";
-          x.style.display = "block";
-        }
-      }
-      function fiveTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("thirdTable");
-        var z = document.getElementById("secondTable");
-
-        if (y.style.display === "none") {
-          y.style.display = "block";
-          x.style.display = "none";
-          z.style.display = "none";
-        } else {
-          y.style.display = "none";
-          z.style.display = "none";
-          x.style.display = "block";
-        }
-      }
-
-      function sixTableFunction() {
-        var x = document.getElementById("firstTable");
-        var y = document.getElementById("thirdTable");
-        var z = document.getElementById("secondTable");
-
-        if (z.style.display === "none") {
-          y.style.display = "none";
-          x.style.display = "none";
-          z.style.display = "block";
-        } else {
-          y.style.display = "block";
-          z.style.display = "none";
-          x.style.display = "none";
-        }
-      }
-
-       document.getElementById("openDayOne").onclick = function() {
-        showDayOneOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
-      };
-       document.getElementById("openDaySecond").onclick = function() {
-        showDaySecondOptions(),closeDayOneOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
-      };
-       document.getElementById("openDayThird").onclick = function() {
-        showDayThirdOptions(),closeDaySecondOptions(),closeDayOneOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
-      };
-       document.getElementById("openDayFour").onclick = function() {
-        showDayFourOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayOneOptions(),closeDayFiveOptions(),closeDaySixOptions();
-      };
-       document.getElementById("openDayFive").onclick = function() {
-        showDayFiveOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayOneOptions(),closeDaySixOptions();
-      };
-       document.getElementById("openDaySix").onclick = function() {
-        showDaySixOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDayOneOptions();
-      };
-      function showDayOneOptions() {
-        var x = document.getElementById("dayOneOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("dayOneOptions").onclick = function() {
-        closeDayOneOptions();
-      };
-       function closeDayOneOptions() {
-        var x = document.getElementById("dayOneOptions");
-          x.style.display = "none";
-      }
-      function showDaySecondOptions() {
-        var x = document.getElementById("daySecondOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("daySecondOptions").onclick = function() {
-        closeDaySecondOptions();
-      };
-       function closeDaySecondOptions() {
-        var x = document.getElementById("daySecondOptions");
-          x.style.display = "none";
-      }
-      function showDayThirdOptions() {
-        var x = document.getElementById("dayThirdOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("dayThirdOptions").onclick = function() {
-        closeDayThirdOptions();
-      };
-       function closeDayThirdOptions() {
-        var x = document.getElementById("dayThirdOptions");
-          x.style.display = "none";
-      }
-      function showDayFourOptions() {
-        var x = document.getElementById("dayFourOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("dayFourOptions").onclick = function() {
-        closeDayFourOptions();
-      };
-         function closeDayFourOptions() {
-        var x = document.getElementById("dayFourOptions");
-          x.style.display = "none";
-      }
-      function showDayFiveOptions() {
-        var x = document.getElementById("dayFiveOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("dayFiveOptions").onclick = function() {
-        closeDayFiveOptions();
-      };
-      function closeDayFiveOptions() {
-        var x = document.getElementById("dayFiveOptions");
-          x.style.display = "none";
-      }
-       function showDaySixOptions() {
-        var x = document.getElementById("daySixOptions");
-          x.style.display = "block";
-      }
-       document.getElementById("daySixOptions").onclick = function() {
-        closeDaySixOptions();
-      };
-      function closeDaySixOptions() {
-        var x = document.getElementById("daySixOptions");
-          x.style.display = "none";
-      }
-
-
-      document.getElementById("openDayOneMobileView").onclick = function() {
-        showDayOneOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
-      };
-       document.getElementById("openDaySecondMobileView").onclick = function() {
-        showDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
-      };
-       document.getElementById("openDayThirdMobileView").onclick = function() {
-        showDayThirdOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
-      };
-       document.getElementById("openDayFourMobileView").onclick = function() {
-        showDayFourOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
-      };
-       document.getElementById("openDayFiveMobileView").onclick = function() {
-        showDayFiveOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayOneOptionsMobileView(),closeDaySixOptionsMobileView();
-      };
-       document.getElementById("openDaySixMobileView").onclick = function() {
-        showDaySixOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDayOneOptionsMobileView();
-      };
-      function showDayOneOptionsMobileView() {
-        var x = document.getElementById("dayOneOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("dayOneOptionsMobileView").onclick = function() {
-        closeDayOneOptionsMobileView();
-      };
-       function closeDayOneOptionsMobileView() {
-        var x = document.getElementById("dayOneOptionsMobileView");
-          x.style.display = "none";
-      }
-      function showDaySecondOptionsMobileView() {
-        var x = document.getElementById("daySecondOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("daySecondOptionsMobileView").onclick = function() {
-        closeDaySecondOptionsMobileView();
-      };
-       function closeDaySecondOptionsMobileView() {
-        var x = document.getElementById("daySecondOptionsMobileView");
-          x.style.display = "none";
-      }
-      function showDayThirdOptionsMobileView() {
-        var x = document.getElementById("dayThirdOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("dayThirdOptionsMobileView").onclick = function() {
-        closeDayThirdOptionsMobileView();
-      };
-       function closeDayThirdOptionsMobileView() {
-        var x = document.getElementById("dayThirdOptionsMobileView");
-          x.style.display = "none";
-      }
-      function showDayFourOptionsMobileView() {
-        var x = document.getElementById("dayFourOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("dayFourOptionsMobileView").onclick = function() {
-        closeDayFourOptionsMobileView();
-      };
-         function closeDayFourOptionsMobileView() {
-        var x = document.getElementById("dayFourOptionsMobileView");
-          x.style.display = "none";
-      }
-      function showDayFiveOptionsMobileView() {
-        var x = document.getElementById("dayFiveOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("dayFiveOptionsMobileView").onclick = function() {
-        closeDayFiveOptionsMobileView();
-      };
-      function closeDayFiveOptionsMobileView() {
-        var x = document.getElementById("dayFiveOptionsMobileView");
-          x.style.display = "none";
-      }
-       function showDaySixOptionsMobileView() {
-        var x = document.getElementById("daySixOptionsMobileView");
-          x.style.display = "block";
-      }
-       document.getElementById("daySixOptionsMobileView").onclick = function() {
-        closeDaySixOptionsMobileView();
-      };
-      function closeDaySixOptionsMobileView() {
-        var x = document.getElementById("daySixOptionsMobileView");
-          x.style.display = "none";
-      }
-    };
-  },
-  created() {
-    // this.$store.dispatch("block/fetchOne",10)
-    //this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
-    //this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
-  }
-};
-</script>
-<style lang="scss">
-table,
-th,
-td {
-  border: 1px solid #2850da;
-  border-collapse: collapse;
-}
-table {
-  width: 100%;
-}
-th,
-td {
-  padding: 10px;
-}
-#secondTable {
-  display: none;
-}
-#thirdTable {
-  display: none;
-}
-#firstColumnTable {
-  display: none;
-}
-#secondColumnTable {
-  display: none;
-}
-#thirdColumnTable {
-  display: none;
-}
-th {
-  background-color: #2850da;
-  width: 30%;
-}
-.shipping-delivery-map-image{
-   width:100%;
-  min-height: 415px;
-}
-.shipping-delivery-col-10{
-  max-width:83%;
-}
-.shipping-delivery-image{
-  width:100%;
-}
-.shipping-delivery-col-4 {
-  width: 33.33%;
-}
-.shipping-delivery-row {
-  display: flex;
-}
-.shipping-delivery-height-315 {
-  height: 315px;
-}
-.shipping-delivery-cols-6 {
-  width: 50%;
-}
-.shipping-delivery-ups-first {
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.shipping-delivery-ups-second {
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.shipping-delivery-ups-third {
-  background-position: left center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.shipping-delivery-page-primary-link {
-  color: #2850da !important;
-  & .shipping-delivery-page-icon {
-    background-image: url("@/assets/right-arrow.png");
-    max-width: 22px;
-    height: 22px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-.shipping-delivery-page-primary-link:hover {
-  color: #fff !important;
-  & .shipping-delivery-page-icon {
-    background-image: url("@/assets/right-arrow-white.png");
-    max-width: 22px;
-    height: 22px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-.shipping-delivery-page-link {
-  color: #ccb7ff !important;
-  & .shipping-delivery-page-icon {
-    background-image: url("@/assets/right-hover-arrow.png");
-    max-width: 22px;
-    height: 22px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-.shipping-delivery-page-link:hover {
-  color: #fff !important;
-  & .shipping-delivery-page-icon {
-    background-image: url("@/assets/right-arrow-white.png");
-    max-width: 22px;
-    height: 22px;
-    background-position: right center;
-    background-size: contain;
-  }
-}
-.showonhover {
-  width: 30%;
-}
-.shipping-delivery-hero-min-height-800 {
-  min-height: 800px;
-}
-.shipping-delivery-horizontal-line {
-  border: 0.0625rem solid #2850da !important;
-  width: 100%;
-  content: "";
-  display: block;
-}
-.shipping-delivery-vertical-line {
-  border-left: 1px solid #2850da;
-  height: 35px;
-}
-.shipping-delivery-days-button {
-  display: flex;
-  align-items: center;
-  width: 130px;
-  border: thin solid #2850da;
-}
-.shipping-delivery-days-button-mobileview {
-  display: flex;
-  align-items: center;
-  width:100% ;
-   border:none!important;
-}
-
-.shipping-delivery-dayone-inside {
-  display: flex;
-  align-items: center;
-  width: 130px;
-}
-.shipping-delivery-days-options {
-  display: none;
-}
-.shipping-delivery-days-button:hover .shipping-delivery-days-options {
-  display: block;
-  position: absolute;
-  background-color: #fff;
-  width: 130px;
-  margin-left: -1px;
-  z-index: 9999;
-  border: thin solid #2850da;
-}
-#dayOneOptions{
-  display:none;
-}
-#daySecondOptions{
-  display:none;
-}
-#dayThirdOptions{
-  display:none;
-}
-#dayFourOptions{
-  display:none;
-}
-#dayFiveOptions{
-  display:none;
-}
-#daySixOptions{
-  display:none;
-}
-#dayOneOptionsMobileView{
-  display:none;
-}
-#daySecondOptionsMobileView{
-  display:none;
-}
-#dayThirdOptionsMobileView{
-  display:none;
-}
-#dayFourOptionsMobileView{
-  display:none;
-}
-#dayFiveOptionsMobileView{
-  display:none;
-}
-#daySixOptionsMobileView{
-  display:none;
-}
-.shipping-delivery-days-options-mobileview {
-  display: block;
-  position: absolute;
-  background-color: #fff;
-  width: 130px;
-  margin-left: -1px;
-  z-index: 9999;
-  border: thin solid #2850da;
-}
-.shipping-delivery-dayone-square {
-  width: 35px;
-  height: 35px;
-}
-.shipping-delivery-daysix-inside-square {
-  width: 35px;
-  height: 35px;
-  border-bottom: thin solid #2850da;
-}
-.shipping-delivery-daysecond-square {
-  opacity: 0.8 !important;
-  width: 35px;
-  height: 35px;
-}
-.shipping-delivery-daythird-square {
-  opacity: 0.6 !important;
-  width: 35px;
-  height: 35px;
-}
-.shipping-delivery-dayfour-square {
-  opacity: 0.4 !important;
-  width: 35px;
-  height: 35px;
-}
-.shipping-delivery-dayfive-square {
-  opacity: 0.2 !important;
-  width: 35px;
-  height: 35px;
-}
-.shipping-delivery-daysix-square {
-  opacity: 0 !important;
-  width: 35px;
-  height: 35px;
-}
-
-.plus {
-  display: inline-block;
-  width: 35px;
-  height: 35px;
-  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
-  background-position: center;
-  background-size: 40% 2px, 2px 40%; /*thickness = 2px, length = 50% (25px)*/
-  background-repeat: no-repeat;
-}
-.minus {
-  display: inline-block;
-  width: 35px;
-  height: 35px;
-  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
-  background-position: center;
-  background-size: 40% 2px; /*thickness = 2px, length = 50% (25px)*/
-  background-repeat: no-repeat;
-}
-@media (min-width:600px) and (max-width:768px) {
-  .shipping-delivery-days-button {
-  display: flex;
-  align-items: center;
-  width: 100px;
-  border: thin solid #2850da;
-}
-    
-}
-@media screen and (max-width: 600px) {
-  .shipping-delivery-cols-6 {
-    width: 100%;
-  }
-  th {
-    background-color: #c6c9d3;
-    width: 50%;
-  }
-  .shipping-delivery-row {
-    display: block;
-  }
-  .shipping-delivery-col-4 {
-    width: 100%;
-  }
-}
-</style>
-<style src="./ShippingAndDeliveryComponent.scss" lang="scss" scoped /> 
\ No newline at end of file
diff --git a/src/routes/retailer/cart_products.vue b/src/routes/retailer/cart_products.vue
index d2a17db..afc1768 100644
--- a/src/routes/retailer/cart_products.vue
+++ b/src/routes/retailer/cart_products.vue
@@ -21,9 +21,8 @@
         <v-col cols="12" sm="12" md="12">
           <v-col cols="12" sm="12" md="8">
            
-            <v-menu location="bottom" attach>
-              <template v-slot:activator="{ props}">
                 <v-text-field
+                 id="menu-activator"
                   prepend-inner-icon="mdi-magnify"
                   placeholder="Enter Item, Name, Keyword"
                   v-model="searchData"                  
@@ -34,15 +33,17 @@
                   v-bind="props"
                 >
                 </v-text-field>
-              </template>
+        <v-menu activator="#menu-activator" contained location-strategy='connected' attach>
                 <v-card tile flat v-if="searchData">
+                    <v-container>
                   <RetailerSearchProducts @actionClose="showSnackBarMessage"/>
+                    </v-container>
                 </v-card>
                  <v-card  v-else>
                    <div class="fontcolor-bordeaux pa-1">Please type  Item, Name, or Keyword to search</div>
                 </v-card>
-              
-            </v-menu>
+        </v-menu> 
+          
           </v-col>
         </v-col>
       </v-row>