+
+
+ {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_SUBTITLE')}
+
+
}
+ type="text"
+ placeholder={t(
+ '__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_PLACEHOLDER'
+ )}
+ focusInset
+ {...(useCase &&
+ useCase.link && {
+ value: useCase.link,
+ })}
+ {...getFieldProps(`use_cases[${useCaseIndex}].link`)}
+ {...(useCaseErrors && useCaseErrors?.link && { validation: 'error' })}
+ onBlur={() => validateForm()}
+ />
+ {useCaseErrors && useCaseErrors?.link ? (
+
+ {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_INVALID')}
+
+ ) : (
+
+
+ {t('__EXPRESS_WIZARD_STEP_HOW_USE_CASE_MODAL_LINK_FIELD_MESSAGE')}
+
+ )}
+
+ );
+};
+
+export { UseCaseLink };
diff --git a/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx
new file mode 100644
index 000000000..90bd072b1
--- /dev/null
+++ b/src/pages/ExpressWizard/steps/express-2/ModalUseCase/useCaseDetailsTitle.tsx
@@ -0,0 +1,62 @@
+import { InputToggle, Span } from '@appquality/unguess-design-system';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+import { HelpTextMessage } from 'src/common/components/helpTextMessage';
+import { UseCase } from 'src/pages/ExpressWizard/fields/how';
+import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
+
+const UseCaseTitle = ({
+ useCase,
+ useCaseIndex,
+}: {
+ useCase: UseCase;
+ useCaseIndex: number;
+}) => {
+ const { t } = useTranslation();
+ const { getFieldProps, validateForm, errors } =
+ useFormikContext