@ -4,6 +4,7 @@ import { IoAlert, IoCheckmark } from "react-icons/io5";
import {
getQuestionListItems ,
isQuestionListItemVisibleForProfile ,
type QuestionListItem ,
} from "@/data/question-data" ;
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main" ;
import { useMarriageSectionsQuery } from "@/hooks/marriage/use-sections" ;
@ -12,6 +13,11 @@ import { useMemo } from "react";
import { toFrontendSlug } from "@/data/section-slug-map" ;
import { getStoredAge , getLocalSectionProgress } from "@/components/questions/progress-helper" ;
type RequiredStepsCardProps = {
items? : QuestionListItem [ ] ;
progressBySlug? : Map < string , number > ;
} ;
type RequiredStep = {
slug : string ;
required : boolean ;
@ -28,62 +34,56 @@ function getRequiredStepStats(steps: RequiredStep[]) {
} ;
}
export default function RequiredStepsCard() {
export default function RequiredStepsCard ( {
items ,
progressBySlug ,
} : RequiredStepsCardProps = { } ) {
const { dictionary : t , locale } = useI18n ( ) ;
const { data : profile } = useMarriageProfileQuery ( ) ;
const { data : sections } = useMarriageSectionsQuery ( ) ;
const fallbackRequiredSteps : RequiredStep [ ] = getQuestionListItems ( locale )
. filter ( ( item ) = >
const questionListItems = useMemo (
( ) = >
items ? ?
getQuestionListItems ( locale ) . filter ( ( item ) = >
isQuestionListItemVisibleForProfile ( item , {
gender : profile?.gender ,
} ) ,
)
. map ( ( item ) = > ( {
slug : item.slug ,
required : Boolean ( item . required ) ,
progress : item.progress ,
} ) ) ;
const steps = useMemo ( ( ) = > {
if ( ! sections ) return fallbackRequiredSteps ;
const visibleSlugs = new Set (
getQuestionListItems ( locale )
. filter ( ( item ) = >
isQuestionListItemVisibleForProfile ( item , {
gender : profile?.gender ,
} ) ,
)
. map ( ( item ) = > item . slug )
) ,
[ items , locale , profile ? . gender ] ,
) ;
const steps : RequiredStep [ ] = useMemo ( ( ) = > {
const age = getStoredAge ( ) ;
return sections
. map ( ( section ) = > {
const frontendSlug = toFrontendSlug ( section . slug ) ;
// Check if the frontend equivalent of this section is required
const frontendItem = getQuestionListItems ( locale ) . find (
( item ) = > item . slug === frontendSlug ,
) ;
const localProgress = frontendItem ? getLocalSectionProgress ( frontendItem , profile , age ) : null ;
const progress = localProgress !== null ? localProgress : Math.max (
0 ,
Math . min ( 100 , Math . round ( section . completion_percent ) ) ,
) ;
type SectionType = NonNullable < typeof sections > [ number ] ;
const sectionMap = new Map < string , SectionType > ( ) ;
sections ? . forEach ( ( s ) = > {
sectionMap . set ( toFrontendSlug ( s . slug ) , s ) ;
sectionMap . set ( s . slug , s ) ;
} ) ;
return questionListItems . map ( ( item ) = > {
const localProgress = getLocalSectionProgress ( item , profile , age ) ;
const section = sectionMap . get ( item . slug ) ;
let progress = 0 ;
if ( localProgress !== null ) {
progress = localProgress ;
} else if ( progressBySlug && typeof progressBySlug . get ( item . slug ) === "number" ) {
progress = progressBySlug . get ( item . slug ) ! ;
} else if ( section ) {
progress = Math . max ( 0 , Math . min ( 100 , Math . round ( section . completion_percent ) ) ) ;
} else {
progress = item . progress ;
}
return {
slug : frontendSlug ,
required : frontendItem ? Boolean ( frontendItem . required ) : section . is_required ,
slug : item.s lug,
required : Boolean ( i tem. required ) ,
progress ,
} ;
} )
. filter ( ( step ) = > visibleSlugs . has ( step . slug ) ) ;
} , [ sections , fallbackRequiredSteps , locale , profile ] ) ;
} ) ;
} , [ questionListItems , progressBySlug , sections , profile ] ) ;
const { completed , total } = getRequiredStepStats ( steps ) ;
const completion = total > 0 ? Math . round ( ( completed / total ) * 100 ) : 0 ;
