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/WizardSplash.js

@@ -0,0 +1,57 @@
+import { makeStyles } from '@material-ui/core'
+import React from 'react'
+
+import { Button } from 'src/components/buttons'
+import { H1, P } from 'src/components/typography'
+import { ReactComponent as CustomReqLogo } from 'src/styling/icons/compliance/custom-requirement.svg'
+
+const styles = {
+  logo: {
+    maxHeight: 150,
+    maxWidth: 200
+  },
+  title: {
+    margin: [[24, 0, 32, 0]]
+  },
+  text: {
+    margin: 0
+  },
+  button: {
+    marginTop: 'auto',
+    marginBottom: 58
+  },
+  modalContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: [[0, 42]],
+    flex: 1
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const WizardSplash = ({ onContinue }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.modalContent}>
+      <CustomReqLogo className={classes.logo} />
+      <H1 className={classes.title}>Custom information request</H1>
+      <P className={classes.text}>
+        A custom information request allows you to have an extra option to ask
+        specific information about your customers when adding a trigger that
+        isn't an option on the default requirements list.
+      </P>
+      <P>
+        Note that adding a custom information request isn't the same as adding
+        triggers. You will still need to add a trigger with the new requirement
+        to get this information from your customers.
+      </P>
+      <Button className={classes.button} onClick={onContinue}>
+        Get started
+      </Button>
+    </div>
+  )
+}
+
+export default WizardSplash