import {Fragment} from 'react';
import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
import type {ModalRenderProps} from 'sentry/actionCreators/modal';
import {Button} from 'sentry/components/button';
import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
import TextareaField from 'sentry/components/forms/fields/textareaField';
import {t} from 'sentry/locale';
import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
import TextBlock from 'sentry/views/settings/components/text/textBlock';
import type RequestIntegrationButton from './RequestIntegrationButton';
type Props = {
onSuccess: () => void;
} & RequestIntegrationButton['props'] &
ModalRenderProps &
DeprecatedAsyncComponent['props'];
type State = {
isSending: boolean;
message: string;
} & DeprecatedAsyncComponent['state'];
/**
* This modal serves as a non-owner's confirmation step before sending
* organization owners an email requesting a new organization integration. It
* lets the user attach an optional message to be included in the email.
*/
export default class RequestIntegrationModal extends DeprecatedAsyncComponent<
Props,
State
> {
state: State = {
...this.getDefaultState(),
isSending: false,
message: '',
};
sendRequest = () => {
const {organization, slug, type} = this.props;
const {message} = this.state;
trackIntegrationAnalytics('integrations.request_install', {
integration_type: type,
integration: slug,
organization,
});
const endpoint = `/organizations/${organization.slug}/integration-requests/`;
this.api.request(endpoint, {
method: 'POST',
data: {
providerSlug: slug,
providerType: type,
message,
},
success: this.handleSubmitSuccess,
error: this.handleSubmitError,
});
};
handleSubmitSuccess = () => {
const {closeModal, onSuccess} = this.props;
addSuccessMessage(t('Request successfully sent.'));
this.setState({isSending: false});
onSuccess();
closeModal();
};
handleSubmitError = () => {
addErrorMessage('Error sending the request');
this.setState({isSending: false});
};
render() {
const {Header, Body, Footer, name} = this.props;
const buttonText = this.state.isSending ? t('Sending Request') : t('Send Request');
return (
<Fragment>
<Header>
<h4>{t('Request %s Installation', name)}</h4>
</Header>
<Body>
<TextBlock>
{t(
'Looks like your organization owner, manager, or admin needs to install %s. Want to send them a request?',
name
)}
</TextBlock>
<TextBlock>
{t(
'(Optional) You’ve got good reasons for installing the %s Integration. Share them with your organization owner.',
name
)}
</TextBlock>
<TextareaField
inline={false}
flexibleControlStateSize
stacked
name="message"
type="string"
onChange={value => this.setState({message: value})}
placeholder={t('Optional message…')}
/>
<TextBlock>
{t(
'When you click “Send Request”, we’ll email your request to your organization’s owners. So just keep that in mind.'
)}
</TextBlock>
</Body>
<Footer>
<Button onClick={this.sendRequest}>{buttonText}</Button>
</Footer>
</Fragment>
);
}
}