From 92eebd630ecc9bbc2cbb7a79fe4e3a750afe6e30 Mon Sep 17 00:00:00 2001 From: Liordino Neto Date: Tue, 20 Oct 2020 16:07:49 -0300 Subject: [PATCH] fix: No reason for 'Enable' switch on 'Wallet Settings' panel (#439) * fix: remove the "enable" toggle fix: make edit available at all times and make it toggle the wizard if the coin config is empty fix: disable focus on the first edit feat: open the coin config wizard when adding a not configured coin on locales * fix: set default value for focusOnEditWhen to avoid breaking tables first field focus refactor: replaced relative path imports from outside the module with full paths fix: removed console.log * fix: changed the edit override logic to a cleaner one * fix: trigger the wizard only when the coin isn't configured --- .../src/components/editableTable/Table.js | 3 ++ .../components/inputs/formik/Autocomplete.js | 7 ++- .../src/pages/Locales/Locales.js | 43 +++++++++++++++++-- new-lamassu-admin/src/pages/Locales/helper.js | 25 +++++------ new-lamassu-admin/src/pages/Wallet/Wallet.js | 15 +++---- 5 files changed, 67 insertions(+), 26 deletions(-) diff --git a/new-lamassu-admin/src/components/editableTable/Table.js b/new-lamassu-admin/src/components/editableTable/Table.js index 27717a90..0987aeb3 100644 --- a/new-lamassu-admin/src/components/editableTable/Table.js +++ b/new-lamassu-admin/src/components/editableTable/Table.js @@ -46,6 +46,8 @@ const ETable = ({ disableAdd, initialValues, setEditing, + shouldOverrideEdit, + editOverride, stripeWhen, disableRowEdit, groupBy, @@ -93,6 +95,7 @@ const ETable = ({ } const onEdit = it => { + if (shouldOverrideEdit && shouldOverrideEdit(it)) return editOverride(it) setEditingId(it) setEditing && setEditing(it, true) } diff --git a/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js b/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js index 47e91cff..ad1a3695 100644 --- a/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js +++ b/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js @@ -4,7 +4,7 @@ import React, { useState } from 'react' import { Autocomplete } from '../base' -const AutocompleteFormik = ({ options, ...props }) => { +const AutocompleteFormik = ({ options, onChange, ...props }) => { const [open, setOpen] = useState(false) const { name, onBlur, value } = props.field @@ -23,7 +23,10 @@ const AutocompleteFormik = ({ options, ...props }) => { return ( setFieldValue(name, item)} + onChange={(event, item) => { + onChange && onChange(value, item) + setFieldValue(name, item) + }} onBlur={innerOnBlur} value={value} error={error} diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js index 3152a75a..2e8a4717 100644 --- a/new-lamassu-admin/src/pages/Locales/Locales.js +++ b/new-lamassu-admin/src/pages/Locales/Locales.js @@ -10,7 +10,9 @@ import { Table as EditableTable } from 'src/components/editableTable' import Section from 'src/components/layout/Section' import TitleSection from 'src/components/layout/TitleSection' import { P } from 'src/components/typography' -import { fromNamespace, toNamespace } from 'src/utils/config' +import Wizard from 'src/pages/Wallet/Wizard' +import { WalletSchema } from 'src/pages/Wallet/helper' +import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' import { styles } from './Locales.styles' import { @@ -27,6 +29,13 @@ const useStyles = makeStyles(styles) const GET_DATA = gql` query getData { config + accounts + accountsConfig { + code + display + class + cryptos + } currencies { code display @@ -89,17 +98,25 @@ const FiatCurrencyChangeAlert = ({ open, close, save }) => { } const Locales = ({ name: SCREEN_KEY }) => { + const [wizard, setWizard] = useState(false) + const [error, setError] = useState(false) const [isEditingDefault, setEditingDefault] = useState(false) const [isEditingOverrides, setEditingOverrides] = useState(false) const { data } = useQuery(GET_DATA) const [saveConfig] = useMutation(SAVE_CONFIG, { + onCompleted: () => setWizard(false), + onError: () => setError(true), refetchQueries: () => ['getData'] }) const [dataToSave, setDataToSave] = useState(null) const config = data?.config && fromNamespace(SCREEN_KEY)(data.config) + const wallets = data?.config && fromNamespace(namespaces.WALLETS)(data.config) + const accountsConfig = data?.accountsConfig + const accounts = data?.accounts ?? [] + const cryptoCurrencies = data?.cryptoCurrencies ?? [] const locale = config && !R.isEmpty(config) ? config : localeDefaults const localeOverrides = locale.overrides ?? [] @@ -116,6 +133,7 @@ const Locales = ({ name: SCREEN_KEY }) => { const save = config => { setDataToSave(null) + setError(false) saveConfig({ variables: { config } }) } @@ -124,6 +142,13 @@ const Locales = ({ name: SCREEN_KEY }) => { return saveConfig({ variables: { config } }) } + const enableCoin = it => { + if (!it) return + + const namespaced = fromNamespace(it)(wallets) + if (!WalletSchema.isValidSync(namespaced)) return setWizard(it) + } + const onEditingDefault = (it, editing) => setEditingDefault(editing) const onEditingOverrides = (it, editing) => setEditingOverrides(editing) @@ -145,7 +170,7 @@ const Locales = ({ name: SCREEN_KEY }) => { save={handleSave} validationSchema={LocaleSchema} data={R.of(locale)} - elements={mainFields(data)} + elements={mainFields(data, enableCoin)} setEditing={onEditingDefault} forceDisable={isEditingOverrides} /> @@ -162,7 +187,7 @@ const Locales = ({ name: SCREEN_KEY }) => { save={saveOverrides} validationSchema={OverridesSchema} data={localeOverrides ?? []} - elements={overrides(data, localeOverrides)} + elements={overrides(data, localeOverrides, enableCoin)} disableAdd={R.compose(R.isEmpty, R.difference)( data?.machines.map(m => m.deviceId) ?? [], localeOverrides?.map(o => o.machine) ?? [] @@ -171,6 +196,18 @@ const Locales = ({ name: SCREEN_KEY }) => { forceDisable={isEditingDefault} /> + {wizard && ( + setWizard(false)} + save={rawConfig => save(toNamespace(namespaces.WALLETS)(rawConfig))} + error={error} + cryptoCurrencies={cryptoCurrencies} + userAccounts={data?.config?.accounts} + accounts={accounts} + accountsConfig={accountsConfig} + /> + )} ) } diff --git a/new-lamassu-admin/src/pages/Locales/helper.js b/new-lamassu-admin/src/pages/Locales/helper.js index 2688045a..082f32a6 100644 --- a/new-lamassu-admin/src/pages/Locales/helper.js +++ b/new-lamassu-admin/src/pages/Locales/helper.js @@ -5,14 +5,14 @@ import Autocomplete from 'src/components/inputs/formik/Autocomplete.js' const LANGUAGE_SELECTION_LIMIT = 4 -const getFields = (getData, names, auxElements = []) => { +const getFields = (getData, names, enableCoin, auxElements = []) => { return R.filter( it => R.includes(it.name, names), - allFields(getData, auxElements) + allFields(getData, enableCoin, auxElements) ) } -const allFields = (getData, auxElements = []) => { +const allFields = (getData, enableCoin, auxElements = []) => { const getView = (data, code, compare) => it => { if (!data) return '' @@ -103,29 +103,30 @@ const allFields = (getData, auxElements = []) => { valueProp: 'code', getLabel: R.path(['code']), multiple: true, - optionsLimit: null + optionsLimit: null, + onChange: (prev, curr) => enableCoin(R.difference(curr, prev)[0]) } } ] } -const mainFields = auxData => { +const mainFields = (auxData, enableCoin) => { const getData = R.path(R.__, auxData) - return getFields(getData, [ - 'country', - 'fiatCurrency', - 'languages', - 'cryptoCurrencies' - ]) + return getFields( + getData, + ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies'], + enableCoin + ) } -const overrides = (auxData, auxElements) => { +const overrides = (auxData, auxElements, enableCoin) => { const getData = R.path(R.__, auxData) return getFields( getData, ['machine', 'country', 'languages', 'cryptoCurrencies'], + enableCoin, auxElements ) } diff --git a/new-lamassu-admin/src/pages/Wallet/Wallet.js b/new-lamassu-admin/src/pages/Wallet/Wallet.js index 895d2091..bfd6e3cc 100644 --- a/new-lamassu-admin/src/pages/Wallet/Wallet.js +++ b/new-lamassu-admin/src/pages/Wallet/Wallet.js @@ -56,10 +56,9 @@ const Wallet = ({ name: SCREEN_KEY }) => { const cryptoCurrencies = data?.cryptoCurrencies ?? [] const accounts = data?.accounts ?? [] - const onToggle = id => { - const namespaced = fromNamespace(id)(config) - if (!WalletSchema.isValidSync(namespaced)) return setWizard(id) - save(toNamespace(id, { active: !namespaced?.active })) + const shouldOverrideEdit = it => { + const namespaced = fromNamespace(it)(config) + return !WalletSchema.isValidSync(namespaced) } return ( @@ -71,13 +70,11 @@ const Wallet = ({ name: SCREEN_KEY }) => { data={config} stripeWhen={it => !WalletSchema.isValidSync(it)} enableEdit - editWidth={134} - enableToggle - toggleWidth={109} - onToggle={onToggle} + shouldOverrideEdit={shouldOverrideEdit} + editOverride={setWizard} + editWidth={174} save={save} validationSchema={WalletSchema} - disableRowEdit={R.compose(R.not, R.path(['active']))} elements={getElements(cryptoCurrencies, accountsConfig)} /> {wizard && (