feat UGN-232 - toast that warns about matching one field twice

src/components/Selects/MatchColumnSelect.tsx

@@ -57,7 +57,7 @@ interface Props {
 export const MatchColumnSelect = ({ onChange, value, options, placeholder }: Props) => {
   return (
     <Select
-      value={value}
+      value={value || null}
       onChange={onChange}
       placeholder={placeholder}
       options={options}

src/steps/MatchColumnsStep/MatchColumnsStep.tsx

@@ -11,6 +11,7 @@ import type { Field } from "../../types"
 import { getMatchedColumns } from "./utils/getMatchedColumns"
 import { UnmatchedFieldsAlert } from "../../components/Alerts/UnmatchedFieldsAlert"
 import { findUnmatchedRequiredFields } from "./utils/findUnmatchedRequiredFields"
+import { useToast } from "@chakra-ui/react"
 
 export type MatchColumnsProps = {
   data: string[][]
@@ -62,8 +63,9 @@ export type Column<T extends string> =
 export type Columns<T extends string> = Column<T>[]
 
 export const MatchColumnsStep = <T extends string>({ data, headerValues, onContinue }: MatchColumnsProps) => {
+  const toast = useToast()
   const dataExample = data.slice(0, 2)
-  const { fields, autoMapHeaders, autoMapDistance } = useRsi<T>()
+  const { fields, autoMapHeaders, autoMapDistance, translations } = useRsi<T>()
   const [columns, setColumns] = useState<Columns<T>>(
     headerValues.map((value, index) => ({ type: ColumnType.empty, index, header: value })),
   )
@@ -72,8 +74,26 @@ export const MatchColumnsStep = <T extends string>({ data, headerValues, onConti
   const onChange = useCallback(
     (value: T, columnIndex: number) => {
       const field = fields.find((field) => field.key === value) as unknown as Field<T>
+      const existingFieldIndex = columns.findIndex((column) => "value" in column && column.value === field.key)
       setColumns(
-        columns.map<Column<T>>((column, index) => (columnIndex === index ? setColumn(column, field, data) : column)),
+        columns.map<Column<T>>((column, index) => {
+          columnIndex === index ? setColumn(column, field, data) : column
+          if (columnIndex === index) {
+            return setColumn(column, field, data)
+          } else if (index === existingFieldIndex) {
+            toast({
+              status: "warning",
+              variant: "left-accent",
+              position: "bottom-left",
+              title: translations.matchColumnsStep.duplicateColumnWarningTitle,
+              description: translations.matchColumnsStep.duplicateColumnWarningDescription,
+              isClosable: true,
+            })
+            return setColumn(column)
+          } else {
+            return column
+          }
+        }),
       )
     },
     [columns, setColumns],

src/steps/UploadFlow.tsx

@@ -61,6 +61,7 @@ export const UploadFlow = ({ nextStep }: Props) => {
                   variant: "left-accent",
                   position: "bottom-left",
                   title: `${translations.uploadStep.maxRecordsExceeded(maxRecords.toString())}`,
+                  isClosable: true,
                 })
               }
               setState({ type: Type.selectHeader, data: mapWorkbook(workbook) })
@@ -82,6 +83,7 @@ export const UploadFlow = ({ nextStep }: Props) => {
                 variant: "left-accent",
                 position: "bottom-left",
                 title: `${translations.uploadStep.maxRecordsExceeded(maxRecords.toString())}`,
+                isClosable: true,
               })
             }
             setState({ type: Type.selectHeader, data: mapWorkbook(state.workbook, sheetName) })

src/steps/UploadStep/components/DropZone.tsx

@@ -32,6 +32,7 @@ export const DropZone = ({ onContinue }: DropZoneProps) => {
           position: "bottom-left",
           title: `${fileRejection.file.name} ${translations.uploadStep.dropzone.errorToastDescription}`,
           description: fileRejection.errors[0].message,
+          isClosable: true,
         })
       })
     },

src/translationsRSIProps.ts

@@ -32,6 +32,8 @@ export const translations = {
     subSelectPlaceholder: "Select...",
     matchDropdownTitle: "Match",
     unmatched: "Unmatched",
+    duplicateColumnWarningTitle: "Another column unselected",
+    duplicateColumnWarningDescription: "Columns cannot duplicate",
   },
   validationStep: {
     title: "Validate data",