export type SetupStep = { label: string; slug?: string; sectionIndex: number; }; export type SetupSection = { label: string; title: { [any: string]: string | undefined; }; }; export class SetupOptions { sections: SetupSection[] = [ { label: 'About You', title: { base: 'About You', sm: '1. About You' }, }, { label: 'Profile', title: { base: 'Profile', sm: '2. Profile', lg: '2. Professional Profile', }, }, { label: 'Start Playing', title: { base: 'Play', sm: '3. Play', md: '3. Start Playing', }, }, ]; steps: SetupStep[] = [ { label: 'Username', slug: 'username', sectionIndex: 0, }, { label: 'Personality Type', slug: 'personalityType', sectionIndex: 0, }, { label: 'Player Type', slug: 'playerType', sectionIndex: 0, }, { label: 'Skills', slug: 'skills', sectionIndex: 1, }, { label: 'Availability', slug: 'availability', sectionIndex: 1, }, { label: 'Time Zone', slug: 'timeZone', sectionIndex: 1, }, { label: 'Memberships', slug: 'memberships', sectionIndex: 1, }, { label: 'Start Playing', slug: 'complete', sectionIndex: 2, }, ]; stepIndexMatchingSlug(slug: string | null): number { return this.steps.findIndex((step) => step.slug === slug); } get numSteps(): number { return this.steps.length; } isLastStep(stepIndex: number): boolean { return stepIndex >= this.numSteps - 1; } isFinalStepOfSection(stepIndex: number): boolean { if (this.isLastStep(stepIndex)) return true; return ( this.steps[stepIndex].sectionIndex !== this.steps[stepIndex + 1].sectionIndex ); } progressWithinSection(stepIndex: number): number { const stepSectionIndex = this.steps[stepIndex].sectionIndex; let stepsCompletedInSection = 0; const stepsInSection = this.steps.reduce( (count: number, step: SetupStep, index: number) => { if (stepIndex === index) { stepsCompletedInSection = count; } if (step.sectionIndex === stepSectionIndex) { return count + 1; } return count; }, 0, ); return Math.floor((stepsCompletedInSection + 1) * 100.0) / stepsInSection; } }