Merge pull request #3255 from mozilla/redesign/leave-room-modal

Room UI Redesign: Leave Room Modal

src/assets/locales/en.json

@@ -441,7 +441,7 @@
   "leave-room-dialog.join-room.message": "Joining a new room will leave this one. Are you sure?",
   "leave-room-dialog.join-room.confirm": "Join Room",
   "leave-room-dialog.create-room.message": "Creating a new room will leave this one. Are you sure?",
-  "leave-room-dialog.create-room.confirm": "Leave Room",
+  "leave-room-dialog.create-room.confirm": "Leave and Create Room",
   "embed.load-button": "Load Room",
   "embed.presence-warning": "This room is embedded, so may be visible to visitors on other websites.",
   "tweet-dialog.tweet": "Tweet",

src/assets/locales/jp.json

@@ -438,7 +438,7 @@
   "leave-room-dialog.join-room.message": "新しい部屋に参加すると,この部屋から退室します。よろしいですか？",
   "leave-room-dialog.join-room.confirm": "Join Room",
   "leave-room-dialog.create-room.message": "新しい部屋を作成し、この部屋が残ります。よろしいですか？",
-  "leave-room-dialog.create-room.confirm": "Leave Room",
+  "leave-room-dialog.create-room.confirm": "Leave and Create Room",
   "embed.load-button": "ロードルーム",
   "embed.presence-warning": "この部屋は埋め込まれているため,他のWebサイトの訪問者に表示される可能性があります。",
   "tweet-dialog.tweet": "Tweet",

src/react-components/room/LeaveRoomModal.js

@@ -0,0 +1,53 @@
+import React from "react";
+import styles from "./LeaveRoomModal.scss";
+import { useIntl, defineMessages } from "react-intl";
+import PropTypes from "prop-types";
+import { Modal } from "../modal/Modal";
+import { CloseButton } from "../input/CloseButton";
+import { Button } from "../input/Button";
+
+export const LeaveReason = {
+  joinRoom: "joinRoom",
+  createRoom: "createRoom"
+};
+
+const reasonMessages = defineMessages({
+  [LeaveReason.joinRoom]: {
+    id: "leave-room-dialog.join-room.message",
+    defaultMessage: "Joining a new room will leave this one. Are you sure?"
+  },
+  [LeaveReason.createRoom]: {
+    id: "leave-room-dialog.create-room.message",
+    defaultMessage: "Creating a new room will leave this one. Are you sure?"
+  }
+});
+
+const confirmationMessages = defineMessages({
+  [LeaveReason.joinRoom]: {
+    id: "leave-room-dialog.join-room.confirm",
+    defaultMessage: "Join Room"
+  },
+  [LeaveReason.createRoom]: {
+    id: "leave-room-dialog.create-room.confirm",
+    defaultMessage: "Leave and Create Room"
+  }
+});
+
+export function LeaveRoomModal({ reason, destinationUrl, onClose }) {
+  const intl = useIntl();
+
+  return (
+    <Modal title="Leave Room" beforeTitle={<CloseButton onClick={onClose} />} contentClassName={styles.leaveRoomModal}>
+      <p>{intl.formatMessage(reasonMessages[reason])}</p>
+      <Button as="a" preset="cancel" href={destinationUrl} rel="noopener noreferrer">
+        {intl.formatMessage(confirmationMessages[reason])}
+      </Button>
+    </Modal>
+  );
+}
+
+LeaveRoomModal.propTypes = {
+  reason: PropTypes.string,
+  destinationUrl: PropTypes.string,
+  onClose: PropTypes.func
+};

src/react-components/room/LeaveRoomModal.scss

@@ -0,0 +1,17 @@
+:local(.leave-room-modal) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+  line-height: 1.25;
+
+  & > * {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/react-components/room/LeaveRoomModal.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { RoomLayout } from "../layout/RoomLayout";
+import { LeaveReason, LeaveRoomModal } from "./LeaveRoomModal";
+
+export default {
+  title: "LeaveRoomModal",
+  parameters: {
+    layout: "fullscreen"
+  },
+  args: {
+    destinationUrl: "#"
+  }
+};
+
+export const LeaveRoom = args => <RoomLayout modal={<LeaveRoomModal reason={LeaveReason.joinRoom} {...args} />} />;
+
+export const CreateRoom = args => <RoomLayout modal={<LeaveRoomModal reason={LeaveReason.createRoom} {...args} />} />;

src/react-components/ui-root.js

@@ -35,7 +35,6 @@ import Tip from "./tip.js";
 import WebRTCScreenshareUnsupportedDialog from "./webrtc-screenshare-unsupported-dialog.js";
 import WebVRRecommendDialog from "./webvr-recommend-dialog.js";
 import FeedbackDialog from "./feedback-dialog.js";
-import LeaveRoomDialog from "./leave-room-dialog.js";
 import ClientInfoDialog from "./client-info-dialog.js";
 import OAuthDialog from "./oauth-dialog.js";
 import TweetDialog from "./tweet-dialog.js";
@@ -95,6 +94,7 @@ import { ReactionPopoverContainer } from "./room/ReactionPopoverContainer";
 import { SafariMicModal } from "./room/SafariMicModal";
 import { RoomSignInModalContainer } from "./auth/RoomSignInModalContainer";
 import { SignInStep } from "./auth/SignInModal";
+import { LeaveReason, LeaveRoomModal } from "./room/LeaveRoomModal";
 import { RoomSidebar } from "./room/RoomSidebar";
 import { RoomSettingsSidebarContainer } from "./room/RoomSettingsSidebarContainer";
 import { AutoExitWarningModal, AutoExitReason } from "./room/AutoExitWarningModal";
@@ -1302,9 +1302,9 @@ class UIRoot extends Component {
             label: "Create Room",
             icon: HomeIcon,
             onClick: () =>
-              this.showNonHistoriedDialog(LeaveRoomDialog, {
+              this.showNonHistoriedDialog(LeaveRoomModal, {
                 destinationUrl: "/",
-                messageType: "create-room"
+                reacon: LeaveReason.createRoom
               })
           },
           {
@@ -1484,9 +1484,9 @@ class UIRoot extends Component {
                 hubChannel={this.props.hubChannel}
                 onMediaSearchResultEntrySelected={(entry, selectAction) => {
                   if (entry.type === "room") {
-                    this.showNonHistoriedDialog(LeaveRoomDialog, {
+                    this.showNonHistoriedDialog(LeaveRoomModal, {
                       destinationUrl: entry.url,
-                      messageType: "join-room"
+                      reason: LeaveReason.joinRoom
                     });
                   } else {
                     this.props.onMediaSearchResultEntrySelected(entry, selectAction);