ca-mfe-page-scoring-ui/src/components/MaxLimit/index.js

This is a react shell for the SPGI Platform MFE implementation

import React, { useEffect, useState } from 'react';
import BackwardForwardButton from '@components/BackwardForwardButton';
import { InputField } from '@spglobal/ca-mfe-package-utils';
import { useGetLoadMelMutation } from '@root/apis/maxLimitApi';
import { platforms } from '@root/constants';

const MaxLimit = () => {
    const [getLoadMel] = useGetLoadMelMutation();
    const [melResp, setMelResp]: any = useState({});

    useEffect(() => {
        (async () => {
            const resp: any = await getLoadMel({companyId: '112350', 'datasource': platforms.CIQ});
            setMelResp(resp?.data);
        })();
    }, []);
    console.log('melResp', melResp);
    return <div>
      <h4>Max Limit</h4>
      <div className='spg-w-50'>
        <div className='spg-d-flex spg-align-center spg-mb-sm spg-justify-between'>
            <div>Average Days Beyond Term</div>
            <div>
                <InputField
                    name='averageDaysBeyondTerm'
                    placeholder='Enter Value'
                    value={melResp?.averageDaysBeyondTerm?.value} />
            </div>
        </div>
        <div className='spg-d-flex spg-align-center spg-justify-between'>
            <div>Tolerance Level</div>
            <div>
                <InputField
                    name='toleranceLevel'
                    placeholder='Enter Value'
                    value={melResp?.toleranceLevel?.value} />
            </div>
        </div>
      </div>
      <div className="spg-col">
          <BackwardForwardButton validateOnClick={()=>{}} />
        </div>
    </div>;
  };

export default MaxLimit;