fix: welcome import, marketplace text, photo info text

src/features/welcome/Welcome.jsx

@@ -26,6 +26,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
   // State variables
   const [currentTab, setCurrentTab] = useState(0);
   const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
+  const [importedSettings, setImportedSettings] = useState([]);
   const finalTab = 6;
 
   // useEffect hook to handle tab changes and event bus listener
@@ -125,11 +126,13 @@ function WelcomeModal({ modalClose, modalSkip }) {
   const tabComponents = {
     0: <Intro />,
     1: <ChooseLanguage />,
-    2: <ImportSettings switchTab={switchToTab} />,
+    2: <ImportSettings setImportedSettings={setImportedSettings} switchTab={switchToTab} />,
     3: <ThemeSelection />,
     4: <StyleSelection />,
     5: <PrivacyOptions />,
-    6: <Final currentTab={currentTab} switchTab={switchToTab} />,
+    6: (
+      <Final currentTab={currentTab} switchTab={switchToTab} importedSettings={importedSettings} />
+    ),
   };
 
   // Current tab component

src/features/welcome/components/Sections/Final.jsx

@@ -28,15 +28,14 @@ function Final(props) {
             )}
           </span>
         </div>
-        {/*}
-        {this.state.importedSettings.length !== 0 && (
-          <div className="toggle" onClick={() => this.props.switchTab(2)}>
-            {variables.getMessage('modals.main.settings.sections.final.imported', {
-              amount: this.state.importedSettings.length,
+        {props.importedSettings.length !== 0 && (
+          <div className="toggle" onClick={() => props.switchTab(3)}>
+            {variables.getMessage('modals.main.welcome.sections.final.imported', {
+              amount: props.importedSettings.length,
             })}{' '}
-            {this.state.importedSettings.length}
+            {props.importedSettings.length}
           </div>
-        )}*/}
+        )}
       </div>
     </Content>
   );

src/features/welcome/components/Sections/ImportSettings.jsx

@@ -1,5 +1,4 @@
 import variables from 'config/variables';
-import { useState } from 'react';
 import { FileUpload } from 'components/Form/Settings';
 import { MdCloudUpload } from 'react-icons/md';
 import { importSettings as importSettingsFunction } from 'utils/settings';
@@ -7,13 +6,11 @@ import { Header, Content } from '../Layout';
 import default_settings from 'utils/data/default_settings.json';
 
 function ImportSettings(props) {
-  const [importedSettings, setImportedSettings] = useState([]);
-
   const importSettings = (e) => {
     importSettingsFunction(e);
 
     const settings = [];
-    const data = JSON.parse(e.target.result);
+    const data = JSON.parse(e);
     Object.keys(data).forEach((setting) => {
       // language and theme already shown, the others are only used internally
       if (
@@ -39,8 +36,8 @@ function ImportSettings(props) {
       });
     });
 
-    setImportedSettings(settings);
-    props.switchTab(5);
+    props.setImportedSettings(settings);
+    props.switchTab(6);
   };
   return (
     <Content>