Adds ReceiptEmptyState Component and adds new component to MoneyRequestView

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';
@@ -176,6 +177,12 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                         </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

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