Feature - Support addition of custom steps in UIConfig flows

[BossBele]

Description

I would like to be able to add a custom and not a predefined flow step when initializing web SDK. This should make use of the components available such as image, input etc.

Alternatives

No alternative explored.

Does the feature have an issue or an open Canny ticket

N

If the feature request is approved, would you be willing to submit a PR

N

Examples and references

const ballerineInitConfig = {
  uiConfig: {
    general: {
      colors: {
        primary: '#1155cc',
      },
      fonts: {
        /*Change the font name to "Courier New", click Run, and see the how the font changes */
        name: 'Nunito',
        link: 'https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap',
        weight: [400, 500, 700, 800],
      },
      translations: {
      },
    },
    flows: {
      'my-kyc-flow': {
        steps: [
          { 
            name: 'welcome',
            id: 'welcome',
          },
          { 
            name: 'customs',
            id: 'customs',
            // EXAMPLE STEP
            elements: [
                  {
          "type": "image",
          "props": {
              "style": {
                  "margin": "8px auto",
                  "flex-grow": 1
              },
              "attributes": {
                  "src": "https://cdn.ballerine.io/ui-packs/default/images/welcome.svg",
                  "alt": "welcome",
                  "width": "248px",
                  "height": "212px"
              }
          }
      },
    {
        "type": "input",
        "props": {}
    },
    {
        "type": "button",
        "props": {}
    },
            ]
          },
          {
            name: 'document-selection',
            id: 'document-selection',
            documentOptions: ['id_card', 'drivers_license', 'passport'],
          },
          {
            name: 'loading',
            id: 'loading',
          },
          {
            name: 'final',
            id: 'final',
          },
        ],
      },
  },
  translations: {
  },
  endUserInfo: { id: 'test-id' },
  backendConfig: {},
};

[alonp99]

Hey @BossBele, to help us define the solution better - can you describe steps you would like to implement with the config?
cc @nitzanballerine

[alonp99]

Added to the roadmap. closing