feat(web): add contact management tab eligibility

ref: MANAGER-15829

Signed-off-by: Antony MARION <[email protected]>

packages/manager/apps/web/client/app/domain/contact/contact.module.js

@@ -0,0 +1,18 @@
+import routing from './contact.routing';
+import contactDashboardComponent from './dashboard/dashboard.component';
+import ContactService from './contact.service';
+
+const moduleName = 'ovhManagerWebDomainContact';
+
+angular
+  .module(moduleName, [
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+    'ui.router',
+  ])
+  .component('domainZoneDashboardContact', contactDashboardComponent)
+  .service('ContactService', ContactService)
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/apps/web/client/app/domain/contact/contact.routing.js

@@ -0,0 +1,16 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.domain.product.contact', {
+    url: '/contact-management',
+    views: {
+      domainView: {
+        component: 'domainZoneDashboardContact',
+      },
+    },
+    resolve: {
+      breadcrumb: /* @ngInject */ ($translate) =>
+        $translate.instant('contact_management'),
+      goBack: /* @ngInject */ ($state) => () =>
+        $state.go('app.domain.product.zone'),
+    },
+  });
+};

packages/manager/apps/web/client/app/domain/contact/contact.service.js

@@ -0,0 +1,12 @@
+export default class ContactService {
+  /* @ngInject */
+  constructor($http) {
+    this.$http = $http;
+  }
+
+  getServiceInfos(serviceName) {
+    return this.$http
+      .get(`/domain/${serviceName}/serviceInfos`)
+      .then(({ data }) => data);
+  }
+}

packages/manager/apps/web/client/app/domain/contact/dashboard/dashboard.component.js

@@ -0,0 +1,12 @@
+import controller from './dashboard.controller';
+import template from './dashboard.html';
+
+export default {
+  controller,
+  template,
+  bindings: {
+    goBack: '<',
+    domain: '<',
+    domainName: '<',
+  },
+};

packages/manager/apps/web/client/app/domain/contact/dashboard/dashboard.constants.js

@@ -0,0 +1,59 @@
+export const INFO_PROPERTIES = {
+  ORGANISATION: 'organisation',
+  CORPORATION_TYPE: 'corporationType',
+  NAMES: 'names',
+  FIRSTNAME: 'firstname',
+  NAME: 'name',
+  ADDRESS: 'address',
+  COMPLEMENTARY_ADDRESS: 'complementaryAddress',
+  ZIP: 'zip',
+  COUNTRY: 'city.country',
+  EMAIL: 'email',
+  PHONE: 'phone',
+  NATIONAL_IDENTIFICATION_NUMBER: 'nationalIdentifcationNumber',
+  NICHANDLE: 'nichandle',
+};
+
+export const INFO_PROPERTIES_ARRAY = [
+  {
+    name: INFO_PROPERTIES.ORGANISATION,
+    values: [INFO_PROPERTIES.ORGANISATION, INFO_PROPERTIES.CORPORATION_TYPE],
+  },
+  {
+    name: INFO_PROPERTIES.NAMES,
+    values: [INFO_PROPERTIES.FIRSTNAME, INFO_PROPERTIES.NAME],
+  },
+  {
+    name: INFO_PROPERTIES.ADDRESS,
+    values: [
+      INFO_PROPERTIES.ADDRESS,
+      INFO_PROPERTIES.COMPLEMENTARY_ADDRESS,
+      INFO_PROPERTIES.ZIP,
+      INFO_PROPERTIES.COUNTRY,
+    ],
+  },
+  {
+    name: INFO_PROPERTIES.EMAIL,
+    values: [INFO_PROPERTIES.EMAIL],
+  },
+  {
+    name: INFO_PROPERTIES.PHONE,
+    values: [INFO_PROPERTIES.PHONE],
+  },
+  {
+    name: INFO_PROPERTIES.NATIONAL_IDENTIFICATION_NUMBER,
+    values: [INFO_PROPERTIES.NATIONAL_IDENTIFICATION_NUMBER],
+  },
+  {
+    name: INFO_PROPERTIES.NICHANDLE,
+    values: [INFO_PROPERTIES.NICHANDLE],
+  },
+];
+
+export const LEGAL_FORM_INDIVIDUAL = 'individual';
+
+export default {
+  INFO_PROPERTIES,
+  LEGAL_FORM_INDIVIDUAL,
+  INFO_PROPERTIES_ARRAY,
+};

packages/manager/apps/web/client/app/domain/contact/dashboard/dashboard.controller.js

@@ -0,0 +1,67 @@
+import {
+  INFO_PROPERTIES,
+  INFO_PROPERTIES_ARRAY,
+  LEGAL_FORM_INDIVIDUAL,
+} from './dashboard.constants';
+
+export default class DomainContactDashboardCtrl {
+  /* @ngInject */
+  constructor(coreConfig, Domain, Alerter, $translate) {
+    this.coreConfig = coreConfig;
+    this.DomainService = Domain;
+    this.Alerter = Alerter;
+    this.user = this.coreConfig.getUser();
+    this.hideAdminDescription = true;
+    this.$translate = $translate;
+    this.loading = true;
+    this.INFO_PROPERTIES = INFO_PROPERTIES;
+    this.LEGAL_FORM_INDIVIDUAL = LEGAL_FORM_INDIVIDUAL;
+    this.infoProperties = INFO_PROPERTIES_ARRAY;
+  }
+
+  $onInit() {
+    this.DomainService.getServiceInfo(this.domainName)
+      .then((data) => {
+        this.domainInfos = data;
+        this.isNicAdmin = this.user.nichandle === this.domainInfos.contactAdmin;
+      })
+      .catch((error) => {
+        const errorMessage = error.data?.message || error.data;
+        this.Alerter.error(
+          [
+            this.$translate.instant(
+              'domain_tab_CONTACT_description_error_message',
+            ),
+            errorMessage ? `(${errorMessage})` : '',
+          ].join(' '),
+          'dashboardContact',
+        );
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  }
+
+  toggleAdminDescription() {
+    this.hideAdminDescription = !this.hideAdminDescription;
+  }
+
+  getDisplayedField(infoProperty) {
+    const handleNestedProp = (user, value) => {
+      return value === 'city.country'
+        ? this.user.city.country
+        : this.user[value];
+    };
+    return infoProperty.values
+      .map((prop) => handleNestedProp(this.user, prop))
+      .join(' ');
+  }
+
+  showContactInfo(infoProperty) {
+    return (
+      (infoProperty.name === this.INFO_PROPERTIES.ORGANISATION &&
+        this.user.legalform !== this.LEGAL_FORM_INDIVIDUAL) ||
+      infoProperty.name !== this.INFO_PROPERTIES.ORGANISATION
+    );
+  }
+}

packages/manager/apps/web/client/app/domain/contact/dashboard/dashboard.html

@@ -0,0 +1,122 @@
+<div data-ui-view>
+    <h1 data-translate="domain_tab_CONTACT_title"></h1>
+    <div class="text-center" data-ng-if="$ctrl.loading">
+        <oui-spinner data-size="l"></oui-spinner>
+    </div>
+
+    <div data-ovh-alert="dashboardContact"></div>
+
+    <div data-ng-if="!$ctrl.loading">
+        <div class="row">
+            <strong data-translate="domain_tab_CONTACT_header"></strong>
+            <p data-translate="domain_tab_CONTACT_description"></p>
+        </div>
+
+        <div class="row d-flex align-items-stretch">
+            <oui-tile
+                class="col-md-3 m-1 align-self-stretch"
+                data-heading="{{:: 'domain_tab_CONTACT_owner' | translate }}"
+            >
+                <p data-translate="domain_tab_CONTACT_description_owner"></p>
+                <oui-button
+                    data-ng-if="$ctrl.isNicAdmin"
+                    data-variant="link"
+                    data-icon-right="oui-icon-arrow-right"
+                    class="mb-2"
+                >
+                    <span data-translate="domain_tab_CONTACT_modify"></span>
+                </oui-button>
+            </oui-tile>
+            <oui-tile
+                class="col-md-3 m-1 align-self-stretch"
+                data-heading="{{:: 'domain_tab_CONTACT_admin' | translate }}"
+            >
+                <div data-ng-if="$ctrl.isNicAdmin">
+                    <span
+                        data-ng-repeat="infoProperty in $ctrl.infoProperties track by $index"
+                        data-ng-if="::$ctrl.showContactInfo(infoProperty)"
+                        class="d-block font-weight-bold"
+                        data-ng-bind="::$ctrl.getDisplayedField(infoProperty)"
+                    ></span>
+                </div>
+
+                <oui-button
+                    data-variant="link"
+                    data-icon-right="{{$ctrl.hideAdminDescription?'oui-icon-chevron-down':'oui-icon-chevron-up'}}"
+                    class="mb-2"
+                    data-ng-click="$ctrl.toggleAdminDescription()"
+                >
+                    <span data-translate="domain_tab_CONTACT_view_more"></span>
+                </oui-button>
+
+                <p
+                    data-ng-hide="$ctrl.hideAdminDescription"
+                    data-translate="domain_tab_CONTACT_description_admin"
+                ></p>
+
+                <oui-button
+                    data-ng-if="$ctrl.isNicAdmin"
+                    data-variant="link"
+                    data-icon-right="oui-icon-arrow-right"
+                    class="mb-2"
+                >
+                    <span data-translate="domain_tab_CONTACT_modify"></span>
+                </oui-button>
+            </oui-tile>
+            <oui-tile
+                class="col-md-3 m-1 align-self-stretch"
+                data-heading="{{:: 'domain_tab_CONTACT_technical' | translate }}"
+            >
+                <div
+                    data-ng-if="$ctrl.domainInfos.contactTech === $ctrl.user.nichandle"
+                >
+                    <span
+                        data-ng-repeat="infoProperty in $ctrl.infoProperties track by $index"
+                        data-ng-if="::$ctrl.showContactInfo(infoProperty)"
+                        class="d-block font-weight-bold"
+                        data-ng-bind="::$ctrl.getDisplayedField(infoProperty)"
+                    ></span>
+                </div>
+
+                <p
+                    data-translate="domain_tab_CONTACT_description_technical"
+                ></p>
+                <oui-button
+                    data-ng-if="$ctrl.domainInfos.contactTech === $ctrl.user.nichandle"
+                    data-variant="link"
+                    data-icon-right="oui-icon-arrow-right"
+                    class="mb-2"
+                >
+                    <span data-translate="domain_tab_CONTACT_modify"></span>
+                </oui-button>
+            </oui-tile>
+        </div>
+    </div>
+    <div class="row">
+        <oui-tile
+            class="col-md-3 m-1 align-self-stretch"
+            data-heading="{{:: 'domain_tab_CONTACT_billing' | translate }}"
+        >
+            <div
+                data-ng-if="$ctrl.domainInfos.contactBilling === $ctrl.user.nichandle"
+            >
+                <span
+                    data-ng-repeat="infoProperty in $ctrl.infoProperties track by $index"
+                    data-ng-if="::$ctrl.showContactInfo(infoProperty)"
+                    class="d-block font-weight-bold"
+                    data-ng-bind="::$ctrl.getDisplayedField(infoProperty)"
+                ></span>
+            </div>
+
+            <p data-translate="domain_tab_CONTACT_description_billing"></p>
+            <oui-button
+                data-ng-if="$ctrl.domainInfos.contactBilling === $ctrl.user.nichandle"
+                data-variant="link"
+                data-icon-right="oui-icon-arrow-right"
+                class="mb-2"
+            >
+                <span data-translate="domain_tab_CONTACT_modify"></span>
+            </oui-button>
+        </oui-tile>
+    </div>
+</div>

packages/manager/apps/web/client/app/domain/contact/translations/Messages_fr_FR.json

@@ -0,0 +1,16 @@
+{
+  "domain_tab_CONTACT_title": "Gérer les contacts titulaires",
+  "domain_tab_CONTACT_modify": "Modifier",
+  "domain_tab_CONTACT_owner": "Titulaire",
+  "domain_tab_CONTACT_admin": "Administrateur",
+  "domain_tab_CONTACT_technical": "Technique",
+  "domain_tab_CONTACT_billing": "Facturation",
+  "domain_tab_CONTACT_header": "Chaque nom de domaine est lié à 4 types de contacts. Chacun est associé à un identifiant client et dispose d'autorisations spécifiques.",
+  "domain_tab_CONTACT_description": "Seuls les rôles \"Titulaire\" et \"Administrateur\" peuvent modifier ici les contacts associés au nom de domaine concerné. Toute mise à jour est immédiate.",
+  "domain_tab_CONTACT_description_owner": "Entité ou personne titulaire du domaine et responsable de son utilisation. Il peut devenir administrateur par le biais d’une procédure.",
+  "domain_tab_CONTACT_description_admin": "Il gère les aspects juridiques et administratifs d'un domaine. Il possède des droits de modification sur l'ensemble des contacts. Il peut gérer les aspects contractuels liés au domaine comme le renouvellement ou la résiliation.",
+  "domain_tab_CONTACT_description_technical": "Il gère les aspects techniques d'un service. Il est responsable de la définition des serveurs DNS autoritaires.",
+  "domain_tab_CONTACT_description_billing": "Entité ou personne titulaire du domaine et responsable de son utilisation. Il peut devenir administrateur par le biais d’une procédure.",
+  "domain_tab_CONTACT_description_error_message": "Une erreur est apparue",
+  "domain_tab_CONTACT_view_more": "Voir plus"
+}

packages/manager/apps/web/client/app/domain/dashboard/domain.html

@@ -138,6 +138,11 @@
                 data-href="{{ '#/email_domain/' + ctrlDomain.domain.name + '/mailing-list' }}"
                 ><span data-translate="domain_tab_emails"></span>
             </oui-header-tabs-item>
+            <oui-header-tabs-item
+                data-state="app.domain.product.contact"
+                data-state-params="ctrlDomain.$stateParams"
+                ><span data-translate="domain_tab_contact"></span>
+            </oui-header-tabs-item>
         </oui-header-tabs>
     </div>
 

packages/manager/apps/web/client/app/domain/dashboard/domain.module.js

@@ -7,6 +7,7 @@ import historyModule from '../../dns-zone/history/history.module';
 import anycast from '../anycast';
 import domainDnsModify from '../dns-modify/domain-dns-modify.module';
 import domainDns from '../dns/domain-dns.module';
+import contact from '../contact/contact.module';
 import dnssec from '../dnssec/dnssec.module';
 import dynhost from '../dynhost/dynhost.module';
 import emailObfuscation from '../email-obfuscation/index';
@@ -25,6 +26,7 @@ const moduleName = 'ovhManagerWebDomainModule';
 angular
   .module(moduleName, [
     anycast,
+    contact,
     domainDns,
     dnssec,
     dnsZone,

packages/manager/apps/web/client/app/domain/dashboard/translations/Messages_fr_FR.json

@@ -826,6 +826,7 @@
   "domain_dashboard_recommended_hosting_label": "-{{ reduction }} sur votre Hébergement {{ type }} pour le Black Friday.",
   "domain_dashboard_recommended_hosting_discover": "Découvrir les solutions",
   "domain_tab_emails": "E-mails et mailing-lists",
+  "domain_tab_contact": "Gérer les contacts",
   "domain_dashboard_general_information_domain_delete_at_expiration": "Résiliation demandée",
   "domain_dashboard_general_information_domain_expired": "Résilié",
   "domain_dashboard_general_information_domain_manualPayment": "Renouvellement manuel",

packages/manager/apps/web/client/app/domain/zone/translations/Messages_fr_FR.json

@@ -1,5 +1,6 @@
 {
   "domain_tab_ZONE_detach": "Délier",
   "domain_zone": "Zone DNS",
+  "contact_management": "Gérer les contacts",
   "zone_history": "Historique des zones"
 }