diff --git a/app/screens/convert_gm_to_channel/channel_name_input.tsx b/app/screens/convert_gm_to_channel/channel_name_input.tsx
new file mode 100644
index 000000000..9accaef76
--- /dev/null
+++ b/app/screens/convert_gm_to_channel/channel_name_input.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import FloatingTextInput from '@app/components/floating_text_input_label';
+import {Channel} from '@app/constants';
+import {useTheme} from '@app/context/theme';
+import {t} from '@app/i18n';
+import {getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
+ fieldContainer: {
+ marginBottom: 32,
+ },
+}));
+
+export const ChannelNameInput = () => {
+ const {formatMessage} = useIntl();
+ const theme = useTheme();
+
+ const labelDisplayName = formatMessage({id: t('channel_modal.name'), defaultMessage: 'Name'});
+ const placeholder = formatMessage({id: t('"channel_modal.name": "Name",'), defaultMessage: 'Channel Name'});
+
+ const styles = getStyleSheet(theme);
+
+ return (
+
+ );
+};
diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx
new file mode 100644
index 000000000..93506e4e8
--- /dev/null
+++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {View} from 'react-native';
+
+import {useTheme} from '@app/context/theme';
+import {makeStyleSheetFromTheme} from '@app/utils/theme';
+import Button from '@components/button';
+
+import {ChannelNameInput} from './channel_name_input';
+import {MessageBox} from './message_box';
+import {TeamSelector} from './team_selector';
+
+const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
+ return {
+ container: {
+ paddingVertical: 24,
+ paddingHorizontal: 20,
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 24,
+ },
+ };
+});
+
+export const ConvertGMToChannelForm = () => {
+ const theme = useTheme();
+ const styles = getStyleFromTheme(theme);
+
+ const {formatMessage} = useIntl();
+ const confirmButtonText = formatMessage({
+ id: 'channel_info.convert_gm_to_channel.button_text',
+ defaultMessage: 'Convert to a Private Channel',
+ });
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/app/screens/convert_gm_to_channel/loader.tsx b/app/screens/convert_gm_to_channel/loader.tsx
new file mode 100644
index 000000000..32c914c68
--- /dev/null
+++ b/app/screens/convert_gm_to_channel/loader.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {ActivityIndicator, Text, View} from 'react-native';
+
+import {useTheme} from '@app/context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {typography} from '@app/utils/typography';
+
+const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
+ return {
+ loadingContainer: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ flex: 1,
+ gap: 24,
+ },
+ text: {
+ color: changeOpacity(theme.centerChannelColor, 0.56),
+ ...typography('Body', 300, 'SemiBold'),
+ },
+ };
+});
+
+export const Loader = () => {
+ const theme = useTheme();
+ const styles = getStyleFromTheme(theme);
+
+ return (
+
+
+ {'Fetching details...'}
+
+ );
+};
diff --git a/app/screens/convert_gm_to_channel/message_box.tsx b/app/screens/convert_gm_to_channel/message_box.tsx
new file mode 100644
index 000000000..36f5e7897
--- /dev/null
+++ b/app/screens/convert_gm_to_channel/message_box.tsx
@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {Text, TextBase, View} from 'react-native';
+
+import CompassIcon from '@app/components/compass_icon';
+import {useTheme} from '@app/context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {typography} from '@app/utils/typography';
+
+const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
+ return {
+ container: {
+ backgroundColor: changeOpacity(theme.sidebarTextActiveBorder, 0.08),
+ borderWidth: 1,
+ borderRadius: 8,
+ borderColor: changeOpacity(theme.sidebarTextActiveBorder, 0.16),
+ display: 'flex',
+ flexDirection: 'row',
+ padding: 16,
+ gap: 12,
+ },
+ icon: {
+ marginTop: 5,
+ fontSize: 20,
+ width: 28,
+ height: 28,
+ borderWidth: 3,
+ color: theme.sidebarTextActiveBorder,
+ borderColor: theme.sidebarTextActiveBorder,
+ borderRadius: 14,
+ textAlign: 'center',
+ },
+ iconContainer: {},
+ textContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 8,
+ flex: 1,
+ },
+ heading: {
+ color: theme.centerChannelColor,
+ ...typography('Body', 100, 'SemiBold'),
+ },
+ body: {
+ color: theme.centerChannelColor,
+ ...typography('Body', 100),
+ },
+ text: {
+ color: 'red',
+ },
+ };
+});
+
+export const MessageBox = () => {
+ const theme = useTheme();
+ const styles = getStyleFromTheme(theme);
+
+ const intl = useIntl();
+ const header = intl.formatMessage({
+ id: 'channel_info.convert_gm_to_channel.warning.header',
+ defaultMessage: 'Conversation history will be visible to any channel members',
+ });
+ const body = intl.formatMessage({
+ id: 'channel_info.convert_gm_to_channel.warning.body',
+ defaultMessage: 'You are about to convert the Group Message with Leonard Riley, Regina Wilson, Todd Smith and Aliya Mosta to a Channel. This cannot be undone.',
+ });
+
+ return (
+
+
+
+
+
+
+
+ {header}
+
+
+
+
+ {body}
+
+
+
+
+ );
+};
diff --git a/app/screens/convert_gm_to_channel/team_selector.tsx b/app/screens/convert_gm_to_channel/team_selector.tsx
new file mode 100644
index 000000000..5cbca8bc7
--- /dev/null
+++ b/app/screens/convert_gm_to_channel/team_selector.tsx
@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {Text, View} from 'react-native';
+
+import CompassIcon from '@app/components/compass_icon';
+import {useTheme} from '@app/context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {typography} from '@app/utils/typography';
+
+const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
+ return {
+ teamSelector: {
+ borderTopWidth: 1,
+ borderBottomWidth: 1,
+ borderColor: changeOpacity(theme.centerChannelColor, 0.08),
+ display: 'flex',
+ flexDirection: 'row',
+ height: 48,
+ alignItems: 'center',
+ gap: 8,
+ },
+ label: {
+ color: theme.centerChannelColor,
+ ...typography('Body', 100),
+ },
+ value: {},
+ placeholder: {
+ marginLeft: 'auto',
+ marginRight: 0,
+ color: changeOpacity(theme.centerChannelColor, 0.72),
+ ...typography('Body', 100),
+ },
+ icon: {
+ color: changeOpacity(theme.centerChannelColor, 0.52),
+ marginRight: 0,
+ width: 20,
+ },
+ };
+});
+
+export const TeamSelector = () => {
+ const theme = useTheme();
+ const styles = getStyleFromTheme(theme);
+
+ const intl = useIntl();
+ const label = intl.formatMessage({id: 'channel_into.convert_gm_to_channel.team_selector.label', defaultMessage: 'Team'});
+
+ const placeholderText = intl.formatMessage({id: 'channel_into.convert_gm_to_channel.team_selector.placeholder', defaultMessage: 'Select a Team'});
+ const placeholder = (
+ {placeholderText}
+ );
+
+ return (
+
+
+ {label}
+
+
+ {placeholder}
+
+
+
+ );
+};
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index 4dd14b3b5..440521b89 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -1087,5 +1087,10 @@
"video.download_description": "This video must be downloaded to play it.",
"video.failed_description": "An error occurred while trying to play the video.",
"your.servers": "Your servers",
- "channel_info.convert_gm_to_channel": "Convert to a Private Channel"
+ "channel_info.convert_gm_to_channel": "Convert to a Private Channel",
+ "channel_info.convert_gm_to_channel.warning.header": "Conversation history will be visible to any channel members",
+ "channel_info.convert_gm_to_channel.warning.body": "You are about to convert the Group Message with Leonard Riley, Regina Wilson, Todd Smith and Aliya Mosta to a Channel. This cannot be undone.",
+ "channel_into.convert_gm_to_channel.team_selector.label": "Team",
+ "channel_into.convert_gm_to_channel.team_selector.placeholder": "Select a Team",
+ "channel_info.convert_gm_to_channel.button_text": "Convert to Private Channel"
}