Feat/my services revamp

packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/cluster/dashboard/dashboard.html

@@ -16,7 +16,9 @@
                 data-on-error="$ctrl.onBillingInformationError(error)"
                 data-service-infos="$ctrl.serviceInfos"
                 data-user="$ctrl.user"
-                data-tracking-prefix="{{$ctrl.trackingPrefix}}"
+                data-tracking-page="DedicatedServers::dedicated-server::cluster::cluster::dashboard::general-information"
+                data-tracking-name-suffix="cluster"
+                tracking-prefix="DedicatedServers::dedicated-server::cluster"
             >
             </billing-subscription-tile>
         </div>

packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/node/dashboard/dashboard.routing.js

@@ -282,6 +282,11 @@ export default /* @ngInject */ ($stateProvider) => {
           productId: serverName,
         }),
       trackingPrefix: () => 'dedicated::node::dashboard',
+      trackingSubscriptionPrefix: () =>
+        'DedicatedServers::dedicated-server::server',
+      trackingPage: () =>
+        'DedicatedServers::dedicated-server::server::server::dashboard::general-information',
+      trackingNameSuffix: () => 'server',
       trafficInformation: /* @ngInject */ (
         $q,
         $stateParams,

packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/server/dashboard/dashboard.routing.js

@@ -258,6 +258,11 @@ export default /* @ngInject */ ($stateProvider) => {
           productId: serverName,
         }),
       trackingPrefix: () => 'dedicated::server::dashboard',
+      trackingSubscriptionPrefix: () =>
+        'DedicatedServers::dedicated-server::node',
+      trackingPage: () =>
+        'DedicatedServers::dedicated-server::node::node::dashboard::general-information',
+      trackingNameSuffix: () => 'node',
       trafficInformation: /* @ngInject */ (
         $q,
         $stateParams,

packages/manager/modules/billing-components/src/components/payment-method/payment-method.component.js

@@ -2,7 +2,10 @@ import controller from './payment-method.controller';
 import template from './payment-method.html';
 
 export default {
-  bindings: {},
+  bindings: {
+    trackingPage: '<',
+    trackingCategory: '<',
+  },
   controller,
   name: 'ovhManagerAutoRenewPaymentMethod',
   template,

packages/manager/modules/billing-components/src/components/payment-method/payment-method.controller.js

@@ -1,9 +1,10 @@
 export default class PaymentMethodController {
   /* @ngInject */
-  constructor($http, coreURLBuilder, $filter) {
+  constructor($http, coreURLBuilder, $filter, atInternet) {
     this.$http = $http;
     this.coreURLBuilder = coreURLBuilder;
     this.$filter = $filter;
+    this.atInternet = atInternet;
   }
 
   $onInit() {
@@ -31,8 +32,21 @@ export default class PaymentMethodController {
       });
 
     this.updatePaymentMethodLink = this.coreURLBuilder.buildURL(
-      'new-billing',
-      '/payment/method',
+      'dedicated',
+      '#/billing/payment/method',
     );
   }
+
+  trackPaymentClick() {
+    this.atInternet.trackClick({
+      name: `hub::billing::services::listing::tile::link::${
+        this.paymentMehtod ? 'edit' : 'activate'
+      }_services::autorenew`,
+      type: 'action',
+      page_category: this.trackingCategory,
+      page: {
+        name: this.trackingPage,
+      },
+    });
+  }
 }

packages/manager/modules/billing-components/src/components/payment-method/payment-method.html

@@ -38,7 +38,11 @@ <h6 class="oui-box__heading p-0 m-0">
     <div class="d-flex align-items-center" ng-if="!$ctrl.paymentMehtod">
         <p>{{ 'payment_expiration_no_default_method_message' | translate}}</p>
     </div>
-    <a class="oui-link_icon" data-ng-href="{{$ctrl.updatePaymentMethodLink}}">
+    <a
+        class="oui-link_icon"
+        data-ng-href="{{$ctrl.updatePaymentMethodLink}}"
+        data-ng-click="$ctrl.trackPaymentClick()"
+    >
         {{ !$ctrl.paymentMehtod ? 'payment_method_add_link_label':
         'payment_method_update_link_label' | translate}}
         <span class="oui-icon oui-icon-arrow-right" aria-hidden="true"></span>

packages/manager/modules/billing-components/src/components/services-actions/services-actions.component.js

@@ -6,6 +6,7 @@ export default {
     billingManagementAvailability: '<',
     service: '<',
     trackingPrefix: '@?',
+    trackingPage: '@?',
     getCommitmentLink: '&?',
     getCancelCommitmentLink: '&?',
     getCancelResiliationLink: '&?',

packages/manager/modules/billing-components/src/components/services-actions/services-actions.controller.js

@@ -26,6 +26,7 @@ export default class ServicesActionsCtrl {
   }
 
   $onInit() {
+
     this.user = this.coreConfig.getUser();
     this.BillingLinksService.generateAutorenewLinks(this.service, {
       billingManagementAvailability: this.billingManagementAvailability,
@@ -76,7 +77,17 @@ export default class ServicesActionsCtrl {
   }
 
   trackAction(action, hasActionInEvent = true) {
-    if (this.trackingPrefix) {
+    if (this.trackingPrefix && this.trackingPage) {
+      const name = `${this.trackingPrefix}::button::${action}::service`;
+      this.atInternet.trackClick({
+        name,
+        type: 'action',
+        page_category: 'listing',
+        page: {
+          name: this.trackingPage,
+        },
+      });
+    } else if (this.trackingPrefix) {
       const name = hasActionInEvent
         ? `${this.trackingPrefix}::action::${action}`
         : `${this.trackingPrefix}::${action}`;

packages/manager/modules/billing-components/src/components/subscription-tile/subscription-tile.component.js

@@ -13,6 +13,8 @@ export default {
     goToCancelResiliation: '&',
     goToResiliation: '&',
     trackingPrefix: '@',
+    trackingPage: '@',
+    trackingNameSuffix: '@',
     commitImpressionData: '<?',
     withContactManagement: '<?',
     disableServiceActions: '<?',

packages/manager/modules/billing-components/src/components/subscription-tile/subscription-tile.controller.js

@@ -189,12 +189,19 @@ export default class ServicesActionsCtrl {
   }
 
   trackAction(action, hasActionInEvent = true) {
-    if (this.trackingPrefix) {
+    if (this.trackingPrefix && this.trackingPage && this.trackingNameSuffix) {
       const name = hasActionInEvent
-        ? `${this.trackingPrefix}::action::${action}`
-        : `${this.trackingPrefix}::${action}`;
+        ? `${this.trackingPrefix}::tile::link::${action}_${this.trackingNameSuffix}`
+        : `${this.trackingPrefix}::${action}_${this.trackingNameSuffix}`;
 
-      this.atInternet.trackClick({ name, type: 'action' });
+      this.atInternet.trackClick({
+        name,
+        type: 'action',
+        page_category: 'dashboard',
+        page: {
+          name: this.trackingPage,
+        },
+      });
     }
   }
 

packages/manager/modules/billing-components/src/components/subscription-tile/subscription-tile.html

@@ -19,8 +19,8 @@
             <oui-skeleton size="s" data-ng-if="$ctrl.isLoading"></oui-skeleton>
             <p data-ng-if="!$ctrl.isLoading">
                 <span
-                    class="text-wrap"
-                    data-ng-if="!$ctrl.service.isEngaged() && !$ctrl.serviceInfos.hasPendingEngagement"
+                    class="text-wrap d-block"
+                    data-ng-if="!$ctrl.serviceInfos.hasEngagement() && !$ctrl.serviceInfos.hasPendingEngagement"
                     data-translate="manager_billing_subscription_engagement_status_none"
                 >
                 </span>
@@ -50,7 +50,7 @@
                     data-ng-if="$ctrl.constructor.showCommit($ctrl.serviceInfos, $ctrl.service.isEngaged(), $ctrl.highlightEngagement)"
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.commitmentLink }}"
-                    data-ng-click="$ctrl.trackClick('go-to-commit')"
+                    data-ng-click="$ctrl.trackAction('renew-discount', true)"
                     target="_top"
                 >
                     <p>
@@ -110,12 +110,14 @@
 
     <oui-tile-definition
         term="{{:: 'manager_billing_subscription_autorenew_title' | translate }}"
+        data-ng-if="$ctrl.autorenewLink && !$ctrl.serviceInfos.hasParticularRenew() && !$ctrl.serviceInfos.hasPendingResiliation() && !$ctrl.serviceInfos.hasDebt() && !$ctrl.serviceInfos.isOneShot() && !$ctrl.serviceInfos.hasForcedRenew() && !$ctrl.serviceInfos.isResiliated() && $ctrl.serviceInfos.canHandleRenew() && !$ctrl.serviceInfos.hasEngagement()"
     >
         <oui-tile-description>
             <oui-skeleton size="s" data-ng-if="$ctrl.isLoading"></oui-skeleton>
 
             <p data-ng-if="!$ctrl.isLoading">
                 <span
+                    data-ng-if="false"
                     data-translate="{{ :: $ctrl.serviceInfos.hasAutomaticRenew() ?
                         'manager_billing_subscription_autorenew_every_'+ $ctrl.serviceInfos.renew.period +'_month' :
                         'manager_billing_subscription_autorenew_none' }}"
@@ -125,7 +127,7 @@
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.updateLink }}"
                     data-ng-if="$ctrl.autorenewLink && !$ctrl.serviceInfos.hasParticularRenew() && !$ctrl.serviceInfos.hasPendingResiliation() && !$ctrl.serviceInfos.hasDebt() && !$ctrl.serviceInfos.isOneShot() && !$ctrl.serviceInfos.hasForcedRenew() && !$ctrl.serviceInfos.isResiliated() && $ctrl.serviceInfos.canHandleRenew() && !$ctrl.serviceInfos.hasEngagement()"
-                    data-ng-click="$ctrl.trackAction('go-to-configure-renew')"
+                    data-ng-click="$ctrl.trackAction($ctrl.serviceInfos.hasAutomaticRenew() ?'edit-frequency': 'renew', !$ctrl.serviceInfos.hasAutomaticRenew())"
                     target="_top"
                 >
                     <p>
@@ -158,7 +160,7 @@
                     class="oui-link_icon"
                     data-ng-href="{{ $ctrl.autorenewLink && !$ctrl.service.hasBillingRights($ctrl.user.nichandle) ? $ctrl.warningLink : $ctrl.billingLink }}"
                     data-ng-if="$ctrl.serviceInfos.hasDebt()"
-                    data-on-click="$ctrl.trackAction('go-to-pay-bill')"
+                    data-ng-click="$ctrl.trackAction('go-to-pay-bill')"
                     target="_top"
                 >
                     <p>
@@ -188,7 +190,7 @@
                     class="oui-link_icon"
                     data-ng-if="$ctrl.resiliateLink && ($ctrl.serviceInfos.hasAdminRights($ctrl.user.auth.account) || $ctrl.serviceInfos.hasAdminRights($ctrl.user.nichandle))"
                     data-ng-href="{{ $ctrl.resiliateLink }}"
-                    on-click="$ctrl.trackAction('go-to-resiliate')"
+                    data-ng-click="$ctrl.trackAction('stop', true)"
                     target="_top"
                 >
                     <p>
@@ -216,7 +218,7 @@
                     class="oui-link_icon"
                     data-ng-if="$ctrl.resiliateLink && ($ctrl.serviceInfos.hasAdminRights($ctrl.user.auth.account) || $ctrl.serviceInfos.hasAdminRights($ctrl.user.nichandle))"
                     data-ng-href="{{ $ctrl.resiliateLink }}"
-                    on-click="$ctrl.trackAction('go-to-resiliate')"
+                    data-ng-click="$ctrl.trackAction('stop', true)"
                     target="_top"
                 >
                     <p>

packages/manager/modules/billing/src/autoRenew/agreements/user-agreements.routes.js

@@ -1,5 +1,9 @@
 import controller from './user-agreements.controller';
 import template from './user-agreements.html';
+import {
+  TRACKING_AGREEMENTS_PAGE_NAME,
+  TRACKING_PAGE_CATEGORY,
+} from '../autorenew.constants';
 
 export default /* @ngInject */ (
   $stateProvider,
@@ -19,6 +23,15 @@ export default /* @ngInject */ (
             (currentUser) =>
               currentUser.isTrusted && 'app.account.billing.autorenew',
           ),
+      atInternet: {
+        ignore: true,
+      },
+      onEnter: /* @ngInject */ (atInternet) => {
+        atInternet.trackPage({
+          name: TRACKING_AGREEMENTS_PAGE_NAME,
+          page_category: TRACKING_PAGE_CATEGORY,
+        });
+      },
       resolve: {
         gotoAcceptAllAgreements: /* @ngInject */ ($state, atInternet) => (
           agreements,

packages/manager/modules/billing/src/autoRenew/autorenew.constants.js

@@ -32,10 +32,11 @@ export const COLUMNS_CONFIG = [
     property: 'serviceType',
   },
   {
-    property: 'state',
+    property: 'status',
   },
   {
-    property: 'status',
+    property: 'renewPeriod',
+    hidden: true,
   },
   {
     property: 'expiration',
@@ -74,6 +75,22 @@ export const SERVICE_STATUS = {
 
 export const URL_PARAMETER_SEPARATOR = '%20';
 
+const TRACKING_CHAPTER_1 = 'Hub';
+const TRACKING_CHAPTER_2 = 'billing';
+const TRACKING_CHAPTER_3 = 'services';
+
+const TRACKING_PAGE_SUFFIX = 'services::listing::autorenew';
+export const TRACKING_PAGE_CATEGORY = 'listing';
+export const TRACKING_PAGE = `${TRACKING_CHAPTER_1}::${TRACKING_CHAPTER_2}::${TRACKING_CHAPTER_3}::${TRACKING_PAGE_SUFFIX}`;
+export const TRACKING_FILTER_NAME_PREFIX =
+  'Hub::billing::services::listing::button::filter_services';
+
+export const TRACKING_AUTORENEW_PAGE_NAME = `Hub::billing::services::services::listing::autorenew`;
+export const TRACKING_SSH_PAGE_NAME = `${TRACKING_AUTORENEW_PAGE_NAME}::ssh`;
+export const TRACKING_AGREEMENTS_PAGE_NAME = `${TRACKING_AUTORENEW_PAGE_NAME}::agreements`;
+
+export const TRACKING_ACTIONS_PREFIX = `${TRACKING_CHAPTER_1}::${TRACKING_CHAPTER_2}::${TRACKING_CHAPTER_3}::${TRACKING_PAGE_CATEGORY}`;
+
 export default {
   AUTORENEW_EVENT,
   CONTRACTS_IDS,