Feat/stepper page last step (#199)

* feat(redmine 1301354): add step 3 * feat(redmine 1301354): add changeset file
Smile-SA · Jul 19, 2024 · d46907c · d46907c
1 parent a6e9242
commit d46907c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 31 deletions.
diff --git a/.changeset/two-knives-worry.md b/.changeset/two-knives-worry.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+StepperPage: add step 3
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx
@@ -2,6 +2,9 @@ export const texts = {
   steps: {
     step1: 'Step 1: ',
     step2: 'Step 2: ',
-    step3: 'Completed, click back button to get to previous step',
+    step3: 'Step 3:',
+    step3SubTitle1: 'Identity: ',
+    step3SubTitle2: 'Address: ',
+    step3Title: 'Summary',
   },
 };
diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx
@@ -10,6 +10,7 @@ import {
   FoldableColumnLayout,
   FullNameFields,
   SidebarMenu,
+  SummaryBox,
 } from '@smile/haring-react';
 import { useState } from 'react';
 
@@ -118,7 +119,24 @@ export function StepperPage(): ReactElement {
             onOptionSubmit={onOptionSubmitMock}
           />
         </Stepper.Step>
-        <Stepper.Completed>{texts.steps.step3}</Stepper.Completed>
+        <Stepper.Completed>
+          {texts.steps.step3}
+          <br />
+          <h2>{texts.steps.step3Title}</h2>
+          <SummaryBox titleNode={texts.steps.step3SubTitle1}>
+            {`${form.getValues().fullName.firstName} ${
+              form.getValues().fullName.lastName
+            }`}
+          </SummaryBox>
+          <br />
+          <SummaryBox titleNode={texts.steps.step3SubTitle2}>
+            {form.getValues().address.number}, {form.getValues().address.street}
+            <br />
+            {form.getValues().address.postCode}, {form.getValues().address.city}
+            <br />
+            {form.getValues().address.country}
+          </SummaryBox>
+        </Stepper.Completed>
       </Stepper>
 
       <Group mt="xl">