Mocking the Company View Page

Once you click on a company name from the Search page, you’ll be redirected to the View page. This page renders a read-only version of the company form, allowing you to inspect the company’s information and its shareholders.

---

Dynamic Behavior: Tabs & Role-Based Views

Conditional Tab Rendering

You’ll notice that the Registration tab appears on the view page. This is thanks to the logic we defined in the Company Form, where the tab is displayed only when the form is not in new mode.

Role-Based Response Handling

The behavior of the view page also changes depending on the role assigned to the mock user in the app-config.jsx file.

• Company Role: The mock response contains no additional operations. The user can only view data.
• Officer Role: The mock response includes a REVIEW start operation. This enables a Review button on the top-right corner of the form, allowing the officer to begin the company review process.

---

Test the Company View

1 View as a Company User

To test this:

1. Open app-config.jsx
2. Update the mock user’s roles to only include company:

app-config.jsx

{
  ...
  "roles": [
    "company"
  ],
  ...
}

3. Open the application and navigate to the company view via the Search table.

You should see a read-only version of the form.

---

2 View as an Officer

To test as an officer:

1. Update the roles in app-config.jsx to officer:

app-config.jsx

{
  ...
  "roles": [
    "officer"
  ],
  ...
}

2. Then, update the view.json mock response in src-mock/data/view.json to include the REVIEW start operation:

view.json (simplified version shown here):

view.json

{
  "id": "959d1278-5ab4-4b54-be88-43fce057799e",
  "version": 1,
  "data": {
    "companyName": "Test Company",
    "legalForm": "LLC",
    "establishedDate": "2025-04-26",
    "capital": 12123,
    "employees": 12,
    "type": {
      "code": "IT",
      "description": "Information Technology"
    },
    "phone": "123456789",
    "email": "[email protected]",
    "vatNumber": null,
    "remark": null,
    "address": {
      "street": "67 street",
      "city": "Los Angeles",
      "state": "California",
      "zip": "12345"
    },
    "website": "testcompany.it",
    "shareholders": [
      {
        "id": "f40a683a-96df-43ea-a731-daeba18ef87f",
        "firstName": "Alice",
        "lastName": "Doe",
        "phone": "123456789",
        "email": "[email protected]",
        "shares": 500,
        "percentage": 50,
        "_eid": "f40a683a-96df-43ea-a731-daeba18ef87f"
      },
      {
        "id": "6b2f725e-5355-4899-bd00-df6ac815ed06",
        "firstName": "Bob",
        "lastName": "Doe",
        "phone": "123456789",
        "email": "[email protected]",
        "shares": 500,
        "percentage": 50,
        "_eid": "6b2f725e-5355-4899-bd00-df6ac815ed06"
      }
    ]
  },
  "metadata": {
    "states": [
      "SUBMITTED"
    ],
    "tags": [],
    "created": {
      "startOperation": "NEW",
      "operation": "SUBMIT",
      "state": "SUBMITTED",
      "user": {
        "username": "bob",
        "name": "Bob Doe"
      },
      "date": "2025-04-15",
      "dateTime": "2025-04-15T22:50:27"
    },
    "prev": {
      "startOperation": "",
      "operation": "",
      "state": "",
      "user": {
        "username": "",
        "name": ""
      },
      "date": null,
      "dateTime": null
    },
    "current": {
      "startOperation": "NEW",
      "operation": "SUBMIT",
      "state": "SUBMITTED",
      "user": {
        "username": "bob",
        "name": "Bob Doe"
      },
      "date": "2025-04-15",
      "dateTime": "2025-04-15T22:50:27"
    }
  },
  "startOperations": [
    {
      "id": "REVIEW",
      "type": "UPDATE",
      "ordinal": 2,
      "uri": "/api/v1/registration/company/start-operations/959d1278-5ab4-4b54-be88-43fce057799e/review",
      "security": {
        "mustAuthenticate": true,
        "mustAuthorize": true,
        "roles": [
          "officer"
        ],
        "scopes": [],
        "claims": []
      },
      "attributes": {}
    }
  ],
  "operations": [],
  "attributes": {}
}

3. Navigate to the view page again.

This time, you’ll see a Review button in the top-right corner.

The page remains read-only, but it’s now interactive for officer users, giving them access to the review workflow.

---

Up Next

Before we can click on the Review button, we need to set up the mock server to handle the review operation.

In the next section, we’ll explore how the review process works—allowing officers to approve or reject company registrations.