From 87be2a324c66a4b261baa5b62e2c0d324d916516 Mon Sep 17 00:00:00 2001
From: Trevor Coleman <trevor@trevorcoleman.design>
Date: Wed, 14 Feb 2024 12:31:54 -0500
Subject: [PATCH 1/3] fix(Violations): move violation below billable field

---
 src/components/ReportActionItem/MoneyRequestView.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index 6b16f272e4c8..5cd055677b0a 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -403,13 +403,13 @@ function MoneyRequestView({
                                 isOn={!!transactionBillable}
                                 onToggle={saveBillable}
                             />
-                            {getErrorForField('billable') && (
-                                <ViolationMessages
-                                    violations={getViolationsForField('billable')}
-                                    isLast
-                                />
-                            )}
                         </View>
+                        {getErrorForField('billable') && (
+                            <ViolationMessages
+                                violations={getViolationsForField('billable')}
+                                isLast
+                            />
+                        )}
                     </>
                 )}
             </View>

From 872f22cc0cd49a9fb9cea4304a4cfa5cbc1250f4 Mon Sep 17 00:00:00 2001
From: Trevor Coleman <trevor@trevorcoleman.design>
Date: Wed, 14 Feb 2024 18:13:30 -0500
Subject: [PATCH 2/3] add style overrides

---
 .../ReportActionItem/MoneyRequestView.tsx     | 30 ++++++++++---------
 src/components/ViolationMessages.tsx          |  9 ++++--
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index 5cd055677b0a..d312574b7d2e 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -395,22 +395,24 @@ function MoneyRequestView({
                 )}
 
                 {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') && (
+                                <ViolationMessages
+                                    violations={getViolationsForField('billable')}
+                                    containerStyle={[styles.mt1]}
+                                    textStyle={[styles.ph0]}
+                                    isLast
+                                />
+                            )}
                         </View>
-                        {getErrorForField('billable') && (
-                            <ViolationMessages
-                                violations={getViolationsForField('billable')}
-                                isLast
-                            />
-                        )}
-                    </>
+                        <Switch
+                            accessibilityLabel={translate('common.billable')}
+                            isOn={!!transactionBillable}
+                            onToggle={saveBillable}
+                        />
+                    </View>
                 )}
             </View>
             <SpacerView
diff --git a/src/components/ViolationMessages.tsx b/src/components/ViolationMessages.tsx
index f350bd3810b9..0cbcc1051537 100644
--- 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>

From 1bb702752a5a698224c1ce3dbf3abaefb1ac8923 Mon Sep 17 00:00:00 2001
From: Trevor Coleman <trevor@trevorcoleman.design>
Date: Thu, 15 Feb 2024 13:26:11 -0500
Subject: [PATCH 3/3] fix(Violations): make boolean

---
 src/components/ReportActionItem/MoneyRequestView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index d312574b7d2e..b5a8b8160263 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -398,7 +398,7 @@ function MoneyRequestView({
                     <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>
-                            {getErrorForField('billable') && (
+                            {!!getErrorForField('billable') && (
                                 <ViolationMessages
                                     violations={getViolationsForField('billable')}
                                     containerStyle={[styles.mt1]}