feat(web-office): add button order user or licences

ref:MANAGER-16542 Signed-off-by: stif59100 <[email protected]>
ovh · Jan 9, 2025 · 815030d · 815030d
1 parent 5a85803
commit 815030d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
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
@@ -15,5 +15,6 @@
   "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_order_button_licenses": "Commander plus de licenses"
+  "dashboard_users_order_button_licenses": "Commander plus de licenses",
+  "dashboard_users_order_button_users": "Ajouter un utilisateur"
 }
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
@@ -12,9 +12,14 @@ import {
   OdsText,
   OdsButton,
 } from '@ovhcloud/ods-components/react';
+import { useParams } from 'react-router-dom';
 import { UserNativeType } from '@/api/users/type';
 import Loading from '@/components/Loading/Loading';
-import { useOfficeLicenseDetail, useOfficeUsers } from '@/hooks';
+import {
+  useOfficeLicenseDetail,
+  useOfficeServiceType,
+  useOfficeUsers,
+} from '@/hooks';
 import { BadgeStatus } from '@/components/BadgeStatus';
 import { UserStateEnum } from '@/api/api.type';
 import ActionButtonUsers from './ActionButtonUsers.component';
@@ -28,6 +33,9 @@ export default function Users() {
     isLoading: isLoadingLicenceDetail,
   } = useOfficeLicenseDetail();
 
+  const { serviceName } = useParams();
+  const isPostpaidLicence = useOfficeServiceType(serviceName) === 'payAsYouGo';
+
   if (isLoadingUsers || isLoadingLicenceDetail) {
     return <Loading />;
   }
@@ -113,11 +121,18 @@ 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')}
+        data-testid="user-or-licenses-order-button"
+        label={
+          isPostpaidLicence
+            ? t('dashboard_users_order_button_users')
+            : t('dashboard_users_order_button_licenses')
+        }
         variant={ODS_BUTTON_VARIANT.outline}
         className="block"
       />
+
       {columns && (
         <Datagrid
           columns={columns.map((column) => ({

diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/__test__/Users.spec.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/__test__/Users.spec.tsx
@@ -5,11 +5,12 @@ import { render } from '@/utils/test.provider';
 import usersTranslation from '@/public/translations/dashboard/users/Messages_fr_FR.json';
 import { licensesMock, usersMock } from '@/api/_mock_';
 
-describe('Users page', () => {
-  vi.mock('@/hooks', () => {
+describe('Users page for payAsYouGo', () => {
+  vi.mock('@/hooks', async () => {
     return {
       useOfficeUsers: vi.fn(() => usersMock),
       useOfficeLicenseDetail: vi.fn(() => licensesMock),
+      useOfficeServiceType: vi.fn(() => 'payAsYouGo'),
     };
   });
 
@@ -19,4 +20,12 @@ describe('Users page', () => {
       await findByText(usersTranslation.dashboard_users_download_info),
     ).toBeVisible();
   });
+  it('Page should button order correctly', async () => {
+    const { getByTestId } = render(<Users />);
+    expect(await getByTestId('user-or-licenses-order-button')).toBeVisible();
+    const orderButton = getByTestId('user-or-licenses-order-button');
+    expect(orderButton).toBeInTheDocument();
+    expect(orderButton).toHaveAttribute('label', 'Ajouter un utilisateur');
+    expect(orderButton).toHaveAttribute('variant', 'outline');
+  });
 });