Merge branch 'beta' of git.treelet.net:crane/retailer-vue into beta

src/components/gate/SignInComponent.vue

@@ -47,7 +47,7 @@
             <router-link class="text-decoration-none" :to="{name:'SignUpPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign Up</router-link>
           </v-hover>
         </v-col>-->
-        <v-col cols="12" class="pt-0 mt-n1">
+        <v-col cols="12"  >
           Forgot your password?
           <v-hover v-slot:default="{ hover }">
             <router-link class="text-decoration-none" :to="{name:'forgot-password'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Forgot Password</router-link>

src/components/layout/Layout.vue

@@ -258,6 +258,7 @@
     </HeroContainer>
     <div></div>
     <router-view />
+    
   </div>
 </template>
 

src/components/retailer/layout/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="d-flex flex-column height-100">
     <v-navigation-drawer
       v-model="showMenu"
       v-if="showMenu"
@@ -47,12 +47,16 @@
     <v-content>
       <router-view class="pa-4" />
     </v-content>
+     <FooterComponent />
+   
   </div>
 </template>
 
 
 <script>
 import Header from "@/components/retailer/layout/header/Header";
+import FooterComponent from "@/components/retailer/layout/footer/FooterComponent"
+
 import { createHelpers } from "vuex-map-fields";
 
 const { mapFields } = createHelpers({
@@ -64,7 +68,8 @@ export default {
   name: "Layout",
 
   components: {
-    Header
+    Header,
+    FooterComponent
   },
 
   props: {

src/components/retailer/layout/footer/FooterComponent.scss

@@ -1,57 +1,10 @@
-.footer-component-border {
+.footer-background-color{
-    background: #FFFFFF!important;
+background-color: #fbfbf5 !important;
-    border-top: 1px solid rgba(0, 0, 0, 0.10)!important;
+border-top: 4px solid #91abc3;
+border-bottom: 4px solid #91abc3;
 }
+.text-decoration-none:hover{
+    color: #2850da;
 
-.footer-fontcolor-black-darken {
-    color: #1D1D1D!important;
-}
-
-.footer-component-lighten-5 {
-    color: #dcdddd !important;
-}
-
-a.footer-link {
-    text-decoration: none;
-}
-
-@media screen and (max-width:600px) {
-    .footer-fontcolor-black-darken {
-        color: rgba(0, 0, 0, 0.50) !important
-    }
-}
-
-
-/*************************    Override the Vuetify classes values ***** */
-
-.footerpage_page_footer.v-footer {
-    font-size: 0.875rem !important;
-}
-
-.footerpage_email_textbox .v-input__slot {
-    border: 1px solid rgba(0, 0, 0, 0.10) !important;
-    border-radius: 2px !important;
-}
-
-.footerpage_submit_email_btn.v-btn {
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-}
-
-.footerpage_min_height {
-    min-height: 1.5625rem !important;
-}
-
-.footerpage_word_break.v-list-item__title {
-    white-space: unset !important; //for word break
-}
-
-.footer-list_subheader {
-    height: 1.875rem !important;
-    padding: 0 0.5rem !important;
-}
-
-.footerpage_email_textbox.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
-    min-height: 0.625rem !important;
-    height: 2.3125rem !important;
 }
+// 

src/components/retailer/layout/footer/FooterComponent.vue

@@ -1,152 +1,25 @@
 <template>
-  <div>
+  
-    <v-footer class="py-sm-0 px-sm-0 pb-0 px-0 page-footer footer-component-border">
+    <v-footer class="py-sm-0 px-sm-0 pb-0 px-0 my-4" >
-      <v-row
+      <v-row>
-        align="center"
-        justify="center"
-        class="d-flex flex-column-reverse flex-sm-row pa-0 ma-0"
-      >
         <v-col
-          class="primary pb-md-3 px-sm-10 px-md-6 pt-md-12 pt-sm-4 pt-6 pl-lg-12 pr-lg-12"
+          class="footer-background-color "
           cols="12"
-          md="8"
+          md="12"
-          sm="8"
+          sm="12"
-          lg="8"
+          lg="12"
-          xl="9"
+          xl="12"
+          
         >
-          <v-container class="pb-0 mb-0">
+          <v-container class="text-center">
-            <v-row class>
+            <div class="pt-2" v-html="customerService"></div>
-              <v-col cols="12" lg="3" md="3" sm="6">
+            <div class="pt-2" v-html="stayInTouch"></div>
-                <v-list class="transparent-background py-1" flat>
+            <div class="pt-2" v-html="copyrightString"></div>
-                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">ACCOUNT</v-subheader>
-                  <v-list-item-group>
-                    <v-list-item
-                      class="px-2 footerpage_min_height"
-                      href="#"
-                      v-for="(acc,index) in accountLinks"
-                      :key="index"
-                    >
-                      <v-list-item-title class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1">{{acc}}</v-list-item-title>
-                    </v-list-item>
-                  </v-list-item-group>
-                </v-list>
-              </v-col>
-              <v-col cols="12" lg="3" md="3" sm="6">
-                <v-list class="transparent-background py-1" flat>
-                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">COMPANY</v-subheader>
-                  <v-list-item-group>
-                    <v-list-item
-                      class="px-2 footerpage_min_height"
-                      href="#"
-                      v-for="(company,index) in companyLinks"
-                      :key="index"
-                    >
-                      <v-list-item-title
-                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
-                      >{{company}}</v-list-item-title>
-                    </v-list-item>
-                  </v-list-item-group>
-                </v-list>
-              </v-col>
-              <v-col cols="12" lg="3" md="3" sm="6">
-                <v-list class="transparent-background py_1" flat>
-                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">HELP</v-subheader>
-                  <v-list-item-group>
-                    <v-list-item
-                      class="px-2 footerpage_min_height"
-                      href="#"
-                      v-for="(help,index) in helpLinks"
-                      :key="index"
-                    >
-                      <v-list-item-title
-                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
-                      >{{help}}</v-list-item-title>
-                    </v-list-item>
-                  </v-list-item-group>
-                </v-list>
-              </v-col>
-              <v-col cols="12" lg="3" md="3" sm="6">
-                <v-list class="transparent-background py-1" flat>
-                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">CONNECT</v-subheader>
-                  <v-list-item-group>
-                    <v-list-item
-                      class="px-2 footerpage_min_height"
-                      href="#"
-                      v-for="(connect,index) in connectLinks"
-                      :key="index"
-                    >
-                      <v-list-item-title
-                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
-                      >{{connect}}</v-list-item-title>
-                    </v-list-item>
-                  </v-list-item-group>
-                </v-list>
-              </v-col>
-            </v-row>
           </v-container>
-          <v-container>
-            <v-row class="d-flex flex-column-reverse flex-sm-row mt-md-5 mt-sm-5 pa-0 ma-0">
-              <v-col
-                md="auto"
-                sm="12"
-                lg="auto"
-                class="white--text pr-sm-0 pl-md-4 pb-sm-1 pt-1 pt-sm-1 pt-md-3 mr-md-3 mr-lg-4"
-              >
-                <div v-html="copyrightString" class="d-inline-block caption"></div>
-              </v-col>
-              <v-col
-                md="auto"
-                sm="12"
-                lg="auto"
-                class="white--text pl-md-0 ml-sm-0 ml-md-0 pt-sm-1 pr-sm-1 pt-md-3 pb-1"
-              >
-                <div v-html="termsCondString" class="d-inline-block caption text-decoration-none"></div>
-                <div v-html="privacyPolicyString" class="d-inline-block caption text-decoration-none"></div>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-col>
-        <v-col md="4" sm="4" lg="4" xl="3" class="d-sm-flex white">
-          <v-img
-              :src="require('@/assets/Whiplash Panel@2x.png')"
-            ></v-img>
-          <!-- <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
-            <div class="pa-md-1">
-              <v-col md="12" sm="12" xl="12" lg="12">
-                <span
-                  class="primary--text h3 font-weight-regular text-uppercase"
-                >{{stayInTouch}}</span>
-                <p
-                  class="footer-fontcolor-black-darken body mb-0 pt-4 mt-md-4 mt-sm-4 pt-sm-0"
-                >Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
-              </v-col>
-              <v-col md="12" sm="12" xl="12" lg="12" class="pb-0 pt-2 pt-sm-3">
-                <v-row no-gutters>
-                  <v-col md="12" sm="12" xl="12" lg="12">
-                    <v-text-field
-                      label="Your Email"
-                      id="emailTextBox"
-                      class="footerpage_email_textbox fontsize-14 regular-font"
-                      single-line
-                      solo
-                      flat
-                      tile
-                    >
-                      <v-btn
-                        color="primary"
-                        class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body"
-                        slot="append"
-                      >SUBMIT</v-btn>
-                    </v-text-field>
-                  </v-col>
-                </v-row>
-              </v-col>
-            </div>
-          </v-row> -->
         </v-col>
       </v-row>
     </v-footer>
-  </div>
+
 </template>
 
 <script>
@@ -154,32 +27,14 @@ export default {
   name: "FooterComponent",
   data() {
     return {
-      listSubHeaderColor: "red",
+      customerService:
-      accountLinks: ["My Account", "Shipping & Delivery", "Order Status"],
+        "<div class='fontsize-16 title-color-black whyte-book-font' >Retail Customer Service <a href='tel:1-877-478-4849' class=' fontsize-16 text-decoration-none title-color-black whyte-book-font'> 1-877-478-4849 </a></div>",
-      companyLinks: [
+      stayInTouch:
-        "About Crane",
+        " <a href='mailto:retailerportal@crane.com' class=' fontsize-16 text-decoration-none title-color-black whyte-book-font'>  FEEDBACK OR QUESTIONS? </a> ",
-        "In the Workshop",
+      copyrightString: "<div class='fontsize-16 title-color-black whyte-book-font'  >© 2021 Crane Stationery</div>",
-        "Post Script Blog",
-        "Etiquette",
-        "Careers"
-      ],
-      helpLinks: ["Retail Locator", "Crane Concierge", "Returns", "FAQs"],
-      connectLinks: [
-        "Facebook",
-        "Instagram",
-        "Pininterest",
-        "",
-        "1.800.268.2281",
-        "customerservice@crane.com"
-      ],
-      copyrightString: "&copy; 2019 Crane stationary LLC",
-      stayInTouch: "LET'S STAY IN TOUCH",
-      termsCondString:
-        "<a href='#' class='white--text footer-link'> Terms & Conditions </a>",
-      privacyPolicyString:
-        "&emsp; <a href='#' class='white--text footer-link'>  Privacy & Policy </a>"
     };
-  }
+  },
 };
 </script>
-<style src="./FooterComponent.scss" lang="scss"/>
+<style src="./FooterComponent.scss" lang="scss"    />
+

src/components/retailer/layout/header/Header.scss

@@ -19,10 +19,10 @@
     outline: none !important;
 }
 .meheader-category-text{
-    color:#ffffff;
+    color:#111;
 }
 .meheader-category-text:hover{
-    color: #CCB7FF !important;
+    color: #2850da;
 }
 .memodule-header-autocomplete.v-select.v-select--is-menu-active
   .v-input__icon--append
@@ -104,3 +104,7 @@ margin-bottom: 0px !important;
 .me-header-search-field .theme--dark.v-label {
     color:#1d1d1d;
 }
+.v-menu__content,.v-list{
+    border-radius: 0px !important;
+    top: 64px !important;
+}

src/components/retailer/layout/header/Header.vue

@@ -16,6 +16,7 @@
         contain
       ></v-img>
     </v-col>
+ 
     <v-col class="d-flex justify-center">
       <v-img
         class="ml-md-2 cursor-pointer d-md-none d-lg-none"
@@ -76,10 +77,46 @@
         </v-toolbar-items>
       </div> -->
     </v-col>
+
     <v-col class="d-flex justify-end pr-0">
-      <!--<v-btn icon @click="goToShopping()">
+      <!-- <v-btn icon @click="goToShopping()">
       <v-icon>mdi-shopping-outline</v-icon>
-      </v-btn>-->
+      </v-btn> -->
+      <div class="mt-3 mr-5 d-none d-md-block">
+        <v-menu offset-y v-if="userAuth">
+          <template v-slot:activator="{ on, attrs }">
+            <div color="primary" >
+              <span  v-bind="attrs" v-on="on" class="text-uppercase cursor-pointer" >  Welcome,</span>
+              <span class="text-uppercase cursor-pointer pl-2">{{ userName}}</span>
+            </div>
+           
+          </template>
+          <v-list class="pr-10  d-none d-md-block">
+            <v-list-item  class="pr-10">
+              <v-list-item-title
+                @click="goTohomePage()"
+                class="cursor-pointer meheader-category-text"
+                >Retailer Portal</v-list-item-title
+              >
+            </v-list-item>
+            <v-list-item >
+              <v-list-item-title
+                @click="goToAddressBook()"
+                class="cursor-pointer meheader-category-text"
+                >Address Book</v-list-item-title
+              >
+            </v-list-item>
+            <v-list-item> 
+              <v-list-item-title
+                @click="goToLogout()"
+                class="cursor-pointer meheader-category-text"
+                >Logout</v-list-item-title
+              >
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+
       <v-btn
         icon
         class="header-buttons"
@@ -129,7 +166,6 @@
         :width="searchInputWidth"
         height="64"
       >
-      
         <v-text-field
           v-model="search"
           autofocus
@@ -150,6 +186,7 @@
           </template>
         </v-text-field>
       </v-navigation-drawer>
+     
     </v-col>
   </v-app-bar>
 </template>
@@ -163,6 +200,7 @@ import {
   getCategoryOne,
 } from "@/services/util.service";
 import humps from "lodash-humps";
+
 export default {
   name: "Header",
   // components: { SubMenu },
@@ -201,6 +239,9 @@ export default {
     },
   },
   computed: {
+      userName:function(){
+      return this.$store.state.accountOne.one.firstname;
+     },
     userAuth: function () {
       return this.$store.state.auth.userAuth;
     },
@@ -245,6 +286,11 @@ export default {
     },
   },
   methods: {
+   
+    goToAddressBook(){
+      return this.$router.push({ name : "AddressBook"})
+    },
+   
     pageName() {
       return this.$route.name;
     },

src/routes/retailer/boxed-products-ordering.vue

@@ -54,7 +54,11 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+      
+          to
+        @click.native="goToLink('http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.pdf')"
+                target="_blank"
+                :class="hover ? 'primary--text':'black--text'"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -102,6 +106,14 @@
 <script>
 export default {
   name: "BoxedProductsOrdering",
+  methods:{
+    goToLink(pageLink) {
+      // window.location.replace(pageLink);
+      //} else {
+      window.open(pageLink, "_blank");
+      //}
+    },
+  }
 };
 </script>