Add Video Call Chat Links

src/CONST.js

@@ -11,6 +11,8 @@ const CONST = {
         PRESSED: 'pressed',
     },
     CLOUDFRONT_URL,
+    NEW_ZOOM_MEETING_URL: 'https://zoom.us/start/videomeeting',
+    NEW_GOOGLE_MEET_MEETING_URL: 'https://meet.google.com/new',
     PDF_VIEWER_URL: '/pdf/web/viewer.html',
     EXPENSIFY_ICON_URL: `${CLOUDFRONT_URL}/images/favicon-2019.png`,
     UPWORK_URL: 'https://www.upwork.com/ab/jobs/search/?q=Expensify%20React%20Native&user_location_match=2',

src/components/Icon/index.js

@@ -7,7 +7,10 @@ import * as Expensicons from './Expensicons';
 
 const propTypes = {
     // The asset to render.
-    src: PropTypes.oneOf(_.values(Expensicons)).isRequired,
+    src: PropTypes.oneOfType([
+        PropTypes.oneOf(_.values(Expensicons)),
+        PropTypes.func,
+    ]).isRequired,
 
     // The width of the icon.
     width: PropTypes.number,

src/components/VideoChatMenu.js

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Popover from './Popover';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import MenuItem from './MenuItem';
+import openURLInNewTab from '../libs/openURLInNewTab';
+import ZoomIcon from '../../assets/images/Zoom - Blue.svg';
+import GoogleMeetIcon from '../../assets/images/google-meet.svg';
+import CONST from '../CONST';
+
+const propTypes = {
+    // State that determines whether to display the create menu or not
+    isVisible: PropTypes.bool.isRequired,
+
+    // Callback that determines behavior when menu is closed
+    onClose: PropTypes.func.isRequired,
+
+    ...windowDimensionsPropTypes,
+};
+
+class VideoChatMenu extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const menuItemData = [
+            {
+                icon: ZoomIcon,
+                text: 'Zoom',
+                onPress: () => openURLInNewTab(CONST.NEW_ZOOM_MEETING_URL),
+            },
+            {
+                icon: GoogleMeetIcon,
+                text: 'Google Meet',
+                onPress: () => openURLInNewTab(CONST.NEW_GOOGLE_MEET_MEETING_URL),
+            },
+        ].map(item => ({
+            ...item,
+            onPress: () => {
+                this.props.onItemSelected();
+                item.onPress();
+            },
+        }));
+        return (
+            <Popover
+                onClose={this.props.onClose}
+                isVisible={this.props.isVisible}
+                anchorPosition={{
+                    left: this.props.windowWidth - 250,
+                    top: 50,
+                }}
+            >
+                {menuItemData.map(({icon, text, onPress}) => (
+                    <MenuItem
+                        key={text}
+                        icon={icon}
+                        title={text}
+                        onPress={onPress}
+                    />
+                ))}
+            </Popover>
+        );
+    }
+}
+
+VideoChatMenu.propTypes = propTypes;
+VideoChatMenu.displayName = 'VideoChatMenu';
+export default withWindowDimensions(VideoChatMenu);

src/pages/home/HeaderView.js

@@ -7,7 +7,7 @@ import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import themeColors from '../../styles/themes/default';
 import Icon from '../../components/Icon';
-import {BackArrow, Pin} from '../../components/Icon/Expensicons';
+import {BackArrow, Pin, Trashcan} from '../../components/Icon/Expensicons';
 import compose from '../../libs/compose';
 import {togglePinnedState} from '../../libs/actions/Report';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
@@ -23,6 +23,9 @@ const propTypes = {
     // Toggles the navigationMenu open and closed
     onNavigationMenuButtonClicked: PropTypes.func.isRequired,
 
+    // Toggles the videoChatMenu open and closed
+    onVideoChatMenuButtonClicked: PropTypes.func.isRequired,
+
     /* Onyx Props */
     // The report currently being looked at
     report: PropTypes.shape({
@@ -96,6 +99,15 @@ const HeaderView = (props) => {
                             </View>
                         </Pressable>
                         <View style={[styles.reportOptions, styles.flexRow]}>
+                            <Pressable
+                                onPress={() => props.onVideoChatMenuButtonClicked()}
+                                style={[styles.touchableButtonImage, styles.mr0]}
+                            >
+                                <Icon
+                                    src={Trashcan}
+                                    fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
+                                />
+                            </Pressable>
                             <Pressable
                                 onPress={() => togglePinnedState(props.report)}
                                 style={[styles.touchableButtonImage, styles.mr0]}

src/pages/home/ReportScreen.js

@@ -9,6 +9,7 @@ import HeaderView from './HeaderView';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import ONYXKEYS from '../../ONYXKEYS';
+import VideoChatMenu from '../../components/VideoChatMenu';
 
 const propTypes = {
     // id of the most recently viewed report
@@ -19,32 +20,55 @@ const defaultProps = {
     currentlyViewedReportID: 0,
 };
 
-const ReportScreen = (props) => {
-    const activeReportID = parseInt(props.currentlyViewedReportID, 10);
-    if (!activeReportID) {
-        return null;
+class ReportScreen extends React.Component {
+    constructor(props) {
+        super(props);
+        this.toggleVideoChatMenu = this.toggleVideoChatMenu.bind(this);
+
+        this.state = {
+            isVideoChatMenuActive: false,
+        };
     }
 
-    return (
-        <ScreenWrapper
-            style={[
-                styles.appContent,
-                styles.flex1,
-                styles.flexColumn,
-            ]}
-        >
-            <HeaderView
-                reportID={activeReportID}
-                onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
-            />
-            <View style={[styles.dFlex, styles.flex1]}>
-                <ReportView reportID={activeReportID} />
-            </View>
-        </ScreenWrapper>
-    );
-};
+    toggleVideoChatMenu() {
+        this.setState(state => ({
+            isVideoChatMenuActive: !state.isVideoChatMenuActive,
+        }));
+    }
+
+    render() {
+        const activeReportID = parseInt(this.props.currentlyViewedReportID, 10);
+        if (!activeReportID) {
+            return null;
+        }
+        return (
+            <ScreenWrapper
+                style={[
+                    styles.appContent,
+                    styles.flex1,
+                    styles.flexColumn,
+                ]}
+            >
+                <HeaderView
+                    reportID={activeReportID}
+                    onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
+                    onVideoChatMenuButtonClicked={this.toggleVideoChatMenu}
+                />
+                <VideoChatMenu
+                    onClose={this.toggleVideoChatMenu}
+                    isVisible={this.state.isVideoChatMenuActive}
+                    onItemSelected={this.toggleVideoChatMenu}
+                />
+                <View style={[styles.dFlex, styles.flex1]}>
+                    <ReportView
+                        reportID={activeReportID}
+                    />
+                </View>
+            </ScreenWrapper>
+        );
+    }
+}
 
-ReportScreen.displayName = 'ReportScreen';
 ReportScreen.propTypes = propTypes;
 ReportScreen.defaultProps = defaultProps;
 export default withOnyx({