add presenttion success page

web/public/locales/en/translation.json

@@ -238,6 +238,10 @@
         "title": "Present National ID to the Company Registration Agency",
         "subTitle": "Scan the QR code with your wallet app to authenticate with your National ID in order to register your company"
       },
+      "presentationConfirmation": {
+        "title": "National ID Verified Successfully",
+        "signInSuccess": "Your national ID has been successfully presented to the company registration agency."
+      },
       "receiveCredentials": {
         "title": "Company Registered Successfully",
         "subTitle": "Your private limited company has been successfully registered. Scan the QR code with your wallet app to store your company credential."

web/src/pages/Company/PresentationConfirmation.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from 'antd';
+import useStep from '../../utils/useStep';
+import { Layout, RandomGraphicElement } from '../../components';
+import selv from '../../assets/selvBordered.svg';
+import { Trans, useTranslation } from 'react-i18next';
+import { useGlobalState } from '../../context/globalState';
+
+/**
+ * Component which will display a PresentationConfirmation.
+ */
+const PresentationConfirmation: React.FC = () => {
+    const { nextStep } = useStep();
+    const { t } = useTranslation();
+    const { state } = useGlobalState();
+
+    return (
+        <Layout>
+            <RandomGraphicElement elements={5}>
+                <div className='sign-in-confirmation'>
+                    <img src={selv} alt='Selv app logo' />
+                    <h2>{t("pages.company.presentationConfirmation.title")}</h2>
+                    <p>
+                        <Trans 
+                            i18nKey="pages.company.presentationConfirmation.signInSuccess"
+                            values={{
+                                DID: state.COMPANY_HOUSE?.connectedDID
+                            }}
+                            components={{ bold: <strong /> }}    
+                        />
+                    </p>
+                    <Link to={nextStep}>
+                        <Button>
+                            {t("actions.continue")}
+                        </Button>
+                    </Link>
+                </div>
+            </RandomGraphicElement>
+        </Layout>
+    );
+};
+
+export default PresentationConfirmation;

web/src/pages/Company/index.tsx

@@ -5,6 +5,7 @@ import CompanyDetails from './CompanyDetails';
 import Confirmation from './Confirmation';
 import ProvideData from './ProvideData';
 import ReceiveCredentials from './ReceiveCredentials';
+import PresentationConfirmation from './PresentationConfirmation';
 
 export {
     ProveIdentity,
@@ -13,5 +14,6 @@ export {
     CompanyDetails,
     Confirmation,
     ProvideData,
-    ReceiveCredentials
+    ReceiveCredentials,
+    PresentationConfirmation
 };

web/src/steps.tsx

@@ -42,6 +42,7 @@ export const routes: Route[] = [
     { path: '/:lng?/company/prove', element: <Company.ProveIdentity />, step: "company", process: "signIn", poweredBy: <Impierce /> },
     { path: '/:lng?/company/signin', element: <Company.SingInConfirmation />, step: "company", process: "signIn", poweredBy: <Impierce /> },
     { path: '/:lng?/company/provide', element: <Company.ProvideData />, step: "company", process: "presentCredential", poweredBy: <Impierce /> },
+    { path: '/:lng?/company/provided', element: <Company.PresentationConfirmation />, step: "company", process: "presentCredential", poweredBy: <Impierce /> },
     { path: '/:lng?/company/data', element: <Company.CompanyData />, step: "company", process: "offerCredential", poweredBy: <Impierce /> },
     { path: '/:lng?/company/receive', element: <Company.ReceiveCredentials />, step: "company", process: "issueCredential", poweredBy: <Impierce /> },
     { path: '/:lng?/company/confirm', element: <Company.Confirmation />, step: "company", process: "issueCredential", poweredBy: <Impierce /> },