Merge pull request #1050 from chaotixkilla/fix-improve-custom-trigger-ux

Improve custom requirements trigger creation UX

new-lamassu-admin/src/pages/Triggers/TriggerView.js

@@ -75,6 +75,7 @@ const TriggerView = ({
           error={error?.message}
           save={add}
           onClose={toggleWizard}
+          customInfoRequests={customInfoRequests}
         />
       )}
       {R.isEmpty(triggers) && (

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -48,8 +48,10 @@ const GET_CUSTOM_REQUESTS = gql`
 const Triggers = () => {
   const classes = useStyles()
   const [wizardType, setWizard] = useState(false)
-  const { data, loading } = useQuery(GET_CONFIG)
-  const { data: customInfoReqData } = useQuery(GET_CUSTOM_REQUESTS)
+  const { data, loading: configLoading } = useQuery(GET_CONFIG)
+  const { data: customInfoReqData, loading: customInfoLoading } = useQuery(
+    GET_CUSTOM_REQUESTS
+  )
   const [error, setError] = useState(null)
   const [subMenu, setSubMenu] = useState(false)
 
@@ -94,6 +96,8 @@ const Triggers = () => {
     return setWizard(wizardName)
   }
 
+  const loading = configLoading || customInfoLoading
+
   return (
     <>
       <TitleSection
@@ -178,7 +182,7 @@ const Triggers = () => {
           showWizard={wizardType === 'newTrigger'}
           config={data?.config ?? {}}
           toggleWizard={toggleWizard('newTrigger')}
-          customInfoRequests={customInfoRequests}
+          customInfoRequests={enabledCustomInfoRequests}
         />
       )}
       {!loading && subMenu === 'advancedSettings' && (

new-lamassu-admin/src/pages/Triggers/Wizard.js

@@ -48,14 +48,14 @@ const styles = {
 
 const useStyles = makeStyles(styles)
 
-const getStep = (step, currency) => {
+const getStep = (step, currency, customInfoRequests) => {
   switch (step) {
     // case 1:
     //   return txDirection
     case 1:
       return type(currency)
     case 2:
-      return requirements
+      return requirements(customInfoRequests)
     default:
       return Fragment
   }
@@ -202,7 +202,7 @@ const GetValues = ({ setValues }) => {
   return null
 }
 
-const Wizard = ({ onClose, save, error, currency }) => {
+const Wizard = ({ onClose, save, error, currency, customInfoRequests }) => {
   const classes = useStyles()
 
   const [liveValues, setLiveValues] = useState({})
@@ -211,7 +211,7 @@ const Wizard = ({ onClose, save, error, currency }) => {
   })
 
   const isLastStep = step === LAST_STEP
-  const stepOptions = getStep(step, currency)
+  const stepOptions = getStep(step, currency, customInfoRequests)
 
   const onContinue = async it => {
     const newConfig = R.merge(config, stepOptions.schema.cast(it))

new-lamassu-admin/src/pages/Triggers/helper.js

@@ -1,8 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
 import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 import * as Yup from 'yup'
@@ -508,16 +506,7 @@ const requirementOptions = [
   { display: 'Block', code: 'block' }
 ]
 
-const GET_ACTIVE_CUSTOM_REQUESTS = gql`
-  query customInfoRequests($onlyEnabled: Boolean) {
-    customInfoRequests(onlyEnabled: $onlyEnabled) {
-      id
-      customRequest
-    }
-  }
-`
-
-const Requirement = () => {
+const Requirement = ({ customInfoRequests }) => {
   const classes = useStyles()
   const {
     touched,
@@ -526,11 +515,6 @@ const Requirement = () => {
     handleChange,
     setTouched
   } = useFormikContext()
-  const { data } = useQuery(GET_ACTIVE_CUSTOM_REQUESTS, {
-    variables: {
-      onlyEnabled: true
-    }
-  })
 
   const isSuspend = values?.requirement?.requirement === 'suspend'
   const isCustom = values?.requirement?.requirement === 'custom'
@@ -546,8 +530,7 @@ const Requirement = () => {
     (!values.requirement?.suspensionDays ||
       values.requirement?.suspensionDays < 0)
 
-  const customInfoRequests = R.path(['customInfoRequests'])(data) ?? []
-  const enableCustomRequirement = customInfoRequests.length > 0
+  const enableCustomRequirement = customInfoRequests?.length > 0
   const customInfoOption = {
     display: 'Custom information requirement',
     code: 'custom'
@@ -604,10 +587,11 @@ const Requirement = () => {
   )
 }
 
-const requirements = {
+const requirements = customInfoRequests => ({
   schema: requirementSchema,
   options: requirementOptions,
   Component: Requirement,
+  props: { customInfoRequests },
   initialValues: {
     requirement: {
       requirement: '',
@@ -615,7 +599,7 @@ const requirements = {
       customInfoRequestId: ''
     }
   }
-}
+})
 
 const getView = (data, code, compare) => it => {
   if (!data) return ''