diff --git a/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx b/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx
new file mode 100644
index 000000000000..6464ac5a1fea
--- /dev/null
+++ b/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import {
+ MandatoryProfileSharingActions,
+ Props as MandatoryProfileSharingActionsProps,
+} from './MandatoryProfileSharingActions';
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+
+const getBaseProps = (
+ isGroup = false
+): MandatoryProfileSharingActionsProps => ({
+ i18n,
+ conversationType: isGroup ? 'group' : 'direct',
+ firstName: text('firstName', 'Cayce'),
+ title: isGroup
+ ? text('title', 'NYC Rock Climbers')
+ : text('title', 'Cayce Bollard'),
+ name: isGroup
+ ? text('name', 'NYC Rock Climbers')
+ : text('name', 'Cayce Bollard'),
+ onBlock: action('block'),
+ onBlockAndDelete: action('onBlockAndDelete'),
+ onDelete: action('delete'),
+ onAccept: action('accept'),
+});
+
+storiesOf('Components/Conversation/MandatoryProfileSharingActions', module)
+ .add('Direct', () => {
+ return (
+
+
+
+ );
+ })
+ .add('Group', () => {
+ return (
+
+
+
+ );
+ });
diff --git a/ts/components/conversation/MandatoryProfileSharingActions.tsx b/ts/components/conversation/MandatoryProfileSharingActions.tsx
new file mode 100644
index 000000000000..f5966c1982e5
--- /dev/null
+++ b/ts/components/conversation/MandatoryProfileSharingActions.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { ContactName, PropsType as ContactNameProps } from './ContactName';
+import {
+ MessageRequestActionsConfirmation,
+ MessageRequestState,
+ Props as MessageRequestActionsConfirmationProps,
+} from './MessageRequestActionsConfirmation';
+import { Intl } from '../Intl';
+import { LocalizerType } from '../../types/Util';
+
+export type Props = {
+ i18n: LocalizerType;
+ firstName?: string;
+ onAccept(): unknown;
+} & Omit
&
+ Pick<
+ MessageRequestActionsConfirmationProps,
+ 'conversationType' | 'onBlock' | 'onBlockAndDelete' | 'onDelete'
+ >;
+
+export const MandatoryProfileSharingActions = ({
+ conversationType,
+ firstName,
+ i18n,
+ name,
+ onAccept,
+ onBlock,
+ onBlockAndDelete,
+ onDelete,
+ phoneNumber,
+ profileName,
+ title,
+}: Props): JSX.Element => {
+ const [mrState, setMrState] = React.useState(MessageRequestState.default);
+
+ return (
+ <>
+ {mrState !== MessageRequestState.default ? (
+ {
+ throw new Error(
+ 'Should not be able to unblock from MandatoryProfileSharingActions'
+ );
+ }}
+ onDelete={onDelete}
+ name={name}
+ profileName={profileName}
+ phoneNumber={phoneNumber}
+ title={title}
+ conversationType={conversationType}
+ state={mrState}
+ onChangeState={setMrState}
+ />
+ ) : null}
+
+
+
+
+
+ ),
+ learnMore: (
+
+ {i18n('MessageRequests--learn-more')}
+
+ ),
+ }}
+ />
+
+
+
+
+
+
+