Aesthetic changes to IOUConfirmationList for manual requests

Expensify · Apr 3, 2023 · f57b97f · f57b97f
1 parent 4efde84
commit f57b97f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
@@ -17,6 +17,7 @@ import ROUTES from '../ROUTES';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from './withCurrentUserPersonalDetails';
 import * as IOUUtils from '../libs/IOUUtils';
 import avatarPropTypes from './avatarPropTypes';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -206,12 +207,7 @@ class IOUConfirmationList extends Component {
                 indexOffset: 1,
             });
         } else {
-            const formattedParticipants = OptionsListUtils.getIOUConfirmationOptionsFromParticipants(this.props.participants,
-                this.props.numberFormat(this.props.iouAmount, {
-                    style: 'currency',
-                    currency: this.props.iou.selectedCurrencyCode,
-                }));
-
+            const formattedParticipants = this.getParticipantsWithoutAmount(this.props.participants);
             sections.push({
                 title: this.props.translate('common.to'),
                 data: formattedParticipants,
@@ -285,6 +281,10 @@ class IOUConfirmationList extends Component {
         const shouldDisableButton = selectedParticipants.length === 0;
         const recipient = this.state.participants[0];
         const canModifyParticipants = this.props.canModifyParticipants && this.props.hasMultipleParticipants;
+        const formattedAmount = this.props.numberFormat(this.props.iouAmount, {
+            style: 'currency',
+            currency: this.props.iou.selectedCurrencyCode,
+        });
 
         return (
             <OptionsSelector
@@ -322,7 +322,16 @@ class IOUConfirmationList extends Component {
                             options={this.getSplitOrRequestOptions()}
                         />
                     )}
-            />
+            >
+                <MenuItemWithTopDescription // TODO: Get rid of the padding that's coming from popoverItem within MenuItem for this one.
+                    shouldShowRightIcon
+                    title={formattedAmount}
+                    description={this.props.translate('iou.amount')}
+                    interactive={false}
+                    onPress={() => {}} // TODO: Make this go to edit amount!
+                    titleStyle={styles.iouConfirmationAmount}
+                />
+            </OptionsSelector>
         );
     }
 }

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -31,6 +31,7 @@ const defaultProps = {
     shouldShowDescriptionOnTop: false,
     wrapperStyle: [],
     style: {},
+    titleStyle: {},
     success: false,
     icon: undefined,
     iconWidth: undefined,
@@ -59,7 +60,7 @@ const MenuItem = (props) => {
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
         styles.pre,
-    ], props.style);
+    ], props.style, props.titleStyle);
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -328,12 +328,14 @@ class BaseOptionsSelector extends Component {
                                         {optionsList}
                                     </View>
                                     <View style={[styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0]}>
+                                        {this.props.children}
                                         {textInput}
                                     </View>
                                 </>
                             ) : (
                                 <>
                                     <View style={[styles.ph5, styles.pv3]}>
+                                        {this.props.children}
                                         {textInput}
                                     </View>
                                     {optionsList}

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
@@ -14,6 +14,9 @@ const propTypes = {
     /** Used to apply offline styles to child text components */
     style: stylePropTypes,
 
+    /** Used to apply styles specifically to the title */
+    titleStyle: stylePropTypes,
+
     /** Function to fire when component is pressed */
     onPress: PropTypes.func,
 

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2274,6 +2274,12 @@ const styles = {
         lineHeight: undefined,
     }, 0),
 
+    iouConfirmationAmount: {
+        fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
+        fontWeight: '500',
+        fontSize: 19,
+    },
+
     iouPreviewBox: {
         backgroundColor: themeColors.cardBG,
         borderRadius: variables.componentBorderRadiusCard,