0

How can I create YUP JSON schema for print button in Confirmation Page,

<!--This is reveille component print icon-->
<Button tertiary>
  <Icon html={iconUtility20Printer} /> Print
</Button>

among the present YUP JSON Schema,

module.exports.confirmationApproved = [
  {
    "id": "CONFIRMATION_PAGE_HEADER",
    "section": "CONFIRMATION_APPROVED",
    "sequence": 0,
    "text": "Confirmation",
    "type": "HEADER",
    "isVisibleByDefault": true,
    "attributes": {
      "format": "h2",
      "level": "1",
      "isResponseRequired": false
    }
  },
  {<!-- here print icon should be placed -->},
  {
    "id": "APPLICATION_APPROVAL_PARAGRAPH",
    "section": "CONFIRMATION_APPROVED",
    "sequence": 25,
    "text": "We've approved your Medicare Supplement Application.",
    "type": "PARAGRAPH",
    "isVisibleByDefault": true,
    "attributes": {
      "isResponseRequired": false
    }
  },
...
];

With this array element on YUP-Formik-JSON I am able to the create the button in the page. But if I change this "type": "HEADER" to something else, it is not appearing.

 {
        "id": "APPLICATION_APPROVAL_PARAGRAPH",        
        "section": "PERSONAL_INFORMATION",
        "sequence": 1,
        "text": "Print",
        "type": "HEADER",
        "isVisibleByDefault": true,
        "attributes": {
            "format": "button",             
            "level": "1",
            "isResponseRequired": false
        }
      },

enter image description here

Here is the complete flow,-

It is the same question related to this feed - How to enable print in React application where page rendered as section under <Route>

For the <Route> for which section is rendered,

....
export const CONFIRMATION_PATH = '/confirmation';
....
return (
        <React.Fragment>
          .....
          <Route path={CONFIRMATION_PATH} render={() => <SectionPresenter section={confirmationSection} key={confirmationSection} returnToCart={props.returnToCart} openExitModal=
{props.openExitModal}/>}/>
          .....
          </React.Fragment>
         );

I do have the code here for SectionPresenter.jsx,-

    ...
        const yupSchema = Yup.object().shape(schemaShape);
        
            //should only be passing in the section that we need
            return (
                <Formik
                    onSubmit={onSubmit}
                    initialValues={initialValues}
                    validationSchema={yupSchema}
                    key={section}
                    validateOnChange={true}
                >
                    <Form>
                        <QuestionPresenter questions={sectionQuestions} key={section} />
                        {continueClicked && <ErrorSummary />}
                        <ButtonContainer setContinueClicked={setContinueClicked} continueClicked={continueClicked} returnToCart={returnToCart} openExitModal={openExitModal}/>
                        <FormikPersister name={`${section}-form`} isSessionStorage={true} />                
                    </Form>
                </Formik>
            );
export default SectionPresenter;

FormikPersister is the component

class FormikPersist extends React.Component {
...
}
const FormikPersister = connect(FormikPersist);
export default FormikPersister;

Now how can I create YUP schema for print icon in the confirmation page?

Dev Anand Sadasivam
  • 699
  • 7
  • 21
  • 49

0 Answers0