fix(pci.projects.instance): display currency according to sub not locale (#783)

ref: MANAGER-2737

Author: marie-j

packages/manager/modules/pci/src/components/project/flavor-billing/flavor-billing.controller.js

@@ -1,16 +1,32 @@
 export default class FlavorBillingController {
+  /* @ngInject */
+  constructor(TranslateService) {
+    this.TranslateService = TranslateService;
+  }
+
   $onInit() {
     this.monthly = this.monthlyBilling === true;
     this.number = this.number || 1;
 
     this.disabled = this.disabled || false;
   }
 
+  set flavor(flavor) {
+    if (flavor) {
+      this.prices = flavor.prices;
+      this.PriceFormatter = new Intl.NumberFormat(this.TranslateService.getUserLocale().replace('_', '-'), { style: 'currency', currency: flavor.prices.hourly.currencyCode });
+    }
+  }
+
   selectBilling(monthlyBilling) {
     this.monthlyBilling = monthlyBilling;
   }
 
   getPrice(price) {
     return this.number * price.value;
   }
+
+  formatPrice(price) {
+    return this.PriceFormatter.format(this.getPrice(price));
+  }
 }

packages/manager/modules/pci/src/components/project/flavor-billing/flavor-billing.html

@@ -8,10 +8,10 @@
         data-variant="light"
         data-on-change="$ctrl.selectBilling(modelValue)"
         data-disabled="$ctrl.disabled && !$ctrl.monthly">
-        <oui-select-picker-section data-ng-if="$ctrl.flavor">
+        <oui-select-picker-section data-ng-if="$ctrl.prices">
             <span
                 data-translate="pci_project_flavors_billing_price_monthly"
-                data-translate-values="{ price: ($ctrl.getPrice($ctrl.flavor.prices.monthly) | currency: $ctrl.flavor.prices.currencyCode) }">
+                data-translate-values="{ price: $ctrl.formatPrice($ctrl.prices.monthly) }">
             </span>
         </oui-select-picker-section>
     </oui-select-picker>
@@ -24,10 +24,10 @@
         data-variant="light"
         data-on-change="$ctrl.selectBilling(modelValue)"
         data-disabled="$ctrl.disabled && $ctrl.monthly">
-        <oui-select-picker-section data-ng-if="$ctrl.flavor">
+        <oui-select-picker-section data-ng-if="$ctrl.prices">
             <span
                 data-translate="pci_project_flavors_billing_price_hourly"
-                data-translate-values="{ price: ($ctrl.getPrice($ctrl.flavor.prices.hourly) | currency: $ctrl.flavor.prices.currencyCode) }">
+                data-translate-values="{ price: $ctrl.formatPrice($ctrl.prices.hourly) }">
             </span>
         </oui-select-picker-section>
     </oui-select-picker>