From a39efcdfd88eee3d060ec4a623271e3f3850aa7b Mon Sep 17 00:00:00 2001
From: rakesh <inaniyar7@gmail.com>
Date: Sat, 13 May 2023 17:08:49 +0530
Subject: [PATCH] address fixes

---
 .../address/ShippingAddressFormComponent.vue  | 145 +++++++++++-------
 src/routes/retailer/edit_account_info.vue     | 124 ++++-----------
 2 files changed, 119 insertions(+), 150 deletions(-)

diff --git a/src/components/retailer/address/ShippingAddressFormComponent.vue b/src/components/retailer/address/ShippingAddressFormComponent.vue
index 9025d00..049e30e 100644
--- a/src/components/retailer/address/ShippingAddressFormComponent.vue
+++ b/src/components/retailer/address/ShippingAddressFormComponent.vue
@@ -7,9 +7,19 @@
             already registered?
             <span class="text-uppercase ml-2">click here to login</span>
           </p>
-          <v-text-field label="Email Address" ref="emailAddress" outlined dense :rules="emailRules"></v-text-field>
+          <v-text-field
+            label="Email Address"
+            ref="emailAddress"
+            outlined
+            dense
+            :rules="emailRules"
+          ></v-text-field>
           <span>You can create an account after checkout.</span>
-          <v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
+          <v-checkbox
+            v-model="newsletter"
+            label="Subscribe to our newsletter"
+            color="indigo"
+          ></v-checkbox>
         </v-col>
       </v-row>
       <v-row no-gutters>
@@ -18,9 +28,10 @@
             label="First Name"
             ref="firstName"
             v-model="firstname"
-            outlined
-            dense
-            :rules="hideAndShowFields? textRules:[]"
+            color="primary"
+            density="compact"
+            variant="outlined"
+            :rules="hideAndShowFields ? textRules : []"
             v-show="hideAndShowFields"
             @input="verifyAddress"
           ></v-text-field>
@@ -28,9 +39,10 @@
             label="Last Name"
             ref="lastName"
             v-model="lastname"
-            outlined
-            dense
-            :rules="hideAndShowFields? textRules:[]"
+            color="primary"
+            density="compact"
+            variant="outlined"
+            :rules="hideAndShowFields ? textRules : []"
             v-show="hideAndShowFields"
             @input="verifyAddress"
           ></v-text-field>
@@ -38,8 +50,9 @@
             label="Street Address"
             ref="streetAddressOne"
             v-model="streetNoOne"
-            outlined
-            dense
+            color="primary"
+            density="compact"
+            variant="outlined"
             required
             :rules="textRules"
             @input="verifyAddress"
@@ -49,16 +62,18 @@
             label="Apt, Suite, Co., C/O etc."
             ref="streetAddressTwo"
             v-model="streetNoTwo"
-            outlined
-            dense
+            color="primary"
+            density="compact"
+            variant="outlined"
             required
             @change="checkPOBoxAddress()"
             @input="verifyAddress"
           ></v-text-field>
           <v-text-field
             label="City"
-            outlined
-            dense
+            color="primary"
+            density="compact"
+            variant="outlined"
             ref="city"
             :rules="textRules"
             v-model="city"
@@ -66,48 +81,59 @@
           ></v-text-field>
           <v-select
             :items="allCountries"
-            dense
-            outlined
+            color="primary"
+            density="compact"
+            variant="outlined"
             label="Country"
             ref="country"
-            item-text="label"
+            item-title="label"
             v-model="countryId"
+            :model-value="countryId"
             item-value="value"
             :selected="countryId"
-            @change="fetchStates(countryId)"
-            :rules="[val => !!val || 'Please select the Country']"
+            @update:modelValue="fetchStates(countryId)"
+            :rules="[(val) => !!val || 'Please select the Country']"
           ></v-select>
           <v-text-field
             label="Zip/Postal Code"
             ref="zipCode"
             :rules="zipCodeRules"
             v-model="postcode"
-            outlined
-            dense
+            color="primary"
+            density="compact"
+            variant="outlined"
             @input="verifyAddress"
           ></v-text-field>
           <!-- <v-alert type="error" v-if="zipCodeRules">{{zipCodeValidation}}</v-alert> -->
           <v-select
             :items="regionList"
-            dense
             label="State/Province"
             v-model="regionId"
-            item-text="label"
+            :model-value="regionId"
+            item-title="label"
             item-value="value"
-            outlined
-            @change="checkRegionName()"
-            :rules="[v => !!v || 'Please select the State']"
+            color="primary"
+            density="compact"
+            variant="outlined"
+            @update:modelValue="checkRegionName()"
+            :rules="[(v) => !!v || 'Please select the State']"
           ></v-select>
           <vue-tel-input
             type="number"
             v-model="telephone"
             :defaultCountry="setCountryCode"
-            :class="phoneNumberError ?  'phonenumber-input-error-border':'phonenumber-custom-input'"
+            :class="
+              phoneNumberError
+                ? 'phonenumber-input-error-border'
+                : 'phonenumber-custom-input'
+            "
             @input="validateNumber"
             ref="phoneNumber"
             v-show="hideAndShowFields"
           ></vue-tel-input>
-          <span class="red--text caption ml-3" v-show="phoneNumberError">This field is required</span>
+          <span class="red--text caption ml-3" v-show="phoneNumberError"
+            >This field is required</span
+          >
         </v-col>
       </v-row>
     </v-form>
@@ -117,11 +143,11 @@
 //import { mapState } from "vuex";
 import { createHelpers } from "vuex-map-fields";
 import { fetchStates } from "@/services/util.service";
-import { VueTelInput } from 'vue3-tel-input'
+import { VueTelInput } from "vue3-tel-input";
 
 const { mapFields } = createHelpers({
   getterType: "accountOne/getField",
-  mutationType: "accountOne/updateField"
+  mutationType: "accountOne/updateField",
 });
 export default {
   name: "ShippingAddressFormComponent",
@@ -137,24 +163,25 @@ export default {
     valid: true,
     lazy: false,
     textRules: [
-      v => !!v || "This field is required",
-      v => (v && v.length >= 3) || "This field must be at least 3 characters"
+      (v) => !!v || "This field is required",
+      (v) => (v && v.length >= 3) || "This field must be at least 3 characters",
     ],
     zipCodeRules: [
-      v => !!v || "Zip code is required",
-      v => (v && v.length >= 5) || "This field must be at least 5 characters"
+      (v) => !!v || "Zip code is required",
+      (v) => (v && v.length >= 5) || "This field must be at least 5 characters",
     ],
     emailRules: [
-      v => !!v || "E-mail is required",
-      v => /.+@.+\..+/.test(v) || "E-mail must be valid"
+      (v) => !!v || "E-mail is required",
+      (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
     ],
     phoneNumberRules: [
-      v => !!v || "This field is required",
-      v => (v && v.length >= 8) || "Phone Number must be at least 8 characters"
-    ]
+      (v) => !!v || "This field is required",
+      (v) =>
+        (v && v.length >= 8) || "Phone Number must be at least 8 characters",
+    ],
   }),
   components: {
-    VueTelInput
+    VueTelInput,
   },
   computed: {
     ...mapFields([
@@ -171,36 +198,36 @@ export default {
       "address.streetNoOne",
       "address.streetNoTwo",
       "address.firstname",
-      "address.lastname"
+      "address.lastname",
     ]),
-    allCountries: function() {
-      return this.$store.state.accountOne.allCountries.map(countries => {
+    allCountries: function () {
+      return this.$store.state.accountOne.allCountries.map((countries) => {
         return {
           value: countries.id,
-          label: countries.fullNameEnglish
+          label: countries.fullNameEnglish,
         };
       });
     },
-    add: function() {
+    add: function () {
       return this.$store.state.accountOne.address;
     },
     countryAndStatesList() {
       return this.$store.state.accountOne.allCountries;
     },
-    userAuth: function() {
+    userAuth: function () {
       return this.$store.state.auth.userAuth;
-    }
+    },
   },
   watch: {
     /*countryId: function() {
       this.updateRegionList();
     },*/
-    regionId: function() {
+    regionId: function () {
       this.fetchStates(this.countryId);
     },
     valid() {
       this.$emit("actionValid", this.valid);
-    }
+    },
   },
   methods: {
     verifyAddress() {
@@ -210,7 +237,7 @@ export default {
       if (this.regionId) {
         this.regionId = this.regionId.toString();
 
-        let regionName = this.regionList.filter(obj => {
+        let regionName = this.regionList.filter((obj) => {
           if (obj.value == this.regionId) return obj;
         });
         this.$emit("regionDetails", regionName);
@@ -221,9 +248,9 @@ export default {
       /*eslint-disable*/
       // this.$refs.shippingAddressform.resetValidation();
       this.regionList = fetchStates(countryId, this.countryAndStatesList);
-      this.regionId = this.regionId ? this.regionId.toString(): '';
+      this.regionId = this.regionId ? this.regionId.toString() : "";
       if (this.regionId) {
-        let regionName = this.regionList.filter(obj => {
+        let regionName = this.regionList.filter((obj) => {
           if (obj.value == this.regionId) return obj;
         });
         this.$emit("regionDetails", regionName);
@@ -248,19 +275,19 @@ export default {
       this.regionList = fetchStates(this.countryId, this.countryAndStatesList);
     },
     validateNumber(number, data) {
-      if (data&&data.possible && data.valid) this.phoneNumberError = false;
+      if (data && data.possible && data.valid) this.phoneNumberError = false;
       else this.phoneNumberError = true;
     },
-    async checkPOBoxAddress(){
+    async checkPOBoxAddress() {
       let street = [];
       street[0] = this.streetNoOne ? this.streetNoOne : "";
-      if(this.streetNoTwo)
+      if (this.streetNoTwo)
         street[1] = this.streetNoTwo ? this.streetNoTwo : "";
       let address = {
-        street: street
-      }
+        street: street,
+      };
       await this.$store.dispatch("accountOne/checkPOBoxAddress", address);
-    }
+    },
   },
   async created() {
     await this.$store.dispatch("accountOne/fetchCountries");
@@ -273,6 +300,6 @@ export default {
       this.$emit("actionValid", this.valid);
       this.$emit("verifyAddress");
     }
-  }
+  },
 };
 </script>
diff --git a/src/routes/retailer/edit_account_info.vue b/src/routes/retailer/edit_account_info.vue
index 0ed2b63..4722ea5 100644
--- a/src/routes/retailer/edit_account_info.vue
+++ b/src/routes/retailer/edit_account_info.vue
@@ -9,12 +9,12 @@
           dense
           v-if="wrongPasswordMessage"
         >{{wrongPasswordMessage}}</v-alert>
-        <p class="mb-1 h2 body-font text-uppercase primary--text">Edit Account Information</p>
+        <p class="mb-1 h2 body-font text-uppercase text-primary">Edit Account Information</p>
         <v-form ref="form" v-model="valid">
           <v-row>
             <v-col cols="12" sm="6" md="6" lg="6">
               <div>
-                <p class="mt-4 h3 body-font text-uppercase primary--text">Account Information</p>
+                <p class="mt-4 h3 body-font text-uppercase text-primary">Account Information</p>
                 <div class="edit-account-info-line mt-5 mb-7"></div>
 
                 <v-text-field
@@ -22,17 +22,20 @@
                   ref="firstname"
                   v-model="firstname"
                   :rules="textRules"
-                  outlined
+                  variant="outlined"
                   required
-                  dense
+                  color="primary"
+                  density="compact"
                 ></v-text-field>
                 <v-text-field
                   label="Last Name"
                   ref="lastname"
                   v-model="lastname"
                   :rules="textRules"
-                  outlined
-                  dense
+                   
+                   color="primary"
+                   density="compact"
+                   variant="outlined"
                   required
                 ></v-text-field>
                 <!--<v-checkbox v-model="email" label="Change Email" color="indigo" value="indigo"></v-checkbox>-->
@@ -40,43 +43,21 @@
             </v-col>
             <v-col cols="12" sm="6" md="6" lg="6">
               <div>
-                <!--<v-col class="mx-0 px-0" v-if="email && !password">
-              <v-row class="ml-1 mt-1">
-                <p class="h3 body-font mr-3">Change Email</p>
-              </v-row>
-              <div class="edit-account-info-line mt-1 mb-7"></div>
-              <v-text-field
-                label="Email"
-                ref="emailId"
-                v-model="emailId"
-                :rules="textRules"
-                outlined
-                required
-                dense
-              ></v-text-field>
-              <v-text-field
-                label="Current Password"
-                ref="currentPassword"
-                v-model="currentPassword"
-                :rules="textRules"
-                outlined
-                dense
-                required
-              ></v-text-field>
-                </v-col>-->
+                     
                 <v-col class="mx-0 px-0" v-if="password">
                   <v-row class="ml-1 mt-1">
-                    <p class="h3 body-font">Change Password</p>
+                   <p class="mt-4 h3 body-font text-uppercase text-primary">Change Password</p>
                   </v-row>
-                  <div class="edit-account-info-line mt-1 mb-7"></div>
+                   <div class="edit-account-info-line mt-5 mb-7"></div>
                   <v-text-field
                     type="password"
                     label="Current Password"
                     ref="currentPassword"
                     v-model="currentPassword"
                     :rules="passwordRules"
-                    outlined
-                    dense
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
                   ></v-text-field>
                   <v-text-field
                     type="password"
@@ -84,8 +65,9 @@
                     ref="newPassword"
                     :rules="commonValidationRules.passwordRule"
                     v-model="newPassword"
-                    outlined
-                    dense
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
                   ></v-text-field>
                   <v-text-field
                     type="password"
@@ -93,69 +75,27 @@
                     ref="confirmPassword"
                     v-model="confirmPassword"
                     :rules="[passwordConfirmationRule]"
-                    outlined
-                    dense
+                   color="primary"
+                    density="compact"
+                    variant="outlined"
                   ></v-text-field>
                 </v-col>
-                <!--<v-col class="mx-0 px-0" v-if="email && password">
-              <v-row class="ml-1 mt-1">
-                <p class="h3 body-font mr-3">Change Email &</p>
-                <p class="h3 body-font">Change Password</p>
-              </v-row>
-              <div class="edit-account-info-line mt-1 mb-7"></div>
-              <v-text-field
-                label="Email"
-                ref="emailId"
-                v-model="emailId"
-                :rules="textRules"
-                outlined
-                required
-                dense
-              ></v-text-field>
-              <v-text-field
-                label="Current Password"
-                ref="currentPassword"
-                v-model="currentPassword"
-                :rules="textRules"
-                outlined
-                dense
-                required
-              ></v-text-field>
-              <v-text-field
-                label="New Password"
-                ref="newPassword"
-                v-model="newPassword"
-                :rules="textRules"
-                outlined
-                dense
-                required
-              ></v-text-field>
-              <v-text-field
-                label="Confirm New Password"
-                ref="confirmPassword"
-                v-model="confirmPassword"
-                :rules="textRules"
-                outlined
-                dense
-                required
-              ></v-text-field>
-                </v-col>-->
+                
               </div>
             </v-col>
           </v-row>
           <v-checkbox v-model="password" class="mt-0" label="Change Password" color="indigo"></v-checkbox>
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot="{ isHovering, props }">
             <v-btn
               :disabled="inProgress"
               large
-              :outlined="hover"
-              :color="hover?'white':'primary'"
-              :class="hover?'primary--text':'white--text'"
+               :variant="isHovering ? 'outlined' : 'outlined'"
+              :class="isHovering ? ' bg-white text-primary' : 'bg-primary'"
+              v-bind="props"
               @click="submit"
-              depressed
+                size="large"
               class="mt-6 px-12 body-font edit-account-info-button"
-              tile
-              dark
+              rounded="0"
             >
               <v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>SAVE
             </v-btn>
@@ -224,8 +164,9 @@ export default {
     },*/
   },
   methods: {
-    submit() {
-      if (this.$refs.form.validate() && !this.password) {
+   async submit() {
+       let validate = await this.$refs.form.validate();
+      if (validate && validate.valid  && !this.password) {
         this.$store
           .dispatch("accountOne/changeBasicInfo")
           .then(() => {
@@ -254,7 +195,8 @@ export default {
               });
             }, 3000);
           });
-      } else if (this.$refs.form.validate() && this.password) {
+      }
+       else if (validate && validate.valid  &&  this.password) {
         localStorage.setItem("cr_changePassowrd", true);
         this.$store
           .dispatch("accountOne/changeBasicInfo", {