feat(webapp): add Meet Now modal and instant meeting flow [WPB-25057]

apps/webapp/src/i18n/en-US.json

@@ -1268,9 +1268,17 @@
   "meetings.action.editMeeting": "Edit meeting",
   "meetings.action.meetNow": "Meet Now",
   "meetings.action.scheduleMeeting": "Schedule Meeting",
+  "meetings.error.addParticipantsFailed": "The meeting was saved, but some participants could not be added. Please try again.",
+  "meetings.error.conversationSetupFailed": "The meeting was saved, but something went wrong while setting up the conversation. Please try again.",
+  "meetings.error.setupFailedTitle": "Could not finish meeting setup",
   "meetings.list.loadError": "Could not load meetings. Please try again.",
   "meetings.list.today": "Today",
   "meetings.list.tomorrow": "Tomorrow",
+  "meetings.meetNowModal.closeAriaLabel": "Close",
+  "meetings.meetNowModal.error.createFailed": "Something went wrong while starting the meeting. Please try again.",
+  "meetings.meetNowModal.error.createFailedTitle": "Could not start meeting",
+  "meetings.meetNowModal.startMeeting": "Start Meeting",
+  "meetings.meetNowModal.title": "Meet now",
   "meetings.meetingStatus.participating": "Attending",
   "meetings.meetingStatus.startedAt": "Started at {time}",
   "meetings.navigation.label": "Meetings",

apps/webapp/src/script/components/Meeting/EmptyMeetingList/EmptyMeetingList.tsx

@@ -38,7 +38,7 @@ export const EmptyMeetingList = () => {
       <p css={emptyListHeadingStyles}>{translate('meetings.noMeetingsText')}</p>
       <p css={emptyListBodyStyles}>{translate('meetings.startMeetingHelp')}</p>
       <div css={emptyListActionButtonContainerStyles}>
-        <Button variant={ButtonVariant.TERTIARY} onClick={handleMeetNow} data-uie-name="meet-now">
+        <Button variant={ButtonVariant.TERTIARY} onClick={handleMeetNow}>
           <CallIcon css={emptyListActionButtonsStyles} /> {translate('meetings.action.meetNow')}
         </Button>
         <Button variant={ButtonVariant.TERTIARY} onClick={handleScheduleMeeting} data-uie-name="schedule-meeting">

apps/webapp/src/script/components/Meeting/MeetingList/meetingList.test.tsx

@@ -99,6 +99,7 @@ const createMeetingStoreForTest = () =>
     hasLoadError: false,
     loadMeetings: jest.fn(),
     scheduleMeeting: jest.fn(),
+    meetNowMeeting: jest.fn(),
     updateMeeting: jest.fn(),
     loadMeetingForEdit: jest.fn(),
   }));

apps/webapp/src/script/components/Meeting/MeetingParticipantsPicker/MeetingParticipantsPicker.tsx

@@ -51,7 +51,7 @@ import {
 
 export interface MeetingParticipantsPickerProps {
   id: string;
-  dataUieName: string;
+  dataUieName?: string;
   users: User[];
   selectedUsers: User[];
   onSelectedUsersChange: (users: User[]) => void;
@@ -166,7 +166,7 @@ export const MeetingParticipantsPicker = ({
       <div
         ref={triggerRef}
         css={controlStyles({isDisabled: disabled, isOpen, markInvalid})}
-        data-uie-name={`${dataUieName}-control`}
+        data-uie-name={dataUieName ? `${dataUieName}-control` : undefined}
         data-disabled={disabled || undefined}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
@@ -175,7 +175,7 @@ export const MeetingParticipantsPicker = ({
         <div css={valueContainerStyles}>
           <SearchIcon aria-hidden="true" css={searchIconStyles} />
           {hasSelection && (
-            <span css={selectedSummaryStyles} data-uie-name={`${dataUieName}-summary`}>
+            <span css={selectedSummaryStyles} data-uie-name={dataUieName ? `${dataUieName}-summary` : undefined}>
               {selectedSummary}
             </span>
           )}
@@ -191,7 +191,7 @@ export const MeetingParticipantsPicker = ({
             disabled={disabled}
             placeholder={showPlaceholder ? placeholder : ''}
             aria-label={placeholder}
-            data-uie-name={`${dataUieName}-input`}
+            data-uie-name={dataUieName ? `${dataUieName}-input` : undefined}
             onChange={event => {
               onFilterChange(event.target.value);
               if (!isOpen) {
@@ -214,7 +214,7 @@ export const MeetingParticipantsPicker = ({
           css={chevronButtonStyles}
           isDisabled={disabled}
           aria-label={label ?? placeholder}
-          data-uie-name={`${dataUieName}-toggle`}
+          data-uie-name={dataUieName ? `${dataUieName}-toggle` : undefined}
           onPress={() => handleOpenChange(!isOpen)}
         >
           <ChevronDownIcon aria-hidden="true" width={16} height={16} css={chevronIconStyles(isOpen)} />
@@ -237,7 +237,7 @@ export const MeetingParticipantsPicker = ({
           <div
             id={listboxId}
             css={listContainerStyles}
-            data-uie-name={`dropdown-${dataUieName}`}
+            data-uie-name={dataUieName ? `dropdown-${dataUieName}` : undefined}
             role="listbox"
             aria-multiselectable="true"
           >
@@ -257,7 +257,7 @@ export const MeetingParticipantsPicker = ({
               allowRemoteSearch
               filterRemoteTeamUsers
               showAllProvidedUsers
-              dataUieName={`${dataUieName}-list`}
+              dataUieName={dataUieName ? `${dataUieName}-list` : undefined}
             />
           </div>
         </div>

apps/webapp/src/script/components/Meeting/MeetingSubmitErrors.ts

@@ -21,6 +21,7 @@ import type {ScheduleFormErrorCode} from './ScheduleFormErrors';
 
 export const meetingSubmitErrors = {
   createFailed: 'createFailed',
+  conversationSetupFailed: 'conversationSetupFailed',
   updateFailed: 'updateFailed',
   editMeetingIdMissing: 'editMeetingIdMissing',
   addParticipantsFailed: 'addParticipantsFailed',

apps/webapp/src/script/components/Meeting/Meetings.tsx

@@ -26,7 +26,9 @@ import {MeetingHeader} from 'Components/Meeting/MeetingHeader/MeetingHeader';
 import {MeetingList} from 'Components/Meeting/MeetingList/MeetingList';
 import {createMeetingStore} from 'Components/Meeting/meetingStore/createMeetingStore';
 import {MeetingStoreProvider, useMeetingStore} from 'Components/Meeting/meetingStore/MeetingStoreProvider';
+import {MeetNowModal} from 'Components/Meeting/meetNowModal/meetNowModal';
 import {ScheduleMeetingModal} from 'Components/Meeting/ScheduleMeetingModal';
+import {meetNowMeeting, scheduleMeeting, updateMeeting} from 'Components/Meeting/shared/service/meetingService';
 import {useApplicationContext} from 'src/script/page/rootProvider';
 
 const MeetingsContent = () => {
@@ -54,6 +56,7 @@ const MeetingsContent = () => {
       </div>
       <MeetingCallingView />
       <ScheduleMeetingModal />
+      <MeetNowModal />
     </div>
   );
 };
@@ -62,15 +65,18 @@ export const Meetings = () => {
   const {mainViewModel, wallClock} = useApplicationContext();
   const {meetings: meetingsRepository, conversation: conversationRepository} = mainViewModel.content.repositories;
 
-  const store = useMemo(
-    () =>
-      createMeetingStore({
-        meetingsRepository,
-        conversationRepository,
-        wallClock,
-      }),
-    [meetingsRepository, conversationRepository, wallClock],
-  );
+  const store = useMemo(() => {
+    const meetingServiceDeps = {meetingsRepository, conversationRepository, wallClock};
+
+    return createMeetingStore({
+      ...meetingServiceDeps,
+      serviceTasks: {
+        scheduleMeeting: command => scheduleMeeting(command, meetingServiceDeps),
+        meetNowMeeting: command => meetNowMeeting(command, meetingServiceDeps),
+        updateMeeting: command => updateMeeting(command, meetingServiceDeps),
+      },
+    });
+  }, [meetingsRepository, conversationRepository, wallClock]);
 
   return (
     <MeetingStoreProvider store={store}>

apps/webapp/src/script/components/Meeting/ScheduleMeetingModal/ScheduleMeetingForm.tsx

@@ -34,10 +34,7 @@ import {
 } from '@wireapp/react-ui-kit';
 
 import {MeetingParticipantsPicker} from 'Components/Meeting/MeetingParticipantsPicker';
-import type {User} from 'Repositories/entity/User';
-import {currentLanguage} from 'src/script/auth/localeConfig';
-import {useApplicationContext} from 'src/script/page/rootProvider';
-
+import {useMeetingParticipants} from 'Components/Meeting/shared/participants/useMeetingParticipants';
 import {
   scheduleMeetingFormColumnCss,
   scheduleMeetingFormDividerCss,
@@ -48,7 +45,11 @@ import {
   scheduleMeetingSelectMenuPortalStyles,
   scheduleMeetingTitleClearButtonStyles,
   scheduleMeetingTitleInputWrapperStyles,
-} from './ScheduleMeetingForm.styles';
+} from 'Components/Meeting/shared/styles/meetingForm.styles';
+import type {User} from 'Repositories/entity/User';
+import {currentLanguage} from 'src/script/auth/localeConfig';
+import {useApplicationContext} from 'src/script/page/rootProvider';
+
 import {
   SCHEDULE_MEETING_RECURRENCE_OPTIONS,
   SCHEDULE_MEETING_RECURRENCE_TRANSLATION_KEYS,
@@ -59,7 +60,6 @@ import type {
   ScheduleMeetingMode,
   ScheduleMeetingRecurrenceOption,
 } from './scheduleMeetingTypes';
-import {useScheduleMeetingParticipants} from './useScheduleMeetingParticipants';
 
 const toDateTimePickerValue = (value: Maybe<Date>): Date | null => value.unwrapOr(null);
 
@@ -95,7 +95,7 @@ export const ScheduleMeetingForm = ({
   selfUser,
 }: ScheduleMeetingFormProps) => {
   const {mainViewModel, translate, wallClock} = useApplicationContext();
-  const {users} = useScheduleMeetingParticipants();
+  const {users} = useMeetingParticipants();
   const portalContainer = getOverlayPortalContainer();
 
   const contentViewModel = mainViewModel.content;
@@ -170,8 +170,15 @@ export const ScheduleMeetingForm = ({
     return startDate.compare(todayValue) > 0 ? startDate : todayValue;
   }, [formState.start, todayValue]);
 
-  const startErrorText = firstNonEmptyError(errors.startInPast);
-  const endErrorText = firstNonEmptyError(errors.endInPast, errors.endBeforeStart);
+  const startErrorText = firstNonEmptyError(
+    errors.startInPast,
+    formState.start.isNothing ? errors.missingTimes : undefined,
+  );
+  const endErrorText = firstNonEmptyError(
+    errors.endInPast,
+    errors.endBeforeStart,
+    formState.end.isNothing ? errors.missingTimes : undefined,
+  );
 
   return (
     <div css={scheduleMeetingFormLayoutCss} data-uie-name="schedule-meeting-form" data-uie-mode={mode}>

apps/webapp/src/script/components/Meeting/ScheduleMeetingModal/ScheduleMeetingModal.tsx

@@ -23,12 +23,6 @@ import {container} from 'tsyringe';
 
 import {Button, ButtonVariant, CalendarIcon, CloseIcon} from '@wireapp/react-ui-kit';
 
-import {ModalComponent} from 'Components/Modals/ModalComponent';
-import {UserState} from 'Repositories/user/userState';
-import {useApplicationContext} from 'src/script/page/rootProvider';
-import {handleEscDown} from 'Util/keyboardUtil';
-
-import {ScheduleMeetingForm} from './ScheduleMeetingForm';
 import {
   bodyStyles,
   closeButtonStyles,
@@ -39,7 +33,14 @@ import {
   submitButtonIconStyles,
   submitButtonStyles,
   wrapperStyles,
-} from './ScheduleMeetingModal.styles';
+} from 'Components/Meeting/shared/styles/meetingModalShell.styles';
+import {ModalComponent} from 'Components/Modals/ModalComponent';
+import {UserState} from 'Repositories/user/userState';
+import {useApplicationContext} from 'src/script/page/rootProvider';
+import {handleEscDown} from 'Util/keyboardUtil';
+
+import {ScheduleMeetingForm} from './ScheduleMeetingForm';
+import {wasScheduleMeetingPersisted} from './scheduleMeetingTypes';
 import {hasScheduleMeetingFormErrors, useScheduleMeetingModal} from './useScheduleMeetingModal';
 import {useScheduleMeetingSubmit} from './useScheduleMeetingSubmit';
 
@@ -66,10 +67,11 @@ export const ScheduleMeetingModal = () => {
 
   const displayErrors = useMemo(
     () => ({
-      title: errors.title ? translate(errors.title) : undefined,
-      startInPast: errors.startInPast ? translate(errors.startInPast) : undefined,
-      endInPast: errors.endInPast ? translate(errors.endInPast) : undefined,
-      endBeforeStart: errors.endBeforeStart ? translate(errors.endBeforeStart) : undefined,
+      title: errors.title !== undefined ? translate(errors.title) : undefined,
+      missingTimes: errors.missingTimes !== undefined ? translate(errors.missingTimes) : undefined,
+      startInPast: errors.startInPast !== undefined ? translate(errors.startInPast) : undefined,
+      endInPast: errors.endInPast !== undefined ? translate(errors.endInPast) : undefined,
+      endBeforeStart: errors.endBeforeStart !== undefined ? translate(errors.endBeforeStart) : undefined,
     }),
     [errors, translate],
   );
@@ -86,8 +88,8 @@ export const ScheduleMeetingModal = () => {
     }
 
     fireAndForgetInvoker.fireAndForget(async (): Promise<void> => {
-      const didSchedule = await submit(formState);
-      if (didSchedule) {
+      const submitResult = await submit(formState);
+      if (wasScheduleMeetingPersisted(submitResult)) {
         handleClose();
       }
     });

apps/webapp/src/script/components/Meeting/ScheduleMeetingModal/scheduleMeetingTypes.ts

@@ -36,20 +36,43 @@ export interface ScheduleMeetingFormState {
 
 export type ScheduleMeetingFormErrorKey =
   | 'meetings.scheduleModal.error.titleRequired'
+  | 'meetings.scheduleModal.error.missingTimes'
   | 'meetings.scheduleModal.error.endBeforeStart'
   | 'meetings.schedule.errors.startInPast'
   | 'meetings.schedule.errors.endInPast';
 
 export interface ScheduleMeetingFormErrors {
-  title?: ScheduleMeetingFormErrorKey;
-  startInPast?: ScheduleMeetingFormErrorKey;
-  endInPast?: ScheduleMeetingFormErrorKey;
-  endBeforeStart?: ScheduleMeetingFormErrorKey;
+  title: ScheduleMeetingFormErrorKey | undefined;
+  missingTimes: ScheduleMeetingFormErrorKey | undefined;
+  startInPast: ScheduleMeetingFormErrorKey | undefined;
+  endInPast: ScheduleMeetingFormErrorKey | undefined;
+  endBeforeStart: ScheduleMeetingFormErrorKey | undefined;
 }
 
+export const emptyScheduleMeetingFormErrors = (): ScheduleMeetingFormErrors => ({
+  title: undefined,
+  missingTimes: undefined,
+  startInPast: undefined,
+  endInPast: undefined,
+  endBeforeStart: undefined,
+});
+
 export interface ScheduleMeetingFormDisplayErrors {
-  title?: string;
-  startInPast?: string;
-  endInPast?: string;
-  endBeforeStart?: string;
+  title: string | undefined;
+  missingTimes: string | undefined;
+  startInPast: string | undefined;
+  endInPast: string | undefined;
+  endBeforeStart: string | undefined;
 }
+
+export const scheduleMeetingSubmitResults = {
+  submitFailed: 'submitFailed',
+  setupFailed: 'setupFailed',
+  succeeded: 'succeeded',
+} as const;
+
+export type ScheduleMeetingSubmitResult =
+  (typeof scheduleMeetingSubmitResults)[keyof typeof scheduleMeetingSubmitResults];
+
+export const wasScheduleMeetingPersisted = (result: ScheduleMeetingSubmitResult): boolean =>
+  result !== scheduleMeetingSubmitResults.submitFailed;