diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx
index 0e39f409a1..ccd4bc381c 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx
@@ -3,7 +3,7 @@
 
 import moment from 'moment';
 import React, {useEffect} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
 import type {GlobalState} from '@mattermost/types/store';
@@ -17,7 +17,6 @@ import AnnouncementBar from 'components/announcement_bar/default_announcement_ba
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 
 import {AnnouncementBarTypes, CloudBanners, CloudProducts, Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import './to_paid_plan_nudge_banner.scss';
 
@@ -163,11 +162,17 @@ export const ToPaidPlanBannerDismissable = () => {
             type={announcementType}
             showCloseButton={daysToCloudFreeEnd > 10}
             onButtonClick={openPricingModal}
-            modalButtonText={t('cloud_billing.nudge_to_paid.view_plans')}
-            modalButtonDefaultText='View plans'
+            modalButtonText={messages.viewPlans}
             message={<FormattedMessage {...message}/>}
             showLinkAsButton={true}
             handleClose={showBanner}
         />
     );
 };
+
+const messages = defineMessages({
+    viewPlans: {
+        id: 'cloud_billing.nudge_to_paid.view_plans',
+        defaultMessage: 'View plans',
+    },
+});
diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx b/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx
index bacaf50e8e..bac3f47af5 100644
--- a/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx
+++ b/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx
@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useRef, useState} from 'react';
-import {injectIntl} from 'react-intl';
-import type {WrappedComponentProps} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import {closeModal} from 'actions/views/modals';
@@ -20,9 +19,7 @@ import './progress_modal.scss';
 const MIN_PROCESSING_MILLISECONDS = 5000;
 const MAX_FAKE_PROGRESS = 95;
 
-type Props = WrappedComponentProps
-
-const DeleteWorkspaceProgressModal = (props: Props) => {
+export default function DeleteWorkspaceProgressModal() {
     const modal = React.createRef();
     const mounted = useRef(false);
     const dispatch = useDispatch();
@@ -67,11 +64,11 @@ const DeleteWorkspaceProgressModal = (props: Props) => {
             >
                 <div className='DeleteWorkspaceProgressModal'>
                     <IconMessage
-                        title={
-                            props.intl.formatMessage({
-                                id: 'admin.billing.deleteWorkspace.progressModal.title',
-                                defaultMessage: 'Deleting your workspace',
-                            })
+                        formattedTitle={
+                            <FormattedMessage
+                                id='admin.billing.deleteWorkspace.progressModal.title'
+                                defaultMessage='Deleting your workspace'
+                            />
                         }
                         icon={
                             <CreditCardSvg
@@ -89,6 +86,4 @@ const DeleteWorkspaceProgressModal = (props: Props) => {
             </FullScreenModal>
         </RootPortal>
     );
-};
-
-export default injectIntl(DeleteWorkspaceProgressModal);
+}
diff --git a/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx
index d436ea5ddf..f91aaab82b 100644
--- a/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx
@@ -3,7 +3,7 @@
 
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 
 import {AlertCircleOutlineIcon, AlertOutlineIcon} from '@mattermost/compass-icons/components';
 import type {Subscription} from '@mattermost/types/cloud';
@@ -22,7 +22,6 @@ import {
     TELEMETRY_CATEGORIES,
     TrialPeriodDays,
 } from 'utils/constants';
-import {t} from 'utils/i18n';
 import {getLocaleDateFromUTC} from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
@@ -140,12 +139,11 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
             />
         );
 
-        let modalButtonText = t('admin.billing.subscription.cloudTrial.subscribeButton');
-        let modalButtonDefaultText = 'Upgrade Now';
-
+        let modalButtonText;
         if (this.props.reverseTrial) {
-            modalButtonText = t('admin.billing.subscription.cloudReverseTrial.subscribeButton');
-            modalButtonDefaultText = 'Review your options';
+            modalButtonText = messages.trialButton;
+        } else {
+            modalButtonText = messages.reverseTrialButton;
         }
 
         if (this.props.reverseTrial) {
@@ -221,7 +219,6 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
                 handleClose={this.handleClose}
                 onButtonClick={this.showModal}
                 modalButtonText={modalButtonText}
-                modalButtonDefaultText={modalButtonDefaultText}
                 message={bannerMessage}
                 showLinkAsButton={true}
                 icon={icon}
@@ -230,4 +227,15 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
     }
 }
 
+const messages = defineMessages({
+    reverseTrialButton: {
+        id: 'admin.billing.subscription.cloudReverseTrial.subscribeButton',
+        defaultMessage: 'Review your options',
+    },
+    trialButton: {
+        id: 'admin.billing.subscription.cloudTrial.subscribeButton',
+        defaultMessage: 'Upgrade Now',
+    },
+});
+
 export default CloudTrialAnnouncementBar;
diff --git a/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx b/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx
index 2679152467..74be3cd8ae 100644
--- a/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 
 import {savePreferences} from 'mattermost-redux/actions/preferences';
@@ -25,7 +25,6 @@ import {
     CloudBanners,
     CloudProducts,
 } from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import type {GlobalState} from 'types/store';
 
@@ -104,20 +103,13 @@ const CloudTrialEndAnnouncementBar: React.FC = () => {
         );
     };
 
-    const message = {
-        id: t('free.banner.downgraded'),
-        defaultMessage:
-            'Your workspace now has restrictions and some data has been archived',
-    };
-
     return (
         <AnnouncementBar
             type={AnnouncementBarTypes.CRITICAL}
             showCloseButton={true}
             onButtonClick={() => openPricingModal({trackingLocation: 'cloud_trial_ended_announcement_bar'})}
-            modalButtonText={t('more.details')}
-            modalButtonDefaultText={'More details'}
-            message={<FormattedMessage {...message}/>}
+            modalButtonText={messages.moreDetails}
+            message={<FormattedMessage {...messages.downgraded}/>}
             showLinkAsButton={true}
             isTallBanner={true}
             icon={<i className='icon icon-alert-outline'/>}
@@ -126,4 +118,15 @@ const CloudTrialEndAnnouncementBar: React.FC = () => {
     );
 };
 
+const messages = defineMessages({
+    downgraded: {
+        id: 'free.banner.downgraded',
+        defaultMessage: 'Your workspace now has restrictions and some data has been archived',
+    },
+    moreDetails: {
+        id: 'more.details',
+        defaultMessage: 'More details',
+    },
+});
+
 export default CloudTrialEndAnnouncementBar;
diff --git a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
index 7bb6bdedd0..bccd252ca4 100644
--- a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
@@ -20,7 +20,6 @@ import ExternalLink from 'components/external_link';
 import alertIcon from 'images/icons/round-white-info-icon.svg';
 import warningIcon from 'images/icons/warning-icon.svg';
 import {AnnouncementBarTypes, AnnouncementBarMessages, Preferences, ConfigurationBanners, Constants, TELEMETRY_CATEGORIES} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {daysToLicenseExpire, isLicenseExpired, isLicenseExpiring, isLicensePastGracePeriod, isTrialLicense} from 'utils/license_utils';
 import {getSkuDisplayName} from 'utils/subscription';
 import {getViewportSize} from 'utils/utils';
@@ -252,16 +251,6 @@ const ConfigurationAnnouncementBar = (props: Props) => {
     }
 
     if (props.canViewSystemErrors && props.config?.SiteURL === '') {
-        let id;
-        let defaultMessage;
-        if (props.config?.EnableSignUpWithGitLab === 'true') {
-            id = t('announcement_bar.error.site_url_gitlab.full');
-            defaultMessage = 'Please configure your <linkSite>site URL</linkSite> either on the <linkConsole>System Console<linkConsole> or, if you\'re using GitLab Mattermost, in gitlab.rb.';
-        } else {
-            id = t('announcement_bar.error.site_url.full');
-            defaultMessage = 'Please configure your <linkSite>site URL</linkSite> on the <linkConsole>System Console</linkConsole>.';
-        }
-
         const values: Record<string, ReactNode> = {
             linkSite: (msg: string) => (
                 <ExternalLink
@@ -277,7 +266,19 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                 </Link>
             ),
         };
-        const siteURLMessage = formatMessage({id, defaultMessage}, values);
+
+        let siteURLMessage;
+        if (props.config?.EnableSignUpWithGitLab === 'true') {
+            siteURLMessage = formatMessage({
+                id: 'announcement_bar.error.site_url_gitlab.full',
+                defaultMessage: 'Please configure your <linkSite>site URL</linkSite> either on the <linkConsole>System Console</linkConsole> or, if you\'re using GitLab Mattermost, in gitlab.rb.',
+            }, values);
+        } else {
+            siteURLMessage = formatMessage({
+                id: 'announcement_bar.error.site_url.full',
+                defaultMessage: 'Please configure your <linkSite>site URL</linkSite> on the <linkConsole>System Console</linkConsole>.',
+            }, values);
+        }
 
         return (
             <TextDismissableBar
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index dd018940d5..fb5aadb730 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -3,6 +3,7 @@
 
 import type {ReactNode} from 'react';
 import React from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
@@ -24,8 +25,7 @@ type Props = {
     showModal?: boolean;
     announcementBarCount?: number;
     onButtonClick?: (e?: any) => void;
-    modalButtonText?: string;
-    modalButtonDefaultText?: string;
+    modalButtonText?: MessageDescriptor;
     showLinkAsButton: boolean;
     icon?: ReactNode;
     actions: {
@@ -185,14 +185,13 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                             {message}
                         </span>
                         {
-                            this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText && this.props.modalButtonDefaultText &&
+                            this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText &&
                             <button
                                 onClick={this.props.onButtonClick}
                                 disabled={this.props.ctaDisabled}
                             >
                                 <FormattedMessage
-                                    id={this.props.modalButtonText}
-                                    defaultMessage={this.props.modalButtonDefaultText}
+                                    {...this.props.modalButtonText}
                                 />
                             </button>
                         }
diff --git a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
index 992bde0532..92355ce9c9 100644
--- a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
@@ -109,7 +109,6 @@ const OverageUsersBanner = () => {
             showCloseButton={isBetween5PercerntAnd10PercentPurchasedSeats}
             onButtonClick={handleClick}
             modalButtonText={cta}
-            modalButtonDefaultText={cta}
             message={message}
             showLinkAsButton={true}
             isTallBanner={true}
diff --git a/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx b/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx
index deea975a1c..f770a911e2 100644
--- a/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx
@@ -3,7 +3,7 @@
 
 import isEmpty from 'lodash/isEmpty';
 import React, {useEffect, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 
 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
@@ -18,7 +18,6 @@ import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/user
 import {getHistory} from 'utils/browser_history';
 import {isCustomerCardExpired} from 'utils/cloud_utils';
 import {AnnouncementBarTypes, CloudProducts, ConsolePages} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import AnnouncementBar from '../default_announcement_bar';
 
@@ -78,11 +77,17 @@ export default function PaymentAnnouncementBar() {
             type={AnnouncementBarTypes.CRITICAL}
             showCloseButton={false}
             onButtonClick={updatePaymentInfo}
-            modalButtonText={t('admin.billing.subscription.updatePaymentInfo')}
-            modalButtonDefaultText={'Update payment info'}
+            modalButtonText={messages.updatePaymentInfo}
             message={message}
             showLinkAsButton={true}
             isTallBanner={true}
         />
     );
 }
+
+const messages = defineMessages({
+    updatePaymentInfo: {
+        id: 'admin.billing.subscription.updatePaymentInfo',
+        defaultMessage: 'Update payment info',
+    },
+});
diff --git a/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx b/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx
index 24feaf3182..1068813a55 100644
--- a/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx
+++ b/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {getSubscriptionProduct} from 'mattermost-redux/selectors/entities/cloud';
@@ -15,7 +15,6 @@ import useGetUsage from 'components/common/hooks/useGetUsage';
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 
 import {ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';
 import type {Message} from 'utils/i18n';
 import {fallbackStarterLimits, asGBString, LimitTypes} from 'utils/limits';
 
@@ -31,50 +30,50 @@ export default function LHSNearingLimitsModal() {
     const [limits] = useGetLimits();
 
     const primaryAction = {
-        message: {
-            id: t('workspace_limits.modals.view_plans'),
+        message: defineMessage({
+            id: 'workspace_limits.modals.view_plans',
             defaultMessage: 'View plans',
-        },
+        }),
         onClick: () => openPricingModal({trackingLocation: 'cloud_usage_lhs_nearing_limit_modal'}),
     };
     const secondaryAction = {
-        message: {
-            id: t('workspace_limits.modals.close'),
+        message: defineMessage({
+            id: 'workspace_limits.modals.close',
             defaultMessage: 'Close',
-        },
+        }),
         onClick: () => {
             dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
         },
     };
     const highestLimit = useGetHighestThresholdCloudLimit(usage, limits);
-    let title: Message = {
-        id: t('workspace_limits.modals.informational.title'),
+    let title: Message = defineMessage({
+        id: 'workspace_limits.modals.informational.title',
         defaultMessage: '{planName} limits',
         values: {
             planName: product?.name,
         },
-    };
+    });
 
-    let description: Message = {
-        id: t('workspace_limits.modals.informational.description.freeLimits'),
+    let description: Message = defineMessage({
+        id: 'workspace_limits.modals.informational.description.freeLimits',
         defaultMessage: '{planName} is restricted to {messages} message history and {storage} file storage.',
         values: {
             planName: product?.name,
             messages: intl.formatNumber(limits?.messages?.history ?? fallbackStarterLimits.messages.history),
             storage: asGBString(limits?.files?.total_storage ?? fallbackStarterLimits.files.totalStorage, intl.formatNumber),
         },
-    };
+    });
 
     if (highestLimit && highestLimit.id === LimitTypes.messageHistory) {
-        title = {
-            id: t('workspace_limits.modals.limits_reached.title.message_history'),
+        title = defineMessage({
+            id: 'workspace_limits.modals.limits_reached.title.message_history',
             defaultMessage: 'Message history',
-        };
+        });
 
-        description = {
-            id: t('workspace_limits.modals.limits_reached.description.message_history'),
+        description = defineMessage({
+            id: 'workspace_limits.modals.limits_reached.description.message_history',
             defaultMessage: 'Your sent message history is no longer available but you can still send messages. Upgrade to a paid plan and get unlimited access to your message history.',
-        };
+        });
     }
 
     return (
diff --git a/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts b/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts
index c52e94311f..c6763c7600 100644
--- a/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts
+++ b/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useIntl} from 'react-intl';
+import {defineMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
@@ -16,10 +16,9 @@ export const useExpandOverageUsersCheck = ({
     isWarningState,
     banner,
 }: UseExpandOverageUsersCheckArgs) => {
-    const {formatMessage} = useIntl();
     const expandableLink = useSelector(getExpandSeatsLink);
 
-    const cta = formatMessage({
+    const cta = defineMessage({
         id: 'licensingPage.overageUsersBanner.cta',
         defaultMessage: 'Contact Sales',
     });
diff --git a/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts b/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts
index d504da4195..e341b4cbab 100644
--- a/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts
+++ b/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 // import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {setNeedsLoggedInLimitReachedCheck} from 'actions/views/admin';
@@ -13,7 +13,6 @@ import CloudUsageModal from 'components/cloud_usage_modal';
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 
 import {ModalIdentifiers, Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import useGetLimits from './useGetLimits';
 import useGetUsage from './useGetUsage';
@@ -43,34 +42,34 @@ export default function useShowAdminLimitReached() {
             modalId: ModalIdentifiers.CLOUD_LIMITS,
             dialogType: CloudUsageModal,
             dialogProps: {
-                title: {
-                    id: t('workspace_limits.modals.limits_reached.title'),
+                title: defineMessage({
+                    id: 'workspace_limits.modals.limits_reached.title',
                     defaultMessage: '{limitName} limit reached',
                     values: {
                         limitName: intl.formatMessage({
-                            id: t('workspace_limits.modals.limits_reached.title.message_history'),
+                            id: 'workspace_limits.modals.limits_reached.title.message_history',
                             defaultMessage: 'Message history',
                         }),
                     },
-                },
-                description: {
-                    id: t('workspace_limits.modals.limits_reached.description.message_history'),
+                }),
+                description: defineMessage({
+                    id: 'workspace_limits.modals.limits_reached.description.message_history',
                     defaultMessage: 'Your sent message history is no longer available but you can still send messages. Upgrade to a paid plan and get unlimited access to your message history.',
-                },
+                }),
                 secondaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.close'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.close',
                         defaultMessage: 'Close',
-                    },
+                    }),
                     onClick: () => {
                         dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                     },
                 },
                 primaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.view_plan_options'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.view_plan_options',
                         defaultMessage: 'View plan options',
-                    },
+                    }),
                     onClick: () => {
                         dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                         openPricingModal({trackingLocation: 'admin_login_limit_reached_dashboard'});
diff --git a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
index 6eafac6561..57e8f8f335 100644
--- a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
+++ b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
 
 import WithTooltip from 'components/with_tooltip';
 
@@ -12,7 +11,7 @@ export type Props = {
     onClick: () => void;
     icon: JSX.Element;
     id: string;
-    defaultMessage: string;
+    buttonText: string;
     checked: boolean;
     tooltip?: string;
     size?: 'regular' | 'small';
@@ -38,10 +37,7 @@ const MultiSelectCard = (props: Props) => {
         >
             {props.icon}
             <span className='MultiSelectCard__label'>
-                <FormattedMessage
-                    id={props.id}
-                    defaultMessage={props.defaultMessage}
-                />
+                {props.buttonText}
             </span>
             {props.checked && <i className='MultiSelectCard__checkmark icon icon-check-circle'/>}
         </button>
diff --git a/webapp/channels/src/components/downgrade_modal/index.tsx b/webapp/channels/src/components/downgrade_modal/index.tsx
index c837c272e0..5ca925f393 100644
--- a/webapp/channels/src/components/downgrade_modal/index.tsx
+++ b/webapp/channels/src/components/downgrade_modal/index.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useRef, useState} from 'react';
+import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import {closeModal} from 'actions/views/modals';
@@ -15,7 +16,6 @@ import FullScreenModal from 'components/widgets/modals/full_screen_modal';
 import 'components/payment_form/payment_form.scss';
 
 import {ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import './index.scss';
 
@@ -67,8 +67,12 @@ export default function DowngradeModal() {
             >
                 <div id='DowngradeModal'>
                     <IconMessage
-                        title={t('admin.billing.subscription.downgrading')}
-                        subtitle={''}
+                        formattedTitle={
+                            <FormattedMessage
+                                id='admin.billing.subscription.downgrading'
+                                defaultMessage='Downgrading your workspace'
+                            />
+                        }
                         icon={
                             <CreditCardSvg
                                 width={444}
diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
index 85814a148b..a8baeb2e95 100644
--- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
+++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
@@ -102,7 +102,7 @@ const OverageUsersBannerNotice = () => {
                                 href={LicenseLinks.CONTACT_SALES}
                                 onClick={handleClick}
                             >
-                                {cta}
+                                <FormattedMessage {...cta}/>
                             </ExternalLink>
                         );
                     },
diff --git a/webapp/channels/src/components/preparing_workspace/plugins.tsx b/webapp/channels/src/components/preparing_workspace/plugins.tsx
index 1093b0ad32..6027925d60 100644
--- a/webapp/channels/src/components/preparing_workspace/plugins.tsx
+++ b/webapp/channels/src/components/preparing_workspace/plugins.tsx
@@ -13,8 +13,6 @@ import ServiceNowSVG from 'components/common/svg_images_components/servicenow_sv
 import ZoomSVG from 'components/common/svg_images_components/zoom_svg';
 import ExternalLink from 'components/external_link';
 
-import {t} from 'utils/i18n';
-
 import Description from './description';
 import PageBody from './page_body';
 import PageLine from './page_line';
@@ -91,8 +89,11 @@ const Plugins = (props: Props) => {
                                 {
                                     onClick: () => props.setOption('github'),
                                     icon: <GithubSVG/>,
-                                    id: t('onboarding_wizard.plugins.github'),
-                                    defaultMessage: 'GitHub',
+                                    id: 'onboarding_wizard.plugins.github',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.github',
+                                        defaultMessage: 'GitHub',
+                                    }),
                                     checked: props.options.github,
                                     tooltip: formatMessage({
                                         id: 'onboarding_wizard.plugins.github.tooltip',
@@ -102,8 +103,11 @@ const Plugins = (props: Props) => {
                                 {
                                     onClick: () => props.setOption('gitlab'),
                                     icon: <GitlabSVG/>,
-                                    id: t('onboarding_wizard.plugins.gitlab'),
-                                    defaultMessage: 'GitLab',
+                                    id: 'onboarding_wizard.plugins.gitlab',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.gitlab',
+                                        defaultMessage: 'GitLab',
+                                    }),
                                     checked: props.options.gitlab,
                                     tooltip: formatMessage({
                                         id: 'onboarding_wizard.plugins.gitlab.tooltip',
@@ -113,8 +117,11 @@ const Plugins = (props: Props) => {
                                 {
                                     onClick: () => props.setOption('jira'),
                                     icon: <JiraSVG/>,
-                                    id: t('onboarding_wizard.plugins.jira'),
-                                    defaultMessage: 'Jira',
+                                    id: 'onboarding_wizard.plugins.jira',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.jira',
+                                        defaultMessage: 'Jira',
+                                    }),
                                     checked: props.options.jira,
                                     tooltip: formatMessage({
                                         id: 'onboarding_wizard.plugins.jira.tooltip',
@@ -124,8 +131,11 @@ const Plugins = (props: Props) => {
                                 {
                                     onClick: () => props.setOption('zoom'),
                                     icon: <ZoomSVG/>,
-                                    id: t('onboarding_wizard.plugins.zoom'),
-                                    defaultMessage: 'Zoom',
+                                    id: 'onboarding_wizard.plugins.zoom',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.zoom',
+                                        defaultMessage: 'Zoom',
+                                    }),
                                     checked: props.options.zoom,
                                     tooltip: formatMessage({
                                         id: 'onboarding_wizard.plugins.zoom.tooltip',
@@ -135,8 +145,11 @@ const Plugins = (props: Props) => {
                                 {
                                     onClick: () => props.setOption('servicenow'),
                                     icon: <ServiceNowSVG/>,
-                                    id: t('onboarding_wizard.plugins.servicenow'),
-                                    defaultMessage: 'ServiceNow',
+                                    id: 'onboarding_wizard.plugins.servicenow',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.servicenow',
+                                        defaultMessage: 'ServiceNow',
+                                    }),
                                     checked: props.options.servicenow,
                                     tooltip: formatMessage({
                                         id: 'onboarding_wizard.plugins.servicenow.tooltip',
diff --git a/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx b/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx
index a2d08f87ab..d5b5cfbcb6 100644
--- a/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx
+++ b/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
 
@@ -16,7 +16,6 @@ import CloudUsageModal from 'components/cloud_usage_modal';
 import useGetLimits from 'components/common/hooks/useGetLimits';
 
 import {CloudProducts, ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {fallbackStarterLimits, asGBString, hasSomeLimits} from 'utils/limits';
 
 const Disclaimer = styled.div`
@@ -47,27 +46,27 @@ function StarterDisclaimerCTA() {
             dialogType: CloudUsageModal,
             dialogProps: {
                 backdropClassName: 'cloud-usage-backdrop',
-                title: {
-                    id: t('workspace_limits.modals.informational.title'),
+                title: defineMessage({
+                    id: 'workspace_limits.modals.informational.title',
                     defaultMessage: '{planName} limits',
                     values: {
                         planName: starterProductName,
                     },
-                },
-                description: {
-                    id: t('workspace_limits.modals.informational.description.freeLimits'),
+                }),
+                description: defineMessage({
+                    id: 'workspace_limits.modals.informational.description.freeLimits',
                     defaultMessage: '{planName} is restricted to {messages} message history and {storage} file storage.',
                     values: {
                         planName: starterProductName,
                         messages: intl.formatNumber(fallbackStarterLimits.messages.history),
                         storage: asGBString(fallbackStarterLimits.files.totalStorage, intl.formatNumber),
                     },
-                },
+                }),
                 secondaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.close'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.close',
                         defaultMessage: 'Close',
-                    },
+                    }),
                     onClick: () => {
                         dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                     },
diff --git a/webapp/channels/src/components/purchase_modal/icon_message.tsx b/webapp/channels/src/components/purchase_modal/icon_message.tsx
index 389cc2f59e..c755bc232e 100644
--- a/webapp/channels/src/components/purchase_modal/icon_message.tsx
+++ b/webapp/channels/src/components/purchase_modal/icon_message.tsx
@@ -3,19 +3,12 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
 
 import './icon_message.scss';
-import ExternalLink from 'components/external_link';
 
 type Props = {
     icon: JSX.Element;
-    title?: string;
-    subtitle?: string;
-    date?: string;
     error?: boolean;
-    buttonText?: string;
-    tertiaryBtnText?: string;
     formattedButtonText?: JSX.Element;
     formattedLinkText?: React.ReactNode;
     formattedTertiaryButonText?: JSX.Element;
@@ -23,8 +16,6 @@ type Props = {
     formattedSubtitle?: React.ReactNode;
     buttonHandler?: () => void;
     tertiaryButtonHandler?: () => void;
-    linkText?: string;
-    linkURL?: string;
     footer?: JSX.Element;
     testId?: string;
     className?: string;
@@ -33,12 +24,7 @@ type Props = {
 export default function IconMessage(props: Props) {
     const {
         icon,
-        title,
-        subtitle,
-        date,
         error,
-        buttonText,
-        tertiaryBtnText,
         formattedButtonText,
         formattedTertiaryButonText,
         formattedTitle,
@@ -46,36 +32,34 @@ export default function IconMessage(props: Props) {
         formattedLinkText,
         buttonHandler,
         tertiaryButtonHandler,
-        linkText,
-        linkURL,
         footer,
         testId,
         className,
     } = props;
 
     let button = null;
-    if ((buttonText || formattedButtonText) && buttonHandler) {
+    if (formattedButtonText && buttonHandler) {
         button = (
             <div className={classNames('IconMessage-button', error ? 'error' : '')}>
                 <button
                     className='btn btn-primary Form-btn'
                     onClick={buttonHandler}
                 >
-                    {formattedButtonText || <FormattedMessage id={buttonText}/>}
+                    {formattedButtonText}
                 </button>
             </div>
         );
     }
 
     let tertiaryBtn = null;
-    if ((tertiaryBtnText || formattedTertiaryButonText) && tertiaryButtonHandler) {
+    if (formattedTertiaryButonText && tertiaryButtonHandler) {
         tertiaryBtn = (
             <div className={classNames('IconMessage-tertiary-button', error ? 'error' : '')}>
                 <button
                     className='btn Form-btn'
                     onClick={tertiaryButtonHandler}
                 >
-                    {formattedTertiaryButonText || <FormattedMessage id={tertiaryBtnText}/>}
+                    {formattedTertiaryButonText}
                 </button>
             </div>
         );
@@ -88,19 +72,6 @@ export default function IconMessage(props: Props) {
                 {formattedLinkText}
             </div>
         );
-    } else if (linkText && linkURL) {
-        link = (
-            <div className='IconMessage-link'>
-                <ExternalLink
-                    href={linkURL}
-                    location='icon_message'
-                >
-                    <FormattedMessage
-                        id={linkText}
-                    />
-                </ExternalLink>
-            </div>
-        );
     }
     const withTestId: {'data-testid'?: string} = {};
     if (testId) {
@@ -118,16 +89,9 @@ export default function IconMessage(props: Props) {
                     {icon}
                 </div>
                 <h3 className='IconMessage-h3'>
-                    {title ? <FormattedMessage id={title}/> : null}
                     {formattedTitle || null}
                 </h3>
                 <div className={classNames('IconMessage-sub', error || '')}>
-                    {subtitle ? (
-                        <FormattedMessage
-                            id={subtitle}
-                            values={{date}}
-                        />
-                    ) : null}
                     {formattedSubtitle || null}
                 </div>
                 <div className='IconMessage-buttons'>
diff --git a/webapp/channels/src/components/start_trial_form_modal/index.tsx b/webapp/channels/src/components/start_trial_form_modal/index.tsx
index 98baebf0ed..c3ff998613 100644
--- a/webapp/channels/src/components/start_trial_form_modal/index.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/index.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import React, {useEffect, useState} from 'react';
 import {Modal, Button} from 'react-bootstrap';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 
 import {getLicenseConfig} from 'mattermost-redux/actions/general';
@@ -26,7 +26,6 @@ import Input, {SIZE} from 'components/widgets/inputs/input/input';
 import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';
 
 import {AboutLinks, LicenseLinks, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import type {GlobalState} from 'types/store';
 
@@ -44,13 +43,32 @@ enum TrialLoadStatus {
     Failed = 'FAILED'
 }
 
-// Marker functions so i18n-extract doesn't remove strings
-t('ONE_TO_50');
-t('FIFTY_TO_100');
-t('ONE_HUNDRED_TO_500');
-t('FIVE_HUNDRED_TO_1000');
-t('ONE_THOUSAND_TO_2500');
-t('TWO_THOUSAND_FIVE_HUNDRED_AND_UP');
+defineMessages({
+    ONE_TO_50: {
+        id: 'ONE_TO_50',
+        defaultMessage: '1-50',
+    },
+    FIFTY_TO_100: {
+        id: 'FIFTY_TO_100',
+        defaultMessage: '51-100',
+    },
+    ONE_HUNDRED_TO_500: {
+        id: 'ONE_HUNDRED_TO_500',
+        defaultMessage: '101-500',
+    },
+    FIVE_HUNDRED_TO_1000: {
+        id: 'FIVE_HUNDRED_TO_1000',
+        defaultMessage: '501-1000',
+    },
+    ONE_THOUSAND_TO_2500: {
+        id: 'ONE_THOUSAND_TO_2500',
+        defaultMessage: '1001-2500',
+    },
+    TWO_THOUSAND_FIVE_HUNDRED_AND_UP: {
+        id: 'TWO_THOUSAND_FIVE_HUNDRED_AND_UP',
+        defaultMessage: '2501+',
+    },
+});
 
 export enum OrgSize {
     ONE_TO_50 = '1-50',