add field visibility helper

Author: OlimpiaZurek

src/components/MoneyRequestConfirmationListFooter/ConfirmationFieldList.tsx

@@ -16,6 +16,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
 import type {Unit} from '@src/types/onyx/Policy';
 import ClassificationFields from './fieldGroups/ClassificationFields';
+import computeFieldVisibility, {hasBelowShowMore} from './fieldGroups/fieldVisibility';
 import SettingsFields from './fieldGroups/SettingsFields';
 import TransactionDetailsFields from './fieldGroups/TransactionDetailsFields';
 
@@ -251,23 +252,24 @@ function ConfirmationFieldList({
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Sparkles', 'DownArrow']);
 
-    const showAmount = shouldShowSmartScanFields && shouldShowAmountField;
-    const showCategoryBelowShowMore = shouldShowCategories && !isCategoryRequired;
-    const hasOptionalTags = tagVisibility.some((entry) => entry.shouldShow && !entry.isTagRequired);
-
-    const hasBelowShowMore =
-        showAmount ||
-        isDistanceRequest ||
-        shouldShowMerchant ||
-        shouldShowTimeRequestFields ||
-        showCategoryBelowShowMore ||
-        shouldShowDate ||
-        hasOptionalTags ||
-        shouldShowTax ||
-        shouldShowAttendees ||
-        shouldShowReimbursable ||
-        shouldShowBillable ||
-        isPolicyExpenseChat;
+    const fieldVisibility = computeFieldVisibility({
+        shouldShowSmartScanFields,
+        shouldShowAmountField,
+        isDistanceRequest,
+        shouldShowMerchant,
+        shouldShowTimeRequestFields,
+        shouldShowCategories,
+        isCategoryRequired,
+        shouldShowDate,
+        tagVisibility,
+        policyTagLists,
+        shouldShowTax,
+        shouldShowAttendees,
+        shouldShowReimbursable,
+        shouldShowBillable,
+        isPolicyExpenseChat,
+    });
+    const shouldShowMoreButton = hasBelowShowMore(fieldVisibility);
 
     return (
         <View style={[styles.mb5, styles.mt2]}>
@@ -296,15 +298,10 @@ function ConfirmationFieldList({
                 isNewManualExpenseFlowEnabled={isNewManualExpenseFlowEnabled}
                 isEditingSplitBill={isEditingSplitBill}
                 isPolicyExpenseChat={isPolicyExpenseChat}
-                isDistanceRequest={isDistanceRequest}
                 isManualDistanceRequest={isManualDistanceRequest}
                 isOdometerDistanceRequest={isOdometerDistanceRequest}
                 isGPSDistanceRequest={isGPSDistanceRequest}
-                shouldShowAmountField={shouldShowAmountField}
-                shouldShowSmartScanFields={shouldShowSmartScanFields}
-                shouldShowMerchant={shouldShowMerchant}
                 isMerchantRequired={isMerchantRequired}
-                shouldShowTimeRequestFields={shouldShowTimeRequestFields}
                 isDescriptionRequired={isDescriptionRequired}
                 shouldDisplayFieldError={shouldDisplayFieldError}
                 formError={formError}
@@ -320,6 +317,7 @@ function ConfirmationFieldList({
                 distanceRateName={distanceRateName}
                 distanceRateCurrency={distanceRateCurrency}
                 isCompactMode={isCompactMode}
+                fieldVisibility={fieldVisibility}
             />
 
             <ClassificationFields
@@ -332,23 +330,19 @@ function ConfirmationFieldList({
                 policy={policy}
                 policyForMovingExpenses={policyForMovingExpenses}
                 policyTagLists={policyTagLists}
-                tagVisibility={tagVisibility}
                 previousTagsVisibility={previousTagsVisibility}
                 isReadOnly={isReadOnly}
                 didConfirm={didConfirm}
-                shouldShowCategories={shouldShowCategories}
                 isCategoryRequired={isCategoryRequired}
-                shouldShowDate={shouldShowDate}
-                shouldShowTax={shouldShowTax}
                 canModifyTaxFields={canModifyTaxFields}
-                shouldShowAttendees={shouldShowAttendees}
                 shouldDisplayFieldError={shouldDisplayFieldError}
                 shouldNavigateToUpgradePath={shouldNavigateToUpgradePath}
                 shouldSelectPolicy={shouldSelectPolicy}
                 iouCurrencyCode={iouCurrencyCode}
                 formattedAmountPerAttendee={formattedAmountPerAttendee}
                 formError={formError}
                 isCompactMode={isCompactMode}
+                fieldVisibility={fieldVisibility}
             />
 
             <SettingsFields
@@ -367,9 +361,10 @@ function ConfirmationFieldList({
                 onToggleReimbursable={onToggleReimbursable}
                 onToggleBillable={onToggleBillable}
                 isCompactMode={isCompactMode}
+                fieldVisibility={fieldVisibility}
             />
 
-            {isCompactMode && hasBelowShowMore && (
+            {isCompactMode && shouldShowMoreButton && (
                 <View style={[styles.mt3, styles.alignItemsCenter, styles.pRelative, styles.mh5]}>
                     <View style={[styles.dividerLine, styles.pAbsolute, styles.w100, styles.justifyContentCenter, {transform: [{translateY: -0.5}]}]} />
                     <Button

src/components/MoneyRequestConfirmationListFooter/fieldGroups/ClassificationFields.tsx

@@ -9,13 +9,7 @@ import TaxFields from '@components/MoneyRequestConfirmationList/sections/TaxFiel
 import type CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
-
-type TagVisibilityEntry = {
-    /** Whether this tag list should be displayed */
-    shouldShow: boolean;
-    /** Whether the tag for this list is required to submit */
-    isTagRequired: boolean;
-};
+import type {FieldVisibility, TagEntry} from './fieldVisibility';
 
 type ClassificationFieldsProps = {
     /** Action being performed (drives section navigation targets) */
@@ -42,12 +36,9 @@ type ClassificationFieldsProps = {
     /** Resolved policy used when moving an expense off track-expense (drives tax fallback) */
     policyForMovingExpenses: OnyxEntry<OnyxTypes.Policy> | undefined;
 
-    /** Tag lists configured on the policy */
+    /** Tag lists configured on the policy (used to look up the list at each tag entry's index) */
     policyTagLists: Array<ValueOf<OnyxTypes.PolicyTagLists>>;
 
-    /** Per-tag-list visibility (parallel to `policyTagLists` order) */
-    tagVisibility: TagVisibilityEntry[];
-
     /** Previous render's per-tag-list `shouldShow` projection (drives `TagFields` transitions) */
     previousTagsVisibility: boolean[];
 
@@ -57,24 +48,12 @@ type ClassificationFieldsProps = {
     /** Whether the user has confirmed (locks editable controls) */
     didConfirm: boolean;
 
-    /** Whether the categories field should be displayed */
-    shouldShowCategories: boolean;
-
     /** Whether the categories field is required (drives above-show-more placement) */
     isCategoryRequired: boolean;
 
-    /** Whether the date field should be displayed */
-    shouldShowDate: boolean;
-
-    /** Whether the tax field should be displayed */
-    shouldShowTax: boolean;
-
     /** Whether tax field modifications are allowed */
     canModifyTaxFields: boolean;
 
-    /** Whether the attendees field should be displayed */
-    shouldShowAttendees: boolean;
-
     /** Whether to display per-field validation errors */
     shouldDisplayFieldError: boolean;
 
@@ -95,6 +74,9 @@ type ClassificationFieldsProps = {
 
     /** When true, suppresses optional fields (only required Category + required Tags render) */
     isCompactMode: boolean;
+
+    /** Per-field visibility decisions resolved by `computeFieldVisibility` */
+    fieldVisibility: Pick<FieldVisibility, 'categoryRequired' | 'categoryOptional' | 'date' | 'tagsRequired' | 'tagsOptional' | 'tax' | 'attendees'>;
 };
 
 function ClassificationFields({
@@ -107,41 +89,49 @@ function ClassificationFields({
     policy,
     policyForMovingExpenses,
     policyTagLists,
-    tagVisibility,
     previousTagsVisibility,
     isReadOnly,
     didConfirm,
-    shouldShowCategories,
     isCategoryRequired,
-    shouldShowDate,
-    shouldShowTax,
     canModifyTaxFields,
-    shouldShowAttendees,
     shouldDisplayFieldError,
     shouldNavigateToUpgradePath,
     shouldSelectPolicy,
     iouCurrencyCode,
     formattedAmountPerAttendee,
     formError,
     isCompactMode,
+    fieldVisibility,
 }: ClassificationFieldsProps) {
-    const showCategory = shouldShowCategories && (isCompactMode ? isCategoryRequired : true);
-
-    const visibleTagEntries = policyTagLists
-        .map(({name}, index) => {
-            const tagVisibilityItem = tagVisibility.at(index);
-            return {
-                name,
-                index,
-                isTagRequired: tagVisibilityItem?.isTagRequired ?? false,
-                tagShouldShow: tagVisibilityItem?.shouldShow ?? false,
-            };
-        })
-        .filter(({tagShouldShow, isTagRequired}) => tagShouldShow && (isCompactMode ? isTagRequired : true));
+    const renderTagFields = (entries: TagEntry[]) =>
+        entries.map(({name, index, isTagRequired}) => {
+            const policyTagList = policyTagLists.at(index);
+            if (!policyTagList) {
+                return null;
+            }
+            return (
+                <TagFields
+                    key={`tag_${name}`}
+                    tagIndex={index}
+                    policyTagList={policyTagList}
+                    isTagRequired={isTagRequired}
+                    previousShouldShow={previousTagsVisibility.at(index) ?? false}
+                    didConfirm={didConfirm}
+                    isReadOnly={isReadOnly}
+                    transactionID={transactionID}
+                    action={action}
+                    iouType={iouType}
+                    reportID={reportID}
+                    reportActionID={reportActionID}
+                    transaction={transaction}
+                    formError={formError}
+                />
+            );
+        });
 
     return (
         <>
-            {showCategory && (
+            {(fieldVisibility.categoryRequired || (!isCompactMode && fieldVisibility.categoryOptional)) && (
                 <CategoryField
                     isCategoryRequired={isCategoryRequired}
                     didConfirm={didConfirm}
@@ -159,7 +149,7 @@ function ClassificationFields({
                 />
             )}
 
-            {!isCompactMode && shouldShowDate && (
+            {!isCompactMode && fieldVisibility.date && (
                 <DateField
                     shouldDisplayFieldError={shouldDisplayFieldError}
                     didConfirm={didConfirm}
@@ -173,32 +163,11 @@ function ClassificationFields({
                 />
             )}
 
-            {visibleTagEntries.map(({name, index, isTagRequired}) => {
-                const policyTagList = policyTagLists.at(index);
-                if (!policyTagList) {
-                    return null;
-                }
-                return (
-                    <TagFields
-                        key={`tag_${name}`}
-                        tagIndex={index}
-                        policyTagList={policyTagList}
-                        isTagRequired={isTagRequired}
-                        previousShouldShow={previousTagsVisibility.at(index) ?? false}
-                        didConfirm={didConfirm}
-                        isReadOnly={isReadOnly}
-                        transactionID={transactionID}
-                        action={action}
-                        iouType={iouType}
-                        reportID={reportID}
-                        reportActionID={reportActionID}
-                        transaction={transaction}
-                        formError={formError}
-                    />
-                );
-            })}
-
-            {!isCompactMode && shouldShowTax && (
+            {renderTagFields(fieldVisibility.tagsRequired)}
+
+            {!isCompactMode && renderTagFields(fieldVisibility.tagsOptional)}
+
+            {!isCompactMode && fieldVisibility.tax && (
                 <TaxFields
                     policy={policy}
                     policyForMovingExpenses={policyForMovingExpenses}
@@ -214,7 +183,7 @@ function ClassificationFields({
                 />
             )}
 
-            {!isCompactMode && shouldShowAttendees && (
+            {!isCompactMode && fieldVisibility.attendees && (
                 <AttendeeField
                     formattedAmountPerAttendee={formattedAmountPerAttendee}
                     isReadOnly={isReadOnly}

src/components/MoneyRequestConfirmationListFooter/fieldGroups/SettingsFields.tsx

@@ -6,6 +6,7 @@ import type CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
+import type {FieldVisibility} from './fieldVisibility';
 
 type SettingsFieldsProps = {
     /** Action being performed (drives section navigation targets) */
@@ -52,6 +53,9 @@ type SettingsFieldsProps = {
 
     /** When true, suppresses all fields in this group (all are below show-more) */
     isCompactMode: boolean;
+
+    /** Per-field visibility decisions resolved by `computeFieldVisibility` */
+    fieldVisibility: Pick<FieldVisibility, 'toggles' | 'report'>;
 };
 
 /**
@@ -75,14 +79,14 @@ function SettingsFields({
     onToggleReimbursable,
     onToggleBillable,
     isCompactMode,
+    fieldVisibility,
 }: SettingsFieldsProps) {
     if (isCompactMode) {
         return null;
     }
-    const showToggles = shouldShowReimbursable || shouldShowBillable;
     return (
         <>
-            {showToggles && (
+            {fieldVisibility.toggles && (
                 <ToggleFields
                     isReadOnly={isReadOnly}
                     shouldShowReimbursable={shouldShowReimbursable}
@@ -92,7 +96,7 @@ function SettingsFields({
                     transaction={transaction}
                 />
             )}
-            {isPolicyExpenseChat && (
+            {fieldVisibility.report && (
                 <ReportField
                     selectedParticipants={selectedParticipants}
                     isPolicyExpenseChat={isPolicyExpenseChat}