♻️ split ImportTransactionsModal into smaller component files (actual…

…budget#3552)

packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { theme } from '../../../style';
+import { View } from '../../common/View';
+import { Checkbox } from '../../forms';
+
+export function CheckboxOption({
+  id,
+  checked,
+  disabled,
+  onChange,
+  children,
+  style,
+}) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        userSelect: 'none',
+        minHeight: 28,
+        ...style,
+      }}
+    >
+      <Checkbox
+        id={id}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+      />
+      <label
+        htmlFor={id}
+        style={{
+          userSelect: 'none',
+          color: disabled ? theme.pageTextSubdued : null,
+        }}
+      >
+        {children}
+      </label>
+    </View>
+  );
+}

packages/desktop-client/src/components/modals/ImportTransactionsModal/DateFormatSelect.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Select } from '../../common/Select';
+import { View } from '../../common/View';
+import { SectionLabel } from '../../forms';
+
+import { dateFormats } from './utils';
+
+export function DateFormatSelect({
+  transactions,
+  fieldMappings,
+  parseDateFormat,
+  onChange,
+}) {
+  // We don't actually care about the delimiter, but we try to render
+  // it based on the data we have so far. Look in a transaction and
+  // try to figure out what delimiter the date is using, and default
+  // to space if we can't figure it out.
+  let delimiter = '-';
+  if (transactions.length > 0 && fieldMappings && fieldMappings.date != null) {
+    const date = transactions[0][fieldMappings.date];
+    const m = date && date.match(/[/.,-/\\]/);
+    delimiter = m ? m[0] : ' ';
+  }
+
+  return (
+    <View style={{ width: 120 }}>
+      <SectionLabel title="Date format" />
+      <Select
+        options={dateFormats.map(f => [
+          f.format,
+          f.label.replace(/ /g, delimiter),
+        ])}
+        value={parseDateFormat || ''}
+        onChange={onChange}
+      />
+    </View>
+  );
+}

packages/desktop-client/src/components/modals/ImportTransactionsModal/FieldMappings.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+
+import { Stack } from '../../common/Stack';
+import { View } from '../../common/View';
+import { SectionLabel } from '../../forms';
+
+import { SelectField } from './SelectField';
+import { SubLabel } from './SubLabel';
+
+export function FieldMappings({
+  transactions,
+  mappings,
+  onChange,
+  splitMode,
+  inOutMode,
+  hasHeaderRow,
+}) {
+  if (transactions.length === 0) {
+    return null;
+  }
+
+  const { existing, ignored, selected, selected_merge, trx_id, ...trans } =
+    transactions[0];
+  const options = Object.keys(trans);
+  mappings = mappings || {};
+
+  return (
+    <View>
+      <SectionLabel title="CSV FIELDS" />
+      <Stack
+        direction="row"
+        align="flex-start"
+        spacing={1}
+        style={{ marginTop: 5 }}
+      >
+        <View style={{ flex: 1 }}>
+          <SubLabel title="Date" />
+          <SelectField
+            options={options}
+            value={mappings.date}
+            style={{ marginRight: 5 }}
+            onChange={name => onChange('date', name)}
+            hasHeaderRow={hasHeaderRow}
+            firstTransaction={transactions[0]}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <SubLabel title="Payee" />
+          <SelectField
+            options={options}
+            value={mappings.payee}
+            style={{ marginRight: 5 }}
+            onChange={name => onChange('payee', name)}
+            hasHeaderRow={hasHeaderRow}
+            firstTransaction={transactions[0]}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <SubLabel title="Notes" />
+          <SelectField
+            options={options}
+            value={mappings.notes}
+            style={{ marginRight: 5 }}
+            onChange={name => onChange('notes', name)}
+            hasHeaderRow={hasHeaderRow}
+            firstTransaction={transactions[0]}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <SubLabel title="Category" />
+          <SelectField
+            options={options}
+            value={mappings.category}
+            style={{ marginRight: 5 }}
+            onChange={name => onChange('category', name)}
+            hasHeaderRow={hasHeaderRow}
+            firstTransaction={transactions[0]}
+          />
+        </View>
+        {splitMode ? (
+          <>
+            <View style={{ flex: 0.5 }}>
+              <SubLabel title="Outflow" />
+              <SelectField
+                options={options}
+                value={mappings.outflow}
+                onChange={name => onChange('outflow', name)}
+                hasHeaderRow={hasHeaderRow}
+                firstTransaction={transactions[0]}
+              />
+            </View>
+            <View style={{ flex: 0.5 }}>
+              <SubLabel title="Inflow" />
+              <SelectField
+                options={options}
+                value={mappings.inflow}
+                onChange={name => onChange('inflow', name)}
+                hasHeaderRow={hasHeaderRow}
+                firstTransaction={transactions[0]}
+              />
+            </View>
+          </>
+        ) : (
+          <>
+            {inOutMode && (
+              <View style={{ flex: 1 }}>
+                <SubLabel title="In/Out" />
+                <SelectField
+                  options={options}
+                  value={mappings.inOut}
+                  onChange={name => onChange('inOut', name)}
+                  hasHeaderRow={hasHeaderRow}
+                  firstTransaction={transactions[0]}
+                />
+              </View>
+            )}
+            <View style={{ flex: 1 }}>
+              <SubLabel title="Amount" />
+              <SelectField
+                options={options}
+                value={mappings.amount}
+                onChange={name => onChange('amount', name)}
+                hasHeaderRow={hasHeaderRow}
+                firstTransaction={transactions[0]}
+              />
+            </View>
+          </>
+        )}
+      </Stack>
+    </View>
+  );
+}