Merge branch 'main' into @chrispader/use-style-utils-hook

.imgbotconfig

@@ -1,7 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
-        "assets/images/empty-state_background-fade-light.png"
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

.storybook/public/index.css

@@ -24,5 +24,5 @@ a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus
 }
 
 .sidebar-container {
-    background: #07271f;
+    background: #072419;
 }

.storybook/theme.js

@@ -7,17 +7,17 @@ export default create({
     fontBase: 'ExpensifyNeue-Regular',
     fontCode: 'monospace',
     base: 'dark',
-    appBg: colors.darkHighlightBackground,
-    colorPrimary: colors.darkDefaultButton,
+    appBg: colors.productDark200,
+    colorPrimary: colors.productDark400,
     colorSecondary: colors.green,
-    appContentBg: colors.darkAppBackground,
-    textColor: colors.darkPrimaryText,
-    barTextColor: colors.darkPrimaryText,
+    appContentBg: colors.productDark100,
+    textColor: colors.productDark900,
+    barTextColor: colors.productDark900,
     barSelectedColor: colors.green,
-    barBg: colors.darkAppBackground,
-    appBorderColor: colors.darkBorders,
-    inputBg: colors.darkHighlightBackground,
-    inputBorder: colors.darkBorders,
+    barBg: colors.productDark100,
+    appBorderColor: colors.productDark400,
+    inputBg: colors.productDark200,
+    inputBorder: colors.productDark400,
     appBorderRadius: 8,
     inputBorderRadius: 8,
 });

docs/_sass/_colors.scss

@@ -2,8 +2,8 @@ $color-green400: #03D47C;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-button-background: #1A3D32;
-$color-button-hovered: #2C6755;
-$color-green-highlightBG: #07271F;
+$color-button-hovered: #2A604F;
+$color-green-highlightBG: #072419;
 $color-green-highlightBG-hover: #06231c;
 $color-green-appBG: #061B09;
 $color-green-hover: #00a862;

src/components/LHNOptionsList/OptionRowLHN.js

@@ -158,6 +158,8 @@ function OptionRowLHN(props) {
         optionItem.type === CONST.REPORT.TYPE.CHAT && _.isEmpty(optionItem.chatType) && !optionItem.isThread && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 2;
     const fullTitle = isGroupChat ? getGroupChatName(ReportUtils.getReport(optionItem.reportID)) : optionItem.text;
 
+    const subscriptAvatarBorderColor = props.isFocused ? focusedBackgroundColor : theme.sidebar;
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -215,7 +217,7 @@ function OptionRowLHN(props) {
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
-                                            backgroundColor={props.isFocused ? theme.activeComponentBG : theme.sidebar}
+                                            backgroundColor={hovered && !props.isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -34,6 +34,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
+import * as Localize from '@src/libs/Localize';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ReportActionItemImages from './ReportActionItemImages';
 
@@ -235,6 +236,10 @@ function MoneyRequestPreview(props) {
             return props.translate('iou.receiptScanning');
         }
 
+        if (TransactionUtils.hasMissingSmartscanFields(props.transaction)) {
+            return Localize.translateLocal('iou.receiptMissingDetails');
+        }
+
         return CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency);
     };
 

src/libs/OptionsListUtils.js

@@ -357,6 +357,8 @@ function getAllReportErrors(report, reportActions) {
         if (ReportUtils.hasMissingSmartscanFields(report.reportID) && !ReportUtils.isSettled(report.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
+    } else if (ReportUtils.hasSmartscanError(_.values(reportActions))) {
+        _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
     }
 
     // All error objects related to the report. Each object in the sources contains error messages keyed by microtime

src/libs/ReportUtils.ts

@@ -421,6 +421,19 @@ Onyx.connect({
     },
 });
 
+let allTransactions: OnyxCollection<Transaction> = {};
+
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.TRANSACTION,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            return;
+        }
+        allTransactions = Object.fromEntries(Object.entries(value).filter(([, transaction]) => transaction));
+    },
+});
+
 function getPolicyTags(policyID: string) {
     return allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
 }
@@ -898,8 +911,8 @@ function hasSingleParticipant(report: OnyxEntry<Report>): boolean {
  *
  */
 function hasOnlyDistanceRequestTransactions(iouReportID: string | undefined): boolean {
-    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return allTransactions.every((transaction) => TransactionUtils.isDistanceRequest(transaction));
+    const transactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return transactions.every((transaction) => TransactionUtils.isDistanceRequest(transaction));
 }
 
 /**
@@ -1588,8 +1601,8 @@ function requiresAttentionFromCurrentUser(option: OnyxEntry<Report> | OptionData
  *
  */
 function hasNonReimbursableTransactions(iouReportID: string | undefined): boolean {
-    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return allTransactions.filter((transaction) => transaction.reimbursable === false).length > 0;
+    const transactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return transactions.filter((transaction) => transaction.reimbursable === false).length > 0;
 }
 
 function getMoneyRequestReimbursableTotal(report: OnyxEntry<Report>, allReportsDict: OnyxCollection<Report> = null): number {
@@ -1841,8 +1854,8 @@ function canEditReportAction(reportAction: OnyxEntry<ReportAction>): boolean {
  * Gets all transactions on an IOU report with a receipt
  */
 function getTransactionsWithReceipts(iouReportID: string | undefined): Transaction[] {
-    const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return allTransactions.filter((transaction) => TransactionUtils.hasReceipt(transaction));
+    const transactions = TransactionUtils.getAllReportTransactions(iouReportID);
+    return transactions.filter((transaction) => TransactionUtils.hasReceipt(transaction));
 }
 
 /**
@@ -1934,6 +1947,10 @@ function getReportPreviewMessage(
                 return Localize.translateLocal('iou.receiptScanning');
             }
 
+            if (TransactionUtils.hasMissingSmartscanFields(linkedTransaction)) {
+                return Localize.translateLocal('iou.receiptMissingDetails');
+            }
+
             const transactionDetails = getTransactionDetails(linkedTransaction);
             const formattedAmount = CurrencyUtils.convertToDisplayString(transactionDetails?.amount ?? 0, transactionDetails?.currency ?? '');
             return Localize.translateLocal('iou.didSplitAmount', {formattedAmount, comment: transactionDetails?.comment ?? ''});
@@ -4251,6 +4268,22 @@ function getRoom(type: ValueOf<typeof CONST.REPORT.CHAT_TYPE>, policyID: string)
 function shouldDisableWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
     return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
 }
+/**
+ * Checks if report action has error when smart scanning
+ */
+function hasSmartscanError(reportActions: ReportAction[]) {
+    return reportActions.some((action) => {
+        if (!ReportActionsUtils.isSplitBillAction(action) && !ReportActionsUtils.isReportPreviewAction(action)) {
+            return false;
+        }
+        const isReportPreviewError = ReportActionsUtils.isReportPreviewAction(action) && hasMissingSmartscanFields(ReportActionsUtils.getIOUReportIDFromReportActionPreview(action));
+        const transactionID = (action.originalMessage as IOUMessage).IOUTransactionID ?? '0';
+        const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? {};
+        const isSplitBillError = ReportActionsUtils.isSplitBillAction(action) && TransactionUtils.hasMissingSmartscanFields(transaction as Transaction);
+
+        return isReportPreviewError || isSplitBillError;
+    });
+}
 
 function shouldAutoFocusOnKeyPress(event: KeyboardEvent): boolean {
     if (event.key.length > 1) {
@@ -4451,6 +4484,7 @@ export {
     shouldDisableWelcomeMessage,
     navigateToPrivateNotes,
     canEditWriteCapability,
+    hasSmartscanError,
     shouldAutoFocusOnKeyPress,
 };
 

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -1,6 +1,5 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback} from 'react';
-import {Image} from 'react-native';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
@@ -18,7 +17,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import exampleCheckImage from './exampleCheckImage';
+import ExampleCheck from './ExampleCheck';
 import StepPropTypes from './StepPropTypes';
 
 const propTypes = {
@@ -27,7 +26,7 @@ const propTypes = {
 
 function BankAccountManualStep(props) {
     const styles = useThemeStyles();
-    const {translate, preferredLocale} = useLocalize();
+    const {translate} = useLocalize();
     const {reimbursementAccount, reimbursementAccountDraft} = props;
 
     const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, 'achData.bankAccountID'));
@@ -95,11 +94,7 @@ function BankAccountManualStep(props) {
                 style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 <Text style={[styles.mb5]}>{translate('bankAccount.checkHelpLine')}</Text>
-                <Image
-                    resizeMode="contain"
-                    style={[styles.exampleCheckImage, styles.mb5]}
-                    source={exampleCheckImage(preferredLocale)}
-                />
+                <ExampleCheck />
                 <InputWrapper
                     InputComponent={TextInput}
                     autoFocus

src/pages/ReimbursementAccount/ExampleCheck.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Image} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+
+function ExampleCheckImage() {
+    const styles = useThemeStyles();
+    const illustrations = useThemeIllustrations();
+    const {preferredLocale} = useLocalize();
+    const isSpanish = (preferredLocale || CONST.LOCALES.DEFAULT) === CONST.LOCALES.ES;
+
+    return (
+        <Image
+            resizeMode="contain"
+            style={[styles.exampleCheckImage, styles.mb5]}
+            source={isSpanish ? illustrations.ExampleCheckES : illustrations.ExampleCheckEN}
+        />
+    );
+}
+
+ExampleCheckImage.displayName = 'ExampleCheckImage';
+export default ExampleCheckImage;

src/pages/home/sidebar/SidebarLinksData.js

@@ -9,7 +9,6 @@ import withCurrentReportID from '@components/withCurrentReportID';
 import withNavigationFocus from '@components/withNavigationFocus';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
-import * as SessionUtils from '@libs/SessionUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -41,7 +40,7 @@ const propTypes = {
     ),
 
     /** Whether the reports are loading. When false it means they are ready to be used. */
-    isLoadingReportData: PropTypes.bool,
+    isLoadingApp: PropTypes.bool,
 
     /** The chat priority mode */
     priorityMode: PropTypes.string,
@@ -57,18 +56,18 @@ const propTypes = {
 const defaultProps = {
     chatReports: {},
     allReportActions: {},
-    isLoadingReportData: true,
+    isLoadingApp: true,
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
     betas: [],
     policies: {},
 };
 
-function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingReportData, onLinkClick, policies, priorityMode}) {
+function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingApp, onLinkClick, policies, priorityMode}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const reportIDsRef = useRef(null);
-    const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData;
+    const isLoading = isLoadingApp;
     const optionListItems = useMemo(() => {
         const reportIDs = SidebarUtils.getOrderedReportIDs(null, chatReports, betas, policies, priorityMode, allReportActions);
         if (deepEqual(reportIDsRef.current, reportIDs)) {
@@ -201,8 +200,8 @@ export default compose(
             selector: chatReportSelector,
             initialValue: {},
         },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        isLoadingApp: {
+            key: ONYXKEYS.IS_LOADING_APP,
         },
         priorityMode: {
             key: ONYXKEYS.NVP_PRIORITY_MODE,

src/styles/colors.ts

@@ -19,27 +19,26 @@ const colors: Record<string, Color> = {
     transparent: 'transparent',
 
     // Dark Mode Theme Colors
-    darkAppBackground: '#061B09',
-    darkHighlightBackground: '#07271F',
-    darkBorders: '#1A3D32',
-    darkIcons: '#8B9C8F',
-    darkSupportingText: '#AFBBB0',
-    darkPrimaryText: '#E7ECE9',
-    darkDefaultButton: '#184E3D',
-    darkDefaultButtonHover: '#2C6755',
-    darkDefaultButtonPressed: '#467164',
+    productDark100: '#061B09',
+    productDark200: '#072419',
+    productDark300: '#0A2E25',
+    productDark400: '#1A3D32',
+    productDark500: '#224F41',
+    productDark600: '#2A604F',
+    productDark700: '#8B9C8F',
+    productDark800: '#AFBBB0',
+    productDark900: '#E7ECE9',
 
     // Light Mode Theme Colors
-    lightAppBackground: '#FCFBF9',
-    lightHighlightBackground: '#F8F4F0',
-    lightBorders: '#EBE6DF',
-    lightBordersLighter: '#2B5548',
-    lightIcons: '#A2A9A3',
-    lightSupportingText: '#76847E',
-    lightPrimaryText: '#002E22',
-    lightDefaultButton: '#EEEBE7',
-    lightDefaultButtonHover: '#E3DFD9',
-    lightDefaultButtonPressed: '#D2CCC3',
+    productLight100: '#FCFBF9',
+    productLight200: '#F8F4F0',
+    productLight300: '#F2EDE7',
+    productLight400: '#E6E1DA',
+    productLight500: '#D8D1C7',
+    productLight600: '#C7BFB3',
+    productLight700: '#A2A9A3',
+    productLight800: '#76847E',
+    productLight900: '#002E22',
 
     // Brand Colors from Figma
     blue100: '#B0D9FF',

src/styles/illustrations/dark.ts

@@ -1,8 +1,12 @@
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
+import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
+import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
+import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
 import {Illustrations} from './types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
+    ExampleCheckEN,
+    ExampleCheckES,
 } satisfies Illustrations;
 
 export default illustrations;