From 261d22a2f6015e935b16598db75780f4ae7a3e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Wed, 19 Jan 2022 17:23:28 +0000 Subject: [PATCH 1/2] 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 35f4ef208..e968287ab 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 5a0d23149..2e768c102 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} /> )} diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js index 6f81b9dea..949bcc5e4 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}> -
- -
- {error && Failed to save} - -
- + {({ values }) => ( +
+ +
+ {error && Failed to save} + +
+ + )} diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js index 83cbe3ea1..89de63bc5 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 ( <>

{title}

 {isCustomInfoRequirement && ( - {}} - /> +
+ + {(customInfoRequirementType === 'text' || + customInfoRequirementType === 'numerical') && ( +
{console.log('')}
+ )} + {customInfoRequirementType === 'choiceList' && ( +
+
{console.log('')}
+
+ )} +
)}
{!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' From 622fce6f2f2aa5fb47737f04b4d4df4311e8b14a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Thu, 20 Jan 2022 18:53:57 +0000 Subject: [PATCH 2/2] feat: fetch custom inf requirement type --- .../src/pages/Customers/Wizard.js | 2 +- .../src/pages/Customers/helper.js | 33 ++++++++++++++----- 2 files changed, 25 insertions(+), 10 deletions(-) diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js index 949bcc5e4..e1d64e10a 100644 --- a/new-lamassu-admin/src/pages/Customers/Wizard.js +++ b/new-lamassu-admin/src/pages/Customers/Wizard.js @@ -155,7 +155,7 @@ const Wizard = ({ selectedValues={selectedValues} customInfoRequirementOptions={customInfoRequirementOptions} customInfoRequirements={customInfoRequirements} - selectedCustomInfoRequirement={ + selectedCustomInfoRequirementLive={ values.customInfoRequirement ?? null } {...stepOptions.props} diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js index 89de63bc5..f18b2da24 100644 --- a/new-lamassu-admin/src/pages/Customers/helper.js +++ b/new-lamassu-admin/src/pages/Customers/helper.js @@ -186,6 +186,20 @@ const updateRequirementOptions = it => [ ...it ] +const getCustomInfoRequirementType = R.view( + R.lensPath(['customRequest', 'input', 'type']) +) + +const buildCustomInfoRequirementElements = customInfoRequirements => { + R.forEach(it => { + switch (getCustomInfoRequirementType(it)) { + case 'numerical' || 'text': + default: + break + } + }, customInfoRequirements) +} + const EntryType = ({ customInfoRequirementOptions }) => { const classes = useStyles() const { values } = useFormikContext() @@ -248,7 +262,7 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions, customInfoRequirements, - selectedCustomInfoRequirement + selectedCustomInfoRequirementLive }) => { const classes = useStyles() @@ -282,14 +296,18 @@ const ManualDataEntry = ({ requirementSelected === 'frontCamera' : dataTypeSelected === 'file' || dataTypeSelected === 'image' - const customInfoRequirementType = R.view( - R.lensPath([0, 'customRequest', 'input', 'type']), - R.filter(it => it.id === selectedCustomInfoRequirement)( - customInfoRequirements + const customInfoRequirementType = getCustomInfoRequirementType( + R.head( + R.filter(it => it.id === selectedCustomInfoRequirementLive)( + customInfoRequirements + ) ) ) - console.log(customInfoRequirementType) + const customInfoRequirementElements = !R.isNil(customInfoRequirements) + ? buildCustomInfoRequirementElements(customInfoRequirements) + : [] + console.log(customInfoRequirementElements, customInfoRequirements) return ( <> @@ -450,8 +468,6 @@ const customerDataSchemas = { }) } -const customInfoRequirementElements = {} - const requirementElements = { idCardData: { schema: customerDataSchemas.idCardData, @@ -491,7 +507,6 @@ const requirementElements = { }, custom: { schema: customInfoRequirementSchema, - options: customInfoRequirementElements, Component: ManualDataEntry, initialValues: { customInfoRequirement: null }, saveType: 'customInfoRequirement'