chore: use monorepo organization

packages/admin-ui/src/pages/Services/Services.jsx

@@ -0,0 +1,141 @@
+import { useQuery, useMutation, gql } from '@apollo/client'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+import Modal from 'src/components/Modal'
+import CheckboxInput from 'src/components/inputs/formik/Checkbox'
+import TitleSection from 'src/components/layout/TitleSection'
+import SingleRowTable from 'src/components/single-row-table/SingleRowTable'
+
+import { SecretInput } from 'src/components/inputs/formik'
+import { formatLong } from 'src/utils/string'
+
+import FormRenderer from './FormRenderer'
+import _schemas from './schemas'
+
+const GET_INFO = gql`
+  query getData {
+    accounts
+    config
+  }
+`
+
+const GET_MARKETS = gql`
+  query getMarkets {
+    getMarkets
+  }
+`
+
+const SAVE_ACCOUNT = gql`
+  mutation Save($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
+const Services = () => {
+  const [editingSchema, setEditingSchema] = useState(null)
+
+  const { data, loading: configLoading } = useQuery(GET_INFO)
+  const { data: marketsData, loading: marketsLoading } = useQuery(GET_MARKETS)
+  const [saveAccount] = useMutation(SAVE_ACCOUNT, {
+    onCompleted: () => setEditingSchema(null),
+    refetchQueries: ['getData']
+  })
+
+  const markets = marketsData?.getMarkets
+
+  const schemas = _schemas(markets)
+
+  const accounts = data?.accounts ?? {}
+
+  const getItems = (code, elements) => {
+    const faceElements = R.filter(R.prop('face'))(elements)
+    const values = accounts[code] || {}
+    return R.map(({ display, code, long }) => ({
+      label: display,
+      value: long ? formatLong(values[code]) : values[code]
+    }))(faceElements)
+  }
+
+  const updateSettings = element => {
+    const settings = element.settings
+    const field = R.lensPath(['config', settings.field])
+    const isEnabled = R.isNil(settings.requirement)
+      ? true
+      : R.equals(R.view(field, data), settings.requirement)
+    settings.enabled = isEnabled
+    return element
+  }
+
+  const getElements = ({ code, elements }) => {
+    return R.map(elem => {
+      if (elem.component === CheckboxInput) return updateSettings(elem)
+      if (elem.component !== SecretInput) return elem
+      return {
+        ...elem,
+        inputProps: {
+          isPasswordFilled:
+            !R.isNil(accounts[code]) &&
+            !R.isNil(R.path([elem.code], accounts[code]))
+        }
+      }
+    }, elements)
+  }
+
+  const getAccounts = ({ elements, code }) => {
+    const account = accounts[code]
+    const filterBySecretComponent = R.filter(R.propEq('component', SecretInput))
+    const mapToCode = R.map(R.prop(['code']))
+    const passwordFields = R.compose(
+      mapToCode,
+      filterBySecretComponent
+    )(elements)
+    return R.mapObjIndexed(
+      (value, key) => (R.includes(key, passwordFields) ? '' : value),
+      account
+    )
+  }
+
+  const getValidationSchema = ({ code, getValidationSchema }) =>
+    getValidationSchema(accounts[code])
+
+  const loading = marketsLoading || configLoading
+
+  return (
+    !loading && (
+      <div>
+        <TitleSection title="Third-Party services" />
+        <div className="grid grid-cols-3 gap-5">
+          {R.values(schemas).map(schema => (
+            <SingleRowTable
+              key={schema.code}
+              editMessage={'Configure ' + schema.title}
+              title={schema.title}
+              onEdit={() => setEditingSchema(schema)}
+              items={getItems(schema.code, schema.elements)}
+            />
+          ))}
+        </div>
+        {editingSchema && (
+          <Modal
+            title={`Edit ${editingSchema.name}`}
+            width={525}
+            handleClose={() => setEditingSchema(null)}
+            open={true}>
+            <FormRenderer
+              save={it =>
+                saveAccount({
+                  variables: { accounts: { [editingSchema.code]: it } }
+                })
+              }
+              elements={getElements(editingSchema)}
+              validationSchema={getValidationSchema(editingSchema)}
+              value={getAccounts(editingSchema)}
+            />
+          </Modal>
+        )}
+      </div>
+    )
+  )
+}
+
+export default Services