VDX-278 Fixed KVK broken pages:

   - Information Manual Request (readonly fields);
   - Credentials Issue Request (Layout);

Author: Maikel Maas

packages/oid4vci-demo-frontend/src/components/Form/index.tsx

@@ -24,7 +24,7 @@ const evaluateDefaultValue = (field: DataFormElement, formInitData: ImmutableRec
         return fieldValue
     }
 
-    let defaultValue: FormFieldValue = formInitData?.[field.id] ?? field.defaultValue ?? ''
+    let defaultValue: FormFieldValue = formInitData?.[field.key] ?? field.defaultValue ?? ''
     if (defaultValue === '*RANDOM8') { // TODO this is for a demo, create something more sophisticated later
         defaultValue = Math.floor(Math.random() * 89999999 + 10000000)
     } else if (defaultValue === '*RANDOM-IBAN') { // TODO this is for a demo, create something more sophisticated later
@@ -67,7 +67,7 @@ const Form: FC<Props> = (props: Props): ReactElement => {
                     inlineStyle={style}
                     label={field.label ? t(field.label) ?? undefined : undefined}
                     type={field.type}
-                    readonly={field.readonly || formInitData?.[field.id] !== undefined || Boolean(field.readonlyWhenAbsentInPayload)}
+                    readonly={field.readonly || formInitData?.[field.key] !== undefined || Boolean(field.readonlyWhenAbsentInPayload)}
                     defaultValue={defaultValue}
                     customValidation={field.customValidation ? new RegExp(field.customValidation) : undefined}
                     onChange={async (value: FormFieldValue): Promise<void> => onChangeValue(value, field.key)}

packages/oid4vci-demo-frontend/src/configs/kvk.json

@@ -142,10 +142,11 @@
       "backgroundColor": "#005371"
     },
     "issueRequest": {
-      "title": "coc_qrcode_right_pane_top_title",
+      "title": "title_secure_your_credential",
       "topParagraph": "paragraph_add_credential",
       "bottomParagraph": "paragraph_scan_this_qr",
       "backgroundColor": "#005371",
+      "rightPaneHeight": "70%",
       "logo": {
         "src": "coc/logo.svg",
         "alt": "chamber of commerce logo",
@@ -167,6 +168,7 @@
       "sharing_data_right_pane_title": "coc_sharing_data_right_pane_title",
       "sharing_data_right_pane_paragraph": "coc_sharing_data_right_pane_top_paragraph",
       "backgroundColor": "#005371",
+      "primaryButtonResourceId": "Share",
       "logo": {
         "src": "coc/logo.svg",
         "alt": "chamber of commerce logo",
@@ -187,17 +189,19 @@
           {
             "id": "ssi_information_request_page_form_company_name",
             "key": "Bedrijfsnaam",
-            "title": "ssi_information_request_page_form_company_name_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_company_name_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true
           }
         ],
         [
           {
             "id": "ssi_information_request_page_form_coc_number",
             "key": "KvkNummer",
-            "title": "ssi_information_request_page_form_coc_number_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_coc_number_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true,
             "defaultValue": "*RANDOM8"
           }
@@ -206,41 +210,46 @@
           {
             "id": "ssi_information_request_page_form_company_location",
             "key": "Bedrijfslocatie",
-            "title": "ssi_information_request_page_form_company_location_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_company_location_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true
           }
         ],
         [
           {
             "id": "ssi_information_request_page_first_name_director",
             "key": "Voornaam",
-            "title": "ssi_information_request_page_form_first_name_director_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_first_name_director_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true
           },
           {
             "id": "ssi_information_request_page_form_last_name_director",
             "key": "Achternaam",
-            "title": "ssi_information_request_page_form_last_name_director_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_last_name_director_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true
           }
         ],
         [
           {
             "id": "ssi_information_request_page_form_place_of_birth",
             "key": "Geboorteplaats",
-            "title": "ssi_information_request_page_form_place_of_birth_label",
-            "type": "string",
+            "label": "ssi_information_request_page_form_place_of_birth_label",
+            "labelStyle": { "color": "#424242" },
+            "type": "text",
             "required": true
           }
         ],
         [
           {
             "id": "ssi_information_request_page_form_date_of_birth",
             "key": "Geboortedatum",
-            "title": "ssi_information_request_page_form_date_of_birth_label",
+            "label": "ssi_information_request_page_form_date_of_birth_label",
+            "labelStyle": { "color": "#424242" },
             "type": "date",
             "required": true
           }
@@ -275,6 +284,9 @@
           "id": "credentialOffer",
           "operation": "execute",
           "action": "create-credential-offer",
+          "actionParams": {
+            "issueCredentialType": "KvkInschrijving"
+          },
           "nextId": "issueRequest"
         },
         {
@@ -313,6 +325,9 @@
       "styles": {
         "mainContainer": {
           "backgroundColor": "#005371"
+        },
+        "button": {
+          "width": "327px"
         }
       }
     },

packages/oid4vci-demo-frontend/src/ecosystem/ecosystem-config.ts

@@ -216,6 +216,7 @@ export interface SSICredentialIssueRequestPageConfig extends PageConfig {
     title?: string
     topParagraph?: string
     bottomParagraph?: string
+    rightPaneHeight?: string | number
     mobile?: {
         logo?: ImageProperties
         backgroundColor?: string

packages/oid4vci-demo-frontend/src/pages/SSICredentialIssueRequestPage/index.tsx

@@ -134,8 +134,9 @@ const SSICredentialIssueRequestPage: React.FC = () => {
                     display: 'flex',
                     flexDirection: 'column',
                     justifyContent: 'space-between',
+                    ...(pageConfig.rightPaneHeight && { height: pageConfig.rightPaneHeight }),
                     ...(isNarrowScreen && {height: '100%'}),
-                    alignItems: 'center'
+                    alignItems: 'center',
                 }}>
                     <Text
                         style={{textAlign: 'center', ...(isNarrowScreen && {marginRight: 24, marginLeft: 24})}}