feat: add custom requirements UI to the profile page

lib/new-admin/graphql/resolvers/customInfoRequests.resolver.js

@@ -21,7 +21,8 @@ const resolvers = {
     insertCustomInfoRequest: (...[, { customRequest }]) => queries.addCustomInfoRequest(customRequest),
     removeCustomInfoRequest: (...[, { id }]) => queries.removeCustomInfoRequest(id),
     editCustomInfoRequest: (...[, { id, customRequest }]) => queries.editCustomInfoRequest(id, customRequest),
-    setAuthorizedCustomRequest: (...[, { customerId, infoRequestId, isAuthorized }]) => queries.setAuthorizedCustomRequest(customerId, infoRequestId, isAuthorized)
+    setAuthorizedCustomRequest: (...[, { customerId, infoRequestId, isAuthorized }]) => queries.setAuthorizedCustomRequest(customerId, infoRequestId, isAuthorized),
+    setCustomerCustomInfoRequest: (...[, { customerId, infoRequestId, data }]) => queries.setCustomerData(customerId, infoRequestId, data)
   }
 }
 

lib/new-admin/graphql/types/customInfoRequests.type.js

@@ -48,6 +48,7 @@ const typeDef = gql`
     removeCustomInfoRequest(id: ID!): CustomInfoRequest @auth
     editCustomInfoRequest(id: ID!, customRequest: CustomRequestInput!): CustomInfoRequest @auth
     setAuthorizedCustomRequest(customerId: ID!, infoRequestId: ID!, isAuthorized: Boolean!): Boolean @auth
+    setCustomerCustomInfoRequest(customerId: ID!, infoRequestId: ID!, data: JSON!): Boolean @auth
   }
 `
 

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -62,7 +62,8 @@ const CustomerData = ({
   updateCustomer,
   editCustomer,
   deleteEditedData,
-  updateCustomRequest
+  updateCustomRequest,
+  authorizeCustomRequest
 }) => {
   const classes = useStyles()
   const [listView, setListView] = useState(false)
@@ -85,7 +86,7 @@ const CustomerData = ({
   )
 
   const customEntries = null // get customer custom entries
-  const customRequirements = null // get customer custom requirements
+  const customRequirements = [] // get customer custom requirements
   const customInfoRequests = sortByName(
     R.path(['customInfoRequests'])(customer) ?? []
   )
@@ -300,17 +301,20 @@ const CustomerData = ({
   ]
 
   R.forEach(it => {
-    cards.push({
+    console.log('it', it)
-      data: [
+    customRequirements.push({
+      fields: [
         {
-          value: it.customerData.data,
+          name: it.customInfoRequest.id,
+          label: it.customInfoRequest.customRequest.name,
+          value: it.customerData.data ?? '',
           component: TextInput
         }
       ],
       title: it.customInfoRequest.customRequest.name,
       titleIcon: <CardIcon className={classes.cardIcon} />,
       authorize: () =>
-        updateCustomRequest({
+        authorizeCustomRequest({
           variables: {
             customerId: it.customerId,
             infoRequestId: it.customInfoRequest.id,
@@ -318,14 +322,31 @@ const CustomerData = ({
           }
         }),
       reject: () =>
-        updateCustomRequest({
+        authorizeCustomRequest({
           variables: {
             customerId: it.customerId,
             infoRequestId: it.customInfoRequest.id,
             isAuthorized: false
           }
         }),
-      save: () => {}
+      save: values => {
+        updateCustomRequest({
+          variables: {
+            customerId: it.customerId,
+            infoRequestId: it.customInfoRequest.id,
+            data: {
+              info_request_id: it.customInfoRequest.id,
+              data: values[it.customInfoRequest.id]
+            }
+          }
+        })
+      },
+      validationSchema: Yup.object().shape({
+        [it.customInfoRequest.id]: Yup.string()
+      }),
+      initialValues: {
+        [it.customInfoRequest.id]: it.customerData.data ?? ''
+      }
     })
   }, customInfoRequests)
 
@@ -407,6 +428,18 @@ const CustomerData = ({
         {customRequirements && (
           <div className={classes.wrapper}>
             <span className={classes.separator}>Custom requirements</span>
+            <Grid container>
+              <Grid container direction="column" item xs={6}>
+                {customRequirements.map((elem, idx) => {
+                  return isEven(idx) ? editableCard(elem, idx) : null
+                })}
+              </Grid>
+              <Grid container direction="column" item xs={6}>
+                {customRequirements.map((elem, idx) => {
+                  return !isEven(idx) ? editableCard(elem, idx) : null
+                })}
+              </Grid>
+            </Grid>
           </div>
         )}
       </div>

new-lamassu-admin/src/pages/Customers/CustomerProfile.js

@@ -180,6 +180,20 @@ const SET_AUTHORIZED_REQUEST = gql`
   }
 `
 
+const SET_CUSTOMER_CUSTOM_INFO_REQUEST = gql`
+  mutation setCustomerCustomInfoRequest(
+    $customerId: ID!
+    $infoRequestId: ID!
+    $data: JSON!
+  ) {
+    setCustomerCustomInfoRequest(
+      customerId: $customerId
+      infoRequestId: $infoRequestId
+      data: $data
+    )
+  }
+`
+
 const CustomerProfile = memo(() => {
   const history = useHistory()
 
@@ -211,10 +225,18 @@ const CustomerProfile = memo(() => {
   const [setCustomer] = useMutation(SET_CUSTOMER, {
     onCompleted: () => getCustomer()
   })
-  const [updateCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {
+
+  const [authorizeCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {
     onCompleted: () => getCustomer()
   })
 
+  const [setCustomerCustomInfoRequest] = useMutation(
+    SET_CUSTOMER_CUSTOM_INFO_REQUEST,
+    {
+      onCompleted: () => getCustomer()
+    }
+  )
+
   const updateCustomer = it =>
     setCustomer({
       variables: {
@@ -403,7 +425,8 @@ const CustomerProfile = memo(() => {
                 replacePhoto={replacePhoto}
                 editCustomer={editCustomer}
                 deleteEditedData={deleteEditedData}
-                updateCustomRequest={updateCustomRequest}></CustomerData>
+                updateCustomRequest={setCustomerCustomInfoRequest}
+                authorizeCustomRequest={authorizeCustomRequest}></CustomerData>
             </div>
           )}
         </div>