From 1e7231aecf68bf373691c667460a87d6f0bdcefe Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Tue, 1 Oct 2024 08:28:12 -0300
Subject: [PATCH 01/18] [UXE-4954] test: add coverage for redirectToManager
 guard and update router guards (#1764)

Unit tests for the redirectToManager guard were added, and the router guards were refactored to accept routerHandler and dependencies as parameters, improving dependency injection across the guards.
---
 src/router/hooks/beforeEachRoute.js           |  14 +-
 src/router/hooks/guards/accountGuard.js       |   4 +-
 src/router/hooks/guards/billingGuard.js       |   4 +-
 src/router/hooks/guards/logoutGuard.js        |   4 +-
 src/router/hooks/guards/themeGuard.js         |   6 +-
 src/router/hooks/redirectToManager.js         |  17 +-
 src/router/index.js                           |  17 +-
 .../router/hooks/redirectToManager.test.js    | 179 ++++++++++++++++++
 8 files changed, 214 insertions(+), 31 deletions(-)
 create mode 100644 src/tests/router/hooks/redirectToManager.test.js

diff --git a/src/router/hooks/beforeEachRoute.js b/src/router/hooks/beforeEachRoute.js
index eed025ce1..e007ded62 100644
--- a/src/router/hooks/beforeEachRoute.js
+++ b/src/router/hooks/beforeEachRoute.js
@@ -2,16 +2,18 @@ import * as guards from '@/router/hooks/guards'
 import { useHelpCenterStore } from '@/stores/help-center'
 import { useRouter } from 'vue-router'
 
-/** @type {import('vue-router').NavigationGuardWithThis} */
-export default async function beforeEachRoute(to, from, next) {
+export default async function beforeEachRoute(routeHandler, guardDependency) {
+  const { to, next } = routeHandler
+  const { accountStore } = guardDependency
+
   const helpCenterStore = useHelpCenterStore()
   helpCenterStore.close()
   const router = useRouter()
-  await guards.logoutGuard(to, next)
+  await guards.logoutGuard(to, next, accountStore)
   guards.loadingGuard(to)
-  await guards.accountGuard(to, next)
-  guards.themeGuard()
-  guards.billingGuard(to, next)
+  await guards.accountGuard(to, next, accountStore)
+  guards.themeGuard(accountStore)
+  guards.billingGuard(to, next, accountStore)
   guards.redirectGuard(to, next, router)
 
   return next()
diff --git a/src/router/hooks/guards/accountGuard.js b/src/router/hooks/guards/accountGuard.js
index 0e5ef9f3f..e41b1b459 100644
--- a/src/router/hooks/guards/accountGuard.js
+++ b/src/router/hooks/guards/accountGuard.js
@@ -1,11 +1,9 @@
 import { getAccountInfoService, getUserInfoService } from '@/services/account-services'
 import { loadAccountJobRoleService } from '@/services/account-settings-services'
-import { useAccountStore } from '@/stores/account'
 import { setRedirectRoute } from '@/helpers'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function accountGuard(to, next) {
-  const accountStore = useAccountStore()
+export async function accountGuard(to, next, accountStore) {
   const isPrivateRoute = !to.meta.isPublic
   const userNotIsLoggedIn = !accountStore.hasActiveUserId
 
diff --git a/src/router/hooks/guards/billingGuard.js b/src/router/hooks/guards/billingGuard.js
index 5de31090f..719691fdc 100644
--- a/src/router/hooks/guards/billingGuard.js
+++ b/src/router/hooks/guards/billingGuard.js
@@ -1,4 +1,3 @@
-import { useAccountStore } from '@/stores/account'
 import { billingRoutes } from '@/router/routes/billing-routes'
 import { getStaticUrlsByEnvironment } from '@/helpers'
 
@@ -10,8 +9,7 @@ const BILLING_REDIRECT_OPTIONS = {
 const billingUrl = getStaticUrlsByEnvironment('billing')
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function billingGuard(to, next) {
-  const accountStore = useAccountStore()
+export async function billingGuard(to, next, accountStore) {
   const {
     hasActiveUserId,
     redirectToExternalBillingNeeded,
diff --git a/src/router/hooks/guards/logoutGuard.js b/src/router/hooks/guards/logoutGuard.js
index 238085e91..728dcaa56 100644
--- a/src/router/hooks/guards/logoutGuard.js
+++ b/src/router/hooks/guards/logoutGuard.js
@@ -1,11 +1,9 @@
 import { logoutService } from '@/services/auth-services'
-import { useAccountStore } from '@/stores/account'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function logoutGuard(to, next) {
+export async function logoutGuard(to, next, accountStore) {
   if (to.path === '/logout') {
     await logoutService()
-    const accountStore = useAccountStore()
     accountStore.setAccountData({})
     return next()
   }
diff --git a/src/router/hooks/guards/themeGuard.js b/src/router/hooks/guards/themeGuard.js
index c57c6d2eb..cb12568fc 100644
--- a/src/router/hooks/guards/themeGuard.js
+++ b/src/router/hooks/guards/themeGuard.js
@@ -1,8 +1,4 @@
-import { useAccountStore } from '@/stores/account'
-
-export async function themeGuard() {
-  const accountStore = useAccountStore()
-
+export async function themeGuard(accountStore) {
   // TODO: remove the usage of localStorage when API returns the theme
   const theme = localStorage.getItem('theme')
   const fallbackTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
diff --git a/src/router/hooks/redirectToManager.js b/src/router/hooks/redirectToManager.js
index 9ae386530..7c21f19fe 100644
--- a/src/router/hooks/redirectToManager.js
+++ b/src/router/hooks/redirectToManager.js
@@ -1,24 +1,23 @@
 import { getEnvironment, getStaticUrlsByEnvironment } from '@/helpers'
-import { loadContractServicePlan } from '@/services/contract-services'
-import { useAccountStore } from '@/stores/account'
 
-/** @type {import('vue-router').NavigationGuardWithThis} */
-export default async function redirectToManager(to, from, next) {
-  const accountStore = useAccountStore()
+export default async function redirectToManager(routeHandler, guardDependency) {
+  const { to, from, next } = routeHandler
+  const { accountStore, loadContractServicePlan } = guardDependency
   const isPrivateRoute = !to.meta.isPublic
   const accountData = accountStore.accountData
 
   try {
     if (accountStore.hasActiveUserId && isPrivateRoute) {
-      if (accountStore.metricsOnlyAccessRestriction) {
-        return handleNavigationRestriction(to, from, next)
-      }
-
       const isAzion = accountData.email.includes('@azion.com')
       // Azion internal access to console.
       if (isAzion || accountStore.hasAccessConsole) {
         return next()
       }
+
+      if (accountStore.metricsOnlyAccessRestriction) {
+        return handleNavigationRestriction(to, from, next)
+      }
+
       const isNotClientKind = !accountData.client_id
       // [Brand,Reseller,Group] are the kins without client id.
       if (isNotClientKind && !isAzion) {
diff --git a/src/router/index.js b/src/router/index.js
index 123d617fb..04bed7f02 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 import afterEachRouteGuard from './hooks/afterEachRoute'
 import beforeEachRoute from './hooks/beforeEachRoute'
 import redirectToManager from './hooks/redirectToManager'
+import { useAccountStore } from '@/stores/account'
+import { loadContractServicePlan } from '@/services/contract-services'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -85,8 +87,19 @@ const router = createRouter({
   ].concat(errorRoutes)
 })
 
-router.beforeEach(beforeEachRoute)
-router.beforeEach(redirectToManager)
+router.beforeEach((to, from, next) => {
+  const accountStore = useAccountStore()
+  const routeHandler = { to, from, next }
+
+  const guardDependency = {
+    accountStore,
+    loadContractServicePlan
+  }
+
+  beforeEachRoute(routeHandler, guardDependency)
+  redirectToManager(routeHandler, guardDependency)
+})
+
 router.afterEach(afterEachRouteGuard)
 
 export default router
diff --git a/src/tests/router/hooks/redirectToManager.test.js b/src/tests/router/hooks/redirectToManager.test.js
new file mode 100644
index 000000000..b64935fa3
--- /dev/null
+++ b/src/tests/router/hooks/redirectToManager.test.js
@@ -0,0 +1,179 @@
+import { describe, afterAll, it, expect, vi } from 'vitest'
+import redirectToManager from '@/router/hooks/redirectToManager'
+
+vi.stubGlobal('window', {
+  location: {
+    replace: vi.fn()
+  }
+})
+
+const makeSut = (scenario) => {
+  const {
+    hasActiveUserId = false,
+    isPrivateRoute,
+    hasAccessConsole,
+    metricsOnlyAccessRestriction,
+    email = '',
+    clientId,
+    isDeveloperSupportPlan,
+    fromName = ''
+  } = scenario
+
+  const accountStore = {
+    hasActiveUserId: hasActiveUserId,
+    hasAccessConsole: hasAccessConsole,
+    metricsOnlyAccessRestriction: metricsOnlyAccessRestriction,
+    accountData: {
+      email: email,
+      client_id: clientId
+    },
+    setAccountData: vi.fn()
+  }
+
+  const loadContractServicePlan = vi.fn().mockResolvedValue({ isDeveloperSupportPlan })
+
+  const guardDependency = {
+    accountStore,
+    loadContractServicePlan
+  }
+
+  const routeHandler = {
+    to: { meta: { isPublic: !isPrivateRoute }, name: 'some-route' },
+    from: { name: fromName },
+    next: vi.fn()
+  }
+
+  return { guardDependency, routeHandler }
+}
+
+afterAll(() => {
+  vi.unstubAllGlobals()
+  vi.unstubAllEnvs()
+})
+
+describe('redirectToManager', () => {
+  it('should call next if user has an active user id and is on a non-private route', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: false
+    })
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+    expect(routeHandler.next).toHaveBeenCalled()
+  })
+
+  it('should allow full access for users with an @azion.com account', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      email: '@azion.com'
+    })
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(routeHandler.next).toHaveBeenCalled()
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+  })
+
+  it('should allow access for accounts with Developer type', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      email: '@developer.com',
+      clientId: '123',
+      isDeveloperSupportPlan: true
+    })
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(guardDependency.accountStore.setAccountData).toHaveBeenCalledWith({
+      isDeveloperSupportPlan: true
+    })
+    expect(routeHandler.next).toHaveBeenCalled()
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+  })
+  it('should redirect non-developer accounts to the RTM', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      hasAccessConsole: false,
+      email: '@developer.com',
+      clientId: '123',
+      isDeveloperSupportPlan: false
+    })
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(guardDependency.accountStore.setAccountData).toHaveBeenCalledWith({
+      isDeveloperSupportPlan: false
+    })
+    expect(windowLocationReplaceMock).toHaveBeenCalled()
+  })
+
+  it('should redirect to the RTM when accountData does not have a client_id', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      email: '@developer.com',
+      clientId: null
+    })
+
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(windowLocationReplaceMock).toHaveBeenCalled()
+    expect(routeHandler.next).toHaveBeenCalled()
+  })
+
+  it('should handle navigation restriction for metrics only access', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      metricsOnlyAccessRestriction: true
+    })
+
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+    expect(routeHandler.next).toHaveBeenCalled({ name: 'real-time-metrics' })
+  })
+
+  it('should handle navigation restriction for metrics only access and from.name is not metrics', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      metricsOnlyAccessRestriction: true,
+      fromName: 'real-time-metrics'
+    })
+
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+    expect(routeHandler.next).toHaveBeenCalledWith(false)
+  })
+
+  it('should allow access for accounts with console access', async () => {
+    const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
+
+    const { routeHandler, guardDependency } = makeSut({
+      hasActiveUserId: true,
+      isPrivateRoute: true,
+      hasAccessConsole: true
+    })
+
+    await redirectToManager(routeHandler, guardDependency)
+
+    expect(windowLocationReplaceMock).not.toHaveBeenCalled()
+    expect(routeHandler.next).toHaveBeenCalled()
+  })
+})

From 04418dde06c96a8071b1231623c25efaed851aa0 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Wed, 2 Oct 2024 09:22:36 -0300
Subject: [PATCH 02/18] [UXE-5134] feat: implements tracking events in edge
 services (#1773)

---
 src/views/EdgeServices/CreateView.vue | 26 ++++++++++++++++++++++++++
 src/views/EdgeServices/EditView.vue   | 27 +++++++++++++++++++++++++++
 src/views/EdgeServices/ListView.vue   | 20 +++++++++++++++++++-
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/src/views/EdgeServices/CreateView.vue b/src/views/EdgeServices/CreateView.vue
index 5862f4d52..d3926cdc4 100644
--- a/src/views/EdgeServices/CreateView.vue
+++ b/src/views/EdgeServices/CreateView.vue
@@ -5,6 +5,12 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import FormFieldsEdgeService from './FormFields/FormFieldsEdgeService'
   import * as yup from 'yup'
+  import { inject } from 'vue'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineOptions({ name: 'create-edge-service' })
 
   const props = defineProps({
@@ -31,6 +37,24 @@
     code: '',
     active: true
   }
+
+  const handleTrackSuccessCreated = () => {
+    tracker.product.productCreated({
+      productName: 'Edge Service'
+    })
+  }
+
+  const handleTrackFailCreated = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToCreate({
+        productName: 'Edge Service',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
 </script>
 
 <template>
@@ -43,6 +67,8 @@
         :createService="props.createEdgeServiceServices"
         :schema="validationSchema"
         :initialValues="initialValues"
+        @on-response="handleTrackSuccessCreated"
+        @on-response-fail="handleTrackFailCreated"
       >
         <template #form>
           <FormFieldsEdgeService />
diff --git a/src/views/EdgeServices/EditView.vue b/src/views/EdgeServices/EditView.vue
index f64f2097d..c70c5b431 100644
--- a/src/views/EdgeServices/EditView.vue
+++ b/src/views/EdgeServices/EditView.vue
@@ -3,6 +3,12 @@
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import FormCreateEdgeService from '@/views/EdgeServices/FormFields/FormFieldsEdgeService'
   import * as yup from 'yup'
+  import { inject } from 'vue'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineOptions({ name: 'edit-edge-service' })
 
   const emit = defineEmits(['handleEdgeServiceUpdated'])
@@ -30,6 +36,25 @@
     await onSubmit()
     emit('handleEdgeServiceUpdated', values)
   }
+
+  const handleTrackSuccessEdit = () => {
+    tracker.product
+      .productEdited({
+        productName: 'Edge Service'
+      })
+      .track()
+  }
+  const handleTrackFailEdit = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToEdit({
+        productName: 'Edge Service',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
 </script>
 
 <template>
@@ -41,6 +66,8 @@
       :schema="validationSchema"
       :disableRedirect="true"
       :isTabs="true"
+      @on-edit-success="handleTrackSuccessEdit"
+      @on-edit-fail="handleTrackFailEdit"
     >
       <template #form>
         <FormCreateEdgeService />
diff --git a/src/views/EdgeServices/ListView.vue b/src/views/EdgeServices/ListView.vue
index 7346c9bb3..06d048757 100644
--- a/src/views/EdgeServices/ListView.vue
+++ b/src/views/EdgeServices/ListView.vue
@@ -6,7 +6,11 @@
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import EdgeServicesToggleStatus from '@/views/EdgeServices/Dialog/EdgeServicesToggleStatus'
-  import { computed, ref } from 'vue'
+  import { computed, ref, inject } from 'vue'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineOptions({ name: 'list-edge-service' })
 
   const props = defineProps({
@@ -102,6 +106,18 @@
       service: props.deleteEdgeServiceServices
     }
   ]
+
+  const handleTrackEventGoToCreate = () => {
+    tracker.product.clickToCreate({
+      productName: 'Edge Service'
+    })
+  }
+
+  const handleTrackEventGoToEdit = () => {
+    tracker.product.clickToEdit({
+      productName: 'Edge Service'
+    })
+  }
 </script>
 
 <template>
@@ -120,6 +136,8 @@
         @on-load-data="handleLoadData"
         :actions="actions"
         emptyListMessage="No services found."
+        @on-before-go-to-add-page="handleTrackEventGoToCreate"
+        @on-before-go-to-edit="handleTrackEventGoToEdit"
       />
 
       <EmptyResultsBlock

From 901b8208f683986560462ded75753f69ee92d76a Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Wed, 2 Oct 2024 13:59:02 -0300
Subject: [PATCH 03/18] [NO-ISSUE] fix: adjustment to the route guards to
 standardize execution and dependency injection as parameters. (#1775)

This pull request includes significant changes to the routing guards in the application to improve code clarity and maintainability. The most important changes involve refactoring the guards to use a consistent dependency injection pattern and simplifying the guard logic
---
 src/router/hooks/beforeEachRoute.js           | 42 +++++++----
 src/router/hooks/guards/accountGuard.js       |  4 +-
 src/router/hooks/guards/billingGuard.js       | 12 ++--
 src/router/hooks/guards/index.js              | 11 ++-
 src/router/hooks/guards/loadingGuard.js       |  2 +-
 src/router/hooks/guards/logoutGuard.js        |  4 +-
 src/router/hooks/guards/redirectGuard.js      |  4 +-
 .../redirectToManagerGuard.js}                | 30 ++++----
 src/router/hooks/guards/themeGuard.js         |  2 +-
 src/router/index.js                           | 15 ++--
 .../redirectToManagerGuard.test.js}           | 70 +++++++++----------
 11 files changed, 108 insertions(+), 88 deletions(-)
 rename src/router/hooks/{redirectToManager.js => guards/redirectToManagerGuard.js} (70%)
 rename src/tests/router/hooks/{redirectToManager.test.js => guards/redirectToManagerGuard.test.js} (68%)

diff --git a/src/router/hooks/beforeEachRoute.js b/src/router/hooks/beforeEachRoute.js
index e007ded62..86877eb09 100644
--- a/src/router/hooks/beforeEachRoute.js
+++ b/src/router/hooks/beforeEachRoute.js
@@ -1,20 +1,36 @@
-import * as guards from '@/router/hooks/guards'
+import {
+  logoutGuard,
+  loadingGuard,
+  accountGuard,
+  themeGuard,
+  billingGuard,
+  redirectGuard,
+  redirectToManagerGuard
+} from '@/router/hooks/guards'
 import { useHelpCenterStore } from '@/stores/help-center'
 import { useRouter } from 'vue-router'
 
-export default async function beforeEachRoute(routeHandler, guardDependency) {
-  const { to, next } = routeHandler
-  const { accountStore } = guardDependency
-
-  const helpCenterStore = useHelpCenterStore()
-  helpCenterStore.close()
+export default async function beforeEachRoute(guardDependency) {
+  useHelpCenterStore().close()
   const router = useRouter()
-  await guards.logoutGuard(to, next, accountStore)
-  guards.loadingGuard(to)
-  await guards.accountGuard(to, next, accountStore)
-  guards.themeGuard(accountStore)
-  guards.billingGuard(to, next, accountStore)
-  guards.redirectGuard(to, next, router)
+  const { next } = guardDependency
+
+  const guards = [
+    logoutGuard,
+    loadingGuard,
+    accountGuard,
+    themeGuard,
+    billingGuard,
+    redirectGuard,
+    redirectToManagerGuard
+  ]
+
+  for (const executeGuard of guards) {
+    const result = await executeGuard({ ...guardDependency, router })
+    if (result !== undefined) {
+      return next(result)
+    }
+  }
 
   return next()
 }
diff --git a/src/router/hooks/guards/accountGuard.js b/src/router/hooks/guards/accountGuard.js
index e41b1b459..2eb11ccaa 100644
--- a/src/router/hooks/guards/accountGuard.js
+++ b/src/router/hooks/guards/accountGuard.js
@@ -3,7 +3,7 @@ import { loadAccountJobRoleService } from '@/services/account-settings-services'
 import { setRedirectRoute } from '@/helpers'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function accountGuard(to, next, accountStore) {
+export async function accountGuard({ to, accountStore }) {
   const isPrivateRoute = !to.meta.isPublic
   const userNotIsLoggedIn = !accountStore.hasActiveUserId
 
@@ -28,7 +28,7 @@ export async function accountGuard(to, next, accountStore) {
       accountStore.setAccountData(accountInfo)
     } catch {
       setRedirectRoute(to)
-      return next('/login')
+      return '/login'
     }
   }
 }
diff --git a/src/router/hooks/guards/billingGuard.js b/src/router/hooks/guards/billingGuard.js
index 719691fdc..0f940c5ac 100644
--- a/src/router/hooks/guards/billingGuard.js
+++ b/src/router/hooks/guards/billingGuard.js
@@ -9,7 +9,7 @@ const BILLING_REDIRECT_OPTIONS = {
 const billingUrl = getStaticUrlsByEnvironment('billing')
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function billingGuard(to, next, accountStore) {
+export async function billingGuard({ to, accountStore }) {
   const {
     hasActiveUserId,
     redirectToExternalBillingNeeded,
@@ -24,14 +24,18 @@ export async function billingGuard(to, next, accountStore) {
     if (isCurrentRouteBilling) {
       if (redirectToExternalBillingNeeded) {
         window.open(billingUrl, '_blank')
-        return next(false)
+        return false
       }
 
       if (!billingAccessPermitted) {
-        return next('/')
+        return '/'
+      }
+
+      if (to.name === 'billing-tabs') {
+        return true
       }
     } else if (paymentReviewPending) {
-      return next(BILLING_REDIRECT_OPTIONS)
+      return BILLING_REDIRECT_OPTIONS
     }
   }
 }
diff --git a/src/router/hooks/guards/index.js b/src/router/hooks/guards/index.js
index 6002bee1d..4e36d1b7f 100644
--- a/src/router/hooks/guards/index.js
+++ b/src/router/hooks/guards/index.js
@@ -4,5 +4,14 @@ import { accountGuard } from './accountGuard'
 import { themeGuard } from './themeGuard'
 import { billingGuard } from './billingGuard'
 import { redirectGuard } from './redirectGuard'
+import { redirectToManagerGuard } from './redirectToManagerGuard'
 
-export { logoutGuard, loadingGuard, accountGuard, themeGuard, billingGuard, redirectGuard }
+export {
+  logoutGuard,
+  loadingGuard,
+  accountGuard,
+  themeGuard,
+  billingGuard,
+  redirectGuard,
+  redirectToManagerGuard
+}
diff --git a/src/router/hooks/guards/loadingGuard.js b/src/router/hooks/guards/loadingGuard.js
index dc4758842..25fd913c9 100644
--- a/src/router/hooks/guards/loadingGuard.js
+++ b/src/router/hooks/guards/loadingGuard.js
@@ -1,7 +1,7 @@
 import { useLoadingStore } from '@/stores/loading'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function loadingGuard(to) {
+export async function loadingGuard({ to }) {
   const loadingStore = useLoadingStore()
   loadingStore.startLoading()
 
diff --git a/src/router/hooks/guards/logoutGuard.js b/src/router/hooks/guards/logoutGuard.js
index 728dcaa56..87187f301 100644
--- a/src/router/hooks/guards/logoutGuard.js
+++ b/src/router/hooks/guards/logoutGuard.js
@@ -1,10 +1,10 @@
 import { logoutService } from '@/services/auth-services'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function logoutGuard(to, next, accountStore) {
+export async function logoutGuard({ to, accountStore }) {
   if (to.path === '/logout') {
     await logoutService()
     accountStore.setAccountData({})
-    return next()
+    return true
   }
 }
diff --git a/src/router/hooks/guards/redirectGuard.js b/src/router/hooks/guards/redirectGuard.js
index 87d2e1b40..7ada5ad6d 100644
--- a/src/router/hooks/guards/redirectGuard.js
+++ b/src/router/hooks/guards/redirectGuard.js
@@ -1,11 +1,11 @@
 import { getRedirectRoute } from '@/helpers'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export function redirectGuard(to, next, router) {
+export function redirectGuard({ to, router }) {
   if (to.name === 'home') {
     const redirectRoute = getRedirectRoute(router)
     if (redirectRoute) {
-      return next(redirectRoute)
+      return redirectRoute
     }
   }
 }
diff --git a/src/router/hooks/redirectToManager.js b/src/router/hooks/guards/redirectToManagerGuard.js
similarity index 70%
rename from src/router/hooks/redirectToManager.js
rename to src/router/hooks/guards/redirectToManagerGuard.js
index 7c21f19fe..139bf5614 100644
--- a/src/router/hooks/redirectToManager.js
+++ b/src/router/hooks/guards/redirectToManagerGuard.js
@@ -1,29 +1,26 @@
 import { getEnvironment, getStaticUrlsByEnvironment } from '@/helpers'
 
-export default async function redirectToManager(routeHandler, guardDependency) {
-  const { to, from, next } = routeHandler
-  const { accountStore, loadContractServicePlan } = guardDependency
+export async function redirectToManagerGuard({ to, from, accountStore, loadContractServicePlan }) {
   const isPrivateRoute = !to.meta.isPublic
   const accountData = accountStore.accountData
 
   try {
     if (accountStore.hasActiveUserId && isPrivateRoute) {
       const isAzion = accountData.email.includes('@azion.com')
-      // Azion internal access to console.
+
       if (isAzion || accountStore.hasAccessConsole) {
-        return next()
+        return true
       }
 
       if (accountStore.metricsOnlyAccessRestriction) {
-        return handleNavigationRestriction(to, from, next)
+        return handleNavigationRestriction(to, from)
       }
 
       const isNotClientKind = !accountData.client_id
       // [Brand,Reseller,Group] are the kins without client id.
-      if (isNotClientKind && !isAzion) {
-        permanentRedirectToManager()
+      if (isNotClientKind) {
+        return permanentRedirectToManager()
         //ensure that in development env, without redirect, you continue to next route.
-        return next()
       }
 
       // account that are kind client, can access with developer service plan
@@ -36,13 +33,13 @@ export default async function redirectToManager(routeHandler, guardDependency) {
       })
 
       if (!isDeveloperSupportPlan) {
-        permanentRedirectToManager()
+        return permanentRedirectToManager()
       }
     }
   } catch {
-    return next()
+    return true
   }
-  return next()
+  return true
 }
 
 function permanentRedirectToManager() {
@@ -50,20 +47,21 @@ function permanentRedirectToManager() {
   if (environment !== 'development') {
     const managerUrl = getStaticUrlsByEnvironment('manager')
     window.location.replace(managerUrl)
+    return true
   }
 }
 
-function handleNavigationRestriction(to, from, next) {
+function handleNavigationRestriction(to, from) {
   const metricsRouteName = 'real-time-metrics'
   const isNotNavigatingToMetrics = to.name !== metricsRouteName
   const isNavigatingFromMetrics = from.name === metricsRouteName
 
   if (isNotNavigatingToMetrics) {
     if (isNavigatingFromMetrics) {
-      return next(false)
+      return false
     }
-    return next({ name: metricsRouteName })
+    return { name: metricsRouteName }
   }
 
-  return next()
+  return true
 }
diff --git a/src/router/hooks/guards/themeGuard.js b/src/router/hooks/guards/themeGuard.js
index cb12568fc..b85a68f9c 100644
--- a/src/router/hooks/guards/themeGuard.js
+++ b/src/router/hooks/guards/themeGuard.js
@@ -1,4 +1,4 @@
-export async function themeGuard(accountStore) {
+export async function themeGuard({ accountStore }) {
   // TODO: remove the usage of localStorage when API returns the theme
   const theme = localStorage.getItem('theme')
   const fallbackTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
diff --git a/src/router/index.js b/src/router/index.js
index 04bed7f02..124ed183d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,7 +40,6 @@ import { billingRoutes } from '@/router/routes/billing-routes'
 import { createRouter, createWebHistory } from 'vue-router'
 import afterEachRouteGuard from './hooks/afterEachRoute'
 import beforeEachRoute from './hooks/beforeEachRoute'
-import redirectToManager from './hooks/redirectToManager'
 import { useAccountStore } from '@/stores/account'
 import { loadContractServicePlan } from '@/services/contract-services'
 
@@ -87,17 +86,15 @@ const router = createRouter({
   ].concat(errorRoutes)
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   const accountStore = useAccountStore()
-  const routeHandler = { to, from, next }
-
-  const guardDependency = {
+  await beforeEachRoute({
+    to,
+    from,
+    next,
     accountStore,
     loadContractServicePlan
-  }
-
-  beforeEachRoute(routeHandler, guardDependency)
-  redirectToManager(routeHandler, guardDependency)
+  })
 })
 
 router.afterEach(afterEachRouteGuard)
diff --git a/src/tests/router/hooks/redirectToManager.test.js b/src/tests/router/hooks/guards/redirectToManagerGuard.test.js
similarity index 68%
rename from src/tests/router/hooks/redirectToManager.test.js
rename to src/tests/router/hooks/guards/redirectToManagerGuard.test.js
index b64935fa3..fa4168e79 100644
--- a/src/tests/router/hooks/redirectToManager.test.js
+++ b/src/tests/router/hooks/guards/redirectToManagerGuard.test.js
@@ -1,5 +1,5 @@
 import { describe, afterAll, it, expect, vi } from 'vitest'
-import redirectToManager from '@/router/hooks/redirectToManager'
+import { redirectToManagerGuard } from '@/router/hooks/guards/redirectToManagerGuard.js'
 
 vi.stubGlobal('window', {
   location: {
@@ -32,74 +32,69 @@ const makeSut = (scenario) => {
 
   const loadContractServicePlan = vi.fn().mockResolvedValue({ isDeveloperSupportPlan })
 
-  const guardDependency = {
+  return {
     accountStore,
-    loadContractServicePlan
-  }
-
-  const routeHandler = {
+    loadContractServicePlan,
     to: { meta: { isPublic: !isPrivateRoute }, name: 'some-route' },
-    from: { name: fromName },
-    next: vi.fn()
+    from: { name: fromName }
   }
-
-  return { guardDependency, routeHandler }
 }
 
 afterAll(() => {
   vi.unstubAllGlobals()
-  vi.unstubAllEnvs()
 })
 
-describe('redirectToManager', () => {
+describe('redirectToManagerGuard', () => {
   it('should call next if user has an active user id and is on a non-private route', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: false
     })
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
-    expect(routeHandler.next).toHaveBeenCalled()
+    expect(result).toBeTruthy()
   })
 
   it('should allow full access for users with an @azion.com account', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       email: '@azion.com'
     })
-    await redirectToManager(routeHandler, guardDependency)
 
-    expect(routeHandler.next).toHaveBeenCalled()
+    const result = await redirectToManagerGuard(dependencies)
+
+    expect(result).toBeTruthy()
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
   })
 
   it('should allow access for accounts with Developer type', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       email: '@developer.com',
       clientId: '123',
       isDeveloperSupportPlan: true
     })
-    await redirectToManager(routeHandler, guardDependency)
 
-    expect(guardDependency.accountStore.setAccountData).toHaveBeenCalledWith({
+    const result = await redirectToManagerGuard(dependencies)
+
+    expect(dependencies.accountStore.setAccountData).toHaveBeenCalledWith({
       isDeveloperSupportPlan: true
     })
-    expect(routeHandler.next).toHaveBeenCalled()
+    expect(result).toBeTruthy()
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
   })
   it('should redirect non-developer accounts to the RTM', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       hasAccessConsole: false,
@@ -107,73 +102,74 @@ describe('redirectToManager', () => {
       clientId: '123',
       isDeveloperSupportPlan: false
     })
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
-    expect(guardDependency.accountStore.setAccountData).toHaveBeenCalledWith({
+    expect(dependencies.accountStore.setAccountData).toHaveBeenCalledWith({
       isDeveloperSupportPlan: false
     })
     expect(windowLocationReplaceMock).toHaveBeenCalled()
+    expect(result).toBeTruthy()
   })
 
   it('should redirect to the RTM when accountData does not have a client_id', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       email: '@developer.com',
       clientId: null
     })
 
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
     expect(windowLocationReplaceMock).toHaveBeenCalled()
-    expect(routeHandler.next).toHaveBeenCalled()
+    expect(result).toBeTruthy()
   })
 
   it('should handle navigation restriction for metrics only access', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       metricsOnlyAccessRestriction: true
     })
 
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
-    expect(routeHandler.next).toHaveBeenCalled({ name: 'real-time-metrics' })
+    expect(result).toEqual({ name: 'real-time-metrics' })
   })
 
   it('should handle navigation restriction for metrics only access and from.name is not metrics', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       metricsOnlyAccessRestriction: true,
       fromName: 'real-time-metrics'
     })
 
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
-    expect(routeHandler.next).toHaveBeenCalledWith(false)
+    expect(result).toBeFalsy()
   })
 
   it('should allow access for accounts with console access', async () => {
     const windowLocationReplaceMock = vi.spyOn(window.location, 'replace')
 
-    const { routeHandler, guardDependency } = makeSut({
+    const dependencies = makeSut({
       hasActiveUserId: true,
       isPrivateRoute: true,
       hasAccessConsole: true
     })
 
-    await redirectToManager(routeHandler, guardDependency)
+    const result = await redirectToManagerGuard(dependencies)
 
     expect(windowLocationReplaceMock).not.toHaveBeenCalled()
-    expect(routeHandler.next).toHaveBeenCalled()
+    expect(result).toBeTruthy()
   })
 })

From 2e67a97f8f88e63af5bc61a68179ac14d01ed230 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Wed, 2 Oct 2024 16:14:01 -0300
Subject: [PATCH 04/18] [UXE-5136] feat: implements tracking events in digital
 certificate (#1776)

---
 src/views/DigitalCertificates/CreateView.vue | 32 ++++++++++++++++++--
 src/views/DigitalCertificates/EditView.vue   | 26 ++++++++++++++++
 src/views/DigitalCertificates/ListView.vue   | 19 +++++++++++-
 3 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/views/DigitalCertificates/CreateView.vue b/src/views/DigitalCertificates/CreateView.vue
index be963781a..2803c7784 100644
--- a/src/views/DigitalCertificates/CreateView.vue
+++ b/src/views/DigitalCertificates/CreateView.vue
@@ -8,6 +8,8 @@
         :createService="createServiceBySelectedType"
         :schema="validationSchema"
         :initialValues="initialValues"
+        @on-response="handleTrackSuccessCreated"
+        @on-response-fail="handleTrackFailCreated"
       >
         <template #form>
           <InlineMessage
@@ -49,10 +51,13 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
   import * as yup from 'yup'
-  import { ref, watch } from 'vue'
+  import { ref, watch, inject } from 'vue'
   import { useRouter } from 'vue-router'
   import FormFieldsCreateDigitalCertificates from './FormFields/FormFieldsCreateDigitalCertificates.vue'
-  const router = useRouter()
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const props = defineProps({
     createDigitalCertificatesService: {
@@ -64,6 +69,9 @@
       required: true
     }
   })
+
+  const router = useRouter()
+
   const createDigitalCertificateService = props.createDigitalCertificatesService
   const createCSRService = props.createDigitalCertificatesCSRService
 
@@ -148,10 +156,28 @@
       .label('subject alternative names (SAN)')
   })
 
-  function navigateToDomains() {
+  const navigateToDomains = () => {
     router.push({ name: 'list-domains' })
   }
 
+  const handleTrackSuccessCreated = () => {
+    tracker.product.productCreated({
+      productName: 'Digital Certificate'
+    })
+  }
+
+  const handleTrackFailCreated = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToCreate({
+        productName: 'Digital Certificate',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
+
   watch(certificateSelection, () => {
     const isEdgeCertificateCSR =
       certificateSelection.value === certificateTypes.EDGE_CERTIFICATE_CSR
diff --git a/src/views/DigitalCertificates/EditView.vue b/src/views/DigitalCertificates/EditView.vue
index ec582f790..602add0bd 100644
--- a/src/views/DigitalCertificates/EditView.vue
+++ b/src/views/DigitalCertificates/EditView.vue
@@ -9,6 +9,8 @@
         :loadService="props.loadDigitalCertificateService"
         :schema="validationSchema"
         :updatedRedirect="props.updatedRedirect"
+        @on-edit-success="handleTrackSuccessEdit"
+        @on-edit-fail="handleTrackFailEdit"
       >
         <template #form>
           <FormFieldsEditDigitalCertificates
@@ -36,6 +38,11 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import FormFieldsEditDigitalCertificates from './FormFields/FormFieldsEditDigitalCertificates.vue'
   import * as yup from 'yup'
+  import { inject } from 'vue'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const props = defineProps({
     loadDigitalCertificateService: {
@@ -72,4 +79,23 @@
         `This is a Let's Encrypt™ certificate automatically created and managed by Azion and can't be edited.`
       )
   })
+
+  const handleTrackSuccessEdit = () => {
+    tracker.product
+      .productEdited({
+        productName: 'Digital Certificate'
+      })
+      .track()
+  }
+  const handleTrackFailEdit = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToEdit({
+        productName: 'Digital Certificate',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
 </script>
diff --git a/src/views/DigitalCertificates/ListView.vue b/src/views/DigitalCertificates/ListView.vue
index a5244b0fb..d6f6b9884 100644
--- a/src/views/DigitalCertificates/ListView.vue
+++ b/src/views/DigitalCertificates/ListView.vue
@@ -14,6 +14,8 @@
         @on-load-data="handleLoadData"
         emptyListMessage="No digital certificates found."
         :actions="actions"
+        @on-before-go-to-add-page="handleTrackEventGoToCreate"
+        @on-before-go-to-edit="handleTrackEventGoToEdit"
       />
 
       <EmptyResultsBlock
@@ -33,7 +35,7 @@
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, inject } from 'vue'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
   import EmptyResultsBlock from '@/templates/empty-results-block'
@@ -41,6 +43,9 @@
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import PageHeadingBlock from '@/templates/page-heading-block'
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineOptions({ name: 'digital-certificates-view' })
 
   const props = defineProps({
@@ -72,6 +77,18 @@
     hasContentToList.value = event
   }
 
+  const handleTrackEventGoToCreate = () => {
+    tracker.product.clickToCreate({
+      productName: 'Digital Certificate'
+    })
+  }
+
+  const handleTrackEventGoToEdit = () => {
+    tracker.product.clickToEdit({
+      productName: 'Digital Certificate'
+    })
+  }
+
   const getColumns = computed(() => {
     return [
       {

From 6fdae9be9c230c2ee76a44ebdb5945e38738244b Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Wed, 2 Oct 2024 16:40:54 -0300
Subject: [PATCH 05/18] [UXE-5132] feat: implements events in records (#1779)

---
 src/templates/create-drawer-block/index.vue |  1 +
 src/views/EdgeDNS/EditView.vue              | 69 ++++++++++++++++++++-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/templates/create-drawer-block/index.vue b/src/templates/create-drawer-block/index.vue
index 0dfbdd72c..c8099e5e6 100644
--- a/src/templates/create-drawer-block/index.vue
+++ b/src/templates/create-drawer-block/index.vue
@@ -9,6 +9,7 @@
   import DialogUnsavedBlock from '@/templates/dialog-unsaved-block'
 
   import { useScrollToError } from '@/composables/useScrollToError'
+
   defineOptions({
     name: 'create-drawer-block'
   })
diff --git a/src/views/EdgeDNS/EditView.vue b/src/views/EdgeDNS/EditView.vue
index 951f99a41..ac76ff614 100644
--- a/src/views/EdgeDNS/EditView.vue
+++ b/src/views/EdgeDNS/EditView.vue
@@ -12,7 +12,7 @@
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
   import { useToast } from 'primevue/usetoast'
-  import { computed, onBeforeMount, ref, watch, reactive, provide } from 'vue'
+  import { computed, onBeforeMount, ref, watch, reactive, provide, inject } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import * as yup from 'yup'
   import FormFieldsEdgeDnsCreate from './FormFields/FormFieldsEdgeDns.vue'
@@ -20,6 +20,10 @@
   import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import { TTL_MAX_VALUE_RECORDS } from '@/utils/constants'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const props = defineProps({
     loadEdgeDNSService: { type: Function, required: true },
@@ -169,6 +173,7 @@
 
   const openCreateDrawerEDNSResource = () => {
     showCreateRecordDrawer.value = true
+    handleTrackEventGoToCreate()
   }
   const openEditDrawerEDNSResource = (event) => {
     selectedEdgeDnsRecordToEdit.value = event.id
@@ -265,6 +270,61 @@
       service: deleteRecordsServiceEdgeDNSDecorator
     }
   ]
+
+  const handleTrackEventGoToCreate = () => {
+    tracker.product
+      .clickToCreate({
+        productName: 'Record'
+      })
+      .track()
+  }
+
+  const handleTrackEventGoToEdit = () => {
+    tracker.product
+      .clickToEdit({
+        productName: 'Record'
+      })
+      .track()
+  }
+
+  const handleTrackSuccessCreated = () => {
+    tracker.product
+      .productCreated({
+        productName: 'Record'
+      })
+      .track()
+  }
+
+  const handleTrackFailCreated = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToCreate({
+        productName: 'Record',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
+
+  const handleTrackSuccessEdit = () => {
+    tracker.product
+      .productEdited({
+        productName: 'Record'
+      })
+      .track()
+  }
+  const handleTrackFailEdit = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToEdit({
+        productName: 'Record',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
 </script>
 
 <template>
@@ -339,6 +399,7 @@
               emptyListMessage="No records found."
               :actions="actions"
               isTabs
+              @on-before-go-to-edit="handleTrackEventGoToEdit"
             >
               <template #addButton>
                 <PrimeButton
@@ -380,7 +441,8 @@
               :createService="createRecordsService"
               :schema="validationSchemaEDNSRecords"
               :initialValues="initialValuesCreateRecords"
-              @onSuccess="reloadResourcesList"
+              @onSuccess="[reloadResourcesList, handleTrackSuccessCreated()]"
+              @onError="handleTrackFailCreated"
               title="Create Record"
             >
               <template #formFields>
@@ -395,7 +457,8 @@
               :loadService="loadRecordServiceWithEDNSIdDecorator"
               :editService="editRecordServiceWithEDNSIdDecorator"
               :schema="validationSchemaEDNSRecords"
-              @onSuccess="reloadResourcesList"
+              @onSuccess="[reloadResourcesList, handleTrackSuccessEdit()]"
+              @onError="handleTrackFailEdit"
               title="Edit Record"
             >
               <template #formFields>

From 43e721ff0b8b96c76da8df09446813efc8024e94 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Wed, 2 Oct 2024 17:01:33 -0300
Subject: [PATCH 06/18] [UXE-5039] fix: error message parse in waf tuning load
 (#1771)

---
 .../list-waf-rules-tuning-service.js          | 32 +++++++++++++++++--
 .../list-waf-rules-tuning-service.test.js     | 20 ++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index 2632a32cc..6fb20bee6 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -1,5 +1,6 @@
-import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+import * as Errors from '@/services/axios/errors'
 
 export const listWafRulesTuningService = async ({ wafId, domains, network, hourRange, filter }) => {
   if (!wafId) {
@@ -21,6 +22,15 @@ export const listWafRulesTuningService = async ({ wafId, domains, network, hourR
   return parseHttpResponse(httpResponse)
 }
 
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  return httpResponse.body.errors[0].message
+}
+
 const middleware = (filter) => {
   if (!filter?.length) return { countries: null, ipsList: null }
 
@@ -54,9 +64,9 @@ const adapt = (httpResponse) => {
    * like other andpoints.
    */
 
-  // eslint-disable-next-line no-console
-  const isArray = Array.isArray(httpResponse.body.results)
+  if (httpResponse.statusCode !== 200) return httpResponse
 
+  const isArray = Array.isArray(httpResponse.body.results)
   const parsedWafRulesTuning = isArray
     ? httpResponse.body.results.map((event) => {
         const values = {
@@ -94,3 +104,19 @@ const makeSearchParams = ({ domains, network, countries, ipsList, hourRange }) =
 
   return searchParams
 }
+
+const parseHttpResponse = (httpResponse) => {
+  switch (httpResponse.statusCode) {
+    case 200:
+      return httpResponse.body
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      throw new Error(apiError).message
+    case 404:
+      throw new Errors.NotFoundError().message
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
index b810ef8e2..8a8c3907d 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
@@ -89,4 +89,24 @@ describe('WafRulesService', () => {
 
     expect(result).toEqual([])
   })
+
+  it('Should return an API error for an 400 response status', async () => {
+    const apiErrorMock = 'Error message'
+
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        errors: [
+          {
+            message: 'Error message'
+          }
+        ]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.payload)
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
 })

From 6560b36d9df7f79ef67a5c7c72fb31b4d1b2b893 Mon Sep 17 00:00:00 2001
From: Paulo Sobrinho Ferreira <110847590+pauloSF0@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:17:21 -0300
Subject: [PATCH 07/18] [UXE-5149] fix: service keeps loading when there is no
 service registered (#1772)

---
 .../create-service-edge-node-service.js       |  2 +-
 .../load-service-edge-node-service.js         |  7 +--
 .../create-service-edge-node-service.test.js  |  4 +-
 .../load-service-edge-node-service.test.js    |  6 +-
 src/views/EdgeNode/Drawer/index.vue           | 26 +++-----
 .../FormFields/FormFieldsDrawerService.vue    | 59 +++++++++++++++----
 6 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/src/services/edge-node-service-services/create-service-edge-node-service.js b/src/services/edge-node-service-services/create-service-edge-node-service.js
index 2a5e3769d..89bea9926 100644
--- a/src/services/edge-node-service-services/create-service-edge-node-service.js
+++ b/src/services/edge-node-service-services/create-service-edge-node-service.js
@@ -29,7 +29,7 @@ const parseCodeToVariables = (code) => {
 const adapt = (payload) => {
   const variables = parseCodeToVariables(payload.variables)
   return {
-    service_id: payload.service.serviceId,
+    service_id: payload.serviceId,
     variables
   }
 }
diff --git a/src/services/edge-node-service-services/load-service-edge-node-service.js b/src/services/edge-node-service-services/load-service-edge-node-service.js
index 8c1eb25af..6f7e25055 100644
--- a/src/services/edge-node-service-services/load-service-edge-node-service.js
+++ b/src/services/edge-node-service-services/load-service-edge-node-service.js
@@ -6,7 +6,6 @@ export const loadServiceEdgeNodeService = async ({ id, edgeNodeId }) => {
     url: `${makeEdgeNodeBaseUrl()}/${edgeNodeId}/services/${id}`,
     method: 'GET'
   })
-
   httpResponse = adapt(httpResponse, id)
   return parseHttpResponse(httpResponse)
 }
@@ -20,11 +19,7 @@ const adapt = (httpResponse, id) => {
 
   const service = {
     id: id,
-    service: {
-      name: httpResponse.body.service_name,
-      serviceId: httpResponse.body.service_id,
-      id: httpResponse.body.id
-    },
+    serviceId: httpResponse.body.service_id,
     variables: variables
   }
 
diff --git a/src/tests/services/edge-node-service-services/create-service-edge-node-service.test.js b/src/tests/services/edge-node-service-services/create-service-edge-node-service.test.js
index fd6876a47..66b6ea90a 100644
--- a/src/tests/services/edge-node-service-services/create-service-edge-node-service.test.js
+++ b/src/tests/services/edge-node-service-services/create-service-edge-node-service.test.js
@@ -6,9 +6,7 @@ import { describe, expect, it, vi } from 'vitest'
 const fixtures = {
   mock: {
     id: '123',
-    service: {
-      serviceId: '123'
-    },
+    serviceId: '123',
     variables: 'port=8080',
     name: 'X Edge Service'
   }
diff --git a/src/tests/services/edge-node-service-services/load-service-edge-node-service.test.js b/src/tests/services/edge-node-service-services/load-service-edge-node-service.test.js
index ca7020173..8bae49ec7 100644
--- a/src/tests/services/edge-node-service-services/load-service-edge-node-service.test.js
+++ b/src/tests/services/edge-node-service-services/load-service-edge-node-service.test.js
@@ -55,11 +55,7 @@ describe('EdgeNodeServices', () => {
 
     expect(result).toEqual({
       id: fixtures.mockIds.id,
-      service: {
-        id: fixtures.mockResponse.id,
-        name: fixtures.mockResponse.service_name,
-        serviceId: fixtures.mockResponse.service_id
-      },
+      serviceId: fixtures.mockResponse.service_id,
       variables: 'var1=value1'
     })
   })
diff --git a/src/views/EdgeNode/Drawer/index.vue b/src/views/EdgeNode/Drawer/index.vue
index d48b9ae26..d611578c6 100644
--- a/src/views/EdgeNode/Drawer/index.vue
+++ b/src/views/EdgeNode/Drawer/index.vue
@@ -32,7 +32,6 @@
     }
   })
 
-  const listService = ref([])
   const showEditServiceDrawer = ref(false)
   const showCreateServiceDrawer = ref(false)
   const debouncedDrawerAnimate = 300
@@ -41,7 +40,7 @@
   const loadEditServiceDrawer = refDebounced(showEditServiceDrawer, debouncedDrawerAnimate)
 
   const initialValues = {
-    service: {},
+    serviceId: 0,
     variables: '',
     id: props.edgeNodeId
   }
@@ -53,9 +52,7 @@
   }
 
   const validationSchema = yup.object({
-    service: yup.object().shape({
-      serviceId: yup.number().required().label('Service')
-    }),
+    serviceId: yup.number().required().label('Service'),
     variables: yup
       .string()
       .test('validateFilePath', 'The format provided is invalid', validateCode),
@@ -74,26 +71,15 @@
       ...payload,
       edgeNodeId: props.edgeNodeId
     })
-    listService.value = [edgeNode.service]
     return edgeNode
   }
 
-  const listServiceEdgeNode = async () => {
-    listService.value = await props.listServiceEdgeNodeService({
-      edgeNodeId: props.edgeNodeId,
-      bound: false
-    })
-  }
-
   const openDrawerCreate = () => {
-    listService.value = []
-    listServiceEdgeNode()
     showCreateServiceDrawer.value = true
   }
 
   const openDrawerEdit = (id) => {
     if (id) {
-      listService.value = []
       selectedServiceToEdit.value = id.toString()
       showEditServiceDrawer.value = true
     }
@@ -117,8 +103,10 @@
   >
     <template #formFields="{ disabledFields }">
       <FormFieldsDrawerService
-        :listServices="listService"
+        :edgeNodeId="edgeNodeId"
+        :listServicesHandle="listServiceEdgeNodeService"
         :disabledFields="disabledFields"
+        :bound="false"
       />
     </template>
   </CreateDrawerBlock>
@@ -135,8 +123,10 @@
   >
     <template #formFields="{ disabledFields }">
       <FormFieldsDrawerService
-        :listServices="listService"
+        :edgeNodeId="edgeNodeId"
+        :listServicesHandle="listServiceEdgeNodeService"
         :disabledFields="disabledFields"
+        bound
       />
     </template>
   </EditDrawerBlock>
diff --git a/src/views/EdgeNode/FormFields/FormFieldsDrawerService.vue b/src/views/EdgeNode/FormFields/FormFieldsDrawerService.vue
index 616afd181..53dbe6b23 100644
--- a/src/views/EdgeNode/FormFields/FormFieldsDrawerService.vue
+++ b/src/views/EdgeNode/FormFields/FormFieldsDrawerService.vue
@@ -2,24 +2,58 @@
   import { useAccountStore } from '@/stores/account'
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import FieldDropdown from '@/templates/form-fields-inputs/fieldDropdown'
+  import { useToast } from 'primevue/usetoast'
 
   import { useField } from 'vee-validate'
-  import { computed } from 'vue'
+  import { computed, ref, onMounted } from 'vue'
   defineOptions({ name: 'form-fields-drawer-service' })
 
   const props = defineProps({
-    listServices: {
-      type: Array,
+    listServicesHandle: {
+      type: Function,
       required: true
     },
     disabledFields: {
       type: Boolean,
       default: false
+    },
+    edgeNodeId: {
+      type: String,
+      required: true
+    },
+    bound: {
+      type: Boolean
     }
   })
 
+  const listService = ref([])
+  const loadingOptionsServices = ref(false)
+  const toast = useToast()
+
+  const getServices = async () => {
+    try {
+      loadingOptionsServices.value = true
+      listService.value = await props.listServicesHandle({
+        edgeNodeId: props.edgeNodeId,
+        bound: props.bound
+      })
+    } catch (error) {
+      showToast('error', error)
+    } finally {
+      loadingOptionsServices.value = false
+    }
+  }
+
   const { value: variables, errorMessage: variablesError } = useField('variables')
-  const { value: service } = useField('service')
+  const { value: serviceId } = useField('serviceId')
+
+  const showToast = (severity, summary) => {
+    toast.add({
+      closable: true,
+      severity,
+      summary
+    })
+  }
 
   const editorOptions = computed(() => {
     return {
@@ -34,6 +68,10 @@
   const theme = computed(() => {
     return store.currentTheme === 'light' ? 'vs' : 'vs-dark'
   })
+
+  onMounted(() => {
+    getServices()
+  })
 </script>
 
 <template>
@@ -49,15 +87,16 @@
             <FieldDropdown
               label="Service"
               required
-              name="service"
-              :options="props.listServices"
-              :loading="props.listServices.length === 0"
-              :disabled="props.disabledFields"
+              name="serviceId"
+              :options="listService"
+              :loading="loadingOptionsServices"
+              :disabled="props.bound"
               optionLabel="name"
-              :value="service"
+              optionValue="serviceId"
+              :value="serviceId"
               filter
-              class="w-full"
               appendTo="self"
+              class="w-full"
               description="Select the service to be provisioned."
             />
           </div>

From cdd831eba8229625ad652512ec824e6a8f1aeace Mon Sep 17 00:00:00 2001
From: Paulo Sobrinho Ferreira <110847590+pauloSF0@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:33:04 -0300
Subject: [PATCH 08/18] [UXE-5131] feat: add edge dns tracker events (#1780)

---
 src/views/EdgeDNS/CreateView.vue | 26 ++++++++++++++++++++++++++
 src/views/EdgeDNS/EditView.vue   | 20 ++++++++++++++++++++
 src/views/EdgeDNS/ListView.vue   | 18 +++++++++++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/views/EdgeDNS/CreateView.vue b/src/views/EdgeDNS/CreateView.vue
index d1b28e44e..f6b3b1b4a 100644
--- a/src/views/EdgeDNS/CreateView.vue
+++ b/src/views/EdgeDNS/CreateView.vue
@@ -22,6 +22,8 @@
         :createService="props.createEdgeDNSService"
         :schema="validationSchema"
         :initialValues="initialValues"
+        @on-response="handleResponse"
+        @on-response-fail="handleTrackFailedCreation"
       >
         <template #form>
           <FormFieldsEdgeDnsCreate></FormFieldsEdgeDnsCreate>
@@ -47,6 +49,11 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import { useToast } from 'primevue/usetoast'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import { inject } from 'vue'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const props = defineProps({
     createEdgeDNSService: {
@@ -58,6 +65,7 @@
       required: true
     }
   })
+
   const toast = useToast()
 
   const validationSchema = yup.object({
@@ -86,4 +94,22 @@
       summary: 'Successfully copied!'
     })
   }
+
+  const handleResponse = () => {
+    tracker.product.productCreated({
+      productName: 'Edge DNS Zone'
+    })
+  }
+
+  const handleTrackFailedCreation = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToCreate({
+        productName: 'Edge DNS Zone',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
 </script>
diff --git a/src/views/EdgeDNS/EditView.vue b/src/views/EdgeDNS/EditView.vue
index ac76ff614..0bfda4906 100644
--- a/src/views/EdgeDNS/EditView.vue
+++ b/src/views/EdgeDNS/EditView.vue
@@ -160,6 +160,24 @@
     hasContentToList.value = true
   }
 
+  const handleTrackEditEvent = () => {
+    tracker.product.productEdited({
+      productName: 'Edge DNS Zone'
+    })
+  }
+
+  const handleTrackFailEditEvent = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToEdit({
+        productName: 'Edge DNS Zone',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
+
   const listRecordsServiceEdgeDNSDecorator = async () => {
     return await props.listRecordsService({ id: edgeDNSID.value })
   }
@@ -365,6 +383,8 @@
             :schema="validationSchemaEditEDNS"
             :updatedRedirect="updatedRedirect"
             :isTabs="true"
+            @on-edit-success="handleTrackEditEvent"
+            @on-edit-fail="handleTrackFailEditEvent"
           >
             <template #form>
               <FormFieldsEdgeDnsCreate></FormFieldsEdgeDnsCreate>
diff --git a/src/views/EdgeDNS/ListView.vue b/src/views/EdgeDNS/ListView.vue
index 3c8bbe7d2..110376418 100644
--- a/src/views/EdgeDNS/ListView.vue
+++ b/src/views/EdgeDNS/ListView.vue
@@ -25,6 +25,8 @@
         createPagePath="edge-dns/create"
         editPagePath="edge-dns/edit"
         @on-load-data="handleLoadData"
+        @on-before-go-to-add-page="handleTrackEvent"
+        @on-before-go-to-edit="handleTrackEditEvent"
         emptyListMessage="No zone found."
         :actions="actions"
       />
@@ -45,7 +47,7 @@
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, inject } from 'vue'
   import { useToast } from 'primevue/usetoast'
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import ContentBlock from '@/templates/content-block'
@@ -55,6 +57,9 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import PrimeButton from 'primevue/button'
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineOptions({ name: 'edge-dns-view' })
 
   const props = defineProps({
@@ -100,6 +105,17 @@
     })
   }
 
+  const handleTrackEvent = () => {
+    tracker.product.clickToCreate({
+      productName: 'Edge DNS Zone'
+    })
+  }
+  const handleTrackEditEvent = () => {
+    tracker.product.clickToEdit({
+      productName: 'Edge DNS Zone'
+    })
+  }
+
   const getColumns = computed(() => {
     return [
       {

From 09271a5463c64a49733126e339c8fa4c5e469c57 Mon Sep 17 00:00:00 2001
From: Aloisio Bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:52:30 -0300
Subject: [PATCH 09/18] [UXE-4871] feat: change events name and parse error
 message correctly in the services (#1762)

---
 .../create-network-list-service.js              | 15 ++++++++++++++-
 .../edit-network-list-service.js                | 15 ++++++++++++++-
 .../create-network-list-service.test.js         | 17 ++++++++++++++++-
 .../edit-network-list-service.test.js           | 17 ++++++++++++++++-
 src/views/NetworkLists/CreateView.vue           |  4 ++--
 src/views/NetworkLists/EditView.vue             |  4 ++--
 src/views/NetworkLists/ListView.vue             |  4 ++--
 7 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/services/network-lists-services/create-network-list-service.js b/src/services/network-lists-services/create-network-list-service.js
index b093a54e8..74cd53c93 100644
--- a/src/services/network-lists-services/create-network-list-service.js
+++ b/src/services/network-lists-services/create-network-list-service.js
@@ -21,6 +21,19 @@ const adapt = (payload) => {
   }
 }
 
+/**
+ * @param {Object} body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (body) => {
+  for (const keyError of Object.keys(body)) {
+    const errorValue = Array.isArray(body[keyError]) ? body[keyError][0] : body[keyError]
+    if (typeof errorValue === 'string') return errorValue
+    if (typeof errorValue === 'object' && errorValue.message) return errorValue.message[0]
+  }
+  return ''
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
@@ -36,7 +49,7 @@ const parseHttpResponse = (httpResponse) => {
         urlToEditView: `/network-lists/edit/${httpResponse.body.results.id}`
       }
     case 400:
-      const apiError = httpResponse.body.results[0]
+      const apiError = extractApiError(httpResponse.body)
       throw new Error(apiError).message
     case 401:
       throw new Errors.InvalidApiTokenError().message
diff --git a/src/services/network-lists-services/edit-network-list-service.js b/src/services/network-lists-services/edit-network-list-service.js
index 9b38b7aed..8396c7411 100644
--- a/src/services/network-lists-services/edit-network-list-service.js
+++ b/src/services/network-lists-services/edit-network-list-service.js
@@ -27,6 +27,19 @@ const adapt = (payload) => {
   }
 }
 
+/**
+ * @param {Object} body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (body) => {
+  for (const keyError of Object.keys(body)) {
+    const errorValue = Array.isArray(body[keyError]) ? body[keyError][0] : body[keyError]
+    if (typeof errorValue === 'string') return errorValue
+    if (typeof errorValue === 'object' && errorValue.message) return errorValue.message[0]
+  }
+  return ''
+}
+
 /**
  * @param {Object} httpResponse - The HTTP response object.
  * @param {Object} httpResponse.body - The response body.
@@ -39,7 +52,7 @@ const parseHttpResponse = (httpResponse) => {
     case 202:
       return 'Your network list has been edited'
     case 400:
-      const apiError = httpResponse.body.results[0]
+      const apiError = extractApiError(httpResponse.body)
       throw new Error(apiError).message
     case 401:
       throw new Errors.InvalidApiTokenError().message
diff --git a/src/tests/services/network-lists-services/create-network-list-service.test.js b/src/tests/services/network-lists-services/create-network-list-service.test.js
index 12b08437d..de6a2d616 100644
--- a/src/tests/services/network-lists-services/create-network-list-service.test.js
+++ b/src/tests/services/network-lists-services/create-network-list-service.test.js
@@ -60,7 +60,7 @@ describe('NetworkListsServices', () => {
     expect(data.feedback).toBe('Your network list has been created')
   })
 
-  it('Should return an API error for an 40 error status', async () => {
+  it('Should return an API error for an 400 error status with a array of errors', async () => {
     const apiErrorMock = 'Network name "IP" is already in use on this account'
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
@@ -75,6 +75,21 @@ describe('NetworkListsServices', () => {
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
 
+  it('Should return an API error for an 400 error status with a single string error', async () => {
+    const apiErrorMock = 'Network name "IP" is already in use on this account'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: apiErrorMock
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.networkMock)
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
+
   it.each([
     {
       statusCode: 401,
diff --git a/src/tests/services/network-lists-services/edit-network-list-service.test.js b/src/tests/services/network-lists-services/edit-network-list-service.test.js
index 809d69a5f..2d043c870 100644
--- a/src/tests/services/network-lists-services/edit-network-list-service.test.js
+++ b/src/tests/services/network-lists-services/edit-network-list-service.test.js
@@ -51,7 +51,7 @@ describe('NetworkListsServices', () => {
     expect(feedbackMessage).toBe('Your network list has been edited')
   })
 
-  it('Should return an API error for an 400 error status', async () => {
+  it('Should return an API error for an 400 error status with a array of errors', async () => {
     const apiErrorMock = 'Network name "IP" is already in use on this account'
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 400,
@@ -66,6 +66,21 @@ describe('NetworkListsServices', () => {
     expect(feedbackMessage).rejects.toThrow(apiErrorMock)
   })
 
+  it('Should return an API error for an 400 error status with a single string error', async () => {
+    const apiErrorMock = 'Network name "IP" is already in use on this account'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        error: apiErrorMock
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut(fixtures.networkMock)
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
+
   it.each([
     {
       statusCode: 401,
diff --git a/src/views/NetworkLists/CreateView.vue b/src/views/NetworkLists/CreateView.vue
index 6a77bf972..9017acc84 100644
--- a/src/views/NetworkLists/CreateView.vue
+++ b/src/views/NetworkLists/CreateView.vue
@@ -66,7 +66,7 @@
 
   const handleTrackCreation = () => {
     tracker.product.productCreated({
-      productName: 'Network Lists'
+      productName: 'Network List'
     })
   }
 
@@ -74,7 +74,7 @@
     const { fieldName, message } = handleTrackerError(error)
     tracker.product
       .failedToCreate({
-        productName: 'Network Lists',
+        productName: 'Network List',
         errorType: 'api',
         fieldName: fieldName.trim(),
         errorMessage: message
diff --git a/src/views/NetworkLists/EditView.vue b/src/views/NetworkLists/EditView.vue
index 21840eeb9..4725480ad 100644
--- a/src/views/NetworkLists/EditView.vue
+++ b/src/views/NetworkLists/EditView.vue
@@ -74,7 +74,7 @@
   const handleTrackSuccessEdit = () => {
     tracker.product
       .productEdited({
-        productName: 'Network Lists'
+        productName: 'Network List'
       })
       .track()
   }
@@ -82,7 +82,7 @@
     const { fieldName, message } = handleTrackerError(error)
     tracker.product
       .failedToEdit({
-        productName: 'Network Lists',
+        productName: 'Network List',
         errorType: 'api',
         fieldName: fieldName.trim(),
         errorMessage: message
diff --git a/src/views/NetworkLists/ListView.vue b/src/views/NetworkLists/ListView.vue
index 081e2a969..6ecf74347 100644
--- a/src/views/NetworkLists/ListView.vue
+++ b/src/views/NetworkLists/ListView.vue
@@ -77,13 +77,13 @@
 
   const handleCreateTrackEvent = () => {
     tracker.product.clickToCreate({
-      productName: 'Network Lists'
+      productName: 'Network List'
     })
   }
 
   const handleTrackEditEvent = () => {
     tracker.product.clickToEdit({
-      productName: 'Network Lists'
+      productName: 'Network List'
     })
   }
 

From 9c0c520c94f2d491284dde8ba5881ef513498d04 Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Thu, 3 Oct 2024 15:02:46 -0300
Subject: [PATCH 10/18] [UXE-4942] feat: add Azion Copilot with deepchat to AI
 Chat component (#1783)

* Added new routes and origins in azion.config.cjs for the Azion Copilot.
* Updated the AI Chat component to use new interceptor services and handle user prompts more effectively.
* Introduced contextual prompts for domain creation and editing.
---
 azion.config.cjs                              |  19 +++
 .../azion-ai-chat/azion-ai-chat-block.vue     |  68 +++++++----
 .../azion-ai-chat/azion-ai-get-help.vue       |  22 +++-
 .../contextual-prompts/domains/index.js       |  43 ++++++-
 .../contextual-prompts/generic/index.js       |  20 ++++
 .../azion-ai-chat/contextual-prompts/index.js |   3 +-
 src/modules/azion-ai-chat/index.vue           |  50 +++++---
 .../services/interceptor-service.js           |  57 +++++++++
 .../services/make-request-config.js           |   3 +-
 .../services/request-interceptor-service.js   |  23 ----
 .../tests/make-request-config.test.js         |   2 +-
 .../tests/requestInterceptorService.test.js   | 113 ++++++++++++------
 src/templates/navbar-block/index.vue          |   3 +
 vite.config.js                                |   5 +
 14 files changed, 321 insertions(+), 110 deletions(-)
 create mode 100644 src/modules/azion-ai-chat/contextual-prompts/generic/index.js
 create mode 100644 src/modules/azion-ai-chat/services/interceptor-service.js
 delete mode 100644 src/modules/azion-ai-chat/services/request-interceptor-service.js

diff --git a/azion.config.cjs b/azion.config.cjs
index 1016a155d..197b4922c 100644
--- a/azion.config.cjs
+++ b/azion.config.cjs
@@ -255,6 +255,19 @@ const backRules = [
       },
       rewrite: '/webhook/console_feedback'
     }
+  },
+  {
+    name: 'Route Send Message to Copilot',
+    description: 'this router will send the user message to the chatbot',
+    match: '^/ai',
+    behavior: {
+      forwardCookies: true,
+      setOrigin: {
+        name: 'origin-console-ai',
+        type: 'single_origin'
+      },
+      rewrite: '/chat-completions'
+    }
   }
 ]
 
@@ -303,6 +316,12 @@ const AzionConfig = {
       hostHeader: `automate.azion.net`,
       addresses: [`automate.azion.net`]
     },
+    {
+      name: 'origin-console-ai',
+      type: 'single_origin',
+      hostHeader: `ivg5gk272b.map.azionedge.net`,
+      addresses: [`ivg5gk272b.map.azionedge.net`]
+    }
   ],
   rules: {
     request: [...commonRules, ...frontRules, ...backRules],
diff --git a/src/modules/azion-ai-chat/azion-ai-chat-block.vue b/src/modules/azion-ai-chat/azion-ai-chat-block.vue
index 93e2fd23f..45e4b7ca6 100644
--- a/src/modules/azion-ai-chat/azion-ai-chat-block.vue
+++ b/src/modules/azion-ai-chat/azion-ai-chat-block.vue
@@ -9,14 +9,8 @@
     :textInput="textInputStyles"
     :submitButtonStyles="submitButtonStyles"
     :request="makeRequestConfig()"
-    :requestInterceptor="
-      (requestDetails) =>
-        requestInterceptorService(requestDetails, {
-          sessionId: aiAskAzionSessionId,
-          url: currentRouteFullPath,
-          userName: account.name
-        })
-    "
+    :requestInterceptor="interceptor"
+    :responseInterceptor="responseInterceptorService"
   >
     <div class="deep-chat-temporary-message">
       <div :style="`display:flex;align-items:center;flex-direction:column;gap:2rem;`">
@@ -46,7 +40,10 @@
   import suggestionIconMetrics from './assets/suggestion-icon-metrics.svg?url'
   import suggestionIconSecurity from './assets/suggestion-icon-security.svg?url'
   import AzionAiChatSuggestion from './azion-ai-chat-suggestion.vue'
-  import { requestInterceptorService } from './services/request-interceptor-service'
+  import {
+    requestInterceptorService,
+    responseInterceptorService
+  } from './services/interceptor-service'
   import { loadPromptSuggestion } from './services/load-prompt-suggestions'
   import { makeRequestConfig } from './services/make-request-config'
   import { makeSessionId } from './services/make-session-id'
@@ -55,7 +52,6 @@
   import { useRouter } from 'vue-router'
   import { useAccountStore } from '@/stores/account'
   const { currentRoute } = useRouter()
-  const { account } = useAccountStore()
 
   defineOptions({
     name: 'azion-ai-chat-block'
@@ -63,19 +59,12 @@
 
   onMounted(() => {
     generateChatSessionId()
-    getUserNameInfo()
   })
-
+  const accountStore = ref(null)
   const deepChatRef = ref(null)
 
-  defineExpose({
-    deepChatRef
-  })
-
-  const currentRouteFullPath = currentRoute.value.path
   const aiAskAzionSessionId = ref('')
-  const accountName = ref('')
-
+  const promptOrigin = ref(null)
   const errorMessages = ref({
     overrides: {
       default: 'Connection failed. Try sending your message again.'
@@ -298,26 +287,55 @@
   const handleSubmitSuggestion = (promptText) => {
     deepChatRef.value.submitUserMessage({ text: promptText })
   }
+
   const generateChatSessionId = () => {
     aiAskAzionSessionId.value = makeSessionId()
   }
-  const getUserNameInfo = () => {
-    accountName.value = account.name
+
+  const submitUserMessageGetHelp = ({ user, system }) => {
+    promptOrigin.value = {
+      user_prompt: user,
+      system_prompt: system
+    }
+    deepChatRef.value.submitUserMessage({ text: user })
   }
 
   const calculateIconBySuggestionIndex = (index) => {
     return index === 0 ? suggestionIconMetrics : suggestionIconSecurity
   }
 
+  const interceptor = (requestDetails) => {
+    requestInterceptorService(requestDetails, {
+      sessionId: aiAskAzionSessionId.value,
+      url: currentRoute.value.path,
+      userName: accountStore.value.name,
+      clientId: accountStore.value.client_id,
+      prompt: promptOrigin.value,
+      allMessage: deepChatRef.value.getMessages()
+    })
+  }
+
   const loadPromptSuggestionWithRoleDecorator = (role) => {
     suggestionsOptions.value = loadPromptSuggestion(role)
   }
 
   watchEffect(() => {
-    const {
-      account: { jobRole }
-    } = useAccountStore()
+    const { account } = useAccountStore()
+
+    accountStore.value = account
+
+    loadPromptSuggestionWithRoleDecorator(accountStore.value.jobRole)
+  })
+
+  const clearMessages = () => {
+    deepChatRef.value.clearMessages()
+    promptOrigin.value = null
+  }
 
-    loadPromptSuggestionWithRoleDecorator(jobRole)
+  defineExpose({
+    deepChatRef,
+    clearMessages,
+    submitUserMessageGetHelp
   })
 </script>
+./services/interceptor-service
diff --git a/src/modules/azion-ai-chat/azion-ai-get-help.vue b/src/modules/azion-ai-chat/azion-ai-get-help.vue
index 7cc2b2e98..51deb707d 100644
--- a/src/modules/azion-ai-chat/azion-ai-get-help.vue
+++ b/src/modules/azion-ai-chat/azion-ai-get-help.vue
@@ -1,11 +1,31 @@
 <script setup>
   import PrimeButton from 'primevue/button'
+  import { computed } from 'vue'
 
   defineOptions({ name: 'get-help' })
 
   const props = defineProps({
     prompt: {
       type: String
+    },
+    context: {
+      type: Object,
+      default: null
+    }
+  })
+
+  const formatPrompt = computed(() => {
+    if (!props.context) return props.prompt
+
+    const replaceKeys = (text) => {
+      return Object.keys(props.context).reduce((str, key) => {
+        return str.replaceAll(`\${${key}}`, props.context[key])
+      }, text)
+    }
+
+    return {
+      user: replaceKeys(props.prompt.user),
+      system: replaceKeys(props.prompt.system)
     }
   })
 </script>
@@ -17,6 +37,6 @@
     label="Get Help"
     icon="ai ai-ask-azion"
     icon-pos="right"
-    v-prompt="props.prompt"
+    v-prompt="formatPrompt"
   />
 </template>
diff --git a/src/modules/azion-ai-chat/contextual-prompts/domains/index.js b/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
index b462a08dc..9f46fe328 100644
--- a/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
+++ b/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
@@ -4,13 +4,46 @@
  * @typedef {Object} DomainPrompts
  * @property {string} create.general - Prompt for providing detailed instructions for each field in the domain creation form.
  * @property {string} create.settings - Prompt for explaining the use of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
- */
+ * @property {string} create.authentication - Prompt for explaining the use of the Mutual Authentication Settings.
+ * @property {string} edit.general - Prompt for providing detailed instructions for each field in the domain edition form.
+ * @property {string} edit.settings - Prompt for explaining the editing and managing of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
+ * @property {string} edit.authentication - Prompt for explaining the editing and managing of the Mutual Authentication Settings.
+
+*/
 
 export default {
   create: {
-    general:
-      'Please assist me in creating a domain. Provide detailed instructions for each field in the domain creation form.',
-    settings:
-      'Please explain the use of the CNAME field and the CNAME Access Only option. Additionally, describe the differences between the digital certificate options.'
+    general: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in creating and configuring a new domain to link to an edge application. Provide a detailed, step-by-step guide for setting up each field in the domain creation form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper configuration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I want to create a new domain with Azion and link it to an edge application. I need a step-by-step guide on configuring my new domain, including detailed instructions for each field in the domain creation form.'
+    },
+    settings: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the purpose of CNAMEs when creating a new domain linked to an edge application, how to list them to associate with the Azion domain, and the differences between digital certificate options. Provide a detailed explanation to help the user choose the best option for their needs, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I am creating a new domain with Azion Console. While linking it to an edge application, I want to better understand CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options to choose the best one for my needs.'
+    },
+    authentication: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the Mutual Authentication Settings when creating a new domain. Explain how enabling it can benefit the user, providing a detailed guide that includes best practices and examples. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I am creating a new domain with Azion Console. While configuring the main settings, I want to learn more about Mutual Authentication Settings and how enabling it can benefit me.'
+    }
+  },
+  edit: {
+    general: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing an existing domain. Provide a detailed, step-by-step guide for modifying each field in the domain editing form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper reconfiguration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I want to edit one of my domains on Azion. Provide a step-by-step guide on how to edit the main settings in the domain editing form'
+    },
+    settings: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing the CNAME field and the CNAME Access Only option for an existing domain. Provide an overview of the differences between digital certificate options and guide the user on how to edit these settings effectively to avoid issues later. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I am editing one of my domains on Azion and need an overview of CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options. Help me edit these settings in the best way to avoid issues later.'
+    },
+    authentication: {
+      system:
+        'You are a technical writer providing help to users on the Azion platform. Assist the user in managing the Mutual Authentication Settings for an existing domain. Provide guidance that includes best practices and examples, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
+      user: 'I am editing the main settings for one of my domains on Azion and would like guidance on managing the Mutual Authentication Settings, including some best practices.'
+    }
   }
 }
diff --git a/src/modules/azion-ai-chat/contextual-prompts/generic/index.js b/src/modules/azion-ai-chat/contextual-prompts/generic/index.js
new file mode 100644
index 000000000..f63b146df
--- /dev/null
+++ b/src/modules/azion-ai-chat/contextual-prompts/generic/index.js
@@ -0,0 +1,20 @@
+/**
+ * Object containing contextual prompts for the domain creation form.
+ *
+ * @typedef {Object} GenericPrompts
+ * @property {string} generic.create - Generic prompt for providing detailed instructions on how to create and configure a new instance.
+ * @property {string} generic.edit - Generic prompt for providing detailed instructions on how to edit and manage a new instance.
+ */
+
+export default {
+  create: {
+    system:
+      'You are a technical writer providing help to users on Azion platform. Assist the user in creating and configuring a new ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for setting up the main settings, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper configuration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with you.',
+    user: 'I want to configure a new ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for setting up the main settings, including examples and best practices where applicable.'
+  },
+  edit: {
+    system:
+      'You are a technical writer providing help to users on Azion platform. Assist the user in editing settings and managing an existing ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for modifying the main settings and other fields, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper reconfiguration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with you.',
+    user: 'I want to edit and manage an existing ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for modifying the main settings and other fields, including examples and best practices where applicable.'
+  }
+}
diff --git a/src/modules/azion-ai-chat/contextual-prompts/index.js b/src/modules/azion-ai-chat/contextual-prompts/index.js
index 3e6ca27fd..1efe16bca 100644
--- a/src/modules/azion-ai-chat/contextual-prompts/index.js
+++ b/src/modules/azion-ai-chat/contextual-prompts/index.js
@@ -1,3 +1,4 @@
 import DomainsPrompts from './domains'
+import Generic from './generic'
 
-export { DomainsPrompts }
+export { DomainsPrompts, Generic }
diff --git a/src/modules/azion-ai-chat/index.vue b/src/modules/azion-ai-chat/index.vue
index e562f14bb..7fc6ab5be 100644
--- a/src/modules/azion-ai-chat/index.vue
+++ b/src/modules/azion-ai-chat/index.vue
@@ -33,11 +33,15 @@
 
     <div
       class="h-full flex justify-between flex-col"
-      :key="renderCount"
+      v-if="isChatMobile"
     >
-      <AzionAiChat ref="azionAiChatRef" />
+      <AzionAiChat
+        :key="renderCount"
+        ref="azionAiChatRef"
+      />
     </div>
     <Sidebar
+      v-else
       :visible="isChatAiOpen"
       position="bottom"
       headerContent="Copilot"
@@ -53,7 +57,6 @@
         <div class="flex items-center justify-between">
           <h2 class="flex items-center gap-2">
             Copilot
-
             <PrimeTag
               class="ml-2"
               value="Experimental"
@@ -110,11 +113,12 @@
 
   import { useAzionAiChatStore } from '@/stores/azion-ai-chat-store'
   import { updateSessionId } from './services/make-session-id'
-  import { computed, onMounted, onUnmounted, ref } from 'vue'
+  import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
   import hljs from 'highlight.js'
   import { AZION_MESSAGE_TYPE } from '@modules/azion-ai-chat/directives/custom-ai-prompt'
   import { useRouter } from 'vue-router'
   import { windowOpen } from '@/helpers'
+  import { useWindowSize } from '@vueuse/core'
 
   defineOptions({
     name: 'azion-ai-chat-root-block'
@@ -123,6 +127,10 @@
   const azionAiChatMobileRef = ref(null)
   const renderCount = ref(1)
   const router = useRouter()
+  const { width } = useWindowSize()
+  const currentWidth = ref(width.value)
+  const SCREEN_BREAKPOINT_MD = 768
+
   onMounted(() => {
     window.addEventListener('message', aiCustomPromptListenerHandler)
     addSupportToHljs()
@@ -132,6 +140,10 @@
     window.removeEventListener('message', aiCustomPromptListenerHandler)
   })
 
+  const isChatMobile = computed(() => {
+    return currentWidth.value > SCREEN_BREAKPOINT_MD
+  })
+
   const azionAiChatStore = useAzionAiChatStore()
   const isChatAiOpen = computed(() => {
     return azionAiChatStore.isOpen
@@ -148,24 +160,34 @@
   }
 
   const handleClearChat = () => {
-    azionAiChatRef?.value.deepChatRef.clearMessages()
-    azionAiChatMobileRef?.value.deepChatRef.clearMessages()
-    updateSessionId()
     updateChatRenderInstance()
+    azionAiChatRef?.value?.clearMessages()
+    azionAiChatMobileRef?.value?.clearMessages()
+    updateSessionId()
   }
 
   const aiCustomPromptListenerHandler = (event) => {
-    if (event.data.type === AZION_MESSAGE_TYPE) {
-      azionAiChatStore.open()
-      azionAiChatRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
-      setTimeout(() => {
-        azionAiChatMobileRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
-      }, 100)
-    }
+    handleClearChat()
+    setTimeout(() => {
+      if (event.data.type === AZION_MESSAGE_TYPE) {
+        azionAiChatStore.open()
+        azionAiChatRef?.value?.submitUserMessageGetHelp(event.data.prompt)
+
+        azionAiChatMobileRef?.value?.submitUserMessageGetHelp(event.data.prompt)
+      }
+    }, 100)
   }
 
   const openChatInNewTab = () => {
     const url = `${window.location.origin}${router.resolve({ name: 'copilot' }).path}`
     windowOpen(url, '_blank')
   }
+
+  watch(
+    width,
+    () => {
+      currentWidth.value = width.value
+    },
+    { immediate: true }
+  )
 </script>
diff --git a/src/modules/azion-ai-chat/services/interceptor-service.js b/src/modules/azion-ai-chat/services/interceptor-service.js
new file mode 100644
index 000000000..f226e2caf
--- /dev/null
+++ b/src/modules/azion-ai-chat/services/interceptor-service.js
@@ -0,0 +1,57 @@
+/**
+ * Intercepts the request details and adds sessionId, url, userName, and app to the request body.
+ *
+ * @param {Object} requestDetails - The details of the request.
+ * @param {string} requestDetails.sessionId - The session ID.
+ * @param {string} requestDetails.url - The URL.
+ * @param {string} requestDetails.userName - The user name.
+ * @param {string} requestDetails.clientId - The client ID.
+ * @param {Array} requestDetails.allMessage - The array of messages.
+ * @param {string} requestDetails.prompt - The prompt that determines the origin of the chat call.
+ * @return {Object} The modified request details with added properties.
+ */
+export const requestInterceptorService = (
+  requestDetails,
+  { sessionId, url, userName, clientId, allMessage, prompt }
+) => {
+  const APP_PLATFORM_NAME = 'console'
+
+  if (!requestDetails?.body) {
+    return
+  }
+
+  const messages = allMessage.map(({ role, text }) => ({
+    role: role === 'user' ? 'user' : 'system',
+    content: text
+  }))
+
+  const azionAiChat = {
+    session_id: sessionId,
+    user_name: userName,
+    client_id: clientId,
+    url,
+    app: APP_PLATFORM_NAME,
+    ...(prompt && {
+      user_prompt: prompt.user_prompt,
+      system_prompt: prompt.system_prompt
+    })
+  }
+
+  requestDetails.body = {
+    ...requestDetails.body,
+    messages,
+    stream: true,
+    azion: azionAiChat
+  }
+
+  return requestDetails
+}
+
+export const responseInterceptorService = ({ choices }) => {
+  if (!choices?.length) {
+    return
+  }
+  return {
+    text: choices[0].delta?.content
+  }
+}
diff --git a/src/modules/azion-ai-chat/services/make-request-config.js b/src/modules/azion-ai-chat/services/make-request-config.js
index 1d7266c0b..6c96beb7a 100644
--- a/src/modules/azion-ai-chat/services/make-request-config.js
+++ b/src/modules/azion-ai-chat/services/make-request-config.js
@@ -1,9 +1,8 @@
-import { makeAzionAiBaseUrl } from './make-azion-ai-base-url'
 /**
  * Generates a request configuration object for the Ask Azion API.
  */
 export const makeRequestConfig = () => {
   return {
-    url: `${makeAzionAiBaseUrl()}/chat_stream`
+    url: '/ai'
   }
 }
diff --git a/src/modules/azion-ai-chat/services/request-interceptor-service.js b/src/modules/azion-ai-chat/services/request-interceptor-service.js
deleted file mode 100644
index d2529e4e7..000000000
--- a/src/modules/azion-ai-chat/services/request-interceptor-service.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Intercepts the request details and adds sessionId, url, userName, and app to the request body.
- *
- * @param {Object} requestDetails - The details of the request.
- * @param {string} requestDetails.sessionId - The session ID.
- * @param {string} requestDetails.url - The URL.
- * @param {string} requestDetails.userName - The user name.
- * @return {Object} The modified request details with added properties.
- */
-export const requestInterceptorService = (requestDetails, { sessionId, url, userName }) => {
-  const APP_PLATFORM_NAME = 'console'
-
-  if (!requestDetails || !requestDetails.body) {
-    return
-  }
-
-  requestDetails.body['session_id'] = sessionId
-  requestDetails.body['url'] = url
-  requestDetails.body['username'] = userName
-  requestDetails.body['app'] = APP_PLATFORM_NAME
-
-  return requestDetails
-}
diff --git a/src/modules/azion-ai-chat/tests/make-request-config.test.js b/src/modules/azion-ai-chat/tests/make-request-config.test.js
index 0b38e916c..cb48af42c 100644
--- a/src/modules/azion-ai-chat/tests/make-request-config.test.js
+++ b/src/modules/azion-ai-chat/tests/make-request-config.test.js
@@ -13,6 +13,6 @@ describe('makeRequestConfig', () => {
 
     const result = sut()
 
-    expect(result).toEqual({ url: '/api/v4/ai/chat_stream' })
+    expect(result).toEqual({ url: '/ai' })
   })
 })
diff --git a/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js b/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
index b3991adc6..09441c4d2 100644
--- a/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
+++ b/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { requestInterceptorService } from '../services/request-interceptor-service'
+import { requestInterceptorService } from '../services/interceptor-service'
 
 const makeSut = () => {
   return {
@@ -8,54 +8,91 @@ const makeSut = () => {
 }
 
 describe('requestInterceptorService', () => {
-  it('should add correct properties to the request', () => {
+  it('should return undefined if requestDetails.body is not provided', () => {
     const { sut } = makeSut()
-    const requestDetailsMock = {
-      body: {}
-    }
-    const sessionIdMock = '123'
-    const urlMock = 'https://example.com'
-    const userNameMock = 'john'
-
-    const result = sut(requestDetailsMock, {
-      sessionId: sessionIdMock,
-      url: urlMock,
-      userName: userNameMock
+    const requestDetails = {}
+
+    const result = sut(requestDetails, {
+      sessionId: '123',
+      url: '/test-url',
+      userName: 'testUser',
+      clientId: 'client123',
+      allMessage: [],
+      prompt: null
     })
 
-    expect(result.body.session_id).toEqual(sessionIdMock)
-    expect(result.body.url).toEqual(urlMock)
-    expect(result.body.username).toEqual(userNameMock)
-    expect(result.body.app).toEqual('console')
+    expect(result).toBeUndefined()
   })
 
-  it('should not modify the request when its undefined', () => {
+  it('should modify requestDetails.body with valid data', () => {
     const { sut } = makeSut()
-    const sessionIdMock = '123'
-    const urlMock = 'https://example.com'
-    const userNameMock = 'john'
-
-    const result = sut(undefined, {
-      sessionId: sessionIdMock,
-      url: urlMock,
-      userName: userNameMock
+    const requestDetails = { body: {} }
+
+    const result = sut(requestDetails, {
+      sessionId: '123',
+      url: '/test-url',
+      userName: 'testUser',
+      clientId: 'client123',
+      allMessage: [{ role: 'user', text: 'Hello' }],
+      prompt: { user_prompt: 'User prompt', system_prompt: 'System prompt' }
     })
 
-    expect(result).toBeUndefined()
+    expect(result.body).toEqual({
+      messages: [{ role: 'user', content: 'Hello' }],
+      stream: true,
+      azion: {
+        session_id: '123',
+        user_name: 'testUser',
+        client_id: 'client123',
+        url: '/test-url',
+        app: 'console',
+        user_prompt: 'User prompt',
+        system_prompt: 'System prompt'
+      }
+    })
   })
 
-  it('should not modify the request when its empty', () => {
+  it('should handle different roles in allMessage', () => {
     const { sut } = makeSut()
-    const requestDetailsMock = {}
-    const sessionIdMock = '123'
-    const urlMock = 'https://example.com'
-    const userNameMock = 'john'
-
-    const result = sut(requestDetailsMock, {
-      sessionId: sessionIdMock,
-      url: urlMock,
-      userName: userNameMock
+    const requestDetails = { body: {} }
+
+    const result = sut(requestDetails, {
+      sessionId: '123',
+      url: '/test-url',
+      userName: 'testUser',
+      clientId: 'client123',
+      allMessage: [
+        { role: 'user', text: 'Hello' },
+        { role: 'system', text: 'System message' }
+      ],
+      prompt: null
+    })
+
+    expect(result.body.messages).toEqual([
+      { role: 'user', content: 'Hello' },
+      { role: 'system', content: 'System message' }
+    ])
+  })
+
+  it('should handle when prompt is not provided', () => {
+    const { sut } = makeSut()
+    const requestDetails = { body: {} }
+
+    const result = sut(requestDetails, {
+      sessionId: '123',
+      url: '/test-url',
+      userName: 'testUser',
+      clientId: 'client123',
+      allMessage: [{ role: 'user', text: 'Hello' }],
+      prompt: null
+    })
+
+    expect(result.body.azion).toEqual({
+      session_id: '123',
+      user_name: 'testUser',
+      client_id: 'client123',
+      url: '/test-url',
+      app: 'console'
     })
-    expect(result).toBeUndefined()
   })
 })
diff --git a/src/templates/navbar-block/index.vue b/src/templates/navbar-block/index.vue
index a29f1dfa9..27b377d8c 100644
--- a/src/templates/navbar-block/index.vue
+++ b/src/templates/navbar-block/index.vue
@@ -29,6 +29,8 @@
       <div class="flex gap-2 items-center ml-auto">
         <Create />
         <Help />
+        <AiChatButton />
+
         <ConsoleFeedback
           class="text-white border-header bg-header hover:bg-header-button-hover"
           :outlined="false"
@@ -75,6 +77,7 @@
   import Create from './create'
   import ConsoleFeedback from './feedback'
   import Help from './help'
+  import AiChatButton from './ai-chat-button.vue'
   import SwitchAccount from './switch-account'
   import ProfileBlock from '@templates/profile-block'
   import { openDocumentation } from '@/helpers'
diff --git a/vite.config.js b/vite.config.js
index e95f020f3..81b99eff9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -69,6 +69,11 @@ const getConfig = () => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         },
+        '/ai': {
+          target: 'https://ivg5gk272b.map.azionedge.net',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/ai/, '/chat-completions')
+        },
         '/webpagetest': {
           target: `https://www.azion.com/api/webpagetest`,
           changeOrigin: true,

From 3affcac7eb002494e204124651bb6c897769827f Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Thu, 3 Oct 2024 15:32:49 -0300
Subject: [PATCH 11/18] =?UTF-8?q?Revert=20"[UXE-4942]=20feat:=20add=20Azio?=
 =?UTF-8?q?n=20Copilot=20with=20deepchat=20to=20AI=20Chat=20component?=
 =?UTF-8?q?=E2=80=A6"=20(#1785)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 9c0c520c94f2d491284dde8ba5881ef513498d04.
---
 azion.config.cjs                              |  19 ---
 .../azion-ai-chat/azion-ai-chat-block.vue     |  68 ++++-------
 .../azion-ai-chat/azion-ai-get-help.vue       |  22 +---
 .../contextual-prompts/domains/index.js       |  43 +------
 .../contextual-prompts/generic/index.js       |  20 ----
 .../azion-ai-chat/contextual-prompts/index.js |   3 +-
 src/modules/azion-ai-chat/index.vue           |  50 +++-----
 .../services/interceptor-service.js           |  57 ---------
 .../services/make-request-config.js           |   3 +-
 .../services/request-interceptor-service.js   |  23 ++++
 .../tests/make-request-config.test.js         |   2 +-
 .../tests/requestInterceptorService.test.js   | 113 ++++++------------
 src/templates/navbar-block/index.vue          |   3 -
 vite.config.js                                |   5 -
 14 files changed, 110 insertions(+), 321 deletions(-)
 delete mode 100644 src/modules/azion-ai-chat/contextual-prompts/generic/index.js
 delete mode 100644 src/modules/azion-ai-chat/services/interceptor-service.js
 create mode 100644 src/modules/azion-ai-chat/services/request-interceptor-service.js

diff --git a/azion.config.cjs b/azion.config.cjs
index 197b4922c..1016a155d 100644
--- a/azion.config.cjs
+++ b/azion.config.cjs
@@ -255,19 +255,6 @@ const backRules = [
       },
       rewrite: '/webhook/console_feedback'
     }
-  },
-  {
-    name: 'Route Send Message to Copilot',
-    description: 'this router will send the user message to the chatbot',
-    match: '^/ai',
-    behavior: {
-      forwardCookies: true,
-      setOrigin: {
-        name: 'origin-console-ai',
-        type: 'single_origin'
-      },
-      rewrite: '/chat-completions'
-    }
   }
 ]
 
@@ -316,12 +303,6 @@ const AzionConfig = {
       hostHeader: `automate.azion.net`,
       addresses: [`automate.azion.net`]
     },
-    {
-      name: 'origin-console-ai',
-      type: 'single_origin',
-      hostHeader: `ivg5gk272b.map.azionedge.net`,
-      addresses: [`ivg5gk272b.map.azionedge.net`]
-    }
   ],
   rules: {
     request: [...commonRules, ...frontRules, ...backRules],
diff --git a/src/modules/azion-ai-chat/azion-ai-chat-block.vue b/src/modules/azion-ai-chat/azion-ai-chat-block.vue
index 45e4b7ca6..93e2fd23f 100644
--- a/src/modules/azion-ai-chat/azion-ai-chat-block.vue
+++ b/src/modules/azion-ai-chat/azion-ai-chat-block.vue
@@ -9,8 +9,14 @@
     :textInput="textInputStyles"
     :submitButtonStyles="submitButtonStyles"
     :request="makeRequestConfig()"
-    :requestInterceptor="interceptor"
-    :responseInterceptor="responseInterceptorService"
+    :requestInterceptor="
+      (requestDetails) =>
+        requestInterceptorService(requestDetails, {
+          sessionId: aiAskAzionSessionId,
+          url: currentRouteFullPath,
+          userName: account.name
+        })
+    "
   >
     <div class="deep-chat-temporary-message">
       <div :style="`display:flex;align-items:center;flex-direction:column;gap:2rem;`">
@@ -40,10 +46,7 @@
   import suggestionIconMetrics from './assets/suggestion-icon-metrics.svg?url'
   import suggestionIconSecurity from './assets/suggestion-icon-security.svg?url'
   import AzionAiChatSuggestion from './azion-ai-chat-suggestion.vue'
-  import {
-    requestInterceptorService,
-    responseInterceptorService
-  } from './services/interceptor-service'
+  import { requestInterceptorService } from './services/request-interceptor-service'
   import { loadPromptSuggestion } from './services/load-prompt-suggestions'
   import { makeRequestConfig } from './services/make-request-config'
   import { makeSessionId } from './services/make-session-id'
@@ -52,6 +55,7 @@
   import { useRouter } from 'vue-router'
   import { useAccountStore } from '@/stores/account'
   const { currentRoute } = useRouter()
+  const { account } = useAccountStore()
 
   defineOptions({
     name: 'azion-ai-chat-block'
@@ -59,12 +63,19 @@
 
   onMounted(() => {
     generateChatSessionId()
+    getUserNameInfo()
   })
-  const accountStore = ref(null)
+
   const deepChatRef = ref(null)
 
+  defineExpose({
+    deepChatRef
+  })
+
+  const currentRouteFullPath = currentRoute.value.path
   const aiAskAzionSessionId = ref('')
-  const promptOrigin = ref(null)
+  const accountName = ref('')
+
   const errorMessages = ref({
     overrides: {
       default: 'Connection failed. Try sending your message again.'
@@ -287,55 +298,26 @@
   const handleSubmitSuggestion = (promptText) => {
     deepChatRef.value.submitUserMessage({ text: promptText })
   }
-
   const generateChatSessionId = () => {
     aiAskAzionSessionId.value = makeSessionId()
   }
-
-  const submitUserMessageGetHelp = ({ user, system }) => {
-    promptOrigin.value = {
-      user_prompt: user,
-      system_prompt: system
-    }
-    deepChatRef.value.submitUserMessage({ text: user })
+  const getUserNameInfo = () => {
+    accountName.value = account.name
   }
 
   const calculateIconBySuggestionIndex = (index) => {
     return index === 0 ? suggestionIconMetrics : suggestionIconSecurity
   }
 
-  const interceptor = (requestDetails) => {
-    requestInterceptorService(requestDetails, {
-      sessionId: aiAskAzionSessionId.value,
-      url: currentRoute.value.path,
-      userName: accountStore.value.name,
-      clientId: accountStore.value.client_id,
-      prompt: promptOrigin.value,
-      allMessage: deepChatRef.value.getMessages()
-    })
-  }
-
   const loadPromptSuggestionWithRoleDecorator = (role) => {
     suggestionsOptions.value = loadPromptSuggestion(role)
   }
 
   watchEffect(() => {
-    const { account } = useAccountStore()
-
-    accountStore.value = account
-
-    loadPromptSuggestionWithRoleDecorator(accountStore.value.jobRole)
-  })
-
-  const clearMessages = () => {
-    deepChatRef.value.clearMessages()
-    promptOrigin.value = null
-  }
+    const {
+      account: { jobRole }
+    } = useAccountStore()
 
-  defineExpose({
-    deepChatRef,
-    clearMessages,
-    submitUserMessageGetHelp
+    loadPromptSuggestionWithRoleDecorator(jobRole)
   })
 </script>
-./services/interceptor-service
diff --git a/src/modules/azion-ai-chat/azion-ai-get-help.vue b/src/modules/azion-ai-chat/azion-ai-get-help.vue
index 51deb707d..7cc2b2e98 100644
--- a/src/modules/azion-ai-chat/azion-ai-get-help.vue
+++ b/src/modules/azion-ai-chat/azion-ai-get-help.vue
@@ -1,31 +1,11 @@
 <script setup>
   import PrimeButton from 'primevue/button'
-  import { computed } from 'vue'
 
   defineOptions({ name: 'get-help' })
 
   const props = defineProps({
     prompt: {
       type: String
-    },
-    context: {
-      type: Object,
-      default: null
-    }
-  })
-
-  const formatPrompt = computed(() => {
-    if (!props.context) return props.prompt
-
-    const replaceKeys = (text) => {
-      return Object.keys(props.context).reduce((str, key) => {
-        return str.replaceAll(`\${${key}}`, props.context[key])
-      }, text)
-    }
-
-    return {
-      user: replaceKeys(props.prompt.user),
-      system: replaceKeys(props.prompt.system)
     }
   })
 </script>
@@ -37,6 +17,6 @@
     label="Get Help"
     icon="ai ai-ask-azion"
     icon-pos="right"
-    v-prompt="formatPrompt"
+    v-prompt="props.prompt"
   />
 </template>
diff --git a/src/modules/azion-ai-chat/contextual-prompts/domains/index.js b/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
index 9f46fe328..b462a08dc 100644
--- a/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
+++ b/src/modules/azion-ai-chat/contextual-prompts/domains/index.js
@@ -4,46 +4,13 @@
  * @typedef {Object} DomainPrompts
  * @property {string} create.general - Prompt for providing detailed instructions for each field in the domain creation form.
  * @property {string} create.settings - Prompt for explaining the use of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
- * @property {string} create.authentication - Prompt for explaining the use of the Mutual Authentication Settings.
- * @property {string} edit.general - Prompt for providing detailed instructions for each field in the domain edition form.
- * @property {string} edit.settings - Prompt for explaining the editing and managing of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
- * @property {string} edit.authentication - Prompt for explaining the editing and managing of the Mutual Authentication Settings.
-
-*/
+ */
 
 export default {
   create: {
-    general: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in creating and configuring a new domain to link to an edge application. Provide a detailed, step-by-step guide for setting up each field in the domain creation form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper configuration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I want to create a new domain with Azion and link it to an edge application. I need a step-by-step guide on configuring my new domain, including detailed instructions for each field in the domain creation form.'
-    },
-    settings: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the purpose of CNAMEs when creating a new domain linked to an edge application, how to list them to associate with the Azion domain, and the differences between digital certificate options. Provide a detailed explanation to help the user choose the best option for their needs, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am creating a new domain with Azion Console. While linking it to an edge application, I want to better understand CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options to choose the best one for my needs.'
-    },
-    authentication: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the Mutual Authentication Settings when creating a new domain. Explain how enabling it can benefit the user, providing a detailed guide that includes best practices and examples. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am creating a new domain with Azion Console. While configuring the main settings, I want to learn more about Mutual Authentication Settings and how enabling it can benefit me.'
-    }
-  },
-  edit: {
-    general: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing an existing domain. Provide a detailed, step-by-step guide for modifying each field in the domain editing form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper reconfiguration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I want to edit one of my domains on Azion. Provide a step-by-step guide on how to edit the main settings in the domain editing form'
-    },
-    settings: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing the CNAME field and the CNAME Access Only option for an existing domain. Provide an overview of the differences between digital certificate options and guide the user on how to edit these settings effectively to avoid issues later. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am editing one of my domains on Azion and need an overview of CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options. Help me edit these settings in the best way to avoid issues later.'
-    },
-    authentication: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in managing the Mutual Authentication Settings for an existing domain. Provide guidance that includes best practices and examples, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am editing the main settings for one of my domains on Azion and would like guidance on managing the Mutual Authentication Settings, including some best practices.'
-    }
+    general:
+      'Please assist me in creating a domain. Provide detailed instructions for each field in the domain creation form.',
+    settings:
+      'Please explain the use of the CNAME field and the CNAME Access Only option. Additionally, describe the differences between the digital certificate options.'
   }
 }
diff --git a/src/modules/azion-ai-chat/contextual-prompts/generic/index.js b/src/modules/azion-ai-chat/contextual-prompts/generic/index.js
deleted file mode 100644
index f63b146df..000000000
--- a/src/modules/azion-ai-chat/contextual-prompts/generic/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Object containing contextual prompts for the domain creation form.
- *
- * @typedef {Object} GenericPrompts
- * @property {string} generic.create - Generic prompt for providing detailed instructions on how to create and configure a new instance.
- * @property {string} generic.edit - Generic prompt for providing detailed instructions on how to edit and manage a new instance.
- */
-
-export default {
-  create: {
-    system:
-      'You are a technical writer providing help to users on Azion platform. Assist the user in creating and configuring a new ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for setting up the main settings, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper configuration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with you.',
-    user: 'I want to configure a new ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for setting up the main settings, including examples and best practices where applicable.'
-  },
-  edit: {
-    system:
-      'You are a technical writer providing help to users on Azion platform. Assist the user in editing settings and managing an existing ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for modifying the main settings and other fields, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper reconfiguration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with you.',
-    user: 'I want to edit and manage an existing ${instance} to run on the edge using Azion Console. Provide a detailed, step-by-step guide for modifying the main settings and other fields, including examples and best practices where applicable.'
-  }
-}
diff --git a/src/modules/azion-ai-chat/contextual-prompts/index.js b/src/modules/azion-ai-chat/contextual-prompts/index.js
index 1efe16bca..3e6ca27fd 100644
--- a/src/modules/azion-ai-chat/contextual-prompts/index.js
+++ b/src/modules/azion-ai-chat/contextual-prompts/index.js
@@ -1,4 +1,3 @@
 import DomainsPrompts from './domains'
-import Generic from './generic'
 
-export { DomainsPrompts, Generic }
+export { DomainsPrompts }
diff --git a/src/modules/azion-ai-chat/index.vue b/src/modules/azion-ai-chat/index.vue
index 7fc6ab5be..e562f14bb 100644
--- a/src/modules/azion-ai-chat/index.vue
+++ b/src/modules/azion-ai-chat/index.vue
@@ -33,15 +33,11 @@
 
     <div
       class="h-full flex justify-between flex-col"
-      v-if="isChatMobile"
+      :key="renderCount"
     >
-      <AzionAiChat
-        :key="renderCount"
-        ref="azionAiChatRef"
-      />
+      <AzionAiChat ref="azionAiChatRef" />
     </div>
     <Sidebar
-      v-else
       :visible="isChatAiOpen"
       position="bottom"
       headerContent="Copilot"
@@ -57,6 +53,7 @@
         <div class="flex items-center justify-between">
           <h2 class="flex items-center gap-2">
             Copilot
+
             <PrimeTag
               class="ml-2"
               value="Experimental"
@@ -113,12 +110,11 @@
 
   import { useAzionAiChatStore } from '@/stores/azion-ai-chat-store'
   import { updateSessionId } from './services/make-session-id'
-  import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+  import { computed, onMounted, onUnmounted, ref } from 'vue'
   import hljs from 'highlight.js'
   import { AZION_MESSAGE_TYPE } from '@modules/azion-ai-chat/directives/custom-ai-prompt'
   import { useRouter } from 'vue-router'
   import { windowOpen } from '@/helpers'
-  import { useWindowSize } from '@vueuse/core'
 
   defineOptions({
     name: 'azion-ai-chat-root-block'
@@ -127,10 +123,6 @@
   const azionAiChatMobileRef = ref(null)
   const renderCount = ref(1)
   const router = useRouter()
-  const { width } = useWindowSize()
-  const currentWidth = ref(width.value)
-  const SCREEN_BREAKPOINT_MD = 768
-
   onMounted(() => {
     window.addEventListener('message', aiCustomPromptListenerHandler)
     addSupportToHljs()
@@ -140,10 +132,6 @@
     window.removeEventListener('message', aiCustomPromptListenerHandler)
   })
 
-  const isChatMobile = computed(() => {
-    return currentWidth.value > SCREEN_BREAKPOINT_MD
-  })
-
   const azionAiChatStore = useAzionAiChatStore()
   const isChatAiOpen = computed(() => {
     return azionAiChatStore.isOpen
@@ -160,34 +148,24 @@
   }
 
   const handleClearChat = () => {
-    updateChatRenderInstance()
-    azionAiChatRef?.value?.clearMessages()
-    azionAiChatMobileRef?.value?.clearMessages()
+    azionAiChatRef?.value.deepChatRef.clearMessages()
+    azionAiChatMobileRef?.value.deepChatRef.clearMessages()
     updateSessionId()
+    updateChatRenderInstance()
   }
 
   const aiCustomPromptListenerHandler = (event) => {
-    handleClearChat()
-    setTimeout(() => {
-      if (event.data.type === AZION_MESSAGE_TYPE) {
-        azionAiChatStore.open()
-        azionAiChatRef?.value?.submitUserMessageGetHelp(event.data.prompt)
-
-        azionAiChatMobileRef?.value?.submitUserMessageGetHelp(event.data.prompt)
-      }
-    }, 100)
+    if (event.data.type === AZION_MESSAGE_TYPE) {
+      azionAiChatStore.open()
+      azionAiChatRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
+      setTimeout(() => {
+        azionAiChatMobileRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
+      }, 100)
+    }
   }
 
   const openChatInNewTab = () => {
     const url = `${window.location.origin}${router.resolve({ name: 'copilot' }).path}`
     windowOpen(url, '_blank')
   }
-
-  watch(
-    width,
-    () => {
-      currentWidth.value = width.value
-    },
-    { immediate: true }
-  )
 </script>
diff --git a/src/modules/azion-ai-chat/services/interceptor-service.js b/src/modules/azion-ai-chat/services/interceptor-service.js
deleted file mode 100644
index f226e2caf..000000000
--- a/src/modules/azion-ai-chat/services/interceptor-service.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Intercepts the request details and adds sessionId, url, userName, and app to the request body.
- *
- * @param {Object} requestDetails - The details of the request.
- * @param {string} requestDetails.sessionId - The session ID.
- * @param {string} requestDetails.url - The URL.
- * @param {string} requestDetails.userName - The user name.
- * @param {string} requestDetails.clientId - The client ID.
- * @param {Array} requestDetails.allMessage - The array of messages.
- * @param {string} requestDetails.prompt - The prompt that determines the origin of the chat call.
- * @return {Object} The modified request details with added properties.
- */
-export const requestInterceptorService = (
-  requestDetails,
-  { sessionId, url, userName, clientId, allMessage, prompt }
-) => {
-  const APP_PLATFORM_NAME = 'console'
-
-  if (!requestDetails?.body) {
-    return
-  }
-
-  const messages = allMessage.map(({ role, text }) => ({
-    role: role === 'user' ? 'user' : 'system',
-    content: text
-  }))
-
-  const azionAiChat = {
-    session_id: sessionId,
-    user_name: userName,
-    client_id: clientId,
-    url,
-    app: APP_PLATFORM_NAME,
-    ...(prompt && {
-      user_prompt: prompt.user_prompt,
-      system_prompt: prompt.system_prompt
-    })
-  }
-
-  requestDetails.body = {
-    ...requestDetails.body,
-    messages,
-    stream: true,
-    azion: azionAiChat
-  }
-
-  return requestDetails
-}
-
-export const responseInterceptorService = ({ choices }) => {
-  if (!choices?.length) {
-    return
-  }
-  return {
-    text: choices[0].delta?.content
-  }
-}
diff --git a/src/modules/azion-ai-chat/services/make-request-config.js b/src/modules/azion-ai-chat/services/make-request-config.js
index 6c96beb7a..1d7266c0b 100644
--- a/src/modules/azion-ai-chat/services/make-request-config.js
+++ b/src/modules/azion-ai-chat/services/make-request-config.js
@@ -1,8 +1,9 @@
+import { makeAzionAiBaseUrl } from './make-azion-ai-base-url'
 /**
  * Generates a request configuration object for the Ask Azion API.
  */
 export const makeRequestConfig = () => {
   return {
-    url: '/ai'
+    url: `${makeAzionAiBaseUrl()}/chat_stream`
   }
 }
diff --git a/src/modules/azion-ai-chat/services/request-interceptor-service.js b/src/modules/azion-ai-chat/services/request-interceptor-service.js
new file mode 100644
index 000000000..d2529e4e7
--- /dev/null
+++ b/src/modules/azion-ai-chat/services/request-interceptor-service.js
@@ -0,0 +1,23 @@
+/**
+ * Intercepts the request details and adds sessionId, url, userName, and app to the request body.
+ *
+ * @param {Object} requestDetails - The details of the request.
+ * @param {string} requestDetails.sessionId - The session ID.
+ * @param {string} requestDetails.url - The URL.
+ * @param {string} requestDetails.userName - The user name.
+ * @return {Object} The modified request details with added properties.
+ */
+export const requestInterceptorService = (requestDetails, { sessionId, url, userName }) => {
+  const APP_PLATFORM_NAME = 'console'
+
+  if (!requestDetails || !requestDetails.body) {
+    return
+  }
+
+  requestDetails.body['session_id'] = sessionId
+  requestDetails.body['url'] = url
+  requestDetails.body['username'] = userName
+  requestDetails.body['app'] = APP_PLATFORM_NAME
+
+  return requestDetails
+}
diff --git a/src/modules/azion-ai-chat/tests/make-request-config.test.js b/src/modules/azion-ai-chat/tests/make-request-config.test.js
index cb48af42c..0b38e916c 100644
--- a/src/modules/azion-ai-chat/tests/make-request-config.test.js
+++ b/src/modules/azion-ai-chat/tests/make-request-config.test.js
@@ -13,6 +13,6 @@ describe('makeRequestConfig', () => {
 
     const result = sut()
 
-    expect(result).toEqual({ url: '/ai' })
+    expect(result).toEqual({ url: '/api/v4/ai/chat_stream' })
   })
 })
diff --git a/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js b/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
index 09441c4d2..b3991adc6 100644
--- a/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
+++ b/src/modules/azion-ai-chat/tests/requestInterceptorService.test.js
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { requestInterceptorService } from '../services/interceptor-service'
+import { requestInterceptorService } from '../services/request-interceptor-service'
 
 const makeSut = () => {
   return {
@@ -8,91 +8,54 @@ const makeSut = () => {
 }
 
 describe('requestInterceptorService', () => {
-  it('should return undefined if requestDetails.body is not provided', () => {
+  it('should add correct properties to the request', () => {
     const { sut } = makeSut()
-    const requestDetails = {}
-
-    const result = sut(requestDetails, {
-      sessionId: '123',
-      url: '/test-url',
-      userName: 'testUser',
-      clientId: 'client123',
-      allMessage: [],
-      prompt: null
+    const requestDetailsMock = {
+      body: {}
+    }
+    const sessionIdMock = '123'
+    const urlMock = 'https://example.com'
+    const userNameMock = 'john'
+
+    const result = sut(requestDetailsMock, {
+      sessionId: sessionIdMock,
+      url: urlMock,
+      userName: userNameMock
     })
 
-    expect(result).toBeUndefined()
+    expect(result.body.session_id).toEqual(sessionIdMock)
+    expect(result.body.url).toEqual(urlMock)
+    expect(result.body.username).toEqual(userNameMock)
+    expect(result.body.app).toEqual('console')
   })
 
-  it('should modify requestDetails.body with valid data', () => {
+  it('should not modify the request when its undefined', () => {
     const { sut } = makeSut()
-    const requestDetails = { body: {} }
-
-    const result = sut(requestDetails, {
-      sessionId: '123',
-      url: '/test-url',
-      userName: 'testUser',
-      clientId: 'client123',
-      allMessage: [{ role: 'user', text: 'Hello' }],
-      prompt: { user_prompt: 'User prompt', system_prompt: 'System prompt' }
-    })
-
-    expect(result.body).toEqual({
-      messages: [{ role: 'user', content: 'Hello' }],
-      stream: true,
-      azion: {
-        session_id: '123',
-        user_name: 'testUser',
-        client_id: 'client123',
-        url: '/test-url',
-        app: 'console',
-        user_prompt: 'User prompt',
-        system_prompt: 'System prompt'
-      }
+    const sessionIdMock = '123'
+    const urlMock = 'https://example.com'
+    const userNameMock = 'john'
+
+    const result = sut(undefined, {
+      sessionId: sessionIdMock,
+      url: urlMock,
+      userName: userNameMock
     })
-  })
-
-  it('should handle different roles in allMessage', () => {
-    const { sut } = makeSut()
-    const requestDetails = { body: {} }
 
-    const result = sut(requestDetails, {
-      sessionId: '123',
-      url: '/test-url',
-      userName: 'testUser',
-      clientId: 'client123',
-      allMessage: [
-        { role: 'user', text: 'Hello' },
-        { role: 'system', text: 'System message' }
-      ],
-      prompt: null
-    })
-
-    expect(result.body.messages).toEqual([
-      { role: 'user', content: 'Hello' },
-      { role: 'system', content: 'System message' }
-    ])
+    expect(result).toBeUndefined()
   })
 
-  it('should handle when prompt is not provided', () => {
+  it('should not modify the request when its empty', () => {
     const { sut } = makeSut()
-    const requestDetails = { body: {} }
-
-    const result = sut(requestDetails, {
-      sessionId: '123',
-      url: '/test-url',
-      userName: 'testUser',
-      clientId: 'client123',
-      allMessage: [{ role: 'user', text: 'Hello' }],
-      prompt: null
-    })
-
-    expect(result.body.azion).toEqual({
-      session_id: '123',
-      user_name: 'testUser',
-      client_id: 'client123',
-      url: '/test-url',
-      app: 'console'
+    const requestDetailsMock = {}
+    const sessionIdMock = '123'
+    const urlMock = 'https://example.com'
+    const userNameMock = 'john'
+
+    const result = sut(requestDetailsMock, {
+      sessionId: sessionIdMock,
+      url: urlMock,
+      userName: userNameMock
     })
+    expect(result).toBeUndefined()
   })
 })
diff --git a/src/templates/navbar-block/index.vue b/src/templates/navbar-block/index.vue
index 27b377d8c..a29f1dfa9 100644
--- a/src/templates/navbar-block/index.vue
+++ b/src/templates/navbar-block/index.vue
@@ -29,8 +29,6 @@
       <div class="flex gap-2 items-center ml-auto">
         <Create />
         <Help />
-        <AiChatButton />
-
         <ConsoleFeedback
           class="text-white border-header bg-header hover:bg-header-button-hover"
           :outlined="false"
@@ -77,7 +75,6 @@
   import Create from './create'
   import ConsoleFeedback from './feedback'
   import Help from './help'
-  import AiChatButton from './ai-chat-button.vue'
   import SwitchAccount from './switch-account'
   import ProfileBlock from '@templates/profile-block'
   import { openDocumentation } from '@/helpers'
diff --git a/vite.config.js b/vite.config.js
index 81b99eff9..e95f020f3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -69,11 +69,6 @@ const getConfig = () => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         },
-        '/ai': {
-          target: 'https://ivg5gk272b.map.azionedge.net',
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/ai/, '/chat-completions')
-        },
         '/webpagetest': {
           target: `https://www.azion.com/api/webpagetest`,
           changeOrigin: true,

From f580dcca8eebc5bd799bc7a2d0e87ec9f9989713 Mon Sep 17 00:00:00 2001
From: Paulo Sobrinho Ferreira <110847590+pauloSF0@users.noreply.github.com>
Date: Fri, 4 Oct 2024 15:27:45 -0300
Subject: [PATCH 12/18] [UXE-5004] fix: adjusting the description of domains
 (#1790)

---
 .../reset-password-service.test.js            | 35 +++++++++++++++++++
 .../FormFields/FormFieldsCreateDomains.vue    |  3 +-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/tests/services/auth-services/reset-password-service.test.js b/src/tests/services/auth-services/reset-password-service.test.js
index 48b74a500..597535204 100644
--- a/src/tests/services/auth-services/reset-password-service.test.js
+++ b/src/tests/services/auth-services/reset-password-service.test.js
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
 import { resetPasswordService } from '@/services/auth-services'
+import * as Errors from '@/services/axios/errors'
 
 const fixtures = {
   userData: {
@@ -47,4 +48,38 @@ describe('ResetPasswordService', () => {
 
     expect(feedbackMessage).toBe('Password reset successfully')
   })
+  it.each([
+    {
+      statusCode: 401,
+      expectedError: new Errors.InvalidApiTokenError().message
+    },
+    {
+      statusCode: 403,
+      expectedError: new Errors.InvalidApiTokenError().message
+    },
+    {
+      statusCode: 404,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      statusCode: 500,
+      expectedError: new Errors.InternalServerError().message
+    },
+    {
+      statusCode: 'unmappedStatusCode',
+      expectedError: new Errors.UnexpectedError().message
+    }
+  ])(
+    'should throw when request fails with status code $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.userData)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
 })
diff --git a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
index 4743504fc..9f6747616 100644
--- a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
@@ -96,8 +96,7 @@
 
 <template>
   <form-horizontal
-    description=" Create a domain with Azion to launch an edge application and set up security with digital
-      certificates."
+    description="Create a domain with Azion to launch an edge application and set up security with digital certificates."
   >
     <template #title> General </template>
     <template #inputs>

From 279b00a32d1b9609416570217912c1fd70d7a724 Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Mon, 7 Oct 2024 13:20:16 -0300
Subject: [PATCH 13/18] [UXE-5213] refactor: reduce stripe calls (#1789)

Remove multiple stripe calls in console and convert stripe plugin to stripe service.

The requests to m.stripe.com refer to Stripe's fraud detection system. In production environment the requests are kept, but in development and stage env the given behavior is disabled.
---
 src/main.js                                   |  2 -
 src/plugins/StripeIntegrationPlugin.js        | 23 -----
 .../factories/stripe-integration-factory.js   | 30 ------
 src/router/routes/billing-routes/index.js     |  1 +
 .../get-stripe-client-service.js              | 45 +++++++++
 src/services/billing-services/index.js        |  4 +-
 .../add-payment-method-block/index.vue        | 93 ++++++++++---------
 .../stripe-integration-factory.test.js        | 50 ----------
 .../get-stripe-client-service.test.js         | 66 +++++++++++++
 .../Billing/Drawer/DrawerPaymentMethod.vue    |  4 +-
 src/views/Billing/TabsView.vue                |  4 +-
 11 files changed, 171 insertions(+), 151 deletions(-)
 delete mode 100644 src/plugins/StripeIntegrationPlugin.js
 delete mode 100644 src/plugins/factories/stripe-integration-factory.js
 create mode 100644 src/services/billing-services/get-stripe-client-service.js
 delete mode 100644 src/tests/plugins/factories/stripe-integration-factory.test.js
 create mode 100644 src/tests/services/billing-services/get-stripe-client-service.test.js

diff --git a/src/main.js b/src/main.js
index 8bd665807..e8273e029 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,7 +22,6 @@ import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 import * as HelpCenterServices from '@/services/help-center-services'
 import DialogService from 'primevue/dialogservice'
 import { customAiPrompt } from '@modules/azion-ai-chat/directives/custom-ai-prompt'
-import StripeIntegrationPlugin from '@/plugins/StripeIntegrationPlugin'
 
 import TrackerPlugin from '@/plugins/AnalyticsTrackerAdapterPlugin'
 
@@ -42,7 +41,6 @@ app.use(pinia)
 app.use(router)
 app.use(DialogService)
 app.use(TrackerPlugin)
-app.use(StripeIntegrationPlugin)
 app.use(VueMonacoEditorPlugin, {
   paths: {
     vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.38.0/min/vs'
diff --git a/src/plugins/StripeIntegrationPlugin.js b/src/plugins/StripeIntegrationPlugin.js
deleted file mode 100644
index 7c94f8808..000000000
--- a/src/plugins/StripeIntegrationPlugin.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { getEnvironment } from '@/helpers'
-import { makeStripeClient } from './factories/stripe-integration-factory'
-
-/**@type {import('vue').Plugin} */
-export default {
-  // eslint-disable-next-line no-unused-vars
-  install: (Vue, options) => {
-    const environment = getEnvironment()
-
-    let stripeClient
-    try {
-      stripeClient = makeStripeClient(environment)
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error)
-      return
-    }
-
-    const app = Vue
-    app.config.globalProperties.$stripe = stripeClient
-    app.provide('stripe', stripeClient)
-  }
-}
diff --git a/src/plugins/factories/stripe-integration-factory.js b/src/plugins/factories/stripe-integration-factory.js
deleted file mode 100644
index 34d91ae11..000000000
--- a/src/plugins/factories/stripe-integration-factory.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { loadStripe } from '@stripe/stripe-js'
-
-export function makeStripeClient(environment) {
-  const stripeEnvVarName = {
-    development: 'VITE_STRIPE_TOKEN_DEV',
-    stage: 'VITE_STRIPE_TOKEN_STAGE',
-    production: 'VITE_STRIPE_TOKEN_PROD'
-  }
-
-  const enviromentStripeToken = stripeEnvVarName[environment]
-
-  if (!environment) {
-    throw Error('Provide an environment to select correct tracking token')
-  }
-  const isInvalidEnvironment = !['development', 'stage', 'production'].includes(environment)
-  if (isInvalidEnvironment) {
-    throw Error('Provide an valid environment to select correct tracking token')
-  }
-
-  const stripeToken = import.meta.env[enviromentStripeToken]
-  if (!stripeToken) {
-    throw Error('Stripe token is missing, cannot load Stripe. View readme for more info.')
-  }
-
-  const stripePromise = loadStripe(stripeToken, {
-    locale: 'en'
-  })
-
-  return stripePromise
-}
diff --git a/src/router/routes/billing-routes/index.js b/src/router/routes/billing-routes/index.js
index e72ee39c8..b39ce5eb6 100644
--- a/src/router/routes/billing-routes/index.js
+++ b/src/router/routes/billing-routes/index.js
@@ -17,6 +17,7 @@ export const billingRoutes = {
         loadPaymentMethodDefaultService: BillingServices.loadPaymentMethodDefaultService,
         addCreditService: BillingServices.addCreditService,
         createPaymentMethodService: BillingServices.createPaymentMethodService,
+        getStripeClientService: BillingServices.getStripeClientService,
         paymentServices: {
           listPaymentMethodsService: BillingServices.listPaymentMethodsService,
           deletePaymentService: BillingServices.deletePaymentService,
diff --git a/src/services/billing-services/get-stripe-client-service.js b/src/services/billing-services/get-stripe-client-service.js
new file mode 100644
index 000000000..b5a9cca1f
--- /dev/null
+++ b/src/services/billing-services/get-stripe-client-service.js
@@ -0,0 +1,45 @@
+import { getEnvironment } from '@/helpers'
+import { loadStripe } from '@stripe/stripe-js/pure'
+
+const makeStripeClient = async (environment) => {
+  const stripeEnvVarName = {
+    development: 'VITE_STRIPE_TOKEN_DEV',
+    stage: 'VITE_STRIPE_TOKEN_STAGE',
+    production: 'VITE_STRIPE_TOKEN_PROD'
+  }
+
+  const enviromentStripeToken = stripeEnvVarName[environment]
+
+  const isInvalidEnvironment = !['development', 'stage', 'production'].includes(environment)
+  if (isInvalidEnvironment) {
+    throw Error('Provide a valid environment to select correct tracking token')
+  }
+
+  const stripeToken = import.meta.env[enviromentStripeToken]
+  if (!stripeToken) {
+    throw Error('Stripe token is missing, cannot load Stripe. View readme for more info.')
+  }
+
+  if (environment !== 'production') {
+    /**
+     * This avoids calling the endpoint m.stripe.com when not in production
+     * For more information see: https://docs.stripe.com/disputes/prevention/advanced-fraud-detection#disabling-advanced-fraud-detection
+     **/
+    loadStripe.setLoadParameters({ advancedFraudSignals: false })
+  }
+
+  const stripeClient = await loadStripe(stripeToken, {
+    locale: 'en'
+  })
+
+  return stripeClient
+}
+
+export const getStripeClientService = async () => {
+  const environment = getEnvironment()
+  try {
+    return await makeStripeClient(environment)
+  } catch (error) {
+    throw new Error(error.message).message
+  }
+}
diff --git a/src/services/billing-services/index.js b/src/services/billing-services/index.js
index 900c3cfc6..7567bfad2 100644
--- a/src/services/billing-services/index.js
+++ b/src/services/billing-services/index.js
@@ -11,6 +11,7 @@ import { loadInvoiceDataService } from './load-invoice-data-service'
 import { loadPaymentMethodDefaultService } from './load-payment-method-default-service'
 import { listServiceAndProductsChangesService } from './list-service-and-products-changes'
 import { loadInvoiceLastUpdatedService } from './load-invoice-last-updated-service'
+import { getStripeClientService } from './get-stripe-client-service'
 
 export {
   listPaymentMethodsService,
@@ -25,5 +26,6 @@ export {
   loadInvoiceDataService,
   loadPaymentMethodDefaultService,
   listServiceAndProductsChangesService,
-  loadInvoiceLastUpdatedService
+  loadInvoiceLastUpdatedService,
+	getStripeClientService
 }
diff --git a/src/templates/add-payment-method-block/index.vue b/src/templates/add-payment-method-block/index.vue
index 645f76b6e..bc9646615 100644
--- a/src/templates/add-payment-method-block/index.vue
+++ b/src/templates/add-payment-method-block/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, ref, inject, onMounted } from 'vue'
+  import { computed, ref, onMounted } from 'vue'
   import { useToast } from 'primevue/usetoast'
   import ActionBarBlock from '@/templates/action-bar-block'
   import Sidebar from 'primevue/sidebar'
@@ -14,7 +14,6 @@
   import * as yup from 'yup'
 
   defineOptions({ name: 'add-payment-method-block' })
-  const stripePlugin = inject('stripe')
 
   const accountStore = useAccountStore()
   const stripe = ref(null)
@@ -42,6 +41,10 @@
     createService: {
       type: Function,
       required: true
+    },
+    stripeClientService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -60,31 +63,46 @@
     initialValue: ''
   })
 
+  const showToast = (severity, summary) => {
+    const options = {
+      closable: true,
+      severity: severity,
+      summary: severity,
+      detail: summary
+    }
+
+    toast.add(options)
+  }
+
   const initializeStripeComponents = async () => {
-    stripe.value = await stripePlugin
-    stripeComponents.value = stripe.value.elements()
-    const theme = accountStore.currentTheme
-    const inputStyles = {
-      style: {
-        base: {
-          fontFamily: "'Roboto', sans-serif",
-          color: theme === 'dark' ? '#ffffff' : '#000000'
-        },
-        '::placeholder': {
-          color: '#ededed'
-        },
-        invalid: {
-          color: '#fa755a',
-          iconColor: '#fa755a'
+    try {
+      stripe.value = await props.stripeClientService()
+      stripeComponents.value = stripe.value.elements()
+      const theme = accountStore.currentTheme
+      const inputStyles = {
+        style: {
+          base: {
+            fontFamily: "'Roboto', sans-serif",
+            color: theme === 'dark' ? '#ffffff' : '#000000'
+          },
+          '::placeholder': {
+            color: '#ededed'
+          },
+          invalid: {
+            color: '#fa755a',
+            iconColor: '#fa755a'
+          }
         }
       }
+      cardNumber.value = stripeComponents.value.create('cardNumber', {
+        ...inputStyles,
+        showIcon: true
+      })
+      cardExpiry.value = stripeComponents.value.create('cardExpiry', inputStyles)
+      cardCvc.value = stripeComponents.value.create('cardCvc', inputStyles)
+    } catch (error) {
+      showToast('error', error)
     }
-    cardNumber.value = stripeComponents.value.create('cardNumber', {
-      ...inputStyles,
-      showIcon: true
-    })
-    cardExpiry.value = stripeComponents.value.create('cardExpiry', inputStyles)
-    cardCvc.value = stripeComponents.value.create('cardCvc', inputStyles)
   }
 
   const handleError = (event, errorType) => {
@@ -108,17 +126,17 @@
   }
 
   const addStripeComponentsToTemplate = () => {
-    cardNumber.value.mount('#card-number-element')
-    cardNumber.value.on('change', (event) => handleError(event, 'cardNumber'))
-    cardNumber.value.on('blur', handleBlur)
+    cardNumber.value?.mount('#card-number-element')
+    cardNumber.value?.on('change', (event) => handleError(event, 'cardNumber'))
+    cardNumber.value?.on('blur', handleBlur)
 
-    cardExpiry.value.mount('#card-expiry-element')
-    cardExpiry.value.on('change', (event) => handleError(event, 'cardExpiry'))
-    cardExpiry.value.on('blur', handleBlur)
+    cardExpiry.value?.mount('#card-expiry-element')
+    cardExpiry.value?.on('change', (event) => handleError(event, 'cardExpiry'))
+    cardExpiry.value?.on('blur', handleBlur)
 
-    cardCvc.value.mount('#card-cvc-element')
-    cardCvc.value.on('change', (event) => handleError(event, 'cardCvc'))
-    cardCvc.value.on('blur', handleBlur)
+    cardCvc.value?.mount('#card-cvc-element')
+    cardCvc.value?.on('change', (event) => handleError(event, 'cardCvc'))
+    cardCvc.value?.on('blur', handleBlur)
   }
 
   const visibleDrawer = computed({
@@ -148,17 +166,6 @@
     }
   }
 
-  const showToast = (severity, summary) => {
-    const options = {
-      closable: true,
-      severity: severity,
-      summary: severity,
-      detail: summary
-    }
-
-    toast.add(options)
-  }
-
   const handleSubmit = async () => {
     isSubmitting.value = true
     try {
diff --git a/src/tests/plugins/factories/stripe-integration-factory.test.js b/src/tests/plugins/factories/stripe-integration-factory.test.js
deleted file mode 100644
index 4a28c19fa..000000000
--- a/src/tests/plugins/factories/stripe-integration-factory.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { makeStripeClient } from '@/plugins/factories/stripe-integration-factory'
-
-const makeSut = () => {
-  return {
-    sut: makeStripeClient
-  }
-}
-
-const fixtures = {
-  stripeToken: 'token_test_1234556'
-}
-
-describe('StripteIntegrationFactory', () => {
-  it('should return an error whe no environment is provided', () => {
-    const { sut } = makeSut()
-
-    expect(() => sut(null)).toThrowError('Provide an environment to select correct tracking token')
-  })
-
-  it('should return an error on invalid environment provided', () => {
-    const { sut } = makeSut()
-
-    expect(() => sut('invalid-environment-stub')).toThrowError(
-      'Provide an valid environment to select correct tracking token'
-    )
-  })
-
-  it('should create analytics with correct configuration', () => {
-    vi.unstubAllEnvs()
-    vi.stubEnv('VITE_STRIPE_TOKEN_DEV', fixtures.stripeToken)
-
-    const { sut } = makeSut()
-
-    const stripeClient = sut('development')
-
-    expect(stripeClient).toBeTruthy()
-  })
-
-  it('should return a error on missing stripe token', () => {
-    vi.unstubAllEnvs()
-    vi.stubEnv('VITE_STRIPE_TOKEN_DEV', '')
-
-    const { sut } = makeSut()
-
-    expect(() => sut('development')).toThrowError(
-      'Stripe token is missing, cannot load Stripe. View readme for more info.'
-    )
-  })
-})
diff --git a/src/tests/services/billing-services/get-stripe-client-service.test.js b/src/tests/services/billing-services/get-stripe-client-service.test.js
new file mode 100644
index 000000000..f0d9a4b54
--- /dev/null
+++ b/src/tests/services/billing-services/get-stripe-client-service.test.js
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { getStripeClientService } from '@/services/billing-services'
+import { loadStripe } from '@stripe/stripe-js/pure'
+
+vi.mock('@stripe/stripe-js/pure', () => ({
+  loadStripe: vi.fn()
+}))
+
+const makeSut = () => {
+  return {
+    sut: getStripeClientService
+  }
+}
+
+afterEach(() => {
+  vi.unstubAllEnvs()
+  vi.resetAllMocks()
+})
+
+describe('Billing Services', () => {
+  it('should return an error when incorrect environment is provided', async () => {
+    vi.stubEnv('VITE_ENVIRONMENT', 'invalid-stub-env')
+    const { sut } = makeSut()
+
+    await expect(sut()).rejects.toThrowError(
+      'Provide a valid environment to select correct tracking token'
+    )
+  })
+
+  it('should return an error when stripe token is not provided', async () => {
+    vi.stubEnv('VITE_ENVIRONMENT', 'development')
+    vi.stubEnv('VITE_STRIPE_TOKEN_DEV', '')
+
+    const { sut } = makeSut()
+
+    await expect(sut()).rejects.toThrowError(
+      'Stripe token is missing, cannot load Stripe. View readme for more info.'
+    )
+  })
+
+  it.each([
+    { env: 'development', key: 'VITE_STRIPE_TOKEN_DEV' },
+    { env: 'stage', key: 'VITE_STRIPE_TOKEN_STAGE' }
+  ])('should set parameter to stripe load when in $env environment', async ({ env, key }) => {
+    vi.stubEnv('VITE_ENVIRONMENT', env)
+    vi.stubEnv(key, 'some-stripe-token')
+
+    loadStripe.setLoadParameters = vi.fn()
+
+    const { sut } = makeSut()
+
+    await sut()
+
+    expect(loadStripe.setLoadParameters).toHaveBeenCalledWith({ advancedFraudSignals: false })
+  })
+
+  it('should return the stripe client when variables are provided', async () => {
+    vi.stubEnv('VITE_ENVIRONMENT', 'production')
+    vi.stubEnv('VITE_STRIPE_TOKEN_PROD', 'some-stripe-token')
+
+    const { sut } = makeSut()
+
+    await expect(sut()).resolves.not.toThrowError()
+    expect(loadStripe).toHaveBeenCalledWith('some-stripe-token', { locale: 'en' })
+  })
+})
diff --git a/src/views/Billing/Drawer/DrawerPaymentMethod.vue b/src/views/Billing/Drawer/DrawerPaymentMethod.vue
index cb39bb7c0..015f26d61 100644
--- a/src/views/Billing/Drawer/DrawerPaymentMethod.vue
+++ b/src/views/Billing/Drawer/DrawerPaymentMethod.vue
@@ -14,7 +14,8 @@
     createPaymentMethodService: {
       type: Function,
       required: true
-    }
+    },
+    getStripeClientService: { type: Function, required: true }
   })
 
   const showCreatePaymentMethodDrawer = ref(false)
@@ -56,6 +57,7 @@
 <template>
   <CreatePaymentMethodBlock
     :createService="props.createPaymentMethodService"
+    :stripeClientService="props.getStripeClientService"
     v-model:visible="showCreatePaymentMethodDrawer"
     v-if="showCreateDrawer"
     @onSuccess="handleCreatePaymentMethod"
diff --git a/src/views/Billing/TabsView.vue b/src/views/Billing/TabsView.vue
index 5d54b78c2..b23769813 100644
--- a/src/views/Billing/TabsView.vue
+++ b/src/views/Billing/TabsView.vue
@@ -38,7 +38,8 @@
     addCreditService: { type: Function, required: true },
     createPaymentMethodService: { type: Function, required: true },
     paymentServices: { type: Object, required: true },
-    billsServices: { type: Object, required: true }
+    billsServices: { type: Object, required: true },
+    getStripeClientService: { type: Function, required: true }
   })
 
   const cardDefault = ref({
@@ -159,6 +160,7 @@
       <DrawerPaymentMethod
         ref="drawerPaymentMethodRef"
         :createPaymentMethodService="props.createPaymentMethodService"
+        :getStripeClientService="props.getStripeClientService"
         @onSuccess="loadListPaymentMethods"
       />
       <TabView

From 435d52cf1236fb843645aa8ead7c6460eeed5012 Mon Sep 17 00:00:00 2001
From: Paulo Sobrinho Ferreira <110847590+pauloSF0@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:22:10 -0300
Subject: [PATCH 14/18] [UXE-5133] feat: add purge tracker events (#1788)

---
 .../analytics/trackers/ProductTracker.js      | 15 +++
 .../analytics/AnalyticsTrackerAdapter.test.js | 34 +++++++
 .../list-data-stream-domains-service.test.js  | 55 +++++++++++
 .../list-data-stream-template-service.test.js | 56 ++++++++++++
 ...edge-application-functions-service.test.js |  2 +-
 .../edit-function-service.test.js             | 91 +++++++++++++++++++
 ...edge-firewall-rules-engine-service.test.js | 81 +++++++++++++++++
 src/views/EdgeFunctions/ListView.vue          |  1 +
 src/views/NetworkLists/ListView.vue           |  1 +
 src/views/PersonalTokens/ListView.vue         |  1 +
 src/views/RealTimePurge/CreateView.vue        | 26 +++++-
 src/views/RealTimePurge/ListView.vue          | 18 +++-
 src/views/TeamsPermissions/ListView.vue       |  1 +
 src/views/Users/ListView.vue                  |  1 +
 src/views/Variables/ListView.vue              |  1 +
 src/views/WafRules/ListView.vue               |  1 +
 16 files changed, 382 insertions(+), 3 deletions(-)
 create mode 100644 src/tests/services/data-stream-services/list-data-stream-domains-service.test.js
 create mode 100644 src/tests/services/data-stream-services/list-data-stream-template-service.test.js
 create mode 100644 src/tests/services/edge-firewall-functions-services/edit-function-service.test.js
 create mode 100644 src/tests/services/edge-firewall-rules-engine-services/delete-edge-firewall-rules-engine-service.test.js

diff --git a/src/plugins/analytics/trackers/ProductTracker.js b/src/plugins/analytics/trackers/ProductTracker.js
index df5940e70..7efd057c8 100644
--- a/src/plugins/analytics/trackers/ProductTracker.js
+++ b/src/plugins/analytics/trackers/ProductTracker.js
@@ -54,6 +54,21 @@ export class ProductTracker {
     return this.#trackerAdapter
   }
 
+  /**
+   * @param {Object} payload
+   * @param {String} productName
+   * @returns {AnalyticsTrackerAdapter}
+   */
+  clickedOnEvent(productName, payload) {
+    this.#trackerAdapter.addEvent({
+      eventName: `Clicked on ${productName}`,
+      props: {
+        ...payload
+      }
+    })
+    return this.#trackerAdapter
+  }
+
   /**
    * @param {Object} payload
    * @param {AzionProductsNames} payload.productName
diff --git a/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js b/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
index fee360258..ada21958e 100644
--- a/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
+++ b/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
@@ -590,4 +590,38 @@ describe('AnalyticsTrackerAdapter', () => {
       origin: originName
     })
   })
+
+  it('should be able to track a Clicked on event', () => {
+    const { sut, analyticsClientSpy } = makeSut()
+    const productNameMock = 'Purge'
+    const purgeType = 'cache key'
+
+    sut.product.clickedOnEvent(productNameMock, {
+      purgeType
+    })
+
+    sut.track()
+
+    expect(analyticsClientSpy.track).toHaveBeenCalledWith('Clicked on Purge', {
+      purgeType,
+      application: fixtures.application
+    })
+  })
+
+  it('should be able to track a realTimeMetrics', () => {
+    const { sut, analyticsClientSpy } = makeSut()
+    const eventName = 'Clicked on More Options on Real-Time Metrics'
+    const payload = {
+      chart: 'map chart',
+      application: fixtures.application
+    }
+
+    sut.realTimeMetrics.clickedToRealTimeMetrics({ eventName, payload })
+
+    sut.track()
+
+    expect(analyticsClientSpy.track).toHaveBeenCalledWith(eventName, payload)
+  })
+
+
 })
diff --git a/src/tests/services/data-stream-services/list-data-stream-domains-service.test.js b/src/tests/services/data-stream-services/list-data-stream-domains-service.test.js
new file mode 100644
index 000000000..46202b7e1
--- /dev/null
+++ b/src/tests/services/data-stream-services/list-data-stream-domains-service.test.js
@@ -0,0 +1,55 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listDataStreamDomainsService } from '@/services/data-stream-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  domainsMock: {
+    domain_id: 1239875,
+    name: 'JS Edge Node',
+    selected: false
+  }
+}
+
+const makeSut = () => {
+  const sut = listDataStreamDomainsService
+
+  return {
+    sut
+  }
+}
+
+describe('DataStreamServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] }
+    })
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut({})
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/data_streaming/domains?page_size=2000`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly all returned domains', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.domainsMock] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({})
+
+    expect(result).toEqual([
+      {
+        id: fixtures.domainsMock.domain_id,
+        domainID: fixtures.domainsMock.domain_id,
+        name: fixtures.domainsMock.name,
+        selected: fixtures.domainsMock.selected
+      }
+    ])
+  })
+})
diff --git a/src/tests/services/data-stream-services/list-data-stream-template-service.test.js b/src/tests/services/data-stream-services/list-data-stream-template-service.test.js
new file mode 100644
index 000000000..51bb30143
--- /dev/null
+++ b/src/tests/services/data-stream-services/list-data-stream-template-service.test.js
@@ -0,0 +1,56 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listDataStreamTemplateService } from '@/services/data-stream-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  templateMock: {
+    id: 1239875,
+    template_model: 'JS Edge Node',
+    name: 'test'
+  }
+}
+
+const makeSut = () => {
+  const sut = listDataStreamTemplateService
+
+  return {
+    sut
+  }
+}
+
+describe('DataStreamServices', () => {
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [] }
+    })
+    const { sut } = makeSut()
+    const version = 'v3'
+    await sut({})
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `${version}/data_streaming/templates`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly all returned template', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.templateMock] }
+    })
+    const { sut } = makeSut()
+    const customTemplate = { label: 'Custom Template', value: 'CUSTOM_TEMPLATE', template: '' }
+
+    const result = await sut({})
+
+    expect(result).toEqual([
+      {
+        value: fixtures.templateMock.id,
+        label: fixtures.templateMock.name,
+        template: fixtures.templateMock.template_model
+      },
+      customTemplate
+    ])
+  })
+})
diff --git a/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js b/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
index 99b220830..57e49b7dd 100644
--- a/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/create-edge-application-functions-service.test.js
@@ -20,7 +20,7 @@ const makeSut = () => {
   }
 }
 
-describe('CreateFunctionService', () => {
+describe('EdgeFirewallFunctionsServices', () => {
   it('should call API with correct params and parse args as JSON', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValue({
       statusCode: 201,
diff --git a/src/tests/services/edge-firewall-functions-services/edit-function-service.test.js b/src/tests/services/edge-firewall-functions-services/edit-function-service.test.js
new file mode 100644
index 000000000..10fb88f2d
--- /dev/null
+++ b/src/tests/services/edge-firewall-functions-services/edit-function-service.test.js
@@ -0,0 +1,91 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { editFunctionService } from '@/services/edge-firewall-functions-services'
+import { describe, expect, it, vi } from 'vitest'
+import * as Errors from '@/services/axios/errors'
+
+const fixtures = {
+  functionPayload: {
+    id: 12,
+    edgeFirewallID: '2321',
+    edgeFunctionID: '1234',
+    name: 'teste',
+    args: '{"key":"value"}'
+  }
+}
+
+const makeSut = () => {
+  const sut = editFunctionService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallFunctionsServices', () => {
+  it('should call API with correct params and parse args as JSON', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200
+    })
+
+    const { sut } = makeSut()
+
+    await sut(fixtures.functionPayload)
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/edge_firewall/${fixtures.functionPayload.edgeFirewallID}/functions_instances/${fixtures.functionPayload.id}`,
+      method: 'PATCH',
+      body: {
+        name: fixtures.functionPayload.name,
+        edge_function: fixtures.functionPayload.edgeFunctionID,
+        json_args: JSON.parse(fixtures.functionPayload.args)
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully updated', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {}
+    })
+    const { sut } = makeSut()
+
+    const data = await sut(fixtures.functionPayload)
+
+    expect(data).toBe('Your Function has been updated')
+  })
+
+  it.each([
+    {
+      statusCode: 401,
+      expectedError: new Errors.InvalidApiTokenError().message
+    },
+    {
+      statusCode: 403,
+      expectedError: new Errors.PermissionError().message
+    },
+    {
+      statusCode: 404,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      statusCode: 500,
+      expectedError: new Errors.InternalServerError().message
+    },
+    {
+      statusCode: 'unmappedStatusCode',
+      expectedError: new Errors.UnexpectedError().message
+    }
+  ])(
+    'should throw when request fails with status code $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const response = sut(fixtures.functionPayload)
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/edge-firewall-rules-engine-services/delete-edge-firewall-rules-engine-service.test.js b/src/tests/services/edge-firewall-rules-engine-services/delete-edge-firewall-rules-engine-service.test.js
new file mode 100644
index 000000000..8665353f7
--- /dev/null
+++ b/src/tests/services/edge-firewall-rules-engine-services/delete-edge-firewall-rules-engine-service.test.js
@@ -0,0 +1,81 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { deleteEdgeFirewallRulesEngineService } from '@/services/edge-firewall-rules-engine-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const makeSut = () => {
+  const sut = deleteEdgeFirewallRulesEngineService
+
+  return {
+    sut
+  }
+}
+
+describe('EdgeFirewallRulesEngineServices', () => {
+  it('should call Api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+    const ruleEngineId = 12387555
+    const edgeFirewallId = 4245
+    const { sut } = makeSut()
+    await sut({ ruleEngineId, edgeFirewallId })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      method: 'DELETE',
+      url: `v3/edge_firewall/${edgeFirewallId}/rules_engine/${ruleEngineId}`
+    })
+  })
+
+  it('should return a feedback message on successfully deleted', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 204
+    })
+    const ruleEngineId = 12387555
+    const edgeFirewallId = 4245
+
+    const { sut } = makeSut()
+
+    const feedbackMessage = await sut({ ruleEngineId, edgeFirewallId })
+
+    expect(feedbackMessage).toBe('Rules Engine successfully deleted')
+  })
+
+  it.each([
+    {
+      statusCode: 401,
+      expectedError: new Errors.InvalidApiTokenError().message
+    },
+    {
+      statusCode: 403,
+      expectedError: new Errors.PermissionError().message
+    },
+    {
+      statusCode: 404,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      statusCode: 500,
+      expectedError: new Errors.InternalServerError().message
+    },
+    {
+      statusCode: 'unmappedStatusCode',
+      expectedError: new Errors.UnexpectedError().message
+    }
+  ])(
+    'should throw when request fails with status code $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const ruleEngineId = 12387555
+      const edgeFirewallId = 4245
+
+      const response = sut({ ruleEngineId, edgeFirewallId })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/views/EdgeFunctions/ListView.vue b/src/views/EdgeFunctions/ListView.vue
index f86bf7dd7..74de485e2 100644
--- a/src/views/EdgeFunctions/ListView.vue
+++ b/src/views/EdgeFunctions/ListView.vue
@@ -23,6 +23,7 @@
         description="Click the button below to create your first function."
         createButtonLabel="Edge Function"
         createPagePath="edge-functions/create"
+        @click-to-create="handleCreateTrackEvent"
         :documentationService="documentationService"
       >
         <template #illustration>
diff --git a/src/views/NetworkLists/ListView.vue b/src/views/NetworkLists/ListView.vue
index 6ecf74347..7545e04a2 100644
--- a/src/views/NetworkLists/ListView.vue
+++ b/src/views/NetworkLists/ListView.vue
@@ -22,6 +22,7 @@
         title="No network lists have been added"
         description="Click the button below to add a network list based on ASNs, countries, or IP addresses."
         createButtonLabel="Network List"
+        @click-to-create="handleCreateTrackEvent"
         createPagePath="network-lists/create"
         :documentationService="documentationService"
       >
diff --git a/src/views/PersonalTokens/ListView.vue b/src/views/PersonalTokens/ListView.vue
index bae3174a8..c1b74111c 100644
--- a/src/views/PersonalTokens/ListView.vue
+++ b/src/views/PersonalTokens/ListView.vue
@@ -22,6 +22,7 @@
         description="Click the button below to generate your first personal token."
         createButtonLabel="Personal Token"
         createPagePath="personal-tokens/create"
+        @click-to-create="handleTrackEvent"
         :documentationService="documentationService"
       >
         <template #illustration>
diff --git a/src/views/RealTimePurge/CreateView.vue b/src/views/RealTimePurge/CreateView.vue
index bbdfc90d0..db3052523 100644
--- a/src/views/RealTimePurge/CreateView.vue
+++ b/src/views/RealTimePurge/CreateView.vue
@@ -7,6 +7,8 @@
       <CreateFormBlock
         :createService="props.createRealTimePurgeService"
         :schema="validationSchema"
+        @on-response="handleResponse"
+        @on-response-fail="handleTrackFailedCreation"
         :initialValues="initialValues"
       >
         <template #form>
@@ -39,7 +41,11 @@
   import FormFieldsCreateRealTimePurge from './FormFields/FormFieldsCreateRealTimePurge'
   import ActionBarBlockWithTeleport from '@templates/action-bar-block/action-bar-with-teleport'
   import * as yup from 'yup'
-  import { ref } from 'vue'
+  import { ref, inject } from 'vue'
+  import { handleTrackerError } from '@/utils/errorHandlingTracker'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const props = defineProps({
     createRealTimePurgeService: {
@@ -52,6 +58,24 @@
     }
   })
 
+  const handleResponse = () => {
+    tracker.product.productCreated({
+      productName: 'Purge'
+    })
+  }
+
+  const handleTrackFailedCreation = (error) => {
+    const { fieldName, message } = handleTrackerError(error)
+    tracker.product
+      .failedToCreate({
+        productName: 'Purge',
+        errorType: 'api',
+        fieldName: fieldName.trim(),
+        errorMessage: message
+      })
+      .track()
+  }
+
   const validationSchema = yup.object({
     layer: yup.string().required(),
     purgeType: yup.string().required(),
diff --git a/src/views/RealTimePurge/ListView.vue b/src/views/RealTimePurge/ListView.vue
index e7b052e72..fa21593dd 100644
--- a/src/views/RealTimePurge/ListView.vue
+++ b/src/views/RealTimePurge/ListView.vue
@@ -17,6 +17,7 @@
         addButtonLabel="Purge"
         createPagePath="real-time-purge/create"
         @on-load-data="handleLoadData"
+        @on-before-go-to-add-page="handleTrackEvent"
         :isGraphql="true"
         :enableEditClick="false"
         emptyListMessage="No purge found."
@@ -28,6 +29,7 @@
         title="No purges have been added"
         description="Click the button below to add your first purge."
         createButtonLabel="Purge"
+        @click-to-create="handleTrackEvent"
         createPagePath="real-time-purge/create"
         :documentationService="documentationService"
       >
@@ -47,10 +49,13 @@
   import PageHeadingBlock from '@/templates/page-heading-block'
   import InlineMessage from 'primevue/inlinemessage'
   import DialogPurge from './Dialog'
-  import { computed, ref } from 'vue'
+  import { computed, ref, inject } from 'vue'
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import { useToast } from 'primevue/usetoast'
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   const props = defineProps({
     listRealTimePurgeService: { required: true, type: Function },
     createRealTimePurgeService: {
@@ -77,6 +82,16 @@
     showDialogPurge.value = false
   }
 
+  const handleTrackEvent = () => {
+    tracker.product.clickToCreate({
+      productName: 'Purge'
+    })
+  }
+
+  const handleClickedOnEvent = (purgeType) => {
+    tracker.product.clickedOnEvent('Purge', { purgeType })
+  }
+
   const showToast = (severity, detail) => {
     if (!detail) return
     const options = {
@@ -98,6 +113,7 @@
     try {
       const { feedback } = await props.createRealTimePurgeService(dataPurge)
       showToast('success', feedback)
+      handleClickedOnEvent(purgeToRepurge.type)
     } catch (error) {
       showToast('error', error)
     } finally {
diff --git a/src/views/TeamsPermissions/ListView.vue b/src/views/TeamsPermissions/ListView.vue
index 1bce39bb0..79bee1fb1 100644
--- a/src/views/TeamsPermissions/ListView.vue
+++ b/src/views/TeamsPermissions/ListView.vue
@@ -27,6 +27,7 @@
         title="No teams have been created"
         description="Click the button below to create your first team and add permissions."
         createButtonLabel="Team"
+        @click-to-create="handleTrackEventGoToCreate"
         createPagePath="teams-permission/create"
         :documentationService="documentationService"
       >
diff --git a/src/views/Users/ListView.vue b/src/views/Users/ListView.vue
index fea9dcfeb..e3f3a719e 100644
--- a/src/views/Users/ListView.vue
+++ b/src/views/Users/ListView.vue
@@ -136,6 +136,7 @@
         description=" Click the button below to create your first user."
         createButtonLabel="User"
         createPagePath="users/create"
+        @click-to-create="handleTrackEvent"
         :documentationService="documentationService"
         data-testid="users__list-view__empty-results-block"
       >
diff --git a/src/views/Variables/ListView.vue b/src/views/Variables/ListView.vue
index 2aa897100..809b9ec42 100644
--- a/src/views/Variables/ListView.vue
+++ b/src/views/Variables/ListView.vue
@@ -24,6 +24,7 @@
         description="Click the button below to create your first variable."
         createButtonLabel="Variable"
         createPagePath="variables/create"
+        @click-to-create="handleTrackEvent"
         :documentationService="documentationService"
       >
         <template #illustration>
diff --git a/src/views/WafRules/ListView.vue b/src/views/WafRules/ListView.vue
index bac95b74a..c9e8af362 100644
--- a/src/views/WafRules/ListView.vue
+++ b/src/views/WafRules/ListView.vue
@@ -21,6 +21,7 @@
         title="No WAF rules have been created"
         description="Click the button below to create your first WAF rule."
         createButtonLabel="WAF Rule"
+        @click-to-create="handleTrackClickToEdit"
         createPagePath="waf/create"
         :documentationService="documentationService"
       >

From 4416d8b9dae823a9c813438b310816827a4a4f44 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:22:49 -0300
Subject: [PATCH 15/18] [UXE-5007] fix: incorrect ordering in real time events
 in the ts field (#1786)

---
 src/views/RealTimeEvents/Blocks/constants/tabs-events.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/views/RealTimeEvents/Blocks/constants/tabs-events.js b/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
index 98b520c83..49fcf6deb 100644
--- a/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
+++ b/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
@@ -32,6 +32,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -73,6 +74,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -129,6 +131,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -173,6 +176,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -217,6 +221,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -261,6 +266,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -312,6 +318,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],
@@ -355,6 +362,7 @@ const TABS_EVENTS = {
       },
       {
         field: 'tsFormat',
+        sortField: 'ts',
         header: 'TS'
       }
     ],

From 267f8f0d4e06e35682a8fe6b09d17093ee3aee85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariana=20Bellor=C3=ADn=20Aguilera?=
 <89138244+MarianaAguilera@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:23:17 -0300
Subject: [PATCH 16/18] [EDU-5476] refactor: Adjust DDoS card description
 (#1777)

---
 src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
index dadb717de..78cfa37b5 100644
--- a/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
+++ b/src/views/EdgeFirewall/FormFields/FormFieldsEdgeFirewall.vue
@@ -73,7 +73,8 @@
       nameField: 'ddosProtectionUnmetered',
       disabled: true,
       value: true,
-      subtitle: 'Mitigate large and complex network and transport-layer DDoS attacks.',
+      subtitle:
+        'Mitigate large and complex network, transport, presentation, and application-layer DDoS attacks.',
       tag: {
         value: 'Automatically enabled in all accounts',
         icon: 'pi pi-lock'

From 1b55a8b738be53bba1ab7cbe157cfc2dd1709db3 Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Mon, 7 Oct 2024 14:02:23 -0300
Subject: [PATCH 17/18] [UXE-5180] feat: enhance AnalyticsTrackerAdapter refine
 identify method and introduce reset method (#1787)

This pull request includes several changes to improve user tracking and state management in the application. The most important changes involve updating the tracking traits, adding a reset method to the analytics tracker, and ensuring the tracker is reset during specific navigation events.
---
 src/App.vue                                      | 16 ++++++++++------
 src/plugins/analytics/AnalyticsTrackerAdapter.js | 16 ++++++++++++++--
 src/router/hooks/guards/accountGuard.js          |  3 ++-
 src/router/hooks/guards/logoutGuard.js           |  3 ++-
 src/router/index.js                              |  7 ++++++-
 src/templates/profile-block/index.vue            |  9 ++++++++-
 .../analytics/AnalyticsTrackerAdapter.test.js    | 15 ++++++++++++++-
 7 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f258a44d7..36f103044 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,13 +19,17 @@
   const route = useRoute()
 
   const updateTrackingTraits = () => {
-    const { kind: accountType, client_id: clientId, email, name } = accountStore.account
-    const isAccountTypeWithoutClientId = accountType !== 'client'
-    if (isAccountTypeWithoutClientId) return
-
-    const defaultTraits = { client_id: clientId, email, name }
+    const {
+      user_id: userID,
+      id: accountId,
+      client_id: clientId,
+      email,
+      name
+    } = accountStore.account
+
+    const defaultTraits = { client_id: clientId, email, name, account_id: accountId }
     tracker.assignGroupTraits(defaultTraits)
-    tracker.identify(clientId)
+    tracker.identify(userID)
   }
 
   const isLogged = computed(() => {
diff --git a/src/plugins/analytics/AnalyticsTrackerAdapter.js b/src/plugins/analytics/AnalyticsTrackerAdapter.js
index 4200d0e05..2d98fefa5 100644
--- a/src/plugins/analytics/AnalyticsTrackerAdapter.js
+++ b/src/plugins/analytics/AnalyticsTrackerAdapter.js
@@ -88,9 +88,21 @@ export class AnalyticsTrackerAdapter {
    * @return {Promise<void>}
    */
   async identify(id) {
-    if (!id || !this.#hasAnalytics()) return
+    const userId = `${id}`
+    if (!userId || !this.#hasAnalytics()) return
 
-    await this.#analyticsClient.identify(id, this.#traits)
+    await this.#analyticsClient.identify(userId, this.#traits)
+  }
+
+  /**
+   * Resets the internal state of the tracker, including any queued events and traits.
+   */
+  reset() {
+    this.#events = []
+    this.#traits = {}
+    if (this.#hasAnalytics()) {
+      this.#analyticsClient.reset()
+    }
   }
 
   /**
diff --git a/src/router/hooks/guards/accountGuard.js b/src/router/hooks/guards/accountGuard.js
index 2eb11ccaa..995677c8f 100644
--- a/src/router/hooks/guards/accountGuard.js
+++ b/src/router/hooks/guards/accountGuard.js
@@ -3,7 +3,7 @@ import { loadAccountJobRoleService } from '@/services/account-settings-services'
 import { setRedirectRoute } from '@/helpers'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function accountGuard({ to, accountStore }) {
+export async function accountGuard({ to, accountStore, tracker }) {
   const isPrivateRoute = !to.meta.isPublic
   const userNotIsLoggedIn = !accountStore.hasActiveUserId
 
@@ -28,6 +28,7 @@ export async function accountGuard({ to, accountStore }) {
       accountStore.setAccountData(accountInfo)
     } catch {
       setRedirectRoute(to)
+      await tracker.reset()
       return '/login'
     }
   }
diff --git a/src/router/hooks/guards/logoutGuard.js b/src/router/hooks/guards/logoutGuard.js
index 87187f301..2520f761c 100644
--- a/src/router/hooks/guards/logoutGuard.js
+++ b/src/router/hooks/guards/logoutGuard.js
@@ -1,8 +1,9 @@
 import { logoutService } from '@/services/auth-services'
 
 /** @type {import('vue-router').NavigationGuardWithThis} */
-export async function logoutGuard({ to, accountStore }) {
+export async function logoutGuard({ to, accountStore, tracker }) {
   if (to.path === '/logout') {
+    tracker.reset()
     await logoutService()
     accountStore.setAccountData({})
     return true
diff --git a/src/router/index.js b/src/router/index.js
index 124ed183d..e90e312f9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,3 +1,4 @@
+import { inject } from 'vue'
 import { accountRoutes } from '@routes/account-routes'
 import { activityHistoryRoutes } from '@routes/activity-history-routes'
 import { azionAiRoutes } from '@routes/azion-ai-routes'
@@ -88,12 +89,16 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   const accountStore = useAccountStore()
+  /** @type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   await beforeEachRoute({
     to,
     from,
     next,
     accountStore,
-    loadContractServicePlan
+    loadContractServicePlan,
+    tracker
   })
 })
 
diff --git a/src/templates/profile-block/index.vue b/src/templates/profile-block/index.vue
index 4a4bec454..199fe35bc 100644
--- a/src/templates/profile-block/index.vue
+++ b/src/templates/profile-block/index.vue
@@ -301,9 +301,10 @@
   import Dropdown from 'primevue/dropdown'
   import PrimeMenu from 'primevue/menu'
   import Sidebar from 'primevue/sidebar'
+  import { useLoadingStore } from '@/stores/loading'
 
   defineOptions({ name: 'profile-block' })
-
+  const { startLoading } = useLoadingStore()
   const user = useAccountStore().accountData
   const { currentTheme } = storeToRefs(useAccountStore())
   const setTheme = useAccountStore().setTheme
@@ -347,6 +348,9 @@
     { name: 'Dark', value: 'dark', icon: 'pi pi-moon' },
     { name: 'System', value: 'system', icon: 'pi pi-desktop' }
   ]
+
+  /** @type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
   const currentWidth = inject('currentWidth')
   const openSwitchAccount = inject('openSwitchAccount')
   const SCREEN_BREAKPOINT_MD = 768
@@ -372,6 +376,9 @@
   }
 
   const logout = () => {
+    startLoading()
+    tracker.reset()
+    closeDesktopMenu()
     window.location.href = '/logout'
   }
 
diff --git a/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js b/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
index ada21958e..212db1501 100644
--- a/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
+++ b/src/tests/plugins/analytics/AnalyticsTrackerAdapter.test.js
@@ -8,7 +8,8 @@ const fixtures = {
 const makeSut = () => {
   const analyticsClientSpy = {
     track: vi.fn(),
-    identify: vi.fn()
+    identify: vi.fn(),
+    reset: vi.fn()
   }
   const sut = new AnalyticsTrackerAdapter(analyticsClientSpy)
 
@@ -45,6 +46,18 @@ describe('AnalyticsTrackerAdapter', () => {
     expect(analyticsClientSpy.track).toHaveBeenCalledTimes(3)
   })
 
+  it('should reset the analytics client and clear stored events', () => {
+    const { sut, analyticsClientSpy } = makeSut()
+    sut.identify('test-user-id')
+    sut.product.pageLoad({ url: 'test-url-1' })
+    sut.product.pageLoad({ url: 'test-url-2' })
+    sut.reset()
+    sut.track()
+
+    expect(analyticsClientSpy.reset).toHaveBeenCalled()
+    expect(sut.track).toHaveLength(0)
+  })
+
   it('should be able to track page load event with correct params', () => {
     const { sut, analyticsClientSpy } = makeSut()
     const mockUrl = 'test-url-ABC/q-2/t'

From 27de4e55d99dd71a9504cee6932d2fe97c90321a Mon Sep 17 00:00:00 2001
From: Rafael <80526390+rafael-qazion@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:55:54 -0300
Subject: [PATCH 18/18] [QA-2249] feat: updated e2e tests to run against prod
 env (#1782)

Updated e2e tests to run against prod env
---
 .github/workflows/cleanup_e2e_tests.yml       |  27 +++
 .github/workflows/pre-merge.yml               |  12 +-
 .github/workflows/prod-e2e-tests.yml          |  42 ----
 cypress.config.prod.js                        |   1 -
 cypress.env.example.json                      |   6 +-
 cypress/README.md                             |   9 +-
 .../create-domain-edge-application.cy.js      |   2 +-
 .../e2e/edge-dns/create-edge-dns-zone.cy.js   |   2 +-
 .../e2e/edge-dns/create-record-type-a.cy.js   |   2 +-
 .../edge-dns/create-record-type-aaaa.cy.js    |   2 +-
 .../edge-dns/create-record-type-aname.cy.js   |   2 +-
 .../e2e/edge-dns/create-record-type-caa.cy.js |   2 +-
 .../edge-dns/create-record-type-cname.cy.js   |   2 +-
 .../e2e/edge-dns/create-record-type-ds.cy.js  |   2 +-
 .../e2e/edge-dns/create-record-type-mx.cy.js  |   2 +-
 .../e2e/edge-dns/create-record-type-ns.cy.js  |   2 +-
 .../e2e/edge-dns/create-record-type-ptr.cy.js |   2 +-
 .../e2e/edge-dns/create-record-type-srv.cy.js |   2 +-
 .../e2e/edge-dns/create-record-type-txt.cy.js |   2 +-
 .../create-edge-firewall-function.cy.js       |   2 +-
 .../create-edge-firewall-network-list.cy.js   |   2 +-
 .../create-network-list-asn.cy.js             |   2 +-
 .../create-network-list-countries.cy.js       |   2 +-
 cypress/e2e/variables/create-secret.cy.js     |   2 +-
 ...llowed-rule-conditional-query-string.cy.js |   2 +-
 ...llowed-rule-conditional-request-body.cy.js |   2 +-
 ...owed-rule-conditional-request-header.cy.js |   2 +-
 .../waf/create-allowed-rule-file-name.cy.js   |   2 +-
 .../waf/create-allowed-rule-path-zone.cy.js   |   2 +-
 .../waf/create-allowed-rule-raw-body.cy.js    |   2 +-
 cypress/e2e/waf/create-waf-rule.cy.js         |   2 +-
 cypress/e2e/waf/edit-waf-rule.cy.js           |   2 +-
 package.json                                  |   4 +-
 scripts/cleanup.js                            | 189 ++++++++++++++++++
 34 files changed, 261 insertions(+), 81 deletions(-)
 create mode 100644 .github/workflows/cleanup_e2e_tests.yml
 delete mode 100644 .github/workflows/prod-e2e-tests.yml
 create mode 100644 scripts/cleanup.js

diff --git a/.github/workflows/cleanup_e2e_tests.yml b/.github/workflows/cleanup_e2e_tests.yml
new file mode 100644
index 000000000..0c7b65fff
--- /dev/null
+++ b/.github/workflows/cleanup_e2e_tests.yml
@@ -0,0 +1,27 @@
+name: Run cleanup e2e tests
+
+on:
+  schedule:
+    - cron: '0 8 * * *'
+  workflow_dispatch:
+
+jobs:
+  cleanup:
+    name: Cleanup e2e tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Cleanup Prod
+        env:
+            PROD_CYPRESS_TOKEN: ${{ secrets.PROD_CYPRESS_TOKEN }}
+        run: node scripts/cleanup.js PROD
\ No newline at end of file
diff --git a/.github/workflows/pre-merge.yml b/.github/workflows/pre-merge.yml
index 4d74c491b..2b8672362 100644
--- a/.github/workflows/pre-merge.yml
+++ b/.github/workflows/pre-merge.yml
@@ -43,7 +43,7 @@ jobs:
             coverage/unit/sonar-report.xml
           retention-days: 1
 
-  run-dev-e2e-tests:
+  run-prod-e2e-tests:
     name: Run Dev E2E Tests
     runs-on: ubuntu-latest
     strategy:
@@ -61,15 +61,17 @@ jobs:
       - name: Run Cypress Tests
         uses: cypress-io/github-action@v6
         env:
-          DEV_CYPRESS_EMAIL: ${{ secrets.DEV_CYPRESS_EMAIL }}
-          DEV_CYPRESS_PASSWORD: ${{ secrets.DEV_CYPRESS_PASSWORD }}
+          PROD_CYPRESS_EMAIL: ${{ secrets.PROD_CYPRESS_EMAIL }}
+          PROD_CYPRESS_PASSWORD: ${{ secrets.PROD_CYPRESS_PASSWORD }}
+          VITE_ENVIRONMENT: "production"
         with:
           build: yarn build
           start: yarn dev --logLevel=warn
           browser: chrome
           wait-on: 'http://localhost:5173/'
           wait-on-timeout: 120
-          env: grepTags=@dev${{ matrix.group }}+-@xfail
+          config-file: cypress.config.prod.js
+          env: environment=prod,grepTags=@dev${{ matrix.group }}+-@xfail+-@dont_run_prod
 
       - name: Generate Specs JSON
         run: yarn generate-specs-json
@@ -106,7 +108,7 @@ jobs:
 
   download_and_merge:
     name: Download and Merge Coverage Reports
-    needs: run-dev-e2e-tests
+    needs: run-prod-e2e-tests
     runs-on: ubuntu-latest
 
     steps:
diff --git a/.github/workflows/prod-e2e-tests.yml b/.github/workflows/prod-e2e-tests.yml
deleted file mode 100644
index 6f726d010..000000000
--- a/.github/workflows/prod-e2e-tests.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-name: Prod E2E Tests
-
-on:
-  workflow_dispatch:
-
-jobs:
-  run-prod-e2e-tests:
-    name: Run Prod E2E Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup Node.js Environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Run Cypress E2E Tests
-        uses: cypress-io/github-action@v6
-        env:
-          PROD_CYPRESS_EMAIL: ${{ secrets.PROD_CYPRESS_EMAIL }}
-          PROD_CYPRESS_PASSWORD: ${{ secrets.PROD_CYPRESS_PASSWORD }}
-        with:
-          browser: chrome
-          config-file: cypress.config.prod.js
-          env: environment=prod,grepTags=-@xfail
-
-      - name: Upload Cypress Screenshots Artifact
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress_screenshots
-          path: cypress/screenshots
-          retention-days: 4
-
-      - name: Upload Cypress Videos Artifact
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress_videos
-          path: cypress/videos
-          retention-days: 1
diff --git a/cypress.config.prod.js b/cypress.config.prod.js
index fdfb35ef8..d95f5265a 100644
--- a/cypress.config.prod.js
+++ b/cypress.config.prod.js
@@ -4,7 +4,6 @@ import baseConfig from './cypress.config';
 
 const envOverride = {
   // TODO: remove this WORKAROUND for https://github.com/cypress-io/cypress/issues/20647,
-  baseUrl: 'http://console.azion.com',
   CYPRESS_EMAIL: process.env.PROD_CYPRESS_EMAIL,
   CYPRESS_PASSWORD: process.env.PROD_CYPRESS_PASSWORD,
 };
diff --git a/cypress.env.example.json b/cypress.env.example.json
index 07bfd6c91..048687b97 100644
--- a/cypress.env.example.json
+++ b/cypress.env.example.json
@@ -1,10 +1,14 @@
 {
   "DEV_CYPRESS_EMAIL": "",
   "DEV_CYPRESS_PASSWORD": "",
+  "DEV_CYPRESS_TOKEN": "",
   "STAGE_CYPRESS_EMAIL": "",
   "STAGE_CYPRESS_PASSWORD": "",
+  "STAGE_CYPRESS_TOKEN": "",
   "PREVIEW_PROD_CYPRESS_EMAIL": "",
   "PREVIEW_PROD_CYPRESS_PASSWORD": "",
+  "PREVIEW_PROD_CYPRESS_TOKEN": "",
   "PROD_CYPRESS_EMAIL": "",
-  "PROD_CYPRESS_PASSWORD": ""
+  "PROD_CYPRESS_PASSWORD": "",
+  "PROD_CYPRESS_TOKEN": ""
 }
\ No newline at end of file
diff --git a/cypress/README.md b/cypress/README.md
index ead61a642..c5cb6adbd 100644
--- a/cypress/README.md
+++ b/cypress/README.md
@@ -116,10 +116,11 @@ For more details, see the official [@cypress/grep documentation](https://github.
 
 ### Tags Used in the Project
 
-| Tag   | Description                                         |
-|-------|-----------------------------------------------------|
-| @dev  | Runs the test in the DEV environment                |
-| @xfail| Prevents the test from running in workflows         |
+| Tag             | Description                                         |
+|-----------------|-----------------------------------------------------|
+| @dev            | Runs the test in the DEV environment                |
+| @xfail          | Prevents the test from running in workflows         |
+| @dont_run_prod  | Prevents the test from running in prod workflow     |
 
 ## Naming `data-testid`
 
diff --git a/cypress/e2e/domains/create-domain-edge-application.cy.js b/cypress/e2e/domains/create-domain-edge-application.cy.js
index c5e1030fd..87acce9c7 100644
--- a/cypress/e2e/domains/create-domain-edge-application.cy.js
+++ b/cypress/e2e/domains/create-domain-edge-application.cy.js
@@ -20,7 +20,7 @@ const createEdgeApplicationCase = () => {
   cy.get(selectors.domains.pageTitle(edgeAppName)).should('have.text', edgeAppName)
 }
 
-describe('Domains spec', { tags: ['@dev3'] }, () => {
+describe('Domains spec', { tags: ['@dev3', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
   })
diff --git a/cypress/e2e/edge-dns/create-edge-dns-zone.cy.js b/cypress/e2e/edge-dns/create-edge-dns-zone.cy.js
index 1eba90a45..e29536ff8 100644
--- a/cypress/e2e/edge-dns/create-edge-dns-zone.cy.js
+++ b/cypress/e2e/edge-dns/create-edge-dns-zone.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev4'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev4', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-a.cy.js b/cypress/e2e/edge-dns/create-record-type-a.cy.js
index 8448eb04e..b16fa897d 100644
--- a/cypress/e2e/edge-dns/create-record-type-a.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-a.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev4'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev4', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-aaaa.cy.js b/cypress/e2e/edge-dns/create-record-type-aaaa.cy.js
index 38d3d9fb7..1dc932aa5 100644
--- a/cypress/e2e/edge-dns/create-record-type-aaaa.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-aaaa.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev4'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev4', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-aname.cy.js b/cypress/e2e/edge-dns/create-record-type-aname.cy.js
index d822fe8c8..de5e165cf 100644
--- a/cypress/e2e/edge-dns/create-record-type-aname.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-aname.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev4'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev4', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-caa.cy.js b/cypress/e2e/edge-dns/create-record-type-caa.cy.js
index ffdd702d7..0e74ff8b1 100644
--- a/cypress/e2e/edge-dns/create-record-type-caa.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-caa.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-cname.cy.js b/cypress/e2e/edge-dns/create-record-type-cname.cy.js
index b21497c96..bfcf1182c 100644
--- a/cypress/e2e/edge-dns/create-record-type-cname.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-cname.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-ds.cy.js b/cypress/e2e/edge-dns/create-record-type-ds.cy.js
index c24b03962..479535ea2 100644
--- a/cypress/e2e/edge-dns/create-record-type-ds.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-ds.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-mx.cy.js b/cypress/e2e/edge-dns/create-record-type-mx.cy.js
index 117a1e56b..02a9c9df9 100644
--- a/cypress/e2e/edge-dns/create-record-type-mx.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-mx.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-ns.cy.js b/cypress/e2e/edge-dns/create-record-type-ns.cy.js
index b55a4eca5..61d2e2308 100644
--- a/cypress/e2e/edge-dns/create-record-type-ns.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-ns.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-ptr.cy.js b/cypress/e2e/edge-dns/create-record-type-ptr.cy.js
index 5a381a9ac..d4a041599 100644
--- a/cypress/e2e/edge-dns/create-record-type-ptr.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-ptr.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-srv.cy.js b/cypress/e2e/edge-dns/create-record-type-srv.cy.js
index 7d8d8f317..fac431517 100644
--- a/cypress/e2e/edge-dns/create-record-type-srv.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-srv.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-dns/create-record-type-txt.cy.js b/cypress/e2e/edge-dns/create-record-type-txt.cy.js
index a839522ac..0073b541b 100644
--- a/cypress/e2e/edge-dns/create-record-type-txt.cy.js
+++ b/cypress/e2e/edge-dns/create-record-type-txt.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let zoneName = ''
 
-describe('Edge DNS spec', { tags: ['@dev5'] }, () => {
+describe('Edge DNS spec', { tags: ['@dev5', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     zoneName = generateUniqueName('DNSZone')
diff --git a/cypress/e2e/edge-firewall/create-edge-firewall-function.cy.js b/cypress/e2e/edge-firewall/create-edge-firewall-function.cy.js
index 40390e777..5371d5204 100644
--- a/cypress/e2e/edge-firewall/create-edge-firewall-function.cy.js
+++ b/cypress/e2e/edge-firewall/create-edge-firewall-function.cy.js
@@ -4,7 +4,7 @@ import selectors from '../../support/selectors'
 
 let firewallName, functionInstanceName, ruleName
 
-describe('Edge Firewall spec', { tags: ['@dev5'] }, () => {
+describe('Edge Firewall spec', { tags: ['@dev5', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     firewallName = generateUniqueName('EdgeFirewall')
diff --git a/cypress/e2e/edge-firewall/create-edge-firewall-network-list.cy.js b/cypress/e2e/edge-firewall/create-edge-firewall-network-list.cy.js
index 6dbcb65d8..9f51827e4 100644
--- a/cypress/e2e/edge-firewall/create-edge-firewall-network-list.cy.js
+++ b/cypress/e2e/edge-firewall/create-edge-firewall-network-list.cy.js
@@ -23,7 +23,7 @@ const createASNNetworkListCase = () => {
   cy.verifyToast('success', 'Your network list has been created')
 }
 
-describe('Edge Firewall spec', { tags: ['@dev5'] }, () => {
+describe('Edge Firewall spec', { tags: ['@dev5', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     firewallName = generateUniqueName('EdgeFirewall')
diff --git a/cypress/e2e/network-lists/create-network-list-asn.cy.js b/cypress/e2e/network-lists/create-network-list-asn.cy.js
index 2c156d4ea..f04c018be 100644
--- a/cypress/e2e/network-lists/create-network-list-asn.cy.js
+++ b/cypress/e2e/network-lists/create-network-list-asn.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let networkListName
 
-describe('Network Lists spec', { tags: ['@dev6'] }, () => {
+describe('Network Lists spec', { tags: ['@dev6', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('Network Lists')
diff --git a/cypress/e2e/network-lists/create-network-list-countries.cy.js b/cypress/e2e/network-lists/create-network-list-countries.cy.js
index 9ecb0c51a..0c826cc9a 100644
--- a/cypress/e2e/network-lists/create-network-list-countries.cy.js
+++ b/cypress/e2e/network-lists/create-network-list-countries.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let networkListName
 
-describe('Network Lists spec', { tags: ['@dev6'] }, () => {
+describe('Network Lists spec', { tags: ['@dev6', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('Network Lists')
diff --git a/cypress/e2e/variables/create-secret.cy.js b/cypress/e2e/variables/create-secret.cy.js
index 5c2022a5c..e907bcba9 100644
--- a/cypress/e2e/variables/create-secret.cy.js
+++ b/cypress/e2e/variables/create-secret.cy.js
@@ -4,7 +4,7 @@ import selectors from '../../support/selectors'
 let variableKey
 let variableValue
 
-describe('Variables spec', { tags: ['@dev2'] }, () => {
+describe('Variables spec', { tags: ['@dev2', '@xfail'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('Variables')
diff --git a/cypress/e2e/waf/create-allowed-rule-conditional-query-string.cy.js b/cypress/e2e/waf/create-allowed-rule-conditional-query-string.cy.js
index 4e4aed8b3..fe6df29bb 100644
--- a/cypress/e2e/waf/create-allowed-rule-conditional-query-string.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-conditional-query-string.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-allowed-rule-conditional-request-body.cy.js b/cypress/e2e/waf/create-allowed-rule-conditional-request-body.cy.js
index 88db9c61c..9ecf7d8b0 100644
--- a/cypress/e2e/waf/create-allowed-rule-conditional-request-body.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-conditional-request-body.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-allowed-rule-conditional-request-header.cy.js b/cypress/e2e/waf/create-allowed-rule-conditional-request-header.cy.js
index 540f24dd8..61c83043c 100644
--- a/cypress/e2e/waf/create-allowed-rule-conditional-request-header.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-conditional-request-header.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-allowed-rule-file-name.cy.js b/cypress/e2e/waf/create-allowed-rule-file-name.cy.js
index 514442f88..650e3d4f3 100644
--- a/cypress/e2e/waf/create-allowed-rule-file-name.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-file-name.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-allowed-rule-path-zone.cy.js b/cypress/e2e/waf/create-allowed-rule-path-zone.cy.js
index 42518c231..9c25bc16a 100644
--- a/cypress/e2e/waf/create-allowed-rule-path-zone.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-path-zone.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-allowed-rule-raw-body.cy.js b/cypress/e2e/waf/create-allowed-rule-raw-body.cy.js
index df5a94fa3..4873bac03 100644
--- a/cypress/e2e/waf/create-allowed-rule-raw-body.cy.js
+++ b/cypress/e2e/waf/create-allowed-rule-raw-body.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/create-waf-rule.cy.js b/cypress/e2e/waf/create-waf-rule.cy.js
index f67064861..f391a9a5b 100644
--- a/cypress/e2e/waf/create-waf-rule.cy.js
+++ b/cypress/e2e/waf/create-waf-rule.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/cypress/e2e/waf/edit-waf-rule.cy.js b/cypress/e2e/waf/edit-waf-rule.cy.js
index dc410dfd9..4027687e1 100644
--- a/cypress/e2e/waf/edit-waf-rule.cy.js
+++ b/cypress/e2e/waf/edit-waf-rule.cy.js
@@ -3,7 +3,7 @@ import selectors from '../../support/selectors'
 
 let wafName
 
-describe('WAF spec', { tags: ['@dev7'] }, () => {
+describe('WAF spec', { tags: ['@dev7', '@dont_run_prod'] }, () => {
   beforeEach(() => {
     cy.login()
     cy.openProduct('WAF Rules')
diff --git a/package.json b/package.json
index 4431ce5ef..cabf9bfae 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,12 @@
     "test:e2e:run:dev": "start-server-and-test 'vite dev --port 5173' http://localhost:5173 'cypress run --e2e'",
     "test:e2e:run:preview-dev": "start-server-and-test preview http://localhost:5173 'cypress run --e2e'",
     "test:e2e:run:stage": "cypress run --e2e --config-file cypress.config.stage.js --env environment=stage",
-    "test:e2e:run:prod": "cypress run --e2e --config-file cypress.config.prod.js --env environment=prod",
+    "test:e2e:run:prod": "cypress run --e2e --config-file cypress.config.prod.js --env environment=prod,grepTags=-@dont_run_prod",
     "test:e2e:run:preview-prod": "cypress run --e2e --config-file cypress.config.preview-prod.js --env environment=preview-prod",
     "test:e2e:open:dev": "start-server-and-test 'vite dev --port 5173' http://localhost:5173 'cypress open --e2e'",
     "test:e2e:open:preview-dev": "start-server-and-test preview http://localhost:5173 'cypress open --e2e'",
     "test:e2e:open:stage": "cypress open --e2e --config-file cypress.config.stage.js --env environment=stage",
-    "test:e2e:open:prod": "cypress open --e2e --config-file cypress.config.prod.js --env environment=prod",
+    "test:e2e:open:prod": "cypress open --e2e --config-file cypress.config.prod.js --env environment=prod,grepTags=-@dont_run_prod",
     "test:e2e:open:preview-prod": "cypress open --e2e --config-file cypress.config.preview-prod.js --env environment=preview-prod",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "security-check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore --ignore-pattern 'cypress/**' --ignore-pattern 'cypress.config.*' --ignore-pattern '**/*.test.js' -c .eslintrc-security.cjs",
diff --git a/scripts/cleanup.js b/scripts/cleanup.js
new file mode 100644
index 000000000..2fbd6dbb3
--- /dev/null
+++ b/scripts/cleanup.js
@@ -0,0 +1,189 @@
+import axios from 'axios';
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
+import console from 'console';
+import { setTimeout } from 'timers/promises';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const readCypressEnv = () => {
+  const cypressEnvPath = path.resolve(__dirname, '../cypress.env.json');
+  if (fs.existsSync(cypressEnvPath)) {
+    const rawdata = fs.readFileSync(cypressEnvPath);
+    return JSON.parse(rawdata);
+  } else {
+    console.error('⚠️ cypress.env.json file not found.');
+    process.exit(1);
+  }
+};
+
+const cypressEnv = process.env.CI ? {} : readCypressEnv();
+
+
+const ENV = process.argv[2] ? process.argv[2].toUpperCase() : 'STAGE';
+const API_v3 =
+  ENV === 'PROD' ? 'https://api.azionapi.net' : 'https://stage-api.azion.net';
+const API_v4 =
+  ENV === 'PROD'
+    ? 'https://api.azion.com/v4'
+    : 'https://stage-api.azion.com/v4';
+const URL = `${API_v3}`;
+const URL_v4 = `${API_v4}`;
+
+const CYPRESS_TOKEN = process.env.CI
+  ? process.env[`${ENV}_CYPRESS_TOKEN`]
+  : cypressEnv[`${ENV}_CYPRESS_TOKEN`];
+
+const credentials = {
+  cypress: { token: CYPRESS_TOKEN, wait_time: 10 }
+};
+
+const entities = [
+  { name: 'credentials', url: `${URL}/credentials`, version: 3 },
+  {
+    name: 'data_streaming',
+    url: `${URL}/data_streaming/streamings`,
+    version: 3
+  },
+  {
+    name: 'edge_applications',
+    url: `${URL}/edge_applications`,
+    version: 3,
+    exclude: [1718380244, 340244]
+  },
+  { name: 'edge_firewall', url: `${URL}/edge_firewall`, version: 3 },
+  { name: 'edge_sql', url: `${URL_v4}/edge_sql/databases`, version: 4 },
+  { name: 'waf_rulesets', url: `${URL}/waf/rulesets`, version: 3 },
+  {
+    name: 'digital_certificates',
+    url: `${URL}/digital_certificates/`,
+    version: 3
+  },
+  {
+    name: 'network_lists',
+    url: `${URL}/network_lists`,
+    version: 3,
+    exclude: [66, 2]
+  }
+];
+
+const deleteResources = async (
+  url,
+  headers,
+  wait_time,
+  getCount,
+  getResults,
+  getSingleUrl,
+  excludeIds = []
+) => {
+  let hasResource = true;
+
+  while (hasResource) {
+    const response = await axios.get(url, { headers });
+    const count = getCount(response.data);
+    const results = getResults(response.data);
+
+    console.log(`\n🗑️ Total of ${count} resources to be deleted.`);
+
+    if (count === 0) {
+      console.log('✅ No more resources to delete.');
+      break;
+    }
+
+    hasResource = results.length > 0;
+
+    if (!hasResource) {
+      console.log('✅ No more resources to delete.');
+      break;
+    }
+
+    let deletedCount = 0;
+
+    for (const resource of results) {
+      if (!excludeIds.includes(resource.id)) {
+        try {
+          const singleResourceUrl = getSingleUrl(resource);
+          const deleteResponse = await axios.delete(singleResourceUrl, {
+            headers
+          });
+          console.log(
+            `🗑️ Deleted resource: ${singleResourceUrl} - Status code: ${deleteResponse.status}`
+          );
+          deletedCount++;
+        } catch (error) {
+          console.error(
+            `❌ Error deleting resource with ID ${resource.id}: ${error.message}`
+          );
+        }
+      } else {
+        console.log(`🚫 Skipping deletion for resource with ID ${resource.id}`);
+      }
+    }
+
+    if (deletedCount === 0) {
+      console.log('✅ No resources deleted in this iteration.');
+      break;
+    }
+
+    console.log(`⏳ Waiting for ${wait_time} seconds before continuing...`);
+    await setTimeout(wait_time * 1000);
+  }
+};
+
+const getCountFunctions = {
+  credentials: data => (data.credentials ? data.credentials.length : 0),
+  data_streaming: data => (data.results ? data.results.length : 0),
+  edge_applications: data => (data.count ? data.count : 0),
+  edge_firewall: data => (data.count ? data.count : 0),
+  edge_sql: data => (data.count ? data.count : 0),
+  waf_rulesets: data => (data.count ? data.count : 0),
+  digital_certificates: data => (data.count ? data.count : 0),
+  network_lists: data => (data.count ? data.count : 0)
+};
+
+const getResultsFunctions = {
+  credentials: data => data.credentials || [],
+  data_streaming: data => data.results || [],
+  edge_applications: data => data.results || [],
+  edge_firewall: data => data.results || [],
+  edge_sql: data => data.results || [],
+  waf_rulesets: data => data.results || [],
+  digital_certificates: data => data.results || [],
+  network_lists: data => data.results || []
+};
+
+(async () => {
+  for (const userType in credentials) {
+    const { token, wait_time } = credentials[userType];
+    const headers = {
+      Accept: 'application/json; version=3',
+      'Content-Type': 'application/json',
+      Authorization: `token ${token}`
+    };
+
+    for (const entity of entities) {
+      console.log(`\n🔄 Processing ${entity.name}...`);
+      const getCount = getCountFunctions[entity.name.split('/')[0]];
+      const getResults = getResultsFunctions[entity.name.split('/')[0]];
+
+      if (!getCount || !getResults) {
+        console.error(`⚠️ No functions found for entity: ${entity.name}`);
+        continue;
+      }
+
+      await deleteResources(
+        entity.url,
+        headers,
+        wait_time,
+        getCount,
+        getResults,
+        resource => `${entity.url}/${resource.id}`,
+        entity.exclude || []
+      );
+    }
+  }
+})();