Skip to content

Create the RequestCallPage #3697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Jun 23, 2021
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/ROUTES.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export default {
getWorkspaceRoute: policyID => `workspace/${policyID}`,
WORKSPACE_INVITE: 'workspace/:policyID/invite',
getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
REQUEST_CALL: 'request-call',

/**
* @param {String} route
Expand Down
87 changes: 87 additions & 0 deletions src/components/FullNameInputRow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import {TextInput, View} from 'react-native';
import _ from 'underscore';
import styles from '../styles/styles';
import Text from './Text';
import themeColors from '../styles/themes/default';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you use JSX then React must be included


const propTypes = {
...withLocalizePropTypes,

/** Called when text is entered into the firstName input */
onChangeFirstName: PropTypes.func.isRequired,

/** Called when text is entered into the lastName input */
onChangeLastName: PropTypes.func.isRequired,

/** Used to prefill the firstName input, can also be used to make it a controlled input */
firstName: PropTypes.string,

/** Placeholder text for the firstName input */
firstNamePlaceholder: PropTypes.string,

/** Used to prefill the lastName input, can also be used to make it a controlled input */
lastName: PropTypes.string,

/** Placeholder text for the lastName input */
lastNamePlaceholder: PropTypes.string,

/** Additional styles to add after local styles */
style: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.object),
PropTypes.object,
]),
};
const defaultProps = {
firstName: '',
firstNamePlaceholder: null,
lastName: '',
lastNamePlaceholder: null,
style: {},
};

const FullNameInputRow = ({
translate,
onChangeFirstName, onChangeLastName,
firstName, lastName,
firstNamePlaceholder,
lastNamePlaceholder,
style,
}) => {
const additionalStyles = _.isArray(style) ? style : [style];
return (
<View style={[styles.flexRow, ...additionalStyles]}>
<View style={styles.flex1}>
<Text style={[styles.mb1, styles.formLabel]}>
{translate('common.firstName')}
</Text>
<TextInput
style={styles.textInput}
value={firstName}
onChangeText={onChangeFirstName}
placeholder={firstNamePlaceholder ?? translate('profilePage.john')}
placeholderTextColor={themeColors.placeholderText}
/>
</View>
<View style={[styles.flex1, styles.ml2]}>
<Text style={[styles.mb1, styles.formLabel]}>
{translate('common.lastName')}
</Text>
<TextInput
style={styles.textInput}
value={lastName}
onChangeText={onChangeLastName}
placeholder={lastNamePlaceholder ?? translate('profilePage.doe')}
placeholderTextColor={themeColors.placeholderText}
/>
</View>
</View>
);
};

FullNameInputRow.displayName = 'FullNameInputRow';
FullNameInputRow.propTypes = propTypes;
FullNameInputRow.defaultProps = defaultProps;
export default withLocalize(FullNameInputRow);
16 changes: 15 additions & 1 deletion src/components/VideoChatButtonAndMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {Component} from 'react';
import {
View, Pressable, Dimensions, Linking,
} from 'react-native';
import PropTypes from 'prop-types';
import Icon from './Icon';
import {Phone} from './Icon/Expensicons';
import Popover from './Popover';
Expand All @@ -14,10 +15,17 @@ 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';

const propTypes = {
...withLocalizePropTypes,
...windowDimensionsPropTypes,
isConcierge: PropTypes.bool,
};

const defaultProps = {
isConcierge: false,
};

class VideoChatButtonAndMenu extends Component {
Expand Down Expand Up @@ -89,13 +97,18 @@ class VideoChatButtonAndMenu extends Component {
>
<Pressable
onPress={() => {
// If this is the Concierge chat, we'll open the modal for requesting a setup call instead
if (this.props.isConcierge) {
Navigation.navigate(ROUTES.REQUEST_CALL);
return;
}
this.toggleVideoChatMenu();
}}
style={[styles.touchableButtonImage, styles.mr0]}
>
<Icon
src={Phone}
fill={this.state.isVideoChatMenuActive
fill={(this.props.isConcierge || this.state.isVideoChatMenuActive)
? themeColors.heading
: themeColors.icon}
/>
Expand Down Expand Up @@ -127,6 +140,7 @@ class VideoChatButtonAndMenu extends Component {
}

VideoChatButtonAndMenu.propTypes = propTypes;
VideoChatButtonAndMenu.defaultProps = defaultProps;
VideoChatButtonAndMenu.displayName = 'VideoChatButtonAndMenu';
export default compose(
withWindowDimensions,
Expand Down
10 changes: 10 additions & 0 deletions src/languages/es.js
Original file line number Diff line number Diff line change
Expand Up @@ -405,4 +405,14 @@ export default {
growlMessageInvalidPhone: 'El teléfono no es valido. Intentalo de nuevo agregando el código de país. P. ej.: +15005550006',
growlMessageEmptyName: 'Por favor ingresa tu nombre completo',
},
requestCallPage: {
requestACall: 'Llámame por teléfono',
description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte.',
instructions: 'Escribe tu nombre y número de teléfono y te llamaremos.',
availabilityText: '*Nuestros guías están disponibles de domingo desde las 17.00 CT a viernes hasta las 17.00 CT. Si solicitas una llamada fuera de este horario, te llamaremos de lunes a viernes de 9.00 a 17.00 en tu hora local. El orden de llamada corresponde con el orden de solicitud.',
callMe: 'Llámame',
growlMessageOnSave: 'Llamada solicitada.',
growlMessageInvalidPhone: 'El teléfono no es valido. Intentalo de nuevo agregando el código de país. P. ej.: +15005550006',
growlMessageEmptyName: 'Por favor ingresa tu nombre completo',
},
};
7 changes: 7 additions & 0 deletions src/libs/Navigation/AppNavigator/AuthScreens.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import {
ReimbursementAccountModalStackNavigator,
NewWorkspaceStackNavigator,
WorkspaceInviteModalStackNavigator,
RequestCallModalStackNavigator,
} from './ModalStackNavigators';
import SCREENS from '../../../SCREENS';
import Timers from '../../Timers';
Expand Down Expand Up @@ -306,6 +307,12 @@ class AuthScreens extends React.Component {
component={WorkspaceInviteModalStackNavigator}
listeners={modalScreenListeners}
/>
<RootStack.Screen
name="RequestCall"
options={modalScreenOptions}
component={RequestCallModalStackNavigator}
listeners={modalScreenListeners}
/>
</RootStack.Navigator>
);
}
Expand Down
7 changes: 7 additions & 0 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import AddPersonalBankAccountPage from '../../../pages/AddPersonalBankAccountPag
import WorkspaceInvitePage from '../../../pages/workspace/WorkspaceInvitePage';
import ReimbursementAccountPage from '../../../pages/ReimbursementAccount/ReimbursementAccountPage';
import NewWorkspacePage from '../../../pages/workspace/NewWorkspacePage';
import RequestCallPage from '../../../pages/RequestCallPage';

const defaultSubRouteOptions = {
cardStyle: styles.navigationScreenCardStyle,
Expand Down Expand Up @@ -170,6 +171,11 @@ const WorkspaceInviteModalStackNavigator = createModalStackNavigator([{
name: 'WorkspaceInvite_Root',
}]);

const RequestCallModalStackNavigator = createModalStackNavigator([{
Component: RequestCallPage,
name: 'RequestCall_Root',
}]);

export {
IOUBillStackNavigator,
IOURequestModalStackNavigator,
Expand All @@ -185,4 +191,5 @@ export {
ReimbursementAccountModalStackNavigator,
NewWorkspaceStackNavigator,
WorkspaceInviteModalStackNavigator,
RequestCallModalStackNavigator,
};
5 changes: 5 additions & 0 deletions src/libs/Navigation/linkingConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@ export default {
NewWorkspace_Root: ROUTES.WORKSPACE_NEW,
},
},
RequestCall: {
screens: {
RequestCall_Root: ROUTES.REQUEST_CALL,
},
},
},
},
};
Loading