Untitled

update the below code to simplify the code part for the cards where we send label key and it get sset instaed of writing these many cards, also keep track of the showif conditions provided.


import React, { useEffect } from 'react';
import {
    Section,
    Page,
    Header,
    Date,
    Card,
    Textarea,
    List,
    ListItem,
    Selectbox,
} from '@d-lift/uxcomponents';
import { Navigate, withPage, useAppState, AppContext } from '@d-lift/core';
import PageData from '@/UXModule/bcDesktopWayfinder/aplDesktopWayfinderData.json';
import CPUtil from '@/Util/CPUtil';
import ButtonNavigation from '@/UXModule/ButtonNavigation/ButtonNavigation';
import ConstantKeys from '@/Constants/ConstantKeys';
import dataAdapter from '@/Adapters/DataAdapter';

const pageConfig = {
    PageName: 'APLPR',
    Description: 'Program And Reason Page',
    ContextRoot: 'Appeals',
    ContentManager: true,
    PageType: 'workflow',
    WorkFlowNavigation: true,
    TemplateOptions: { cardWorkflow: true },
    pageId: 'APLPR',
    ShowTitle: false,
    SaveAndExitActionUrl: '/APLPR/APLPRLoad',
    PersistActionUrl: '/APLPR/APLPRNext',
};

const APLPR = () => {
    useEffect(() => {
        CPUtil.setValueInAppcontext('currentStep', 2);
        CPUtil.setValueInAppcontext('wayFinderSteps', PageData);

        console.log('Visited Steps APLPR', CPUtil.getValueFromAppContext('visitedSteps'));
        //APLPRLoadData();
    }, []);

    const APLPRLoadData = () => {
        dataAdapter
            .invokeAppealLoad({}, AppContext.pagedetails.getPageConfig().saveAndExitActionUrl)
            .then((response) => {
                let success = dataAdapter.validateServiceResponse(response);
                if (success) {
                    let appealId = response?.data?.appealId;
                    console.log('data from APLPRLoad', appealId);
                    setAppealId(appealId);
                }
            });
    };

    const defaultData = {
        programCd: '',
        programReasonCd: '',
        noticeAppealingDate: '',
        appealApplyDate: '',
        otherReason: '',
    };
    const [APLPR] = useAppState('APLPR', defaultData);
    const [appealId, setAppealId] = useAppState('appealId', '558200f1-324a-4b4c-8df7-87d37a7eb863');
    //const [appealId, setAppealId] = useAppState('appealId', ''); uncomment once APLPRLoad is working

    const onNext = () => {
        let data = AppContext.model.getValue(AppContext.pagedetails.getPageConfig().pageId);
        if (!AppContext.model.getValue('errorMsg')) {
            dataAdapter
                .invokeAppealPersist(
                    { ...data, appealId },
                    AppContext.pagedetails.getPageConfig().persistActionUrl,
                    'AppealsProgram_Collection',
                    APLPR,
                )
                .then((response) => {
                    if (response) {
                        // Get current visited steps
                        const visitedSteps = CPUtil.getValueFromAppContext('visitedSteps') || [];
                        const nextStep = 2;

                        // Add next step to visited steps if not already there
                        if (!visitedSteps.includes(nextStep)) {
                            visitedSteps.push(nextStep);
                        }

                        // Update visited steps in context
                        CPUtil.setValueInAppcontext('visitedSteps', visitedSteps);
                        CPUtil.setValueInAppcontext('currentStep', nextStep);

                        // Update AppContext model
                        AppContext.model.setValue('visitedSteps', visitedSteps);
                        AppContext.model.setValue('currentStep', nextStep);

                        Navigate.to('/Appeals/AppealsContinuationOfBenefits/APLCB');
                    }
                });
        }
    };

    const onBack = () => {
        CPUtil.setValueInAppcontext('currentStep', 1);
        Navigate.to('/Appeals/AppealsMoreAbout/APLMR');
    };

    // Function to handle program code change and reset reason code
    const handleProgramChange = (e) => {
        // Reset the program reason code to default value
        AppContext.model.setValue('APLPR.programReasonCd', 'SEL');
        // Reset the text area content as well
        AppContext.model.setValue('APLPR.otherReason', '');
    };

    return (
        <Page ref-table-list="APPG_11006,APPR_11005:1|Additional_1:S,APPR_11005:2|Additional_1:T">
            <Section className="container">
                <Header labelKey="Appeals_program_reason_header" />
                <Header
                    header-size="2"
                    className="mt-4"
                    labelKey="Appeals_program_selection_sub_header"
                />

                <Selectbox
                    id="program_selection"
                    labelKey="Appeals_program_selection_dropdown_title"
                    defaultOption="true"
                    defaultOptionValue="SEL"
                    defaultOptionLabelKey="common_selectone"
                    model="APLPR.programCd"
                    ref-table="APPG_11006"
                    optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                    optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                    required="{true}"
                    validationRules="required"
                    errormessages='{{"required": "common_mandatory_error"}}'
                    change={handleProgramChange}
                />
                <Selectbox
                    id="appeal_reason"
                    labelKey="Appeals_program_selection_reason_dropdown_title"
                    defaultOption="true"
                    defaultOptionValue="SEL"
                    defaultOptionLabelKey="common_selectone"
                    model="APLPR.programReasonCd"
                    ref-table="APPR_11005:1"
                    showIf={AppContext.model.getValue('APLPR.programCd') === 'snap'}
                    optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                    optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                    required="{true}"
                    validationRules="required"
                    errormessages='{{"required": "common_mandatory_error"}}'
                />
                <Selectbox
                    id="appeal_reason"
                    labelKey="Appeals_program_selection_reason_dropdown_title"
                    defaultOption="true"
                    defaultOptionValue="SEL"
                    defaultOptionLabelKey="common_selectone"
                    model="APLPR.programReasonCd"
                    ref-table="APPR_11005:2"
                    showIf={AppContext.model.getValue('APLPR.programCd') === 'ff'}
                    optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                    optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                    required="{true}"
                    validationRules="required"
                    errormessages='{{"required": "common_mandatory_error"}}'
                />
                <Section
                    showIf={
                        AppContext.model.getValue('APLPR.programReasonCd') === 'AP' &&
                        AppContext.model.getValue('APLPR.programCd') === 'snap'
                    }>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="Application_pending_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="Application_pending_info_text1" />
                            <ListItem labelKey="Application_pending_info_text2" />
                        </List>
                    </Card>
                </Section>
                <Section
                    showIf={
                        AppContext.model.getValue('APLPR.programReasonCd') === 'AP' &&
                        AppContext.model.getValue('APLPR.programCd') === 'ff'
                    }>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="Application_pending_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="Application_pending_info_text1" />
                            <ListItem labelKey="Application_pending_info_text2_tanf" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'CLB'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="benefits_level_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="benefits_level_info_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'CL'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="claims_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="claims_info_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'DEAP'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="denied_appl_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="denied_appl_info_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'TE'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="termination_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="termination_info_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'LB'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="lossOfBenefits_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="lossOfBenefits_info_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'SS'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="supportService_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="supportService_text1" />
                        </List>
                    </Card>
                </Section>
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd') === 'WRE'}>
                    <Card className="application-pending-info-card mt-4 mb-4">
                        <Header size="2" labelKey="workRequirement_info_title" />
                        <List className="application-pending-info-list mb-0">
                            <ListItem labelKey="workRequirement_info_text1" />
                        </List>
                    </Card>
                </Section>

                <Header size="2" labelKey="Appeals_additional_details_header" />
                <Section showIf={AppContext.model.getValue('APLPR.programReasonCd')}>
                    <Date
                        id="noticeDate"
                        labelKey="notice_date_text"
                        model="APLPR.noticeAppealingDate"
                        monthDropdown
                        yearDropdown
                    />
                    <Date
                        id="noticeDate"
                        labelKey="apply_date_text"
                        model="APLPR.appealApplyDate"
                        monthDropdown
                        yearDropdown
                    />
                </Section>
                <Header size="3" labelKey="Tell_us_why_textbox_title" />
                <Textarea
                    labelKey="Maximum_characters"
                    rows="9"
                    maxLength="2000"
                    showRemaining
                    charRemainingKey="common_char_remaining_text"
                    model="APLPR.otherReason"
                    calculateLength="{CPUtil.getTextLengthInBytes}"
                    validationRules="max_length_in_bytes_2000"
                    errormessages='{{ max_length_in_bytes_2000: "common_length_validation"}}'
                    change="{(e)=>CPUtil.handleSpclCharsInTextArea(e)}"
                    truncate="true"
                    required={AppContext.model.getValue('APLPR.programReasonCd') === 'UNK'}
                />
            </Section>
            <ButtonNavigation onNext={onNext} onBack={onBack} />
        </Page>
    );
};

export default withPage(pageConfig, APLPR);