The partnershipInfoModal is used on multiple components. We now check…

… if the user can view/edit the relationship field on the modal.
CruGlobal · Jan 7, 2025 · ed08340 · ed08340
1 parent b9c90ce
commit ed08340
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/...ctDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx b/...ctDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.test.tsx
@@ -18,6 +18,11 @@ import {
   ContactDonorAccountsFragment,
   ContactDonorAccountsFragmentDoc,
 } from '../../ContactDonationsTab.generated';
+import { UserOrganizationAccountsQuery } from '../PartnershipInfo.generated';
+import {
+  organizationAccountsMock,
+  organizationAccountsWithCruSwitzerlandMock,
+} from '../PartnershipInfoMocks';
 import { EditPartnershipInfoModal } from './EditPartnershipInfoModal';
 
 jest.mock('notistack', () => ({
@@ -115,21 +120,29 @@ const newContactMock = gqlMock<ContactDonorAccountsFragment>(
 
 interface ComponentsProps {
   isNewContact?: boolean;
-  showRelationshipCode?: boolean;
+  includeCruSwitzerland?: boolean;
 }
 
 const Components = ({
   isNewContact = false,
-  showRelationshipCode = false,
+  includeCruSwitzerland = false,
 }: ComponentsProps) => (
   <LocalizationProvider dateAdapter={AdapterLuxon}>
     <TestRouter>
       <SnackbarProvider>
         <ThemeProvider theme={theme}>
-          <GqlMockedProvider onCall={mutationSpy}>
+          <GqlMockedProvider<{
+            UserOrganizationAccounts: UserOrganizationAccountsQuery;
+          }>
+            mocks={{
+              UserOrganizationAccounts: includeCruSwitzerland
+                ? organizationAccountsWithCruSwitzerlandMock
+                : organizationAccountsMock,
+            }}
+            onCall={mutationSpy}
+          >
             <EditPartnershipInfoModal
               contact={isNewContact ? newContactMock : contactMock}
-              showRelationshipCode={showRelationshipCode}
               handleClose={handleClose}
             />
           </GqlMockedProvider>
@@ -559,11 +572,11 @@ describe('EditPartnershipInfoModal', () => {
       ).not.toBeInTheDocument();
     });
 
-    it('should render relationshipCode', () => {
-      const { getByRole } = render(<Components showRelationshipCode />);
+    it('should render relationshipCode', async () => {
+      const { findByRole } = render(<Components includeCruSwitzerland />);
 
       expect(
-        getByRole('textbox', {
+        await findByRole('textbox', {
           name: 'Relationship Code',
         }),
       ).toBeInTheDocument();

diff --git a/...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx b/...ContactDonationsTab/PartnershipInfo/EditPartnershipInfoModal/EditPartnershipInfoModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import InfoIcon from '@mui/icons-material/InfoOutlined';
 import {
   Alert,
@@ -46,6 +46,8 @@ import { useAccountListId } from '../../../../../../hooks/useAccountListId';
 import { useApiConstants } from '../../../../../Constants/UseApiConstants';
 import Modal from '../../../../../common/Modal/Modal';
 import { ContactDonorAccountsFragment } from '../../ContactDonationsTab.generated';
+import { isApartOfSwitzerlandOrganization } from '../PartnershipInfo';
+import { useUserOrganizationAccountsQuery } from '../PartnershipInfo.generated';
 import { useUpdateContactPartnershipMutation } from './EditPartnershipInfoModal.generated';
 
 const ContactInputWrapper = styled(Box)(({ theme }) => ({
@@ -109,36 +111,44 @@ type Attributes = yup.InferType<typeof contactPartnershipSchema>;
 
 interface EditPartnershipInfoModalProps {
   contact: ContactDonorAccountsFragment;
-  showRelationshipCode: boolean;
   handleClose: () => void;
 }
 
 export const EditPartnershipInfoModal: React.FC<
   EditPartnershipInfoModalProps
-> = ({ contact, showRelationshipCode, handleClose }) => {
+> = ({ contact, handleClose }) => {
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
   const accountListId = useAccountListId();
   const constants = useApiConstants();
+  const { enqueueSnackbar } = useSnackbar();
   const { getLocalizedContactStatus, getLocalizedPledgeFrequency } =
     useLocalizedConstants();
 
   const phases = constants?.phases;
   const [showRemoveCommitmentWarning, setShowRemoveCommitmentWarning] =
     useState(false);
 
-  const { enqueueSnackbar } = useSnackbar();
+  const { data } = useUserOrganizationAccountsQuery();
+  const userOrganizationAccounts = data?.userOrganizationAccounts;
+
+  const showRelationshipCode = useMemo(
+    () => isApartOfSwitzerlandOrganization(userOrganizationAccounts),
+    [userOrganizationAccounts],
+  );
 
   const [updateContactPartnership, { loading: updating }] =
     useUpdateContactPartnershipMutation();
   const pledgeCurrencies = constants?.pledgeCurrency;
 
   const onSubmit = async (attributes: Attributes) => {
+    // Remove and just use "attributes" when the UpdateContact mutation operation is updated to include the relationshipCode
+    const { relationshipCode: _, ...newAttributes } = attributes;
     await updateContactPartnership({
       variables: {
         accountListId: accountListId ?? '',
         attributes: {
-          ...attributes,
+          ...newAttributes,
           pledgeStartDate: attributes.pledgeStartDate?.toISODate() ?? null,
           nextAsk: attributes.nextAsk?.toISODate() ?? null,
           primaryPersonId: attributes.primaryPersonId,

diff --git a/...omponents/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/PartnershipInfo.tsx b/...omponents/Contacts/ContactDetails/ContactDonationsTab/PartnershipInfo/PartnershipInfo.tsx
@@ -16,7 +16,10 @@ import { currencyFormat } from '../../../../../lib/intlFormat';
 import { HandshakeIcon } from '../../ContactDetailsHeader/ContactHeaderSection/HandshakeIcon';
 import { ContactDonorAccountsFragment } from '../ContactDonationsTab.generated';
 import { EditPartnershipInfoModal } from './EditPartnershipInfoModal/EditPartnershipInfoModal';
-import { useUserOrganizationAccountsQuery } from './PartnershipInfo.generated';
+import {
+  UserOrganizationAccountsQuery,
+  useUserOrganizationAccountsQuery,
+} from './PartnershipInfo.generated';
 
 export const SwitzerlandOrganizationName = 'Campus fuer Christus Switzerland';
 
@@ -68,6 +71,17 @@ interface PartnershipInfoProp {
   contact: ContactDonorAccountsFragment | null;
 }
 
+export const isApartOfSwitzerlandOrganization = (
+  userOrganizationAccounts?: UserOrganizationAccountsQuery['userOrganizationAccounts'],
+) => {
+  return (
+    userOrganizationAccounts?.some(
+      (organizationAccount) =>
+        organizationAccount.organization.name === SwitzerlandOrganizationName,
+    ) ?? false
+  );
+};
+
 export const PartnershipInfo: React.FC<PartnershipInfoProp> = ({ contact }) => {
   const { t } = useTranslation();
   const locale = useLocale();
@@ -81,11 +95,7 @@ export const PartnershipInfo: React.FC<PartnershipInfoProp> = ({ contact }) => {
   const userOrganizationAccounts = data?.userOrganizationAccounts;
 
   const showRelationshipCode = useMemo(
-    () =>
-      userOrganizationAccounts?.some(
-        (organizationAccount) =>
-          organizationAccount.organization.name === SwitzerlandOrganizationName,
-      ) ?? false,
+    () => isApartOfSwitzerlandOrganization(userOrganizationAccounts),
     [userOrganizationAccounts],
   );
 
@@ -269,7 +279,6 @@ export const PartnershipInfo: React.FC<PartnershipInfoProp> = ({ contact }) => {
       {contact && editPartnershipModalOpen ? (
         <EditPartnershipInfoModal
           handleClose={() => setEditPartnershipModalOpen(false)}
-          showRelationshipCode={showRelationshipCode}
           contact={contact}
         />
       ) : null}