Untitled

when AppContext.model.getValue('APLPR.programCd') === 'snap', then whereever we have "programCode": "FS", get its "caseNumber" and make a filteredCaseNumberList, and when we have AppContext.model.getValue('APLPR.programCd') === 'ff' then filter the case numbers which have "programCode": "TA".

for the selected case number in model="APLCN.caseNumber", make a "personList" list of the person with using "firstName"+"lastName"+ "middleInitial" , but on selecting the value in dropdown th eperson's personId should get saved.


import React, { useEffect, useState } from 'react';
import { Section, Page, Header, Row, Column, Button, Para, Selectbox } from '@d-lift/uxcomponents';
import { withPage, Navigate, useAppState } from '@d-lift/core';
import PageData from '@/UXModule/bcDesktopWayfinder/aplDesktopWayfinderData.json';
import CPUtil from '@/Util/CPUtil';
import ButtonNavigation from '@/UXModule/ButtonNavigation/ButtonNavigation';
import './APLCN.scss';
import caseDataJSON from './CaseData.json';

const pageConfig = {
    PageName: 'APLCN',
    Description: 'Case And Notice Page',
    ContextRoot: 'Appeals',
    ContentManager: true,
    PageType: 'workflow',
    WorkFlowNavigation: true,
    TemplateOptions: { cardWorkflow: true },
    pageId: 'APLCN',
    ShowTitle: false,
};

const APLCN = () => {
    const [visibleCard, setVisibleCard] = useState(null);
    const defaultData = {
        appealStatus: '',
        caseNumber: '',
        personId: '',
        appealingIndvId: '',
    };
    const [APLCN] = useAppState('APLCN', defaultData);

    useEffect(() => {
        CPUtil.setValueInAppcontext('currentStep', 3);
        CPUtil.setValueInAppcontext('wayFinderSteps', PageData);
    }, []);

    const onNext = () => {
        CPUtil.setValueInAppcontext('currentStep', 4);
        Navigate.to('/Appeals/AppealsAppeallantInfo/APLAI');
    };

    const onBack = () => {
        Navigate.to('/Appeals/AppealsContinuationOfBenefits/APLCB');
    };

    const handleCaseNumber = () => {
        let caseData = caseDataJSON.caseData;

        setVisibleCard('case');
    };

    return (
        <Page>
            <Section className="container">
                <Header labelKey="case_header" />
                <Header header-size="2" className="mt-4" labelKey="case_subheader" />
                <Row>
                    <Column>
                        <Button
                            className="col-auto mx-2 mb-2"
                            labelKey="caseNumber_btn_text"
                            click={handleCaseNumber}
                        />
                    </Column>
                    <Column>
                        <Button
                            className="col-auto mx-2 mb-2"
                            labelKey="applNumber_btn_text"
                            click={() => setVisibleCard('appl')}
                        />
                    </Column>
                </Row>
                {visibleCard === 'case' && (
                    <Section id="caseNumber_card" className="dynamic-fields left-button mb-4">
                        <Selectbox
                            id="case_question1"
                            labelKey="case_question1"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="common_selectone"
                            list={filteredCaseNumberList}
                            model="APLCN.caseNumber"
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                        <Para className="ux-helper-text" labelKey="case_question_helper_text" />
                        <Selectbox
                            id="case_question2"
                            labelKey="case_question2"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="selectIndividual_dropdown_text"
                            list={personList}
                            model="APLCN.personId"
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                    </Section>
                )}
                {visibleCard === 'appl' && (
                    <Section id="applNumber_card" className="dynamic-fields right-button mb-4">
                        <Selectbox
                            id="application_question"
                            labelKey="application_question"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="common_selectone"
                            model="APLCN.appealingIndvId"
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                        <Para
                            className="ux-helper-text"
                            labelKey="application_question_helper_text"
                        />
                    </Section>
                )}
                <Header header-size="2" className="mt-4" labelKey="selectNotice_subheader" />
                <Selectbox
                    id="appeal_reason"
                    labelKey="selectNotice_question"
                    defaultOption="true"
                    defaultOptionValue="SEL"
                    defaultOptionLabelKey="selectDoc_dropdown_text"
                />
                <Para className="ux-helper-text" labelKey="case_question_helper_text" />
            </Section>
            <ButtonNavigation onNext={onNext} onBack={onBack} />
        </Page>
    );
};

export default withPage(pageConfig, APLCN);