nested objects working on API piece

packages/client/src/components/CheckoutBuilder/Config.tsx

@@ -8,7 +8,7 @@ export const Config = ({ configuration, descriptors, step, setActiveStep, action
   const handleUpdateConfig: UpdateConfig = (item, value, current): void => {
     let newConfig = { ...configuration };
 
-    console.log('UPDATE CONFIG PARAMS', item, value, newConfig);
+    console.log('UPDATE CONFIG PARAMS', item, value, current, newConfig);
     if (value === null) {
       delete newConfig[item];
     } else if (current) {

packages/client/src/components/CheckoutBuilder/ConfigWrapper.tsx

@@ -20,7 +20,7 @@ export const ConfigWrapper = () => {
 
   const dispatch = useAppDispatch();
 
-  const updateStore = (value: any, action: any): void => {
+  const updateStore = (value: any, action: ActionCreatorWithPayload<any>): void => {
     dispatch(action(value));
   };
 

packages/client/src/components/CheckoutBuilder/configSteps/Option.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { Grid, Typography, TextField } from '@mui/material';
 import { Descriptor, HandleInput } from '../types';
 
@@ -6,14 +7,24 @@ export interface OptionPropTypes {
   onChange: HandleInput;
   value: string;
   isChecked: boolean;
+  current?: string;
 }
 
-export const Option = ({ descriptor, onChange, value, isChecked }: OptionPropTypes) => {
+export const Option = ({ descriptor, onChange, value, isChecked, current }: OptionPropTypes) => {
   return (
     <Grid item xs={11}>
       <Typography variant="overline">{descriptor.name}</Typography>
       {/* <Typography variant="subtitle2">{descriptor.description}</Typography> */}
-      {isChecked && <TextField name={descriptor.name} onChange={onChange} id={descriptor.name} label={descriptor.name} value={value} fullWidth />}
+      {isChecked && (
+        <TextField
+          name={descriptor.name}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e, current)}
+          id={descriptor.name}
+          label={descriptor.name}
+          value={value}
+          fullWidth
+        />
+      )}
     </Grid>
   );
 };

packages/client/src/components/CheckoutBuilder/configSteps/OptionWrapper.tsx

@@ -30,7 +30,7 @@ export const OptionWrapper = ({ descriptor, indexKey, value, addOrRemoveProp, ha
           return (
             isChecked && (
               <Grid item xs={11} key={prop.name}>
-                <Option descriptor={prop} onChange={handleInput} value={value[prop.name]} isChecked={isChecked} />
+                <Option current={descriptor.name} descriptor={prop} onChange={handleInput} value={value[prop.name]} isChecked={isChecked} />
               </Grid>
             )
           );

packages/client/src/components/CheckoutBuilder/configSteps/ProfileForm.tsx

@@ -2,6 +2,7 @@ import { Fragment, useState } from 'react';
 import { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField, Typography } from '@mui/material';
 import { NavButtons } from './NavButtons';
 import type { OnDeckPropType } from '../../../app/types';
+import type { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 
 interface ProfileFormProps {
   configuration: OnDeckPropType;

packages/client/src/components/CheckoutBuilder/types.ts

@@ -1,11 +1,12 @@
 import { ChangeEvent } from 'react';
 import type { Descriptor, OnDeckPropType } from '../../app/types';
+import type { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 
 export interface ConfigPropTypes {
   step: number;
   configuration: OnDeckPropType;
   descriptors: Descriptor[];
-  action: any;
+  action: ActionCreatorWithPayload<any>;
   updateStore: (value: any, action: any) => void;
   setActiveStep: (step: number) => void;
 }