# User Experience V2 Migration Guide

# Step One: Upgrade the Incode Web SDK

The full UXv2 experience is available starting on [WebSDK version 1.83.0](https://developer.incode.com/docs/releases-web-sdk#/). Depending on your integration type (CDN or Package manager), you should update to the latest Web SDK version.

```html CDN( con scripttag)
 <!-- Include Incode Web SDK inside the head tag -->
  <script src="https://sdk.incode.com/sdk/onBoarding-{user.WEB_SDK_VERSION}.js" defer></script>
```
```json package.json
  "dependencies": {
    //...
    "@incodetech/welcome": "^{user.WEB_SDK_VERSION}"
  }
```

# Step Two: Replace ID capture-related methods

The new `renderCaptureId()` is a streamlined method. It incorporates the previously separate steps into a centralized  ID capture process, as shown in the image.

For example, instead of using `renderDocumentSelector()` ➔ `renderCamera("front")` ➔`renderCamera("back")`, and/or `renderCamera("passport")`, you now use only `renderCaptureId()`. All logic is handled internally. The following code shows the changes you must make for the new ID capture experience.

```javascript
// Remove all the logic and chaining of methods for:
// renderDocumentSelector()
// if id ➔ renderCamera('front') ➔ renderCamera('back')
// if passport ➔ renderCamera('passport')  

// Use the single method renderCaptureId()
incode.renderCaptureId(cameraContainer, {
  session: incodeSession,
  onSuccess: processId, // Method to call incode.processId();
  onError: showError,
  //forceIdV2: true, // Optional: To force UXv2 during development, leave it blank for production.
  //uiConfig: UiConfig, // Optional: custom theming.
});
```

## 2.1. Where are all my `options`?

<Callout icon="⚙️" theme="default">
  Previously, many parameters had to be passed with the `options` object. Now, most parameters are automatically retrieved by the **ID Capture module** in your Flow or Workflow configuration.
</Callout>

| Previous option name | New option/module configuration                               | Description                                                           |
| :------------------- | :------------------------------------------------------------ | :-------------------------------------------------------------------- |
| `onSuccess`          | No change                                                     | Callback function to be executed after a successful capture.          |
| `onError`            | No change                                                     | Callback function to be executed after a capture error.               |
| `token`              | `session`                                                     | Incode Session token.                                                 |
| `numberOfTries`      | ID Capture ➔ "Number of image capture attempts"               | Number of opportunities the user has to perform a successful capture. |
| `timeout`            | ID Capture ➔ "Autocapture Timeout" and "ID detection timeout" | Timeouts in seconds before enabling the manual capture mode.          |
| `showTutorial`       | ID Capture ➔ "ID capture tutorial"                            | Toggle on/off Incode capture tutorials.                               |
| `isRecordingEnabled` | ID Capture ➔ "Enable ID recording"                            | Records a brief video of the moment of capture.                       |

## 2.2. What happened to the `renderDocumentSelector()` method?

You can toggle the Document Selector screen by selecting the option **ID Capture ➔ "Show document chooser screen"**. You'll find this in your Flow or Workflow configuration, as shown here.

<Image align="center" border={true} src="https://files.readme.io/b45b6e0d2762d39202adb28637b459cbbff4100c21d6713f0013cf4a8ded1b6e-image.png" className="border" />

The document selector screen is optional. The new capture experience recognizes the document type and adjusts automatically. However, the screen provides a custom UI that can assist the user in capturing the passport more effectively.

<Callout icon="🚧" theme="warn">
  The `processId()` method is still required after capturing the ID document.
</Callout>

# Step Three: Replace the `renderCamera('selfie')` method

The new `renderCaptureFace()` method is a direct replacement of `renderCamera('selfie')` The following code shows the changes you must make for the new face capture experience.

```javascript
// Remove renderCamera('selfie')

// Use the method renderCaptureFace()
incode.renderCaptureFace(cameraContainer, {
  session: incodeSession,
  onSuccess: processFace, // Method to call incode.processFace();
  onError: showError,
  //forceV2: true, // Optional: To force UXv2 during development, leave it blank for production.
  //uiConfig: UiConfig, // Optional: custom theming.
});
```

## 3.1. Where are all my`options`?

<Callout icon="⚙️" theme="default">
  Previously, many parameters had to be passed with the `options` object. Now, most parameters are automatically retrieved by the **Face Capture module** in your Flow or Workflow configuration.
</Callout>

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Previous option name
      </th>

      <th>
        New option/module configuration
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `onSuccess`
      </td>

      <td>
        No change
      </td>

      <td>
        Callback function to be executed after a successful capture.
      </td>
    </tr>

    <tr>
      <td>
        `onError`
      </td>

      <td>
        No change
      </td>

      <td>
        Callback function to be executed after a capture error.
      </td>
    </tr>

    <tr>
      <td>
        `token`
      </td>

      <td>
        `session`
      </td>

      <td>
        Incode Session token.
      </td>
    </tr>

    <tr>
      <td>
        `numberOfTries`
      </td>

      <td>
        Face Capture ➔ "Number of image capture attempts"
      </td>

      <td>
        Number of opportunities the user has to make a successful capture.
      </td>
    </tr>

    <tr>
      <td>
        `timeout`
      </td>

      <td>
        Face Capture ➔ "Autocapture Timeout"
      </td>

      <td>
        Timeout in seconds before enabling the manual capture mode.
      </td>
    </tr>

    <tr>
      <td>
        `showTutorial`
      </td>

      <td>
        Face Capture ➔ "Face capture tutorial"
      </td>

      <td>
        Toggle on/off Incode capture tutorials.
      </td>
    </tr>

    <tr>
      <td>
        `isRecordingEnabled`
      </td>

      <td>
        Moved to: Face Capture ➔ "Enable face recording"
      </td>

      <td>
        Records a brief video of the moment of capture.
      </td>
    </tr>

    <tr>
      <td>
        `assistedOnboarding`
      </td>

      <td>
        Module Configuration:

        Face Capture ➔ "Assisted Onboarding"
      </td>

      <td>
        Allows the rear camera to be used for face capture instead of the front camera, enabling a second person to assist the user.
      </td>
    </tr>

    <tr>
      <td>
        `hatCheckEnabled`
      </td>

      <td>
        Face capture ➔ "Hat Validation"
      </td>

      <td>
        Enables the hat detection check.
      </td>
    </tr>

    <tr>
      <td>
        `lensesCheckEnabled`
      </td>

      <td>
        Face capture ➔ "Lenses Validation"
      </td>

      <td>
        Enables the glasses detection check.
      </td>
    </tr>

    <tr>
      <td>
        `maskCheckEnabled`
      </td>

      <td>
        Face capture ➔ "Mask Validation"
      </td>

      <td>
        Enables the face mask detection check.
      </td>
    </tr>

    <tr>
      <td>
        `eyesClosedCheckEnabled`
      </td>

      <td>
        Face capture ➔ "Closed eyes validation"
      </td>

      <td>
        Enables the closed eyes detection check.
      </td>
    </tr>
  </tbody>
</Table>

# Step Four: Call `processFace()` after

In order to complete the face capture process with the new UI/UX experience, you must call the `processFace()` method after the face capture. The following code shows the changes you must make.

```javascript
async function processFace() {
  try {
    const results = await incode.processFace(incodeSession); // {token: 'sdfsfs....sdfsdf'}
    console.log("processFace results", results);
    nextStep();
  } catch (error) {
    showError(error);
  }
}
```

# Step Five: Customization

Previously, customers who wanted to customize the capture experience used CSS classes. The new UX v2 uses **Design Tokens** as shown here.

## uiConfig

```typescript
export type UiConfig = {
  branding?: {
    logo?: { src?: string; height?: string };
    hideFooterBranding?: boolean;
  };
  closeButton?: {
    show?: boolean;
    position?: 'left' | 'right';
    offset?: number | string;
  };
  theming?: {
    designTokens?: DesignTokens
    shirtColor?: string;
  };
  notifications?: {
    minimal?: boolean;
  };
};
```

You can now customize the UI by passing an object with the value to overwrite, as shown in the following code. This allows for more direct customization while still maintaining a coherent UI.

```javascript
const UiConfig = {
  theming: {
    designTokens: {
      button: {
        primary: {
          surface: { default: '#fda9cc', hover: '#fa91bd' },
          text: { default: '#ffffff' },
        }
      },
    }
  },
};

incode.renderCaptureId(cameraContainer, {
  session: incodeSession,
  onSuccess: processId, // Method to call incode.processId();
  onError: showError,
  uiConfig: UiConfig, // Optional: custom theming.
}
```

For more information, review the [Theming](https://developer.incode.com/update/docs/theming) page.

# Step Six: Turn on the UXv2 experience

Once you've completed these changes, just turn on the new experience. To do so, set `forceIdV2` in `renderIdCapture` and `forceV2`in `renderFaceCapture` to `true`.