[UXE-6007] fix: validate account address before adding payment method (…

…#2156)

src/helpers/account-data.js

@@ -0,0 +1,36 @@
+import { getAccountInfoService, getUserInfoService } from '@/services/account-services'
+import { loadAccountJobRoleService } from '@/services/account-settings-services'
+import { loadContractServicePlan } from '@/services/contract-services'
+import { useAccountStore } from '@/stores/account'
+
+export const loadUserAndAccountInfo = async () => {
+  const accountStore = useAccountStore()
+  const [accountInfo, userInfo, accountJobRole] = await Promise.all([
+    getAccountInfoService(),
+    getUserInfoService(),
+    loadAccountJobRoleService()
+  ])
+
+  accountInfo.is_account_owner = userInfo.results.is_account_owner
+  accountInfo.client_id = userInfo.results.client_id
+  accountInfo.timezone = userInfo.results.timezone
+  accountInfo.utc_offset = userInfo.results.utc_offset
+  accountInfo.first_name = userInfo.results.first_name
+  accountInfo.last_name = userInfo.results.last_name
+  accountInfo.permissions = userInfo.results.permissions
+  accountInfo.email = userInfo.results.email
+  accountInfo.user_id = userInfo.results.id
+  accountInfo.colorTheme = accountStore.theme
+  accountInfo.jobRole = accountJobRole.jobRole
+  accountInfo.isDeveloperSupportPlan = true
+
+  if (accountInfo.client_id) {
+    const { isDeveloperSupportPlan, yourServicePlan } = await loadContractServicePlan({
+      clientId: accountInfo.client_id
+    })
+    accountInfo.isDeveloperSupportPlan = isDeveloperSupportPlan
+    accountInfo.yourServicePlan = yourServicePlan
+  }
+
+  accountStore.setAccountData(accountInfo)
+}

src/router/hooks/guards/accountGuard.js

@@ -1,42 +1,14 @@
-import { getAccountInfoService, getUserInfoService } from '@/services/account-services'
-import { loadAccountJobRoleService } from '@/services/account-settings-services'
 import { setRedirectRoute } from '@/helpers'
+import { loadUserAndAccountInfo } from '@/helpers/account-data'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function accountGuard({ to, accountStore, tracker, loadContractServicePlan }) {
+export async function accountGuard({ to, accountStore, tracker }) {
   const isPrivateRoute = !to.meta.isPublic
   const userNotIsLoggedIn = !accountStore.hasActiveUserId
 
   if (userNotIsLoggedIn) {
     try {
-      const [accountInfo, userInfo, accountJobRole] = await Promise.all([
-        getAccountInfoService(),
-        getUserInfoService(),
-        loadAccountJobRoleService()
-      ])
-
-      accountInfo.is_account_owner = userInfo.results.is_account_owner
-      accountInfo.client_id = userInfo.results.client_id
-      accountInfo.timezone = userInfo.results.timezone
-      accountInfo.utc_offset = userInfo.results.utc_offset
-      accountInfo.first_name = userInfo.results.first_name
-      accountInfo.last_name = userInfo.results.last_name
-      accountInfo.permissions = userInfo.results.permissions
-      accountInfo.email = userInfo.results.email
-      accountInfo.user_id = userInfo.results.id
-      accountInfo.colorTheme = accountStore.theme
-      accountInfo.jobRole = accountJobRole.jobRole
-      accountInfo.isDeveloperSupportPlan = true
-
-      if (accountInfo.client_id) {
-        const { isDeveloperSupportPlan, yourServicePlan } = await loadContractServicePlan({
-          clientId: accountInfo.client_id
-        })
-        accountInfo.isDeveloperSupportPlan = isDeveloperSupportPlan
-        accountInfo.yourServicePlan = yourServicePlan
-      }
-
-      accountStore.setAccountData(accountInfo)
+      await loadUserAndAccountInfo()
 
       if (!isPrivateRoute) {
         return '/'

src/router/hooks/guards/billingGuard.js

@@ -21,6 +21,10 @@ export async function billingGuard({ to, accountStore }) {
       if (to.name === 'billing-tabs') {
         return true
       }
+
+      if (to.name === 'account-settings') {
+        return true
+      }
     } else if (paymentReviewPending) {
       return BILLING_REDIRECT_OPTIONS
     }

src/templates/add-payment-method-block/index.vue

@@ -1,5 +1,6 @@
 <script setup>
   import { computed, ref, onMounted } from 'vue'
+  import { useRouter } from 'vue-router'
   import { useToast } from 'primevue/usetoast'
   import ActionBarBlock from '@/templates/action-bar-block'
   import Sidebar from 'primevue/sidebar'
@@ -10,12 +11,15 @@
   import LabelBlock from '@/templates/label-block'
   import { useScrollToError } from '@/composables/useScrollToError'
   import InputText from 'primevue/inputtext'
+  import PrimeButton from 'primevue/button'
   import { useField } from 'vee-validate'
   import * as yup from 'yup'
 
   defineOptions({ name: 'add-payment-method-block' })
 
+  const router = useRouter()
   const accountStore = useAccountStore()
+
   const stripe = ref(null)
   const isSubmitting = ref(false)
   const stripeComponents = ref(null)
@@ -139,6 +143,10 @@
     cardCvc.value?.on('blur', handleBlur)
   }
 
+  const redirectUserToAccountSettings = () => {
+    router.push({ name: 'account-settings', query: { payment: true } })
+  }
+
   const visibleDrawer = computed({
     get: () => props.visible,
     set: (value) => {
@@ -180,6 +188,11 @@
       }
 
       const accountData = accountStore.account
+
+      if (!accountData.postal_code || !accountData.country) {
+        throw new Error('Account address are required to add a payment method.')
+      }
+
       const payload = {
         card_address_zip: accountData.postal_code,
         card_country: accountData.country,
@@ -196,12 +209,17 @@
       showToast('success', response.feedback)
       toggleDrawerVisibility(false)
     } catch (error) {
-      emit('onError', error)
-      showToast('error', error)
+      emit('onError', error.message)
+      showToast('error', error.message)
     } finally {
       isSubmitting.value = false
     }
   }
+
+  const userContainAdress = computed(() => {
+    const accountData = accountStore.account
+    return !accountData.postal_code && !accountData.address
+  })
 </script>
 
 <template>
@@ -226,6 +244,19 @@
         title="Payment Method"
       >
         <template #inputs>
+          <div v-if="userContainAdress">
+            <InlineMessage severity="warn">
+              Users must have a registered address before adding a payment method.
+              <PrimeButton
+                label="Register address now."
+                @click="redirectUserToAccountSettings"
+                iconPos="right"
+                class="p-0"
+                size="small"
+                link
+              />
+            </InlineMessage>
+          </div>
           <div class="max-w-3xl w-full flex flex-col gap-8 max-md:gap-6">
             <form
               ref="form"

src/views/AccountSettings/AccountSettingsView.vue

@@ -6,7 +6,9 @@
   import { handleTrackerError } from '@/utils/errorHandlingTracker'
   import * as yup from 'yup'
   import FormFieldsAccountSettings from './FormFields/FormFieldsAccountSettings'
-  import { inject } from 'vue'
+  import { inject, onMounted, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { loadUserAndAccountInfo } from '@/helpers/account-data'
 
   /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
   const tracker = inject('tracker')
@@ -34,13 +36,22 @@
     }
   })
 
+  const router = useRouter()
+
+  const userWasInPayments = ref(false)
+
+  onMounted(() => {
+    userWasInPayments.value = Boolean(router.currentRoute.value.query?.payment) || false
+  })
+
   const handleTrackSuccessEdit = () => {
     tracker.product
       .productEdited({
         productName: 'Account Settings'
       })
       .track()
   }
+
   const handleTrackFailEdit = (error) => {
     const { fieldName, message } = handleTrackerError(error)
     tracker.product
@@ -68,6 +79,20 @@
     isSocialLoginEnabled: yup.boolean(),
     isEnabledMfaToAllUsers: yup.boolean()
   })
+
+  const redirectUserOnSuccessEdit = async () => {
+    if (userWasInPayments.value) {
+      router.push({ path: '/billing/payment', query: { payment: true } })
+      await loadUserAndAccountInfo()
+    } else {
+      router.push({ path: '/' })
+    }
+  }
+
+  const handleActionsSuccessEdit = async () => {
+    handleTrackSuccessEdit()
+    await redirectUserOnSuccessEdit()
+  }
 </script>
 
 <template>
@@ -79,9 +104,9 @@
       <EditFormBlock
         :editService="updateAccountSettingsService"
         :loadService="getAccountSettingsService"
-        @on-edit-success="handleTrackSuccessEdit"
+        @on-edit-success="handleActionsSuccessEdit"
         @on-edit-fail="handleTrackFailEdit"
-        updatedRedirect="home"
+        disableRedirect
         :schema="validationSchema"
       >
         <template #form>

src/views/Billing/Drawer/DrawerPaymentMethod.vue

@@ -39,13 +39,13 @@
   }
 
   const showPaymentMethod = () => {
-    if (route.query.paymentSession) {
+    if (route.query.paymentSession || route.query.payment) {
       openDrawer()
       router.push({ query: {} })
     }
   }
 
-  onMounted(async () => {
+  onMounted(() => {
     showPaymentMethod()
   })