feat(web-office): add license user guides

ref:MANAGER-16544 Signed-off-by: stif59100 <[email protected]>
ovh · Jan 8, 2025 · 5a85803 · 5a85803
1 parent d8de1f8
commit 5a85803
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/packages/manager/apps/web-office/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/web-office/public/translations/dashboard/Messages_fr_FR.json
@@ -3,5 +3,6 @@
   "error_service": "No services info",
   "microsoft_office_dashboard_consumption": "Consommation",
   "microsoft_office_dashboard_licences": "Licences",
+  "microsoft_office_dashboard_guides": "Consulter nos guides en ligne",
   "back_link": "Retour à la liste"
 }
diff --git a/packages/manager/apps/web-office/public/translations/dashboard/users/Messages_fr_FR.json b/packages/manager/apps/web-office/public/translations/dashboard/users/Messages_fr_FR.json
@@ -14,5 +14,6 @@
   "dashboard_users_status_unconfigured": "Non configuré",
   "dashboard_users_action_user_change_password": "Changer le mot de passe",
   "dashboard_users_action_user_edit": "Editer le compte",
-  "dashboard_users_action_user_delete": "Supprimer le compte"
+  "dashboard_users_action_user_delete": "Supprimer le compte",
+  "dashboard_users_order_button_licenses": "Commander plus de licenses"
 }
diff --git a/packages/manager/apps/web-office/src/guides.constants.ts b/packages/manager/apps/web-office/src/guides.constants.ts
@@ -22,6 +22,7 @@ export interface Guide {
 }
 
 const helpRoot = 'https://docs.ovh.com/';
+const csmRoot = 'https://help.ovhcloud.com/csm/';
 
 export const WEB_OFFICE_ONBOARDING_1: GuideLinks = {
   FR: `${helpRoot}fr/microsoft-collaborative-solutions/commander-et-gerer-un-groupe-de-licences-office-365-ovh/`,
@@ -58,6 +59,23 @@ export const WEB_OFFICE_ONBOARDING_3: GuideLinks = {
   FR: `${helpRoot}fr/microsoft-collaborative-solutions/office365-proplus-bureau-a-distance/`,
 };
 
+export const WEB_OFFICE_GUIDES: GuideLinks = {
+  DEFAULT: `${csmRoot}en-ie-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053502`,
+  DE: `${csmRoot}de-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053520`,
+  ES: `${csmRoot}es-es-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053505`,
+  IE: `${csmRoot}en-ie-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053502`,
+  IT: `${csmRoot}it-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053519`,
+  NL: `${csmRoot}en-nl-documentation-web-cloud?id=kb_browse_cat&kb_id=e17b4f25551974502d4c6e78b7421955`,
+  PL: `${csmRoot}pl-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053522`,
+  PT: `${csmRoot}pt-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053509`,
+  GB: `${csmRoot}en-gb-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0041601`,
+  MA: `${csmRoot}fr-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053507`,
+  SN: `${csmRoot}fr-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053507`,
+  TN: `${csmRoot}fr-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053507`,
+  FR: `${csmRoot}fr-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053507`,
+  WE: `${csmRoot}en-ie-microsoft-office365-csp1?id=kb_article_view&sysparm_article=KB0053502`,
+};
+
 export const CTAS: Record<string, string> = {
   DEFAULT: 'https://ovhcloud.com/en/collaborative-tools/microsoft-365/',
   ASIA: 'https://ovhcloud.com/asia/collaborative-tools/microsoft-365/',
@@ -84,3 +102,14 @@ export const CTAS: Record<string, string> = {
   WE: 'https://ovhcloud.com/us-en/collaborative-tools/microsoft-365/',
   WS: 'https://ovhcloud.com/us-en/collaborative-tools/microsoft-365/',
 };
+
+export const GUIDES_LIST = {
+  office_guides: {
+    key: 'web-office_dashboard_guides',
+    url: WEB_OFFICE_GUIDES,
+  },
+};
+
+export default {
+  GUIDES_LIST,
+};
diff --git a/packages/manager/apps/web-office/src/pages/dashboard/index.tsx b/packages/manager/apps/web-office/src/pages/dashboard/index.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useParams, useResolvedPath } from 'react-router-dom';
-
-import { BaseLayout } from '@ovh-ux/manager-react-components';
+import {
+  BaseLayout,
+  GuideButton,
+  GuideItem,
+} from '@ovh-ux/manager-react-components';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { GUIDES_LIST } from '@/guides.constants';
 import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb';
 import { urls } from '@/routes/routes.constants';
 import TabsPanel from '@/components/layout-helpers/Dashboard/TabsPanel';
@@ -22,7 +27,8 @@ export default function DashboardPage() {
   const { serviceName } = useParams();
   const { t } = useTranslation('dashboard');
   const basePath = useResolvedPath('').pathname;
-
+  const context = useContext(ShellContext);
+  const { ovhSubsidiary } = context.environment.getUser();
   function computePathMatchers(routes: string[]) {
     return routes.map(
       (path) => new RegExp(path.replace(':serviceName', serviceName)),
@@ -44,8 +50,18 @@ export default function DashboardPage() {
     },
   ];
 
+  const guideItems: GuideItem[] = [
+    {
+      id: 1,
+      href: (GUIDES_LIST.office_guides.url[ovhSubsidiary] ||
+        GUIDES_LIST.office_guides.url.DEFAULT) as string,
+      target: '_blank',
+      label: t('microsoft_office_dashboard_guides'),
+    },
+  ];
   const header = {
     title: serviceName,
+    headerButton: <GuideButton items={guideItems} />,
   };
 
   return (

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/Users.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/Users.tsx
@@ -1,8 +1,17 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Datagrid, DatagridColumn } from '@ovh-ux/manager-react-components';
-import { ODS_ICON_NAME, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
-import { OdsIcon, OdsLink, OdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import {
+  OdsIcon,
+  OdsLink,
+  OdsText,
+  OdsButton,
+} from '@ovhcloud/ods-components/react';
 import { UserNativeType } from '@/api/users/type';
 import Loading from '@/components/Loading/Loading';
 import { useOfficeLicenseDetail, useOfficeUsers } from '@/hooks';
@@ -104,7 +113,11 @@ export default function Users() {
         <p>{t('dashboard_users_download_info')}</p>
         <strong>{t('dashboard_users_download_id')}</strong>
       </OdsText>
-
+      <OdsButton
+        label={t('dashboard_users_order_button_licenses')}
+        variant={ODS_BUTTON_VARIANT.outline}
+        className="block"
+      />
       {columns && (
         <Datagrid
           columns={columns.map((column) => ({