lib-user: Add DeactivatedGroup component for active membership with deactivated group

packages/lib-user/src/components/shared/GroupContainer/GroupContainer.js

@@ -16,9 +16,11 @@ import {
 } from '@hooks'
 
 import {
-  createPanoptesMembership
+  createPanoptesMembership,
+  deletePanoptesMembership
 } from '@utils'
 
+import DeactivatedGroup from './components/DeactivatedGroup'
 import { getUserGroupStatus } from './helpers/getUserGroupStatus'
 
 function deleteJoinTokenParam() {
@@ -59,6 +61,8 @@ function GroupContainer({
     isMutating: createGroupMembershipLoading,
     trigger: createGroupMembership
   } = useSWRMutation(membershipKey, createPanoptesMembership)
+  // define user_group membership delete mutation
+  const { trigger: deleteMembership, isMutating: deleteMembershipLoading } = useSWRMutation(membershipKey, deletePanoptesMembership)
   // extract user_group active membership
   const newGroupMembership = newGroupMembershipData?.memberships?.[0]
   const membership = newGroupMembership || membershipsData?.memberships?.[0]
@@ -133,6 +137,8 @@ function GroupContainer({
     joinToken
   })
 
+  const activeMembershipDeactivatedGroup = activeMembershipRole && groupError?.status === 404
+
   return (
     <>
       {showJoinNotification && (
@@ -144,7 +150,22 @@ function GroupContainer({
           toast
         />
       )}
-      {status ? (
+      {activeMembershipDeactivatedGroup ? (
+        <Layout>
+          <ContentBox
+            align='center'
+            direction='column'
+            justify='center'
+            pad='large'
+          >
+            <DeactivatedGroup
+              deleteMembership={deleteMembership}
+              deleteMembershipLoading={deleteMembershipLoading}
+              membershipId={activeMembership.id}
+            />
+          </ContentBox>
+        </Layout>
+      ) : status ? (
         <Layout>
           <ContentBox
             align='center'

packages/lib-user/src/components/shared/GroupContainer/components/DeactivatedGroup.js

@@ -0,0 +1,57 @@
+import { Loader, SpacedText } from '@zooniverse/react-components'
+import { Box } from 'grommet'
+import { SubtractCircle } from 'grommet-icons'
+import { bool, func, string } from 'prop-types'
+
+import { HeaderButton } from '@components/shared'
+
+const DEFAULT_HANDLER = () => true
+
+function DeactivatedGroup({
+  deleteMembership = DEFAULT_HANDLER,
+  deleteMembershipLoading = false,
+  membershipId
+}) {
+  async function handleGroupMembershipLeave ({
+    membershipId
+  }) {
+    await deleteMembership({ membershipId }, {
+      revalidate: true
+    })
+
+    window.location.href = '/'
+  }
+
+  return (
+    <Box
+      align='center'
+      direction='column'
+      gap='medium'
+    >
+      <SpacedText uppercase={false}>
+        This is a deactivated group.
+        Please leave the group or contact the group administrator if you believe this is an error.
+      </SpacedText>
+      {deleteMembershipLoading ? (
+        <Loader />
+      ) : (
+        <HeaderButton
+          key='leave-group-button'
+          icon={<SubtractCircle color='white' size='small' />}
+          label='Leave Group'
+          onClick={() => handleGroupMembershipLeave({
+            membershipId,
+          })}
+        />
+      )}
+    </Box>
+  )
+}
+
+DeactivatedGroup.propTypes = {
+  deleteMembership: func,
+  deleteMembershipLoading: bool,
+  membershipId: string.isRequired
+}
+
+export default DeactivatedGroup