Refactor contact emails modal

apps/frontend/src/components/CopyEmailsModal.tsx

@@ -0,0 +1,83 @@
+import { EnvelopeClosedFillIcon } from "@navikt/aksel-icons";
+import { Button, CopyButton, Modal } from "@navikt/ds-react";
+import { useState } from "react";
+import * as React from "react";
+import { useQuery } from "react-query";
+
+import { getResourceById } from "../api/resourceApi";
+import type { ProductTeamResponse } from "../constants";
+import { TeamRole } from "../constants";
+
+export function CopyEmailsModal({
+  heading,
+  getEmailsCallback,
+}: {
+  heading: string;
+  getEmailsCallback: () => Promise<string>;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const contactEmailsQuery = useQuery({
+    queryKey: ["getContactEmails"],
+    queryFn: getEmailsCallback,
+    staleTime: 0,
+    enabled: open,
+  });
+
+  const emails = contactEmailsQuery.data ?? "";
+
+  return (
+    <>
+      <Button icon={<EnvelopeClosedFillIcon />} onClick={() => setOpen(true)} size="medium" variant="secondary">
+        {heading}
+      </Button>
+      <Modal header={{ heading }} onClose={() => setOpen(false)} open={open}>
+        <Modal.Body>
+          Hvis "Åpne e-postklient" knappen ikke fungerer bruk "Kopier e-poster" knappen og lim disse inn i din
+          e-postklient
+        </Modal.Body>
+        <Modal.Footer>
+          {emails.length > 0 && (
+            <>
+              <Button onClick={() => openEmailClient(emails)}>Åpne e-postklient</Button>
+              <CopyButton activeText="E-poster kopiert" copyText={emails} text="Kopier e-poster" />
+            </>
+          )}
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+function openEmailClient(emails: string) {
+  document.location.href = `mailto:${emails}`;
+}
+
+export async function findContactEmailForProductTeam(productTeam: ProductTeamResponse) {
+  if (productTeam.contactPersonIdent) {
+    const contactPerson = await getResourceById(productTeam.contactPersonIdent);
+    return contactPerson.email;
+  }
+
+  const contactAddress = productTeam.contactAddresses.find(({ type }) => type === "EPOST")?.address;
+  if (contactAddress) {
+    return contactAddress;
+  }
+
+  const teamLeader = productTeam.members.find((member) => member.roles.includes(TeamRole.LEAD));
+  if (teamLeader?.resource.email) {
+    return teamLeader.resource.email;
+  }
+
+  const productOwner = productTeam.members.find((member) => member.roles.includes(TeamRole.PRODUCT_OWNER));
+  if (productOwner?.resource.email) {
+    return productOwner.resource.email;
+  }
+
+  return "";
+}
+
+export async function findContactEmailForSeveralTeams(productTeams: ProductTeamResponse[]) {
+  const emails = await Promise.all(productTeams.map((productTeams) => findContactEmailForProductTeam(productTeams)));
+  return emails.filter((email) => email.length > 0).join("; ");
+}

apps/frontend/src/pages/membership/MembershipsPage.tsx

@@ -1,10 +1,9 @@
 import { css } from "@emotion/css";
-import { EnvelopeClosedFillIcon } from "@navikt/aksel-icons";
-import { Button, Heading, Label } from "@navikt/ds-react";
+import { Heading, Label } from "@navikt/ds-react";
 import intersection from "lodash/intersection";
 import uniqBy from "lodash/uniqBy";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
 import {
@@ -14,12 +13,12 @@ import {
   MemberExportForRole,
   MemberExportForTeam,
 } from "../../components/common/MemberExport";
+import { CopyEmailsModal } from "../../components/CopyEmailsModal";
 import type { Cluster, Member, ProductArea, ProductTeamResponse } from "../../constants";
 import { Status } from "../../constants";
 import { useAllClusters, useAllProductAreas, useAllTeams } from "../../hooks";
 import { convertToList, MembershipFilter } from "./MembershipFilter";
 import { MembershipTable } from "./MembershipTable";
-import { ModalContactMembers } from "./ModalContactMembers";
 import { UniqueMembershipTable } from "./UniqueMembershipTable";
 
 export type Membership = {
@@ -30,7 +29,6 @@ export type Membership = {
 };
 
 export function MembershipsPage() {
-  const [showContactMembersModal, setShowContactMembersModal] = useState<boolean>(false);
   const memberships = useGetMemberships();
   const filteredMemberships = applyMembershipFilter(memberships);
   const { showUniqueMemberships } = useGetParsedSearchParameters();
@@ -63,19 +61,15 @@ export function MembershipsPage() {
           `}
         >
           <ShowCorrectExportButton />
-          <Button
-            icon={<EnvelopeClosedFillIcon />}
-            onClick={() => setShowContactMembersModal(true)}
-            size="medium"
-            variant="secondary"
-          >
-            Kontakt alle medlemmer
-          </Button>
-          <ModalContactMembers
-            isOpen={showContactMembersModal}
-            memberships={filteredMemberships}
-            onClose={() => setShowContactMembersModal(false)}
-            title={"Kontakt alle medlemmer"}
+          <CopyEmailsModal
+            getEmailsCallback={async () =>
+              // This async/await is redundant. But it is included so the function will work with react-query, as elsewhere this callback must be async
+              await filteredMemberships
+                .map((membership) => membership.member.resource.email || "")
+                .filter((email) => email.length > 0)
+                .join("; ")
+            }
+            heading="Kontakt alle medlemmer"
           />
         </div>
       </div>