From 1c22e62e056c2d0fc9fafc377fa6dbca629d826a Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Wed, 24 Jan 2024 12:41:17 -0500
Subject: [PATCH] feat(frontend): add HomeContent component (#3556)

---
 web/src/pages/Wizard/HomeContent.tsx | 28 ++++++++++++++++++
 web/src/pages/Wizard/Wizard.tsx      | 44 ++++++----------------------
 2 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 web/src/pages/Wizard/HomeContent.tsx

diff --git a/web/src/pages/Wizard/HomeContent.tsx b/web/src/pages/Wizard/HomeContent.tsx
new file mode 100644
index 0000000000..da776e5c6c
--- /dev/null
+++ b/web/src/pages/Wizard/HomeContent.tsx
@@ -0,0 +1,28 @@
+import Header from 'components/Wizard/Header';
+import Content from 'components/Wizard/Content';
+import {withCustomization} from 'providers/Customization';
+import {useWizard} from 'providers/Wizard';
+import * as S from './Wizard.styled';
+
+const HomeContent = () => {
+  const {activeStepId, isLoading, onGoTo, onNext, steps} = useWizard();
+  const completedSteps = steps.filter(({state}) => state === 'completed').length;
+
+  return (
+    <S.Container>
+      <S.Header>
+        <S.Title>Welcome to Tracetest!</S.Title>
+        <S.Text>
+          Here&apos;s a guide to get started and help you test your modern applications with OpenTelemetry.
+        </S.Text>
+      </S.Header>
+
+      <S.Body>
+        <Header activeStep={completedSteps} totalCompleteSteps={steps.length} />
+        <Content activeStepId={activeStepId} isLoading={isLoading} onChange={onGoTo} onNext={onNext} steps={steps} />
+      </S.Body>
+    </S.Container>
+  );
+};
+
+export default withCustomization(HomeContent, 'homeContent');
diff --git a/web/src/pages/Wizard/Wizard.tsx b/web/src/pages/Wizard/Wizard.tsx
index 57eac9a9ac..09b0717209 100644
--- a/web/src/pages/Wizard/Wizard.tsx
+++ b/web/src/pages/Wizard/Wizard.tsx
@@ -1,40 +1,14 @@
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
-import Header from 'components/Wizard/Header';
-import Content from 'components/Wizard/Content';
 import DataStoreProvider from 'providers/DataStore/DataStore.provider';
 import SettingsProvider from 'providers/Settings/Settings.provider';
-import {useWizard} from 'providers/Wizard';
-import * as S from './Wizard.styled';
-
-const Wizard = () => {
-  const {activeStepId, isLoading, onGoTo, onNext, steps} = useWizard();
-  const completedSteps = steps.filter(({state}) => state === 'completed').length;
-
-  return (
-    <DataStoreProvider>
-      <SettingsProvider>
-        <S.Container>
-          <S.Header>
-            <S.Title>Welcome to Tracetest!</S.Title>
-            <S.Text>
-              Here&apos;s a guide to get started and help you test your modern applications with OpenTelemetry.
-            </S.Text>
-          </S.Header>
-
-          <S.Body>
-            <Header activeStep={completedSteps} totalCompleteSteps={steps.length} />
-            <Content
-              activeStepId={activeStepId}
-              isLoading={isLoading}
-              onChange={onGoTo}
-              onNext={onNext}
-              steps={steps}
-            />
-          </S.Body>
-        </S.Container>
-      </SettingsProvider>
-    </DataStoreProvider>
-  );
-};
+import HomeContent from './HomeContent';
+
+const Wizard = () => (
+  <DataStoreProvider>
+    <SettingsProvider>
+      <HomeContent />
+    </SettingsProvider>
+  </DataStoreProvider>
+);
 
 export default withAnalytics(Wizard, 'wizard');