Fix issue with google meet not opening on Android

src/CONST.js

@@ -188,6 +188,7 @@ const CONST = {
     USE_EXPENSIFY_URL,
     NEW_ZOOM_MEETING_URL: 'https://zoom.us/start/videomeeting',
     NEW_GOOGLE_MEET_MEETING_URL: 'https://meet.google.com/new',
+    GOOGLE_MEET_URL_ANDROID: 'https://meet.google.com',
     DEEPLINK_BASE_URL: 'new-expensify://',
     PDF_VIEWER_URL: '/pdf/web/viewer.html',
     EXPENSIFY_ICON_URL: `${CLOUDFRONT_URL}/images/favicon-2019.png`,

src/components/VideoChatButtonAndMenu.js → src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js

@@ -3,34 +3,24 @@ import React, {Component} from 'react';
 import {
     View, Pressable, Dimensions, Linking,
 } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import Popover from './Popover';
-import MenuItem from './MenuItem';
-import ZoomIcon from '../../assets/images/zoom-icon.svg';
-import GoogleMeetIcon from '../../assets/images/google-meet.svg';
-import CONST from '../CONST';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Tooltip from './Tooltip';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import Popover from '../Popover';
+import MenuItem from '../MenuItem';
+import ZoomIcon from '../../../assets/images/zoom-icon.svg';
+import GoogleMeetIcon from '../../../assets/images/google-meet.svg';
+import CONST from '../../CONST';
+import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
+import withWindowDimensions from '../withWindowDimensions';
+import withLocalize from '../withLocalize';
+import compose from '../../libs/compose';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import Tooltip from '../Tooltip';
+import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
-    isConcierge: PropTypes.bool,
-};
-
-const defaultProps = {
-    isConcierge: false,
-};
-
-class VideoChatButtonAndMenu extends Component {
+class BaseVideoChatButtonAndMenu extends Component {
     constructor(props) {
         super(props);
 
@@ -53,7 +43,7 @@ class VideoChatButtonAndMenu extends Component {
                 text: props.translate('videoChatButtonAndMenu.googleMeet'),
                 onPress: () => {
                     this.toggleVideoChatMenu();
-                    Linking.openURL(CONST.NEW_GOOGLE_MEET_MEETING_URL);
+                    Linking.openURL(this.props.newGoogleMeetingUrl || CONST.NEW_GOOGLE_MEET_MEETING_URL);
                 },
             },
         ];
@@ -148,10 +138,10 @@ class VideoChatButtonAndMenu extends Component {
     }
 }
 
-VideoChatButtonAndMenu.propTypes = propTypes;
-VideoChatButtonAndMenu.defaultProps = defaultProps;
+BaseVideoChatButtonAndMenu.propTypes = propTypes;
+BaseVideoChatButtonAndMenu.defaultProps = defaultProps;
 
 export default compose(
     withWindowDimensions,
     withLocalize,
-)(VideoChatButtonAndMenu);
+)(BaseVideoChatButtonAndMenu);

src/components/VideoChatButtonAndMenu/index.android.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CONST from '../../CONST';
+import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
+import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
+
+// On Android creating a new google meet meeting requires the CALL_PHONE permission in some cases
+// so we're just opening the google meet app instead, more details:
+// https://github.com/Expensify/App/issues/8851#issuecomment-1120236904
+const VideoChatButtonAndMenu = props => (
+    <BaseVideoChatButtonAndMenu
+        newGoogleMeetingUrl={CONST.GOOGLE_MEET_URL_ANDROID}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+);
+
+VideoChatButtonAndMenu.propTypes = propTypes;
+VideoChatButtonAndMenu.defaultProps = defaultProps;
+VideoChatButtonAndMenu.displayName = 'VideoChatButtonAndMenu';
+export default VideoChatButtonAndMenu;

src/components/VideoChatButtonAndMenu/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {propTypes, defaultProps} from './videoChatButtonAndMenuPropTypes';
+import BaseVideoChatButtonAndMenu from './BaseVideoChatButtonAndMenu';
+
+const VideoChatButtonAndMenu = props => (
+    <BaseVideoChatButtonAndMenu
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+);
+
+VideoChatButtonAndMenu.propTypes = propTypes;
+VideoChatButtonAndMenu.defaultProps = defaultProps;
+VideoChatButtonAndMenu.displayName = 'VideoChatButtonAndMenu';
+export default VideoChatButtonAndMenu;

src/components/VideoChatButtonAndMenu/videoChatButtonAndMenuPropTypes.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
+import {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    /** If this is the Concierge chat, we'll open the modal for requesting a setup call instead of showing popover menu */
+    isConcierge: PropTypes.bool,
+
+    /** Link to open when user wants to create a new google meet meeting */
+    newGoogleMeetingUrl: PropTypes.string,
+
+    ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    isConcierge: false,
+};
+
+export {propTypes, defaultProps};