feat(dedicated): add FTC cancellation modal for US Baremetal Dashboard

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

@@ -186,6 +186,10 @@ export default /* @ngInject */ ($stateProvider) => {
             }),
           )
           .then((url) => () => url),
+      goToResiliateService: /* @ngInject */ ($state, serverName) => () =>
+        $state.go('app.dedicated-server.server.dashboard.resiliate', {
+          productId: serverName,
+        }),
       goToSgxIntroduction: /* @ngInject */ ($state, atInternet) => () => {
         atInternet.trackClick({
           name: 'dedicated::dedicated::server::dashboard::sgx::manage',

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

@@ -21,6 +21,7 @@ import {
 import commitment from './commitment';
 import cancelCommitment from './cancel-commitment';
 import cancelResiliation from './cancel-resiliation';
+import resiliate from './resiliate';
 import resiliation from './resiliation';
 import terminate from '../terminate';
 import upgrade from './upgrade';
@@ -42,6 +43,7 @@ angular
     commitment,
     cancelCommitment,
     cancelResiliation,
+    resiliate,
     atInternet,
     'oui',
     'pascalprecht.translate',

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

@@ -0,0 +1,22 @@
+import angular from 'angular';
+
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerDedicatedServerDashboardResiliateLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('app.dedicated-server.server.dashboard.resiliate.**', {
+      url: '/resiliate',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+        return import('./resiliate.module').then((mod) =>
+          $ocLazyLoad.inject(mod.default || mod),
+        );
+      },
+    });
+  },
+);
+
+export default moduleName;

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

@@ -0,0 +1,18 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import ngUiRouterLayout from '@ovh-ux/ng-ui-router-layout';
+import ovhManagerBillingComponents from '@ovh-ux/manager-billing-components';
+
+import routing from './resiliate.routing';
+
+const moduleName = 'ovhManagerDedicatedServerDashboardResiliate';
+
+angular
+  .module(moduleName, [
+    'ui.router',
+    ngUiRouterLayout,
+    ovhManagerBillingComponents,
+  ])
+  .config(routing);
+
+export default moduleName;

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

@@ -0,0 +1,50 @@
+import { BillingService as Service } from '@ovh-ux/manager-models';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.dedicated-server.server.dashboard.resiliate', {
+    url: '/resiliate',
+    views: {
+      modal: {
+        component: 'ovhManagerBillingResiliateModal',
+      },
+    },
+    layout: 'modal',
+    resolve: {
+      serviceId: /* @ngInject */ (serviceInfos) => serviceInfos.serviceId,
+      service: /* @ngInject */ ($http, coreConfig, serviceId) =>
+        $http
+          .get(`/services/${serviceId}`)
+          .then(({ data }) => new Service(data, coreConfig.getUserLocale())),
+      capabilities: /* @ngInject */ (service) => {
+        const actions =
+          service?.billing?.lifecycle?.capacities?.actions ||
+          service?.billing?.lifecycle?.current?.pendingActions ||
+          [];
+        return actions;
+      },
+      serviceTypeLabel: () => 'DEDICATED_SERVER',
+      goBack: /* @ngInject */ (goToDashboard) => () => goToDashboard(),
+      onSuccess: /* @ngInject */ ($state, Alerter) => (
+        reload,
+        successMessage,
+      ) => {
+        const promise = $state.go('app.dedicated-server', {}, { reload: true });
+        if (successMessage) {
+          promise.then(() => {
+            Alerter.set('alert-success', successMessage, null, 'server_alert');
+          });
+        }
+        return promise;
+      },
+      onError: /* @ngInject */ (Alerter, goToDashboard) => (errorMessage) => {
+        Alerter.set(
+          'alert-danger',
+          errorMessage,
+          null,
+          'server_dashboard_alert',
+        );
+        return goToDashboard();
+      },
+    },
+  });
+};

packages/manager/modules/billing-components/src/components/resiliate-modal/resiliate-modal.controller.js

@@ -63,6 +63,45 @@ export default class ResiliateModalController {
         : this.resiliateOptions.find(
             ({ value }) => value === this.RESILIATION_DEFAULT_CAPABILITY,
           )?.value;
+
+    this.updateContextMessage();
+  }
+
+  getContextMessageKey() {
+    if (!this.isUSRegion || !this.resiliateOption) {
+      return null;
+    }
+    const contextKeys = {
+      terminateAtExpirationDate:
+        'billing_resiliate_context_terminateAtExpirationDate_us',
+      terminateAtEngagementDate:
+        'billing_resiliate_context_terminateAtEngagementDate_us',
+      terminateAtEngagementDate_monthly:
+        'billing_resiliate_context_terminateAtEngagementDate_monthly_us',
+    };
+    return contextKeys[this.resiliateOption] || null;
+  }
+
+  updateContextMessage() {
+    const key = this.getContextMessageKey();
+    if (!key) {
+      this.contextMessage = null;
+      this.contextMessageType = null;
+      return;
+    }
+    const date =
+      this.service?.billing?.engagement?.endDate ||
+      this.service?.billing?.expirationDate ||
+      this.service?.expirationDate ||
+      '';
+    this.contextMessage = this.$translate.instant(key, { date });
+    const warningOptions = [
+      'terminateAtEngagementDate',
+      'terminateAtEngagementDate_monthly',
+    ];
+    this.contextMessageType = warningOptions.includes(this.resiliateOption)
+      ? 'warning'
+      : 'info';
   }
 
   resiliate() {

packages/manager/modules/billing-components/src/components/resiliate-modal/resiliate-modal.html

@@ -27,10 +27,21 @@
                         data-model="$ctrl.resiliateOption"
                         data-match="label"
                         data-value-property="value"
+                        data-on-change="$ctrl.updateContextMessage()"
                     >
                     </oui-select>
                 </oui-field>
             </form>
+            <div
+                data-ng-if="$ctrl.isUSRegion && $ctrl.contextMessage"
+                class="mt-3"
+            >
+                <oui-message
+                    data-type="{{ $ctrl.contextMessageType }}"
+                >
+                    {{ $ctrl.contextMessage }}
+                </oui-message>
+            </div>
             <span
                 data-ng-if="$ctrl.isUSRegion && $ctrl.resiliateOption === 'terminate'"
                 data-translate="billing_resiliate_confirmation_mail_to_be_sent"

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_de_DE.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress": "Meine Zahlungsmodalitäten aktualisieren.",
   "billing_resiliate_autorenewInProgress_us": "Meine Zahlungsmodalitäten aktualisieren.",
   "billing_resiliate_autorenewInProgress_error": "Ein Fehler ist während der Stornierung Ihres Antrags aufgetreten.",
-  "billing_resiliate_autorenewInProgress_success": "Ihr Antrag wurde erfolgreich storniert."
+  "billing_resiliate_autorenewInProgress_success": "Ihr Antrag wurde erfolgreich storniert.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_en_GB.json

@@ -15,14 +15,17 @@
   "billing_resiliate_terminateAtExpirationDate_error": "An error has occurred submitting the request to cancel this service on its expiry date:",
   "billing_resiliate_error": "An error occurred while submitting the cancellation request.",
   "billing_resiliate_terminateAtEngagementDate_us": "Cancel my service at the end of my commitment.",
-  "billing_resiliate_terminateAtEngagementDate_monthly_us": "Keep my service but without commitment.",
+  "billing_resiliate_terminateAtEngagementDate_monthly_us": "At end of commitment become month-to-month.",
   "billing_resiliate_terminateAtEngagementDate_error_us": "An error occurred while submitting the cancellation request on the service’s end of commitment date:",
   "billing_resiliate_mode_label_us": "Select the action you wish to carry out",
   "billing_resiliate_terminate_us": "Cancel my service now.",
-  "billing_resiliate_terminateAtExpirationDate_us": "Cancel my service.",
+  "billing_resiliate_terminateAtExpirationDate_us": "Cancel my service on its expiry date.",
   "billing_resiliate_autorenewInProgress": "Cancel my pending request.",
   "billing_resiliate_autorenewInProgress_us": "Cancel my pending request.",
   "billing_resiliate_autorenewInProgress_error": "An error occurred during the cancellation of your pending request.",
   "billing_resiliate_autorenewInProgress_success": "Your pending request has been successfully cancelled.",
-  "billing_resiliate_confirmation_mail_to_be_sent": "You will be sent an email confirming that your service has been cancelled"
+  "billing_resiliate_confirmation_mail_to_be_sent": "You have been sent an email confirming this cancellation.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_es_ES.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress": "Actualizar mis modalidades de pago.",
   "billing_resiliate_autorenewInProgress_us": "Actualizar mis modalidades de pago.",
   "billing_resiliate_autorenewInProgress_error": "Se ha producido un error durante la cancelación de su solicitud.",
-  "billing_resiliate_autorenewInProgress_success": "Su solicitud ha sido cancelada correctamente."
+  "billing_resiliate_autorenewInProgress_success": "Su solicitud ha sido cancelada correctamente.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_fr_CA.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress_error": "Une erreur s'est produite pendant l'abandon de votre demande.",
   "billing_resiliate_autorenewInProgress_success": "Votre demande a bien été abandonnée.",
   "billing_resiliate_error": "Une erreur est survenue lors de la demande de résiliation :",
-  "billing_resiliate_confirmation_mail_to_be_sent": "Un e-mail vous confirmant la résiliation de votre service vous sera envoyé"
+  "billing_resiliate_confirmation_mail_to_be_sent": "Un e-mail vous confirmant la résiliation de votre service vous a été envoyé.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Votre service sera résilié le {{date}}, à la fin de la période de facturation en cours.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Votre service restera actif et vous serez facturé jusqu'au {{date}}, la fin de votre engagement.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Après la fin de votre engagement, vous serez facturé mois par mois jusqu'à ce que vous résiliez votre service."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_fr_FR.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress_error": "Une erreur s'est produite pendant l'abandon de votre demande.",
   "billing_resiliate_autorenewInProgress_success": "Votre demande a bien été abandonnée.",
   "billing_resiliate_error": "Une erreur est survenue lors de la demande de résiliation :",
-  "billing_resiliate_confirmation_mail_to_be_sent": "Un e-mail vous confirmant la résiliation de votre service vous sera envoyé"
+  "billing_resiliate_confirmation_mail_to_be_sent": "Un e-mail vous confirmant la résiliation de votre service vous a été envoyé.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Votre service sera résilié le {{date}}, à la fin de la période de facturation en cours.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Votre service restera actif et vous serez facturé jusqu'au {{date}}, la fin de votre engagement.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Après la fin de votre engagement, vous serez facturé mois par mois jusqu'à ce que vous résiliez votre service."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_it_IT.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress": "Aggiornare le mie modalità di pagamento.",
   "billing_resiliate_autorenewInProgress_us": "Aggiornare le mie modalità di pagamento.",
   "billing_resiliate_autorenewInProgress_error": "Si è verificato un errore durante l'abbandono della tua richiesta.",
-  "billing_resiliate_autorenewInProgress_success": "La tua richiesta è stata abbandonata correttamente."
+  "billing_resiliate_autorenewInProgress_success": "La tua richiesta è stata abbandonata correttamente.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_pl_PL.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress": "Zaktualizować moje warunki płatności.",
   "billing_resiliate_autorenewInProgress_us": "Zaktualizować moje warunki płatności.",
   "billing_resiliate_autorenewInProgress_error": "Wystąpił błąd podczas rezygnacji z Twojego wniosku.",
-  "billing_resiliate_autorenewInProgress_success": "Twój wniosek został pomyślnie anulowany."
+  "billing_resiliate_autorenewInProgress_success": "Twój wniosek został pomyślnie anulowany.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

packages/manager/modules/billing-components/src/components/resiliate-modal/translations/Messages_pt_PT.json

@@ -24,5 +24,8 @@
   "billing_resiliate_autorenewInProgress": "Atualizar as minhas modalidades de pagamento.",
   "billing_resiliate_autorenewInProgress_us": "Atualizar as minhas modalidades de pagamento.",
   "billing_resiliate_autorenewInProgress_error": "Ocorreu um erro durante o abandono do seu pedido.",
-  "billing_resiliate_autorenewInProgress_success": "O seu pedido foi abandonado com sucesso."
+  "billing_resiliate_autorenewInProgress_success": "O seu pedido foi abandonado com sucesso.",
+  "billing_resiliate_context_terminateAtExpirationDate_us": "Your service will be cancelled on {{date}}, the end of the current billing period.",
+  "billing_resiliate_context_terminateAtEngagementDate_us": "Your service will remain active and you will be billed until the end of your commitment on {{date}}.",
+  "billing_resiliate_context_terminateAtEngagementDate_monthly_us": "Upon the end of your current commitment, you will be billed month to month until you cancel your services."
 }

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

@@ -12,6 +12,7 @@ export default {
     goToCancelCommit: '&',
     goToCancelResiliation: '&',
     goToResiliation: '&',
+    goToResiliateService: '&?',
     trackingPrefix: '@',
     trackingPage: '@',
     trackingNameSuffix: '@',

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

@@ -235,6 +235,21 @@ export default class ServicesActionsCtrl {
     );
   }
 
+  canResiliateWithFtcFlow() {
+    return (
+      this.coreConfig.isRegion('US') &&
+      this.goToResiliateService &&
+      this.serviceInfos &&
+      !this.serviceInfos.isResiliated() &&
+      !this.serviceInfos.hasDebt()
+    );
+  }
+
+  resiliateService() {
+    this.trackAction('cancel-service', true);
+    return this.goToResiliateService();
+  }
+
   handleClickResiliate(event) {
     this.trackAction('stop', true);
 

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

@@ -201,6 +201,28 @@
         </oui-tile-description>
     </oui-tile-definition>
 
+    <oui-tile-definition
+        data-ng-if="!$ctrl.isLoading && $ctrl.canResiliateWithFtcFlow()"
+    >
+        <oui-tile-description>
+            <a
+                class="oui-link_icon"
+                href=""
+                data-ng-click="$ctrl.resiliateService()"
+            >
+                <p>
+                    <span
+                        data-translate="manager_billing_subscription_cancel_service_us"
+                    ></span>
+                    <span
+                        aria-hidden="true"
+                        class="oui-icon oui-icon-arrow-right"
+                    ></span>
+                </p>
+            </a>
+        </oui-tile-description>
+    </oui-tile-definition>
+
     <oui-tile-definition
         data-ng-if="$ctrl.canResiliate() && (!$ctrl.serviceInfos.shouldDeleteAtExpiration() || !$ctrl.serviceInfos.isResiliated()) && !$ctrl.serviceInfos.hasDebt() && !$ctrl.serviceInfos.hasPendingResiliation()"
     >

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_de_DE.json

@@ -30,5 +30,6 @@
   "manager_billing_subscription_resiliate": "Kündigen",
   "manager_billing_subscription_resiliate_my_engagement": "Abonnement kündigen",
   "manager_billing_subscription_pay_bill": "Begleichen",
-  "manager_billing_subscription_pay_bill_renew": "Verlängern"
+  "manager_billing_subscription_pay_bill_renew": "Verlängern",
+  "manager_billing_subscription_cancel_service_us": "Cancel my service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_en_GB.json

@@ -30,5 +30,6 @@
   "manager_billing_subscription_resiliate": "Cancel",
   "manager_billing_subscription_resiliate_my_engagement": "Cancel commitment",
   "manager_billing_subscription_pay_bill": "Pay",
-  "manager_billing_subscription_pay_bill_renew": "Renew"
+  "manager_billing_subscription_pay_bill_renew": "Renew",
+  "manager_billing_subscription_cancel_service_us": "Cancel my service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_es_ES.json

@@ -30,5 +30,6 @@
   "manager_billing_subscription_resiliate": "Dar de baja",
   "manager_billing_subscription_resiliate_my_engagement": "Dar de baja el compromiso",
   "manager_billing_subscription_pay_bill": "Regularizar",
-  "manager_billing_subscription_pay_bill_renew": "Renovar"
+  "manager_billing_subscription_pay_bill_renew": "Renovar",
+  "manager_billing_subscription_cancel_service_us": "Cancel my service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_fr_CA.json

@@ -33,5 +33,6 @@
   "manager_billing_subscription_resiliate_my_engagement": "Résilier l'engagement",
 
   "manager_billing_subscription_pay_bill": "Régulariser",
-  "manager_billing_subscription_pay_bill_renew": "Renouveler"
+  "manager_billing_subscription_pay_bill_renew": "Renouveler",
+  "manager_billing_subscription_cancel_service_us": "Résilier mon service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_fr_FR.json

@@ -33,5 +33,6 @@
   "manager_billing_subscription_resiliate_my_engagement": "Résilier l'engagement",
 
   "manager_billing_subscription_pay_bill": "Régulariser",
-  "manager_billing_subscription_pay_bill_renew": "Renouveler"
+  "manager_billing_subscription_pay_bill_renew": "Renouveler",
+  "manager_billing_subscription_cancel_service_us": "Résilier mon service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_it_IT.json

@@ -30,5 +30,6 @@
   "manager_billing_subscription_resiliate": "Disattivare",
   "manager_billing_subscription_resiliate_my_engagement": "Rescindere l’impegno contrattuale",
   "manager_billing_subscription_pay_bill": "Saldare",
-  "manager_billing_subscription_pay_bill_renew": "Rinnovare"
+  "manager_billing_subscription_pay_bill_renew": "Rinnovare",
+  "manager_billing_subscription_cancel_service_us": "Cancel my service"
 }

packages/manager/modules/billing-components/src/components/subscription-tile/translations/Messages_pl_PL.json

@@ -30,5 +30,6 @@
   "manager_billing_subscription_resiliate": "Rezygnacja",
   "manager_billing_subscription_resiliate_my_engagement": "Rozwiąż umowę terminową",
   "manager_billing_subscription_pay_bill": "Zapłać",
-  "manager_billing_subscription_pay_bill_renew": "Odnów"
+  "manager_billing_subscription_pay_bill_renew": "Odnów",
+  "manager_billing_subscription_cancel_service_us": "Cancel my service"
 }