update(app and service release): updated color for asterik (#185)

eclipse-tractusx · Aug 3, 2023 · f901264 · f901264
1 parent ce4aa7d
commit f901264
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 38 deletions.
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -1003,14 +1003,14 @@
       "technicalIntegration": {
         "headerTitle": "Technical Integration",
         "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-        "step1Header": "1. User Role Upload *",
+        "step1Header": "1. User Role Upload",
         "step1HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
         "clientID": "Client ID",
         "URL": "URL",
         "pleaseEnterValidURL": "Please enter a valid URL",
         "URLPlaceholder": "http://www.loremipsum.de",
         "clientCreated": "Client created",
-        "step2Header": "2. Technical User Setup *",
+        "step2Header": "2. Technical User Setup",
         "step2HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
         "uploadRolesDescription": "Upload all app roles by using the available upload template (csv) file added attached",
         "rolesPreview": "Preview of Roles uploaded",

diff --git a/src/assets/locales/de/servicerelease.json b/src/assets/locales/de/servicerelease.json
@@ -26,18 +26,18 @@
   "step1": {
     "headerTitle": "Service Card Erstellen",
     "headerDescription": "Die folgenden Eingabefelder und Uploads werden verwendet, um Ihre Service-'Service Card' zu erstellen, die auf dem Marktplatz platziert wird. Die Servicekarte ist der erste Berührungspunkt mit dem Kunden.",
-    "serviceName": "Service Name*",
-    "serviceType": "Service Type*",
+    "serviceName": "Service Name",
+    "serviceType": "Service Type",
     "serviceTypePlaceholder": "Wählen Sie den Servicetyp aus",
-    "shortDescriptionEN": "Kurzbeschreibung (en)*",
-    "shortDescriptionDE": "Kurzbeschreibung (de)*",
+    "shortDescriptionEN": "Kurzbeschreibung (en)",
+    "shortDescriptionDE": "Kurzbeschreibung (de)",
     "serviceLeadImageUpload": "Service Card Bild"
   },
   "step2": {
     "headerTitle": "Service Details",
     "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-    "longDescriptionEN": "Service Beschreibung (en)*",
-    "longDescriptionDE": "Service Beschreibung (de)*",
+    "longDescriptionEN": "Service Beschreibung (en)",
+    "longDescriptionDE": "Service Beschreibung (de)",
     "doc": "Supporting Material",
     "note": "Info:",
     "providerDetails": "Provider Details",

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -928,7 +928,7 @@
         "salesManager": "Sales Manager",
         "salesManagerPlaceholder": "Please select a Sales Manager",
         "salesManagerDescription": "Please select the app sales manager via the dropdown below. The sales manager can only get set if a user of your company has the respective portal role. The sales manager will get informed as soon as a app subscribtion request is triggered by the customer.",
-        "pricingInformation": "Pricing Information (e.g. free / charged ( to be defined)",
+        "pricingInformation": "Pricing Information (e.g. free / charged (to be defined))",
         "appLeadImageUpload": "App Lead Image Upload"
       },
       "appPage": {
@@ -965,14 +965,14 @@
       "technicalIntegration": {
         "headerTitle": "Technical Integration",
         "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-        "step1Header": "1. User Role Upload *",
+        "step1Header": "1. User Role Upload",
         "step1HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
         "clientID": "Client ID",
         "URL": "URL",
         "pleaseEnterValidURL": "Please enter a valid URL",
         "URLPlaceholder": "http://www.loremipsum.de",
         "clientCreated": "Client created",
-        "step2Header": "2. Technical User Setup *",
+        "step2Header": "2. Technical User Setup",
         "step2HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
         "uploadRolesDescription": "Upload all app roles by using the available upload template (csv) file added attached",
         "rolesPreview": "Preview of Roles uploaded",

diff --git a/src/assets/locales/en/servicerelease.json b/src/assets/locales/en/servicerelease.json
@@ -26,18 +26,18 @@
   "step1": {
     "headerTitle": "Create Service",
     "headerDescription": "The following input fields and uploads are used to create your service 'Service Card' which will be placed inside the marketplace. The service card is the first touchpoint with the customer.",
-    "serviceName": "Service Name*",
-    "serviceType": "Service Type*",
+    "serviceName": "Service Name",
+    "serviceType": "Service Type",
     "serviceTypePlaceholder": "Select a Service Type Id",
-    "shortDescriptionEN": "Short Description (en)*",
-    "shortDescriptionDE": "Short Description (de)*",
+    "shortDescriptionEN": "Short Description (en)",
+    "shortDescriptionDE": "Short Description (de)",
     "serviceLeadImageUpload": "Service Card Image"
   },
   "step2": {
     "headerTitle": "Service Details",
     "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-    "longDescriptionEN": "Long Description (en)*",
-    "longDescriptionDE": "Long Description (de)*",
+    "longDescriptionEN": "Long Description (en)",
+    "longDescriptionDE": "Long Description (de)",
     "doc": "Supporting Material",
     "note": "Note:",
     "providerDetails": "Provider Details",

diff --git a/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx b/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx
@@ -508,7 +508,12 @@ export default function AppMarketCard() {
               }}
               name="title"
               pattern={Patterns.appMarketCard.appTitle}
-              label={t('content.apprelease.appMarketCard.appTitle') + ' *'}
+              label={
+                <>
+                  {t('content.apprelease.appMarketCard.appTitle')}
+                  <span style={{ color: 'red' }}> *</span>
+                </>
+              }
               rules={{
                 required: `${t(
                   'content.apprelease.appMarketCard.appTitle'
@@ -538,7 +543,12 @@ export default function AppMarketCard() {
               maxLength={30}
               minLength={3}
               pattern={Patterns.appMarketCard.appProvider}
-              label={t('content.apprelease.appMarketCard.appProvider') + ' *'}
+              label={
+                <>
+                  {t('content.apprelease.appMarketCard.appProvider')}
+                  <span style={{ color: 'red' }}> *</span>
+                </>
+              }
               rules={{
                 required: `${t(
                   'content.apprelease.appMarketCard.appProvider'
@@ -572,7 +582,8 @@ export default function AppMarketCard() {
                       }}
                       label={
                         <>
-                          {t(`content.apprelease.appMarketCard.${item}`) + ' *'}
+                          {t(`content.apprelease.appMarketCard.${item}`)}
+                          <span style={{ color: 'red' }}> *</span>
                           <IconButton sx={{ color: '#939393' }} size="small">
                             <HelpOutlineIcon />
                           </IconButton>
@@ -623,9 +634,12 @@ export default function AppMarketCard() {
                   trigger,
                   errors,
                   name: 'useCaseCategory',
-                  label:
-                    t('content.apprelease.appMarketCard.useCaseCategory') +
-                    ' *',
+                  label: (
+                    <>
+                      {t('content.apprelease.appMarketCard.useCaseCategory')}
+                      <span style={{ color: 'red' }}> *</span>
+                    </>
+                  ),
                   placeholder: t(
                     'content.apprelease.appMarketCard.useCaseCategoryPlaceholder'
                   ),
@@ -663,8 +677,12 @@ export default function AppMarketCard() {
                   trigger,
                   errors,
                   name: 'appLanguage',
-                  label:
-                    t('content.apprelease.appMarketCard.appLanguage') + ' *',
+                  label: (
+                    <>
+                      {t('content.apprelease.appMarketCard.appLanguage')}
+                      <span style={{ color: 'red' }}> *</span>
+                    </>
+                  ),
                   placeholder: t(
                     'content.apprelease.appMarketCard.appLanguagePlaceholder'
                   ),
@@ -735,7 +753,10 @@ export default function AppMarketCard() {
               maxLength={15}
               minLength={1}
               label={
-                t('content.apprelease.appMarketCard.pricingInformation') + ' *'
+                <>
+                  {t('content.apprelease.appMarketCard.pricingInformation')}
+                  <span style={{ color: 'red' }}> *</span>
+                </>
               }
               rules={{
                 required: `${t(
@@ -764,7 +785,10 @@ export default function AppMarketCard() {
                 errors,
               }}
               label={
-                t('content.apprelease.appMarketCard.appLeadImageUpload') + ' *'
+                <>
+                  {t('content.apprelease.appMarketCard.appLeadImageUpload')}
+                  <span style={{ color: 'red' }}> *</span>
+                </>
               }
               noteDescription={t(
                 'content.apprelease.appReleaseForm.OnlyOneFileAllowed'

diff --git a/src/components/shared/basic/ReleaseProcess/AppPage/index.tsx b/src/components/shared/basic/ReleaseProcess/AppPage/index.tsx
@@ -481,7 +481,8 @@ export default function AppPage() {
                 }}
                 label={
                   <>
-                    {t(`content.apprelease.appPage.${item}`) + ' *'}
+                    {t(`content.apprelease.appPage.${item}`)}
+                    <span style={{ color: 'red' }}> *</span>
                     <IconButton sx={{ color: '#939393' }} size="small">
                       <HelpOutlineIcon />
                     </IconButton>
@@ -521,7 +522,8 @@ export default function AppPage() {
         <Divider sx={{ mb: 2, mr: -2, ml: -2 }} />
         <div className="form-field">
           <InputLabel sx={{ mb: 3, mt: 3 }}>
-            {t('content.apprelease.appPage.images') + ' *'}
+            {t('content.apprelease.appPage.images')}
+            <span style={{ color: 'red' }}> *</span>
           </InputLabel>
           <Controller
             name="images"
@@ -648,7 +650,8 @@ export default function AppPage() {
         />
         <Divider sx={{ mb: 2, mr: -2, ml: -2 }} />
         <InputLabel sx={{ mb: 3 }}>
-          {t('content.apprelease.appPage.privacyInformation') + ' *'}
+          {t('content.apprelease.appPage.privacyInformation')}
+          <span style={{ color: 'red' }}> *</span>
         </InputLabel>
         <Typography variant="body2" sx={{ marginBottom: '10px' }}>
           {t('content.apprelease.appPage.privacyInformationDescription')}

diff --git a/src/components/shared/basic/ReleaseProcess/ContractAndConsent/index.tsx b/src/components/shared/basic/ReleaseProcess/ContractAndConsent/index.tsx
@@ -67,8 +67,10 @@ export default function ContractAndConsent() {
           'content.apprelease.appReleaseForm.isMandatory'
         )}
         imageFieldLabel={
-          t('content.apprelease.contractAndConsent.uploadImageConformity') +
-          ' *'
+          <>
+            {t('content.apprelease.contractAndConsent.uploadImageConformity')}
+            <span style={{ color: 'red' }}> *</span>
+          </>
         }
         pageSnackbarDescription={t(
           'content.apprelease.appReleaseForm.dataSavedSuccessMessage'

diff --git a/src/components/shared/basic/ReleaseProcess/OfferCard/index.tsx b/src/components/shared/basic/ReleaseProcess/OfferCard/index.tsx
@@ -363,7 +363,12 @@ export default function OfferCard() {
               }}
               name="title"
               pattern={Patterns.offerCard.serviceName}
-              label={t('step1.serviceName')}
+              label={
+                <>
+                  {t('step1.serviceName')}
+                  <span style={{ color: 'red' }}> *</span>
+                </>
+              }
               rules={{
                 required: `${t('step1.serviceName')} ${t(
                   'serviceReleaseForm.isMandatory'
@@ -389,7 +394,12 @@ export default function OfferCard() {
                   trigger,
                   errors,
                   name: 'serviceTypeIds',
-                  label: t('step1.serviceType'),
+                  label: (
+                    <>
+                      {t('step1.serviceType')}
+                      <span style={{ color: 'red' }}> *</span>
+                    </>
+                  ),
                   placeholder: t('step1.serviceTypePlaceholder'),
                   type: 'multiSelectList',
                   rules: {
@@ -430,6 +440,7 @@ export default function OfferCard() {
                       label={
                         <>
                           {t(`step1.${desc}`)}
+                          <span style={{ color: 'red' }}> *</span>
                           <IconButton sx={{ color: '#939393' }} size="small">
                             <HelpOutlineIcon />
                           </IconButton>

diff --git a/src/components/shared/basic/ReleaseProcess/OfferPage/index.tsx b/src/components/shared/basic/ReleaseProcess/OfferPage/index.tsx
@@ -283,6 +283,7 @@ export default function OfferPage({
                   label={
                     <>
                       {t(`step2.${longDesc}`)}
+                      <span style={{ color: 'red' }}> *</span>
                       <IconButton sx={{ color: '#939393' }} size="small">
                         <HelpOutlineIcon />
                       </IconButton>

diff --git a/src/components/shared/basic/ReleaseProcess/TechnicalIntegration/index.tsx b/src/components/shared/basic/ReleaseProcess/TechnicalIntegration/index.tsx
@@ -324,7 +324,10 @@ export default function TechnicalIntegration() {
 
       <form className="header-description">
         <Typography variant="h5" mb={2}>
-          {t('content.apprelease.technicalIntegration.step1Header')}
+          <>
+            {t('content.apprelease.technicalIntegration.step1Header')}
+            <span style={{ color: 'red' }}> *</span>
+          </>
         </Typography>
         <Typography variant="body2" mb={4}>
           {t('content.apprelease.technicalIntegration.step1HeaderDescription')}
@@ -552,7 +555,10 @@ export default function TechnicalIntegration() {
         )}
         <Divider className="form-divider" />
         <Typography variant="h5" mb={2}>
-          {t('content.apprelease.technicalIntegration.step2Header')}
+          <>
+            {t('content.apprelease.technicalIntegration.step2Header')}
+            <span style={{ color: 'red' }}> *</span>
+          </>
         </Typography>
         <Typography variant="body2" mb={4}>
           {t('content.apprelease.technicalIntegration.step2HeaderDescription')}

diff --git a/src/components/shared/basic/ReleaseProcess/components/CommonContractAndConsent.tsx b/src/components/shared/basic/ReleaseProcess/components/CommonContractAndConsent.tsx
@@ -20,7 +20,7 @@
 
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { decrement, increment } from 'features/appManagement/slice'
 import {
@@ -68,7 +68,7 @@ type CommonConsentType = {
   stepperTitle: string
   stepperDescription: string
   checkBoxMandatoryText: string
-  imageFieldLabel?: string
+  imageFieldLabel?: ReactElement
   pageSnackbarDescription: string
   pageNotificationObject: {
     title: string