HAI-1586 Change hanke contact data model (#370)

Change hanke contact data model

- Split sub contact name to first name and last name.
- Remove address information from contacts.
- sub contact phone is now mandatory.
- Sub contact form should be always visible (if contact is)
- You can add many sub contacts.

Additional: the ticket does not mention this but ytunnusTaiHetu was changed to just ytunnus. It is visible if contact is not a person.

Note: This commit does not fix / change everything that needs to be changed in yhteystieto page. For example, the styling of the page does not figma, but that task is not part of this task.

cypress/integration/E2E.spec.ts

@@ -76,7 +76,7 @@ const hankeMock: HankeDataDraft = {
       email: '[email protected]',
       puhelinnumero: '12341234',
       tyyppi: 'YKSITYISHENKILO',
-      ytunnusTaiHetu: 'tunnus',
+      ytunnus: 'tunnus',
     },
   ],
 };

public/mockServiceWorker.js

@@ -120,7 +120,7 @@ self.addEventListener('fetch', function (event) {
         console.warn(
           '[MSW] Successfully emulated a network error for the "%s %s" request.',
           request.method,
-          request.url
+          request.url,
         );
         return;
       }
@@ -131,9 +131,9 @@ self.addEventListener('fetch', function (event) {
 [MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        `${error.name}: ${error.message}`
+        `${error.name}: ${error.message}`,
       );
-    })
+    }),
   );
 });
 

src/domain/application/components/PreFilledContactSelect.tsx

@@ -24,7 +24,9 @@ const PreFilledContactSelect: React.FC<{
 
   const preFilledContactOptions: PreFilledContactOption[] = allHankeContacts.flatMap(
     (hankeContacts) =>
-      hankeContacts ? hankeContacts.map((contact) => ({ label: contact.nimi, value: contact })) : []
+      hankeContacts
+        ? hankeContacts.map((contact) => ({ label: contact.nimi, value: contact }))
+        : [],
   );
 
   function handlePreFilledContactChange(option: PreFilledContactOption | undefined) {
@@ -43,7 +45,7 @@ const PreFilledContactSelect: React.FC<{
         country: 'FI',
         email: value.email,
         phone: value.puhelinnumero || '',
-        registryKey: (isHankeContact(value) && value.ytunnusTaiHetu) || null,
+        registryKey: (isHankeContact(value) && value.ytunnus) || null,
         ovt: null,
         invoicingOperator: null,
         sapCustomerNumber: null,

src/domain/forms/components/Contact.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { Button, IconCross, IconPlusCircle, Tab, TabList, TabPanel, Tabs } from 'hds-react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ interface Props<T> {
   index?: number;
   onRemoveContact?: UseFieldArrayRemove;
   renderSubContact?: (subContactIndex: number, remove: UseFieldArrayRemove) => JSX.Element;
+  showInitialEmpty?: boolean;
   subContactPath: string;
   emptySubContact: unknown;
   children: React.ReactNode;
@@ -21,6 +22,7 @@ const Contact = <T,>({
   index,
   onRemoveContact,
   renderSubContact,
+  showInitialEmpty = false,
   subContactPath,
   emptySubContact,
   children,
@@ -39,6 +41,12 @@ const Contact = <T,>({
     appendSubContact(emptySubContact);
   }
 
+  useEffect(() => {
+    if (subContactFields.length === 0 && showInitialEmpty) {
+      addSubContact();
+    }
+  }, [subContactFields, showInitialEmpty]);
+
   const renderSubContacts = subContactFields.length > 0 && renderSubContact;
   const { tabRefs } = useSelectableTabs(subContactFields.length, { selectLastTabOnChange: true });
 

src/domain/hanke/edit/HankeForm.test.tsx

@@ -122,58 +122,60 @@ describe('HankeForm', () => {
   test('Yhteystiedot can be filled', async () => {
     const { user } = await setupYhteystiedotPage(<HankeFormContainer hankeTunnus="HAI22-1" />);
 
+    // Hanke owner
     await user.click(screen.getByRole('button', { name: /tyyppi/i }));
     await user.click(screen.getByText(/yritys/i));
-    fireEvent.change(screen.getByLabelText(/nimi/i), {
-      target: { value: 'Olli Omistaja' },
+
+    fireEvent.change(screen.getByTestId('omistajat.0.nimi'), {
+      target: { value: 'Omistaja Yritys' },
     });
-    fireEvent.change(screen.getByLabelText(/y-tunnus tai henkilötunnus/i), {
+    fireEvent.change(screen.getByLabelText(/y-tunnus/i), {
       target: { value: 'y-tunnus' },
     });
-    fireEvent.change(screen.getByLabelText(/katuosoite/i), {
-      target: { value: 'Testikuja 1' },
-    });
-    fireEvent.change(screen.getByLabelText(/postinumero/i), {
-      target: { value: '00000' },
-    });
-    fireEvent.change(screen.getByLabelText(/postitoimipaikka/i), {
-      target: { value: 'Testikaupunki' },
-    });
-    fireEvent.change(screen.getByLabelText(/sähköposti/i), {
+    fireEvent.change(screen.getByTestId('omistajat.0.email'), {
       target: { value: '[email protected]' },
     });
-    fireEvent.change(screen.getByLabelText(/puhelinnumero/i), {
-      target: { value: '0400000000' },
+    fireEvent.change(screen.getByTestId('omistajat.0.puhelinnumero'), {
+      target: { value: '0401234567' },
     });
 
-    expect(screen.queryByRole('group', { name: 'Yhteyshenkilö' })).not.toBeInTheDocument();
-    await user.click(screen.getByLabelText(/erillinen yhteyshenkilö/i));
-    expect(screen.getByRole('group', { name: 'Yhteyshenkilö' })).toBeInTheDocument();
-
-    fireEvent.change(screen.getAllByLabelText(/nimi/i)[1], {
-      target: { value: 'Testi Yhteyshenkilö' },
+    // Hanke owner contact person
+    fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.etunimi'), {
+      target: { value: 'Olli' },
+    });
+    fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.sukunimi'), {
+      target: { value: 'Omistaja' },
+    });
+    fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.email'), {
+      target: { value: '[email protected]' },
     });
-    fireEvent.change(screen.getAllByLabelText(/sähköposti/i)[1], {
-      target: { value: '[email protected]' },
+    fireEvent.change(screen.getByTestId('omistajat.0.alikontaktit.0.puhelinnumero'), {
+      target: { value: '0507654321' },
     });
 
-    await user.click(screen.getByText(/Rakennuttajan tiedot/i));
+    // Rakennuttaja
+    await user.click(screen.getByText(/rakennuttajan tiedot/i));
     await user.click(screen.getByText(/lisää rakennuttaja/i));
     expect(screen.getAllByText('Rakennuttaja')).toHaveLength(1);
 
-    await user.click(screen.getByText(/lisää yhteyshenkilö/i));
-    await user.click(screen.getByText(/lisää yhteyshenkilö/i));
-    expect(screen.getByRole('tablist').childElementCount).toBe(2);
+    await user.click(screen.getAllByRole('button', { name: /tyyppi/i })[1]);
+    await user.click(screen.getByText(/yksityishenkilö/i));
+    expect(screen.getAllByLabelText(/y-tunnus/i)[1]).toBeDisabled();
+
+    await user.click(screen.getAllByText(/lisää yhteyshenkilö/i)[1]);
+    await user.click(screen.getAllByText(/lisää yhteyshenkilö/i)[1]);
+    expect(screen.getAllByRole('tablist')[1].childElementCount).toBe(2); // many contacts can be added
+
+    await user.click(screen.getByText(/poista yhteyshenkilö/i));
+    expect(screen.queryByText(/poista yhteyshenkilö/i)).not.toBeInTheDocument(); // cannot remove last one
 
     await user.click(screen.getByText(/lisää rakennuttaja/i));
     expect(screen.getAllByText('Rakennuttaja')).toHaveLength(2);
-
     await user.click(screen.getAllByText(/poista rakennuttaja/i)[1]);
-    expect(screen.getAllByText('Rakennuttaja')).toHaveLength(1);
+    await user.click(screen.getByText(/poista rakennuttaja/i));
 
-    await user.click(screen.getByText(/poista yhteyshenkilö/i));
-    expect(screen.getByRole('tablist').childElementCount).toBe(1);
-    await user.click(screen.getByText(/poista yhteyshenkilö/i));
-    expect(screen.queryByText('Yhteyshenkilön tiedot')).not.toBeInTheDocument();
+    // Check Other types are present and clickable
+    await user.click(screen.getByText(/toteuttajan tiedot/i));
+    await user.click(screen.getByText(/muiden tahojen tiedot/i));
   });
 });