From e354abb3b50c4d093eaec8085c3aea53048ccd7d Mon Sep 17 00:00:00 2001
From: Shubham Vaidya <shubham.vaidya@smartsensesolutions.com>
Date: Thu, 21 Nov 2024 22:11:00 +0530
Subject: [PATCH] fix: create a new component for form-header used in each step
 (#310)

https://github.com/eclipse-tractusx/portal-frontend-registration/issues/309
---
 CHANGELOG.md                            |  4 +++
 src/components/StepHeader.tsx           | 41 +++++++++++++++++++++++++
 src/components/cax-companyData.tsx      | 17 ++++------
 src/components/cax-companyRole.tsx      | 17 ++++------
 src/components/cax-responsibilities.tsx | 17 ++++------
 src/components/dragdrop.tsx             | 17 ++++------
 src/components/verifyRegistration.tsx   | 17 ++++------
 7 files changed, 75 insertions(+), 55 deletions(-)
 create mode 100644 src/components/StepHeader.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b7416cf..559f431b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bugfix
+
+- created a new component for form header to avoid duplication of code in each step [#310](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/310)
+
 ## 2.1.0-RC1
 
 ### Change
diff --git a/src/components/StepHeader.tsx b/src/components/StepHeader.tsx
new file mode 100644
index 00000000..c8a623f3
--- /dev/null
+++ b/src/components/StepHeader.tsx
@@ -0,0 +1,41 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+type StepHeaderProps = {
+  step: number
+  stepName: string
+  stepDescription: string
+}
+const StepHeader = ({ step, stepName, stepDescription }: StepHeaderProps) => {
+  return (
+    <div className="head-section">
+      <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
+        {step}
+      </div>
+      <h4 className="mx-auto d-flex align-items-center justify-content-center">
+        {stepName}
+      </h4>
+      <div className="mx-auto text-center col-9">
+        {stepDescription}
+      </div>
+    </div>
+  )
+}
+
+export default StepHeader
diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx
index 2b8b050f..b8ce2e4e 100644
--- a/src/components/cax-companyData.tsx
+++ b/src/components/cax-companyData.tsx
@@ -43,6 +43,7 @@ import {
 import { Autocomplete, TextField } from '@mui/material'
 import i18n from '../services/I18nService'
 import { Notify } from './Snackbar'
+import StepHeader from './StepHeader'
 
 type CountryType = {
   id: string
@@ -389,17 +390,11 @@ export const CompanyDataCax = () => {
   return (
     <>
       <div className="mx-auto col-9 container-registration">
-        <div className="head-section">
-          <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
-            1
-          </div>
-          <h4 className="mx-auto d-flex align-items-center justify-content-center">
-            {t('registrationStepOne.verifyCompayDataHeading')}
-          </h4>
-          <div className="mx-auto text-center col-9">
-            {t('registrationStepOne.verifyCompayDataSubHeading')}
-          </div>
-        </div>
+        <StepHeader
+          step={currentActiveStep}
+          stepName={t('registrationStepOne.verifyCompayDataHeading')}
+          stepDescription={t('registrationStepOne.verifyCompayDataSubHeading')}
+        />
         <div className="companydata-form">
           <Row className="mx-auto col-9">
             <div className={`form-search ${bpnErrorMsg ? 'error' : ''}`}>
diff --git a/src/components/cax-companyRole.tsx b/src/components/cax-companyRole.tsx
index 8ca45cd3..b41c1d73 100644
--- a/src/components/cax-companyRole.tsx
+++ b/src/components/cax-companyRole.tsx
@@ -40,6 +40,7 @@ import {
   getCurrentStep,
 } from '../state/features/user/userApiSlice'
 import '../styles/newApp.css'
+import StepHeader from './StepHeader'
 
 export const CompanyRoleCax = () => {
   const { t, i18n } = useTranslation()
@@ -272,17 +273,11 @@ export const CompanyRoleCax = () => {
   return (
     <>
       <div className="mx-auto col-9 container-registration">
-        <div className="head-section">
-          <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
-            3
-          </div>
-          <h4 className="mx-auto d-flex align-items-center justify-content-center">
-            {t('companyRole.title')}
-          </h4>
-          <div className="mx-auto text-center col-9">
-            {t('companyRole.subTitle')}
-          </div>
-        </div>
+        <StepHeader 
+          step={currentActiveStep}
+          stepName={t('companyRole.title')}
+          stepDescription={t('companyRole.subTitle')}
+        />
         <div className="companydata-form mx-auto col-9">
           {allConsentData?.companyRoles.map((role, index) => (
             <div className="company-role-section" key={index}>
diff --git a/src/components/cax-responsibilities.tsx b/src/components/cax-responsibilities.tsx
index a8aa175d..31e0758a 100644
--- a/src/components/cax-responsibilities.tsx
+++ b/src/components/cax-responsibilities.tsx
@@ -38,6 +38,7 @@ import {
   useUpdateInviteNewUserMutation,
 } from '../state/features/applicationInviteUser/applicationInviteUserApiSlice'
 import { Notify, SeverityType } from './Snackbar'
+import StepHeader from './StepHeader'
 
 export const ResponsibilitiesCax = () => {
   const { t } = useTranslation()
@@ -177,17 +178,11 @@ export const ResponsibilitiesCax = () => {
   return (
     <>
       <div className="mx-auto col-9 container-registration">
-        <div className="head-section">
-          <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
-            2
-          </div>
-          <h4 className="mx-auto d-flex align-items-center justify-content-center">
-            {t('Responsibility.responsAndAdmin')}
-          </h4>
-          <div className="mx-auto text-center col-9">
-            {t('Responsibility.subTitle')}
-          </div>
-        </div>
+        <StepHeader
+          step={currentActiveStep}
+          stepName={t('Responsibility.responsAndAdmin')}
+          stepDescription={t('Responsibility.subTitle')}
+        />
         <div className="companydata-form">
           <Row className="mx-auto col-9">
             <div
diff --git a/src/components/dragdrop.tsx b/src/components/dragdrop.tsx
index f793a9d7..25d37a0c 100644
--- a/src/components/dragdrop.tsx
+++ b/src/components/dragdrop.tsx
@@ -49,6 +49,7 @@ import {
 } from '../state/features/applicationDocuments/applicationDocumentsApiSlice'
 import { downloadDocument } from '../helpers/utils'
 import { Notify, SeverityType } from './Snackbar'
+import StepHeader from './StepHeader'
 
 const getClassNameByStatus = (status: string) => {
   switch (status) {
@@ -198,17 +199,11 @@ export const DragDrop = () => {
   return (
     <>
       <div className="mx-auto col-9 container-registration">
-        <div className="head-section">
-          <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
-            4
-          </div>
-          <h4 className="mx-auto d-flex align-items-center justify-content-center">
-            {t('documentUpload.title')}
-          </h4>
-          <div className="mx-auto text-center col-9">
-            {t('documentUpload.subTitle')}
-          </div>
-        </div>
+        <StepHeader
+          step={currentActiveStep}
+          stepName={t('documentUpload.title')}
+          stepDescription={t('documentUpload.subTitle')}
+        />
         <div className="companydata-form mx-auto col-9">
           <Dropzone
             onChangeStatus={handleChangeStatus}
diff --git a/src/components/verifyRegistration.tsx b/src/components/verifyRegistration.tsx
index 880f842f..e4ad881b 100644
--- a/src/components/verifyRegistration.tsx
+++ b/src/components/verifyRegistration.tsx
@@ -36,6 +36,7 @@ import {
   useUpdateRegistrationMutation,
 } from '../state/features/applicationVerifyRegister/applicationVerifyRegisterApiSlice'
 import { Notify } from './Snackbar'
+import StepHeader from './StepHeader'
 
 export const VerifyRegistration = () => {
   const { t } = useTranslation()
@@ -107,17 +108,11 @@ export const VerifyRegistration = () => {
   return (
     <>
       <div className="mx-auto col-9 container-registration">
-        <div className="head-section">
-          <div className="mx-auto step-highlight d-flex align-items-center justify-content-center">
-            5
-          </div>
-          <h4 className="mx-auto d-flex align-items-center justify-content-center">
-            {t('verifyRegistration.title')}
-          </h4>
-          <div className="mx-auto text-center col-9">
-            {t('verifyRegistration.subtitle')}
-          </div>
-        </div>
+        <StepHeader 
+          step={currentActiveStep}
+          stepName={t('verifyRegistration.title')}
+          stepDescription={t('verifyRegistration.subtitle')}
+        />
         <div className="companydata-form mx-auto col-9">
           <Row>
             <ul className="list-group-cax px-2">