add config titles

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

@@ -34,6 +34,7 @@ const ApiConfig = (props: any) => {
             configDictionary={{[category]:configDictionary[category]}}
             configuration={configuration}
             setConfiguration={setConfiguration}
+            key={i}
           />
         ))}
       </React.Fragment>

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

@@ -7,10 +7,10 @@ import ListOptions from './ListOptions';
 
 const EditOptions = (props: any) => {
   const { configDictionary, configuration, setConfiguration } = props;
-  
+  const optionsType = Object.keys(configDictionary)[0];
   return (
     <React.Fragment>
-      <Typography variant="h6">Global Parameters</Typography>
+      <Typography variant="h6">{optionsType}</Typography>
       <Divider />
       <Grid mt={2} container>
         <Grid item xs={7}>

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

@@ -7,15 +7,8 @@ import { useEffect, useState } from 'react';
 
 const ListOptions = (props: any) => {
   const { configDictionary, configuration, setConfiguration } = props;
-
-  //Here we will create a getter function for the configuration class that gets the config object from the dictionary provided
   const optionsType = Object.keys(configDictionary)[0];
   const configList = configDictionary[optionsType];
-
-  // const { optionalConfiguration } = configuration;
-  // const thisConfiguration = optionalConfiguration[optionsType];
-
-
   const thisConfiguration = configuration[optionsType];
 
   console.log('List options: configuration', configuration);
@@ -43,7 +36,7 @@ const ListOptions = (props: any) => {
     <Grid container rowSpacing={2}>
       {configList &&
         configList.map((g: any, i: any) => (
-            <Grid item xs={11}>
+            <Grid item xs={11} key={i}>
               <Checkbox
                 checked={thisConfiguration.hasOwnProperty(g.name)}
                 onChange={handleToggle(g.name)}
@@ -53,7 +46,7 @@ const ListOptions = (props: any) => {
               <Typography variant="overline">{g.name}</Typography>
               <Typography variant="subtitle2">{g.description}</Typography>
               {thisConfiguration.hasOwnProperty(g.name) && (
-                <TextField onChange={handleInput(g.name)} id="showPayButton" label={g.name} defaultValue={""} value={thisConfiguration[g.name]} fullWidth />
+                <TextField onChange={handleInput(g.name)} id="showPayButton" label={g.name} value={thisConfiguration[g.name]} fullWidth />
               )}
             </Grid>
 

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

@@ -34,6 +34,7 @@ const OptionalConfig = (props: any) => {
             configDictionary={{ [category]: configDictionary[category] }}
             configuration={configuration}
             setConfiguration={setConfiguration}
+            key={i}
           />
         ))}
       </React.Fragment>