Create EditOptions component

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

@@ -0,0 +1,42 @@
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { globalConfigOptions } from '../../../helpers/payloadSamples';
+import Editor from './Editor';
+import ListOptions from './ListOptions';
+
+const EditOptions = (props: any) => {
+  //We need to remake configs as a custom hook that we can use across the components to se the list and handle an error
+  // Need to create api that fetches the configuration
+  // We are going to have to create a collection of properties, with the type so that we can throw errors if they dont match
+  //This should just be rewritten as a hook that fetches data and imported into the list options component
+  const [configs, setConfigs] = useState<object[]>([]);
+  useEffect(() => {
+    setConfigs(globalConfigOptions);
+  }, []);
+
+  const [enabledConfigs, setEnabledConfigs] = useState({});
+
+  return (
+    <React.Fragment>
+      <Typography variant="h6">Global Parameters</Typography>
+      <Divider />
+      <Grid mt={2} container>
+        <Grid item xs={7}>
+          <ListOptions options={configs} enabledOptions={enabledConfigs} updateEnabledOptions={setEnabledConfigs} />
+        </Grid>
+        <Grid item xs={5}>
+          <Grid container spacing={3}>
+            <Grid item sx={{ height: '100%' }} xs={12}>
+              <Editor enabledOptions={enabledConfigs} updateEnabledOptions={setEnabledConfigs} />
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default EditOptions;

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

@@ -1,5 +1,4 @@
 import Checkbox from '@mui/material/Checkbox';
-import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
@@ -24,28 +23,24 @@ const ListOptions = (props: any) => {
     updateEnabledOptions(all);
   };
   return (
-    <React.Fragment>
-      <Typography variant="h6">Global Parameters</Typography>
-      <Divider />
+    <Grid container rowSpacing={2}>
       {options &&
         options.map((g: any, i: any) => (
-          <Grid container spacing={3}>
-            <Grid item xs={11}>
-              <Checkbox
-                checked={enabledOptions.hasOwnProperty(g.name)}
-                onChange={handleToggle(g.name)}
-                inputProps={{ 'aria-label': 'controlled' }}
-                size="small"
-              />
-              <Typography variant="overline">{g.name}</Typography>
-              <Typography variant="subtitle2">{g.description}</Typography>
-              {enabledOptions.hasOwnProperty(g.name) && (
-                <TextField onChange={handleInput(g.name)} id="showPayButton" label={g.name} defaultValue={''} fullWidth />
-              )}
-            </Grid>
+          <Grid item xs={11}>
+            <Checkbox
+              checked={enabledOptions.hasOwnProperty(g.name)}
+              onChange={handleToggle(g.name)}
+              inputProps={{ 'aria-label': 'controlled' }}
+              size="small"
+            />
+            <Typography variant="overline">{g.name}</Typography>
+            <Typography variant="subtitle2">{g.description}</Typography>
+            {enabledOptions.hasOwnProperty(g.name) && (
+              <TextField onChange={handleInput(g.name)} id="showPayButton" label={g.name} defaultValue={''} fullWidth />
+            )}
           </Grid>
         ))}
-    </React.Fragment>
+    </Grid>
   );
 };
 

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

@@ -1,46 +1,12 @@
-import Grid from '@mui/material/Grid';
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { globalConfigOptions } from '../../../helpers/payloadSamples';
-import Editor from './Editor';
-import ListOptions from './ListOptions';
+import EditOptions from './EditOptions';
 
 const OptionalConfig = () => {
-  // So create one component, and one hook that initializes them
-  // We are going to have to create a collection of properties, with the type so that we can throw errors if they dont match
-  //This should just be rewritten as a hook that fetches data and imported into the list options component
-  const [globalValues, setGlobalValues] = useState<object[]>([]);
-  const [checkedGlobal, setGlobalChecked] = useState({});
-
-  const [values, setValues] = useState({
-    error: '',
-    success: ''
-  });
-  const { error, success } = values;
-
-  // Need to create api that fetches the configuration
-  useEffect(() => {
-    initGlobal('dropin');
-  }, []);
-  const initGlobal = (product: any) => {
-    //Here we should fetch our data and add error handling
-    setGlobalValues(globalConfigOptions);
-  };
 
   return (
     <React.Fragment>
-      <Grid container spacing={3}>
-        <Grid item xs={7}>
-          <ListOptions options={globalValues} enabledOptions={checkedGlobal} updateEnabledOptions={setGlobalChecked} />
-        </Grid>
-        <Grid item xs={5}>
-          <Grid container spacing={3}>
-            <Grid item sx={{ height: '100%' }} xs={12}>
-              <Editor enabledOptions={checkedGlobal} updateEnabledOptions={setGlobalChecked} />
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
+      <EditOptions />
+      <EditOptions />
     </React.Fragment>
   );
 };