From 88e29a453d3a90c6e1b29b2ef6ad2c6a5b04f8cb Mon Sep 17 00:00:00 2001
From: rakesh <inaniyar7@gmail.com>
Date: Tue, 16 May 2023 13:15:35 +0530
Subject: [PATCH] address fixes ui

---
 .../address/BillingAddressComponent.vue       |  61 +++---
 .../address/GuestShippingAddressForm.vue      | 181 +++++++++++-------
 .../address/ShippingAddressComponent.vue      |  31 +--
 .../address/ShippingAddressFormComponent.vue  |   2 +-
 src/routes/retailer/checkout_page.vue         |  12 +-
 5 files changed, 172 insertions(+), 115 deletions(-)

diff --git a/src/components/retailer/address/BillingAddressComponent.vue b/src/components/retailer/address/BillingAddressComponent.vue
index 39a7ee9..36e17d6 100644
--- a/src/components/retailer/address/BillingAddressComponent.vue
+++ b/src/components/retailer/address/BillingAddressComponent.vue
@@ -1,20 +1,26 @@
 <template>
   <div>
     <v-row no-gutters>
-      <v-col cols="12" >
-        <p class="mb-2 body">{{address.firstname}} {{address.lastname}}</p>
-        <p class="mb-2 body" v-if="address.streetNoOne">{{address.streetNoOne}}<span v-if="address.streetNoTwo">, {{address.streetNoTwo}}</span> </p>
-        <p class="mb-2 body" v-else>{{address.street[0]}}<span v-if="address.street[1]">, {{address.street[1]}}</span> </p>
-        <p class="mb-2 body">
-          {{address.city}},
-          <span v-if="stateName.length">{{stateName[0].label}} - </span>
-           {{address.postcode}}
+      <v-col cols="12">
+        <p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p>
+        <p class="mb-2 body" v-if="address.streetNoOne">
+          {{ address.streetNoOne
+          }}<span v-if="address.streetNoTwo">, {{ address.streetNoTwo }}</span>
+        </p>
+        <p class="mb-2 body" v-else>
+          {{ address.street[0]
+          }}<span v-if="address.street[1]">, {{ address.street[1] }}</span>
         </p>
         <p class="mb-2 body">
-          <span v-if="address.countryId">{{address.countryId}}</span>
+          {{ address.city }},
+          <span v-if="stateName.length">{{ stateName[0].label }} - </span>
+          {{ address.postcode }}
         </p>
         <p class="mb-2 body">
-           T:<a href="tel:"> {{address.telephone}}</a>
+          <span v-if="address.countryId">{{ address.countryId }}</span>
+        </p>
+        <p class="mb-2 body">
+          T:<a href="tel:"> {{ address.telephone }}</a>
         </p>
       </v-col>
     </v-row>
@@ -25,7 +31,7 @@ import { createHelpers } from "vuex-map-fields";
 import { fetchStates } from "@/services/util.service";
 const { mapFields } = createHelpers({
   getterType: "accountOne/getField",
-  mutationType: "accountOne/updateField"
+  mutationType: "accountOne/updateField",
 });
 /*eslint-disable*/
 export default {
@@ -36,38 +42,39 @@ export default {
     stateName: [],
   }),
   computed: {
-    userAuth: function() {
+    userAuth: function () {
       return this.$store.state.auth.userAuth;
     },
-    verifyAddress: function() {
+    verifyAddress: function () {
       if (this.userAuth) {
         return this.$store.state.accountOne.address;
-      }  
+      }
     },
     countryAndStatesList() {
       return this.$store.state.accountOne.allCountries;
     },
-    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,
         };
       });
     },
     ...mapFields(["one"]),
   },
-  watch: {
-
-  },
+  watch: {},
   methods: {},
   created() {
-    if(this.address){
-        this.stateNameList = fetchStates(this.address.countryId,this.countryAndStatesList);
-        this.stateName = this.stateNameList.filter(obj => {
-            if (obj.value == this.address.regionId) return obj;
-          });
-      }
-  }
+    if (this.address) {
+      this.stateNameList = fetchStates(
+        this.address.countryId,
+        this.countryAndStatesList
+      );
+      this.stateName = this.stateNameList.filter((obj) => {
+        if (obj.value == this.address.regionId) return obj;
+      });
+    }
+  },
 };
 </script>
diff --git a/src/components/retailer/address/GuestShippingAddressForm.vue b/src/components/retailer/address/GuestShippingAddressForm.vue
index 440dc7d..eaec562 100644
--- a/src/components/retailer/address/GuestShippingAddressForm.vue
+++ b/src/components/retailer/address/GuestShippingAddressForm.vue
@@ -1,22 +1,43 @@
 <template>
   <div v-if="userDetails">
-    <v-form ref="guestShippingAddressForm" v-model="valid" :lazy-validation="lazy">
+    <v-form
+      ref="guestShippingAddressForm"
+      v-model="valid"
+      :lazy-validation="lazy"
+    >
       <v-row no-gutters v-show="!hideEmail">
         <v-col cols="12">
           <p class="text-uppercase d-none d-sm-block">
             already registered?
-            <v-btn class="pl-0 black--text" depressed dark @click="signInForm=true" text>
-              <span class="text-uppercase ml-2 guest-shipping-address-login">click here to login</span>
+            <v-btn
+              class="pl-0 black--text"
+              depressed
+              dark
+              @click="signInForm = true"
+              text
+            >
+              <span class="text-uppercase ml-2 guest-shipping-address-login"
+                >click here to login</span
+              >
             </v-btn>
           </p>
           <p class="text-uppercase fontsize-14 d-block d-sm-none">
             already registered?
-            <v-btn color="black" class="pl-0" dark @click="signInForm=true" text>
-              <span class="text-uppercase fontsize-14 mb-1 ml-2 guest-shipping-address-login">click here to login</span>
+            <v-btn
+              color="black"
+              class="pl-0"
+              dark
+              @click="signInForm = true"
+              text
+            >
+              <span
+                class="text-uppercase fontsize-14 mb-1 ml-2 guest-shipping-address-login"
+                >click here to login</span
+              >
             </v-btn>
           </p>
           <v-form ref="loginForm" v-model="validLogin">
-          <v-col class="px-0 py-0">
+            <v-col class="px-0 py-0">
               <v-text-field
                 label="Email Address"
                 @input="checkEmail()"
@@ -27,7 +48,7 @@
                 :rules="emailRules"
                 outlined
                 dense
-              ></v-text-field>              
+              ></v-text-field>
               <!-- <v-text-field
                 v-show="passwordFields"
                 v-model="password"
@@ -39,8 +60,8 @@
                 dense
                 :rules="passwordFields? passwordRules:[]"
               ></v-text-field> -->
-          </v-col>
-          <!-- <span v-show="passwordFields">You already have an account with us. Sign in or continue as guest.</span>
+            </v-col>
+            <!-- <span v-show="passwordFields">You already have an account with us. Sign in or continue as guest.</span>
            <v-row  justify="center" v-if="emailCheckInProgress">
             <v-progress-circular
               :size="60"
@@ -54,8 +75,14 @@
               <v-btn class="primary" depressed block large @click="signIn()">SIGN IN</v-btn>
             </v-col>
           </v-row> -->
-          <span v-show="!passwordFields" >You can create an account after checkout.</span>
-          <v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
+            <span v-show="!passwordFields"
+              >You can create an account after checkout.</span
+            >
+            <v-checkbox
+              v-model="newsletter"
+              label="Subscribe to our newsletter"
+              color="indigo"
+            ></v-checkbox>
           </v-form>
         </v-col>
       </v-row>
@@ -122,7 +149,7 @@
             item-value="value"
             :selected="countryId"
             @change="fetchStates(countryId)"
-            :rules="[val => !!val || 'Please select the Country']"
+            :rules="[(val) => !!val || 'Please select the Country']"
           ></v-select>
 
           <v-text-field
@@ -144,19 +171,25 @@
             item-value="value"
             outlined
             @change="checkRegionName()"
-            :rules="[v => !!v || 'Please select the State']"
+            :rules="[(v) => !!v || 'Please select the State']"
           ></v-select>
 
-           <vue-tel-input
+          <vue-tel-input
             type="number"
             v-model="telephone"
             mode="international"
             :defaultCountry="setCountryCode"
-            :class="phoneNumberError ?  'phonenumber-input-error-border':'phonenumber-custom-input'"
+            :class="
+              phoneNumberError
+                ? 'phonenumber-input-error-border'
+                : 'phonenumber-custom-input'
+            "
             @input="validateNumber"
             ref="phoneNumber"
           ></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>
@@ -170,8 +203,12 @@
         </v-card-title>
         <v-divider></v-divider>
         <v-card-text class="pt-3 pb-0">
-          <v-alert class="word-break" type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
-          <v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert>
+          <v-alert class="word-break" type="error" v-if="!!errorMessage">{{
+            errorMessage
+          }}</v-alert>
+          <v-alert class="word-break" type="success" v-if="!!signInMessage">{{
+            signInMessage
+          }}</v-alert>
           <v-form ref="loginForm" v-model="validLogin">
             <v-col class="py-0">
               <v-text-field
@@ -194,7 +231,7 @@
                 name="password"
                 outlined
                 dense
-                :rules="passwordFields? passwordRules:[]"
+                :rules="passwordFields ? passwordRules : []"
               ></v-text-field>
             </v-col>
           </v-form>
@@ -202,13 +239,22 @@
         <v-card-actions>
           <v-row no-gutters>
             <v-col cols="12" class="px-7">
-              <v-btn class="primary" block depressed large @click="signIn()"> <v-progress-circular :size="20" color="white" indeterminate v-if="inProgress"></v-progress-circular> &nbsp;SIGN IN </v-btn>
+              <v-btn class="primary" block depressed large @click="signIn()">
+                <v-progress-circular
+                  :size="20"
+                  color="white"
+                  indeterminate
+                  v-if="inProgress"
+                ></v-progress-circular>
+                &nbsp;SIGN IN
+              </v-btn>
             </v-col>
             <v-col cols="12" class="py-5" align="center">
               <span
                 class="text-decoration-none cursor-pointer primary--text"
-                @click="goToForgetPassword()"                
-              >Forgot Your Password?</span>
+                @click="goToForgetPassword()"
+                >Forgot Your Password?</span
+              >
             </v-col>
           </v-row>
         </v-card-actions>
@@ -220,23 +266,23 @@
 //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: mapFieldsGuest } = createHelpers({
   getterType: "guestInfo/getField",
-  mutationType: "guestInfo/updateField"
+  mutationType: "guestInfo/updateField",
 });
 
 const { mapFields: mapFieldsAuth } = createHelpers({
   getterType: "auth/getField",
-  mutationType: "auth/updateField"
+  mutationType: "auth/updateField",
 });
 
 export default {
   name: "GuestShippingAddressForm",
-  props: ["hideEmail","hideHeader"],
+  props: ["hideEmail", "hideHeader"],
   data: () => ({
-     setCountryCode: "US",
+    setCountryCode: "US",
     phoneNumberError: false,
     confirmationDialog: false,
     passwordFields: false,
@@ -249,27 +295,28 @@ export default {
     validLogin: false,
     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",
     ],
     passwordRules: [
-      v => !!v || "Password is required",
-      v => (v && v.length >= 8) || "Password must be at least 8 characters"
-    ]
+      (v) => !!v || "Password is required",
+      (v) => (v && v.length >= 8) || "Password must be at least 8 characters",
+    ],
   }),
-  components: {VueTelInput},
+  components: { VueTelInput },
   computed: {
     ...mapFieldsGuest([
       "one",
@@ -292,13 +339,13 @@ export default {
       "one.password",
       "errorMessage",
       "inProgress",
-      "signInMessage"
+      "signInMessage",
     ]),
-    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,
         };
       });
     },
@@ -307,41 +354,41 @@ export default {
     },
     emailCheckInProgress() {
       return this.$store.state.guestInfo.emailCheckInProgress;
-    }
+    },
   },
   watch: {
-    countryId: function() {
+    countryId: function () {
       this.updateRegionList();
     },
     valid() {
-      this.$emit("actionValid", {valid:this.valid, email:this.one.email});
-    }
+      this.$emit("actionValid", { valid: this.valid, email: this.one.email });
+    },
   },
   methods: {
     signIn() {
       if (this.$refs.loginForm.validate()) {
         this.$store.dispatch("auth/changeRedirectFlag", false);
-        this.$store.dispatch("auth/login").then(status => {
+        this.$store.dispatch("auth/login").then((status) => {
           if (status) {
-              this.$store.dispatch("auth/changeRedirectFlag", true);
-              this.$store.dispatch("accountOne/basicInfo");
-              this.$store.dispatch("userCartProduct/cartProductList");
-              window.open(`/checkout`, "_self");
+            this.$store.dispatch("auth/changeRedirectFlag", true);
+            this.$store.dispatch("accountOne/basicInfo");
+            this.$store.dispatch("userCartProduct/cartProductList");
+            window.open(`/checkout`, "_self");
           }
-      // this.$store.dispatch("userCartProduct/productTotalAmt");
+          // this.$store.dispatch("userCartProduct/productTotalAmt");
         });
       }
     },
-    goToForgetPassword(){
+    goToForgetPassword() {
       window.open(`/gate/forgot-password`, "_self");
     },
-     sendEmailId() {
-      this.$emit("actionValid", {valid:this.valid, email:this.one.email});
+    sendEmailId() {
+      this.$emit("actionValid", { valid: this.valid, email: this.one.email });
     },
     checkEmail() {
       this.$store
         .dispatch("guestInfo/checkEmailAvailable", this.one.email)
-        .then(data => {
+        .then((data) => {
           if (data.exist == false) {
             this.passwordFields = true;
           } else {
@@ -357,7 +404,7 @@ export default {
       this.$emit("verifyAddress");
     },
     checkRegionName() {
-      let regionName = this.regionList.filter(obj => {
+      let regionName = this.regionList.filter((obj) => {
         if (obj.value == this.regionId) return obj;
       });
       this.$emit("regionDetails", regionName);
@@ -367,7 +414,7 @@ export default {
       this.$refs.guestShippingAddressForm.resetValidation();
       this.regionList = fetchStates(countryId, this.countryAndStatesList);
       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);
@@ -378,20 +425,20 @@ export default {
       if (this.regionId) this.regionId = this.regionId.toString();
       this.regionList = fetchStates(this.countryId, this.countryAndStatesList);
     },
-     validateNumber(number, data) {
-      if (data&&data.possible && data.valid) this.phoneNumberError = false;
+    validateNumber(number, data) {
+      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("guestInfo/checkPOBoxAddress", address);
-    }
+    },
   },
   async created() {
     await this.$store.dispatch("accountOne/fetchCountries");
@@ -402,7 +449,7 @@ export default {
       this.$emit("actionValid", this.valid);
       this.$emit("verifyAddress");
     }
-  }
+  },
 };
 </script>
 <style src="./GuestShippingAddressForm.scss" lang="scss" />
\ No newline at end of file
diff --git a/src/components/retailer/address/ShippingAddressComponent.vue b/src/components/retailer/address/ShippingAddressComponent.vue
index ef3e0bf..50b60d7 100644
--- a/src/components/retailer/address/ShippingAddressComponent.vue
+++ b/src/components/retailer/address/ShippingAddressComponent.vue
@@ -1,22 +1,24 @@
 <template>
   <div>
     <v-row no-gutters>
-      <v-col cols="12" >
-        <p class="mb-2 body">{{address.firstname}} {{address.lastname}}</p>
-        <p class="mb-2 body" v-if="address.streetNoOne">{{address.streetNoOne}} ,{{address.streetNoTwo}} </p>
-        <p class="mb-2 body" v-else>{{address.street[0]}} ,{{address.street[1]}} </p>
-        <p class="mb-2 body">
-          {{address.city}},
-          <span
-            v-if="address.region"
-          >{{address.region.region}}</span>
-           {{address.postcode}}
+      <v-col cols="12">
+        <p class="mb-2 body">{{ address.firstname }} {{ address.lastname }}</p>
+        <p class="mb-2 body" v-if="address.streetNoOne">
+          {{ address.streetNoOne }} ,{{ address.streetNoTwo }}
+        </p>
+        <p class="mb-2 body" v-else>
+          {{ address.street[0] }} ,{{ address.street[1] }}
         </p>
         <p class="mb-2 body">
-          <span v-if="address.countryId">{{address.countryId}}</span>
+          {{ address.city }},
+          <span v-if="address.region">{{ address.region.region }}</span>
+          {{ address.postcode }}
         </p>
         <p class="mb-2 body">
-           T:<a :href="'tel:'+ address.telephone"> {{address.telephone}}</a>
+          <span v-if="address.countryId">{{ address.countryId }}</span>
+        </p>
+        <p class="mb-2 body">
+          T:<a :href="'tel:' + address.telephone"> {{ address.telephone }}</a>
         </p>
       </v-col>
     </v-row>
@@ -27,9 +29,8 @@ export default {
   name: "ShippingAddressComponent",
   props: ["address"],
   components: {},
-  computed: {
-  },
+  computed: {},
   methods: {},
-  created() {}
+  created() {},
 };
 </script>
diff --git a/src/components/retailer/address/ShippingAddressFormComponent.vue b/src/components/retailer/address/ShippingAddressFormComponent.vue
index 049e30e..eb10856 100644
--- a/src/components/retailer/address/ShippingAddressFormComponent.vue
+++ b/src/components/retailer/address/ShippingAddressFormComponent.vue
@@ -131,7 +131,7 @@
             ref="phoneNumber"
             v-show="hideAndShowFields"
           ></vue-tel-input>
-          <span class="red--text caption ml-3" v-show="phoneNumberError"
+          <span class="red--text caption ml-3" v-show="hideAndShowFields && phoneNumberError"
             >This field is required</span
           >
         </v-col>
diff --git a/src/routes/retailer/checkout_page.vue b/src/routes/retailer/checkout_page.vue
index 494c5ba..854bb21 100644
--- a/src/routes/retailer/checkout_page.vue
+++ b/src/routes/retailer/checkout_page.vue
@@ -104,7 +104,7 @@
                       v-if="!this.userAuth"
                     >
                       <p class="h3 mt-4">
-                        <span class="primary--text">Checkout Method</span>
+                        <span class="text-primary">Checkout Method</span>
                       </p>
                       <GuestShippingAddressForm
                         @actionValid="checkGuestFormValid"
@@ -116,7 +116,7 @@
 
                     <v-col cols="12" class="pt-sm-6" v-else>
                       <p class="h3 mb-2">
-                        <span class="primary--text">Checkout Method</span>
+                        <span class="text-primary">Checkout Method</span>
                       </p>
                       <v-divider class="primary"></v-divider>
                       <div v-if="basicInfo.addresses">
@@ -293,7 +293,7 @@
                     <v-col cols="12" class="mt-3" v-if="!addressContainPOBox">
                       <div>
                         <!--<p class="h3 mb-1">
-                          <span class="primary--text">Verify Your Address</span>
+                          <span class="text-primary">Verify Your Address</span>
                         </p>
                         <v-col class="pa-0" v-if="geoCodedAddress">
                           <VerifyAddressComponent
@@ -318,7 +318,7 @@
                           >
                         </v-col>-->
                         <p class="h3 mb-0">
-                          <span class="primary--text">Shipping Methods</span>
+                          <span class="text-primary">Shipping Methods</span>
                         </p>
                         <v-row no-gutters>
                           <v-col
@@ -339,6 +339,7 @@
                             <v-radio-group
                               mandatory
                               v-model="estimatedShipping"
+                              color="primary"
                             >
                               <div
                                 v-for="(
@@ -352,6 +353,7 @@
                                       :label="method.carrierTitle"
                                       :value="method"
                                       class="black--text"
+                                       color="primary"
                                     ></v-radio>
                                   </v-col>
                                   <v-col cols="4" sm="6">{{
@@ -412,7 +414,7 @@
                   class="d-none d-sm-block pl-3 pt-6"
                 >
                   <p class="h3 mb-2">
-                    <span class="primary--text">Order Summary</span>
+                    <span class="text-primary">Order Summary</span>
                   </p>
                   <v-divider class="primary"></v-divider>
                   <v-col