fix: create a new component for form-header used in each step (eclipse-tractusx#310)

eclipse-tractusx#309

Author: shubhamv-ss

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

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

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' : ''}`}>

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}>

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

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}

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">