confirmation screen

KelvinTegelaar · Sep 28, 2024 · 23a3f7e · 23a3f7e
1 parent 1ce88db
commit 23a3f7e
Show file tree

Hide file tree

Showing 8 changed files with 378 additions and 50 deletions.
diff --git a/src/components/CippComponents/CippFormComponent.jsx b/src/components/CippComponents/CippFormComponent.jsx
@@ -1,77 +1,119 @@
-import { Radio, Switch, TextField, Typography } from "@mui/material";
+import { Radio, Switch, TextField, Typography, Checkbox, FormControlLabel } from "@mui/material";
 import { CippAutoComplete } from "./CippAutocomplete";
 import { Controller, useFormState } from "react-hook-form";
 
 export const CippFormComponent = (props) => {
-  const { validators, formControl, type = "textField", name, ...other } = props;
+  const {
+    validators,
+    formControl,
+    type = "textField",
+    name,
+    label,
+    labelLocation = "behind", // Default location for switches
+    ...other
+  } = props;
   const { errors } = useFormState({ control: formControl.control });
+
+  const renderSwitchWithLabel = (element) => {
+    if (!label) return element; // No label for the switch if label prop is not provided
+
+    if (labelLocation === "above") {
+      return (
+        <>
+          <Typography variant="body2" component="label">
+            {label}
+          </Typography>
+          {element}
+        </>
+      );
+    } else if (labelLocation === "behind") {
+      return (
+        <FormControlLabel
+          control={element}
+          label={<Typography variant="body2">{label}</Typography>}
+          labelPlacement="end"
+        />
+      );
+    }
+  };
+
   switch (type) {
     case "hidden":
       return <input type="hidden" {...other} {...formControl.register(name, { ...validators })} />;
+
     case "textField":
       return (
         <>
           <div>
-            <TextField {...other} {...formControl.register(name, { ...validators })} />
+            <TextField
+              {...other}
+              {...formControl.register(name, { ...validators })}
+              label={label}
+            />
           </div>
-          <Typography variant="subtitle3" color={"error"}>
+          <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
               : errors[name]?.message}
           </Typography>
         </>
       );
+
     case "switch":
       return (
         <>
           <div>
             <Controller
               name={name}
               control={formControl.control}
-              render={({ field }) => (
-                <Switch
-                  checked={field.value}
-                  {...other}
-                  {...formControl.register(name, { ...validators })}
-                />
-              )}
+              render={({ field }) =>
+                renderSwitchWithLabel(
+                  <Switch
+                    checked={field.value}
+                    {...other}
+                    {...formControl.register(name, { ...validators })}
+                  />
+                )
+              }
             />
           </div>
-          <Typography variant="subtitle3" color={"error"}>
+          <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
               : errors[name]?.message}
           </Typography>
         </>
       );
+
     case "checkbox":
       return (
         <>
           <div>
-            <Checkbox {...other} {...formControl.register(name, { ...validators })} />
+            <Checkbox {...other} {...formControl.register(name, { ...validators })} label={label} />
           </div>
-          <Typography variant="subtitle3" color={"error"}>
+          <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
               : errors[name]?.message}
           </Typography>
         </>
       );
+
     case "radio":
       return (
         <>
           <div>
-            <Radio {...other} {...formControl.register(name, { ...validators })} />
+            <Radio {...other} {...formControl.register(name, { ...validators })} label={label} />
           </div>
-          <Typography variant="subtitle3" color={"error"}>
+          <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
               : errors[name]?.message}
           </Typography>
         </>
       );
+
     case "autoComplete":
-      //for autoComplete we need to use Controller from react-hook-form as it does not pass the synthetic event
       return (
         <>
           <div>
@@ -82,20 +124,22 @@ export const CippFormComponent = (props) => {
                 <CippAutoComplete
                   {...other}
                   defaultValue={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                  }}
+                  label={label}
+                  onChange={(value) => field.onChange(value)}
                 />
               )}
             />
           </div>
-          <Typography variant="subtitle3" color={"error"}>
+          <Typography variant="subtitle3" color="error">
             {name.includes(".")
               ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
               : errors[name]?.message}
           </Typography>
         </>
       );
+
+    default:
+      return null;
   }
 };
 

diff --git a/src/components/CippWizard/CippWizard.jsx b/src/components/CippWizard/CippWizard.jsx
@@ -22,6 +22,7 @@ export const CippWizard = (props) => {
         onNextStep={handleNext}
         onPreviousStep={handleBack}
         formControl={formControl}
+        lastStep={steps.length - 1}
         currentStep={activeStep}
         options={steps[activeStep].componentProps?.options}
         title={steps[activeStep].componentProps?.title}
@@ -50,7 +51,7 @@ export const CippWizard = (props) => {
           <Stack spacing={6}>
             <WizardSteps activeStep={activeStep} orientation={orientation} steps={steps} />
             <div>
-              <Container maxWidth="sm">{content}</Container>
+              <Container maxWidth="md">{content}</Container>
             </div>
           </Stack>
         </CardContent>

diff --git a/src/components/CippWizard/CippWizardConfirmation.js b/src/components/CippWizard/CippWizardConfirmation.js
@@ -1,29 +1,47 @@
-import { Alert, Card, Stack, Typography } from "@mui/material";
+import { Card, Stack, Grid } from "@mui/material";
 import { PropertyList } from "../property-list";
-import { ApiPostCall } from "../../api/ApiCall";
-import { ResourceError } from "../resource-error";
 import CippWizardStepButtons from "./CippWizardStepButtons";
+import { PropertyListItem } from "../property-list-item";
+import { getCippTranslation } from "../../utils/get-cipp-translation";
+import { getCippFormatting } from "../../utils/get-cipp-formatting";
 
 export const CippWizardConfirmation = (props) => {
-  const { formControl, onPreviousStep, onNextStep, currentStep } = props;
+  const { lastStep, formControl, onPreviousStep, onNextStep, currentStep } = props;
+  const formvalues = formControl.getValues();
+  console.log(formvalues);
 
-  const postRequest = ApiPostCall({ urlFromData: true });
+  const formEntries = Object.entries(formvalues);
+  const halfIndex = Math.ceil(formEntries.length / 2);
+  const firstHalf = formEntries.slice(0, halfIndex);
+  const secondHalf = formEntries.slice(halfIndex);
 
   return (
     <Stack spacing={3}>
-      <div>
-        <Typography variant="h6">Step 4. Confirmation</Typography>
-      </div>
       <Card variant="outlined">
-        <PropertyList>//confirmation list here</PropertyList>
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={6}>
+            <PropertyList>
+              {firstHalf.map(([key, value]) => {
+                const formattedValue = getCippFormatting(value, key);
+                const label = getCippTranslation(key);
+                return <PropertyListItem key={key} label={label} value={formattedValue} />;
+              })}
+            </PropertyList>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <PropertyList>
+              {secondHalf.map(([key, value]) => {
+                const formattedValue = getCippFormatting(value, key);
+                const label = getCippTranslation(key);
+                return <PropertyListItem key={key} label={label} value={formattedValue} />;
+              })}
+            </PropertyList>
+          </Grid>
+        </Grid>
       </Card>
-      {postRequest.data?.data && (
-        <Alert severity={postRequest.data?.data?.success ? "success" : "warning"}>
-          {postRequest.data?.data?.result}
-        </Alert>
-      )}
-      {postRequest.isError && <ResourceError message={postRequest.error.message} />}
+
       <CippWizardStepButtons
+        lastStep={lastStep}
         currentStep={currentStep}
         onPreviousStep={onPreviousStep}
         onNextStep={onNextStep}
@@ -32,3 +50,5 @@ export const CippWizardConfirmation = (props) => {
     </Stack>
   );
 };
+
+export default CippWizardConfirmation;