From cd3ff8be764a031cd9801239b9de986b92695a7f Mon Sep 17 00:00:00 2001
From: harshil Sharma <harshilsharma63@gmail.com>
Date: Tue, 17 Oct 2023 16:27:11 +0530
Subject: [PATCH] Added message box

---
 .../convert_to_channel_label.tsx              |  8 ++++---
 .../convert_gm_to_channel.tsx                 | 21 ++++++++++++++++---
 assets/base/i18n/en.json                      |  3 ++-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx
index b3c56a58f..8a766d803 100644
--- a/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx
+++ b/app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx
@@ -2,10 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {useIntl} from 'react-intl';
 
 import OptionItem from '@app/components/option_item';
 import {Screens} from '@app/constants';
-import {useTheme} from '@app/context/theme';
 import {dismissBottomSheet, goToScreen} from '@app/screens/navigation';
 import {preventDoubleTap} from '@app/utils/tap';
 
@@ -17,12 +17,14 @@ const ConvertToChannelLabel = () => {
         goToScreen(Screens.CONVERT_GM_TO_CHANNEL, title, {});
     });
 
-    // LOL: localize this
+    const {formatMessage} = useIntl();
+    const label = formatMessage({id: 'channel_info.convert_gm_to_channel', defaultMessage: 'Convert to a Private Channel'});
+
     return (
         <OptionItem
             action={goToConvertToPrivateChannl}
             icon='lock-outline'
-            label='Convert to a Private Channel'
+            label={label}
             type='default'
         />
     );
diff --git a/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx
index 8ac4f0d2f..e9e24fc47 100644
--- a/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx
+++ b/app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx
@@ -1,16 +1,31 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import { Text, View } from 'react-native';
+import React, {useEffect, useState} from 'react';
+
+import {ConvertGMToChannelForm} from './convert_gm_to_channel_form';
+import {Loader} from './loader';
 
 type Props = {
 
 }
 
+const loadingIndicatorTimeout = 1200;
+
 const ConvertGMToChannel = (props: Props) => {
+    const [loadingAnimationTimeout, setLoadingAnimationTimeout] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => setLoadingAnimationTimeout(true), loadingIndicatorTimeout);
+    }, []);
+
+    const showLoader = !loadingAnimationTimeout;
+    if (showLoader) {
+        return (<Loader/>);
+    }
+
     return (
-        <Text>{'ConvertGMToChannel component'}</Text>
+        <ConvertGMToChannelForm/>
     );
 };
 
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index 15707f980..ca5028f4d 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -1074,5 +1074,6 @@
   "video.download": "Download video",
   "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"
+  "your.servers": "Your servers",
+  "channel_info.convert_gm_to_channel": "Convert to a Private Channel"
 }