From 27246a07b8b574d0bd4e6929f9e9693bbf5186db Mon Sep 17 00:00:00 2001
From: User <gajanan10@gmail.com>
Date: Fri, 21 Apr 2023 14:52:25 +0530
Subject: [PATCH] ui fixes

---
 package.json                                  | 15 ++---
 src/components/layout/header/Header.vue       | 58 ++++++++++--------
 .../header/NavigationDrawerComponent.vue      | 11 ++--
 .../address/GuestShippingAddressForm.vue      |  3 +-
 .../address/ShippingAddressFormComponent.vue  |  2 +-
 src/components/retailer/layout/Layout.vue     | 29 +++++----
 .../retailer/layout/header/Header.vue         |  9 ++-
 src/main.js                                   | 10 ++-
 src/routes/retailer/address_book.vue          | 61 ++++++++++---------
 src/routes/retailer/checkout_page.vue         |  2 +-
 yarn.lock                                     | 36 +++++++++--
 11 files changed, 148 insertions(+), 88 deletions(-)

diff --git a/package.json b/package.json
index 77e891f..a3dc872 100644
--- a/package.json
+++ b/package.json
@@ -22,26 +22,28 @@
         "deploy:staging": "AWS_PROFILE=crane vite s3-deploy --mode staging",
         "lint": "vite lint"
     },
-    "dependencies": {    
+    "dependencies": {
+        "@vuetify/vite-plugin": "^1.0.0-alpha.11",
         "core-js": "^3.8.3",
         "fuse.js": "^6.4.2",
         "js-base64": "^2.5.1",
         "lodash-humps": "^3.1.5",
+        "vite-plugin-s3": "^0.3.0",
+        "vite-plugin-vuetify": "^1.0.2",
         "vue": "^3.2.47",
-        "vue3-cookies": "^1.0.6",
         "vue-meta": "^2.4.0",
         "vue-router": "4",
         "vue-tel-input": "^4.4.0",
+        "vue3-cookies": "^1.0.6",
         "vue3-google-map": "^0.14.0",
+        "vue3-tel-input": "^1.0.4",
         "vueperslides": "^2.8.2",
         "vuetify": "^3.0.0-beta.11",
-        "@vuetify/vite-plugin": "^1.0.0-alpha.11",
-        "vite-plugin-vuetify": "^1.0.2",
-        "vite-plugin-s3": "^0.3.0",
         "vuex": "^4.0.2",
         "vuex-map-fields": "^1.3.6"
     },
     "devDependencies": {
+        "@vitejs/plugin-vue": "^4.1.0",
         "babel-eslint": "^10.0.3",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
@@ -49,11 +51,10 @@
         "sass": "^1.62.0",
         "sass-loader": "^13.2.2",
         "vite": "^4.2.1",
-        "@vitejs/plugin-vue": "^4.1.0",
         "vite-plugin-aws3": "^0.3.0",
         "vue-template-compiler": "^2.7.14",
         "vue-tsc": "^1.2.0",
-        "vuetify-loader": "^1.9.2" 
+        "vuetify-loader": "^1.9.2"
     },
     "eslintConfig": {
         "root": true,
diff --git a/src/components/layout/header/Header.vue b/src/components/layout/header/Header.vue
index 6d8e7b6..405edc1 100644
--- a/src/components/layout/header/Header.vue
+++ b/src/components/layout/header/Header.vue
@@ -55,8 +55,9 @@
           </v-card>
         </v-menu>
 
-        <v-hover v-slot:default="{ hover }" v-if="!userAuth">
+        <v-hover v-slot:default="{ isHoovering, props }" v-if="!userAuth">
           <v-btn
+          v-bind="props"
             icon
             @click="goToLogin()"
             class="d-none d-md-block header-buttons"
@@ -64,20 +65,21 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'text-primary'"
+              :class="isHoovering ? 'header-category-icon' : 'text-primary'"
               >mdi-account-circle-outline</v-icon
             >
-            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
+            <v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
               >mdi-account-circle-outline</v-icon
             >
           </v-btn>
         </v-hover>
 
-        <v-hover v-slot:default="{ hover }">
+        <v-hover v-slot:default="{ isHoovering, props }">
           <v-btn
+          v-bind="props"
             icon
             :class="
-              hover ? 'text-primary' : textColor ? textColor : 'text-white'
+              isHoovering ? 'text-primary' : textColor ? textColor : 'text-white'
             "
             @click="showSearchInput = true"
             class="d-none d-md-block header-buttons"
@@ -85,10 +87,10 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'text-primary'"
+              :class="isHoovering ? 'header-category-icon' : 'text-primary'"
               >mdi-magnify</v-icon
             >
-            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
+            <v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
               >mdi-magnify</v-icon
             >
           </v-btn>
@@ -124,11 +126,12 @@
           </v-text-field>
         </v-navigation-drawer>
        
-        <v-hover v-slot:default="{ hover }">
+        <v-hover v-slot:default="{ isHovering, props }">
           <v-btn
+          v-bind="props"
             icon
             :class="
-              hover ? 'text-primary' : textColor ? textColor : 'text-white'
+              isHovering ? 'text-primary' : textColor ? textColor : 'text-white'
             "
             class="header-buttons"
             @click.stop="showCartDrawer(true)"
@@ -136,10 +139,10 @@
           >
             <v-icon
               v-if="pageName() == 'CategoryPage'"
-              :class="hover ? 'header-category-icon' : 'text-primary'"
+              :class="isHovering ? 'header-category-icon' : 'text-primary'"
               >mdi-cart-outline</v-icon
             >
-            <v-icon v-else :class="hover ? 'text-primary' : 'text-white'"
+            <v-icon v-else :class="isHovering ? 'text-primary' : 'text-white'"
               >mdi-cart-outline</v-icon
             >
             <span v-if="cartProductsProgress || inProgress">
@@ -188,12 +191,13 @@
       <v-spacer></v-spacer>
        
     </v-app-bar>
+    
     <v-app-bar
       height="56"
       :absolute="!isScrolled"
       :app="isScrolled"
       :color="
-        isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
+        isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
       "
       elevation="0"
       v-else-if="pageName() == 'CheckoutPage'"
@@ -219,8 +223,9 @@
       ></v-img>
       <v-spacer></v-spacer>
     </v-app-bar>
-    <v-hover v-else v-slot:default="{ hover }">
+    <v-hover v-else v-slot:default="{ isHovering, props }">
       <v-app-bar
+      v-bind="props"
         height="56"
         :class="
           pageName() == 'HomePage' &&
@@ -233,7 +238,7 @@
         :absolute="!isScrolled"
         :app="isScrolled"
         :color="
-          isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
+          isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
         "
         elevation="0"
       >
@@ -243,23 +248,23 @@
             :class="textColor"
             class="d-md-none header-menu-button ml-n3 pl-1"
             :color="
-              hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
+              isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
             "
           ></v-app-bar-nav-icon>
           <v-img
-            v-if="!isScrolled && !hover"
-            craneLogoWhite
+            v-if="!isScrolled && !isHovering"
+            :src="craneLogoWhite"
             max-width="100"
             @click="goToHomePage()"
-            class="cursor-pointer d-none d-md-flex"
+            class="cursor-pointer d-none d-md-flex ml-6"
             contain
             aspect-ratio="1"
           ></v-img>
           <v-img
-            v-else-if="(isScrolled && !hover) || hover"
+            v-else-if="(isScrolled && !isHovering) || isHovering"
              :src="craneLogoBlue"
             max-width="100"
-            class="cursor-pointer d-none d-md-flex"
+            class="cursor-pointer d-none d-md-flex ml-6"
             @click="goToHomePage()"
             contain
             aspect-ratio="1"
@@ -267,7 +272,7 @@
         </v-col>
         <v-col class="d-flex justify-center">
           <v-img
-            v-if="!isScrolled && !hover"
+            v-if="!isScrolled && !isHovering"
             craneLogoWhite
             max-width="100"
             @click="goToHomePage()"
@@ -276,7 +281,7 @@
             aspect-ratio="1"
           ></v-img>
           <v-img
-            v-else-if="(isScrolled && !hover) || hover"
+            v-else-if="(isScrolled && !isHovering) || isHovering"
             :src="craneLogoBlue"
             max-width="100"
             class="cursor-pointer d-md-none"
@@ -295,7 +300,7 @@
                   v-on="on"
                   :class="textColor"
                   :color="
-                    hover && !isScrolled
+                    isHovering && !isScrolled
                       ? 'primary'
                       : isScrolled
                       ? 'primary'
@@ -330,7 +335,7 @@
               v-if="!userAuth"
               icon
               :color="
-                hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
+                isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
               "
               @click="goToLogin()"
               :class="textColor"
@@ -345,7 +350,7 @@
             <v-btn
               icon
               :color="
-                hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
+                isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
               "
               @click="showSearchInput = true"
               :class="textColor"
@@ -371,7 +376,7 @@
                 icon
                 :class="textColor"
                 :color="
-                  hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
+                  isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
                 "
                 class="header-buttons mr-n2"
                 @click.stop="showCartDrawer(true)"
@@ -695,6 +700,7 @@ export default {
       }
     },
     goToHomePage() {
+      alert('hello')
       window.open("/", "_self");
     },
     async inactiveCategoryMenu(data) {
diff --git a/src/components/layout/header/NavigationDrawerComponent.vue b/src/components/layout/header/NavigationDrawerComponent.vue
index b287bf1..d09f05d 100644
--- a/src/components/layout/header/NavigationDrawerComponent.vue
+++ b/src/components/layout/header/NavigationDrawerComponent.vue
@@ -18,19 +18,20 @@
           <h2 class="black--text mt-3">Shopping Cart</h2>
         </v-col>
         <v-col cols="5" justify="center">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{ isHovering, props }">
             <v-btn
               large
               tile
+              v-bind="props"
               class="float-right mt-2"
-              :outlined="hover"
-              :color="hover?'white':'primary'"
-              :class="hover?'primary--text header-closedrawer-button':'white--text'"
+              :variant="isHovering"
+              :color="isHovering?'white':'primary'"
+              :class="isHovering?'text-primary header-closedrawer-button':'text-white'"
               depressed
               @click.stop="closeCartDrawer(false)"
             >
               CLOSE
-              <v-icon :class="hover?'primary--text':'white--text'" class="h3">mdi mdi-close</v-icon>
+              <v-icon :class="isHovering?'text-primary':'text-white'" class="h3">mdi mdi-close</v-icon>
             </v-btn>
           </v-hover>
         </v-col>
diff --git a/src/components/retailer/address/GuestShippingAddressForm.vue b/src/components/retailer/address/GuestShippingAddressForm.vue
index 853e243..440dc7d 100644
--- a/src/components/retailer/address/GuestShippingAddressForm.vue
+++ b/src/components/retailer/address/GuestShippingAddressForm.vue
@@ -150,6 +150,7 @@
            <vue-tel-input
             type="number"
             v-model="telephone"
+            mode="international"
             :defaultCountry="setCountryCode"
             :class="phoneNumberError ?  'phonenumber-input-error-border':'phonenumber-custom-input'"
             @input="validateNumber"
@@ -219,7 +220,7 @@
 //import { mapState } from "vuex";
 import { createHelpers } from "vuex-map-fields";
 import { fetchStates } from "@/services/util.service";
-import { VueTelInput } from "vue-tel-input";
+import { VueTelInput } from 'vue3-tel-input'
 
 const { mapFields: mapFieldsGuest } = createHelpers({
   getterType: "guestInfo/getField",
diff --git a/src/components/retailer/address/ShippingAddressFormComponent.vue b/src/components/retailer/address/ShippingAddressFormComponent.vue
index b767f61..9025d00 100644
--- a/src/components/retailer/address/ShippingAddressFormComponent.vue
+++ b/src/components/retailer/address/ShippingAddressFormComponent.vue
@@ -117,7 +117,7 @@
 //import { mapState } from "vuex";
 import { createHelpers } from "vuex-map-fields";
 import { fetchStates } from "@/services/util.service";
-import { VueTelInput } from "vue-tel-input";
+import { VueTelInput } from 'vue3-tel-input'
 
 const { mapFields } = createHelpers({
   getterType: "accountOne/getField",
diff --git a/src/components/retailer/layout/Layout.vue b/src/components/retailer/layout/Layout.vue
index 3329a8a..6eb204e 100644
--- a/src/components/retailer/layout/Layout.vue
+++ b/src/components/retailer/layout/Layout.vue
@@ -1,40 +1,45 @@
 <template>
   <div class="d-flex flex-column height-100">
+    <Header @action="onAction" />
     <v-navigation-drawer
       v-model="showMenu"
       v-if="showMenu"
       :clipped="$vuetify.display.mdAndUp"
       app
-      color="header-background-color darken-3"
-      class="white--text pa-4"
+      color="header-bg-color darken-3"
+      class=" bg-indigo text-white pa-4 mt-6"
     >
       <v-row>
         <v-col cols="12" class="pa-0">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{ isHovering, props }">
             <router-link
-              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
+            v-bind="props"
+              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
               class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
               :to="{name:'AccountDashboard'}"
             >Account Dashboard</router-link>
           </v-hover>
        
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{ isHovering, props }">
             <router-link
-              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
+            v-bind="props"
+              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
               class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
               :to="basicInfo.addresses&&basicInfo.addresses.length?{name:'AddressBook'}:{name:'EditAddressBook' ,params:{addressId:'new'}}"
             >Address Book</router-link>
           </v-hover>
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{ isHovering, props }">
             <router-link
-              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
+            v-bind="props"
+              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
               class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
               :to="{name:'EditAccountInfo',params:{value:'false'}}"
             >Account Information</router-link>
           </v-hover>       
-           <v-hover v-slot:default="{ hover }">
+           <v-hover v-slot:default="{ isHovering, props }">
             <router-link
-              :class="hover ? 'primary--text darken-3 white' : 'white--text'"
+            v-bind="props"
+              :class="isHovering ? 'text-primary bg-white' : 'text-white'"
               class="d-block text-decoration-none h4 pa-2 px-6 my-1"
               to
               @click.native="goToLogout()"
@@ -43,7 +48,7 @@
         </v-col>
       </v-row>
     </v-navigation-drawer>
-    <Header @action="onAction" />
+    
     <v-content>
       <router-view class="pa-4" />
     </v-content>
@@ -56,6 +61,7 @@
 <script>
 import Header from "@/components/retailer/layout/header/Header.vue";
 import FooterComponent from "@/components/retailer/layout/footer/FooterComponent.vue"
+import craneLogoWhite from "@/assets/Crane_Logo_white.png";
 
 import { createHelpers } from "vuex-map-fields";
 
@@ -76,6 +82,7 @@ export default {
     source: String
   },
   data: () => ({
+    craneLogoWhite:craneLogoWhite,
     showMenu: false
   }),
   computed: {
diff --git a/src/components/retailer/layout/header/Header.vue b/src/components/retailer/layout/header/Header.vue
index 8b86d5c..ca8486f 100644
--- a/src/components/retailer/layout/header/Header.vue
+++ b/src/components/retailer/layout/header/Header.vue
@@ -4,13 +4,14 @@
     app
     color="header-background-color darken-3"
     dark
+    class=" bg-indigo text-white pa-4"
   >
     <v-col class="d-flex justify-start pa-0">
       <v-app-bar-nav-icon @click="menuAction()" class="header-buttons" />
       <v-img
         class="ml-md-2 cursor-pointer d-none d-md-flex d-lg-flex"
         @click="goTohomePage()"
-        src="@/assets/Crane_Logo_white.png"
+        :src="craneLogoWhite"
         max-height="45"
         max-width="100"
         contain
@@ -21,7 +22,7 @@
       <v-img
         class="ml-md-2 cursor-pointer d-md-none d-lg-none"
         @click="goTohomePage()"
-        src="@/assets/Crane_Logo_white.png"
+        :src="craneLogoWhite"
         max-height="45"
         max-width="100"
         contain
@@ -200,6 +201,8 @@ import {
   getCategoryOne,
 } from "@/services/util.service";
 import humps from "lodash-humps";
+import craneLogoBlue from "@/assets/Crane_Logo_blue.png";
+import craneLogoWhite from "@/assets/Crane_Logo_white.png";
 
 export default {
   name: "Header",
@@ -207,6 +210,8 @@ export default {
 
   props: [],
   data: () => ({
+    craneLogoBlue:craneLogoBlue,
+    craneLogoWhite:craneLogoWhite,
     activeCategoryMenu: "",
     searchResultList: [],
     searchInProgress: false,
diff --git a/src/main.js b/src/main.js
index 7173935..d76d539 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import VueCookies from 'vue3-cookies';
-
+import VueTelInput from 'vue3-tel-input'
+import 'vue3-tel-input/dist/vue3-tel-input.css'
 import App from './App.vue'
 import router from './multipages'
 import store from './stores';
@@ -10,10 +11,15 @@ import 'vuetify/lib/styles/settings/_variables.scss';
 
 import 'vuetify/dist/vuetify.min.css'
 
+const VueTelInputOptions = {
+    mode: "international",
+    onlyCountries: ['NG', 'GH', "GB", "US", "CA"]
+  }
+
 const app = createApp(App)
 app.use(vuetify)
 app.use(VueCookies)
-
+app.use(VueTelInput, VueTelInputOptions)
 
 app.use(store)
 app.use(router)
diff --git a/src/routes/retailer/address_book.vue b/src/routes/retailer/address_book.vue
index 5cb0eee..c2cf404 100644
--- a/src/routes/retailer/address_book.vue
+++ b/src/routes/retailer/address_book.vue
@@ -3,7 +3,7 @@
     <v-row>
       <v-col cols="12" sm="12" class="fontcolor-black-light">
         <div v-show="!addressId">
-          <p class="h2 mb-5 body-font text-uppercase primary--text pb-2">Address Book</p>
+          <p class="h2 mb-5 body-font text-uppercase text-primary pb-2">Address Book</p>
           <div class="address-book-line my-1"></div>
           <v-row class="mt-12" align="center" justify="center" v-if="inProgress">
             <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
@@ -11,7 +11,7 @@
           <v-row class="mt-4" v-else>
             <v-col cols="12" sm="6" md="6" lg="6">
               <p
-                class="body-font text-uppercase primary--text font-weight-bold"
+                class="body-font text-uppercase text-primary font-weight-bold"
               >Default Billing Address</p>
               <p
                 class="body-font"
@@ -23,12 +23,13 @@
               </div>
               <v-row>
                 <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
+                  <v-hover v-slot:default="{ isHovering, props }">
                     <v-btn
                       @click="editAddress(billingAddressDetails.address,billingAddressDetails.index)"
-                      :outlined="hover"
-                      :color="hover?'white':'primary'"
-                      :class="hover?'primary--text':'white--text'"
+                      v-bind="props"
+                      :variant="isHovering"
+                      :color="isHovering?'white':'primary'"
+                      :class="isHovering?'text-primary':'text-white'"
                       depressed
                       :large="$vuetify.display.mdAndUp?true:false"
                       tile
@@ -40,7 +41,7 @@
             </v-col>
             <v-col cols="12" sm="6" md="6" lg="6">
               <p
-                class="body-font text-uppercase primary--text font-weight-bold"
+                class="body-font text-uppercase text-primary font-weight-bold"
               >Default Shipping Address</p>
               <p
                 class="body-font"
@@ -52,15 +53,16 @@
               </div>
               <v-row>
                 <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
+                  <v-hover v-slot:default="{ isHovering, props }">
                     <v-btn
                       @click="editAddress(shippingAddressDetails.address,shippingAddressDetails.index)"
                       depressed
                       :large="$vuetify.display.mdAndUp?true:false"
                       tile
-                      :outlined="hover"
-                      :color="hover?'white':'primary'"
-                      :class="hover?'primary--text':'white--text'"
+                      v-bind="props"
+                      :variant="isHovering"
+                      :color="isHovering?'white':'primary'"
+                      :class="isHovering?'text-primary':'text-white'"
                       class="body-font my-2 address-book-button"
                     >EDIT</v-btn>
                   </v-hover>
@@ -72,7 +74,7 @@
             <v-col>
               <v-row class="mt-4">
                 <p
-                  class="h3 body-font text-uppercase primary--text pb-2 mb-1 mr-3"
+                  class="h3 body-font text-uppercase text-primary pb-2 mb-1 mr-3"
                 >Additional Address Entries</p>
               </v-row>
             </v-col>
@@ -102,29 +104,31 @@
                 <ShippingAddressComponent :address="address" />
                 <v-row>
                   <v-col cols="2">
-                    <v-hover v-slot:default="{ hover }">
+                    <v-hover v-slot:default="{ isHovering, props }">
                       <v-btn
                         @click="editAddress(address,index)"
                         depressed
                         tile
                         dense
-                        :outlined="hover"
-                        :color="hover?'white':'primary'"
-                        :class="hover?'primary--text':'white--text'"
+                        v-bind="props"
+                        :variant="isHovering"
+                        :color="isHovering?'white':'primary'"
+                        :class="isHovering?'text-primary':'text-white'"
                         class="body-font my-2 address-book-button"
                       >EDIT</v-btn>
                     </v-hover>
                   </v-col>
                   <v-col cols="2">
-                    <v-hover v-slot:default="{ hover }">
+                    <v-hover v-slot:default="{ isHovering, props }">
                       <v-btn
                         @click="deleteAddress(address)"
                         depressed
                         tile
                         dense
-                        :outlined="hover"
-                        :color="hover?'white':'red'"
-                        :class="hover?'red--text':'white--text'"
+                        v-bind="props"
+                        :variant="isHovering"
+                        :color="isHovering?'white':'red'"
+                        :class="isHovering?'text-red':'text-white'"
                         class="body-font my-2 white--text"
                       >DELETE</v-btn>
                     </v-hover>
@@ -134,15 +138,16 @@
             </v-row>
             <v-row>
               <v-col>
-                <v-hover v-slot:default="{ hover }">
+                <v-hover v-slot:default="{ isHovering, props }">
                   <v-btn
                     @click="editAddress()"
                     depressed
                     :large="$vuetify.display.mdAndUp?true:false"
                     tile
-                    :outlined="hover"
-                    :color="hover?'white':'primary'"
-                    :class="hover?'primary--text':'white--text'"
+                    v-bind="props"
+                    :variant="isHovering"
+                    :color="isHovering?'white':'primary'"
+                    :class="isHovering?'text-primary':'text-white'"
                     class="body-font my-2 address-book-button"
                   >ADD NEW ADDRESS</v-btn>
                 </v-hover>
@@ -151,11 +156,11 @@
           </div>
         </div>
         <div v-show="addressId">
-          <p class="h2 mb-5 body-font text-uppercase primary--text">Add New Address</p>
+          <p class="h2 mb-5 body-font text-uppercase text-primary">Add New Address</p>
           <v-form ref="addressBookForm" v-model="valid">
             <v-row>
               <v-col cols="12" sm="6">
-                <p class="h3 body-font text-uppercase primary--text">Contact Information</p>
+                <p class="h3 body-font text-uppercase text-primary">Contact Information</p>
                 <div class="address-book-line mb-5"></div>
                 <!-- <ContactInfoComponent v-bind:contactDetails="basicInfo" ref="contactInfoForm" /> -->
                 <v-form ref="contactForm" v-model="valid" :lazy-validation="lazy">
@@ -358,7 +363,7 @@ import MeVerifyAddressComponent from "@/components/retailer/address/MeVerifyAddr
 import { loginInterrupt } from "@/services/nav";
 import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
 import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
-import { VueTelInput } from "vue-tel-input";
+import { VueTelInput } from 'vue3-tel-input'
 //import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
 
 import { createHelpers } from "vuex-map-fields";
@@ -415,7 +420,7 @@ export default {
   },
   computed: {
     hideAndShowFields: function() {
-      let currentName = this.$router.history.current.name;
+      let currentName = this.$route.name
       if (currentName === "AddressBook") {
         return false;
       }
diff --git a/src/routes/retailer/checkout_page.vue b/src/routes/retailer/checkout_page.vue
index 15183f6..494c5ba 100644
--- a/src/routes/retailer/checkout_page.vue
+++ b/src/routes/retailer/checkout_page.vue
@@ -1167,7 +1167,7 @@ import GuestShippingAddressForm from "@/components/retailer/address/GuestShippin
 import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
 import VerifyAddressComponent from "@/components/retailer/address/VerifyAddressComponent.vue";
 import { createHelpers } from "vuex-map-fields";
- import { VueTelInput } from "vue-tel-input";
+import { VueTelInput } from 'vue3-tel-input'
 import {
  // googleAanalyticsPurchase,
  // googleAanalyticsCheckout,
diff --git a/yarn.lock b/yarn.lock
index a6fcecf..9d0b5cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2110,7 +2110,7 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
-"@vuetify/loader-shared@^1.7.1":
+"@vuetify/loader-shared@^1.4.0", "@vuetify/loader-shared@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz#0f63a3d41b6df29a2db1ff438aa1819b237c37a3"
   integrity sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==
@@ -2118,6 +2118,14 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
+"@vuetify/vite-plugin@^1.0.0-alpha.11":
+  version "1.0.0-alpha.11"
+  resolved "https://registry.yarnpkg.com/@vuetify/vite-plugin/-/vite-plugin-1.0.0-alpha.11.tgz#43cd0fa4134da2467d7dd134b35b5d21a54ddfca"
+  integrity sha512-ADAEubiF+2VHbcsJs0nWCBThc4LX+mGnioYrF0O+jKTvCICT1PJKpp15+M7ZyyM9sAkEFpVH+5FaH5/Ywj7RWg==
+  dependencies:
+    "@vuetify/loader-shared" "^1.4.0"
+    debug "^4.3.3"
+
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2368,7 +2376,7 @@ core-js@^3.6.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
-core-js@^3.8.3:
+core-js@^3.6.5, core-js@^3.8.3:
   version "3.30.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.1.tgz#fc9c5adcc541d8e9fa3e381179433cbf795628ba"
   integrity sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==
@@ -2987,6 +2995,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.9.6:
+  version "1.10.28"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.28.tgz#cae7e929cad96cee5ecc9449027192ecba39ee72"
+  integrity sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw==
+
 loader-utils@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -3560,6 +3573,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+user@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/user/-/user-0.0.0.tgz#f27f1b23fc511f2a8efa40db55cfba123824e02a"
+  integrity sha512-eRNM5isOvr6aEFAGi1CqAkmLkYxW2NJ5ThhbD+6IJXYKM1mo7Gtxx4mQIveHz/5K3p/SVnlW9k17ETn+QAu8IQ==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -3682,7 +3700,17 @@ vue3-google-map@^0.14.0:
     "@googlemaps/js-api-loader" "^1.12.11"
     "@googlemaps/markerclusterer" "^2.0.6"
 
-vue@^3.0.0, vue@^3.2.47:
+vue3-tel-input@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue3-tel-input/-/vue3-tel-input-1.0.4.tgz#ed26cb808d124aebb5073d03f366b23e686804d6"
+  integrity sha512-C60OyAq5ORDErSJ4x7UmJJbF95CDncMswnySmAUtbuBP0pcVcJBu6DOTxKquykvTbJEh9I73DXyqMtDxtLrwJg==
+  dependencies:
+    core-js "^3.6.5"
+    libphonenumber-js "^1.9.6"
+    user "^0.0.0"
+    vue "^3.0.0-beta.1"
+
+vue@^3.0.0, vue@^3.0.0-beta.1, vue@^3.2.47:
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
   integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==
@@ -3709,7 +3737,7 @@ vuetify-loader@^1.9.2:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^3.0.0:
+vuetify@^3.0.0-beta.11:
   version "3.1.15"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.15.tgz#aacee61d81dcaaeabaae44f68172de142dadd274"
   integrity sha512-uxB4UCrP+hFyJaoSsVObAGBRD73qq5ga7HULepzGoMeUWap2H99mcqmMdN/a/Yp4ODK3gT8EcUeph3EgEcsArQ==