feat(msc-billing-tile): contact menu

ref: MANAGER-11620 Signed-off-by: Nicolas BAPTISTA <[email protected]>
ovh · Jul 24, 2023 · 661dcd1 · 661dcd1
1 parent da4071f
commit 661dcd1
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 44 deletions.
diff --git a/...es/super-components/components/msc-billing-tile/src/msc-billing-tile/msc-billing-tile.tsx b/...es/super-components/components/msc-billing-tile/src/msc-billing-tile/msc-billing-tile.tsx
@@ -6,7 +6,6 @@ import {
   Host,
   State,
   Fragment,
-  Listen,
 } from '@stencil/core';
 import {
   OdsThemeColorIntent,
@@ -85,20 +84,20 @@ export class MscBillingTile implements IMscBillingTile {
 
   @State() showTooltip = false; // will be removed with ODS-MENU
 
-  @Listen('click') // will be removed with ODS-MENU
-  handleDocumentClick(event: Event) {
-    const tooltipEl = this.host.shadowRoot?.querySelector('.menu-button');
-    if (tooltipEl && !tooltipEl.contains(event.target as Node)) {
-      this.showTooltip = !this.showTooltip;
-    }
-  }
+  @State() showTooltipContact = false; // will be removed with ODS-MENU
 
   handleTooltipToggle(event: Event) {
     // will be removed with ODS-MENU
     event.stopPropagation();
     this.showTooltip = !this.showTooltip;
   }
 
+  handleTooltipToggleContact(event: Event) {
+    // will be removed with ODS-MENU
+    event.stopPropagation();
+    this.showTooltipContact = !this.showTooltipContact;
+  }
+
   private i18nInstance: i18n;
 
   componentWillLoad() {
@@ -146,7 +145,6 @@ export class MscBillingTile implements IMscBillingTile {
       .get(`${this.servicePath}/serviceInfos`)
       .then((response) => {
         const { data } = response;
-        console.log(`${this.servicePath}/serviceInfos`, data);
         this.contactAdmin = data.contactAdmin;
         this.contactBilling = data.contactBilling;
         this.contactTech = data.contactTech;
@@ -372,8 +370,9 @@ export class MscBillingTile implements IMscBillingTile {
       return (
         <>
           <div>
-            <div class="menu-button">
+            <div class="menu-button menu-button-renew">
               <osds-button
+                onClick={(event: Event) => this.handleTooltipToggle(event)}
                 type={OdsButtonType.button}
                 variant={OdsButtonVariant.stroked}
                 color={OdsThemeColorIntent.primary}
@@ -529,6 +528,90 @@ export class MscBillingTile implements IMscBillingTile {
       }
     };
 
+    const ContactContent = () => {
+      const getMenuLink = () => {
+        return (
+          <div class="tooltiplinks">
+            <osds-link
+              href={`https://www.ovh.com/manager/#/dedicated/contacts/services?serviceName=${this.getServiceName()}`}
+              color={OdsThemeColorIntent.primary}
+            >
+              {this.getTranslation(
+                'manager_billing_subscription_contacts_management',
+              )}
+            </osds-link>
+            <osds-link href={``} color={OdsThemeColorIntent.primary}>
+              {this.getTranslation(
+                'billing_services_actions_menu_change_owner',
+              )}
+              <osds-icon
+                class="link-icon"
+                size={OdsIconSize.xxs}
+                name={OdsIconName.EXTERNAL_LINK}
+                color={OdsThemeColorIntent.primary}
+              />
+            </osds-link>
+            <osds-link href={``} color={OdsThemeColorIntent.primary}>
+              {this.getTranslation(
+                'billing_services_actions_menu_configuration_update_owner',
+              )}
+            </osds-link>
+          </div>
+        );
+      };
+
+      return (
+        <>
+          <div class="menu-button menu-button-contact">
+            <osds-button
+              onClick={(event: Event) => this.handleTooltipToggleContact(event)}
+              type={OdsButtonType.button}
+              variant={OdsButtonVariant.stroked}
+              color={OdsThemeColorIntent.primary}
+              circle
+            >
+              <osds-icon
+                name="ellipsis-vertical"
+                size="xs"
+                color={OdsThemeColorIntent.primary}
+              />
+            </osds-button>
+            {this.showTooltipContact && (
+              <div class="tooltip">
+                <div class="tooltiptext">{getMenuLink()}</div>
+                <slot />
+              </div>
+            )}
+          </div>
+          <osds-text
+            class="tile-description"
+            level={OdsThemeTypographyLevel.body}
+            size={OdsThemeTypographySize._200}
+            color={OdsThemeColorIntent.default}
+          >
+            <div>
+              {this.contactAdmin}{' '}
+              {this.getTranslation(
+                'manager_billing_subscription_contacts_admin',
+              )}
+            </div>
+            <div>
+              {this.contactTech}{' '}
+              {this.getTranslation(
+                'manager_billing_subscription_contacts_tech',
+              )}
+            </div>
+            <div>
+              {this.contactBilling}{' '}
+              {this.getTranslation(
+                'manager_billing_subscription_contacts_billing',
+              )}
+            </div>
+          </osds-text>
+        </>
+      );
+    };
+
     const content = (
       <osds-tile
         class="msc-ods-tile"
@@ -623,31 +706,8 @@ export class MscBillingTile implements IMscBillingTile {
           >
             {this.getTranslation('manager_billing_subscription_contacts')}
           </osds-text>
-          <osds-text
-            class="tile-description"
-            level={OdsThemeTypographyLevel.body}
-            size={OdsThemeTypographySize._200}
-            color={OdsThemeColorIntent.default}
-          >
-            <div>
-              {this.contactAdmin}{' '}
-              {this.getTranslation(
-                'manager_billing_subscription_contacts_admin',
-              )}
-            </div>
-            <div>
-              {this.contactTech}{' '}
-              {this.getTranslation(
-                'manager_billing_subscription_contacts_tech',
-              )}
-            </div>
-            <div>
-              {this.contactBilling}{' '}
-              {this.getTranslation(
-                'manager_billing_subscription_contacts_billing',
-              )}
-            </div>
-          </osds-text>
+          <div>{ContactContent()}</div>
+          {/* removed link using menu
           <osds-link
             data-tracking={this.dataTracking}
             color={OdsThemeColorIntent.primary}
@@ -663,7 +723,8 @@ export class MscBillingTile implements IMscBillingTile {
               name={OdsIconName.ARROW_RIGHT}
               color={OdsThemeColorIntent.primary}
             />
-          </osds-link>
+            </osds-link>
+            */}
         </div>
       </osds-tile>
     );

diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_de_DE.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_de_DE.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "Dienstdetails anzeigen",
   "billing_services_actions_menu_commit": "Meine Abonnementlaufzeit verwalten",
   "billing_services_actions_menu_commit_cancel": "Abonnementbestellung mit fester Laufzeit stornieren",
-  "billing_services_actions_menu_resiliate_my_engagement": "Meine Vertragsbindung kündigen"
+  "billing_services_actions_menu_resiliate_my_engagement": "Meine Vertragsbindung kündigen",
+  "billing_services_actions_menu_change_owner": "Inhaber ändern",
+  "billing_services_actions_menu_configuration_update_owner": "Angaben des Inhabers aktualisieren"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_en_GB.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_en_GB.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "View service details",
   "billing_services_actions_menu_commit": "Manage my commitment",
   "billing_services_actions_menu_commit_cancel": "Cancel subscription request",
-  "billing_services_actions_menu_resiliate_my_engagement": "Cancel subscription"
+  "billing_services_actions_menu_resiliate_my_engagement": "Cancel subscription",
+  "billing_services_actions_menu_change_owner": "Change owner",
+  "billing_services_actions_menu_configuration_update_owner": "Refresh holder information"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_es_ES.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_es_ES.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "Ver el detalle del servicio",
   "billing_services_actions_menu_commit": "Gestionar mi compromiso de permanencia",
   "billing_services_actions_menu_commit_cancel": "Cancelar la solicitud de contratación con compromiso de permanencia",
-  "billing_services_actions_menu_resiliate_my_engagement": "Cancelar mi compromiso"
+  "billing_services_actions_menu_resiliate_my_engagement": "Cancelar mi compromiso",
+  "billing_services_actions_menu_change_owner": "Cambiar de propietario",
+  "billing_services_actions_menu_configuration_update_owner": "Actualizar la información del propietario"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_fr_CA.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_fr_CA.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_resiliate_cancel": "Annuler la résiliation du service",
   "billing_services_actions_menu_see_dashboard": "Voir le détail du service",
   "billing_services_actions_menu_commit": "Gérer mon engagement",
-  "billing_services_actions_menu_commit_cancel": "Annuler la demande d'engagement"
+  "billing_services_actions_menu_commit_cancel": "Annuler la demande d'engagement",
+  "billing_services_actions_menu_change_owner": "Changer de propriétaire",
+  "billing_services_actions_menu_configuration_update_owner": "Actualiser les informations du propriétaire"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_fr_FR.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_fr_FR.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_resiliate_cancel": "Annuler la résiliation du service",
   "billing_services_actions_menu_see_dashboard": "Voir le détail du service",
   "billing_services_actions_menu_commit": "Gérer mon engagement",
-  "billing_services_actions_menu_commit_cancel": "Annuler la demande d'engagement"
+  "billing_services_actions_menu_commit_cancel": "Annuler la demande d'engagement",
+  "billing_services_actions_menu_change_owner": "Changer de propriétaire",
+  "billing_services_actions_menu_configuration_update_owner": "Actualiser les informations du propriétaire"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_it_IT.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_it_IT.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "Mostra i dettagli del server",
   "billing_services_actions_menu_commit": "Gestisci il tuo impegno contrattuale",
   "billing_services_actions_menu_commit_cancel": "Annulla la richiesta di sottoscrizione di un impegno contrattuale",
-  "billing_services_actions_menu_resiliate_my_engagement": "Rescindi l’impegno contrattuale"
+  "billing_services_actions_menu_resiliate_my_engagement": "Rescindi l’impegno contrattuale",
+  "billing_services_actions_menu_change_owner": "Modifica proprietario",
+  "billing_services_actions_menu_configuration_update_owner": "Aggiorna le informazioni del proprietario"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_pl_PL.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_pl_PL.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "Wyświetl szczegółowe informacje o usłudze",
   "billing_services_actions_menu_commit": "Zarządzanie usługą z opcją umowy terminowej",
   "billing_services_actions_menu_commit_cancel": "Anuluj zamówienie usługi z opcją umowy terminowej",
-  "billing_services_actions_menu_resiliate_my_engagement": "Rezygnacja z umowy terminowej"
+  "billing_services_actions_menu_resiliate_my_engagement": "Rezygnacja z umowy terminowej",
+  "billing_services_actions_menu_change_owner": "Zmień właściciela",
+  "billing_services_actions_menu_configuration_update_owner": "Aktualizuj dane właściciela"
 }
diff --git a/packages/super-components/components/msc-billing-tile/src/translations/Messages_pt_PT.json b/packages/super-components/components/msc-billing-tile/src/translations/Messages_pt_PT.json
@@ -50,5 +50,7 @@
   "billing_services_actions_menu_see_dashboard": "Ver os detalhes do serviço",
   "billing_services_actions_menu_commit": "Gerir o meu compromisso",
   "billing_services_actions_menu_commit_cancel": "Anular o pedido de compromisso",
-  "billing_services_actions_menu_resiliate_my_engagement": "Rescindir o meu compromisso"
+  "billing_services_actions_menu_resiliate_my_engagement": "Rescindir o meu compromisso",
+  "billing_services_actions_menu_change_owner": "Alterar titular",
+  "billing_services_actions_menu_configuration_update_owner": "Atualizar as informações do titular"
 }