@dxos/react-ui 0.1.31 → 0.1.32-next.77d513e

package/src/panels/JoinPanel/joinMachine.ts

@@ -0,0 +1,418 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMachine } from '@xstate/react';
+import { useCallback } from 'react';
+import { assign, createMachine, InterpreterFrom, StateFrom } from 'xstate';
+import type { StateNodeConfig, Subscribable, Subscription } from 'xstate';
+
+import type { Identity, AuthenticatingInvitationObservable, Client } from '@dxos/client';
+import { Invitation, InvitationEncoder } from '@dxos/client';
+import { log } from '@dxos/log';
+
+import { JoinPanelMode } from './JoinPanelProps';
+
+type FailReason = 'error' | 'timeout' | 'cancelled' | 'badVerificationCode';
+
+type InvitationDomainContext = Partial<{
+  failReason: FailReason | null;
+  unredeemedCode: string;
+  invitationObservable: AuthenticatingInvitationObservable;
+  invitation: Invitation;
+  invitationSubscribable: Subscribable<InvitationEvent>;
+}>;
+
+type JoinMachineContext = {
+  mode: JoinPanelMode;
+  identity: Identity | null;
+  halo: InvitationDomainContext;
+  space: InvitationDomainContext;
+};
+
+type SelectIdentityEvent = {
+  type: 'selectIdentity';
+  identity: Identity;
+};
+
+type SetInvitationCodeEvent = {
+  type: 'setHaloInvitationCode' | 'setSpaceInvitationCode';
+  code: string;
+};
+
+type SetInvitationEvent = {
+  type:
+    | 'authenticateHaloInvitation'
+    | 'authenticateSpaceInvitation'
+    | 'connectHaloInvitation'
+    | 'connectSpaceInvitation'
+    | 'connectionSuccessHaloInvitation'
+    | 'connectionSuccessSpaceInvitation';
+  invitation: Invitation;
+};
+
+type FailInvitationEvent = {
+  type: 'failHaloInvitation' | 'failSpaceInvitation';
+  reason: FailReason;
+};
+
+type EmptyInvitationEvent = {
+  type:
+    | 'authenticateHaloVerificationCode'
+    | 'authenticateSpaceVerificationCode'
+    | 'resetHaloInvitation'
+    | 'resetSpaceInvitation'
+    | 'succeedHaloInvitation'
+    | 'succeedSpaceInvitation';
+};
+
+type InvitationEvent = FailInvitationEvent | SetInvitationCodeEvent | SetInvitationEvent | EmptyInvitationEvent;
+
+const getInvitationSubscribable = (
+  Domain: 'Space' | 'Halo',
+  invitation: AuthenticatingInvitationObservable
+): Subscribable<InvitationEvent> => {
+  log('[subscribing to invitation]', invitation);
+  return {
+    subscribe: (
+      next: (value: InvitationEvent) => void,
+      onError?: (error: any) => void,
+      complete?: () => void
+    ): Subscription => {
+      const unsubscribe = invitation.subscribe({
+        onAuthenticating: (invitation: Invitation) => {
+          log('[invitation authenticating]', { Domain, invitation });
+          return next({ type: `authenticate${Domain}Invitation`, invitation });
+        },
+        onCancelled: () => {
+          log.warn('[invitation cancelled]', { Domain });
+          return next({ type: `fail${Domain}Invitation`, reason: 'cancelled' } as FailInvitationEvent);
+        },
+        onTimeout: () => {
+          log.error('[invitation timeout]', { Domain });
+          return next({ type: `fail${Domain}Invitation`, reason: 'timeout' } as FailInvitationEvent);
+        },
+        onConnecting: (invitation: Invitation) => {
+          log('[invitation connecting]', { Domain, invitation });
+          return next({ type: `connect${Domain}Invitation`, invitation });
+        },
+        onConnected: (invitation: Invitation) => {
+          log('[invitation connected]', { Domain, invitation });
+          return next({ type: `connectionSuccess${Domain}Invitation`, invitation });
+        },
+        onSuccess: () => {
+          log('[invitation success]', { Domain });
+          next({ type: `succeed${Domain}Invitation` });
+          return complete?.();
+        },
+        onError: (error: any) => {
+          log.error('[invitation errored]', { Domain, error });
+          next({ type: `fail${Domain}Invitation`, reason: 'error' });
+          return onError?.(error);
+        }
+      });
+      return { unsubscribe };
+    }
+  } as Subscribable<InvitationEvent>;
+};
+
+const acceptingInvitationTemplate = (Domain: 'Space' | 'Halo', successTarget: string) => {
+  const config: StateNodeConfig<JoinMachineContext, any, InvitationEvent> = {
+    initial: `unknown${Domain}`,
+    states: {
+      [`unknown${Domain}`]: {
+        always: [
+          {
+            cond: ({ mode }) => mode === 'halo-only' && Domain === 'Space',
+            target: '#join.finishingJoiningHalo'
+          },
+          {
+            // cond: `no${Domain}Invitation`,
+            target: `inputting${Domain}InvitationCode`,
+            actions: 'log'
+          }
+          // todo(thure): Restore this transition that redeems the invitation code on init.
+          // {
+          //   target: `acceptingRedeemed${Domain}Invitation`,
+          //   actions: [`redeem${Domain}InvitationCode`, 'log']
+          // }
+        ]
+      },
+      [`inputting${Domain}InvitationCode`]: {},
+      [`acceptingRedeemed${Domain}Invitation`]: {
+        invoke: {
+          src: (context) => context[Domain.toLowerCase() as 'space' | 'halo'].invitationSubscribable!
+        },
+        initial: `unknown${Domain}Invitation`,
+        states: {
+          [`unknown${Domain}Invitation`]: {
+            always: [
+              {
+                cond: (context) => {
+                  const invitation = context[Domain.toLowerCase() as 'space' | 'halo'].invitation;
+                  return !invitation || invitation?.state === Invitation.State.CONNECTING;
+                },
+                target: `connecting${Domain}Invitation`,
+                actions: 'log'
+              },
+              {
+                target: `inputting${Domain}VerificationCode`,
+                actions: 'log'
+              }
+            ]
+          },
+          [`connecting${Domain}Invitation`]: {},
+          [`inputting${Domain}VerificationCode`]: {
+            on: {
+              [`authenticate${Domain}VerificationCode`]: {
+                target: `authenticating${Domain}VerificationCode`,
+                actions: 'log'
+              }
+            }
+          },
+          [`authenticating${Domain}VerificationCode`]: {
+            on: {
+              [`authenticate${Domain}Invitation`]: {
+                target: `authenticationFailing${Domain}VerificationCode`,
+                actions: 'log'
+              }
+            }
+          },
+          [`authenticationFailing${Domain}VerificationCode`]: {},
+          [`failing${Domain}Invitation`]: {},
+          [`success${Domain}Invitation`]: {}
+        },
+        on: {
+          [`reset${Domain}Invitation`]: {
+            target: `#join${
+              Domain === 'Halo' ? '.choosingIdentity' : ''
+            }.accepting${Domain}Invitation.unknown${Domain}`,
+            actions: ['resetInvitation', 'log']
+          },
+          [`connect${Domain}Invitation`]: {
+            target: `.connecting${Domain}Invitation`,
+            actions: ['setInvitation', 'log']
+          },
+          [`connectionSuccess${Domain}Invitation`]: {
+            target: `.inputting${Domain}VerificationCode`,
+            actions: ['setInvitation', 'log']
+          },
+          [`succeed${Domain}Invitation`]: { target: successTarget, actions: 'log' },
+          [`fail${Domain}Invitation`]: {
+            target: `.failing${Domain}Invitation`,
+            actions: [
+              assign({
+                [Domain.toLowerCase() as 'space' | 'halo']: (
+                  context: JoinMachineContext,
+                  event: FailInvitationEvent
+                ) => ({
+                  ...context[Domain.toLowerCase() as 'space' | 'halo'],
+                  failReason: event.reason
+                })
+              }),
+              'log'
+            ]
+          }
+        }
+      }
+    },
+    on: {
+      [`set${Domain}InvitationCode`]: {
+        target: `.acceptingRedeemed${Domain}Invitation`,
+        actions: [
+          assign({
+            [Domain.toLowerCase() as 'space' | 'halo']: (
+              context: JoinMachineContext,
+              event: SetInvitationCodeEvent
+            ) => ({
+              ...context[Domain.toLowerCase() as 'space' | 'halo'],
+              unredeemedCode: event.code
+            })
+          }),
+          `redeem${Domain}InvitationCode`,
+          'log'
+        ]
+      }
+    }
+  };
+  return config as StateNodeConfig<JoinMachineContext, typeof config, JoinEvent>;
+};
+
+type EmptyJoinEvent = {
+  type:
+    | 'recoverIdentity'
+    | 'createIdentity'
+    | 'acceptHaloInvitation'
+    | 'addIdentity'
+    | 'selectIdentity'
+    | 'deselectAuthMethod';
+};
+
+type JoinEvent = InvitationEvent | SelectIdentityEvent | EmptyJoinEvent;
+
+const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
+  {
+    id: 'join',
+    predictableActionArguments: true,
+    context: {
+      mode: 'default',
+      identity: null,
+      halo: {},
+      space: {}
+    },
+    initial: 'unknown',
+    states: {
+      unknown: {
+        always: [
+          { cond: 'noSelectedIdentity', target: 'choosingIdentity', actions: 'log' },
+          { target: 'acceptingSpaceInvitation', actions: 'log' }
+        ]
+      },
+      choosingIdentity: {
+        initial: 'choosingAuthMethod',
+        states: {
+          choosingAuthMethod: {},
+          recoveringIdentity: {},
+          creatingIdentity: {},
+          acceptingHaloInvitation: acceptingInvitationTemplate('Halo', '#join.acceptingSpaceInvitation'),
+          confirmingAddedIdentity: {}
+        },
+        on: {
+          recoverIdentity: { target: '.recoveringIdentity', actions: 'log' },
+          createIdentity: { target: '.creatingIdentity', actions: 'log' },
+          acceptHaloInvitation: { target: '.acceptingHaloInvitation', actions: 'log' },
+          addIdentity: { target: '.confirmingAddedIdentity', actions: 'log' },
+          selectIdentity: {
+            target: 'acceptingSpaceInvitation',
+            actions: ['setIdentity', 'log']
+          },
+          deselectAuthMethod: { target: '.choosingAuthMethod', actions: 'log' }
+        }
+      },
+      acceptingSpaceInvitation: acceptingInvitationTemplate('Space', '#join.finishingJoiningSpace'),
+      finishingJoiningSpace: {
+        type: 'final'
+      },
+      finishingJoiningHalo: {
+        type: 'final'
+      }
+    }
+  },
+  {
+    guards: {
+      noSelectedIdentity: ({ identity }, _event) => !identity,
+      noHaloInvitation: ({ halo }, _event) => !halo.invitation && !halo.unredeemedCode,
+      noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode
+    },
+    actions: {
+      setIdentity: assign<JoinMachineContext, SelectIdentityEvent>({
+        identity: (context, event) => event.identity
+      }),
+      unsetIdentity: assign<JoinMachineContext>({
+        identity: () => null
+      }),
+      resetInvitation: assign<JoinMachineContext, EmptyInvitationEvent>({
+        halo: (context, event) =>
+          event.type === 'resetHaloInvitation'
+            ? {
+                ...context.halo,
+                invitation: undefined,
+                invitationObservable: undefined,
+                invitationSubscribable: undefined
+              }
+            : context.halo,
+        space: (context, event) =>
+          event.type === 'resetSpaceInvitation'
+            ? {
+                ...context.space,
+                invitation: undefined,
+                invitationObservable: undefined,
+                invitationSubscribable: undefined
+              }
+            : context.space
+      }),
+      setInvitation: assign<JoinMachineContext, SetInvitationEvent>({
+        halo: (context, event) =>
+          event.type.includes('Halo') ? { ...context.halo, invitation: event.invitation } : context.halo,
+        space: (context, event) =>
+          event.type.includes('Space') ? { ...context.space, invitation: event.invitation } : context.space
+      }),
+      log: (context, event) => {
+        log('[transition]', {
+          event,
+          haloInvitation: context.halo.invitation,
+          spaceInvitation: context.space.invitation
+        });
+      }
+    }
+  }
+);
+
+type JoinMachine = typeof joinMachine;
+
+type JoinState = StateFrom<JoinMachine>;
+type JoinSend = InterpreterFrom<JoinMachine>['send'];
+
+const defaultCodeFromUrl = (invitationType: 'halo' | 'space', text: string) => {
+  try {
+    const searchParams = new URLSearchParams(text.substring(text.lastIndexOf('?')));
+    return (
+      searchParams.get(`${invitationType}InvitationCode`) ??
+      searchParams.get(`${invitationType}Invitation`) ??
+      searchParams.get('invitationCode') ??
+      searchParams.get('invitation') ??
+      text
+    );
+  } catch (err) {
+    log.catch(err);
+    return text;
+  }
+};
+
+const useJoinMachine = (client: Client, options?: Parameters<typeof useMachine<JoinMachine>>[1]) => {
+  const redeemHaloInvitationCode = useCallback(
+    ({ halo }: JoinMachineContext) => {
+      if (halo.unredeemedCode) {
+        const invitationObservable = client.halo.acceptInvitation(
+          InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode))
+        );
+        return {
+          ...halo,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable('Halo', invitationObservable)
+        };
+      } else {
+        return halo;
+      }
+    },
+    [client]
+  );
+  const redeemSpaceInvitationCode = useCallback(
+    ({ space }: JoinMachineContext) => {
+      if (space.unredeemedCode) {
+        const invitationObservable = client.acceptInvitation(
+          InvitationEncoder.decode(defaultCodeFromUrl('space', space.unredeemedCode))
+        );
+        return {
+          ...space,
+          invitationObservable,
+          invitationSubscribable: getInvitationSubscribable('Space', invitationObservable)
+        };
+      } else {
+        return space;
+      }
+    },
+    [client]
+  );
+  return useMachine(joinMachine, {
+    ...options,
+    actions: {
+      ...options?.actions,
+      redeemHaloInvitationCode: assign<JoinMachineContext>({ halo: redeemHaloInvitationCode }),
+      redeemSpaceInvitationCode: assign<JoinMachineContext>({ space: redeemSpaceInvitationCode })
+    }
+  });
+};
+
+export type { JoinMachine, JoinState, JoinSend, JoinEvent, JoinMachineContext };
+export { joinMachine, useJoinMachine };

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -2,21 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from '@phosphor-icons/react';
+import { CaretRight, Plus, QrCode, Textbox } from '@phosphor-icons/react';
 import React from 'react';
 
-import type { Identity } from '@dxos/client';
-import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
+import { CompoundButton, getSize, useTranslation } from '@dxos/react-components';
 
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
-export interface AdditionMethodSelectorProps extends ViewStateProps {
-  availableIdentities: Identity[];
-}
+export type AdditionMethodSelectorProps = ViewStateProps;
 
-export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }: AdditionMethodSelectorProps) => {
+export const AdditionMethodSelector = (viewStateProps: AdditionMethodSelectorProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend } = viewStateProps;
 
   const { t } = useTranslation('os');
 
@@ -34,8 +31,8 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           {...sharedButtonProps}
           description={t('create identity description')}
           before={<Plus className={getSize(6)} />}
-          onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
-          data-autofocus='addition method selector'
+          onClick={() => joinSend({ type: 'createIdentity' })}
+          data-autofocus='choosingAuthMethod'
           data-testid='create-identity'
         >
           {t('create identity label')}
@@ -44,7 +41,7 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           {...sharedButtonProps}
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
-          onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
+          onClick={() => joinSend({ type: 'acceptHaloInvitation' })}
           data-testid='join-identity'
         >
           {t('join identity label')}
@@ -55,21 +52,12 @@ export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps
           disabled={true}
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
-          onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
+          onClick={() => joinSend({ type: 'recoverIdentity' })}
           data-testid='recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>
       </div>
-      <Button
-        disabled={disabled || availableIdentities.length < 1}
-        onClick={() => dispatch({ type: 'deselect identity' })}
-        data-testid='deselect-identity'
-      >
-        <CaretLeft className={getSize(4)} weight='bold' />
-        <span className='grow'>{t('deselect identity label')}</span>
-        <CaretRight className={mx(getSize(4), 'invisible')} weight='bold' />
-      </Button>
     </ViewState>
   );
 };

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -31,12 +31,12 @@ const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
       {...(onDone && { onClick: () => onDone(null) })}
       disabled={disabled}
       className='grow flex items-center gap-2 pli-2'
-      data-autofocus='identity added'
+      data-autofocus='confirmingAddedIdentity'
       data-testid='identity-added-done'
     >
       <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
       <span className='grow'>{t('done label')}</span>
-      <Check weight='bold' className={getSize(4)} />
+      <Check className={getSize(4)} />
     </Button>
   );
 
@@ -51,7 +51,7 @@ export const IdentityAdded = ({
   ...viewStateProps
 }: IdentityAddedProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend } = viewStateProps;
   const { t } = useTranslation('os');
 
   return (
@@ -77,8 +77,8 @@ export const IdentityAdded = ({
           <Button
             disabled={disabled || !addedIdentity}
             className='grow flex items-center gap-2 pli-2 order-2'
-            onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
-            data-autofocus='identity added'
+            onClick={() => addedIdentity && joinSend({ type: 'selectIdentity', identity: addedIdentity })}
+            data-autofocus='confirmingAddedIdentity'
           >
             <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
             <span className='grow'>{t('continue label')}</span>
@@ -86,7 +86,7 @@ export const IdentityAdded = ({
           </Button>
           <Button
             disabled={disabled}
-            onClick={() => dispatch({ type: 'deselect identity' })}
+            onClick={() => joinSend({ type: 'deselectAuthMethod' })}
             className='flex items-center gap-2 pis-2 pie-4'
           >
             <CaretLeft weight='bold' className={getSize(4)} />

package/src/panels/JoinPanel/view-states/IdentityInput.tsx

@@ -16,7 +16,7 @@ export interface IdentityCreatorProps extends ViewStateProps {
 
 export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend } = viewStateProps;
   const { t } = useTranslation('os');
   const [inputValue, setInputValue] = useState('');
   const client = useClient();
@@ -25,7 +25,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
   const handleNext = () => {
     void client.halo.createIdentity({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
       (identity) => {
-        dispatch({ type: 'added identity', identity });
+        joinSend({ type: 'selectIdentity', identity });
       },
       (_error) => {
         setValidationMessage(t(isRecover ? 'failed to recover identity message' : 'failed to create identity message'));
@@ -45,7 +45,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
         slots={{
           root: { className: 'm-0' },
           input: {
-            'data-autofocus': isRecover ? 'identity input; recover identity' : 'identity input; create identity',
+            'data-autofocus': isRecover ? 'recoveringIdentity' : 'creatingIdentity',
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
@@ -66,7 +66,7 @@ export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProp
         </Button>
         <Button
           disabled={disabled}
-          onClick={() => dispatch({ type: 'add identity' })}
+          onClick={() => joinSend({ type: 'deselectAuthMethod' })}
           className='flex items-center gap-2 pis-2 pie-4'
           data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
         >

package/src/panels/JoinPanel/view-states/InvitationAccepted.tsx

@@ -12,7 +12,7 @@ import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
 import { ViewState, ViewStateProps } from './ViewState';
 
 export interface InvitationAcceptedProps extends ViewStateProps {
-  invitationType: 'space' | 'halo';
+  Domain: 'Space' | 'Halo';
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: (result: InvitationResult | null) => void;
 }
@@ -20,7 +20,7 @@ export interface InvitationAcceptedProps extends ViewStateProps {
 const PureInvitationAcceptedContent = ({
   onDone,
   result,
-  invitationType,
+  Domain,
   doneActionParent,
   active
 }: InvitationAcceptedProps & { result: InvitationResult | null }) => {
@@ -31,39 +31,43 @@ const PureInvitationAcceptedContent = ({
     <Button
       {...(onDone && { onClick: () => onDone(result) })}
       disabled={disabled}
-      className='grow flex items-center gap-2 pli-2'
-      data-autofocus={`${invitationType} invitation acceptor; invitation accepted`}
-      data-testid={`${invitationType}-invitation-accepted-done`}
+      className='flex items-center gap-2 pli-2'
+      data-autofocus={`success${Domain}Invitation finishingJoining${Domain}`}
+      data-testid={`${Domain.toLowerCase()}-invitation-accepted-done`}
     >
       <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
       <span className='grow'>{t('done label')}</span>
-      <Check weight='bold' className={getSize(4)} />
+      <Check className={getSize(4)} />
     </Button>
   );
 
-  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+  return (
+    <>
+      <p className='text-center text-sm font-system-normal'>{t('welcome message')}</p>
+      <div role='none' className='grow' />
+      {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+    </>
+  );
 };
 
-const InvitationAcceptedContent = (props: InvitationAcceptedProps) => {
-  const { result } = useInvitationStatus(props.activeInvitation as AuthenticatingInvitationObservable);
+const InvitationAcceptedContent = (
+  props: InvitationAcceptedProps & { activeInvitation: AuthenticatingInvitationObservable }
+) => {
+  const { result } = useInvitationStatus(props.activeInvitation);
   return <PureInvitationAcceptedContent {...props} result={result} />;
 };
 
 export const InvitationAccepted = (props: InvitationAcceptedProps) => {
-  const {
-    invitationType: _invitationType,
-    doneActionParent: _doneActionParent,
-    onDone: _onDone,
-    ...viewStateProps
-  } = props;
-  const { activeInvitation } = viewStateProps;
+  const { Domain, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
+  const activeInvitation =
+    viewStateProps.joinState?.context[Domain.toLowerCase() as 'halo' | 'space'].invitationObservable;
 
   return (
     <ViewState {...viewStateProps}>
-      {!activeInvitation || activeInvitation === true ? (
+      {!activeInvitation ? (
         <PureInvitationAcceptedContent {...props} result={null} />
       ) : (
-        <InvitationAcceptedContent {...props} />
+        <InvitationAcceptedContent {...props} activeInvitation={activeInvitation} />
       )}
     </ViewState>
   );