Scheduled post indicator

app/components/post_list/scroll_to_end_view.tsx

@@ -25,7 +25,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
         buttonStyle: {
             position: 'absolute',
             alignSelf: 'center',
-            bottom: -70,
+            bottom: -100,
             flexDirection: 'row',
         },
         shadow: {
@@ -97,7 +97,7 @@ const ScrollToEndView = ({
         () => ({
             transform: [
                 {
-                    translateY: withTiming(showScrollToEndBtn ? -80 - keyboardOverlap - bottomAdjustment : 0, {duration: 300}),
+                    translateY: withTiming(showScrollToEndBtn ? -100 - keyboardOverlap - bottomAdjustment : -15, {duration: 300}),
                 },
             ],
             maxWidth: withTiming(isNewMessage ? 169 : 40, {duration: 300}),

app/components/scheduled_post_indicator/index.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
+import {map} from 'rxjs/operators';
+
+import {getDisplayNamePreferenceAsBool} from '@helpers/api/preference';
+import {queryDisplayNamePreferences} from '@queries/servers/preference';
+import {observeCurrentUser} from '@queries/servers/user';
+
+import {ScheduledPostIndicator} from './scheduled_post_indicator';
+
+const enhance = withObservables([], ({database}) => {
+    const currentUser = observeCurrentUser(database);
+    const preferences = queryDisplayNamePreferences(database).
+        observeWithColumns(['value']);
+    const isMilitaryTime = preferences.pipe(map((prefs) => getDisplayNamePreferenceAsBool(prefs, 'use_military_time')));
+
+    return {
+        currentUser,
+        isMilitaryTime,
+    };
+});
+
+export default withDatabase(enhance(ScheduledPostIndicator));

app/components/scheduled_post_indicator/scheduled_post_indicator.test.tsx

@@ -0,0 +1,156 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Database} from '@nozbe/watermelondb';
+import {screen} from '@testing-library/react-native';
+import React from 'react';
+
+import NetworkManager from '@managers/network_manager';
+import {renderWithEverything} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+
+import ScheduledPostIndicator from './';
+
+import type ServerDataOperator from '@database/operator/server_data_operator';
+
+const SERVER_URL = 'https://appv1.mattermost.com';
+
+// this is needed when using the useServerUrl hook
+jest.mock('@context/server', () => ({
+    useServerUrl: jest.fn(() => SERVER_URL),
+}));
+
+describe('components/scheduled_post_indicator', () => {
+    let database: Database;
+    let operator: ServerDataOperator;
+
+    beforeEach(async () => {
+        const server = await TestHelper.setupServerDatabase(SERVER_URL);
+        database = server.database;
+        operator = server.operator;
+    });
+
+    afterEach(async () => {
+        await TestHelper.tearDown();
+        NetworkManager.invalidateClient(SERVER_URL);
+    });
+
+    it('should render single scheduled post indicator correctly', async () => {
+        const {getByText} = renderWithEverything(
+            <ScheduledPostIndicator
+                isThread={false}
+                scheduledPostCount={1}
+            />,
+            {database},
+        );
+
+        await screen.findByTestId('scheduled_post_indicator_single_time');
+        expect(getByText(/Message scheduled for/)).toBeVisible();
+        expect(getByText(/See all./)).toBeVisible();
+    });
+
+    it('should render multiple scheduled posts indicator for channel', async () => {
+        const {getByText} = renderWithEverything(
+            <ScheduledPostIndicator
+                isThread={false}
+                scheduledPostCount={10}
+            />,
+            {database},
+        );
+
+        expect(getByText(/10 scheduled messages in channel./)).toBeVisible();
+        expect(getByText(/See all./)).toBeVisible();
+    });
+
+    it('should render multiple scheduled posts indicator for thread', async () => {
+        const {getByText} = renderWithEverything(
+            <ScheduledPostIndicator
+                isThread={true}
+                scheduledPostCount={10}
+            />,
+            {database},
+        );
+
+        expect(getByText(/10 scheduled messages in thread./)).toBeVisible();
+        expect(getByText(/See all./)).toBeVisible();
+    });
+
+    it('renders with military time when preference is set', async () => {
+        await operator.handlePreferences({
+            preferences: [
+                {
+                    user_id: 'user_1',
+                    category: 'display_settings',
+                    name: 'use_military_time',
+                    value: 'true',
+                },
+            ],
+            prepareRecordsOnly: false,
+        });
+
+        const {getByText, findByTestId} = renderWithEverything(
+            <ScheduledPostIndicator
+                scheduledPostCount={1}
+            />,
+            {database},
+        );
+
+        const timeElement = await findByTestId('scheduled_post_indicator_single_time');
+        expect(timeElement).toBeVisible();
+
+        expect(getByText(/19:41/)).toBeVisible();
+    });
+
+    it('renders with 12-hour time when preference is set to 12 hours', async () => {
+        await operator.handlePreferences({
+            preferences: [
+                {
+                    user_id: 'user_1',
+                    category: 'display_settings',
+                    name: 'use_military_time',
+                    value: 'false',
+                },
+            ],
+            prepareRecordsOnly: false,
+        });
+
+        const {getByText, findByTestId} = renderWithEverything(
+            <ScheduledPostIndicator
+                scheduledPostCount={1}
+            />,
+            {database},
+        );
+
+        const timeElement = await findByTestId('scheduled_post_indicator_single_time');
+        expect(timeElement).toBeVisible();
+
+        expect(getByText(/7:41 PM/)).toBeVisible();
+    });
+
+    it('renders with 12-hour time when preference is not set', async () => {
+        const {getByText, findByTestId} = renderWithEverything(
+            <ScheduledPostIndicator
+                scheduledPostCount={1}
+            />,
+            {database},
+        );
+
+        const timeElement = await findByTestId('scheduled_post_indicator_single_time');
+        expect(timeElement).toBeVisible();
+
+        expect(getByText(/7:41 PM/)).toBeVisible();
+    });
+
+    it('handles missing current user', async () => {
+        const {getByText, findByTestId} = renderWithEverything(
+            <ScheduledPostIndicator
+                scheduledPostCount={1}
+            />,
+            {database},
+        );
+
+        const timeElement = await findByTestId('scheduled_post_indicator_single_time');
+        expect(timeElement).toBeVisible();
+        expect(getByText(/Message scheduled for/)).toBeVisible();
+    });
+});

app/components/scheduled_post_indicator/scheduled_post_indicator.tsx

@@ -0,0 +1,130 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Text, View} from 'react-native';
+
+import CompassIcon from '@components/compass_icon';
+import FormattedTime from '@components/formatted_time';
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {getUserTimezone} from '@utils/user';
+
+import type UserModel from '@typings/database/models/servers/user';
+
+const WRAPPER_HEIGHT = 40;
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        wrapper: {
+            height: WRAPPER_HEIGHT,
+        },
+        container: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+            paddingVertical: 12,
+            paddingBottom: 20,
+            paddingHorizontal: 16,
+            color: changeOpacity(theme.centerChannelColor, 0.72),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+        },
+        text: {
+            color: changeOpacity(theme.centerChannelColor, 0.75),
+            fontSize: 14,
+        },
+        link: {
+            color: theme.linkColor,
+            fontSize: 14,
+        },
+    };
+});
+
+type Props = {
+    currentUser?: UserModel;
+    isMilitaryTime: boolean;
+    isThread?: boolean;
+    scheduledPostCount?: number;
+}
+
+export function ScheduledPostIndicator({currentUser, isMilitaryTime, isThread, scheduledPostCount = 0}: Props) {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    let scheduledPostText: React.ReactNode;
+
+    if (scheduledPostCount === 0) {
+        return null;
+    } else if (scheduledPostCount === 1) {
+        // eslint-disable-next-line no-warning-comments
+        //TODO: remove this hardcoded value with actual value
+        const value = 1738611689000;
+
+        const dateTime = (
+            <FormattedTime
+                timezone={getUserTimezone(currentUser)}
+                isMilitaryTime={isMilitaryTime}
+                value={value}
+                testID='scheduled_post_indicator_single_time'
+            />
+        );
+
+        scheduledPostText = (
+            <FormattedMessage
+                id='scheduled_post.channel_indicator.single'
+                defaultMessage='Message scheduled for {dateTime}.'
+                values={{
+                    dateTime,
+                }}
+            />
+        );
+    } else {
+        scheduledPostText = isThread ? (
+            <FormattedMessage
+                id='scheduled_post.channel_indicator.thread.multiple'
+                defaultMessage='{count} scheduled messages in thread.'
+                values={{
+                    count: scheduledPostCount,
+                }}
+            />
+        ) : (
+            <FormattedMessage
+                id='scheduled_post.channel_indicator.multiple'
+                defaultMessage='{count} scheduled messages in channel.'
+                values={{
+                    count: scheduledPostCount,
+                }}
+            />
+        );
+    }
+
+    return (
+        <View
+            className='ScheduledPostIndicator'
+            style={styles.wrapper}
+        >
+            <View style={styles.container}>
+                <CompassIcon
+                    color={changeOpacity(theme.centerChannelColor, 0.6)}
+                    name='clock-send-outline'
+                    size={18}
+                />
+                <Text style={styles.text}>
+                    {scheduledPostText}
+                    {' '}
+                    <Text style={styles.link}>
+                        <FormattedMessage
+                            id='scheduled_post.channel_indicator.link_to_scheduled_posts.text'
+                            defaultMessage='See all.'
+                        />
+                    </Text>
+                </Text>
+            </View>
+        </View>
+    );
+}

app/screens/channel/channel.tsx

@@ -11,6 +11,7 @@ import {storeLastViewedChannelIdAndServer, removeLastViewedChannelIdAndServer} f
 import FloatingCallContainer from '@calls/components/floating_call_container';
 import FreezeScreen from '@components/freeze_screen';
 import PostDraft from '@components/post_draft';
+import ScheduledPostIndicator from '@components/scheduled_post_indicator';
 import {ExtraKeyboardProvider} from '@context/extra_keyboard';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import {useChannelSwitch} from '@hooks/channel_switch';
@@ -149,6 +150,9 @@ const Channel = ({
                             nativeID={channelId}
                         />
                     </View>
+                    {/* eslint-disable-next-line no-warning-comments */}
+                    {/*TODO: This count is hardcoded but will be removed during integration work*/}
+                    <ScheduledPostIndicator scheduledPostCount={10}/>
                     <PostDraft
                         channelId={channelId}
                         testID='channel.post_draft'

assets/base/i18n/en.json

@@ -989,6 +989,10 @@
   "saved_messages.empty.title": "No saved messages yet",
   "scheduled_post_options.confirm_button.processing.text": "Scheduling",
   "scheduled_post_options.confirm_button.text": "Schedule Draft",
+  "scheduled_post.channel_indicator.link_to_scheduled_posts.text": "See all.",
+  "scheduled_post.channel_indicator.multiple": "{count} scheduled messages in channel.",
+  "scheduled_post.channel_indicator.single": "Message scheduled for {dateTime}.",
+  "scheduled_post.channel_indicator.thread.multiple": "{count} scheduled messages in thread.",
   "scheduled_post.picker.custom": "Custom Time",
   "scheduled_post.picker.monday": "Monday at {9amTime}",
   "scheduled_post.picker.next_monday": "Next Monday at {9amTime}",