confirmation dialog ui fixes

package.json

@@ -36,7 +36,6 @@
         "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.2.4",
         "vuex": "^4.0.2",

src/components/common/ConfirmationDialog.vue

@@ -35,16 +35,16 @@
                   @click="onAction(false)"
                     :variant="isHovering ? 'outlined' : 'outlined'"
                   :class="
-                  isHovering ? ' bg-white text-error' : 'bg-error'
+                  isHovering ? ' bg-white text-primary' : 'bg-primary'
                   "
                 >CANCEL</v-btn>
               </v-hover>
               <v-hover v-slot:default="{  isHovering , props }">
                 <v-btn
-                  class="text-uppercase body-font ma-2 button-background"
+                  class="text-uppercase body-font ma-2 button-background text-white"
                    :variant="isHovering ? 'outlined' : 'outlined'"
                   :class="
-                  isHovering ? ' bg-white text-primary' : 'bg-primary'
+                  isHovering ? ' textColor' : 'bgColor'
                   "
                   v-bind="props"
                   size="large"
@@ -65,11 +65,15 @@ export default {
   props: ["confirmationDialog", "confirmationDetails"],
   data() {
     return {
-      confirmationDialogKey:this.confirmationDialog
+      
     };
   },
   components: {},
-  computed: {},
+  computed: {
+    confirmationDialogKey(){
+      return this.confirmationDialog
+    }
+  },
   methods: {
     onAction: function(action) {
       this.$emit("actionRemove", { submit: action });
@@ -78,3 +82,14 @@ export default {
   created() {}
 };
 </script>
+<style scoped>
+.bgColor{
+    background-color: red;
+}
+.textColor{
+    background-color: white !important;
+    color: red !important;
+}
+</style>
+
+

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import VueCookies from 'vue3-cookies';
-import VueTelInput from 'vue3-tel-input'
+// import VueTelInput from 'vue3-tel-input'
-import 'vue3-tel-input/dist/vue3-tel-input.css'
+// import 'vue3-tel-input/dist/vue3-tel-input.css'
 import App from './App.vue'
 import router from './multipages'
 import store from './stores';
@@ -11,15 +11,11 @@ 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(VueTelInput)
 
 app.use(store)
 app.use(router)

src/routes/retailer/address_book.scss

@@ -20,4 +20,11 @@
     color: #fb8c00 !important;
     background-color: #fdede8;
     border:thin solid #c5c4c4;
+}
+.bgColor{
+    background-color: red;
+}
+.textColor{
+    background-color: white !important;
+    color: red !important;
 }

src/routes/retailer/address_book.vue

@@ -155,7 +155,7 @@
                       <v-btn
                         @click="editAddress(address, index)"
                         v-bind="props"
-                        variant="isHovering ? 'outlined' : 'outlined'"
+                        :variant="isHovering ? 'outlined' : 'flat'"
                         :class="
                           isHovering ? ' bg-white text-primary' : 'bg-primary'
                         "
@@ -171,13 +171,13 @@
                       <v-btn
                         @click="deleteAddress(address)"
                         v-bind="props"
-                        :variant="isHovering ? 'outlined' : 'outlined'"
+                        :variant="isHovering ? 'outlined' : 'flat'"
                         :class="
-                          isHovering ? ' bg-white text-primary' : 'bg-primary'
+                          isHovering ? 'textColor' : 'bgColor'
                         "
                         rounded="0"
                         size="large"
-                        class="body-font my-2 white--text"
+                        class="body-font my-2 text-white"
                         >DELETE</v-btn
                       >
                     </v-hover>
@@ -252,7 +252,8 @@
                         density="compact"
                         variant="outlined"
                          ></v-text-field>
-                        <vue-tel-input
+                          
+                         <!-- <vue-tel-input
                         type="number"
                         v-model="telephone"
                         :defaultCountry="setCountryCode"
@@ -262,7 +263,17 @@
                             : 'phonenumber-custom-input'
                         "
                         @input="validateNumber"
-                        ></vue-tel-input>
+                        ></vue-tel-input> -->
+                        <v-text-field
+                        label="Telephone"
+                        ref="telephone"
+                        :rules="phoneNumberRules"
+                        v-model="telephone"
+                        variant="outlined"
+                        density="compact"
+                        @input="acceptNumber"
+                        color="primary"
+                        ></v-text-field>
                        <span
                         class="text-red caption ml-3"
                         v-show="phoneNumberError"
@@ -444,7 +455,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 'vue3-tel-input'
+ 
 //import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
 
 import { createHelpers } from "vuex-map-fields";
@@ -457,6 +468,10 @@ export default {
   name: "AddressBook",
   data() {
     return {
+      phoneNumberRules: [
+      v => !!v || "Telephone is required",
+      v => (v && v.length >= 8) || "Phone Number must be at least 8 characters"
+    ],
       setCountryCode: "US",
       phoneNumberError: false,
       confirmationDialog: false,
@@ -497,7 +512,6 @@ export default {
     BillingAddressComponent,
     ShippingAddressComponent,
     ConfirmationDialog,
-    VueTelInput,
     //BillingAddressComponent
   },
   computed: {
@@ -554,6 +568,10 @@ export default {
     },
   },
   methods: {
+    acceptNumber() {
+        let x = this.telephone.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+        this.telephone = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
+    },
     resetForm() {
       if (
         this.$refs.contactForm &&
@@ -650,6 +668,7 @@ export default {
     },
     deleteAddress(address) {
       this.addressObj = address;
+       
       (this.confirmationDialog = true),
         (this.confirmation = {
           confirmationMessage: "Are you sure you want to delete this address?",

yarn.lock

@@ -2396,7 +2396,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.6.5, core-js@^3.8.3:
+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==
@@ -3020,11 +3020,6 @@ 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"
@@ -3610,11 +3605,6 @@ 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"
@@ -3747,17 +3737,7 @@ vue3-google-map@^0.14.0:
     "@googlemaps/js-api-loader" "^1.12.11"
     "@googlemaps/markerclusterer" "^2.0.6"
 
-vue3-tel-input@^1.0.4:
+vue@^3.0.0, vue@^3.2.47:
-  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==