WIP

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 (
+        <FloatingTextInput
+            autoCorrect={false}
+            autoCapitalize='none'
+            blurOnSubmit={false}
+            disableFullscreenUI={true}
+            enablesReturnKeyAutomatically={true}
+            label={labelDisplayName}
+            placeholder={placeholder}
+            maxLength={Channel.MAX_CHANNEL_NAME_LENGTH}
+            keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
+            returnKeyType='next'
+            showErrorIcon={false}
+            spellCheck={false}
+            testID='gonvert_gm_to_channel.channel_display_name.input'
+            containerStyle={styles.fieldContainer}
+            theme={theme}
+        />
+    );
+};

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 (
+        <View style={styles.container}>
+            <MessageBox/>
+            <TeamSelector/>
+            <ChannelNameInput/>
+            <Button
+                onPress={() => true}
+                text={confirmButtonText}
+                theme={theme}
+                buttonType='destructive'
+                emphasis='primary'
+                size='lg'
+            />
+        </View>
+    );
+};

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 (
+        <View style={styles.loadingContainer}>
+            <ActivityIndicator
+                size={'large'}
+                color={theme.buttonBg}
+            />
+            <Text style={styles.text}>{'Fetching details...'}</Text>
+        </View>
+    );
+};

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 (
+        <View style={styles.container}>
+            <View style={styles.iconContainer}>
+                <CompassIcon
+                    name='exclamation-thick'
+                    style={styles.icon}
+                />
+            </View>
+            <View style={styles.textContainer}>
+                <View>
+                    <Text style={styles.heading}>
+                        {header}
+                    </Text>
+                </View>
+                <View>
+                    <Text style={styles.body}>
+                        {body}
+                    </Text>
+                </View>
+            </View>
+        </View>
+    );
+};

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 = (
+        <Text style={styles.placeholder}>{placeholderText}</Text>
+    );
+
+    return (
+        <View style={styles.teamSelector}>
+            <Text style={styles.label}>
+                {label}
+            </Text>
+
+            {placeholder}
+
+            <CompassIcon
+                style={styles.icon}
+                name='arrow-forward-ios'
+                size={18}
+            />
+        </View>
+    );
+};

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"
 }