[OldDot Rules Migration] Fix custom names, fix keys

src/components/AmountForm.tsx

@@ -256,6 +256,7 @@ function AmountForm(
                 prefixStyle={styles.colorMuted}
                 keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD}
                 inputMode={CONST.INPUT_MODE.DECIMAL}
+                errorText={errorText}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
             />

src/languages/en.ts

@@ -3850,6 +3850,7 @@ export default {
                 autoPayReportsUnderDescription: 'Fully compliant expense reports under this amount will be automatically paid. ',
                 unlockFeatureGoToSubtitle: 'Go to',
                 unlockFeatureEnableWorkflowsSubtitle: (featureName: string) => `and enable workflows, then add ${featureName} to unlock this feature.`,
+                enableFeatureSubtitle: (featureName: string) => `and enable ${featureName} to unlock this feature.`,
             },
             categoryRules: {
                 title: 'Category rules',

src/languages/es.ts

@@ -3900,6 +3900,7 @@ export default {
                 autoPayReportsUnderDescription: 'Los informes de gastos totalmente conformes por debajo de esta cantidad se pagarán automáticamente.',
                 unlockFeatureGoToSubtitle: 'Ir a',
                 unlockFeatureEnableWorkflowsSubtitle: (featureName: string) => `y habilita flujos de trabajo, luego agrega ${featureName} para desbloquear esta función.`,
+                enableFeatureSubtitle: (featureName: string) => `y habilita ${featureName} para desbloquear esta función.`,
             },
             categoryRules: {
                 title: 'Reglas de categoría',

src/pages/workspace/rules/ExpenseReportRulesSection.tsx

@@ -24,11 +24,12 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
     const styles = useThemeStyles();
     const policy = usePolicy(policyID);
 
+    const customReportNamesUnavailable = !policy?.areReportFieldsEnabled;
     // Auto-approvals and self-approvals are unavailable due to the policy workflows settings
     const workflowApprovalsUnavailable = PolicyUtils.getWorkflowApprovalsUnavailable(policy);
     const autoPayApprovedReportsUnavailable = policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO;
 
-    const renderFallbackSubtitle = (featureName: string) => {
+    const renderFallbackSubtitle = ({featureName, variant = 'unlock'}: {featureName: string; variant?: 'unlock' | 'enable'}) => {
         return (
             <Text style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt2]}>
                 <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.expenseReportRules.unlockFeatureGoToSubtitle')}</Text>{' '}
@@ -38,17 +39,25 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
                 >
                     {translate('workspace.common.moreFeatures').toLowerCase()}
                 </TextLink>{' '}
-                <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.expenseReportRules.unlockFeatureEnableWorkflowsSubtitle', featureName)}</Text>
+                {variant === 'unlock' ? (
+                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.expenseReportRules.unlockFeatureEnableWorkflowsSubtitle', featureName)}</Text>
+                ) : (
+                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.expenseReportRules.enableFeatureSubtitle', featureName)}</Text>
+                )}
             </Text>
         );
     };
 
     const optionItems = [
         {
             title: translate('workspace.rules.expenseReportRules.customReportNamesTitle'),
-            subtitle: translate('workspace.rules.expenseReportRules.customReportNamesSubtitle'),
+            subtitle: customReportNamesUnavailable
+                ? renderFallbackSubtitle({featureName: translate('workspace.common.reportFields').toLowerCase(), variant: 'enable'})
+                : translate('workspace.rules.expenseReportRules.customReportNamesSubtitle'),
             switchAccessibilityLabel: translate('workspace.rules.expenseReportRules.customReportNamesTitle'),
             isActive: policy?.shouldShowCustomReportTitleOption,
+            disabled: customReportNamesUnavailable,
+            showLockIcon: customReportNamesUnavailable,
             pendingAction: policy?.pendingFields?.shouldShowCustomReportTitleOption,
             onToggle: (isEnabled: boolean) => PolicyActions.enablePolicyDefaultReportTitle(policyID, isEnabled),
             subMenuItems: [
@@ -58,9 +67,9 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
                             ? policy?.fieldList?.[CONST.POLICY.FIELD_LIST_TITLE_FIELD_ID].pendingFields?.defaultValue
                             : null
                     }
+                    key="customName"
                 >
                     <MenuItemWithTopDescription
-                        key="customName"
                         description={translate('workspace.rules.expenseReportRules.customNameTitle')}
                         title={policy?.fieldList?.[CONST.POLICY.FIELD_LIST_TITLE_FIELD_ID].defaultValue}
                         shouldShowRightIcon
@@ -87,7 +96,7 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
         {
             title: translate('workspace.rules.expenseReportRules.preventSelfApprovalsTitle'),
             subtitle: workflowApprovalsUnavailable
-                ? renderFallbackSubtitle(translate('common.approvals').toLowerCase())
+                ? renderFallbackSubtitle({featureName: translate('common.approvals').toLowerCase()})
                 : translate('workspace.rules.expenseReportRules.preventSelfApprovalsSubtitle'),
             switchAccessibilityLabel: translate('workspace.rules.expenseReportRules.preventSelfApprovalsTitle'),
             isActive: policy?.preventSelfApproval && !workflowApprovalsUnavailable,
@@ -99,7 +108,7 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
         {
             title: translate('workspace.rules.expenseReportRules.autoApproveCompliantReportsTitle'),
             subtitle: workflowApprovalsUnavailable
-                ? renderFallbackSubtitle(translate('common.approvals').toLowerCase())
+                ? renderFallbackSubtitle({featureName: translate('common.approvals').toLowerCase()})
                 : translate('workspace.rules.expenseReportRules.autoApproveCompliantReportsSubtitle'),
             switchAccessibilityLabel: translate('workspace.rules.expenseReportRules.autoApproveCompliantReportsTitle'),
             isActive: policy?.shouldShowAutoApprovalOptions && !workflowApprovalsUnavailable,
@@ -112,9 +121,9 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
             subMenuItems: [
                 <OfflineWithFeedback
                     pendingAction={!policy?.pendingFields?.shouldShowAutoApprovalOptions && policy?.autoApproval?.pendingFields?.limit ? policy?.autoApproval?.pendingFields?.limit : null}
+                    key="autoApproveReportsUnder"
                 >
                     <MenuItemWithTopDescription
-                        key="autoApproveReportsUnder"
                         description={translate('workspace.rules.expenseReportRules.autoApproveReportsUnderTitle')}
                         title={CurrencyUtils.convertToDisplayString(
                             policy?.autoApproval?.limit ?? CONST.POLICY.AUTO_APPROVE_REPORTS_UNDER_DEFAULT_CENTS,
@@ -129,9 +138,9 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
                     pendingAction={
                         !policy?.pendingFields?.shouldShowAutoApprovalOptions && policy?.autoApproval?.pendingFields?.auditRate ? policy?.autoApproval?.pendingFields?.auditRate : null
                     }
+                    key="randomReportAuditTitle"
                 >
                     <MenuItemWithTopDescription
-                        key="randomReportAuditTitle"
                         description={translate('workspace.rules.expenseReportRules.randomReportAuditTitle')}
                         title={`${policy?.autoApproval?.auditRate ?? CONST.POLICY.RANDOM_AUDIT_DEFAULT_PERCENTAGE}%`}
                         shouldShowRightIcon
@@ -144,7 +153,7 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
         {
             title: translate('workspace.rules.expenseReportRules.autoPayApprovedReportsTitle'),
             subtitle: autoPayApprovedReportsUnavailable
-                ? renderFallbackSubtitle(translate('common.payments').toLowerCase())
+                ? renderFallbackSubtitle({featureName: translate('common.payments').toLowerCase()})
                 : translate('workspace.rules.expenseReportRules.autoPayApprovedReportsSubtitle'),
             switchAccessibilityLabel: translate('workspace.rules.expenseReportRules.autoPayApprovedReportsTitle'),
             onToggle: (isEnabled: boolean) => {
@@ -161,9 +170,9 @@ function ExpenseReportRulesSection({policyID}: ExpenseReportRulesSectionProps) {
                             ? policy?.autoReimbursement?.pendingFields?.limit
                             : null
                     }
+                    key="autoPayReportsUnder"
                 >
                     <MenuItemWithTopDescription
-                        key="autoPayReportsUnder"
                         description={translate('workspace.rules.expenseReportRules.autoPayReportsUnderTitle')}
                         title={CurrencyUtils.convertToDisplayString(
                             policy?.autoReimbursement?.limit ?? CONST.POLICY.AUTO_REIMBURSEMENT_DEFAULT_LIMIT_CENTS,

src/pages/workspace/rules/IndividualExpenseRulesSection.tsx

@@ -158,9 +158,11 @@ function IndividualExpenseRulesSection({policyID}: IndividualExpenseRulesSection
         >
             <View style={[styles.mt3, styles.gap3]}>
                 {individualExpenseRulesItems.map((item) => (
-                    <OfflineWithFeedback pendingAction={item.pendingAction}>
+                    <OfflineWithFeedback
+                        pendingAction={item.pendingAction}
+                        key={translate(item.descriptionTranslationKey)}
+                    >
                         <MenuItemWithTopDescription
-                            key={translate(item.descriptionTranslationKey)}
                             shouldShowRightIcon
                             title={item.title}
                             description={translate(item.descriptionTranslationKey)}