您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

AbstractAddPeopleDialog.js 8.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. // @flow
  2. import { Component } from 'react';
  3. import { createInviteDialogEvent, sendAnalytics } from '../../../analytics';
  4. import {
  5. NOTIFICATION_TIMEOUT,
  6. showNotification
  7. } from '../../../notifications';
  8. import { invite } from '../../actions';
  9. import { INVITE_TYPES } from '../../constants';
  10. import {
  11. getInviteResultsForQuery,
  12. getInviteTypeCounts,
  13. isAddPeopleEnabled,
  14. isDialOutEnabled,
  15. isSipInviteEnabled
  16. } from '../../functions';
  17. import logger from '../../logger';
  18. export type Props = {
  19. /**
  20. * Whether or not to show Add People functionality.
  21. */
  22. _addPeopleEnabled: boolean,
  23. /**
  24. * Whether or not call flows are enabled.
  25. */
  26. _callFlowsEnabled: boolean,
  27. /**
  28. * The URL for validating if a phone number can be called.
  29. */
  30. _dialOutAuthUrl: string,
  31. /**
  32. * Whether or not to show Dial Out functionality.
  33. */
  34. _dialOutEnabled: boolean,
  35. /**
  36. * Whether or not to allow sip invites.
  37. */
  38. _sipInviteEnabled: boolean,
  39. /**
  40. * The JWT token.
  41. */
  42. _jwt: string,
  43. /**
  44. * The query types used when searching people.
  45. */
  46. _peopleSearchQueryTypes: Array<string>,
  47. /**
  48. * The URL pointing to the service allowing for people search.
  49. */
  50. _peopleSearchUrl: string,
  51. /**
  52. * The Redux dispatch function.
  53. */
  54. dispatch: Function
  55. };
  56. export type State = {
  57. /**
  58. * Indicating that an error occurred when adding people to the call.
  59. */
  60. addToCallError: boolean,
  61. /**
  62. * Indicating that we're currently adding the new people to the
  63. * call.
  64. */
  65. addToCallInProgress: boolean,
  66. /**
  67. * The list of invite items.
  68. */
  69. inviteItems: Array<Object>,
  70. };
  71. /**
  72. * Implements an abstract dialog to invite people to the conference.
  73. */
  74. export default class AbstractAddPeopleDialog<P: Props, S: State>
  75. extends Component<P, S> {
  76. /**
  77. * Constructor of the component.
  78. *
  79. * @inheritdoc
  80. */
  81. constructor(props: P) {
  82. super(props);
  83. this._query = this._query.bind(this);
  84. }
  85. /**
  86. * Retrieves the notification display name for the invitee.
  87. *
  88. * @param {Object} invitee - The invitee object.
  89. * @returns {string}
  90. */
  91. _getDisplayName(invitee) {
  92. if (invitee.type === INVITE_TYPES.PHONE) {
  93. return invitee.number;
  94. }
  95. if (invitee.type === INVITE_TYPES.SIP) {
  96. return invitee.address;
  97. }
  98. return invitee.name;
  99. }
  100. /**
  101. * Invite people and numbers to the conference. The logic works by inviting
  102. * numbers, people/rooms, sip endpoints and videosipgw in parallel. All invitees are
  103. * stored in an array. As each invite succeeds, the invitee is removed
  104. * from the array. After all invites finish, close the modal if there are
  105. * no invites left to send. If any are left, that means an invite failed
  106. * and an error state should display.
  107. *
  108. * @param {Array<Object>} invitees - The items to be invited.
  109. * @returns {Promise<Array<Object>>}
  110. */
  111. _invite(invitees) {
  112. const inviteTypeCounts = getInviteTypeCounts(invitees);
  113. sendAnalytics(createInviteDialogEvent(
  114. 'clicked', 'inviteButton', {
  115. ...inviteTypeCounts,
  116. inviteAllowed: this._isAddDisabled()
  117. }));
  118. if (this._isAddDisabled()) {
  119. return Promise.resolve([]);
  120. }
  121. this.setState({
  122. addToCallInProgress: true
  123. });
  124. const { _callFlowsEnabled, dispatch } = this.props;
  125. return dispatch(invite(invitees))
  126. .then(invitesLeftToSend => {
  127. this.setState({
  128. addToCallInProgress: false
  129. });
  130. // If any invites are left that means something failed to send
  131. // so treat it as an error.
  132. if (invitesLeftToSend.length) {
  133. const erroredInviteTypeCounts
  134. = getInviteTypeCounts(invitesLeftToSend);
  135. logger.error(`${invitesLeftToSend.length} invites failed`,
  136. erroredInviteTypeCounts);
  137. sendAnalytics(createInviteDialogEvent(
  138. 'error', 'invite', {
  139. ...erroredInviteTypeCounts
  140. }));
  141. this.setState({
  142. addToCallError: true
  143. });
  144. } else if (!_callFlowsEnabled) {
  145. const invitedCount = invitees.length;
  146. let notificationProps;
  147. if (invitedCount >= 3) {
  148. notificationProps = {
  149. titleArguments: {
  150. name: this._getDisplayName(invitees[0]),
  151. count: invitedCount - 1
  152. },
  153. titleKey: 'notify.invitedThreePlusMembers'
  154. };
  155. } else if (invitedCount === 2) {
  156. notificationProps = {
  157. titleArguments: {
  158. first: this._getDisplayName(invitees[0]),
  159. second: this._getDisplayName(invitees[1])
  160. },
  161. titleKey: 'notify.invitedTwoMembers'
  162. };
  163. } else if (invitedCount) {
  164. notificationProps = {
  165. titleArguments: {
  166. name: this._getDisplayName(invitees[0])
  167. },
  168. titleKey: 'notify.invitedOneMember'
  169. };
  170. }
  171. if (notificationProps) {
  172. dispatch(
  173. showNotification(notificationProps, NOTIFICATION_TIMEOUT));
  174. }
  175. }
  176. return invitesLeftToSend;
  177. });
  178. }
  179. /**
  180. * Indicates if the Add button should be disabled.
  181. *
  182. * @private
  183. * @returns {boolean} - True to indicate that the Add button should
  184. * be disabled, false otherwise.
  185. */
  186. _isAddDisabled() {
  187. return !this.state.inviteItems.length
  188. || this.state.addToCallInProgress;
  189. }
  190. _query: (?string) => Promise<Array<Object>>;
  191. /**
  192. * Performs a people and phone number search request.
  193. *
  194. * @param {string} query - The search text.
  195. * @private
  196. * @returns {Promise}
  197. */
  198. _query(query = '') {
  199. const {
  200. _addPeopleEnabled: addPeopleEnabled,
  201. _dialOutAuthUrl: dialOutAuthUrl,
  202. _dialOutEnabled: dialOutEnabled,
  203. _jwt: jwt,
  204. _peopleSearchQueryTypes: peopleSearchQueryTypes,
  205. _peopleSearchUrl: peopleSearchUrl,
  206. _sipInviteEnabled: sipInviteEnabled
  207. } = this.props;
  208. const options = {
  209. addPeopleEnabled,
  210. dialOutAuthUrl,
  211. dialOutEnabled,
  212. jwt,
  213. peopleSearchQueryTypes,
  214. peopleSearchUrl,
  215. sipInviteEnabled
  216. };
  217. return getInviteResultsForQuery(query, options);
  218. }
  219. }
  220. /**
  221. * Maps (parts of) the Redux state to the props of this component.
  222. *
  223. * @param {Object} state - The Redux state.
  224. * @private
  225. * @returns {{
  226. * _addPeopleEnabled: boolean,
  227. * _dialOutAuthUrl: string,
  228. * _dialOutEnabled: boolean,
  229. * _jwt: string,
  230. * _peopleSearchQueryTypes: Array<string>,
  231. * _peopleSearchUrl: string
  232. * }}
  233. */
  234. export function _mapStateToProps(state: Object) {
  235. const {
  236. callFlowsEnabled,
  237. dialOutAuthUrl,
  238. peopleSearchQueryTypes,
  239. peopleSearchUrl
  240. } = state['features/base/config'];
  241. return {
  242. _addPeopleEnabled: isAddPeopleEnabled(state),
  243. _callFlowsEnabled: callFlowsEnabled,
  244. _dialOutAuthUrl: dialOutAuthUrl,
  245. _dialOutEnabled: isDialOutEnabled(state),
  246. _jwt: state['features/base/jwt'].jwt,
  247. _peopleSearchQueryTypes: peopleSearchQueryTypes,
  248. _peopleSearchUrl: peopleSearchUrl,
  249. _sipInviteEnabled: isSipInviteEnabled(state)
  250. };
  251. }