From 261d22a2f6015e935b16598db75780f4ae7a3e74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Wed, 19 Jan 2022 17:23:28 +0000
Subject: [PATCH] feat: set custom info requirement live values

---
 new-lamassu-admin/src/components/Carousel.js  | 12 +--
 .../src/pages/Customers/CustomerProfile.js    |  8 +-
 .../src/pages/Customers/Wizard.js             | 44 ++++++-----
 .../src/pages/Customers/helper.js             | 74 +++++++++++++------
 4 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/new-lamassu-admin/src/components/Carousel.js b/new-lamassu-admin/src/components/Carousel.js
index 35f4ef208b..e968287ab7 100644
--- a/new-lamassu-admin/src/components/Carousel.js
+++ b/new-lamassu-admin/src/components/Carousel.js
@@ -38,12 +38,12 @@ export const Carousel = memo(({ photosData, slidePhoto }) => {
             opacity: 1
           }
         }}
-        // navButtonsWrapperProps={{
-        //   style: {
-        //     background: 'linear-gradient(to right, black 10%, transparent 80%)',
-        //     opacity: '0.4'
-        //   }
-        // }}
+        navButtonsWrapperProps={{
+          style: {
+            background: 'linear-gradient(to right, black 10%, transparent 80%)',
+            opacity: '0.4'
+          }
+        }}
         autoPlay={false}
         indicators={false}
         navButtonsAlwaysVisible={true}
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 5a0d23149e..2e768c1021 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -472,11 +472,7 @@ const CustomerProfile = memo(() => {
 
   const timezone = R.path(['config', 'locale_timezone'], configResponse)
 
-  const customInfoRequirementOptions =
-    activeCustomRequests?.customInfoRequests?.map(it => ({
-      value: it.id,
-      display: it.customRequest.name
-    })) ?? []
+  const customInfoRequirements = activeCustomRequests?.customInfoRequests
 
   const classes = useStyles()
 
@@ -661,7 +657,7 @@ const CustomerProfile = memo(() => {
             addPhoto={replacePhoto}
             addCustomerData={editCustomer}
             onClose={() => setWizard(null)}
-            customInfoRequirementOptions={customInfoRequirementOptions}
+            customInfoRequirements={customInfoRequirements}
           />
         )}
       </div>
diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js
index 6f81b9dea9..949bcc5e43 100644
--- a/new-lamassu-admin/src/pages/Customers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Customers/Wizard.js
@@ -48,10 +48,6 @@ const styles = {
     margin: [[0, 4, 0, 2]],
     borderBottom: `1px solid ${comet}`,
     display: 'inline-block'
-  },
-  dropdownField: {
-    marginTop: 16,
-    minWidth: 155
   }
 }
 
@@ -78,7 +74,7 @@ const Wizard = ({
   onClose,
   save,
   error,
-  customInfoRequirementOptions,
+  customInfoRequirements,
   addCustomerData,
   addPhoto
 }) => {
@@ -97,6 +93,12 @@ const Wizard = ({
   const isLastStep = step === LAST_STEP
   const stepOptions = getStep(step, selectedValues)
 
+  const customInfoRequirementOptions =
+    customInfoRequirements?.map(it => ({
+      value: it.id,
+      display: it.customRequest.name
+    })) ?? []
+
   const onContinue = async it => {
     const newConfig = R.merge(config, stepOptions.schema.cast(it))
     setSelectedValues(newConfig)
@@ -147,19 +149,25 @@ const Wizard = ({
           onSubmit={onContinue}
           initialValues={stepOptions.initialValues}
           validationSchema={stepOptions.schema}>
-          <Form className={classes.form}>
-            <stepOptions.Component
-              selectedValues={selectedValues}
-              customInfoRequirementOptions={customInfoRequirementOptions}
-              {...stepOptions.props}
-            />
-            <div className={classes.submit}>
-              {error && <ErrorMessage>Failed to save</ErrorMessage>}
-              <Button className={classes.button} type="submit">
-                {isLastStep ? 'Add Data' : 'Next'}
-              </Button>
-            </div>
-          </Form>
+          {({ values }) => (
+            <Form className={classes.form}>
+              <stepOptions.Component
+                selectedValues={selectedValues}
+                customInfoRequirementOptions={customInfoRequirementOptions}
+                customInfoRequirements={customInfoRequirements}
+                selectedCustomInfoRequirement={
+                  values.customInfoRequirement ?? null
+                }
+                {...stepOptions.props}
+              />
+              <div className={classes.submit}>
+                {error && <ErrorMessage>Failed to save</ErrorMessage>}
+                <Button className={classes.button} type="submit">
+                  {isLastStep ? 'Add Data' : 'Next'}
+                </Button>
+              </div>
+            </Form>
+          )}
         </Formik>
       </Modal>
     </>
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index 83cbe3ea18..89de63bc5b 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/new-lamassu-admin/src/pages/Customers/helper.js
@@ -6,11 +6,7 @@ import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
-import {
-  RadioGroup,
-  TextInput,
-  Autocomplete
-} from 'src/components/inputs/formik'
+import { RadioGroup, TextInput, Dropdown } from 'src/components/inputs/formik'
 import { H4 } from 'src/components/typography'
 import { errorColor } from 'src/styling/variables'
 import { MANUAL } from 'src/utils/constants'
@@ -48,6 +44,10 @@ const useStyles = makeStyles({
     '& > *:last-child': {
       marginBottom: 24
     }
+  },
+  dropdownField: {
+    marginTop: 16,
+    minWidth: 155
   }
 })
 
@@ -155,6 +155,14 @@ const entryTypeSchema = Yup.lazy(values => {
   }
 })
 
+const customInfoRequirementSchema = Yup.lazy(values => {
+  if (R.isNil(values.customInfoRequirement)) {
+    return Yup.object().shape({
+      customInfoRequirement: Yup.string().required()
+    })
+  }
+})
+
 const customFileSchema = Yup.object().shape({
   title: Yup.string().required(),
   file: Yup.mixed().required()
@@ -222,11 +230,9 @@ const EntryType = ({ customInfoRequirementOptions }) => {
             component={RadioGroup}
             name="requirement"
             options={
-              requirementOptions
-              // TODO: Enable once custom info requirement manual entry is finished
-              // !R.isEmpty(customInfoRequirementOptions)
-              //   ? updateRequirementOptions(requirementOptions)
-              //   : requirementOptions
+              !R.isEmpty(customInfoRequirementOptions)
+                ? updateRequirementOptions(requirementOptions)
+                : requirementOptions
             }
             labelClassName={classes.label}
             radioClassName={classes.radio}
@@ -238,7 +244,12 @@ const EntryType = ({ customInfoRequirementOptions }) => {
   )
 }
 
-const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
+const ManualDataEntry = ({
+  selectedValues,
+  customInfoRequirementOptions,
+  customInfoRequirements,
+  selectedCustomInfoRequirement
+}) => {
   const classes = useStyles()
 
   const typeOfEntrySelected = selectedValues?.entryType
@@ -271,21 +282,39 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
       requirementSelected === 'frontCamera'
     : dataTypeSelected === 'file' || dataTypeSelected === 'image'
 
+  const customInfoRequirementType = R.view(
+    R.lensPath([0, 'customRequest', 'input', 'type']),
+    R.filter(it => it.id === selectedCustomInfoRequirement)(
+      customInfoRequirements
+    )
+  )
+
+  console.log(customInfoRequirementType)
+
   return (
     <>
       <Box display="flex" alignItems="center">
         <H4>{title}</H4>
       </Box>
       {isCustomInfoRequirement && (
-        <Autocomplete
-          fullWidth
-          label={`Available requests`}
-          className={classes.picker}
-          getOptionSelected={R.eqProps('code')}
-          labelProp={'display'}
-          options={customInfoRequirementOptions}
-          onChange={(evt, it) => {}}
-        />
+        <div>
+          <Field
+            className={classes.dropdownField}
+            component={Dropdown}
+            label="Available requests"
+            name="customInfoRequirement"
+            options={customInfoRequirementOptions}
+          />
+          {(customInfoRequirementType === 'text' ||
+            customInfoRequirementType === 'numerical') && (
+            <div>{console.log('')}</div>
+          )}
+          {customInfoRequirementType === 'choiceList' && (
+            <div>
+              <div>{console.log('')}</div>
+            </div>
+          )}
+        </div>
       )}
       <div className={classes.field}>
         {!upload &&
@@ -421,6 +450,8 @@ const customerDataSchemas = {
   })
 }
 
+const customInfoRequirementElements = {}
+
 const requirementElements = {
   idCardData: {
     schema: customerDataSchemas.idCardData,
@@ -459,7 +490,8 @@ const requirementElements = {
     saveType: 'customerDataUpload'
   },
   custom: {
-    // schema: customerDataSchemas.customInfoRequirement,
+    schema: customInfoRequirementSchema,
+    options: customInfoRequirementElements,
     Component: ManualDataEntry,
     initialValues: { customInfoRequirement: null },
     saveType: 'customInfoRequirement'