Wicket Platform

<script type="text/javascript">
  window.Wicket=function(doc,tag,id,script){
    var w=window.Wicket||{};if(doc.getElementById(id))return w;var ref=doc.getElementsByTagName(tag)[0];var js=doc.createElement(tag);js.id=id;js.src=script;ref.parentNode.insertBefore(js,ref);w._q=[];w.ready=function(f){w._q.push(f)};return w
  }(document,"script","wicket-widgets","https://<tenant-admin-url>/dist/widgets.js");  
</script>

Wicket.ready(function () {
  Wicket.widgets.createOnboarding({
    
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createSubscriptionOnboarding({
    apiRoot: tenantApiEndpoint,
    accessToken: token,
    personId: personId,
    lang: "en",
    billingProduct: {
      type: "fusebill_products",
      id: "d6a52028-9297-4970-832e-afbaa4579298"
    },
    fusebillPlanFrequencyId: "1234",
    rootEl: widgetRoot
  }).then(function (widget) {
    widget.listen(widget.eventTypes.STEP_CHANGED, function (payload) {
      console.log(`Step changed from ${payload.from} to ${payload.to}`);
    });

    widget.listenOnce(widget.eventTypes.COMPLETED, function (payload) {
      // completedSubscriptionId is a JSON API type / id which can be used with the wicket API
      var completedSubscriptionId = payload.completedSubscriptionId;
      window.location = "/account-centre/order-thank-you?subscription_id=" + completedSubscriptionId.id;

      // To render a thank you message client side, the widget can be fully cleared from the page by using:
      // widget.clear()
    });
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createPersonProfile({
    accessToken: clientToken,
    apiRoot: apiRoot,
    personId: "abcd-1234-efgh-5678",
    lang: "en",
    extraFields: ["personType"],
    rootEl: widgetRoot
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createPersonProfile({
    accessToken: clientToken,
    apiRoot: apiRoot,
    personId: "abcd-1234-efgh-5678",
    lang: "en",
    fields: {
      personType: { hidden: false },
      jobTitle: { hidden: true },
      givenName: { readOnly: true, required: true },
      familyName: { readOnly: true, required: true },
    },
    sections: {
      webAddresses: { hidden: true },
    },
    rootEl: widgetRoot
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  // Only show these 3 fields, in this order
  Wicket.widgets.createPersonProfile({
    accessToken: clientToken,
    apiRoot: apiRoot,
    personId: "abcd-1234-efgh-5678",
    lang: "en",
    fields: [
      { name: "givenName", required: true },
      { name: "familyName", required: true },
      { name: "jobTitle" },
    ],
    strictFields: true,
    rootEl: widgetRoot
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createPersonProfile({
    loadIcons: true,
    accessToken: clientToken,
    apiRoot: apiRoot,
    personId: "abcd-1234-efgh-5678",
    lang: "en",
    extraFields: ["personType"]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log("save success:", payload);
    });
    widget.listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
      console.log("delete success:", payload);
    });
  });
});
WIDGET_LOADED / SAVE_SUCCESS payload:
{
  resource: {
     id: "abc-1234",
     type: "people"
  },
  attributes: {
    uuid: "xyz-0987-abc-1234",
    givenName: "Jane"
    familyName: "Doe",
    ...attributes
  }, // on save, this object will pertain to the resource being saved
  addresses: [ // if the saved resource type is not "people",
     { // a `person` user object will exist with the entities below
       id: 'add-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'addresses'
     }
  ],
  emails: [
     {
       id: 'ema-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'emails'
     }
  ],
  phones: [
     {
       id: 'pho-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'phones'
     }
  ],
  webAddresses: [
     {
       id: 'web-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'web_addresses'
     }
  ],
  incompleteRequiredFields: [ "givenName" ], // array of required field keys with null values
  incompleteRequiredResources: [], // array of any missing required additional resources as specified in the `options.requiredResources`
  notFound: [ "missingKey" ] // array of required field keys that could not be located
}

DELETE_SUCCESS payload:
{
  deletedResource: {
    id: "qwerty-5678",
    type: "addresses"
  },
  resource: {
    id: "abc-1234",
    type: "people",
    attributes: { ...attributes }
  },
  incompleteRequiredResources: [] // array of any missing required additional resources as specified in the `options.requiredResources`
}

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editOrganizationProfile({
    loadIcons: false,
    apiRoot: apiRoot,
    accessToken: accessToken,
    orgId: "xyz-1234",
    lang: "en",
    hiddenFields: ["type"],
    extraFields: ["parentOrganization"],
    rootEl: widgetRoot
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editOrganizationProfile({
    apiRoot: apiRoot,
    accessToken: accessToken,
    orgId: "xyz-1234",
    lang: "en",
    fields: {
      legalName: { readOnly: true },
      type: { hidden: true },
    },
    sections: {
      emails: { hidden: true },
    },
    rootEl: widgetRoot
  });
});

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editOrganizationProfile({
    loadIcons: false,
    apiRoot: apiRoot,
    accessToken: accessToken,
    orgId: "xyz-1234"
    lang: "en",
    hiddenFields: ["type"],
    extraFields: ["parentOrganization"]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log("save success:", payload);
    });
    widget.listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
      console.log("delete success:", payload);
    });
  });
});

WIDGET_LOADED / SAVE_SUCCESS payload:
{
  resource: {
     id: "xyz-9876",
     type: "organizations"
  },
  attributes: {
    uuid: "xyz-0987-abc-1234",
    legalName: "Organization Name"
    alternateName: "Organization",
    ...attributes
  },
  addresses: [
     {
       id: 'add-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'addresses'
     }
  ],
  emails: [
     {
       id: 'ema-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'emails'
     }
  ],
  phones: [
     {
       id: 'pho-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'phones'
     }
  ],
  webAddresses: [
     {
       id: 'web-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'web_addresses'
     }
  ],
  incompleteRequiredFields: [ "description" ], // array of required field keys with null values
  incompleteRequiredResources: [], // array of any missing required additional resources as specified in the `options.requiredResources`
  notFound: [ "missingKey" ] // array of required field keys that could not be located
}

DELETE_SUCCESS payload:
{
  deletedResource: {
    id: "qwerty-5678",
    type: "addresses"
  },
  resource: {
     id: "xyz-9876",
     type: "organizations",
     attributes: { ...attributes }
  },
  incompleteRequiredResources: [] // array of any missing required additional resources as specified in the `options.requiredResources`
}

Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editAdditionalInfo({
    loadIcons: false,
    apiRoot,
    accessToken: clientToken,
    resource: { type: "people", id: personContext.id },
    lang: "en",
    // If schemas are not provided, the widget default to show all schemas.
    schemas: [
       { slug: 'slug-for-json-schema' },
       { slug: 'slug-for-json-schema', resourceSlug: 'slug-for-json-schema-resource' },

       // Schema will be inferred when providing only the resource override
       { resourceSlug: 'slug-for-json-schema-resource', showAsRequired: true },

       // Legacy, initialize using id (different between environments)
       { id: "abc-1234", showAsRequired: true },
       { id: "xyz-7890", resourceId: "res-6789" }
    ]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log(`Schema ID ${payload.resource.id} updated with values ${payload.updatedDataField.value}`);
    });
  });
});

WIDGET_LOADED payload:

{
  resource: {
     id: "abc-1234",
     type: "people"
  },
 dataFields: [ // array of data fields in widget with user data provided
     {
       $schema: "schemaIdOne",
       key: "schemaKeyOne",
       valid: true,
       value: {
         fieldOneKey: fieldOneValue,
         fieldTwoKey: fieldTwoValue
       },
       version: 1
     },
     {
       $schema: "schemaIdTwo",
       key: "schemaKeyTwo",
       valid: true,
       value: {
         fieldOneKey: fieldOneValue,
         fieldTwoKey: fieldTwoValue
       },
       version: 1
     }
  ],
  validation: [ // array of errors including incomplete required fields
     {
       id: "schemaIdTwo",
       key: "schemaKeyTwo"
       errors: [
         {
           message: "is a required property",
           params: { missingProperty: 'email' },
           property: ".email"
         },
         {
           message: "should be equal to one of the allowed values",
           params: { allowedValues: ['cat', 'dog'] },
           property: ".animal"
         }
       ]
     }
  ],
  invalid: [ // array of schema IDs failing validation on save
     { id: "schemaIdOne" }
  ],
  notFound: [ // array of requested schema IDs that have no data or could not be located
    { id: "schemaId404" }
  ]
}

SAVE_SUCCESS payload:

{
  resource: {
     id: "abc-1234",
     type: "people"
  },
  dataField: { // the updated data field
     $schema: "schemaIdOne",
     key: "schemaKey",
     valid: true,
     value: {
       fieldOneKey: fieldOneValue,
       fieldTwoKey: fieldTwoValue
     },
     version: 1
  },
  dataFields: [ ...dataFields ],
  validation: [ ...validation ],
  invalid: [ ...invalid ],
  notFound: [ ...notFound ]
}