feat: add control btns

src/langs/constants.ts

@@ -14,4 +14,5 @@ export const APP = {
   REPLACE_IMAGE: 'REPLACE_IMAGE',
   ADD: 'ADD',
   DRAG_DROP_EXERCISE_TITLE: 'DRAG_DROP_EXERCISE_TITLE',
+  SAVE: 'SAVE',
 };

src/langs/en.json

@@ -14,5 +14,6 @@
   "BACK": "Back",
   "REPLACE_IMAGE": "Replace the image",
   "ADD": "Add",
-  "DRAG_DROP_EXERCISE_TITLE": "Drag and drop these labels into the correct frame of the image"
+  "DRAG_DROP_EXERCISE_TITLE": "Drag and drop these labels into the correct frame of the image",
+  "SAVE": "Save"
 }

src/modules/builder/configuration/AddImageStep.tsx

@@ -39,7 +39,7 @@ const AddImageStep = ({ moveToNextStep }: Props): JSX.Element => {
   const [description, setDescription] = useState<string>('');
 
   const saveData = (): void => {
-    const newData = { description };
+    const newData = { ...(settings && settings.data), description };
 
     saveSettings(SettingsKeys.SettingsData, newData);
     moveToNextStep();

src/modules/builder/configuration/PreviewStep/PreviewStep.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, DropResult } from 'react-beautiful-dnd';
 
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 
 import { DraggableLabel, Settings, SettingsKeys } from '@/@types';
 import {
@@ -139,13 +139,19 @@ const PreviewImage = (): JSX.Element => {
     </Box>
   );
 };
-const PreviewStep = (): JSX.Element => {
+
+const PreviewStep = ({
+  moveToPrevStep,
+}: {
+  moveToPrevStep: () => void;
+}): JSX.Element => {
   const { data: appContext } = hooks.useAppContext();
 
   const { data: appSettings } = hooks.useAppSettings<Settings>({
     name: SettingsKeys.SettingsData,
   });
 
+  const { t } = useAppTranslation();
   return (
     <Stack spacing={2} padding={2}>
       <Box>
@@ -157,6 +163,14 @@ const PreviewStep = (): JSX.Element => {
         </Typography>
       </Box>
       <PreviewImage />
+      <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
+        <Button size="large" onClick={moveToPrevStep}>
+          {t(APP.BACK)}
+        </Button>
+        <Button variant="contained" size="large">
+          {t(APP.SAVE)}
+        </Button>
+      </Stack>
     </Stack>
   );
 };

src/modules/builder/configuration/index.tsx

@@ -47,7 +47,7 @@ const Configurations = (): JSX.Element => {
     },
     {
       label: t(APP.PREVIEW_STEP_LABEL),
-      component: <PreviewStep />,
+      component: <PreviewStep moveToPrevStep={() => setActiveStep(1)} />,
       disabled: !settingsData?.data.labels || !image?.id,
     },
   ];