put skip button, still has to be tested in a script

src/framework/visualisation/react/ui/pages/donation_page.tsx

@@ -11,19 +11,21 @@ import {
     isPropsUIPromptQuestionnaire 
 } from '../../../../types/prompts'
 import { ReactFactoryContext } from '../../factory'
+import { ForwardButton } from '../elements/button'
 import { Title1 } from '../elements/text'
 import { Confirm } from '../prompts/confirm'
 import { ConsentForm } from '../prompts/consent_form'
 import { FileInput } from '../prompts/file_input'
 import { Questionnaire } from '../prompts/questionnaire'
 import { RadioInput } from '../prompts/radio_input'
+import { Footer } from './templates/footer'
 import { Page } from './templates/page'
 
 type Props = Weak<PropsUIPageDonation> & ReactFactoryContext
 
 export const DonationPage = (props: Props): JSX.Element => {
-  const { title } = prepareCopy(props)
-  const { locale } = props
+  const { title, forwardButton } = prepareCopy(props)
+  const { locale, resolve } = props
 
   function renderBody (props: Props): JSX.Element {
     const context = { locale: locale, resolve: props.resolve }
@@ -46,6 +48,27 @@ export const DonationPage = (props: Props): JSX.Element => {
     throw new TypeError('Unknown body type')
   }
 
+  function handleSkip (): void {
+    resolve?.({ __type__: 'PayloadFalse', value: false })
+  }
+
+  function renderFooter (): JSX.Element {
+      return <Footer
+      right={
+        <div className='flex flex-row'>
+          <div className='flex-grow' />
+          <ForwardButton label={forwardButton} onClick={handleSkip} />
+        </div>
+      } />
+  }
+
+  const footer: JSX.Element = (
+    <>
+      {renderFooter()}
+    </>
+  )
+
+
   const body: JSX.Element = (
     <>
       <Title1 text={title} />
@@ -54,9 +77,7 @@ export const DonationPage = (props: Props): JSX.Element => {
   )
 
   return (
-    <Page
-      body={body}
-    />
+    <Page body={body} footer={footer}/>
   )
 }
 

src/framework/visualisation/react/ui/pages/templates/footer.tsx

@@ -0,0 +1,26 @@
+interface FooterProps {
+  left?: JSX.Element
+  middle?: JSX.Element
+  right?: JSX.Element
+}
+
+export const Footer = ({ left, middle, right }: FooterProps): JSX.Element => {
+  return (
+    <>
+      <div className='bg-grey4 h-px' />
+      <div className='h-full flex flex-col justify-center'>
+        <div className='flex flex-row gap-4 px-14'>
+          <div className='w-1/3'>
+            {left}
+          </div>
+          <div className='w-1/3'>
+            {middle}
+          </div>
+          <div className='w-1/3'>
+            {right}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/framework/visualisation/react/ui/pages/templates/page.tsx

@@ -1,11 +1,15 @@
 interface PageProps {
   body: JSX.Element
+  footer?: JSX.Element
 }
 
 export const Page = (props: PageProps): JSX.Element => {
   return (
     <div className='w-full h-full'>
       {props.body}
+      {props.footer != null && (
+        <div className='h-footer flex-shrink-0 mt-5'>{props.footer}</div>
+      )}
     </div>
   )
 }