profile ui

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

@@ -5,9 +5,7 @@ import type { OnDeckState } from '../types';
 const initialState: OnDeckState = {
   profile: {
     name: '',
-    product: '',
-    dropinVersion: '',
-    checkoutVersion: ''
+    product: ''
   },
   checkout: {},
   local: {},

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

@@ -1,4 +1,4 @@
-import { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { Box, Divider, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import type { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 import React, { Fragment } from 'react';
 import JSONInput from 'react-json-editor-ajrm';
@@ -21,35 +21,30 @@ export const ProfileForm = ({ configuration, step, setActiveStep, action, update
 
   return (
     <Fragment>
-      <Grid container spacing={2}>
+      <Grid mt={2} container>
         <Grid item xs={10}>
-          <Typography variant="h6" gutterBottom>
-            Create Profile
-          </Typography>
-        </Grid>
-        <Grid item xs={10} sx={{ mt: -3 }}>
-          <TextField
-            id="profileName"
-            name="name"
-            label="Profile name"
-            variant="standard"
-            value={configuration.name}
-            onChange={handleChange}
-            sx={{ width: '50%' }}
-          />
-        </Grid>
-        <Grid item xs={10}>
-          <Typography variant="h6" gutterBottom>
-            Choose Product
-          </Typography>
-        </Grid>
-        <Grid item xs={10}>
-          <Typography variant="body2" gutterBottom>
+          <Typography pb={2} variant="body1" gutterBottom>
             Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel,
             ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta
             dapibus.
           </Typography>
         </Grid>
+        <Grid item xs={10}>
+          <Typography variant="overline" gutterBottom>
+            <Box sx={{ fontSize: 16, fontWeight: 'medium' }}>Parameters</Box>
+          </Typography>
+          <Divider />
+        </Grid>
+        <Grid item xs={10} sx={{ mt: 1 }}>
+          <TextField
+            id="profileName"
+            name="name"
+            label="Profile name"
+            fullWidth
+            value={configuration.name}
+            onChange={handleChange}
+          />
+        </Grid>
         <Grid item xs={10} sm={6}>
           <FormControl required sx={{ width: 1 }}>
             <InputLabel id="dropin-select-required-label">Product</InputLabel>
@@ -76,7 +71,7 @@ export const ProfileForm = ({ configuration, step, setActiveStep, action, update
         sx={{ position: 'fixed', top: 0, right: 0, height: '100vh', bgcolor: 'secondary.main', width: '25%' }}
       >
         <Grid item xs={10} sx={{ height: '90%' }}>
-          <JSONInput viewOnly={true} placeholder={{sample: true}} colors={dark_vscode_tribute} locale={localeEn} height="100%" width="100%" />
+          <JSONInput viewOnly={true} placeholder={configuration} colors={dark_vscode_tribute} locale={localeEn} height="100%" width="100%" />
         </Grid>
         <Grid item xs={1}>
           <Grid p={1} sx={{ height: '100%' }} direction="row" container justifyContent="flex-end" alignItems="flex-end">