feat(hycu): add link to manage contacts

ref: MANAGER-15782 Signed-off-by: Paul Dickerson <[email protected]>
ovh · Nov 29, 2024 · e53642e · e53642e
1 parent 6dcda33
commit e53642e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/...nager/apps/dedicated/client/app/account/contacts/service/translations/Messages_fr_FR.json b/...nager/apps/dedicated/client/app/account/contacts/service/translations/Messages_fr_FR.json
@@ -35,6 +35,7 @@
   "account_contacts_service_category_NUTANIX": "Nutanix",
   "account_contacts_service_category_DEDICATED_CLUSTER": "3-AZ server",
   "account_contacts_service_category_PACK_SIP_TRUNK": "Packs SIP Trunk",
+  "account_contacts_service_category_HYCU": "HYCU",
   "account_contacts_service_contact_admin": "Contact administrateur",
   "account_contacts_service_contact_tech": "Contact technique",
   "account_contacts_service_contact_billing": "Contact facturation",

diff --git a/packages/manager/apps/dedicated/client/app/account/contacts/user-contacts.constants.js b/packages/manager/apps/dedicated/client/app/account/contacts/user-contacts.constants.js
@@ -24,6 +24,7 @@ export const AVAILABLE_SERVICES = [
   'LOGS',
   'NUTANIX',
   'DEDICATED_CLUSTER',
+  'HYCU',
 ];
 
 export default {

diff --git a/...u/src/pages/dashboard/general-information/BillingInformations/BillingInformationsTile.tsx b/...u/src/pages/dashboard/general-information/BillingInformations/BillingInformationsTile.tsx
@@ -2,11 +2,13 @@ import {
   DashboardTile,
   DateFormat,
   Description,
+  Links,
+  LinkType,
   useFormattedDate,
   useServiceDetails,
 } from '@ovh-ux/manager-react-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import {
   OsdsIcon,
   OsdsLink,
@@ -43,6 +45,15 @@ const BillingInformationsTile = ({ serviceName }: { serviceName: string }) => {
     { searchText: serviceName },
   ]);
 
+  const {
+    data: contactUrl,
+    isLoading: isLoadingContactUrl,
+  } = useNavigationGetUrl([
+    'dedicated',
+    '#/contacts/services',
+    { serviceName },
+  ]);
+
   const openTerminateModal = () =>
     navigate(
       urls.dashboard_terminate.replace(subRoutes.serviceName, serviceName),
@@ -100,17 +111,33 @@ const BillingInformationsTile = ({ serviceName }: { serviceName: string }) => {
           value: (
             <div className="flex flex-col gap-4">
               <div>
-                {isLoading
-                  ? Array.from({ length: 3 }).map((_, index) => (
-                      <OsdsSkeleton key={index} />
-                    ))
-                  : serviceDetails?.data.customer.contacts.map((contact) => (
+                {isLoading ? (
+                  <>
+                    <OsdsSkeleton />
+                    <OsdsSkeleton />
+                    <OsdsSkeleton />
+                  </>
+                ) : (
+                  <>
+                    {serviceDetails?.data.customer.contacts.map((contact) => (
                       <Description key={contact.type}>{`${
                         contact.customerCode
                       } ${t(
                         `hycu_dashboard_contact_type_${contact.type}`,
                       )}`}</Description>
                     ))}
+                  </>
+                )}
+                {isLoadingContactUrl ? (
+                  <OsdsSkeleton />
+                ) : (
+                  <Links
+                    href={(contactUrl as string) ?? '#'}
+                    type={LinkType.next}
+                    label={t('hycu_dashboard_field_label_manage_contacts')}
+                    className="mt-4"
+                  />
+                )}
               </div>
             </div>
           ),