feat(web-domains): add subdomain and multisite on associated services cards

ref: DCE-3

Author: SBrendan

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/AssociatedServicesCards.spec.tsx

@@ -13,6 +13,20 @@ vi.mock('./Hosting', () => ({
   default: () => <div data-testid="hosting-component">Hosting Component</div>,
 }));
 
+vi.mock('./SubDomainsMultiSite', () => ({
+  default: () => (
+    <div data-testid="subdomains-multisite-component">
+      SubDomains MultiSite Component
+    </div>
+  ),
+}));
+
+vi.mock('@/domain/hooks/data/query', () => ({
+  useGetAssociatedHosting: vi.fn(() => ({
+    data: ['hosting1.com', 'hosting2.com'],
+  })),
+}));
+
 describe('AssociatedServicesCards component', () => {
   it('should render the component with title', () => {
     render(<AssociatedServicesCards serviceName="example.com" />, { wrapper });
@@ -38,12 +52,26 @@ describe('AssociatedServicesCards component', () => {
     expect(screen.getByText('Emails Component')).toBeInTheDocument();
   });
 
+  it('should render SubDomainsMultiSite component', () => {
+    render(<AssociatedServicesCards serviceName="example.com" />, { wrapper });
+
+    expect(
+      screen.getByTestId('subdomains-multisite-component'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('SubDomains MultiSite Component'),
+    ).toBeInTheDocument();
+  });
+
   it('should pass serviceName prop to child components', () => {
     render(<AssociatedServicesCards serviceName="test-domain.com" />, {
       wrapper,
     });
 
     expect(screen.getByTestId('hosting-component')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('subdomains-multisite-component'),
+    ).toBeInTheDocument();
     expect(screen.getByTestId('emails-component')).toBeInTheDocument();
   });
 });

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/AssociatedServicesCards.tsx

@@ -2,6 +2,8 @@ import { ManagerTile } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import Emails from './Emails';
 import Hosting from './Hosting';
+import SubDomainMultiSite from './SubDomainsMultiSite';
+import { useGetAssociatedHosting } from '@/domain/hooks/data/query';
 
 interface AssociatedServicesCardsProps {
   readonly serviceName: string;
@@ -11,13 +13,16 @@ export default function AssociatedServicesCards({
   serviceName,
 }: AssociatedServicesCardsProps) {
   const { t } = useTranslation(['domain']);
+
+  const { data: associatedHosting } = useGetAssociatedHosting(serviceName);
   return (
     <ManagerTile>
       <ManagerTile.Title>
         {t(`domain_tab_general_information_associated_services_title`)}
       </ManagerTile.Title>
       <ManagerTile.Divider />
       <Hosting serviceName={serviceName} />
+      <SubDomainMultiSite serviceNames={associatedHosting} />
       <Emails serviceName={serviceName} />
     </ManagerTile>
   );

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/Emails.spec.tsx

@@ -13,12 +13,12 @@ vi.mock('@/domain/hooks/data/query', () => ({
 
 describe('Emails component', () => {
   it('renders with MXPLAN service detected', async () => {
-    (useEmailService as jest.Mock).mockReturnValue({
+    vi.mocked(useEmailService).mockReturnValue({
       data: {
         serviceDetected: AssociatedEmailsServicesEnum.MXPLAN,
         data: 'mxplan-service-id',
       },
-    });
+    } as ReturnType<typeof useEmailService>);
 
     render(<Emails serviceName="example.com" />, { wrapper });
 
@@ -39,12 +39,12 @@ describe('Emails component', () => {
   });
 
   it('renders with ZIMBRA service detected', async () => {
-    (useEmailService as jest.Mock).mockReturnValue({
+    vi.mocked(useEmailService).mockReturnValue({
       data: {
         serviceDetected: AssociatedEmailsServicesEnum.ZIMBRA,
         data: 'zimbra-service-id',
       },
-    });
+    } as ReturnType<typeof useEmailService>);
 
     render(<Emails serviceName="example.com" />, { wrapper });
 
@@ -65,12 +65,12 @@ describe('Emails component', () => {
   });
 
   it('renders with default service detected', async () => {
-    (useEmailService as jest.Mock).mockReturnValue({
+    vi.mocked(useEmailService).mockReturnValue({
       data: {
-        serviceDetected: 'UNKNOWN_SERVICE',
+        serviceDetected: 'UNKNOWN_SERVICE' as AssociatedEmailsServicesEnum,
         data: 'unknown-service-id',
       },
-    });
+    } as ReturnType<typeof useEmailService>);
 
     render(<Emails serviceName="example.com" />, { wrapper });
 

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer.spec.tsx

@@ -2,7 +2,7 @@ import '@/common/setupTests';
 import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { wrapper } from '@/common/utils/test.provider';
 import FreeHostingDrawer from './FreeHostingDrawer';
 import { FreeHostingOptions } from './Hosting';
 import { TInitialOrderFreeHosting } from '@/domain/types/hosting';
@@ -141,12 +141,6 @@ vi.mock('../Card/PriceCard', () => ({
 }));
 
 describe('FreeHostingDrawer Component', () => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false },
-    },
-  });
-
   const mockOrderFreeHosting = vi.fn();
   const mockOnClose = vi.fn();
   const mockSetFreeHostingOptions = vi.fn();
@@ -187,11 +181,9 @@ describe('FreeHostingDrawer Component', () => {
   });
 
   const renderComponent = (props = {}) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        <FreeHostingDrawer {...defaultProps} {...props} />
-      </QueryClientProvider>,
-    );
+    return render(<FreeHostingDrawer {...defaultProps} {...props} />, {
+      wrapper,
+    });
   };
 
   describe('Drawer rendering', () => {
@@ -421,12 +413,10 @@ describe('FreeHostingDrawer Component', () => {
       };
 
       rerender(
-        <QueryClientProvider client={queryClient}>
-          <FreeHostingDrawer
-            {...defaultProps}
-            freeHostingOptions={updatedOptions}
-          />
-        </QueryClientProvider>,
+        <FreeHostingDrawer
+          {...defaultProps}
+          freeHostingOptions={updatedOptions}
+        />,
       );
 
       const validateButton = screen.getByTestId('button-default');

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer.tsx

@@ -19,17 +19,17 @@ import ActivationSection from './FreeHostingDrawer/ActivationSection';
 import LoadingState from './FreeHostingDrawer/LoadingState';
 
 interface FreeHostingDrawerProps {
-  serviceName: string;
-  isDrawerOpen: boolean;
-  freeHostingOptions: FreeHostingOptions;
-  isInitialOrderFreeHostingPending: boolean;
-  isOrderFreeHostingPending: boolean;
-  orderCartDetails: TInitialOrderFreeHosting;
-  setFreeHostingOptions: React.Dispatch<
+  readonly serviceName: string;
+  readonly isDrawerOpen: boolean;
+  readonly freeHostingOptions: FreeHostingOptions;
+  readonly isInitialOrderFreeHostingPending: boolean;
+  readonly isOrderFreeHostingPending: boolean;
+  readonly orderCartDetails: TInitialOrderFreeHosting;
+  readonly setFreeHostingOptions: React.Dispatch<
     React.SetStateAction<FreeHostingOptions>
   >;
-  onClose: () => void;
-  orderFreeHosting: UseMutateFunction<
+  readonly onClose: () => void;
+  readonly orderFreeHosting: UseMutateFunction<
     void,
     Error,
     {

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer/ActivationSection.tsx

@@ -14,10 +14,13 @@ import { TInitialOrderFreeHosting } from '@/domain/types/hosting';
 import Section from './Section';
 
 interface ActivationSectionProps {
-  isLoading: boolean;
-  freeHostingOptions: FreeHostingOptions;
-  orderCartDetails: TInitialOrderFreeHosting;
-  onCheckedChange: (key: keyof FreeHostingOptions, value: boolean) => void;
+  readonly isLoading: boolean;
+  readonly freeHostingOptions: FreeHostingOptions;
+  readonly orderCartDetails: TInitialOrderFreeHosting;
+  readonly onCheckedChange: (
+    key: keyof FreeHostingOptions,
+    value: boolean,
+  ) => void;
 }
 
 export default function ActivationSection({

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer/CheckboxCard.tsx

@@ -11,9 +11,12 @@ import { useTranslation } from 'react-i18next';
 import { FreeHostingOptions } from '../Hosting';
 
 interface CheckboxCardProps {
-  optionKey: keyof FreeHostingOptions;
-  translationKey: string;
-  onCheckedChange: (key: keyof FreeHostingOptions, value: boolean) => void;
+  readonly optionKey: keyof FreeHostingOptions;
+  readonly translationKey: string;
+  readonly onCheckedChange: (
+    key: keyof FreeHostingOptions,
+    value: boolean,
+  ) => void;
 }
 
 export default function CheckboxCard({

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer/DnsSection.tsx

@@ -5,7 +5,10 @@ import CheckboxCard from './CheckboxCard';
 import Section from './Section';
 
 interface DnsSectionProps {
-  onCheckedChange: (key: keyof FreeHostingOptions, value: boolean) => void;
+  readonly onCheckedChange: (
+    key: keyof FreeHostingOptions,
+    value: boolean,
+  ) => void;
 }
 
 export default function DnsSection({ onCheckedChange }: DnsSectionProps) {

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer/LoadingState.tsx

@@ -11,8 +11,8 @@ import {
 import { useTranslation } from 'react-i18next';
 
 interface LoadingStateProps {
-  isOpen: boolean;
-  onOpenChange: (detail: DrawerOpenChangeDetail) => void;
+  readonly isOpen: boolean;
+  readonly onOpenChange: (detail: DrawerOpenChangeDetail) => void;
 }
 
 export default function LoadingState({

packages/manager/apps/web-domains/src/domain/components/AssociatedServicesCards/FreeHostingDrawer/Section.tsx

@@ -2,15 +2,15 @@ import { Text, TEXT_PRESET } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 
 interface SectionProps {
-  title: string;
-  children: React.ReactNode;
+  readonly title: string;
+  readonly children: React.ReactNode;
 }
 
 export default function Section({ title, children }: SectionProps) {
   const { t } = useTranslation(['domain']);
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <Text preset={TEXT_PRESET.heading3}>{t(title)}</Text>
       {children}
     </div>