Merge pull request Expensify#36533 from infinitered/trevor-coleman/vi…

…olations/36481-billable-field Move violation message below billable field
rayane-djouah · Feb 15, 2024 · 96cb556 · 96cb556
2 parents b5d0d69 + 1bb7027
commit 96cb556
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -412,22 +412,24 @@ function MoneyRequestView({
                     </OfflineWithFeedback>
                 )}
                 {shouldShowBillable && (
-                    <>
-                        <View style={[styles.flexRow, styles.optionRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                    <View style={[styles.flexRow, styles.optionRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                        <View>
                             <Text color={!transactionBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
-                            <Switch
-                                accessibilityLabel={translate('common.billable')}
-                                isOn={!!transactionBillable}
-                                onToggle={saveBillable}
-                            />
-                            {getErrorForField('billable') && (
+                            {!!getErrorForField('billable') && (
                                 <ViolationMessages
                                     violations={getViolationsForField('billable')}
+                                    containerStyle={[styles.mt1]}
+                                    textStyle={[styles.ph0]}
                                     isLast
                                 />
                             )}
                         </View>
-                    </>
+                        <Switch
+                            accessibilityLabel={translate('common.billable')}
+                            isOn={!!transactionBillable}
+                            onToggle={saveBillable}
+                        />
+                    </View>
                 )}
             </View>
             <SpacerView

diff --git a/src/components/ViolationMessages.tsx b/src/components/ViolationMessages.tsx
@@ -1,22 +1,25 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ViolationsUtils from '@libs/Violations/ViolationsUtils';
 import type {TransactionViolation} from '@src/types/onyx';
 import Text from './Text';
 
-export default function ViolationMessages({violations, isLast}: {violations: TransactionViolation[]; isLast?: boolean}) {
+type ViolationMessagesProps = {violations: TransactionViolation[]; isLast?: boolean; containerStyle?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>};
+
+export default function ViolationMessages({violations, isLast, containerStyle, textStyle}: ViolationMessagesProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const violationMessages = useMemo(() => violations.map((violation) => [violation.name, ViolationsUtils.getViolationTranslation(violation, translate)]), [translate, violations]);
 
     return (
-        <View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>
+        <View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1, containerStyle]}>
             {violationMessages.map(([name, message]) => (
                 <Text
                     key={`violationMessages.${name}`}
-                    style={[styles.ph5, styles.textLabelError]}
+                    style={[styles.ph5, styles.textLabelError, textStyle]}
                 >
                     {message}
                 </Text>