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
}
},
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?