Fix containsHeader logic and styling

filip-solecki · filip-solecki · commit a637a8ab33b1 · 2024-08-29T10:51:40.000+02:00
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -5492,6 +5492,8 @@ const CONST = {
     IMPORT_SPREADSHEET: {
         ICON_WIDTH: 180,
         ICON_HEIGHT: 160,
+
+        CATEGORIES_ARTICLE_LINK: 'https://help.expensify.com/articles/expensify-classic/workspaces/Create-categories#import-custom-categories',
     },
 } as const;
 
diff --git a/src/components/ImportSpreadsheet.tsx b/src/components/ImportSpreadsheet.tsx
@@ -107,6 +107,7 @@ function ImportSpreedsheet({backTo, goTo}: ImportSpreedsheetProps) {
                 <ImageSVG
                     src={Expensicons.SpreadsheetComputer}
                     contentFit="contain"
+                    style={styles.mb4}
                     width={CONST.IMPORT_SPREADSHEET.ICON_WIDTH}
                     height={CONST.IMPORT_SPREADSHEET.ICON_HEIGHT}
                 />
@@ -179,6 +180,7 @@ function ImportSpreedsheet({backTo, goTo}: ImportSpreedsheetProps) {
                                         <ImageSVG
                                             src={Expensicons.SpreadsheetComputer}
                                             contentFit="contain"
+                                            style={styles.mb4}
                                             width={CONST.IMPORT_SPREADSHEET.ICON_WIDTH}
                                             height={CONST.IMPORT_SPREADSHEET.ICON_HEIGHT}
                                         />
diff --git a/src/components/ImportSpreadsheetColumns.tsx b/src/components/ImportSpreadsheetColumns.tsx
@@ -1,30 +1,26 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Parser from '@libs/Parser';
+import {openImportPage, setContainsHeader} from '@libs/actions/ImportSpreadsheet';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import type {ColumnRole} from './ImportColumn';
 import ImportColumn from './ImportColumn';
 import OfflineWithFeedback from './OfflineWithFeedback';
-import RenderHTML from './RenderHTML';
 import ScrollView from './ScrollView';
 import Switch from './Switch';
 import Text from './Text';
+import TextLink from './TextLink';
 
 type ImportSpreadsheetColumnsProps = {
     // An array of arrays containing strings, representing the spreadsheet data.
     spreadsheetColumns: string[][];
 
-    // A boolean indicating whether the first row of the spreadsheet contains headers.
-    containsHeader: boolean;
-
-    // A function to set the containsHeader state.
-    setContainsHeader: (containsHeader: boolean) => void;
-
     // An array of strings representing the names of the columns.
     columnNames: string[];
 
@@ -42,35 +38,39 @@ type ImportSpreadsheetColumnsProps = {
 
     // A string representing the header text to be rendered.
     headerText: string;
+
+    // Link to learn more about the file preparation for import.
+    learnMoreLink?: string;
 };
 
-function ImportSpreeadsheetColumns({
-    spreadsheetColumns,
-    containsHeader,
-    setContainsHeader,
-    columnNames,
-    columnRoles,
-    errors,
-    importFunction,
-    isButtonLoading,
-    headerText,
-}: ImportSpreadsheetColumnsProps) {
+function ImportSpreeadsheetColumns({spreadsheetColumns, columnNames, columnRoles, errors, importFunction, isButtonLoading, headerText, learnMoreLink}: ImportSpreadsheetColumnsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const [spreadsheet] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET);
+    const {containsHeader} = spreadsheet ?? {};
+
+    useEffect(() => {
+        openImportPage(containsHeader);
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, []);
 
     return (
         <>
             <ScrollView>
                 <View style={styles.mh5}>
-                    <RenderHTML html={Parser.replace(headerText)} />
+                    <Text>
+                        {headerText}
+                        <TextLink href={learnMoreLink ?? ''}>{` [${translate('common.learnMore')}]`}</TextLink>
+                    </Text>
 
                     <View style={[styles.mt7, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
                         <Text>{translate('spreadsheet.fileContainsHeader')}</Text>
 
                         <Switch
                             accessibilityLabel={translate('spreadsheet.fileContainsHeader')}
-                            isOn={containsHeader}
+                            isOn={containsHeader === true}
+                            // eslint-disable-next-line @typescript-eslint/no-misused-promises
                             onToggle={setContainsHeader}
                         />
                     </View>
@@ -80,7 +80,7 @@ function ImportSpreeadsheetColumns({
                             <ImportColumn
                                 key={columnNames[index]}
                                 column={column}
-                                containsHeader={containsHeader}
+                                containsHeader={containsHeader === true}
                                 columnName={columnNames[index]}
                                 columnRoles={columnRoles}
                                 columnIndex={index}
@@ -93,6 +93,7 @@ function ImportSpreeadsheetColumns({
                 <OfflineWithFeedback
                     shouldDisplayErrorAbove
                     errors={errors}
+                    errorRowStyles={styles.mv2}
                     canDismissError={false}
                 >
                     <Button
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2867,7 +2867,7 @@ export default {
             glCode: 'GL code',
             updateGLCodeFailureMessage: 'An error occurred while updating the GL code, please try again.',
             importCategories: 'Import categories',
-            importedCategoriesMessage: 'Choose which fields to map from your spreadsheet by clicking the dropdown next to each imported column below. [Learn more].',
+            importedCategoriesMessage: 'Choose which fields to map from your spreadsheet by clicking the dropdown next to each imported column below.',
         },
         moreFeatures: {
             spendSection: {
diff --git a/src/libs/actions/ImportSpreadsheet.ts b/src/libs/actions/ImportSpreadsheet.ts
@@ -2,6 +2,13 @@ import Onyx from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
+function openImportPage(containsHeader?: boolean): Promise<void> | undefined {
+    if (containsHeader !== undefined) {
+        return;
+    }
+    return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {containsHeader: true});
+}
+
 function setSpreadsheetData(data: string[][]): Promise<void | void[]> {
     if (!Array.isArray(data) || !Array.isArray(data[0])) {
         return Promise.reject(new Error('Invalid data format'));
@@ -20,8 +27,12 @@ function setColumnName(columnIndex: number, columnName: string): Promise<void> {
     return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {columns: {[columnIndex]: columnName}});
 }
 
+function setContainsHeader(containsHeader: boolean): Promise<void> {
+    return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {containsHeader});
+}
+
 function closeImportPage(): Promise<void> {
-    return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, null);
+    return Onyx.merge(ONYXKEYS.IMPORTED_SPREADSHEET, {data: null, columns: null, shouldFinalModalBeOpened: false, importFinalModal: null});
 }
 
-export {setSpreadsheetData, setColumnName, closeImportPage};
+export {setSpreadsheetData, setColumnName, closeImportPage, setContainsHeader, openImportPage};
diff --git a/src/pages/workspace/categories/ImportedCategoriesPage.tsx b/src/pages/workspace/categories/ImportedCategoriesPage.tsx
@@ -24,7 +24,7 @@ function ImportedCategoriesPage({route}: ImportedCategoriesPageProps) {
     const {translate} = useLocalize();
     const [spreadsheet] = useOnyx(ONYXKEYS.IMPORTED_SPREADSHEET);
     const [isImportingCategories, setIsImportingCategories] = useState(false);
-    const [containsHeader, setContainsHeader] = useState(false);
+    const {containsHeader} = spreadsheet ?? {};
     const policyID = route.params.policyID;
     const policy = usePolicy(policyID);
     const columnNames = generateColumnNames(spreadsheet?.data?.length ?? 0);
@@ -111,14 +111,13 @@ function ImportedCategoriesPage({route}: ImportedCategoriesPageProps) {
             />
             <ImportSpreadsheetColumns
                 spreadsheetColumns={spreadsheetColumns}
-                containsHeader={containsHeader}
-                setContainsHeader={setContainsHeader}
                 columnNames={columnNames}
                 importFunction={importCategories}
                 errors={validate()}
                 columnRoles={columnRoles}
                 isButtonLoading={isImportingCategories}
                 headerText={translate('workspace.categories.importedCategoriesMessage')}
+                learnMoreLink={CONST.IMPORT_SPREADSHEET.CATEGORIES_ARTICLE_LINK}
             />
 
             <ConfirmModal
diff --git a/src/types/onyx/ImportedSpreadsheet.ts b/src/types/onyx/ImportedSpreadsheet.ts
@@ -17,6 +17,9 @@ type ImportedSpreadsheet = {
         /** Message to display */
         prompt: string;
     };
+
+    /** Whether the first row of the spreadsheet contains headers */
+    containsHeader: boolean;
 };
 
 export default ImportedSpreadsheet;
