@dxos/react-ui 0.1.31 → 0.1.32-next.86f5578

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

@@ -9,49 +9,54 @@ import { AuthenticatingInvitationObservable } from '@dxos/client';
 import { useInvitationStatus } from '@dxos/react-client';
 import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
 
-import { ViewState, ViewStateProps } from './ViewState';
+import { JoinSend, JoinState } from '../joinMachine';
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 const pinLength = 6;
 
 export interface InvitationAuthenticatorProps extends ViewStateProps {
-  invitationType: 'space' | 'halo';
+  Domain: 'Space' | 'Halo';
   failed?: boolean;
 }
 
 const PureInvitationAuthenticatorContent = ({
   disabled,
   failed,
-  dispatch,
-  invitationType,
+  joinSend,
+  joinState,
+  Domain,
   onChange,
   onAuthenticate
 }: {
   disabled?: boolean;
-  dispatch: ViewStateProps['dispatch'];
-  invitationType: InvitationAuthenticatorProps['invitationType'];
+  joinSend: JoinSend;
+  joinState?: JoinState;
+  Domain: InvitationAuthenticatorProps['Domain'];
   failed: InvitationAuthenticatorProps['failed'];
   onChange: ComponentProps<typeof Input>['onChange'];
   onAuthenticate: ComponentProps<typeof Button>['onClick'];
 }) => {
   const { t } = useTranslation('os');
+  const invitationType = Domain.toLowerCase() as 'space' | 'halo';
   return (
     <>
       <Input
-        label={t('auth code input label')}
+        label={<ViewStateHeading>{t('auth code input label')}</ViewStateHeading>}
         size='pin'
         length={pinLength}
         onChange={onChange}
         disabled={disabled}
         slots={{
           root: { className: 'm-0' },
-          label: { className: 'sr-only' },
           description: { className: 'text-center' },
           input: {
             disabled,
             inputMode: 'numeric',
+            autoComplete: 'off',
             pattern: '\\d*',
-            'data-autofocus': `${invitationType} invitation acceptor; invitation authenticator`,
-            'data-testid': `${invitationType}-auth-code-input`
+            'data-autofocus': `connecting${Domain}Invitation inputting${Domain}VerificationCode authenticationFailing${Domain}VerificationCode authenticating${Domain}VerificationCode`,
+            'data-testid': `${invitationType}-auth-code-input`,
+            'data-1p-ignore': true
           } as ComponentPropsWithoutRef<'input'>
         }}
         {...(failed && {
@@ -75,7 +80,7 @@ const PureInvitationAuthenticatorContent = ({
         <Button
           disabled={disabled}
           className='flex items-center gap-2 pis-2 pie-4'
-          onClick={() => dispatch({ type: 'cancel invitation', from: invitationType })}
+          onClick={() => joinState?.context[invitationType].invitationObservable?.cancel()}
           data-testid={`${invitationType}-invitation-authenticator-cancel`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
@@ -87,24 +92,27 @@ const PureInvitationAuthenticatorContent = ({
 };
 
 const InvitationAuthenticatorContent = ({
+  joinSend,
+  joinState,
   disabled,
   invitation,
-  dispatch,
-  invitationType,
+  Domain,
   failed
 }: {
+  joinSend: JoinSend;
+  joinState?: JoinState;
   disabled?: boolean;
   invitation: AuthenticatingInvitationObservable;
-  dispatch: ViewStateProps['dispatch'];
-  invitationType: InvitationAuthenticatorProps['invitationType'];
+  Domain: InvitationAuthenticatorProps['Domain'];
   failed: InvitationAuthenticatorProps['failed'];
 }) => {
+  const invitationType = Domain.toLowerCase();
   const [pinValue, setPinValue] = useState('');
   const { authenticate } = useInvitationStatus(invitation);
   const onAuthenticate = useCallback(() => {
-    dispatch({ type: 'authenticating invitation', from: invitationType });
+    joinSend({ type: `authenticate${Domain}VerificationCode` });
     void authenticate(pinValue);
-  }, [dispatch, invitationType, authenticate, pinValue]);
+  }, [joinSend, authenticate, pinValue]);
   const onChange = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
       setPinValue(value);
@@ -115,26 +123,27 @@ const InvitationAuthenticatorContent = ({
     [authenticate, pinValue]
   );
   return (
-    <PureInvitationAuthenticatorContent {...{ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }} />
+    <PureInvitationAuthenticatorContent
+      {...{ disabled, failed, joinSend, joinState, Domain, onChange, onAuthenticate }}
+    />
   );
 };
 
-export const InvitationAuthenticator = ({
-  invitationType,
-  failed,
-  ...viewStateProps
-}: InvitationAuthenticatorProps) => {
-  const disabled = !viewStateProps.active;
-  const { activeInvitation, dispatch } = viewStateProps;
+export const InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }: InvitationAuthenticatorProps) => {
+  const { joinSend, joinState } = viewStateProps;
+  const disabled =
+    !viewStateProps.active ||
+    ['connecting', 'authenticating'].some((str) => joinState?.configuration[0].id.includes(str));
+  const activeInvitation = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].invitationObservable;
   return (
     <ViewState {...viewStateProps}>
-      {!activeInvitation || activeInvitation === true ? (
+      {!activeInvitation ? (
         <PureInvitationAuthenticatorContent
-          {...{ disabled, failed, dispatch, invitationType, onChange: () => {}, onAuthenticate: () => {} }}
+          {...{ disabled, failed, joinSend, joinState, Domain, onChange: () => {}, onAuthenticate: () => {} }}
         />
       ) : (
         <InvitationAuthenticatorContent
-          {...{ disabled, failed, invitation: activeInvitation, dispatch, invitationType }}
+          {...{ disabled, failed, invitation: activeInvitation, joinSend, joinState, Domain }}
         />
       )}
     </ViewState>

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

@@ -3,33 +3,33 @@
 //
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React, { ComponentPropsWithoutRef, useState } from 'react';
+import React, { ComponentPropsWithoutRef, useEffect, useState } from 'react';
 
-import { InvitationEncoder } from '@dxos/client';
-import { useClient } from '@dxos/react-client';
 import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
 
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface InvitationInputProps extends ViewStateProps {
-  invitationType: 'space' | 'halo';
+  Domain: 'Space' | 'Halo';
 }
 
-export const InvitationInput = ({ invitationType, ...viewStateProps }: InvitationInputProps) => {
-  const client = useClient();
+export const InvitationInput = ({ Domain, ...viewStateProps }: InvitationInputProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch } = viewStateProps;
+  const { joinSend, joinState } = viewStateProps;
   const { t } = useTranslation('os');
 
-  const [inputValue, setInputValue] = useState('');
+  const contextUnredeemedCode = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].unredeemedCode;
+
+  const [inputValue, setInputValue] = useState(contextUnredeemedCode ?? '');
+
+  useEffect(() => {
+    contextUnredeemedCode && setInputValue(contextUnredeemedCode ?? '');
+  }, [contextUnredeemedCode]);
 
   const handleNext = () =>
-    dispatch({
-      type: 'connecting invitation',
-      from: invitationType,
-      invitation: client[invitationType === 'halo' ? 'halo' : 'echo'].acceptInvitation(
-        InvitationEncoder.decode(inputValue)
-      )
+    joinSend({
+      type: `set${Domain}InvitationCode`,
+      code: inputValue
     });
 
   return (
@@ -37,13 +37,13 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
       <Input
         disabled={disabled}
         label={<ViewStateHeading>{t('invitation input label')}</ViewStateHeading>}
+        value={inputValue}
         onChange={({ target: { value } }) => setInputValue(value)}
         slots={{
           root: { className: 'm-0' },
-          label: { className: 'sr-only' },
           input: {
-            'data-autofocus': `${invitationType} invitation acceptor; invitation input`,
-            'data-testid': `${invitationType}-invitation-input`,
+            'data-autofocus': `inputting${Domain}InvitationCode`,
+            'data-testid': `${Domain.toLowerCase()}-invitation-input`,
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
@@ -54,17 +54,17 @@ export const InvitationInput = ({ invitationType, ...viewStateProps }: Invitatio
           disabled={disabled}
           className='grow flex items-center gap-2 pli-2 order-2'
           onClick={handleNext}
-          data-testid={`${invitationType}-invitation-input-continue`}
+          data-testid={`${Domain.toLowerCase()}-invitation-input-continue`}
         >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
         </Button>
         <Button
-          disabled={disabled}
-          onClick={() => dispatch({ type: 'add identity' })}
+          disabled={Domain === 'Space'}
+          onClick={() => joinSend({ type: 'deselectAuthMethod' })}
           className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${invitationType}-invitation-input-back`}
+          data-testid={`${Domain.toLowerCase()}-invitation-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

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

@@ -5,34 +5,36 @@
 import { ArrowsClockwise, CaretLeft, CaretRight } from '@phosphor-icons/react';
 import React from 'react';
 
-import { AuthenticatingInvitationObservable, Invitation } from '@dxos/client';
-import { useInvitationStatus } from '@dxos/react-client';
-import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+import { Invitation } from '@dxos/client';
+import { Button, defaultDescription, getSize, mx, useTranslation } from '@dxos/react-components';
 
-import { ViewState, ViewStateProps } from './ViewState';
+import { JoinSend, JoinState } from '../joinMachine';
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface InvitationConnectorProps extends ViewStateProps {
-  invitationType: 'space' | 'halo';
+  Domain: 'Space' | 'Halo';
 }
 
 const InvitationActions = ({
-  activeInvitation,
+  invitationState,
   disabled,
-  dispatch,
-  invitationType
+  joinSend,
+  joinState,
+  Domain
 }: {
-  activeInvitation: AuthenticatingInvitationObservable;
+  invitationState?: Invitation.State;
   disabled?: boolean;
-  dispatch: ViewStateProps['dispatch'];
-  invitationType: InvitationConnectorProps['invitationType'];
+  joinSend: JoinSend;
+  joinState?: JoinState;
+  Domain: InvitationConnectorProps['Domain'];
 }) => {
-  const { status, cancel } = useInvitationStatus(activeInvitation);
   const { t } = useTranslation('os');
-
-  switch (status) {
+  const invitationType = Domain.toLowerCase() as 'space' | 'halo';
+  switch (invitationState) {
     case Invitation.State.CONNECTING:
       return (
         <>
+          <ViewStateHeading className={defaultDescription}>{t('connecting status label')}</ViewStateHeading>
           <div role='none' className='grow' />
           <div className='flex gap-2'>
             <Button disabled className='grow flex items-center gap-2 pli-2 order-2' data-testid='next'>
@@ -43,8 +45,7 @@ const InvitationActions = ({
             <Button
               disabled={disabled}
               className='flex items-center gap-2 pis-2 pie-4'
-              onClick={cancel}
-              data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
+              onClick={() => joinState?.context[invitationType].invitationObservable?.cancel()}
               data-testid='invitation-rescuer-cancel'
             >
               <CaretLeft weight='bold' className={getSize(4)} />
@@ -58,40 +59,56 @@ const InvitationActions = ({
     case Invitation.State.ERROR:
     default:
       return (
-        <Button
-          disabled={disabled}
-          className='grow flex items-center gap-2 pli-2'
-          onClick={() => dispatch({ type: 'reset invitation', from: invitationType })}
-          data-autofocus={`${invitationType} invitation acceptor; invitation rescuer`}
-          data-testid='invitation-rescuer-reset'
-        >
-          <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
-          <span className='grow'>{t('reset label')}</span>
-          <ArrowsClockwise weight='bold' className={getSize(5)} />
-        </Button>
+        <>
+          <ViewStateHeading className={defaultDescription}>
+            {t(
+              invitationState === Invitation.State.TIMEOUT
+                ? 'timeout status label'
+                : invitationState === Invitation.State.CANCELLED
+                ? 'cancelled status label'
+                : 'error status label'
+            )}
+          </ViewStateHeading>
+          <div role='none' className='grow' />
+          <Button
+            disabled={disabled}
+            className='flex items-center gap-2 pli-2'
+            onClick={() => joinSend({ type: `reset${Domain}Invitation` })}
+            data-testid='invitation-rescuer-reset'
+          >
+            <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
+            <span className='grow'>{t('reset label')}</span>
+            <ArrowsClockwise className={getSize(4)} />
+          </Button>
+        </>
       );
   }
 };
 
-export const InvitationRescuer = ({ invitationType, ...viewStateProps }: InvitationConnectorProps) => {
+export const InvitationRescuer = ({ Domain, ...viewStateProps }: InvitationConnectorProps) => {
   const disabled = !viewStateProps.active;
-  const { dispatch, activeInvitation } = viewStateProps;
+  const { joinSend, joinState } = viewStateProps;
+  const invitationState = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].invitation?.state;
   const { t } = useTranslation('os');
   return (
     <ViewState {...viewStateProps}>
-      {activeInvitation === true || !activeInvitation ? (
-        <Button
-          disabled={disabled}
-          className='grow flex items-center gap-2 pli-2'
-          data-autofocus='space invitation acceptor; invitation rescuer'
-          data-testid='invitation-rescuer-connect'
-        >
-          <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
-          <span className='grow'>{t('connect label')}</span>
-          <ArrowsClockwise weight='bold' className={getSize(5)} />
-        </Button>
+      {typeof invitationState === 'undefined' ? (
+        <>
+          <div role='none' className='grow' />
+          <Button
+            disabled={disabled}
+            className='flex items-center gap-2 pli-2'
+            data-autofocus={`inputting${Domain}InvitationCode`}
+            data-testid='invitation-rescuer-blank-reset'
+            onClick={() => joinSend({ type: `reset${Domain}Invitation` })}
+          >
+            <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
+            <span className='grow'>{t('reset label')}</span>
+            <ArrowsClockwise className={getSize(5)} />
+          </Button>
+        </>
       ) : (
-        <InvitationActions {...{ activeInvitation, disabled, dispatch, invitationType }} />
+        <InvitationActions {...{ invitationState, disabled, joinSend, joinState, Domain }} />
       )}
     </ViewState>
   );

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

@@ -5,27 +5,26 @@
 import { CheckCircle, HourglassSimple, X } from '@phosphor-icons/react';
 import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
 
-import type { AuthenticatingInvitationObservable, Identity } from '@dxos/client';
+import type { AuthenticatingInvitationObservable } from '@dxos/client';
 import { Invitation } from '@dxos/client';
 import { useInvitationStatus } from '@dxos/react-client';
-import { mx, useTranslation, Trans, Avatar, useId, getSize, strongShimmer } from '@dxos/react-components';
+import { mx, useTranslation, useId, getSize, strongShimmer } from '@dxos/react-components';
 
-import { defaultSurface, subduedSurface, resolvedBgColor, activeBgColor, inactiveBgColor } from '../../../styles';
+import { defaultSurface, resolvedBgColor, activeBgColor, inactiveBgColor } from '../../../styles';
 import { invitationStatusValue } from '../../../util';
-import { JoinDispatch } from '../JoinPanelProps';
+import { JoinSend, JoinState } from '../joinMachine';
 
 export interface ViewStateProps extends ComponentProps<'div'> {
   active: boolean;
-  dispatch: JoinDispatch;
-  selectedIdentity?: true | Identity;
-  activeInvitation?: true | AuthenticatingInvitationObservable;
+  joinSend: JoinSend;
+  joinState?: JoinState;
 }
 
 const stripe = mx('rounded-full grow', getSize(3));
 
 export const ViewStateHeading = ({ children, className, ...props }: ComponentPropsWithoutRef<'h2'>) => {
   return (
-    <h2 {...props} className={mx('font-system-medium text-sm md:text-base mbe-1 mli-1 text-center', className)}>
+    <h2 {...props} className={mx('font-system-normal text-sm mbe-1 mli-1 text-center', className)}>
       {children}
     </h2>
   );
@@ -74,7 +73,8 @@ const PureViewStateInvitation = ({
   );
 };
 
-const ViewStateInvitationStatus = ({ activeInvitation }: { activeInvitation: AuthenticatingInvitationObservable }) => {
+// todo (thure): Restore this?
+const _ViewStateInvitationStatus = ({ activeInvitation }: { activeInvitation: AuthenticatingInvitationObservable }) => {
   const { t } = useTranslation('os');
   const { status, haltedAt } = useInvitationStatus(activeInvitation);
 
@@ -136,19 +136,8 @@ const ViewStateInvitationStatus = ({ activeInvitation }: { activeInvitation: Aut
   );
 };
 
-export const ViewState = ({
-  active,
-  children,
-  className,
-  dispatch,
-  selectedIdentity,
-  activeInvitation,
-  ...props
-}: ViewStateProps) => {
+export const ViewState = ({ active, children, className, joinSend, joinState, ...props }: ViewStateProps) => {
   // note (thure): reserve `order-1` and `order-3` for outgoing steps in different directions
-  const { t } = useTranslation('os');
-  const identityLabel = useId('selectedIdentityLabel');
-
   return (
     <div
       role='none'
@@ -156,47 +145,7 @@ export const ViewState = ({
       {...(!active && { 'aria-hidden': true })}
       className={mx('is-[50%] flex flex-col', active ? 'order-2' : 'order-4', className)}
     >
-      {selectedIdentity && (
-        <div role='none' className={mx(subduedSurface, 'flex-none flex items-center gap-1 pli-2 pbe-1.5')}>
-          <Trans
-            {...{
-              defaults: t('join space as identity heading'),
-              components: {
-                icon: (
-                  <Avatar
-                    size={4}
-                    fallbackValue={selectedIdentity === true ? '' : selectedIdentity.identityKey.toHex()}
-                    labelId={identityLabel}
-                  />
-                ),
-                label: <span id={identityLabel} />,
-                part: <span role='none' className='flex items-center gap-1 leading-none' />
-              },
-              values: {
-                labelValue:
-                  selectedIdentity === true
-                    ? ' '
-                    : selectedIdentity.profile?.displayName ?? selectedIdentity.identityKey.truncate()
-              }
-            }}
-          />
-        </div>
-      )}
-      {activeInvitation &&
-        (activeInvitation === true ? (
-          <PureViewStateInvitation
-            {...{
-              halted: false,
-              status: Invitation.State.INIT,
-              label: t('invitation input label'),
-              cursor: 0,
-              resolvedColor: inactiveBgColor
-            }}
-          />
-        ) : (
-          <ViewStateInvitationStatus {...{ activeInvitation }} />
-        ))}
-      <div role='region' className={mx(defaultSurface, 'rounded-be-md grow shrink-0 flex flex-col gap-1 p-2')}>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md grow shrink-0 flex flex-col gap-1 p-4 pbs-1')}>
         {children}
       </div>
     </div>

package/src/panels/JoinPanel/view-states/index.ts

@@ -4,7 +4,6 @@
 
 export * from './AdditionMethodSelector';
 export * from './IdentityAdded';
-export * from './IdentitySelector';
 export * from './IdentityInput';
 export * from './InvitationAccepted';
 export * from './InvitationInput';

package/src/playwright/invitations-manager.ts

@@ -141,7 +141,9 @@ export class InvitationsManager {
   async acceptInvitation(id: number, type: 'device' | 'space', invitation: string) {
     const peer = this._peer(id);
     // TODO(wittjosiah): Update ids.
-    await peer.getByTestId(type === 'device' ? 'join-identity' : 'select-identity').click();
+    if (type === 'device') {
+      await peer.getByTestId('join-identity').click();
+    }
     await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).type(invitation);
     await this.page.keyboard.press('Enter');
   }
@@ -189,7 +191,9 @@ export class InvitationsManager {
   async doneInvitation(id: number, type: 'device' | 'space') {
     const peer = this._peer(id);
     // TODO(wittjosiah): Update ids.
-    await peer.getByTestId(type === 'device' ? 'identity-added-done' : 'space-invitation-accepted-done').click();
+    await peer
+      .getByTestId(type === 'device' ? 'halo-invitation-accepted-done' : 'space-invitation-accepted-done')
+      .click();
   }
 
   // TODO(wittjosiah): Peer manager?

package/src/playwright/invitations.spec.ts

@@ -104,9 +104,10 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'device', invitation);
       await manager.cancelInvitation(1, 'device', 'guest');
       await manager.resetInvitation(1);
+      await manager.invitationInputContinue(1, 'device');
       const [authenticationCode] = await Promise.all([
         manager.getAuthenticationCode(),
-        manager.invitationInputContinue(1, 'device')
+        manager.clearAuthenticationCode(1, 'device')
       ]);
       await manager.authenticateInvitation(1, 'device', authenticationCode);
       await manager.doneInvitation(1, 'device');
@@ -126,9 +127,10 @@ test.describe('Invitations', () => {
       await sleep(100);
       await manager.setConnectionState(0, ConnectionState.ONLINE);
       await manager.resetInvitation(1);
+      await manager.invitationInputContinue(1, 'device');
       const [authenticationCode] = await Promise.all([
         manager.getAuthenticationCode(),
-        manager.invitationInputContinue(1, 'device')
+        manager.clearAuthenticationCode(1, 'device')
       ]);
       await manager.authenticateInvitation(1, 'device', authenticationCode);
       await manager.doneInvitation(1, 'device');
@@ -243,10 +245,13 @@ test.describe('Invitations', () => {
       expect(await manager.invitationFailed(1)).to.be.true;
 
       await manager.resetInvitation(1);
+      await manager.invitationInputContinue(1, 'space');
+
       const [authenticationCode] = await Promise.all([
         manager.getAuthenticationCode(),
-        manager.invitationInputContinue(1, 'space')
+        manager.clearAuthenticationCode(1, 'space')
       ]);
+
       await manager.authenticateInvitation(1, 'space', authenticationCode);
       await manager.doneInvitation(1, 'space');
 
@@ -292,10 +297,13 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'space', invitation);
       await manager.cancelInvitation(1, 'space', 'guest');
       await manager.resetInvitation(1);
+      await manager.invitationInputContinue(1, 'space');
+
       const [authenticationCode] = await Promise.all([
         manager.getAuthenticationCode(),
-        manager.invitationInputContinue(1, 'space')
+        manager.clearAuthenticationCode(1, 'space')
       ]);
+
       await manager.authenticateInvitation(1, 'space', authenticationCode);
       await manager.doneInvitation(1, 'space');
 
@@ -317,9 +325,10 @@ test.describe('Invitations', () => {
       await sleep(100);
       await manager.setConnectionState(0, ConnectionState.ONLINE);
       await manager.resetInvitation(1);
+      await manager.invitationInputContinue(1, 'space');
       const [authenticationCode] = await Promise.all([
         manager.getAuthenticationCode(),
-        manager.invitationInputContinue(1, 'space')
+        manager.clearAuthenticationCode(1, 'space')
       ]);
       await manager.authenticateInvitation(1, 'space', authenticationCode);
       await manager.doneInvitation(1, 'space');

package/src/stories/Invitations.stories.tsx

@@ -55,7 +55,7 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
         <ButtonGroup className='mbe-4'>
           {/* <Tooltip content='Create Space'> */}
           <Button
-            onClick={() => client.echo.createSpace({ name: faker.animal.bird() })}
+            onClick={() => client.createSpace({ name: faker.animal.bird() })}
             data-testid='invitations.create-space'
           >
             <PlusCircle className={getSize(6)} />
@@ -118,7 +118,7 @@ const render = ({ id }: { id: number }) => {
       <Tooltip content='Join Existing Identity'> */}
       <Button
         onClick={() => setPanel('identity')}
-        disabled={panel === 'identity'}
+        disabled={Boolean(identity) || panel === 'identity'}
         data-testid='invitations.open-join-identity'
       >
         <QrCode weight='fill' className={getSize(6)} />

package/src/translations/locales/en-US.ts

@@ -8,7 +8,7 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy',
   'open share panel label': 'Share',
-  'joining heading': '<small>Joining</small><large>{{name}}</large>',
+  'joining space heading': 'Joining space',
   'join space heading': 'Join a space',
   'halo heading': 'Initialize device identity',
   'exit label': 'Exit',
@@ -27,7 +27,7 @@ export const os = {
   'join identity label': 'Use an authed device',
   'join identity description': 'Add this device to an identity you’re already logged into on another device.',
   'deselect identity label': 'Back to identities',
-  'addition method selector title': 'Add an identity to this device',
+  'addition method selector title': 'An identity is required to continue',
   'new identity input label': 'Add a display name',
   'recover identity input label': 'Type or paste your seed phrase',
   'failed to create identity message': 'Failed to create an identity.',
@@ -48,7 +48,7 @@ export const os = {
   'cancel label': 'Cancel',
   'done label': 'Done',
   'reset label': 'Start over',
-  'auth code input label': 'Auth code provided by the invitation sender',
+  'auth code input label': 'Enter the verification code',
   'invitation input label': 'Paste an invitation code or URL',
   'create device invitation label': 'Invite',
   'create space invitation label': 'Invite',
@@ -62,5 +62,7 @@ export const os = {
   'view space invitations label': 'View space invitations',
   'toggle sidebar label': 'Open/close sidebar',
   'open sidebar label': 'Open sidebar',
-  'close sidebar label': 'Close sidebar'
+  'close sidebar label': 'Close sidebar',
+  'welcome message': 'Welcome',
+  'selecting identity heading': 'Selecting identity'
 };

package/src/util/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './invitationStatusValue';
+export * from './toEmoji';