all phases active, currently dealing with overwriting/state update bug

packages/client/src/app/reducers/onDeck.ts

@@ -18,16 +18,13 @@ export const onDeckSlice = createSlice({
       return { ...state, profile };
     },
     updateGlobalInfo: (state, action: PayloadAction<OnDeckState>) => {
-      const global = { ...state.global, ...action.payload };
-      return { ...state, global };
+      return { ...state, global: action.payload };
     },
     updateLocalInfo: (state, action: PayloadAction<OnDeckState>) => {
-      const local = { ...state.local, ...action.payload };
-      return { ...state, local };
+      return { ...state, local: action.payload };
     },
     updateSessionsInfo: (state, action: PayloadAction<OnDeckState>) => {
-      const sessions = { ...state.sessions, ...action.payload };
-      return { ...state, sessions };
+      return { ...state, sessions: action.payload };
     },
     clearOnDeckInfo: state => {
       return initialState;

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

@@ -1,4 +1,4 @@
-import { useState, Fragment } from 'react';
+import { useState, Fragment, ChangeEvent } from 'react';
 import { Grid } from '@mui/material';
 import { Editor } from './configSteps/Editor';
 import { ListOptions, NavButtons } from './configSteps';
@@ -6,7 +6,7 @@ import type { ConfigPropTypes } from './types';
 
 export const Config = ({ configuration, descriptors, step, setActiveStep }: ConfigPropTypes) => {
   const [currentConfig, setCurrentConfig] = useState(configuration);
-
+  console.log(currentConfig);
   const handleUpdateConfig = (key: string, value: string | null) => {
     console.log('HANDLE UPDATE CONFIG', key, value);
     if (value === null) {
@@ -21,6 +21,10 @@ export const Config = ({ configuration, descriptors, step, setActiveStep }: Conf
     }
   };
 
+  const handleJsonEditorUpdate = (e: any) => {
+    setCurrentConfig(e.jsObject);
+  };
+
   return (
     <Fragment>
       <Grid mt={2} container>
@@ -30,7 +34,7 @@ export const Config = ({ configuration, descriptors, step, setActiveStep }: Conf
         <Grid item xs={5}>
           <Grid container spacing={3}>
             <Grid item sx={{ height: '100%' }} xs={12}>
-              <Editor descriptors={descriptors} configuration={currentConfig} />
+              <Editor configuration={currentConfig} handleJsonEditorUpdate={handleJsonEditorUpdate} />
             </Grid>
           </Grid>
         </Grid>

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

@@ -4,31 +4,35 @@ import { Divider, Typography, Stepper, Step, StepLabel } from '@mui/material';
 import { ProfileForm, ReviewForm, NavButtons } from './configSteps';
 import { Config } from './Config';
 import type { RootState } from '../../store';
-import type { ConfigTypes } from './types';
 
 export const ConfigWrapper = () => {
-  const descriptors = useSelector((state: RootState) => state.descriptor);
+  const descriptors = useSelector((state: RootState) => state.descriptors);
   const { global, local, sessions } = useSelector((state: RootState) => state.onDeck);
   const [activeStep, setActiveStep] = useState(0);
 
   const steps = ['Profile', 'Global Configuration', 'Component Configuration', 'API Configuration', 'Review your config'];
 
-  const getStepContent = (step: number) => {
-    switch (step) {
-      case 0:
-        return <ProfileForm step={step} setActiveStep={setActiveStep} />;
-      case 1:
-        return <Config configuration={global} descriptors={descriptors.global} step={step} setActiveStep={setActiveStep} />;
-      case 2:
-        return <Config configuration={local} descriptors={descriptors.local} step={step} setActiveStep={setActiveStep} />;
-      case 3:
-        return <Config configuration={sessions} descriptors={descriptors.sessions} step={step} setActiveStep={setActiveStep} />;
-      case 4:
-        return <ReviewForm step={step} setActiveStep={setActiveStep} />;
-      default:
-        throw new Error('Unknown step');
-    }
-  };
+  let displayStep;
+
+  switch (activeStep) {
+    case 0:
+      displayStep = <ProfileForm step={activeStep} setActiveStep={setActiveStep} />;
+      break;
+    case 1:
+      displayStep = <Config configuration={global} descriptors={descriptors.global} step={activeStep} setActiveStep={setActiveStep} />;
+      break;
+    case 2:
+      displayStep = <Config configuration={local} descriptors={descriptors.local} step={activeStep} setActiveStep={setActiveStep} />;
+      break;
+    case 3:
+      displayStep = <Config configuration={sessions} descriptors={descriptors.sessions} step={activeStep} setActiveStep={setActiveStep} />;
+      break;
+    case 4:
+      displayStep = <ReviewForm step={activeStep} setActiveStep={setActiveStep} />;
+      break;
+    default:
+      throw new Error('Unknown step');
+  }
 
   return (
     <Fragment>
@@ -49,7 +53,7 @@ export const ConfigWrapper = () => {
             </Typography>
           </Fragment>
         ) : (
-          <Fragment>{getStepContent(activeStep)}</Fragment>
+          <Fragment>{displayStep}</Fragment>
         )}
       </Fragment>
     </Fragment>

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

@@ -1,13 +1,20 @@
 import JSONInput from 'react-json-editor-ajrm';
 import { dark_vscode_tribute, localeEn } from '../../../helpers/jsonEditor';
-
-export const Editor = (props: any) => {
-  const { configDictionary, configuration, setConfiguration } = props;
-  /*
-  TODO: when starting state is loaded, have placeholders reflecting possible values
-
-  // const optionsType = Object.keys(configDictionary)[0];
-  // const state = configuration[optionsType] | '';
-  */
-  return <JSONInput onChange={setConfiguration} colors={dark_vscode_tribute} locale={localeEn} height="400px" width="100%" />;
+import type { ConfigTypes } from '../types';
+type EditorProps = {
+  configuration: ConfigTypes;
+  handleJsonEditorUpdate: (e: any) => void;
+};
+
+export const Editor = ({ configuration, handleJsonEditorUpdate }: EditorProps) => {
+  return (
+    <JSONInput
+      onChange={handleJsonEditorUpdate}
+      placeholder={{ ...configuration }}
+      colors={dark_vscode_tribute}
+      locale={localeEn}
+      height="400px"
+      width="100%"
+    />
+  );
 };

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

@@ -1,5 +1,5 @@
-import { useState, ChangeEvent } from 'react';
-import { Checkbox, Grid, TextField, Typography } from '@mui/material';
+import { ChangeEvent } from 'react';
+import { Grid } from '@mui/material';
 import { Option } from './Option';
 import type { ConfigTypes } from '../types';
 import type { Descriptor } from '../../../app/types';

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

@@ -11,7 +11,7 @@ type OptionPropTypes = {
 };
 
 export const Option = ({ descriptor, indexKey, value, addOrRemoveProp, handleInput }: OptionPropTypes) => {
-  const [isChecked, setIsChecked] = useState(false);
+  const [isChecked, setIsChecked] = useState(!!value);
 
   const handleToggle = (e: ChangeEvent<HTMLInputElement>, checked: boolean) => {
     addOrRemoveProp(e);
@@ -23,7 +23,7 @@ export const Option = ({ descriptor, indexKey, value, addOrRemoveProp, handleInp
       <Checkbox name={descriptor.name} checked={isChecked} onChange={handleToggle} inputProps={{ 'aria-label': 'controlled' }} size="small" />
       <Typography variant="overline">{descriptor.name}</Typography>
       <Typography variant="subtitle2">{descriptor.description}</Typography>
-      {isChecked && <TextField name={descriptor.name} onChange={handleInput} id="showPayButton" label={descriptor.name} value={value} fullWidth />}
+      {isChecked && <TextField name={descriptor.name} onChange={handleInput} id={descriptor.name} label={descriptor.name} value={value} fullWidth />}
     </Grid>
   );
 };

packages/client/src/hooks/useApi.ts

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useAppDispatch } from '.';
-import { descriptorActions } from '../app';
+import { descriptorsActions } from '../app';
 import type { AllowedMethods, RequestOptions } from './types';
 
-const { updateDescriptors } = descriptorActions;
+const { updateDescriptors } = descriptorsActions;
 
 export const useApi = (url: string, method: AllowedMethods = 'GET', apiKey: string = '', body?: any) => {
   const [data, setData] = useState<any>({