feat(pci.projects.project.crating): improve explanation and responsivity

Author: Jisay

packages/manager/modules/pci/src/projects/project/creating/creating.component.js

@@ -7,5 +7,6 @@ export default {
   bindings: {
     projectId: '<',
     onProjectCreated: '<',
+    projectOrder: '<',
   },
 };

packages/manager/modules/pci/src/projects/project/creating/creating.controller.js

@@ -1,3 +1,8 @@
+import EnvironmentService from '@ovh-ux/manager-config';
+import get from 'lodash/get';
+
+import { PCI_REDIRECT_URLS } from '../../../constants';
+
 import {
   SLIDE_ANIMATION_INTERVAL,
   SLIDE_IMAGES,
@@ -18,6 +23,11 @@ export default class ProjectCreatingCtrl {
       currentIndex: 0,
       list: SLIDE_IMAGES,
     };
+
+    this.supportUrl = get(
+      PCI_REDIRECT_URLS,
+      `${EnvironmentService.Environment.region}.support`,
+    );
   }
 
   startCreationPolling() {

packages/manager/modules/pci/src/projects/project/creating/creating.html

@@ -1,7 +1,7 @@
 <div class="pci-projects-creating h-100 overflow-auto">
-    <div class="container-fluid h-100">
+    <div class="container h-100">
         <div class="row minh-100 justify-content-md-center text-center">
-            <div class="col-md-7 p-5 bg-white minh-100 d-md-flex align-items-md-center">
+            <div class="col-lg-10 p-5 bg-white minh-100 d-md-flex align-items-md-center">
                 <div class="p-5 mx-auto">
                     <h1 class="oui-heading_4"
                         data-translate="pci_projects_project_creating_main_title">
@@ -11,6 +11,16 @@
                         data-translate="pci_projects_project_creating_secondary_title">
                     </h2>
 
+                    <div data-ng-if="$ctrl.projectOrder">
+                        <small class="d-block"
+                               data-translate="pci_projects_project_creating_explain1"
+                               data-translate-values="{ orderId: $ctrl.projectOrder.orderId, href: $ctrl.projectOrder.url }">
+                        </small>
+
+                        <small data-translate="pci_projects_project_creating_explain2"
+                               data-translate-values="{ href: $ctrl.supportUrl }"></small>
+                    </div>
+
                     <div class="position-relative">
                         <div class="img-slide-container position-absolute w-100">
                             <img class="img-responsive mx-auto"

packages/manager/modules/pci/src/projects/project/creating/creating.module.js

@@ -8,6 +8,7 @@ import 'angular-animate';
 
 import routing from './creating.routing';
 import component from './creating.component';
+import service from './creating.service';
 
 import './creating.scss';
 
@@ -23,6 +24,7 @@ angular
   ])
   .config(routing)
   .run(/* @ngTranslationsInject:json ./translations */)
-  .component('pciProjectCreating', component);
+  .component('pciProjectCreating', component)
+  .service('projectCreating', service);
 
 export default moduleName;

packages/manager/modules/pci/src/projects/project/creating/creating.routing.js

@@ -10,6 +10,12 @@ export default /* @ngInject */ ($stateProvider) => {
       resolve: {
         breadcrumb: () => null,
         onProjectCreated: /* @ngInject */ $state => () => $state.go('^'),
+        projectOrder: /* @ngInject */ (project, projectCreating) => {
+          if (project.orderId) {
+            return projectCreating.getOrderDetails(project.orderId);
+          }
+          return null;
+        },
       },
     });
 };

packages/manager/modules/pci/src/projects/project/creating/creating.service.js

@@ -0,0 +1,15 @@
+export default class ProjectCreation {
+  /* @ngInject */
+  constructor(OvhApiMeOrder) {
+    this.OvhApiMeOrder = OvhApiMeOrder;
+  }
+
+  getOrderDetails(orderId) {
+    return this.OvhApiMeOrder
+      .v6()
+      .get({
+        orderId,
+      })
+      .$promise;
+  }
+}

packages/manager/modules/pci/src/projects/project/creating/translations/Messages_fr_FR.json

@@ -1,4 +1,6 @@
 {
   "pci_projects_project_creating_main_title": "Vous êtes en route pour l’aventure Public Cloud",
-  "pci_projects_project_creating_secondary_title": "La création de votre projet est en cours"
+  "pci_projects_project_creating_secondary_title": "La création de votre projet est en cours",
+  "pci_projects_project_creating_explain1": "Pour finaliser la création de votre projet, veuillez effectuer le paiement du bon de commande <a href=\"{{ href }}\">{{ orderId }}</a>.",
+  "pci_projects_project_creating_explain2": "Si cette page est toujours présente plusieurs minutes après le paiement du bon de commande, merci de contacter <a href=\"{{ href }}\">notre service client</a>."
 }