Merge branch 'main' into Rory-AutomatedThemeHookMigration

src/components/Badge.tsx

@@ -0,0 +1,65 @@
+import React, {useCallback} from 'react';
+import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import styles from '@styles/styles';
+import * as StyleUtils from '@styles/StyleUtils';
+import CONST from '@src/CONST';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import Text from './Text';
+
+type BadgeProps = {
+    /** Is Success type */
+    success?: boolean;
+
+    /** Is Error type */
+    error?: boolean;
+
+    /** Whether badge is clickable */
+    pressable?: boolean;
+
+    /** Text to display in the Badge */
+    text: string;
+
+    /** Text to display in the Badge */
+    environment?: string;
+
+    /** Styles for Badge */
+    badgeStyles?: StyleProp<ViewStyle>;
+
+    /** Styles for Badge Text */
+    textStyles?: StyleProp<TextStyle>;
+
+    /** Callback to be called on onPress */
+    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void;
+};
+
+function Badge({success = false, error = false, pressable = false, text, environment = CONST.ENVIRONMENT.DEV, badgeStyles, textStyles, onPress = () => {}}: BadgeProps) {
+    const textColorStyles = success || error ? styles.textWhite : undefined;
+    const Wrapper = pressable ? PressableWithoutFeedback : View;
+
+    const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles],
+    );
+
+    return (
+        <Wrapper
+            style={pressable ? wrapperStyles : wrapperStyles({focused: false, hovered: false, isDisabled: false, isScreenReaderActive: false, pressed: false})}
+            onPress={onPress}
+            role={pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
+            accessibilityLabel={pressable ? text : undefined}
+            aria-label={!pressable ? text : undefined}
+            accessible={false}
+        >
+            <Text
+                style={[styles.badgeText, textColorStyles, textStyles]}
+                numberOfLines={1}
+            >
+                {text}
+            </Text>
+        </Wrapper>
+    );
+}
+
+Badge.displayName = 'Badge';
+
+export default Badge;

src/components/Icon/Expensicons.ts

@@ -45,6 +45,7 @@ import Download from '@assets/images/download.svg';
 import DragAndDrop from '@assets/images/drag-and-drop.svg';
 import DragHandles from '@assets/images/drag-handles.svg';
 import Emoji from '@assets/images/emoji.svg';
+import EmptyStateAttachReceipt from '@assets/images/empty-state__attach-receipt.svg';
 import EmptyStateRoutePending from '@assets/images/emptystate__routepending.svg';
 import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
 import Exclamation from '@assets/images/exclamation.svg';
@@ -176,6 +177,7 @@ export {
     EReceiptIcon,
     Emoji,
     EmptyStateRoutePending,
+    EmptyStateAttachReceipt,
     Exclamation,
     Exit,
     ExpensifyCard,

src/components/ReceiptEmptyState.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from '@styles/styles';
+import variables from '@styles/variables';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+
+const propTypes = {
+    /** Whether or not there is an error */
+    hasError: PropTypes.bool,
+
+    /** Callback to be called on onPress */
+    onPress: PropTypes.func,
+};
+
+const defaultProps = {
+    hasError: false,
+    onPress: () => {},
+};
+
+// Returns an SVG icon indicating that the user should attach a receipt
+function ReceiptEmptyState({hasError, onPress}) {
+    return (
+        <PressableWithoutFeedback
+            accessibilityRole="imagebutton"
+            onPress={onPress}
+            style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.moneyRequestViewImage, styles.moneyRequestAttachReceipt, hasError && styles.borderColorDanger]}
+        >
+            <Icon
+                src={Expensicons.EmptyStateAttachReceipt}
+                width={variables.eReceiptIconWidth}
+                height={variables.eReceiptIconHeight}
+                fill="transparent"
+            />
+        </PressableWithoutFeedback>
+    );
+}
+
+ReceiptEmptyState.displayName = 'ReceiptEmptyState';
+ReceiptEmptyState.propTypes = propTypes;
+ReceiptEmptyState.defaultProps = defaultProps;
+
+export default ReceiptEmptyState;

src/components/ReportActionItem/MoneyRequestView.js

@@ -8,6 +8,7 @@ import categoryPropTypes from '@components/categoryPropTypes';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ReceiptEmptyState from '@components/ReceiptEmptyState';
 import SpacerView from '@components/SpacerView';
 import Switch from '@components/Switch';
 import tagPropTypes from '@components/tagPropTypes';
@@ -172,6 +173,12 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
                         </View>
                     </OfflineWithFeedback>
                 )}
+                {!hasReceipt && canEdit && !isSettled && Permissions.canUseViolations() && (
+                    <ReceiptEmptyState
+                        hasError={hasErrors}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT))}
+                    />
+                )}
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
                     <MenuItemWithTopDescription
                         title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}

src/styles/styles.ts

@@ -3813,6 +3813,11 @@ const styles = (theme: ThemeColors) =>
             maxWidth: 400,
         },
 
+        moneyRequestAttachReceipt: {
+            backgroundColor: theme.appBG,
+            borderColor: theme.textSupporting,
+        },
+
         mapViewContainer: {
             ...flex.flex1,
             minHeight: 300,