diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx index f7720662d..b0415afe0 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDElementsSight/SightGuideline/SightGuideline.tsx @@ -15,6 +15,12 @@ export interface SightGuidelineProps * The id of the sight. */ sightId: string; + /** + * Display a default message if no sightGuideline is found. + * + * @default false + */ + enableDefaultMessage?: boolean; } /** @@ -25,16 +31,21 @@ export function SightGuideline({ sightGuidelines, enableSightGuidelines, enableAddDamage, + enableDefaultMessage = false, }: SightGuidelineProps) { const [showGuideline, setShowGuideline] = useState(true); const primaryColor = usePhotoCaptureHUDButtonBackground(); - const { i18n } = useTranslation(); + const { i18n, t } = useTranslation(); const style = enableAddDamage ? styles['container'] : styles['containerWide']; const guidelineFound = sightGuidelines?.find((value) => value.sightIds.includes(sightId)); - const guideline = guidelineFound ? guidelineFound[getLanguage(i18n.language)] : undefined; + const defaultMessage = enableDefaultMessage + ? t('photo.hud.guidelines.defaultGuideline') + : undefined; + + const guideline = guidelineFound ? guidelineFound[getLanguage(i18n.language)] : defaultMessage; useEffect(() => setShowGuideline(true), [sightId]); diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts index 97c1cf202..aa1aa808f 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.styles.ts @@ -30,6 +30,7 @@ export const styles: Styles = { display: 'flex', flexDirection: 'column', gap: '3px', + alignItems: 'center', }, buttonsContainer: { display: 'flex', diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx index b6004d423..e1d90061d 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDTutorial/PhotoCaptureHUDTutorial.tsx @@ -61,6 +61,7 @@ export function PhotoCaptureHUDTutorial({ sightGuidelines={sightGuidelines} enableSightGuidelines={currentTutorialStep === TutorialSteps.GUIDELINE} enableAddDamage={true} + enableDefaultMessage={true} />