Create Reach and Org Type section for Partner

Author: rdonigian

src/scenes/Partners/Detail/PartnerDetail.graphql

@@ -78,4 +78,14 @@ fragment organizationDetails on Organization {
     canEdit
     value
   }
+  types {
+    canRead
+    canEdit
+    value
+  }
+  reach {
+    canRead
+    canEdit
+    value
+  }
 }

src/scenes/Partners/Detail/Tabs/Profile/PartnerDetailProfile.tsx

@@ -5,6 +5,7 @@ import { TabPanelContent } from '~/components/Tabs';
 import { EditablePartnerField } from '../../../Edit';
 import { PartnerDetailsFragment } from '../../PartnerDetail.graphql';
 import { PartnerContactSection } from './PartnerContactSection';
+import { PartnerOrgReachAndTypeSection } from './PartnerOrgReachAndTypeSection';
 import { PartnerTypesSection } from './PartnerTypesSection';
 
 interface Props {
@@ -35,6 +36,12 @@ export const PartnerDetailProfile = ({ partner, editPartner: edit }: Props) => (
           }
         />
       </Grid>
+      <Grid xs={12} md={6}>
+        <PartnerOrgReachAndTypeSection
+          partner={partner}
+          onEdit={() => edit(['organization.types', 'organization.reach'])}
+        />
+      </Grid>
     </Grid>
   </TabPanelContent>
 );

src/scenes/Partners/Detail/Tabs/Profile/PartnerOrgReachAndTypeSection.tsx

@@ -0,0 +1,75 @@
+import { Edit } from '@mui/icons-material';
+import { Stack, Tooltip } from '@mui/material';
+import {
+  OrganizationReachLabels,
+  OrganizationTypeLabels,
+} from '~/api/schema.graphql';
+import { canEditAny, labelFrom } from '~/common';
+import { ActionableSection } from '~/components/ActionableSection';
+import { IconButton } from '~/components/IconButton';
+import { PartnerDetailsFragment } from '../../PartnerDetail.graphql';
+import { DisplaySecuredList } from './PartnerTypesSection';
+
+interface PartnerOrgReachAndTypeProps {
+  partner?: PartnerDetailsFragment;
+  onEdit: () => void;
+  className?: string;
+}
+
+export const PartnerOrgReachAndTypeSection = ({
+  partner,
+  onEdit,
+}: PartnerOrgReachAndTypeProps) => {
+  const canEdit = canEditAny(
+    partner?.organization.value,
+    false,
+    'types',
+    'reach'
+  );
+
+  return (
+    <ActionableSection
+      title="Additional Information"
+      loading={!partner}
+      action={
+        <Tooltip title="Edit">
+          <span>
+            <IconButton
+              disabled={!canEdit}
+              onClick={onEdit}
+              loading={!partner}
+              size="small"
+            >
+              <Edit />
+            </IconButton>
+          </span>
+        </Tooltip>
+      }
+    >
+      <Stack
+        direction="row"
+        columnGap={4}
+        rowGap={3}
+        justifyContent="space-between"
+        flexWrap="wrap"
+        maxWidth={350}
+      >
+        <DisplaySecuredList
+          title="Organizational Types"
+          data={partner?.organization.value?.types}
+          labelBy={labelFrom(OrganizationTypeLabels)}
+          redacted={{ fieldDescription: `organizational types` }}
+        />
+        <DisplaySecuredList
+          title="Partner Reach"
+          data={partner?.organization.value?.reach}
+          labelBy={labelFrom(OrganizationReachLabels)}
+          redacted={{
+            fieldDescription: `partner's reach`,
+            width: `75%`,
+          }}
+        />
+      </Stack>
+    </ActionableSection>
+  );
+};

src/scenes/Partners/Detail/Tabs/Profile/PartnerTypesSection.tsx

@@ -75,7 +75,7 @@ export const PartnerTypesSection = ({
   );
 };
 
-const DisplaySecuredList = <T extends string>({
+export const DisplaySecuredList = <T extends string>({
   title,
   data,
   labelBy,

src/scenes/Partners/Edit/EditPartner.tsx

@@ -8,6 +8,8 @@ import {
   CoerceNonPrimitives,
   FinancialReportingTypeLabels,
   FinancialReportingTypeList,
+  OrganizationReachList,
+  OrganizationTypeList,
   PartnerTypeList,
   UpdateOrganization,
   UpdatePartner,
@@ -108,6 +110,24 @@ const fieldMapping = {
   'organization.acronym': ({ props }) => (
     <TextField {...props} label="Acronym" />
   ),
+  'organization.reach': ({ props }) => (
+    <EnumField
+      multiple
+      label="Reach"
+      options={OrganizationReachList}
+      layout="two-column"
+      {...props}
+    />
+  ),
+  'organization.types': ({ props }) => (
+    <EnumField
+      multiple
+      label="Types"
+      options={OrganizationTypeList}
+      layout="two-column"
+      {...props}
+    />
+  ),
 } satisfies PossibleFields;
 
 const decorators: Array<Decorator<PartnerFormValues>> = [
@@ -151,6 +171,8 @@ export const EditPartner = ({
         id: organization.id,
         name: organization.name.value,
         acronym: organization.acronym.value,
+        types: organization.types.value,
+        reach: organization.reach.value,
       },
     } satisfies PartnerFormValues;
   }, [partner]);