feat: include the ability to remove users from a journey

Author: jeroenrinzema

apps/platform/src/journey/JourneyController.ts

@@ -216,10 +216,9 @@ router.delete('/:journeyId/users/:userId', async ctx => {
     if (!user) return ctx.throw(404)
     const results = await JourneyUserStep.update(
         q => q.where('user_id', user.id)
-            .whereNull('entrance_id')
             .whereNull('ended_at')
             .where('journey_id', ctx.state.journey!.id),
-        { ended_at: new Date() },
+        { ended_at: new Date(), type: 'completed' },
     )
     ctx.body = { exits: results }
 })

apps/ui/public/locales/en.json

@@ -333,6 +333,7 @@
     "setup_integration_no_providers": "There are no providers configured for this channel. Please add a provider to continue.",
     "sign_out": "Sign Out",
     "skip_delay": "Skip Delay",
+    "remove_from_journey": "Remove from journey",
     "sms_opt_out_message": "SMS Opt Out Message",
     "sms_opt_out_message_subtitle": "Instructions on how to opt out of SMS that will be appended to every text.",
     "sms_help_message": "SMS Help Message",

apps/ui/src/api.ts

@@ -221,6 +221,9 @@ const api = {
             skipDelay: async (projectId: number | string, journeyId: number | string, userId: number | string, stepId: number | string) => await client
                 .post<JourneyEntranceDetail>(`${projectUrl(projectId)}/journeys/${journeyId}/users/${userId}/steps/${stepId}/resume`)
                 .then(r => r.data),
+            removeFromJourney: async (projectId: number | string, journeyId: number | string, userId: number | string) => await client
+                .delete<number>(`${projectUrl(projectId)}/journeys/${journeyId}/users/${userId}`)
+                .then(r => r.data),
         },
     },
 

apps/ui/src/views/journey/JourneyStepUsers.tsx

@@ -9,7 +9,7 @@ import { UserLookup } from '../users/UserLookup'
 import { typeVariants } from './EntranceDetails'
 import { ModalProps } from '../../ui/Modal'
 import { JourneyUserStep, User } from '../../types'
-import { EditIcon } from '../../ui/icons'
+import { EditIcon, TrashIcon } from '../../ui/icons'
 import { DataTableCol } from '../../ui/DataTable'
 
 interface StepUsersProps extends Omit<ModalProps, 'title'> {
@@ -35,6 +35,14 @@ export function JourneyStepUsers({ open, onClose, stepType, stepId }: StepUsersP
                             <MenuItem onClick={async () => await handleSkipDelay(id, user)}>
                                 <EditIcon />{t('skip_delay')}
                             </MenuItem>
+                            <MenuItem>
+                                <Button icon={<TrashIcon />}
+                                    variant="destructive"
+                                    onClick={async () => await handleRemoveFromJourney(id, user)}
+                                    size="small">
+                                    {t('remove_from_journey')}
+                                </Button>
+                            </MenuItem>
                         </Menu>
                     )
                 }
@@ -59,6 +67,11 @@ export function JourneyStepUsers({ open, onClose, stepType, stepId }: StepUsersP
         await state.reload()
     }
 
+    const handleRemoveFromJourney = async (stepId: number, user: User) => {
+        await api.journeys.users.removeFromJourney(projectId, journeyId, user.id)
+        await state.reload()
+    }
+
     return <>
         <Modal
             open={open}