Merge branch 'main' into expo-image

src/components/DatePicker/CalendarPicker/index.js

@@ -236,7 +236,7 @@ class CalendarPicker extends React.PureComponent {
                                         <View
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
-                                                isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
+                                                isSelected ? this.props.themeStyles.buttonDefaultBG : {},
                                                 !isDisabled ? this.props.StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >

src/components/Icon/Illustrations.ts

@@ -35,6 +35,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -60,6 +61,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,

src/components/MenuItem.tsx

@@ -547,7 +547,7 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
-                                        badgeStyles={[styles.alignSelfCenter, brickRoadIndicator ? styles.mr2 : undefined, focused || isHovered || pressed ? styles.hoveredButton : {}]}
+                                        badgeStyles={[styles.alignSelfCenter, brickRoadIndicator ? styles.mr2 : undefined, focused || isHovered || pressed ? styles.buttonHoveredBG : {}]}
                                     />
                                 )}
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}

src/components/Section/IconSection.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import sourcePropTypes from '@components/Image/sourcePropTypes';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+    icon: sourcePropTypes,
+    IconComponent: PropTypes.IconComponent,
+    iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;

src/components/Section.js → src/components/Section/index.js

@@ -1,12 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import sourcePropTypes from '@components/Image/sourcePropTypes';
+import MenuItemList from '@components/MenuItemList';
+import menuItemPropTypes from '@components/menuItemPropTypes';
+import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Icon from './Icon';
-import sourcePropTypes from './Image/sourcePropTypes';
-import MenuItemList from './MenuItemList';
-import menuItemPropTypes from './menuItemPropTypes';
-import Text from './Text';
+import IconSection from './IconSection';
+
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
 
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
@@ -24,6 +29,10 @@ const propTypes = {
     /** Icon component */
     IconComponent: PropTypes.func,
 
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
+
     /** Contents to display inside the section */
     children: PropTypes.node,
 
@@ -39,6 +48,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     subtitleStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.bool,
+
     /** Customize the Section container */
     // eslint-disable-next-line react/forbid-prop-types
     childrenStyles: PropTypes.arrayOf(PropTypes.object),
@@ -53,38 +65,45 @@ const defaultProps = {
     children: null,
     icon: null,
     IconComponent: null,
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
     containerStyles: [],
     iconContainerStyles: [],
     titleStyles: [],
     subtitleStyles: [],
+    subtitleMuted: false,
     childrenStyles: [],
     subtitle: null,
 };
 
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
     const styles = useThemeStyles();
+
     return (
         <>
             <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, ...titleStyles]}>
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
-                        {Boolean(icon) && (
-                            <Icon
-                                src={icon}
-                                height={68}
-                                width={68}
-                            />
-                        )}
-                        {Boolean(IconComponent) && <IconComponent />}
-                    </View>
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
                 </View>
 
                 {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, ...subtitleStyles]}>
-                        <Text style={styles.textNormal}>{subtitle}</Text>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                     </View>
                 )}
 
@@ -95,9 +114,9 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
         </>
     );
 }
-
 Section.displayName = 'Section';
 Section.propTypes = propTypes;
 Section.defaultProps = defaultProps;
 
+export {CARD_LAYOUT};
 export default Section;

src/languages/en.ts

@@ -1489,8 +1489,9 @@ export default {
             mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
         },
         emptyWorkspace: {
-            title: 'Create a new workspace',
-            subtitle: "Workspaces are where you'll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more — all in one place.",
+            title: 'Create a workspace',
+            subtitle: 'Manage business expenses, issue cards, send invoices, and more.',
+            createAWorkspaceCTA: 'Get Started',
             features: {
                 trackAndCollect: 'Track and collect receipts',
                 companyCards: 'Company credit cards',

src/languages/es.ts

@@ -1512,8 +1512,9 @@ export default {
             mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
         },
         emptyWorkspace: {
-            title: 'Crear un nuevo espacio de trabajo',
-            subtitle: 'En los espacios de trabajo es donde puedes chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas y mas — todo en un mismo lugar',
+            title: 'Crea un espacio de trabajo',
+            subtitle: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
+            createAWorkspaceCTA: 'Comenzar',
             features: {
                 trackAndCollect: 'Organiza recibos',
                 companyCards: 'Tarjetas de crédito corporativas',

src/libs/ReportActionsUtils.ts

@@ -735,7 +735,7 @@ function getMemberChangeMessageFragment(reportAction: OnyxEntry<ReportAction>):
         .map((messageElement) => {
             switch (messageElement.kind) {
                 case 'userMention':
-                    return `<mention-user accountID=${messageElement.accountID}></mention-user>`;
+                    return `<mention-user accountID=${messageElement.accountID}>${messageElement.content}</mention-user>`;
                 case 'roomReference':
                     return `<a href="${environmentURL}/r/${messageElement.roomID}" target="_blank">${messageElement.roomName}</a>`;
                 default:

src/libs/actions/Report.ts

@@ -24,6 +24,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import * as UserUtils from '@libs/UserUtils';
 import Visibility from '@libs/Visibility';
 import CONFIG from '@src/CONFIG';
@@ -2032,6 +2033,10 @@ function openReportFromDeepLink(url: string, isAuthenticated: boolean) {
                     return;
                 }
 
+                if (shouldSkipDeepLinkNavigation(route)) {
+                    return;
+                }
+
                 Navigation.navigate(route as Route, CONST.NAVIGATION.ACTION_TYPE.PUSH);
             });
         });

src/libs/shouldSkipDeepLinkNavigation/index.desktop.ts

@@ -0,0 +1,12 @@
+import ROUTES from '@src/ROUTES';
+
+export default function shouldSkipDeepLinkNavigation(route: string) {
+    // When deep-linking to desktop app with `transition` route we don't want to call navigate
+    // on the route because it will display an infinite loading indicator.
+    // See issue: https://github.com/Expensify/App/issues/33149
+    if (route.includes(ROUTES.TRANSITION_BETWEEN_APPS)) {
+        return true;
+    }
+
+    return false;
+}

src/libs/shouldSkipDeepLinkNavigation/index.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function shouldSkipDeepLinkNavigation(route: string) {
+    // no-op for all other platforms
+    return false;
+}

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -35,6 +35,20 @@ function getActionText(reportAction) {
     return lodashGet(message, 'html', '');
 }
 
+/**
+ * Sets the HTML string to Clipboard.
+ * @param {String} content
+ */
+function setClipboardMessage(content) {
+    const parser = new ExpensiMark();
+    if (!Clipboard.canSetHtml()) {
+        Clipboard.setString(parser.htmlToMarkdown(content));
+    } else {
+        const plainText = parser.htmlToText(content);
+        Clipboard.setHtml(content, plainText);
+    }
+}
+
 const CONTEXT_MENU_TYPES = {
     LINK: 'LINK',
     REPORT_ACTION: 'REPORT_ACTION',
@@ -291,19 +305,13 @@ export default [
                     const taskPreviewMessage = TaskUtils.getTaskCreatedMessage(reportAction);
                     Clipboard.setString(taskPreviewMessage);
                 } else if (ReportActionsUtils.isMemberChangeAction(reportAction)) {
-                    const logMessage = ReportActionsUtils.getMemberChangeMessagePlainText(reportAction);
-                    Clipboard.setString(logMessage);
+                    const logMessage = ReportActionsUtils.getMemberChangeMessageFragment(reportAction).html;
+                    setClipboardMessage(logMessage);
                 } else if (ReportActionsUtils.isSubmittedExpenseAction(reportAction)) {
                     const submittedMessage = _.reduce(reportAction.message, (acc, curr) => `${acc}${curr.text}`, '');
                     Clipboard.setString(submittedMessage);
                 } else if (content) {
-                    const parser = new ExpensiMark();
-                    if (!Clipboard.canSetHtml()) {
-                        Clipboard.setString(parser.htmlToMarkdown(content));
-                    } else {
-                        const plainText = parser.htmlToText(content);
-                        Clipboard.setHtml(content, plainText);
-                    }
+                    setClipboardMessage(content);
                 }
             }
 

src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js

@@ -166,6 +166,7 @@ function StatusClearAfterPage({currentUserPersonalDetails, customStatus}) {
                     key={`${index}+${item.value}`}
                     onSelectRow={() => updateMode(item)}
                     showTooltip={false}
+                    isFocused={item.isSelected}
                 />
             )),
         [statusType, updateMode],

src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Button from '@components/Button';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Section, {CARD_LAYOUT} from '@components/Section';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function WorkspaceCardCreateAWorkspace() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <Section
+            title={translate('workspace.emptyWorkspace.title')}
+            icon={Illustrations.HotDogStand}
+            cardLayout={CARD_LAYOUT.ICON_ON_TOP}
+            subtitle={translate('workspace.emptyWorkspace.subtitle')}
+            subtitleMuted
+            containerStyles={[styles.highlightBG]}
+        >
+            <Button
+                text={translate('workspace.emptyWorkspace.createAWorkspaceCTA')}
+                style={styles.mt5}
+                success
+                medium
+            />
+        </Section>
+    );
+}
+
+WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
+
+export default WorkspaceCardCreateAWorkspace;

src/styles/index.ts

@@ -938,10 +938,14 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
         },
 
-        calendarDayContainerSelected: {
+        buttonDefaultBG: {
             backgroundColor: theme.buttonDefaultBG,
         },
 
+        buttonHoveredBG: {
+            backgroundColor: theme.buttonHoveredBG,
+        },
+
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
             ({
                 height: lodashClamp(textInputHeight, minHeight, maxHeight),
@@ -1952,10 +1956,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'flex-end',
         },
 
-        hoveredButton: {
-            backgroundColor: theme.buttonHoveredBG,
-        },
-
         composerSizeButton: {
             alignSelf: 'center',
             height: 32,