feat(pci.project.billing): open monthly confirmation in a modal (#787)

marie-j · antleblanc · commit f280ba79408e · 2019-06-05T12:19:36.000+02:00
ref: MANAGER-2571
diff --git a/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/component.js b/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/component.js
@@ -6,7 +6,7 @@ export default {
   controller,
   bindings: {
     resources: '<',
-    showSwitchToMonthlyBillingOption: '<',
+    switchToMonthlyBilling: '&',
     showAdditionalInstanceDetails: '<',
   },
 };
diff --git a/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/controller.js b/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/controller.js
@@ -1,20 +1,22 @@
+export default class {
+  /* @ngInject */
+  constructor(DetailsPopoverService) {
+    this.DetailsPopoverService = DetailsPopoverService;
+  }
 
-export default /* @ngInject */ function (
-  DetailsPopoverService,
-) {
-  const self = this;
+  $onInit() {
+    this.toggle = {
+      accordions: {
+        instance: false,
+        objectStorage: false,
+        archiveStorage: false,
+        snapshot: false,
+        volume: false,
+      },
+    };
+  }
 
-  self.toggle = {
-    accordions: {
-      instance: false,
-      objectStorage: false,
-      archiveStorage: false,
-      snapshot: false,
-      volume: false,
-    },
-  };
-
-  self.toggleAccordion = function toggleAccordion() {
-    DetailsPopoverService.reset();
-  };
+  toggleAccordion() {
+    this.DetailsPopoverService.reset();
+  }
 }
diff --git a/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/template.html b/packages/manager/modules/pci/src/components/project/billing/hourly-resource-list/template.html
@@ -3,7 +3,7 @@
                 instance-col-name="'cpbc_hourly_instance_col_name'"
                 instance-col-total="'cpbc_hourly_instance_col_consumption'"
                 instance-col-total-tooltip="'cpbc_hourly_instance_col_consumption_tooltip'"
-                show-switch-to-monthly-billing-option="$ctrl.showSwitchToMonthlyBillingOption"
+                switch-to-monthly-billing="$ctrl.switchToMonthlyBilling({ instance: instance })"
                 show-additional-instance-details="$ctrl.showAdditionalInstanceDetails"></instance-list>
 </oui-collapsible>
 <oui-collapsible class="mx-0" heading="{{ ::'cpbc_snapshot_detail_title' | translate }} ({{ $ctrl.resources.totals.hourly.snapshot.toFixed(2) + ' ' + $ctrl.resources.totals.currencySymbol }})">
diff --git a/packages/manager/modules/pci/src/components/project/billing/instance-list/component.js b/packages/manager/modules/pci/src/components/project/billing/instance-list/component.js
@@ -9,7 +9,7 @@ export default {
     instanceColName: '<',
     instanceColTotal: '<',
     instanceColTotalTooltip: '<',
-    showSwitchToMonthlyBillingOption: '<',
+    switchToMonthlyBilling: '&',
     showAdditionalInstanceDetails: '<',
   },
 };
diff --git a/packages/manager/modules/pci/src/components/project/billing/instance-list/controller.js b/packages/manager/modules/pci/src/components/project/billing/instance-list/controller.js
@@ -10,7 +10,6 @@ export default /* @ngInject */ function BillingInstanceListComponentCtrl(
   OvhApiCloudProjectInstance,
   OvhApiMe,
   CucCloudMessage,
-  CucPriceHelper,
 ) {
   const self = this;
   self.windowsStringPattern = '/^win-/';
@@ -119,47 +118,4 @@ export default /* @ngInject */ function BillingInstanceListComponentCtrl(
         self.loaders.instanceList = false;
       });
   };
-
-  self.prepareMonthlyPaymentActivation = function prepareMonthlyPaymentActivation(instance) {
-    self.instanceToMonthly = instance.instanceId;
-    self.data.instanceToMonthlyPrice = null;
-    self.loaders.monthlyBilling = true;
-
-    CucPriceHelper.getPrices($stateParams.projectId).then((prices) => {
-      const monthlyPrice = prices[instance.planCode && instance.planCode.replace('consumption', 'monthly')];
-      if (!monthlyPrice) {
-        self.endInstanceToMonthlyConversion();
-        return $q.reject({ data: { message: 'No monthly price for this instance' } });
-      }
-      self.data.instanceToMonthlyPrice = monthlyPrice;
-      return $.when();
-    }).catch((err) => {
-      self.instanceToMonthly = null;
-      CucCloudMessage.error([$translate.instant('cpbc_hourly_instance_pass_to_monthly_price_error'), (err.data && err.data.message) || ''].join(' '));
-      return $q.reject(err);
-    }).finally(() => {
-      self.loaders.monthlyBilling = false;
-    });
-  };
-
-  self.confirmMonthlyPaymentActivation = function confirmMonthlyPaymentActivation() {
-    self.loaders.monthlyBilling = true;
-
-    OvhApiCloudProjectInstance.v6().activeMonthlyBilling({
-      serviceName: $stateParams.projectId,
-      instanceId: self.instanceToMonthly,
-    }, {}).$promise.then(() => {
-      // reset loaders and instance to activate
-      self.endInstanceToMonthlyConversion();
-    }).catch((err) => {
-      CucCloudMessage.error([$translate.instant('cpbc_hourly_instance_pass_to_monthly_error'), (err.data && err.data.message) || ''].join(' '));
-      return $q.reject(err);
-    }).finally(() => {
-      self.loaders.monthlyBilling = false;
-    });
-  };
-
-  self.endInstanceToMonthlyConversion = function endInstanceToMonthlyConversion() {
-    self.instanceToMonthly = null;
-  };
 }
diff --git a/packages/manager/modules/pci/src/components/project/billing/instance-list/template.html b/packages/manager/modules/pci/src/components/project/billing/instance-list/template.html
@@ -1,5 +1,4 @@
 <span  data-ng-if="$ctrl.instanceConsumptionDetails.length === 0" data-translate="cpbc_no_consumption_data" class="cloud-billing-resource-no-data"></span>
-
 <div data-ng-if="$ctrl.instanceConsumptionDetails.length > 0" class="instanceList overflow-scroll">
     <div class="oui-datagrid-responsive-container">
         <div class="oui-datagrid-responsive-container__sticky-container">
@@ -37,7 +36,7 @@
                             <td class="oui-datagrid__cell" data-title="{{ :: $ctrl.instanceColTotal | translate }}">
                                 <span data-ng-bind=" :: instanceConsumption.total"></span>
                             </td>
-                            <td data-ng-if="$ctrl.showSwitchToMonthlyBillingOption || $ctrl.showAdditionalInstanceDetails" class="oui-datagrid__cell text-right no-space vertical-middle right-space-p4">
+                            <td data-ng-if="$ctrl.switchToMonthlyBilling || $ctrl.showAdditionalInstanceDetails" class="oui-datagrid__cell text-right no-space vertical-middle right-space-p4">
                                 <span data-ng-if="instanceConsumption.monthlyBilling && instanceConsumption.monthlyBilling.status === 'ok'"
                                         data-translate="cpbc_hourly_instance_monthly_billing_since"
                                         data-translate-values="{ since : (instanceConsumption.monthlyBilling.since | date:'shortDate') }">
@@ -48,48 +47,14 @@
                                 </span>
                                 <span class="opacity6" data-ng-if="!instanceConsumption.monthlyBilling && instanceConsumption.isDeleted" data-translate="cpbc_hourly_instance_deleted"></span>
 
-                                <!-- CONFIRM PASSING TO MONTHLY PAYMENT -->
-                                <div data-ng-show="instanceConsumption.instanceId === $ctrl.instanceToMonthly"
-                                        class="text-right animate-fadeInRight-enter animate-fadeOutLeft-leave full-width cell-confirm">
-
-                                    <button class="btn btn-default"
-                                            type="reset"
-                                            data-ng-click="$ctrl.endInstanceToMonthlyConversion()"
-                                            data-ng-disabled="$ctrl.loaders.monthlyBilling">
-                                        <i class="glyphicon glyphicon-remove right-space-m8"></i>
-                                        <span data-translate="common_cancel"></span>
-                                    </button>
-
-                                    <button class="btn btn-primary"
-                                            data-uib-tooltip="{{ :: 'cpbc_hourly_instance_pass_to_monthly_info' | translate }}"
-                                            type="submit"
-                                            data-ng-click="$ctrl.confirmMonthlyPaymentActivation()"
-                                            data-ng-disabled="$ctrl.loaders.monthlyBilling">
-                                        <i class="fa fa-check right-space-m8"></i>
-                                        <span data-translate="cpbc_hourly_instance_pass_to_monthly_button"
-                                            data-translate-values="{ price: $ctrl.data.instanceToMonthlyPrice.price.text }"></span>
-                                        <spinner data-ng-if="$ctrl.loaders.monthlyBilling">
-                                        </spinner>
-                                    </button>
-
-                                </div>
-
                                 <!-- CONFIRM MONTHLY PAYMENT BUTTON -->
-                                <div data-ng-if="$ctrl.showSwitchToMonthlyBillingOption"
-                                    data-ng-class="{
-                                    'opacity2-leave' : instanceConsumption.instanceId === $ctrl.instanceToMonthly,
-                                    'opacity2-enter' : instanceConsumption.instanceId !== $ctrl.instanceToMonthly
-                                }">
-                                    <button type="button"
-                                            data-uib-tooltip="{{ :: 'cpbc_hourly_instance_pass_to_monthly_info' | translate }}"
-                                            data-ng-if="instanceConsumption.monthlyBilling === null && !instanceConsumption.isDeleted"
-                                            class="btn btn-default"
-                                            data-ng-click="$ctrl.prepareMonthlyPaymentActivation(instanceConsumption)"
-                                            data-ng-disabled="$ctrl.loaders.monthlyBilling"
-                                            write-right-required>
-                                        {{ :: 'cpbc_hourly_instance_pass_to_monthly' | translate }}
-                                    </button>
-                                </div>
+                                <button type="button"
+                                        data-ng-if="$ctrl.switchToMonthlyBilling && instanceConsumption.monthlyBilling === null && !instanceConsumption.isDeleted"
+                                        class="oui-button oui-button_secondary"
+                                        data-ng-click="$ctrl.switchToMonthlyBilling({ instance: instanceConsumption })"
+                                        data-write-right-required>
+                                    <span data-translate="cpbc_hourly_instance_pass_to_monthly"></span>
+                                </button>
                             </td>
                         </tr>
                     </tbody>
diff --git a/packages/manager/modules/pci/src/components/project/billing/monthly-resource-list/template.html b/packages/manager/modules/pci/src/components/project/billing/monthly-resource-list/template.html
@@ -3,7 +3,6 @@
         instances="$ctrl.resources.monthlyInstances"
         instance-col-name="'cpbc_monthly_instance_col_name'"
         instance-col-total="'cpbc_monthly_instance_col_total'"
-        instance-col-total-tooltip="'cpbc_monthly_instance_col_total_tooltip'"
-        show-switch-to-monthly-billing-option="false">
+        instance-col-total-tooltip="'cpbc_monthly_instance_col_total_tooltip'">
     </instance-list>
 </oui-collapsible>
diff --git a/packages/manager/modules/pci/src/projects/project/billing/billing.controller.js b/packages/manager/modules/pci/src/projects/project/billing/billing.controller.js
@@ -50,4 +50,11 @@ export default class CloudProjectBillingConsumptionCurrentCtrl {
   refreshMessages() {
     this.messages = this.messageHandler.getMessages();
   }
+
+  switchToMonthly({ instanceId }) {
+    return this.$state.go('pci.projects.project.billing.monthly', {
+      projectId: this.projectId,
+      instanceId,
+    });
+  }
 }
diff --git a/packages/manager/modules/pci/src/projects/project/billing/billing.html b/packages/manager/modules/pci/src/projects/project/billing/billing.html
@@ -59,7 +59,10 @@ <h2 data-translate="cpbc_tab_consumption"></h2>
                         <span data-translate="cpbc_hourly_header_description"></span>
                         &nbsp;(<span data-ng-bind="BillingCtrl.data.totals.hourly.total.toFixed(2) + ' ' + BillingCtrl.data.totals.currencySymbol"></span>)
                     </p>
-                    <hourly-resource-list resources="BillingCtrl.data" show-switch-to-monthly-billing-option="true"></hourly-resource-list>
+                    <hourly-resource-list
+                        data-resources="BillingCtrl.data"
+                        data-switch-to-monthly-billing="BillingCtrl.switchToMonthly(instance)">
+                    </hourly-resource-list>
                 </oui-tile>
             </div>
         </div>
diff --git a/packages/manager/modules/pci/src/projects/project/billing/billing.module.js b/packages/manager/modules/pci/src/projects/project/billing/billing.module.js
@@ -6,13 +6,15 @@ import 'angular-translate';
 
 import estimate from './estimate';
 import history from './history';
+import activateMonthly from './monthly';
 import routing from './billing.routing';
 import service from './billing.service';
 
 const moduleName = 'ovhManagerPciProjectBilling';
 
 angular
   .module(moduleName, [
+    activateMonthly,
     estimate,
     history,
     'ngTranslateAsyncLoader',
diff --git a/packages/manager/modules/pci/src/projects/project/billing/monthly/index.js b/packages/manager/modules/pci/src/projects/project/billing/monthly/index.js
@@ -0,0 +1,24 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPciProjectBillingMonthlyLazyLoading';
+
+angular
+  .module(moduleName, [
+    'ui.router',
+    'oc.lazyLoad',
+  ])
+  .config(/* @ngInject */($stateProvider) => {
+    $stateProvider.state('pci.projects.project.billing.monthly.**', {
+      url: '/monthly',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+        return import('./monthly.module')
+          .then(mod => $ocLazyLoad.inject(mod.default || mod));
+      },
+    });
+  });
+
+export default moduleName;
diff --git a/packages/manager/modules/pci/src/projects/project/billing/monthly/monthly.module.js b/packages/manager/modules/pci/src/projects/project/billing/monthly/monthly.module.js
@@ -0,0 +1,25 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'ovh-api-services';
+import '@ovh-ux/ng-translate-async-loader';
+import 'angular-translate';
+
+import activateMonthly from '../../instances/instance/active-monthly-billing/active-monthly-billing.module';
+import instances from '../../instances/instances.module';
+import routing from './monthly.routing';
+
+const moduleName = 'ovhManagerPciProjectBillingMonthly';
+
+angular
+  .module(moduleName, [
+    activateMonthly,
+    instances,
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+    'ovh-api-services',
+    'ui.router',
+  ])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/packages/manager/modules/pci/src/projects/project/billing/monthly/monthly.routing.js b/packages/manager/modules/pci/src/projects/project/billing/monthly/monthly.routing.js
@@ -0,0 +1,37 @@
+export default /* @ngInject */($stateProvider) => {
+  $stateProvider
+    .state('pci.projects.project.billing.monthly', {
+      url: '/monthly?instanceId',
+      views: {
+        modal: {
+          component: 'pciInstancesInstanceActiveMonthlyBilling',
+        },
+      },
+      layout: 'modal',
+      resolve: {
+        instanceId: /* @ngInject */$transition$ => $transition$.params().instanceId,
+        instance: /* @ngInject */ (
+          PciProjectsProjectInstanceService,
+          projectId,
+          instanceId,
+        ) => PciProjectsProjectInstanceService
+          .get(projectId, instanceId),
+        goBack: /* @ngInject */ ($state, CucCloudMessage, projectId) => (message = false, type = 'success') => {
+          const reload = message && type === 'success';
+
+          const promise = $state.go('pci.projects.project.billing', {
+            projectId,
+          },
+          {
+            reload,
+          });
+
+          if (message) {
+            promise.then(() => CucCloudMessage[type](message, 'pci.projects.project.billing'));
+          }
+
+          return promise;
+        },
+      },
+    });
+};
diff --git a/packages/manager/modules/pci/src/projects/project/instances/instance/active-monthly-billing/active-monthly-billing.html b/packages/manager/modules/pci/src/projects/project/instances/instance/active-monthly-billing/active-monthly-billing.html
@@ -11,9 +11,8 @@
     <p data-translate="pci_projects_project_instances_instance_active-monthly-billing_content"
         data-translate-values="{ instance: $ctrl.instance.name }"></p>
 
-    <oui-message data-type="warning" data-ng-if="$ctrl.instance.isMonthlyBillingEnabled()">
+    <oui-message data-type="warning">
         <span data-translate="pci_projects_project_instances_instance_active-monthly-billing_invoice_alert"></span>
     </oui-message>
 
-
 </oui-modal>

Original file line number	Diff line number	Diff line change
`@@ -50,4 +50,11 @@ export default class CloudProjectBillingConsumptionCurrentCtrl {`
`50`	`50`	`refreshMessages() {`
`51`	`51`	`this.messages = this.messageHandler.getMessages();`
`52`	`52`	`}`
	`53`	`+`
	`54`	`+ switchToMonthly({ instanceId }) {`
	`55`	`+ return this.$state.go('pci.projects.project.billing.monthly', {`
	`56`	`+ projectId: this.projectId,`
	`57`	`+ instanceId,`
	`58`	`+ });`
	`59`	`+ }`
`53`	`60`	`}`