fix: improve UX when creating a trigger using custom requirements

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

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

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`
+const Requirement = ({ customInfoRequests }) => {
-  query customInfoRequests($onlyEnabled: Boolean) {
-    customInfoRequests(onlyEnabled: $onlyEnabled) {
-      id
-      customRequest
-    }
-  }
-`
-
-const Requirement = () => {
   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 ''