Untitled

update the code to diaplay the description if it has value, if desc is null the show the text:Description not available.



import React from 'react';
import { Button, Label, Column, Header, Row, Para } from '@d-lift/uxcomponents';
import { Util } from '@d-lift/core';

const RFIDetails = ({ rfi, responseStats ,updatedDueDt}) => {

    return (
        <>
            <div className="ux-rfi-grey-border w-100 mt-3">
                <Header className="pt-3 ux-rfi-font-header" size="2">
                    {rfi.title}
                </Header>
                <Row>
                    <Column className="col-9">
                        <Row className="d-flex flex-wrap">
                            <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label">
                                {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)}
                            </Para>
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)}
                            </Para>
                            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)}
                            </Para>
                        </Row>
                    </Column>

                    <Column>
                        <div className="ux-rfi-grey-border">
                            <Label
                                labelKey="requested_by"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">
                                {Util.getRefTableDescriptionByCode('STATE', rfi.state)}
                            </Para>
                            <Label
                                labelKey="due"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{updatedDueDt}</Para>
                            <Label
                                labelKey="responses"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{responseStats}</Para>
                            <div className="m-0 p-1">
                                <Button
                                    id="summarizeBtn"
                                    size="small"
                                    className="ux-rfi-green-button"
                                    // click={}
                                    labelKey="summarize_btn"></Button>
                            </div>
                        </div>
                    </Column>
                </Row>
            </div>

            <div className="ux-rfi-grey-border w-100 mt-3">
                {/* need to display N/A message if no description is available */}
                <Para className="mt-2 scrollable-content" labelKey="">{rfi.description}</Para>
            </div>
        </>
    );
};

export default RFIDetails;