feat(dedicated): revamp my services datagrid (#14357)

ref: MANAGER-15405

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/modules/billing-components/src/components/services-actions/translations/Messages_fr_FR.json

@@ -5,7 +5,7 @@
   "billing_services_actions_menu_manage_renew": "Configurer le renouvellement",
   "billing_services_actions_menu_exchange_update_accounts": "Configurer le renouvellement des comptes",
   "billing_services_actions_menu_anticipate_renew": "Anticiper le paiement",
-  "billing_services_actions_menu_resiliate": "Résilier",
+  "billing_services_actions_menu_resiliate": "Résilier mon service",
   "billing_services_actions_menu_resiliate_my_engagement": "Résilier mon engagement",
   "billing_services_actions_menu_renew_label": "Renouveler le service : {{ serviceName }} (Nouvelle fenêtre)",
   "billing_services_actions_menu_renew": "Renouveler le service",

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

@@ -32,10 +32,10 @@ export const COLUMNS_CONFIG = [
     property: 'serviceType',
   },
   {
-    property: 'state',
+    property: 'status',
   },
   {
-    property: 'status',
+    property: 'renewPeriod',
   },
   {
     property: 'expiration',

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

@@ -3,7 +3,6 @@ import get from 'lodash/get';
 import map from 'lodash/map';
 import reduce from 'lodash/reduce';
 import set from 'lodash/set';
-import upperFirst from 'lodash/upperFirst';
 
 import { RENEW_URL } from '@ovh-ux/manager-billing-components';
 import {
@@ -53,10 +52,6 @@ export default class AutorenewCtrl {
         hideOperators: true,
         values: this.BillingAutoRenew.getStatusTypes(),
       },
-      state: {
-        hideOperators: true,
-        values: this.BillingAutoRenew.getStatesTypes(),
-      },
       expiration: {
         hideOperators: true,
         values: this.BillingAutoRenew.getExpirationFilterTypes(),
@@ -266,12 +261,11 @@ export default class AutorenewCtrl {
   }
 
   getAutomaticExpirationDate(service) {
-    return upperFirst(
-      new Intl.DateTimeFormat(this.$translate.use().replace('_', '-'), {
-        year: 'numeric',
-        month: 'long',
-      }).format(new Date(service.expiration)),
-    );
+    return new Intl.DateTimeFormat(this.$translate.use().replace('_', '-'), {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+    }).format(new Date(service.expiration));
   }
 
   getDisplayedDateOfEffect(service) {
@@ -280,15 +274,15 @@ export default class AutorenewCtrl {
     }
     if (service.hasPendingResiliation() || service.isResiliated()) {
       return this.$translate.instant('billing_autorenew_service_date_renew', {
-        date: service.formattedExpiration,
+        date: this.getAutomaticExpirationDate(service),
       });
     }
     if (service.hasParticularRenew() || service.isOneShot()) {
       return '-';
     }
     if (service.hasManualRenew() && !service.isResiliated()) {
       return this.$translate.instant('billing_autorenew_service_date_before', {
-        date: service.formattedExpiration,
+        date: this.getAutomaticExpirationDate(service),
       });
     }
     if (service.hasAutomaticRenewal()) {

packages/manager/modules/billing/src/autoRenew/autorenew.html

@@ -162,15 +162,18 @@
             data-searchable
             data-sortable
         >
-            <a
-                class="oui-link"
+            <span
+                class="font-weight-bold"
                 data-ng-if="$row.url && !$row.isByoipService()"
-                data-ng-href="{{:: $row.url }}"
                 data-ng-bind=":: $row.serviceId | limitTo:80"
                 title="{{:: $row.serviceId }}"
-                target="_top"
             >
-            </a>
+            </span>
+            <small
+                data-ng-if="!$row.hasEngagement() && $row.canHaveEngagement()"
+                data-ng-bind="'billing_autorenew_engagement_none' | translate"
+            >
+            </small>
             <span
                 data-ng-if="!$row.url || $row.isByoipService()"
                 data-ng-bind="::$row.serviceId | limitTo:80"
@@ -189,40 +192,33 @@
             data-type="options"
             data-type-options="$ctrl.filtersOptions.serviceType"
             data-filterable
-            data-sortable
         >
             <span
                 data-ng-bind-html="('billing_autorenew_service_type_' + $row.serviceType) | translate"
             ></span>
         </oui-datagrid-column>
+
         <oui-datagrid-column
-            data-property="state"
-            data-title="::'billing_autorenew_criterion_state' | translate"
+            data-title="::'billing_autorenew_service_status' | translate"
+            data-property="status"
             data-type="options"
-            data-type-options="$ctrl.filtersOptions.state"
+            data-type-options="$ctrl.filtersOptions.status"
             data-filterable
-            data-sortable
         >
-            <span
-                class="oui-badge"
-                data-ng-class="{
-                        'oui-badge_success': $row.availability === 'UP',
-                        'oui-badge_error': $row.availability !== 'UP',
-                    }"
-                data-translate="{{ 'billing_autorenew_service_state_' + $row.availability | translate }}"
-            >
-            </span>
+            <billing-status service="$row"></billing-status>
         </oui-datagrid-column>
+
         <oui-datagrid-column
-            data-title="::'billing_autorenew_service_status' | translate"
-            data-property="status"
-            data-sortable
+            data-property="renewPeriod"
+            data-title="::'billing_autorenew_service_frequency' | translate"
             data-type="options"
-            data-type-options="$ctrl.filtersOptions.status"
-            data-filterable
         >
-            <billing-status service="$row"> </billing-status>
+            <span
+                data-ng-bind-html="$row.hasAutomaticRenew() && !$row.isResiliated() && $row.renewPeriod ? 'billing_autorenew_service_every_' + $row.renewPeriod + '_month': 'billing_autorenew_service_none' | translate"
+            >
+            </span>
         </oui-datagrid-column>
+
         <oui-datagrid-column
             data-title="::'billing_autorenew_service_date' | translate"
             data-property="expiration"
@@ -235,7 +231,6 @@
                 data-ng-bind-html=":: $ctrl.getDisplayedDateOfEffect($row)"
             ></span>
         </oui-datagrid-column>
-        <!-- /Columns -->
 
         <oui-datagrid-column
             data-title="::'billing_autorenew_service_actions' | translate"
@@ -247,5 +242,6 @@
             >
             </billing-services-actions>
         </oui-datagrid-column>
+        <!-- /Columns -->
     </oui-datagrid>
 </div>

packages/manager/modules/billing/src/autoRenew/translations/Messages_fr_FR.json

@@ -14,7 +14,7 @@
   "billing_autorenew_service_status_manual": "Renouvellement manuel",
   "billing_autorenew_service_status_manualPayment": "Renouvellement manuel",
   "billing_autorenew_service_status_pending_debt": "Facture à régler",
-  "billing_autorenew_service_status_delete_at_expiration": "Résiliation demandée",
+  "billing_autorenew_service_status_delete_at_expiration": "Résiliation programmée",
   "billing_autorenew_service_status_expired": "Résilié",
   "billing_autorenew_service_expiration_weeks": "Expirant dans une semaine",
   "billing_autorenew_service_expiration_months": "Expirant dans un mois",
@@ -30,8 +30,8 @@
   "autorenew_service_deleteAtExpiration_banner": "La résiliation à l’expiration du service « {{ serviceName }} » a bien été prise en compte. Vous pouvez annuler cette opération jusqu’à 24 heures avant expiration du service.",
   "autorenew_service_deleteAtExpiration_banner_cancel": "Annuler la resiliation à l’expiration",
 
-  "billing_autorenew_service": "Service",
-  "billing_autorenew_service_name": "Nom du service",
+  "billing_autorenew_service": "Type",
+  "billing_autorenew_service_name": "Service",
   "billing_autorenew_service_state_EXPIRED": "Suspendu",
   "billing_autorenew_service_state_UP": "Actif",
 
@@ -160,5 +160,14 @@
   "billing_autorenew_renew_action": "Renouveler",
   "billing_autorenew_service_renew_requires_mean_and_date": "Afin de finaliser l'activation du renouvellement automatique, veuillez ajouter un moyen de paiement et ensuite il vous sera possible de sélectionner votre date de prélèvement.",
   "billing_autorenew_service_activate_alert": "Vous avez au moins un service en renouvellement automatique mais vous n'avez pas encore autorisé cette option.",
-  "billing_autorenew_service_activate_alert_renew2016": "Ce message ne concerne pas les services Bare Metal et VPS."
+  "billing_autorenew_service_activate_alert_renew2016": "Ce message ne concerne pas les services Bare Metal et VPS.",
+
+  "billing_autorenew_service_frequency": "Fréquence de renouvellement",
+
+  "billing_autorenew_service_none": "Aucun",
+  "billing_autorenew_service_every_1_month": "Tous les mois",
+  "billing_autorenew_service_every_3_month": "Tous les 3 mois",
+  "billing_autorenew_service_every_6_month": "Tous les 6 mois",
+  "billing_autorenew_service_every_12_month": "Tous les ans",
+  "billing_autorenew_engagement_none": "Sans engagement"
 }

packages/manager/modules/models/BillingService/BillingService.class.js

@@ -32,6 +32,10 @@ export default class BillingService {
     return this.creationDate.format('LL');
   }
 
+  get renewPeriod() {
+    return this.renew.period;
+  }
+
   isBillingSuspended() {
     return this.status === 'BILLING_SUSPENDED';
   }