File: src\internal\ui\caseManagement\createCaseComponent.ts
/// <reference path="../../packages.ts" />
/// <reference path="../constants.ts" />
/// <reference path="constants.ts" />
/// <reference path="createCaseConfig.ts" />
/**
* @module UI
* @submodule UI CaseManagement
* @namespace ui.caseManagement.createCase
*/
namespace internal.ui.caseManagement.createCase {
const DEFAULT_CASE_CREATION_PATH = "commercial/cases/create";
/**
* Render the case management case creation UI.
* @method render
* @static
* @param {CreateCaseConfig} config A {{#crossLink "CreateCaseConfig"}}{{/crossLink}} object that contains options for rendering the create case user interface
* @param {ui.UIInfo} [config.uiInfo] A {{#crossLink "ui.UIInfo"}}{{/crossLink}} object
* @param {ui.HostType} [config.uiInfo.type] A value in {{#crossLink "ui.HostType"}}{{/crossLink}} which indicates the type of UI to render e.g. IFRAME, POPUP.
* @param {String} [config.uiInfo.containerSelector] Only required for iframe -- a JQuery selector statement to define the element into which the iframe will be loaded
* @param {Number} [config.uiInfo.height] The height of the rendered UI
* @param {Number} [config.uiInfo.width] The width of the rendered UI
* @return {Promise} A promise that resolves to when the component has successfully loaded the user interface
* @example
*
* // Render caseManagement as a iframe.
* // More UIInfo examples available {{#crossLink "ui.UIInfo"}}here{{/crossLink}}
* var uiInfo = {
* type: {{#crossLink "ui.HostType"}}MsSupportSdk.ui.HostType.IFRAME{{/crossLink}},
* containerSelector: Iframe container selector
* };
* // Pass user information through encrypted auth token.
* // user information can be encrypted through Secury Context Pass (previously named Delegated Auth)
* // user information includes [{ name: 'cid', value: '0123459' }, { name: 'authType', value: AAD }, { name: 'jarvisId', value: '02132123'}, { name: 'firstName', value: 'Tom' }, { name: "lastName", value: "Hanks" },
* // { name: "displayName", value: "Tom Hanks" }, { name: "email", value: "tomhanks@sample.com" }, { name: "countryCode", value: "us" }, { name: "timeZoneId", value: "Pacific Standard Time" }]
* // cid: Unique customer id from authentication. for MSA it's PUID in Hexadecimal.
* // javrvisId: Unique userId from Jarvis service by converting from MSA PUID or AAD TID/OID
* // countryCode: The country the customer is receiving support in. The expected format is the country 2-letter ISO name (see RegionInfo class)
* // timeZoneId: The time zone is used to specify actual time zone of contact on the case. The expected format complies with TimeZoneId (see TimeZoneInfo class)
* var authInfo = {
* type: {{#crossLink "ui.AuthType"}}MsSupportSdk.ui.AuthType.DELEGATED{{/crossLink}},
* token: encrypted user authentication information.
* };
*
* // Create a {{#crossLink "ui.caseManagement.Config"}}caseManagement config{{/crossLink}}
* var config = {
* uiInfo: uiInfo,
* authInfo: authInfo,
* locale: "en-us", // All parameters down to here are required
* sapId: "7bc2893c-807e-14f2-8fa4-29e57ad3549e", // Optional. Default is empty. used to identify which product and support category this issue is for
* entitlementId: "012345678", // Optional. Default is empty. used for idenfitying which entitlement is used to create case
* preview: false, // Optional. Default is false. Used for preview unpublished compass data
* envrionment: MsSupportSdk.ui.virtualAgent.Environment.PRODUCTION, // Optional environment, use DEV for testing
* includedWorkflowSteps: [internal.ui.caseManagement.WorkflowStep.FORM]
* onCaseSubmitted: function(data) {
* if (data.caseId) {
* console.log("Case created: " + data.caseId);
* }
* else {
* console.log("Case creation failed. Error message: " + data.errorMessage);
* }
* }
* onSubmittingCase: function() {
* // client handling on submitting case
* }
* onWorkflowLoaded: function() {
* // client handling on workflow loaded
* }
* };
*
* // Render CaseManagement UI
* MsSupportSdk.ui.caseManagement.render(config).then(
* function() {
* console.log("Case management rendered successfully.");
* },
* function(err) {
* console.log(err.message);
* });
*/
export function render(config: CreateCaseConfig): JQueryPromise<any> {
return ui.renderComponent(CreateCaseComponent, config, CASEMANAGEMENT_COMPONENT);
}
/**
* @class ui.caseManagement.createCase
*/
export class CreateCaseComponent extends UIComponent {
constructor(config: CreateCaseConfig) {
if (!config || !(config.locale && config.sapId && config.entitlementId)) {
throw new Error("You must pass locale and a SAP Id and entitlement Id when creating a case management component.");
}
super(config, LOAD_TIMEOUT_MS, REPORT_HEIGHT_CHANGE);
}
public getComponentUrl(): string {
return this.getCreateCaseUrl(<CreateCaseConfig>this.config);
}
public getComponentSdk(): ComponentSDK {
return {};
}
public getXframeProxyUrl(): string {
return getCaseXFrameProxyUrl(this.getComponentUrl());
}
private getCreateCaseUrl(config: CreateCaseConfig): string {
let values: any = {};
if (config[CASE_SAP_ID] && utils.isString(config[CASE_SAP_ID])) {
values[CASE_SAP_ID] = config[CASE_SAP_ID];
}
if (config[CASE_ENTITLEMENT_ID] && utils.isString(config[CASE_ENTITLEMENT_ID])) {
values[CASE_ENTITLEMENT_ID] = config[CASE_ENTITLEMENT_ID];
}
if (config[CASE_INCLUDED_WORKFLOW_STEPS] && utils.isArray(config[CASE_INCLUDED_WORKFLOW_STEPS])) {
values[CASE_INCLUDED_WORKFLOW_STEPS] = config[CASE_INCLUDED_WORKFLOW_STEPS].join();
}
if (config[CASE_PREVIEW] && utils.isBoolean(config[CASE_PREVIEW])) {
values[CASE_PREVIEW] = config[CASE_PREVIEW];
}
if (config[CASE_HIDE_FORM_HEADERS] && utils.isBoolean(config[CASE_HIDE_FORM_HEADERS])) {
values[CASE_HIDE_FORM_HEADERS] = config[CASE_HIDE_FORM_HEADERS];
}
values[CASE_NOCHROME] = true;
if (config[CASE_LOCALE] && utils.isString(config[CASE_LOCALE])) {
return utils.appendParams(`https://${getCaseBaseUrl(config)}/${config[CASE_LOCALE]}/${DEFAULT_CASE_CREATION_PATH}`, values);
}
else {
return utils.appendParams(`https://${getCaseBaseUrl(config)}/${DEFAULT_CASE_CREATION_PATH}`, values);
}
}
}
}