Chore: Add basic screen and toggle

Chore: form skeleton

Feat: wizard step 1 and 2

Feat: toggle button group for formik

Feat: select input type Form and styling

Feat: text entry page

Feat: Choice list and CSS

Fix: scroll to bottom on Add choice button click

Feat: format data at end of wizard

Feat: wizard toggle button and background blur

Feat: data table for custom info requests

Feat: editing and deleting custom info request

Feat: add icons

Fix: Wizard changes

Feat: custom requests migrations

Feat: fetch custom info requests

Feat: add mutations

Feat: add custom request option in trigger wizard

Feat: show customrequests on table

Feat: Triggers page code refactor

Feat: integrate custom info requests on Customer graphql type

Feat: Show custom info requests on user page

Fix: use normal table instead of datatable

Feat: modal for custom information request details

Feat: poller returns custom request information details

Feat: send customer custom info requests to machine

Chore: add field CustomInfoRequestsData on customer updates

Feat: customer custom info request data saving

Chore: variable name changes and lots of fixes

Feat: remove default value in query, sort request on customer profile

Signed-off-by: csrapr <26280794+csrapr@users.noreply.github.com>

Fix: return promise when array of ids is empty

Feat: TitleSection can receive more than one button

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

@@ -0,0 +1,112 @@
+import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
+import React from 'react'
+
+import { Label1, Info2 } from 'src/components/typography'
+
+const styles = {
+  flex: {
+    display: 'flex'
+  },
+  column: {
+    flexDirection: 'column'
+  },
+  halfWidth: {
+    width: '50%',
+    marginBottom: 15,
+    marginRight: 50
+  },
+  marginTop: {
+    marginTop: 20
+  },
+  marginBottom: {
+    marginBottom: 20
+  }
+}
+const useStyles = makeStyles(styles)
+const DetailsCard = ({ it }) => {
+  const customRequest = it.customRequest
+  const classes = useStyles()
+
+  const getScreen2Data = () => {
+    const label1Display =
+      customRequest.input.constraintType === 'spaceSeparation'
+        ? 'First word label'
+        : 'Text entry label'
+    switch (customRequest.input.type) {
+      case 'text':
+        return (
+          <>
+            <div className={classes.halfWidth}>
+              <Info2>{label1Display}</Info2>
+              <Label1>{customRequest.input.label1}</Label1>
+            </div>
+            {customRequest.input.constraintType === 'spaceSeparation' && (
+              <div className={classes.halfWidth}>
+                <Info2>Second word label</Info2>
+                <Label1>{customRequest.input.label2}</Label1>
+              </div>
+            )}
+          </>
+        )
+      default:
+        return (
+          <>
+            <div className={classes.halfWidth}>
+              <Info2>Screen 2 input title</Info2>
+              <Label1>{customRequest.screen2.title}</Label1>
+            </div>
+            <div className={classes.halfWidth}>
+              <Info2>Screen 2 input description</Info2>
+              <Label1>{customRequest.screen2.text}</Label1>
+            </div>
+          </>
+        )
+    }
+  }
+
+  const getInputData = () => {
+    return (
+      <>
+        {customRequest.input.choiceList && (
+          <>
+            <Info2>Choices</Info2>
+            {customRequest.input.choiceList.map((choice, idx) => {
+              return <Label1 key={idx}>{choice}</Label1>
+            })}
+          </>
+        )}
+        {customRequest.input.numDigits && (
+          <>
+            <Info2>Number of digits</Info2>
+            <Label1>{customRequest.input.numDigits}</Label1>
+          </>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <div>
+      <div className={classnames(classes.flex, classes.row, classes.marginTop)}>
+        <div className={classes.halfWidth}>
+          <Info2>Screen 1 title</Info2>
+          <Label1>{customRequest.screen1.title}</Label1>
+        </div>
+        <div className={classnames(classes.halfWidth, classes.flex)}>
+          {getScreen2Data()}
+        </div>
+      </div>
+      <div
+        className={classnames(classes.flex, classes.row, classes.marginBottom)}>
+        <div className={classes.halfWidth}>
+          <Info2>Screen 1 text</Info2>
+          <Label1>{customRequest.screen1.text}</Label1>
+        </div>
+        <div className={classes.halfWidth}>{getInputData()}</div>
+      </div>
+    </div>
+  )
+}
+
+export default DetailsCard