21878 - AUTH WEB - Mailing address not update when switch accounts (#…

…2874)

* fix - Mailing address not update when switch accounts,
update BaseAddressForm.vue and AccountMailingAddress.vue to composition-api

* code review fix

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.31",
+  "version": "2.6.32",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/account-settings/account-info/AccountInfo.vue

@@ -389,7 +389,6 @@ export default class AccountInfo extends Mixins(
   private async setup () {
     this.setAccountDetails()
     await this.syncAddress()
-
     // show this part only account is not anon
     if (!this.anonAccount) {
       this.originalAddress = this.currentOrgAddress
@@ -402,6 +401,9 @@ export default class AccountInfo extends Mixins(
         this.$refs.editAccountForm?.validate() // validate form fields and show error message
         // SBTODO create a method in child comp
         this.$refs.mailingAddress?.triggerValidate() // validate form fields and show error message for address component from sbc-common-comp
+      } else {
+        this.isCompleteAccountInfo = true
+        this.errorMessage = ''
       }
     } else {
       // inorder to hide the address if not premium account

auth-web/src/components/auth/account-settings/account-info/AccountMailingAddress.vue

@@ -17,7 +17,7 @@
         <div class="details">
           <div class="with-change-icon">
             <div class="mb-3">
-              <base-address-form
+              <BaseAddressForm
                 ref="mailingAddress"
                 :editing="!viewOnlyMode"
                 :schema="baseAddressSchema"
@@ -79,41 +79,53 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import { defineComponent, ref } from '@vue/composition-api'
 import BaseAddressForm from '@/components/auth/common/BaseAddressForm.vue'
 import { addressSchema } from '@/schemas'
 
-@Component({
+export default defineComponent({
+  name: 'AccountMailingAddress',
   components: {
     BaseAddressForm
-  }
-})
-export default class AccountMailingAddress extends Vue {
-  @Prop({ default: null }) baseAddress: any
-  @Prop({ default: true }) viewOnlyMode: boolean
+  },
+  props: {
+    baseAddress: {
+      type: Object,
+      default: () => null
+    },
+    viewOnlyMode: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emit: ['valid', 'update:address'],
+  setup (props, { emit }) {
+    const baseAddressSchema = ref(addressSchema)
 
-  public baseAddressSchema = addressSchema
+    const mailingAddress = ref<HTMLFormElement | null>(null)
 
-  $refs: {
-    mailingAddress: HTMLFormElement
-  }
+    function updateAddress (address) {
+      emit('update:address', address)
+    }
 
-  /** Emits an update message, so that we can sync with parent */
-  @Emit('update:address')
-  public updateAddress (address) {
-    return address
-  }
+    function checkBaseAddressValidity (isValid) {
+      emit('valid', isValid)
+    }
 
-  @Emit('valid')
-  public checkBaseAddressValidity (isValid) {
-    return isValid
-  }
+    function triggerValidate (): boolean {
+      // validate form fields and show error message for address component from sbc-common-component
+      return mailingAddress.value?.$refs.baseAddress?.$refs.addressForm?.validate()
+    }
 
-  triggerValidate (): boolean {
-    // validate form fields and show error message for address component from sbc-common-component
-    return this.$refs.mailingAddress?.$refs.baseAddress?.$refs.addressForm?.validate()
+    return {
+      baseAddressSchema,
+      mailingAddress,
+      updateAddress,
+      checkBaseAddressValidity,
+      triggerValidate
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

auth-web/src/components/auth/common/BaseAddressForm.vue

@@ -11,52 +11,73 @@
 
 <script lang="ts">
 import { Address, BaseAddressModel } from '@/models/address'
-import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
+import { PropType, defineComponent, onMounted, ref, watch } from '@vue/composition-api'
 import BaseAddress from '@bcrs-shared-components/base-address/BaseAddress.vue'
 import CommonUtils from '@/util/common-util'
 
-@Component({
+export default defineComponent({
+  name: 'BaseAddressForm',
   components: {
     BaseAddress
-  }
-})
-export default class BaseAddressForm extends Vue {
-  @Prop({ default: true }) editing: boolean
-  @Prop({ default: {} }) schema: any
-  @Prop({ default: () => ({} as Address) }) address: Address
-  private inputaddress: BaseAddressModel = {} as BaseAddressModel
-
-  mounted () {
-    if (this.address) {
-      this.loadAddressIntoInputAddress()
+  },
+  props: {
+    editing: {
+      type: Boolean,
+      default: true
+    },
+    schema: {
+      type: Object,
+      default: () => ({})
+    },
+    address: {
+      type: Object as PropType<Address>,
+      default: () => ({})
     }
-  }
+  },
+  emit: ['valid', 'update:address'],
+  setup (props, { emit }) {
+    const inputaddress = ref<BaseAddressModel>({} as BaseAddressModel)
 
-  @Watch('editing')
-  private watchEditing (editing) {
-    if (!editing) {
-      this.loadAddressIntoInputAddress()
+    function loadAddressIntoInputAddress () {
+      // convert to address format to component
+      inputaddress.value = CommonUtils.convertAddressForComponent(props.address)
+      emitUpdateAddress(inputaddress.value)
     }
-  }
 
-  @Emit('update:address')
-  private emitUpdateAddress (iaddress): Address {
-    // convert back to Address
-    const address = CommonUtils.convertAddressForAuth(iaddress)
-    return address
-  }
+    function emitUpdateAddress (iaddress: BaseAddressModel): Address {
+      // convert back to Address
+      const address = CommonUtils.convertAddressForAuth(iaddress)
+      emit('update:address', address)
+      return address
+    }
 
-  @Emit('valid')
-  emitAddressValidity (isValid) {
-    return isValid
-  }
+    function emitAddressValidity (isValid: boolean) {
+      emit('valid', isValid)
+      return isValid
+    }
+
+    watch(() => props.editing, (editing) => {
+      if (!editing) {
+        loadAddressIntoInputAddress()
+      }
+    })
+
+    watch(() => props.address, loadAddressIntoInputAddress)
 
-  loadAddressIntoInputAddress () {
-    // convert to address format to component
-    this.inputaddress = CommonUtils.convertAddressForComponent(this.address)
-    this.emitUpdateAddress(this.inputaddress)
+    onMounted(() => {
+      if (props.address) {
+        loadAddressIntoInputAddress()
+      }
+    })
+
+    return {
+      inputaddress,
+      loadAddressIntoInputAddress,
+      emitUpdateAddress,
+      emitAddressValidity
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped></style>