From 0c135b7844c6ba6ba12156abaa5e11e3201a8758 Mon Sep 17 00:00:00 2001 From: clement Date: Fri, 7 Jul 2023 10:38:52 +0200 Subject: [PATCH 1/4] feat(*): added callbacks to init and start commands --- .../screeb-sdk-angular-example/src/main.ts | 6 + .../screeb-sdk-angular/docs/classes/Screeb.md | 80 ++- .../docs/classes/ScreebConfig.md | 9 + .../docs/classes/ScreebModule.md | 17 +- .../src/lib/screeb-config.ts | 8 +- .../src/lib/screeb.module.ts | 14 +- .../screeb-sdk-angular/src/lib/screeb.ts | 33 +- .../screeb-sdk-browser-example/src/App.svelte | 166 ++--- packages/screeb-sdk-browser/docs/README.md | 594 ++++++++++++++++-- packages/screeb-sdk-browser/src/index.ts | 316 +++++++++- .../screeb-sdk-react-example/src/main.tsx | 6 + packages/screeb-sdk-react/docs/README.md | 1 + packages/screeb-sdk-react/src/provider.tsx | 18 +- packages/screeb-sdk-react/src/types.ts | 3 + 14 files changed, 1090 insertions(+), 181 deletions(-) diff --git a/packages/screeb-sdk-angular-example/src/main.ts b/packages/screeb-sdk-angular-example/src/main.ts index 7b8cca4..c26be63 100644 --- a/packages/screeb-sdk-angular-example/src/main.ts +++ b/packages/screeb-sdk-angular-example/src/main.ts @@ -17,6 +17,12 @@ bootstrapApplication(AppComponent, { importProvidersFrom( ScreebModule.forRoot({ autoInit: true, + hooks: { + onReady: (payload) => { + // eslint-disable-next-line no-console + console.log("SDK is ready", payload); + }, + }, userId: "dev@screeb.app", userProperties: { authenticated: true, diff --git a/packages/screeb-sdk-angular/docs/classes/Screeb.md b/packages/screeb-sdk-angular/docs/classes/Screeb.md index 176fa33..fd90ec1 100644 --- a/packages/screeb-sdk-angular/docs/classes/Screeb.md +++ b/packages/screeb-sdk-angular/docs/classes/Screeb.md @@ -40,8 +40,8 @@ #### Parameters -| Name | Type | -| :------ | :------ | +| Name | Type | +| :------- | :-------------------------------- | | `config` | [`ScreebConfig`](ScreebConfig.md) | ## Properties @@ -117,10 +117,10 @@ ___ #### Parameters -| Name | Type | Default value | -| :------ | :------ | :------ | -| `functionName` | `string` | `undefined` | -| `onlyLoaded` | `boolean` | `false` | +| Name | Type | Default value | +| :------------- | :-------- | :------------ | +| `functionName` | `string` | `undefined` | +| `onlyLoaded` | `boolean` | `false` | #### Returns @@ -155,9 +155,9 @@ this.screeb.eventTrack( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `eventName` | `string` | The event name. | +| Name | Type | Description | +| :----------------- | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `eventName` | `string` | The event name. | | `eventProperties?` | `PropertyRecord` | The properties of your event. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -190,9 +190,9 @@ this.screeb.identity( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `userId` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :---------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `userId` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -253,10 +253,10 @@ this.screeb.identityGroupAssign( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `groupName` | `string` | | -| `groupType?` | `string` | | +| Name | Type | Description | +| :----------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `groupName` | `string` | | +| `groupType?` | `string` | | | `groupProperties?` | `PropertyRecord` | The properties of your user group. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -279,9 +279,9 @@ this.screeb.identityGroupUnassign('company', 'Apple'); #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `groupName` | `string` | The name of your user group. | +| Name | Type | Description | +| :----------- | :------- | :--------------------------- | +| `groupName` | `string` | The name of your user group. | | `groupType?` | `string` | The type of your user group. | #### Returns @@ -322,8 +322,8 @@ this.screeb.identityProperties( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | +| Name | Type | Description | +| :--------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `userProperties` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -353,7 +353,7 @@ ___ ### init -▸ **init**(`websiteId`, `userId?`, `userProperties?`): `Promise`<`unknown`\> +▸ **init**(`websiteId`, `userId?`, `userProperties?`, `hooks?`): `Promise`<`unknown`\> Initializes Screeb tag. @@ -369,17 +369,23 @@ this.screeb.init( plan: '', last_seen_at: new Date(), authenticated: true - } + }, + { + onReady: (payload) => { + console.log("SDK is ready", payload); + }, + }, ); ``` #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `websiteId` | `string` | Your website/channel id. | -| `userId?` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :---------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `websiteId` | `string` | Your website/channel id. | +| `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | +| `hooks?` | `GlobalHooks` | - | #### Returns @@ -425,7 +431,7 @@ ___ ### surveyStart -▸ **surveyStart**(`surveyId`, `allowMultipleResponses`, `hiddenFields`): `Promise`<`unknown`\> +▸ **surveyStart**(`surveyId`, `allowMultipleResponses`, `hiddenFields`, `hooks?`): `Promise`<`unknown`\> Starts a survey by its ID. @@ -438,17 +444,23 @@ this.screeb.surveyStart( { color: "green", article_id: 42 - } + }, + { + onSurveyShowed: (payload) => { + console.log("Survey showed", payload); + }, + }, ); ``` #### Parameters -| Name | Type | -| :------ | :------ | -| `surveyId` | `string` | -| `allowMultipleResponses` | `boolean` | -| `hiddenFields` | `PropertyRecord` | +| Name | Type | +| :----------------------- | :--------------- | +| `surveyId` | `string` | +| `allowMultipleResponses` | `boolean` | +| `hiddenFields` | `PropertyRecord` | +| `hooks?` | `SurveyHooks` | #### Returns diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md b/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md index 9af4f68..4c7bf2e 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md @@ -13,6 +13,7 @@ Configuration of Screeb module ### Properties - [autoInit](ScreebConfig.md#autoinit) +- [hooks](ScreebConfig.md#hooks) - [options](ScreebConfig.md#options) - [shouldLoad](ScreebConfig.md#shouldload) - [userId](ScreebConfig.md#userid) @@ -39,6 +40,14 @@ if `true`, 'init' does not need to be called manually ___ +### hooks + +• `Optional` **hooks**: `GlobalHooks` + +Hooks to define callback for various event + +___ + ### options • `Optional` **options**: `ScreebOptions` diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md index 2e75e72..ef40cf4 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md @@ -20,10 +20,10 @@ #### Parameters -| Name | Type | -| :------ | :------ | +| Name | Type | +| :------- | :-------------------------------- | | `config` | [`ScreebConfig`](ScreebConfig.md) | -| `screeb` | [`Screeb`](Screeb.md) | +| `screeb` | [`Screeb`](Screeb.md) | ## Methods @@ -46,14 +46,19 @@ ScreebModule.forRoot({ plan: '', last_seen_at: new Date(), authenticated: true - } + }, + { + onReady: (payload) => { + console.log("SDK is ready", payload); + }, + }, }) ``` #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | +| Name | Type | Description | +| :------- | :-------------------------------- | :------------------------------------------ | | `config` | [`ScreebConfig`](ScreebConfig.md) | Configuration to pass to Screeb browser SDK | #### Returns diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts index c5f318c..bf46063 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts @@ -1,5 +1,9 @@ import { Injectable } from "@angular/core"; -import { PropertyRecord, ScreebOptions } from "@screeb/sdk-browser"; +import { + GlobalHooks, + PropertyRecord, + ScreebOptions, +} from "@screeb/sdk-browser"; /** Configuration of Screeb module */ @Injectable({ providedIn: "root" }) @@ -10,6 +14,8 @@ export class ScreebConfig { userId?: string; /** The properties of your user. */ userProperties?: PropertyRecord; + /** Hooks to define callback for various event */ + hooks?: GlobalHooks; /** * Indicates if Screeb should be automatically loaded. * This will ping to the Screeb servers. diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts index b935e03..591545f 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts @@ -22,7 +22,12 @@ export class ScreebModule { * plan: '', * last_seen_at: new Date(), * authenticated: true - * } + * }, + * { + * onReady: (payload) => { + * console.log("SDK is ready", payload); + * }, + * }, * }) * ``` */ @@ -42,7 +47,12 @@ export class ScreebModule { } if ((config.autoInit ?? false) && config.websiteId) { - screeb.init(config.websiteId, config.userId, config.userProperties); + screeb.init( + config.websiteId, + config.userId, + config.userProperties, + config.hooks + ); } } } diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts index 490a0ab..eda10a5 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts @@ -159,13 +159,13 @@ export class Screeb { * ```ts * console.log(await this.screeb.identityGet()); * // { + * // channel_id: "", * // anonymous_id: "", * // user_id: "", + * // is_ready: true, * // session_id: "", * // session_start: "2023-05-04T16:30:15.882Z", * // session_end: "2023-05-04T17:02:09.087Z", - * // channel_id: "", - * // is_ready: true, * // } * ``` */ @@ -309,18 +309,29 @@ export class Screeb { * { * color: "green", * article_id: 42 - * } + * }, + * { + * onSurveyShowed: (payload) => { + * console.log("Survey showed", payload); + * }, + * }, * ); * ``` */ public async surveyStart( surveyId: string, allowMultipleResponses: boolean, - hiddenFields: _Screeb.PropertyRecord + hiddenFields: _Screeb.PropertyRecord, + hooks?: _Screeb.SurveyHooks ) { await this.ensureScreeb("surveyStart"); - return _Screeb.surveyStart(surveyId, allowMultipleResponses, hiddenFields); + return _Screeb.surveyStart( + surveyId, + allowMultipleResponses, + hiddenFields, + hooks + ); } /** @@ -388,20 +399,26 @@ export class Screeb { * plan: '', * last_seen_at: new Date(), * authenticated: true - * } + * }, + * { + * onReady: (payload) => { + * console.log("SDK is ready", payload); + * }, + * }, * ); * ``` */ public async init( websiteId: string, userId?: string, - userProperties?: _Screeb.PropertyRecord + userProperties?: _Screeb.PropertyRecord, + hooks?: _Screeb.GlobalHooks ) { await this.ensureScreeb("init", true); this.isInitialized = true; - return await _Screeb.init(websiteId, userId, userProperties); + return await _Screeb.init(websiteId, userId, userProperties, hooks); } /** diff --git a/packages/screeb-sdk-browser-example/src/App.svelte b/packages/screeb-sdk-browser-example/src/App.svelte index 7f6d43c..6af0675 100644 --- a/packages/screeb-sdk-browser-example/src/App.svelte +++ b/packages/screeb-sdk-browser-example/src/App.svelte @@ -1,96 +1,106 @@
- This is the Screeb.app logo -

Hello you!

+ This is the Screeb.app logo +

Hello you!

-

Welcome aboard!

-

- Visit our - - Developer documentation - - to learn how to integrate - Screeb. -

+

Welcome aboard!

+

+ Visit our + + Developer documentation + + to learn how to integrate + Screeb. +

diff --git a/packages/screeb-sdk-browser/docs/README.md b/packages/screeb-sdk-browser/docs/README.md index 6c2f545..0a0a2d6 100644 --- a/packages/screeb-sdk-browser/docs/README.md +++ b/packages/screeb-sdk-browser/docs/README.md @@ -6,11 +6,47 @@ ### Type Aliases +- [GlobalHooks](README.md#globalhooks) +- [HookType](README.md#hooktype) - [PropertyRecord](README.md#propertyrecord) - [PropertyType](README.md#propertytype) +- [QuestionAnswerPair](README.md#questionanswerpair) +- [ResponseAnswer](README.md#responseanswer) +- [ResponseAnswerValue](README.md#responseanswervalue) +- [ResponseAnswerValueBoolean](README.md#responseanswervalueboolean) +- [ResponseAnswerValueNone](README.md#responseanswervaluenone) +- [ResponseAnswerValueNumber](README.md#responseanswervaluenumber) +- [ResponseAnswerValueString](README.md#responseanswervaluestring) +- [ResponseAnswerValueTime](README.md#responseanswervaluetime) +- [ResponseHook](README.md#responsehook) +- [ResponseHookSDKReady](README.md#responsehooksdkready) +- [ResponseHookSurveyCompleted](README.md#responsehooksurveycompleted) +- [ResponseHookSurveyHidden](README.md#responsehooksurveyhidden) +- [ResponseHookSurveyReplied](README.md#responsehooksurveyreplied) +- [ResponseHookSurveyShowed](README.md#responsehooksurveyshowed) +- [ResponseHookSurveyStarted](README.md#responsehooksurveystarted) +- [ResponseQuestion](README.md#responsequestion) +- [ResponseQuestionActionButton](README.md#responsequestionactionbutton) +- [ResponseQuestionActionInput](README.md#responsequestionactioninput) +- [ResponseQuestionActionInputValidation](README.md#responsequestionactioninputvalidation) +- [ResponseQuestionActionLink](README.md#responsequestionactionlink) +- [ResponseQuestionActionRange](README.md#responsequestionactionrange) +- [ResponseQuestionActionScoring](README.md#responsequestionactionscoring) +- [ResponseQuestionActionSkip](README.md#responsequestionactionskip) +- [ResponseQuestionCTA](README.md#responsequestioncta) +- [ResponseQuestionCTAAppStoreRating](README.md#responsequestionctaappstorerating) +- [ResponseQuestionCTAChoices](README.md#responsequestionctachoices) +- [ResponseQuestionCTAInput](README.md#responsequestionctainput) +- [ResponseQuestionCTANone](README.md#responsequestionctanone) +- [ResponseQuestionCTARange](README.md#responsequestionctarange) +- [ResponseQuestionCTAScores](README.md#responsequestionctascores) +- [ResponseQuestionMessage](README.md#responsequestionmessage) +- [ResponseQuestionMessageText](README.md#responsequestionmessagetext) +- [ResponseStatus](README.md#responsestatus) - [ScreebIdentityGetReturn](README.md#screebidentitygetreturn) - [ScreebObject](README.md#screebobject) - [ScreebOptions](README.md#screeboptions) +- [SurveyHooks](README.md#surveyhooks) ### Functions @@ -33,6 +69,20 @@ ## Type Aliases +### GlobalHooks + +Ƭ **GlobalHooks**: { [key in HookType \| "onReady"]?: Function } + +___ + +### HookType + +Ƭ **HookType**: ``"onSurveyShowed"`` \| ``"onSurveyStarted"`` \| ``"onQuestionReplied"`` \| ``"onSurveyCompleted"`` \| ``"onSurveyHidden"`` + +Hooks + +___ + ### PropertyRecord Ƭ **PropertyRecord**: `Object` @@ -53,6 +103,446 @@ This is property types that are supported by Screeb. ___ +### QuestionAnswerPair + +Ƭ **QuestionAnswerPair**: `Object` + +#### Type declaration + +| Name | Type | +| :--------- | :----------------------------------------------- | +| `answer?` | [`ResponseAnswer`](README.md#responseanswer) | +| `question` | [`ResponseQuestion`](README.md#responsequestion) | + +___ + +### ResponseAnswer + +Ƭ **ResponseAnswer**: `Object` + +#### Type declaration + +| Name | Type | +| :------------ | :------------------------------------------------------- | +| `created_at` | `Date` | +| `id` | `string` | +| `question_id` | `string` | +| `values` | [`ResponseAnswerValue`](README.md#responseanswervalue)[] | + +___ + +### ResponseAnswerValue + +Ƭ **ResponseAnswerValue**: [`ResponseAnswerValueNone`](README.md#responseanswervaluenone) \| [`ResponseAnswerValueString`](README.md#responseanswervaluestring) \| [`ResponseAnswerValueNumber`](README.md#responseanswervaluenumber) \| [`ResponseAnswerValueBoolean`](README.md#responseanswervalueboolean) \| [`ResponseAnswerValueTime`](README.md#responseanswervaluetime) + +Answer + +___ + +### ResponseAnswerValueBoolean + +Ƭ **ResponseAnswerValueBoolean**: `ResponseAnswerValueAbstract` & { `type`: ``"boolean"`` ; `value_boolean`: `boolean` } + +___ + +### ResponseAnswerValueNone + +Ƭ **ResponseAnswerValueNone**: `ResponseAnswerValueAbstract` & { `type`: ``"none"`` } + +___ + +### ResponseAnswerValueNumber + +Ƭ **ResponseAnswerValueNumber**: `ResponseAnswerValueAbstract` & { `type`: ``"number"`` ; `value_number`: `number` } + +___ + +### ResponseAnswerValueString + +Ƭ **ResponseAnswerValueString**: `ResponseAnswerValueAbstract` & { `type`: ``"string"`` ; `value_string`: `string` } + +___ + +### ResponseAnswerValueTime + +Ƭ **ResponseAnswerValueTime**: `ResponseAnswerValueAbstract` & { `type`: ``"time"`` ; `value_time`: `Date` } + +___ + +### ResponseHook + +Ƭ **ResponseHook**: `Object` + +#### Type declaration + +| Name | Type | +| :------------------ | :--------------------------------------------------------------------- | +| `onQuestionReplied` | [`ResponseHookSurveyReplied`](README.md#responsehooksurveyreplied) | +| `onReady` | [`ResponseHookSDKReady`](README.md#responsehooksdkready) | +| `onSurveyCompleted` | [`ResponseHookSurveyCompleted`](README.md#responsehooksurveycompleted) | +| `onSurveyHidden` | [`ResponseHookSurveyHidden`](README.md#responsehooksurveyhidden) | +| `onSurveyShowed` | [`ResponseHookSurveyShowed`](README.md#responsehooksurveyshowed) | +| `onSurveyStarted` | [`ResponseHookSurveyStarted`](README.md#responsehooksurveystarted) | + +___ + +### ResponseHookSDKReady + +Ƭ **ResponseHookSDKReady**: `Object` + +#### Type declaration + +| Name | Type | +| :------------------ | :-------------------------------------------------- | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseHookSurveyCompleted + +Ƭ **ResponseHookSurveyCompleted**: `Object` + +#### Type declaration + +| Name | Type | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | +| `response` | { `id`: `string` } | +| `response.id` | `string` | +| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | +| `survey.id` | `string` | +| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | +| `survey.survey_position` | `number` | +| `survey.survey_size` | `number` | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseHookSurveyHidden + +Ƭ **ResponseHookSurveyHidden**: `Object` + +#### Type declaration + +| Name | Type | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | +| `response` | { `hide_reason`: [`ResponseStatus`](README.md#responsestatus) ; `id`: `string` } | +| `response.hide_reason` | [`ResponseStatus`](README.md#responsestatus) | +| `response.id` | `string` | +| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | +| `survey.id` | `string` | +| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | +| `survey.survey_position` | `number` | +| `survey.survey_size` | `number` | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseHookSurveyReplied + +Ƭ **ResponseHookSurveyReplied**: `Object` + +#### Type declaration + +| Name | Type | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | +| `response` | { `id`: `string` ; `status`: [`ResponseStatus`](README.md#responsestatus) } | +| `response.id` | `string` | +| `response.status` | [`ResponseStatus`](README.md#responsestatus) | +| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | +| `survey.id` | `string` | +| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | +| `survey.survey_position` | `number` | +| `survey.survey_size` | `number` | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseHookSurveyShowed + +Ƭ **ResponseHookSurveyShowed**: `Object` + +#### Type declaration + +| Name | Type | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | +| `response` | { `id`: `string` } | +| `response.id` | `string` | +| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | +| `survey.id` | `string` | +| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | +| `survey.survey_position` | `number` | +| `survey.survey_size` | `number` | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseHookSurveyStarted + +Ƭ **ResponseHookSurveyStarted**: `Object` + +#### Type declaration + +| Name | Type | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| `response` | { `id`: `string` } | +| `response.id` | `string` | +| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | +| `survey.id` | `string` | +| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | +| `survey.survey_position` | `number` | +| `survey.survey_size` | `number` | +| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | +| `user.anonymous_id` | `string` | +| `user.user_id` | `string` | + +___ + +### ResponseQuestion + +Ƭ **ResponseQuestion**: `Object` + +#### Type declaration + +| Name | Type | +| :--------------- | :------------------------------------------------------------------- | +| `call_to_action` | [`ResponseQuestionCTA`](README.md#responsequestioncta) | +| `ends` | `boolean` | +| `id` | `string` | +| `messages` | [`ResponseQuestionMessage`](README.md#responsequestionmessage)[] | +| `skip_action?` | [`ResponseQuestionActionSkip`](README.md#responsequestionactionskip) | + +___ + +### ResponseQuestionActionButton + +Ƭ **ResponseQuestionActionButton**: `Object` + +Action + +#### Type declaration + +| Name | Type | +| :-------------- | :------------------------------------------------------------ | +| `id` | `string` | +| `payload` | { `emoji`: `string` ; `label`: `string` ; `url?`: `string` } | +| `payload.emoji` | `string` | +| `payload.label` | `string` | +| `payload.url?` | `string` | +| `type` | ``"button"`` | + +___ + +### ResponseQuestionActionInput + +Ƭ **ResponseQuestionActionInput**: `Object` + +#### Type declaration + +| Name | Type | +| :------------------- | :------------------------------------------------------------------------------------------------------------ | +| `id` | `string` | +| `payload` | { `validation`: [`ResponseQuestionActionInputValidation`](README.md#responsequestionactioninputvalidation) } | +| `payload.validation` | [`ResponseQuestionActionInputValidation`](README.md#responsequestionactioninputvalidation) | +| `type` | ``"text_input"`` | + +___ + +### ResponseQuestionActionInputValidation + +Ƭ **ResponseQuestionActionInputValidation**: ``"text"`` \| ``"email"`` + +___ + +### ResponseQuestionActionLink + +Ƭ **ResponseQuestionActionLink**: `Object` + +#### Type declaration + +| Name | Type | +| :-------------- | :------------------------------------------------------------ | +| `id` | `string` | +| `payload` | { `emoji`: `string` ; `label`: `string` ; `link`: `string` } | +| `payload.emoji` | `string` | +| `payload.label` | `string` | +| `payload.link` | `string` | +| `type` | ``"link"`` | + +___ + +### ResponseQuestionActionRange + +Ƭ **ResponseQuestionActionRange**: `Object` + +#### Type declaration + +| Name | Type | +| :------------------- | :--------------------------------------------------------------------------------------- | +| `id` | `string` | +| `payload` | { `emoji`: `string` ; `max`: `number` ; `min`: `number` ; `validation`: ``"min_max"`` } | +| `payload.emoji` | `string` | +| `payload.max` | `number` | +| `payload.min` | `number` | +| `payload.validation` | ``"min_max"`` | +| `type` | ``"number_input"`` | + +___ + +### ResponseQuestionActionScoring + +Ƭ **ResponseQuestionActionScoring**: `Object` + +#### Type declaration + +| Name | Type | +| :-------------- | :----------------------------------------- | +| `id` | `string` | +| `payload` | { `emoji`: `string` ; `value`: `number` } | +| `payload.emoji` | `string` | +| `payload.value` | `number` | +| `type` | ``"scoring"`` | + +___ + +### ResponseQuestionActionSkip + +Ƭ **ResponseQuestionActionSkip**: `Object` + +#### Type declaration + +| Name | Type | +| :-------- | :--------- | +| `id` | `string` | +| `payload` | `any` | +| `type` | ``"skip"`` | + +___ + +### ResponseQuestionCTA + +Ƭ **ResponseQuestionCTA**: [`ResponseQuestionCTANone`](README.md#responsequestionctanone) \| [`ResponseQuestionCTAChoices`](README.md#responsequestionctachoices) \| [`ResponseQuestionCTAScores`](README.md#responsequestionctascores) \| [`ResponseQuestionCTAInput`](README.md#responsequestionctainput) \| [`ResponseQuestionCTARange`](README.md#responsequestionctarange) \| [`ResponseQuestionCTAAppStoreRating`](README.md#responsequestionctaappstorerating) + +___ + +### ResponseQuestionCTAAppStoreRating + +Ƭ **ResponseQuestionCTAAppStoreRating**: `Object` + +#### Type declaration + +| Name | Type | +| :----- | :-------------------- | +| `type` | ``"appstore_rating"`` | + +___ + +### ResponseQuestionCTAChoices + +Ƭ **ResponseQuestionCTAChoices**: `Object` + +#### Type declaration + +| Name | Type | +| :-------- | :------------------------------------------------------------------------- | +| `choices` | [`ResponseQuestionActionButton`](README.md#responsequestionactionbutton)[] | +| `type` | ``"multiple_choice"`` \| ``"pmf"`` \| ``"link"`` | + +___ + +### ResponseQuestionCTAInput + +Ƭ **ResponseQuestionCTAInput**: `Object` + +#### Type declaration + +| Name | Type | +| :------ | :--------------------------------------------------------------------- | +| `input` | [`ResponseQuestionActionInput`](README.md#responsequestionactioninput) | +| `type` | ``"input"`` | + +___ + +### ResponseQuestionCTANone + +Ƭ **ResponseQuestionCTANone**: `Object` + +CTA + +#### Type declaration + +| Name | Type | +| :----- | :--------- | +| `type` | ``"none"`` | + +___ + +### ResponseQuestionCTARange + +Ƭ **ResponseQuestionCTARange**: `Object` + +#### Type declaration + +| Name | Type | +| :------ | :--------------------------------------------------------------------- | +| `range` | [`ResponseQuestionActionRange`](README.md#responsequestionactionrange) | +| `type` | ``"range"`` | + +___ + +### ResponseQuestionCTAScores + +Ƭ **ResponseQuestionCTAScores**: `Object` + +#### Type declaration + +| Name | Type | +| :------- | :--------------------------------------------------------------------------- | +| `scores` | [`ResponseQuestionActionScoring`](README.md#responsequestionactionscoring)[] | +| `type` | ``"scoring"`` \| ``"nps"`` \| ``"ces"`` \| ``"csat"`` | + +___ + +### ResponseQuestionMessage + +Ƭ **ResponseQuestionMessage**: { `id`: `string` } & [`ResponseQuestionMessageText`](README.md#responsequestionmessagetext) + +___ + +### ResponseQuestionMessageText + +Ƭ **ResponseQuestionMessageText**: `Object` + +Messages + +#### Type declaration + +| Name | Type | +| :----- | :--------- | +| `text` | `string` | +| `type` | ``"text"`` | + +___ + +### ResponseStatus + +Ƭ **ResponseStatus**: ``"started"`` \| ``"ended"`` \| ``"closed"`` \| ``"interrupted"`` + +___ + ### ScreebIdentityGetReturn Ƭ **ScreebIdentityGetReturn**: `Object` @@ -61,15 +551,15 @@ This is the object returned by the function `identityGet()`. #### Type declaration -| Name | Type | Description | -| :------ | :------ | :------ | -| `anonymous_id` | `string` | Anonymous id given to each user | -| `channel_id` | `string` | The current channel id with which the tag was initialized | -| `is_ready` | `boolean` | `true` if the tag us loaded, initialized and ready to rock | -| `session_end` | `string` | The current user session end time | -| `session_id` | `string` | The current user session id | -| `session_start` | `string` | The current user session start time | -| `user_id` | `string` | The authenticated id assigned to the user. | +| Name | Type | Description | +| :-------------- | :-------- | :--------------------------------------------------------- | +| `channel_id` | `string` | The current channel id with which the tag was initialized | +| `anonymous_id` | `string` | Anonymous id given to each user | +| `user_id` | `string` | The authenticated id assigned to the user. | +| `is_ready` | `boolean` | `true` if the tag us loaded, initialized and ready to rock | +| `session_id` | `string` | The current user session id | +| `session_start` | `string` | The current user session start time | +| `session_end` | `string` | The current user session end time | ___ @@ -89,10 +579,16 @@ This is the Screeb tag options object. #### Type declaration -| Name | Type | Description | -| :------ | :------ | :------ | -| `screebEndpoint?` | `string` | Please don't do this. | -| `window?` | `Window` | If you're running Screeb tag in an iframe, please set the inner window here. | +| Name | Type | Description | +| :---------------- | :------- | :--------------------------------------------------------------------------- | +| `screebEndpoint?` | `string` | Please don't do this. | +| `window?` | `Window` | If you're running Screeb tag in an iframe, please set the inner window here. | + +___ + +### SurveyHooks + +Ƭ **SurveyHooks**: { [key in HookType]?: Function } ## Functions @@ -182,9 +678,9 @@ Screeb.eventTrack( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `eventName` | `string` | The event name. | +| Name | Type | Description | +| :----------------- | :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `eventName` | `string` | The event name. | | `eventProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your event. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -219,9 +715,9 @@ Screeb.identity( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `userId` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :---------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `userId` | `string` | The unique identifier of your user. | | `userProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -286,10 +782,10 @@ Screeb.identityGroupAssign( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `groupName` | `string` | | -| `groupType?` | `string` | | +| Name | Type | Description | +| :----------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `groupName` | `string` | | +| `groupType?` | `string` | | | `groupProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user group. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -314,9 +810,9 @@ Screeb.identityGroupUnassign('company', 'Apple'); #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `groupName` | `string` | The name of your user group. | +| Name | Type | Description | +| :----------- | :------- | :--------------------------- | +| `groupName` | `string` | The name of your user group. | | `groupType?` | `string` | The type of your user group. | #### Returns @@ -359,8 +855,8 @@ Screeb.identityProperties( #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | +| Name | Type | Description | +| :--------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `userProperties` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -392,7 +888,7 @@ ___ ### init -▸ **init**(`websiteId`, `userId?`, `userProperties?`): `void` \| `Promise`<`unknown`\> +▸ **init**(`websiteId`, `userId?`, `userProperties?`, `hooks?`): `void` \| `Promise`<`unknown`\> Initializes Screeb tag. @@ -410,17 +906,23 @@ Screeb.init( plan: '', last_seen_at: new Date(), authenticated: true - } + }, + { + onReady: (payload) => { + console.log("SDK is ready", payload); + }, + }, ); ``` #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | -| `websiteId` | `string` | Your website/channel id. | -| `userId?` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :---------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `websiteId` | `string` | Your website/channel id. | +| `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | +| `hooks?` | [`GlobalHooks`](README.md#globalhooks) | Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden or when a question is replied. | #### Returns @@ -466,8 +968,8 @@ Screeb.load(); #### Parameters -| Name | Type | Description | -| :------ | :------ | :------ | +| Name | Type | Description | +| :-------- | :----------------------------------------- | :--------------------- | | `options` | [`ScreebOptions`](README.md#screeboptions) | Screeb module options. | #### Returns @@ -498,7 +1000,7 @@ ___ ### surveyStart -▸ **surveyStart**(`surveyId`, `allowMultipleResponses?`, `hiddenFields?`): `void` \| `Promise`<`unknown`\> +▸ **surveyStart**(`surveyId`, `allowMultipleResponses?`, `hiddenFields?`, `hooks?`): `void` \| `Promise`<`unknown`\> Starts a survey by its ID. @@ -513,17 +1015,23 @@ Screeb.surveyStart( { color: "green", article_id: 42 - } + }, + { + onSurveyShowed: (payload) => { + console.log("Survey showed", payload); + }, + }, ); ``` #### Parameters -| Name | Type | Default value | -| :------ | :------ | :------ | -| `surveyId` | `string` | `undefined` | -| `allowMultipleResponses` | `boolean` | `true` | -| `hiddenFields` | [`PropertyRecord`](README.md#propertyrecord) | `{}` | +| Name | Type | Default value | +| :----------------------- | :---------------------------------------------------- | :------------ | +| `surveyId` | `string` | `undefined` | +| `allowMultipleResponses` | `boolean` | `true` | +| `hiddenFields` | [`PropertyRecord`](README.md#propertyrecord) | `{}` | +| `hooks` | `undefined` \| [`SurveyHooks`](README.md#surveyhooks) | `undefined` | #### Returns diff --git a/packages/screeb-sdk-browser/src/index.ts b/packages/screeb-sdk-browser/src/index.ts index 039809e..a57f835 100644 --- a/packages/screeb-sdk-browser/src/index.ts +++ b/packages/screeb-sdk-browser/src/index.ts @@ -6,6 +6,298 @@ export type PropertyRecord = { [key: string]: PropertyType | PropertyType[]; }; +/** + * Action + */ +export type ResponseQuestionActionButton = { + id: string; + type: "button"; + payload: { + emoji: string; + label: string; + url?: string; + }; +}; + +export type ResponseQuestionActionLink = { + id: string; + type: "link"; + payload: { + emoji: string; + label: string; + link: string; + }; +}; + +export type ResponseQuestionActionScoring = { + id: string; + type: "scoring"; + payload: { + emoji: string; + value: number; + }; +}; + +export type ResponseQuestionActionInputValidation = "text" | "email"; + +export type ResponseQuestionActionInput = { + id: string; + type: "text_input"; + payload: { + validation: ResponseQuestionActionInputValidation; + }; +}; + +export type ResponseQuestionActionRange = { + id: string; + type: "number_input"; + payload: { + validation: "min_max"; + min: number; + max: number; + emoji: string; + }; +}; + +/** + * CTA + */ +export type ResponseQuestionCTANone = { + type: "none"; +}; + +export type ResponseQuestionCTAChoices = { + type: "multiple_choice" | "pmf" | "link"; + choices: ResponseQuestionActionButton[]; +}; + +export type ResponseQuestionCTAScores = { + type: "scoring" | "nps" | "ces" | "csat"; + scores: ResponseQuestionActionScoring[]; +}; + +export type ResponseQuestionCTAInput = { + type: "input"; + input: ResponseQuestionActionInput; +}; + +export type ResponseQuestionCTARange = { + type: "range"; + range: ResponseQuestionActionRange; +}; + +export type ResponseQuestionCTAAppStoreRating = { + type: "appstore_rating"; +}; + +export type ResponseQuestionCTA = + | ResponseQuestionCTANone + | ResponseQuestionCTAChoices + | ResponseQuestionCTAScores + | ResponseQuestionCTAInput + | ResponseQuestionCTARange + | ResponseQuestionCTAAppStoreRating; + +/** + * Answer + */ +export type ResponseAnswerValue = + | ResponseAnswerValueNone + | ResponseAnswerValueString + | ResponseAnswerValueNumber + | ResponseAnswerValueBoolean + | ResponseAnswerValueTime; + +export type ResponseAnswerValueNone = ResponseAnswerValueAbstract & { + type: "none"; +}; + +export type ResponseAnswerValueString = ResponseAnswerValueAbstract & { + type: "string"; + value_string: string; +}; + +export type ResponseAnswerValueNumber = ResponseAnswerValueAbstract & { + type: "number"; + value_number: number; +}; + +export type ResponseAnswerValueBoolean = ResponseAnswerValueAbstract & { + type: "boolean"; + value_boolean: boolean; +}; + +export type ResponseAnswerValueTime = ResponseAnswerValueAbstract & { + type: "time"; + value_time: Date; +}; + +type ResponseAnswerValueAbstract = { + action_id: string; +}; + +export type ResponseAnswer = { + id: string; + question_id: string; + values: ResponseAnswerValue[]; + created_at: Date; +}; + +export type ResponseQuestionActionSkip = { + id: string; + type: "skip"; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + payload: any; +}; + +/** + * Messages + */ +export type ResponseQuestionMessageText = { + type: "text"; + text: string; +}; + +export type ResponseQuestionMessage = { + id: string; +} & ResponseQuestionMessageText; + +export type ResponseQuestion = { + id: string; + messages: ResponseQuestionMessage[]; + call_to_action: ResponseQuestionCTA; + skip_action?: ResponseQuestionActionSkip; + ends: boolean; +}; + +export type QuestionAnswerPair = { + question: ResponseQuestion; + answer?: ResponseAnswer; +}; + +export type ResponseStatus = "started" | "ended" | "closed" | "interrupted"; + +/** + * Hooks + */ +export type HookType = + | "onSurveyShowed" + | "onSurveyStarted" + | "onQuestionReplied" + | "onSurveyCompleted" + | "onSurveyHidden"; + +export type ResponseHookSurveyShowed = { + survey: { + id: string; + survey_position: number; + survey_size: number; + survey_format: "conversationnal" | "cards" | undefined; + }; + response: { + id: string; + }; + user: { + anonymous_id: string; + user_id: string; + }; + items: QuestionAnswerPair[]; +}; + +export type ResponseHookSDKReady = { + user: { + anonymous_id: string; + user_id: string; + }; +}; + +export type ResponseHookSurveyStarted = { + survey: { + id: string; + survey_position: number; + survey_size: number; + survey_format: "conversationnal" | "cards" | undefined; + }; + response: { + id: string; + }; + user: { + anonymous_id: string; + user_id: string; + }; +}; + +export type ResponseHookSurveyHidden = { + survey: { + id: string; + survey_position: number; + survey_size: number; + survey_format: "conversationnal" | "cards" | undefined; + }; + response: { + id: string; + hide_reason: ResponseStatus; + }; + user: { + anonymous_id: string; + user_id: string; + }; + items: QuestionAnswerPair[]; +}; + +export type ResponseHookSurveyReplied = { + survey: { + id: string; + survey_position: number; + survey_size: number; + survey_format: "conversationnal" | "cards" | undefined; + }; + response: { + id: string; + status: ResponseStatus; + }; + user: { + anonymous_id: string; + user_id: string; + }; + items: QuestionAnswerPair[]; +}; + +export type ResponseHookSurveyCompleted = { + survey: { + id: string; + survey_position: number; + survey_size: number; + survey_format: "conversationnal" | "cards" | undefined; + }; + response: { + id: string; + }; + user: { + anonymous_id: string; + user_id: string; + }; + items: QuestionAnswerPair[]; +}; + +export type ResponseHook = { + onReady: ResponseHookSDKReady; + onSurveyShowed: ResponseHookSurveyShowed; + onSurveyStarted: ResponseHookSurveyStarted; + onQuestionReplied: ResponseHookSurveyReplied; + onSurveyCompleted: ResponseHookSurveyCompleted; + onSurveyHidden: ResponseHookSurveyHidden; +}; + +export type GlobalHooks = { + // eslint-disable-next-line no-unused-vars + [key in HookType | "onReady"]?: (payload: ResponseHook[key]) => void; +}; +export type SurveyHooks = { + // eslint-disable-next-line no-unused-vars + [key in HookType]?: (payload: ResponseHook[key]) => void; +}; + /** This is the Screeb tag options object. */ export type ScreebOptions = { /** If you're running Screeb tag in an iframe, please set the inner window here. */ @@ -119,6 +411,8 @@ export const load = (options: ScreebOptions = {}) => * - No more than 1000 attributes * - Supported types for values: string, number, boolean and Date * ``` + * @param hooks Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden + * or when a question is replied. * * @example * ```ts @@ -133,19 +427,26 @@ export const load = (options: ScreebOptions = {}) => * plan: '', * last_seen_at: new Date(), * authenticated: true - * } + * }, + * { + * onReady: (payload) => { + * console.log("SDK is ready", payload); + * }, + * }, * ); * ``` */ export const init = ( websiteId: string, userId?: string, - userProperties?: PropertyRecord + userProperties?: PropertyRecord, + hooks?: GlobalHooks ) => { let identityObject; if (userId || userProperties) { identityObject = { + hooks: hooks, identity: { id: userId, properties: userProperties, @@ -435,18 +736,25 @@ export const surveyClose = () => callScreebCommand("survey.close"); * { * color: "green", * article_id: 42 - * } + * }, + * { + * onSurveyShowed: (payload) => { + * console.log("Survey showed", payload); + * }, + * }, * ); * ``` */ export const surveyStart = ( surveyId: string, allowMultipleResponses = true, - hiddenFields: PropertyRecord = {} + hiddenFields: PropertyRecord = {}, + hooks: SurveyHooks | undefined = undefined ) => callScreebCommand("survey.start", surveyId, { allow_multiple_responses: allowMultipleResponses, hidden_fields: hiddenFields, + hooks: hooks, }); /** diff --git a/packages/screeb-sdk-react-example/src/main.tsx b/packages/screeb-sdk-react-example/src/main.tsx index 0372f52..d0effcf 100644 --- a/packages/screeb-sdk-react-example/src/main.tsx +++ b/packages/screeb-sdk-react-example/src/main.tsx @@ -18,6 +18,12 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( lastname: "Smith", org_size: 20, }} + hooks={{ + onReady: (payload) => { + // eslint-disable-next-line no-console + console.log("onReady", payload); + }, + }} > diff --git a/packages/screeb-sdk-react/docs/README.md b/packages/screeb-sdk-react/docs/README.md index eeabec2..e8072fd 100644 --- a/packages/screeb-sdk-react/docs/README.md +++ b/packages/screeb-sdk-react/docs/README.md @@ -472,6 +472,7 @@ Properties of Screeb provider | Name | Type | Description | | :------ | :------ | :------ | +| `hooks?` | `GlobalHooks` | Hooks to define callback for various event | | `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. | | `websiteId` | `string` | Your website/channel id. | diff --git a/packages/screeb-sdk-react/src/provider.tsx b/packages/screeb-sdk-react/src/provider.tsx index 6589db1..9ad4dc8 100644 --- a/packages/screeb-sdk-react/src/provider.tsx +++ b/packages/screeb-sdk-react/src/provider.tsx @@ -14,6 +14,7 @@ export const ScreebProvider: React.FC< websiteId, userId, userProperties, + hooks, children, shouldLoad = !isSSR, autoInit = false, @@ -140,13 +141,14 @@ export const ScreebProvider: React.FC< async ( websiteId: string, userId?: string, - userProperties?: Screeb.PropertyRecord + userProperties?: Screeb.PropertyRecord, + hooks?: Screeb.GlobalHooks ) => { await ensureScreeb( "init", () => { if (!isInitialized) { - Screeb.init(websiteId, userId, userProperties); + Screeb.init(websiteId, userId, userProperties, hooks); isInitialized = true; } @@ -166,7 +168,7 @@ export const ScreebProvider: React.FC< if (autoInit) { if (websiteId) { - await init(websiteId, userId, userProperties); + await init(websiteId, userId, userProperties, hooks); } else { logger.log( "warn", @@ -188,10 +190,16 @@ export const ScreebProvider: React.FC< async ( surveyId: string, allowMultipleResponses: boolean, - hiddenFields: Screeb.PropertyRecord + hiddenFields: Screeb.PropertyRecord, + hooks?: Screeb.SurveyHooks ) => await ensureScreeb("surveyStart", () => - Screeb.surveyStart(surveyId, allowMultipleResponses, hiddenFields) + Screeb.surveyStart( + surveyId, + allowMultipleResponses, + hiddenFields, + hooks + ) ), [] ); diff --git a/packages/screeb-sdk-react/src/types.ts b/packages/screeb-sdk-react/src/types.ts index 4c94e27..8bb3752 100644 --- a/packages/screeb-sdk-react/src/types.ts +++ b/packages/screeb-sdk-react/src/types.ts @@ -1,5 +1,6 @@ /* eslint-disable no-unused-vars */ import { + GlobalHooks, PropertyRecord, ScreebIdentityGetReturn, ScreebOptions, @@ -13,6 +14,8 @@ export type ScreebProps = { userId?: string; /** The properties of your user. */ userProperties?: PropertyRecord; + /** Hooks to define callback for various event */ + hooks?: GlobalHooks; }; /** From 567153b24209652060114be1fcc96cfbb5e1a6f4 Mon Sep 17 00:00:00 2001 From: clement Date: Fri, 21 Jul 2023 09:41:41 +0200 Subject: [PATCH 2/4] fix(*): remove types for hooks --- .../screeb-sdk-angular-example/src/main.ts | 2 +- .../screeb-sdk-angular/docs/classes/Screeb.md | 68 +-- .../docs/classes/ScreebModule.md | 10 +- packages/screeb-sdk-browser/docs/README.md | 555 ++---------------- packages/screeb-sdk-browser/src/index.ts | 283 +-------- .../screeb-sdk-react-example/src/main.tsx | 3 +- 6 files changed, 88 insertions(+), 833 deletions(-) diff --git a/packages/screeb-sdk-angular-example/src/main.ts b/packages/screeb-sdk-angular-example/src/main.ts index c26be63..f54e5d4 100644 --- a/packages/screeb-sdk-angular-example/src/main.ts +++ b/packages/screeb-sdk-angular-example/src/main.ts @@ -18,7 +18,7 @@ bootstrapApplication(AppComponent, { ScreebModule.forRoot({ autoInit: true, hooks: { - onReady: (payload) => { + onReady: (payload: any) => { // eslint-disable-next-line no-console console.log("SDK is ready", payload); }, diff --git a/packages/screeb-sdk-angular/docs/classes/Screeb.md b/packages/screeb-sdk-angular/docs/classes/Screeb.md index fd90ec1..a5a7488 100644 --- a/packages/screeb-sdk-angular/docs/classes/Screeb.md +++ b/packages/screeb-sdk-angular/docs/classes/Screeb.md @@ -40,8 +40,8 @@ #### Parameters -| Name | Type | -| :------- | :-------------------------------- | +| Name | Type | +| :------ | :------ | | `config` | [`ScreebConfig`](ScreebConfig.md) | ## Properties @@ -117,10 +117,10 @@ ___ #### Parameters -| Name | Type | Default value | -| :------------- | :-------- | :------------ | -| `functionName` | `string` | `undefined` | -| `onlyLoaded` | `boolean` | `false` | +| Name | Type | Default value | +| :------ | :------ | :------ | +| `functionName` | `string` | `undefined` | +| `onlyLoaded` | `boolean` | `false` | #### Returns @@ -155,9 +155,9 @@ this.screeb.eventTrack( #### Parameters -| Name | Type | Description | -| :----------------- | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `eventName` | `string` | The event name. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `eventName` | `string` | The event name. | | `eventProperties?` | `PropertyRecord` | The properties of your event. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -190,9 +190,9 @@ this.screeb.identity( #### Parameters -| Name | Type | Description | -| :---------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `userId` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `userId` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -212,13 +212,13 @@ Retrieves the current user identity. ```ts console.log(await this.screeb.identityGet()); // { +// channel_id: "", // anonymous_id: "", // user_id: "", +// is_ready: true, // session_id: "", // session_start: "2023-05-04T16:30:15.882Z", // session_end: "2023-05-04T17:02:09.087Z", -// channel_id: "", -// is_ready: true, // } ``` @@ -253,10 +253,10 @@ this.screeb.identityGroupAssign( #### Parameters -| Name | Type | Description | -| :----------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `groupName` | `string` | | -| `groupType?` | `string` | | +| Name | Type | Description | +| :------ | :------ | :------ | +| `groupName` | `string` | | +| `groupType?` | `string` | | | `groupProperties?` | `PropertyRecord` | The properties of your user group. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -279,9 +279,9 @@ this.screeb.identityGroupUnassign('company', 'Apple'); #### Parameters -| Name | Type | Description | -| :----------- | :------- | :--------------------------- | -| `groupName` | `string` | The name of your user group. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `groupName` | `string` | The name of your user group. | | `groupType?` | `string` | The type of your user group. | #### Returns @@ -322,8 +322,8 @@ this.screeb.identityProperties( #### Parameters -| Name | Type | Description | -| :--------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Name | Type | Description | +| :------ | :------ | :------ | | `userProperties` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -380,12 +380,12 @@ this.screeb.init( #### Parameters -| Name | Type | Description | -| :---------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `websiteId` | `string` | Your website/channel id. | -| `userId?` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `websiteId` | `string` | Your website/channel id. | +| `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | -| `hooks?` | `GlobalHooks` | - | +| `hooks?` | `GlobalHooks` | - | #### Returns @@ -455,12 +455,12 @@ this.screeb.surveyStart( #### Parameters -| Name | Type | -| :----------------------- | :--------------- | -| `surveyId` | `string` | -| `allowMultipleResponses` | `boolean` | -| `hiddenFields` | `PropertyRecord` | -| `hooks?` | `SurveyHooks` | +| Name | Type | +| :------ | :------ | +| `surveyId` | `string` | +| `allowMultipleResponses` | `boolean` | +| `hiddenFields` | `PropertyRecord` | +| `hooks?` | `SurveyHooks` | #### Returns diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md index ef40cf4..77ce6cf 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md @@ -20,10 +20,10 @@ #### Parameters -| Name | Type | -| :------- | :-------------------------------- | +| Name | Type | +| :------ | :------ | | `config` | [`ScreebConfig`](ScreebConfig.md) | -| `screeb` | [`Screeb`](Screeb.md) | +| `screeb` | [`Screeb`](Screeb.md) | ## Methods @@ -57,8 +57,8 @@ ScreebModule.forRoot({ #### Parameters -| Name | Type | Description | -| :------- | :-------------------------------- | :------------------------------------------ | +| Name | Type | Description | +| :------ | :------ | :------ | | `config` | [`ScreebConfig`](ScreebConfig.md) | Configuration to pass to Screeb browser SDK | #### Returns diff --git a/packages/screeb-sdk-browser/docs/README.md b/packages/screeb-sdk-browser/docs/README.md index 0a0a2d6..7d305fe 100644 --- a/packages/screeb-sdk-browser/docs/README.md +++ b/packages/screeb-sdk-browser/docs/README.md @@ -10,39 +10,6 @@ - [HookType](README.md#hooktype) - [PropertyRecord](README.md#propertyrecord) - [PropertyType](README.md#propertytype) -- [QuestionAnswerPair](README.md#questionanswerpair) -- [ResponseAnswer](README.md#responseanswer) -- [ResponseAnswerValue](README.md#responseanswervalue) -- [ResponseAnswerValueBoolean](README.md#responseanswervalueboolean) -- [ResponseAnswerValueNone](README.md#responseanswervaluenone) -- [ResponseAnswerValueNumber](README.md#responseanswervaluenumber) -- [ResponseAnswerValueString](README.md#responseanswervaluestring) -- [ResponseAnswerValueTime](README.md#responseanswervaluetime) -- [ResponseHook](README.md#responsehook) -- [ResponseHookSDKReady](README.md#responsehooksdkready) -- [ResponseHookSurveyCompleted](README.md#responsehooksurveycompleted) -- [ResponseHookSurveyHidden](README.md#responsehooksurveyhidden) -- [ResponseHookSurveyReplied](README.md#responsehooksurveyreplied) -- [ResponseHookSurveyShowed](README.md#responsehooksurveyshowed) -- [ResponseHookSurveyStarted](README.md#responsehooksurveystarted) -- [ResponseQuestion](README.md#responsequestion) -- [ResponseQuestionActionButton](README.md#responsequestionactionbutton) -- [ResponseQuestionActionInput](README.md#responsequestionactioninput) -- [ResponseQuestionActionInputValidation](README.md#responsequestionactioninputvalidation) -- [ResponseQuestionActionLink](README.md#responsequestionactionlink) -- [ResponseQuestionActionRange](README.md#responsequestionactionrange) -- [ResponseQuestionActionScoring](README.md#responsequestionactionscoring) -- [ResponseQuestionActionSkip](README.md#responsequestionactionskip) -- [ResponseQuestionCTA](README.md#responsequestioncta) -- [ResponseQuestionCTAAppStoreRating](README.md#responsequestionctaappstorerating) -- [ResponseQuestionCTAChoices](README.md#responsequestionctachoices) -- [ResponseQuestionCTAInput](README.md#responsequestionctainput) -- [ResponseQuestionCTANone](README.md#responsequestionctanone) -- [ResponseQuestionCTARange](README.md#responsequestionctarange) -- [ResponseQuestionCTAScores](README.md#responsequestionctascores) -- [ResponseQuestionMessage](README.md#responsequestionmessage) -- [ResponseQuestionMessageText](README.md#responsequestionmessagetext) -- [ResponseStatus](README.md#responsestatus) - [ScreebIdentityGetReturn](README.md#screebidentitygetreturn) - [ScreebObject](README.md#screebobject) - [ScreebOptions](README.md#screeboptions) @@ -103,446 +70,6 @@ This is property types that are supported by Screeb. ___ -### QuestionAnswerPair - -Ƭ **QuestionAnswerPair**: `Object` - -#### Type declaration - -| Name | Type | -| :--------- | :----------------------------------------------- | -| `answer?` | [`ResponseAnswer`](README.md#responseanswer) | -| `question` | [`ResponseQuestion`](README.md#responsequestion) | - -___ - -### ResponseAnswer - -Ƭ **ResponseAnswer**: `Object` - -#### Type declaration - -| Name | Type | -| :------------ | :------------------------------------------------------- | -| `created_at` | `Date` | -| `id` | `string` | -| `question_id` | `string` | -| `values` | [`ResponseAnswerValue`](README.md#responseanswervalue)[] | - -___ - -### ResponseAnswerValue - -Ƭ **ResponseAnswerValue**: [`ResponseAnswerValueNone`](README.md#responseanswervaluenone) \| [`ResponseAnswerValueString`](README.md#responseanswervaluestring) \| [`ResponseAnswerValueNumber`](README.md#responseanswervaluenumber) \| [`ResponseAnswerValueBoolean`](README.md#responseanswervalueboolean) \| [`ResponseAnswerValueTime`](README.md#responseanswervaluetime) - -Answer - -___ - -### ResponseAnswerValueBoolean - -Ƭ **ResponseAnswerValueBoolean**: `ResponseAnswerValueAbstract` & { `type`: ``"boolean"`` ; `value_boolean`: `boolean` } - -___ - -### ResponseAnswerValueNone - -Ƭ **ResponseAnswerValueNone**: `ResponseAnswerValueAbstract` & { `type`: ``"none"`` } - -___ - -### ResponseAnswerValueNumber - -Ƭ **ResponseAnswerValueNumber**: `ResponseAnswerValueAbstract` & { `type`: ``"number"`` ; `value_number`: `number` } - -___ - -### ResponseAnswerValueString - -Ƭ **ResponseAnswerValueString**: `ResponseAnswerValueAbstract` & { `type`: ``"string"`` ; `value_string`: `string` } - -___ - -### ResponseAnswerValueTime - -Ƭ **ResponseAnswerValueTime**: `ResponseAnswerValueAbstract` & { `type`: ``"time"`` ; `value_time`: `Date` } - -___ - -### ResponseHook - -Ƭ **ResponseHook**: `Object` - -#### Type declaration - -| Name | Type | -| :------------------ | :--------------------------------------------------------------------- | -| `onQuestionReplied` | [`ResponseHookSurveyReplied`](README.md#responsehooksurveyreplied) | -| `onReady` | [`ResponseHookSDKReady`](README.md#responsehooksdkready) | -| `onSurveyCompleted` | [`ResponseHookSurveyCompleted`](README.md#responsehooksurveycompleted) | -| `onSurveyHidden` | [`ResponseHookSurveyHidden`](README.md#responsehooksurveyhidden) | -| `onSurveyShowed` | [`ResponseHookSurveyShowed`](README.md#responsehooksurveyshowed) | -| `onSurveyStarted` | [`ResponseHookSurveyStarted`](README.md#responsehooksurveystarted) | - -___ - -### ResponseHookSDKReady - -Ƭ **ResponseHookSDKReady**: `Object` - -#### Type declaration - -| Name | Type | -| :------------------ | :-------------------------------------------------- | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseHookSurveyCompleted - -Ƭ **ResponseHookSurveyCompleted**: `Object` - -#### Type declaration - -| Name | Type | -| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | -| `response` | { `id`: `string` } | -| `response.id` | `string` | -| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | -| `survey.id` | `string` | -| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | -| `survey.survey_position` | `number` | -| `survey.survey_size` | `number` | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseHookSurveyHidden - -Ƭ **ResponseHookSurveyHidden**: `Object` - -#### Type declaration - -| Name | Type | -| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | -| `response` | { `hide_reason`: [`ResponseStatus`](README.md#responsestatus) ; `id`: `string` } | -| `response.hide_reason` | [`ResponseStatus`](README.md#responsestatus) | -| `response.id` | `string` | -| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | -| `survey.id` | `string` | -| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | -| `survey.survey_position` | `number` | -| `survey.survey_size` | `number` | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseHookSurveyReplied - -Ƭ **ResponseHookSurveyReplied**: `Object` - -#### Type declaration - -| Name | Type | -| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | -| `response` | { `id`: `string` ; `status`: [`ResponseStatus`](README.md#responsestatus) } | -| `response.id` | `string` | -| `response.status` | [`ResponseStatus`](README.md#responsestatus) | -| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | -| `survey.id` | `string` | -| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | -| `survey.survey_position` | `number` | -| `survey.survey_size` | `number` | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseHookSurveyShowed - -Ƭ **ResponseHookSurveyShowed**: `Object` - -#### Type declaration - -| Name | Type | -| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| `items` | [`QuestionAnswerPair`](README.md#questionanswerpair)[] | -| `response` | { `id`: `string` } | -| `response.id` | `string` | -| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | -| `survey.id` | `string` | -| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | -| `survey.survey_position` | `number` | -| `survey.survey_size` | `number` | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseHookSurveyStarted - -Ƭ **ResponseHookSurveyStarted**: `Object` - -#### Type declaration - -| Name | Type | -| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| `response` | { `id`: `string` } | -| `response.id` | `string` | -| `survey` | { `id`: `string` ; `survey_format`: ``"conversationnal"`` \| ``"cards"`` \| `undefined` ; `survey_position`: `number` ; `survey_size`: `number` } | -| `survey.id` | `string` | -| `survey.survey_format` | ``"conversationnal"`` \| ``"cards"`` \| `undefined` | -| `survey.survey_position` | `number` | -| `survey.survey_size` | `number` | -| `user` | { `anonymous_id`: `string` ; `user_id`: `string` } | -| `user.anonymous_id` | `string` | -| `user.user_id` | `string` | - -___ - -### ResponseQuestion - -Ƭ **ResponseQuestion**: `Object` - -#### Type declaration - -| Name | Type | -| :--------------- | :------------------------------------------------------------------- | -| `call_to_action` | [`ResponseQuestionCTA`](README.md#responsequestioncta) | -| `ends` | `boolean` | -| `id` | `string` | -| `messages` | [`ResponseQuestionMessage`](README.md#responsequestionmessage)[] | -| `skip_action?` | [`ResponseQuestionActionSkip`](README.md#responsequestionactionskip) | - -___ - -### ResponseQuestionActionButton - -Ƭ **ResponseQuestionActionButton**: `Object` - -Action - -#### Type declaration - -| Name | Type | -| :-------------- | :------------------------------------------------------------ | -| `id` | `string` | -| `payload` | { `emoji`: `string` ; `label`: `string` ; `url?`: `string` } | -| `payload.emoji` | `string` | -| `payload.label` | `string` | -| `payload.url?` | `string` | -| `type` | ``"button"`` | - -___ - -### ResponseQuestionActionInput - -Ƭ **ResponseQuestionActionInput**: `Object` - -#### Type declaration - -| Name | Type | -| :------------------- | :------------------------------------------------------------------------------------------------------------ | -| `id` | `string` | -| `payload` | { `validation`: [`ResponseQuestionActionInputValidation`](README.md#responsequestionactioninputvalidation) } | -| `payload.validation` | [`ResponseQuestionActionInputValidation`](README.md#responsequestionactioninputvalidation) | -| `type` | ``"text_input"`` | - -___ - -### ResponseQuestionActionInputValidation - -Ƭ **ResponseQuestionActionInputValidation**: ``"text"`` \| ``"email"`` - -___ - -### ResponseQuestionActionLink - -Ƭ **ResponseQuestionActionLink**: `Object` - -#### Type declaration - -| Name | Type | -| :-------------- | :------------------------------------------------------------ | -| `id` | `string` | -| `payload` | { `emoji`: `string` ; `label`: `string` ; `link`: `string` } | -| `payload.emoji` | `string` | -| `payload.label` | `string` | -| `payload.link` | `string` | -| `type` | ``"link"`` | - -___ - -### ResponseQuestionActionRange - -Ƭ **ResponseQuestionActionRange**: `Object` - -#### Type declaration - -| Name | Type | -| :------------------- | :--------------------------------------------------------------------------------------- | -| `id` | `string` | -| `payload` | { `emoji`: `string` ; `max`: `number` ; `min`: `number` ; `validation`: ``"min_max"`` } | -| `payload.emoji` | `string` | -| `payload.max` | `number` | -| `payload.min` | `number` | -| `payload.validation` | ``"min_max"`` | -| `type` | ``"number_input"`` | - -___ - -### ResponseQuestionActionScoring - -Ƭ **ResponseQuestionActionScoring**: `Object` - -#### Type declaration - -| Name | Type | -| :-------------- | :----------------------------------------- | -| `id` | `string` | -| `payload` | { `emoji`: `string` ; `value`: `number` } | -| `payload.emoji` | `string` | -| `payload.value` | `number` | -| `type` | ``"scoring"`` | - -___ - -### ResponseQuestionActionSkip - -Ƭ **ResponseQuestionActionSkip**: `Object` - -#### Type declaration - -| Name | Type | -| :-------- | :--------- | -| `id` | `string` | -| `payload` | `any` | -| `type` | ``"skip"`` | - -___ - -### ResponseQuestionCTA - -Ƭ **ResponseQuestionCTA**: [`ResponseQuestionCTANone`](README.md#responsequestionctanone) \| [`ResponseQuestionCTAChoices`](README.md#responsequestionctachoices) \| [`ResponseQuestionCTAScores`](README.md#responsequestionctascores) \| [`ResponseQuestionCTAInput`](README.md#responsequestionctainput) \| [`ResponseQuestionCTARange`](README.md#responsequestionctarange) \| [`ResponseQuestionCTAAppStoreRating`](README.md#responsequestionctaappstorerating) - -___ - -### ResponseQuestionCTAAppStoreRating - -Ƭ **ResponseQuestionCTAAppStoreRating**: `Object` - -#### Type declaration - -| Name | Type | -| :----- | :-------------------- | -| `type` | ``"appstore_rating"`` | - -___ - -### ResponseQuestionCTAChoices - -Ƭ **ResponseQuestionCTAChoices**: `Object` - -#### Type declaration - -| Name | Type | -| :-------- | :------------------------------------------------------------------------- | -| `choices` | [`ResponseQuestionActionButton`](README.md#responsequestionactionbutton)[] | -| `type` | ``"multiple_choice"`` \| ``"pmf"`` \| ``"link"`` | - -___ - -### ResponseQuestionCTAInput - -Ƭ **ResponseQuestionCTAInput**: `Object` - -#### Type declaration - -| Name | Type | -| :------ | :--------------------------------------------------------------------- | -| `input` | [`ResponseQuestionActionInput`](README.md#responsequestionactioninput) | -| `type` | ``"input"`` | - -___ - -### ResponseQuestionCTANone - -Ƭ **ResponseQuestionCTANone**: `Object` - -CTA - -#### Type declaration - -| Name | Type | -| :----- | :--------- | -| `type` | ``"none"`` | - -___ - -### ResponseQuestionCTARange - -Ƭ **ResponseQuestionCTARange**: `Object` - -#### Type declaration - -| Name | Type | -| :------ | :--------------------------------------------------------------------- | -| `range` | [`ResponseQuestionActionRange`](README.md#responsequestionactionrange) | -| `type` | ``"range"`` | - -___ - -### ResponseQuestionCTAScores - -Ƭ **ResponseQuestionCTAScores**: `Object` - -#### Type declaration - -| Name | Type | -| :------- | :--------------------------------------------------------------------------- | -| `scores` | [`ResponseQuestionActionScoring`](README.md#responsequestionactionscoring)[] | -| `type` | ``"scoring"`` \| ``"nps"`` \| ``"ces"`` \| ``"csat"`` | - -___ - -### ResponseQuestionMessage - -Ƭ **ResponseQuestionMessage**: { `id`: `string` } & [`ResponseQuestionMessageText`](README.md#responsequestionmessagetext) - -___ - -### ResponseQuestionMessageText - -Ƭ **ResponseQuestionMessageText**: `Object` - -Messages - -#### Type declaration - -| Name | Type | -| :----- | :--------- | -| `text` | `string` | -| `type` | ``"text"`` | - -___ - -### ResponseStatus - -Ƭ **ResponseStatus**: ``"started"`` \| ``"ended"`` \| ``"closed"`` \| ``"interrupted"`` - -___ - ### ScreebIdentityGetReturn Ƭ **ScreebIdentityGetReturn**: `Object` @@ -551,15 +78,15 @@ This is the object returned by the function `identityGet()`. #### Type declaration -| Name | Type | Description | -| :-------------- | :-------- | :--------------------------------------------------------- | -| `channel_id` | `string` | The current channel id with which the tag was initialized | -| `anonymous_id` | `string` | Anonymous id given to each user | -| `user_id` | `string` | The authenticated id assigned to the user. | -| `is_ready` | `boolean` | `true` if the tag us loaded, initialized and ready to rock | -| `session_id` | `string` | The current user session id | -| `session_start` | `string` | The current user session start time | -| `session_end` | `string` | The current user session end time | +| Name | Type | Description | +| :------ | :------ | :------ | +| `anonymous_id` | `string` | Anonymous id given to each user | +| `channel_id` | `string` | The current channel id with which the tag was initialized | +| `is_ready` | `boolean` | `true` if the tag us loaded, initialized and ready to rock | +| `session_end` | `string` | The current user session end time | +| `session_id` | `string` | The current user session id | +| `session_start` | `string` | The current user session start time | +| `user_id` | `string` | The authenticated id assigned to the user. | ___ @@ -579,10 +106,10 @@ This is the Screeb tag options object. #### Type declaration -| Name | Type | Description | -| :---------------- | :------- | :--------------------------------------------------------------------------- | -| `screebEndpoint?` | `string` | Please don't do this. | -| `window?` | `Window` | If you're running Screeb tag in an iframe, please set the inner window here. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `screebEndpoint?` | `string` | Please don't do this. | +| `window?` | `Window` | If you're running Screeb tag in an iframe, please set the inner window here. | ___ @@ -678,9 +205,9 @@ Screeb.eventTrack( #### Parameters -| Name | Type | Description | -| :----------------- | :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `eventName` | `string` | The event name. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `eventName` | `string` | The event name. | | `eventProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your event. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -715,9 +242,9 @@ Screeb.identity( #### Parameters -| Name | Type | Description | -| :---------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `userId` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `userId` | `string` | The unique identifier of your user. | | `userProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -782,10 +309,10 @@ Screeb.identityGroupAssign( #### Parameters -| Name | Type | Description | -| :----------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `groupName` | `string` | | -| `groupType?` | `string` | | +| Name | Type | Description | +| :------ | :------ | :------ | +| `groupName` | `string` | | +| `groupType?` | `string` | | | `groupProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user group. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -810,9 +337,9 @@ Screeb.identityGroupUnassign('company', 'Apple'); #### Parameters -| Name | Type | Description | -| :----------- | :------- | :--------------------------- | -| `groupName` | `string` | The name of your user group. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `groupName` | `string` | The name of your user group. | | `groupType?` | `string` | The type of your user group. | #### Returns @@ -855,8 +382,8 @@ Screeb.identityProperties( #### Parameters -| Name | Type | Description | -| :--------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Name | Type | Description | +| :------ | :------ | :------ | | `userProperties` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date. ``` | #### Returns @@ -917,12 +444,12 @@ Screeb.init( #### Parameters -| Name | Type | Description | -| :---------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `websiteId` | `string` | Your website/channel id. | -| `userId?` | `string` | The unique identifier of your user. | +| Name | Type | Description | +| :------ | :------ | :------ | +| `websiteId` | `string` | Your website/channel id. | +| `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | -| `hooks?` | [`GlobalHooks`](README.md#globalhooks) | Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden or when a question is replied. | +| `hooks?` | [`GlobalHooks`](README.md#globalhooks) | Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden or when a question is replied. | #### Returns @@ -968,8 +495,8 @@ Screeb.load(); #### Parameters -| Name | Type | Description | -| :-------- | :----------------------------------------- | :--------------------- | +| Name | Type | Description | +| :------ | :------ | :------ | | `options` | [`ScreebOptions`](README.md#screeboptions) | Screeb module options. | #### Returns @@ -1026,12 +553,12 @@ Screeb.surveyStart( #### Parameters -| Name | Type | Default value | -| :----------------------- | :---------------------------------------------------- | :------------ | -| `surveyId` | `string` | `undefined` | -| `allowMultipleResponses` | `boolean` | `true` | -| `hiddenFields` | [`PropertyRecord`](README.md#propertyrecord) | `{}` | -| `hooks` | `undefined` \| [`SurveyHooks`](README.md#surveyhooks) | `undefined` | +| Name | Type | Default value | +| :------ | :------ | :------ | +| `surveyId` | `string` | `undefined` | +| `allowMultipleResponses` | `boolean` | `true` | +| `hiddenFields` | [`PropertyRecord`](README.md#propertyrecord) | `{}` | +| `hooks?` | [`SurveyHooks`](README.md#surveyhooks) | `undefined` | #### Returns diff --git a/packages/screeb-sdk-browser/src/index.ts b/packages/screeb-sdk-browser/src/index.ts index a57f835..152b66f 100644 --- a/packages/screeb-sdk-browser/src/index.ts +++ b/packages/screeb-sdk-browser/src/index.ts @@ -6,177 +6,6 @@ export type PropertyRecord = { [key: string]: PropertyType | PropertyType[]; }; -/** - * Action - */ -export type ResponseQuestionActionButton = { - id: string; - type: "button"; - payload: { - emoji: string; - label: string; - url?: string; - }; -}; - -export type ResponseQuestionActionLink = { - id: string; - type: "link"; - payload: { - emoji: string; - label: string; - link: string; - }; -}; - -export type ResponseQuestionActionScoring = { - id: string; - type: "scoring"; - payload: { - emoji: string; - value: number; - }; -}; - -export type ResponseQuestionActionInputValidation = "text" | "email"; - -export type ResponseQuestionActionInput = { - id: string; - type: "text_input"; - payload: { - validation: ResponseQuestionActionInputValidation; - }; -}; - -export type ResponseQuestionActionRange = { - id: string; - type: "number_input"; - payload: { - validation: "min_max"; - min: number; - max: number; - emoji: string; - }; -}; - -/** - * CTA - */ -export type ResponseQuestionCTANone = { - type: "none"; -}; - -export type ResponseQuestionCTAChoices = { - type: "multiple_choice" | "pmf" | "link"; - choices: ResponseQuestionActionButton[]; -}; - -export type ResponseQuestionCTAScores = { - type: "scoring" | "nps" | "ces" | "csat"; - scores: ResponseQuestionActionScoring[]; -}; - -export type ResponseQuestionCTAInput = { - type: "input"; - input: ResponseQuestionActionInput; -}; - -export type ResponseQuestionCTARange = { - type: "range"; - range: ResponseQuestionActionRange; -}; - -export type ResponseQuestionCTAAppStoreRating = { - type: "appstore_rating"; -}; - -export type ResponseQuestionCTA = - | ResponseQuestionCTANone - | ResponseQuestionCTAChoices - | ResponseQuestionCTAScores - | ResponseQuestionCTAInput - | ResponseQuestionCTARange - | ResponseQuestionCTAAppStoreRating; - -/** - * Answer - */ -export type ResponseAnswerValue = - | ResponseAnswerValueNone - | ResponseAnswerValueString - | ResponseAnswerValueNumber - | ResponseAnswerValueBoolean - | ResponseAnswerValueTime; - -export type ResponseAnswerValueNone = ResponseAnswerValueAbstract & { - type: "none"; -}; - -export type ResponseAnswerValueString = ResponseAnswerValueAbstract & { - type: "string"; - value_string: string; -}; - -export type ResponseAnswerValueNumber = ResponseAnswerValueAbstract & { - type: "number"; - value_number: number; -}; - -export type ResponseAnswerValueBoolean = ResponseAnswerValueAbstract & { - type: "boolean"; - value_boolean: boolean; -}; - -export type ResponseAnswerValueTime = ResponseAnswerValueAbstract & { - type: "time"; - value_time: Date; -}; - -type ResponseAnswerValueAbstract = { - action_id: string; -}; - -export type ResponseAnswer = { - id: string; - question_id: string; - values: ResponseAnswerValue[]; - created_at: Date; -}; - -export type ResponseQuestionActionSkip = { - id: string; - type: "skip"; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - payload: any; -}; - -/** - * Messages - */ -export type ResponseQuestionMessageText = { - type: "text"; - text: string; -}; - -export type ResponseQuestionMessage = { - id: string; -} & ResponseQuestionMessageText; - -export type ResponseQuestion = { - id: string; - messages: ResponseQuestionMessage[]; - call_to_action: ResponseQuestionCTA; - skip_action?: ResponseQuestionActionSkip; - ends: boolean; -}; - -export type QuestionAnswerPair = { - question: ResponseQuestion; - answer?: ResponseAnswer; -}; - -export type ResponseStatus = "started" | "ended" | "closed" | "interrupted"; - /** * Hooks */ @@ -187,115 +16,13 @@ export type HookType = | "onSurveyCompleted" | "onSurveyHidden"; -export type ResponseHookSurveyShowed = { - survey: { - id: string; - survey_position: number; - survey_size: number; - survey_format: "conversationnal" | "cards" | undefined; - }; - response: { - id: string; - }; - user: { - anonymous_id: string; - user_id: string; - }; - items: QuestionAnswerPair[]; -}; - -export type ResponseHookSDKReady = { - user: { - anonymous_id: string; - user_id: string; - }; -}; - -export type ResponseHookSurveyStarted = { - survey: { - id: string; - survey_position: number; - survey_size: number; - survey_format: "conversationnal" | "cards" | undefined; - }; - response: { - id: string; - }; - user: { - anonymous_id: string; - user_id: string; - }; -}; - -export type ResponseHookSurveyHidden = { - survey: { - id: string; - survey_position: number; - survey_size: number; - survey_format: "conversationnal" | "cards" | undefined; - }; - response: { - id: string; - hide_reason: ResponseStatus; - }; - user: { - anonymous_id: string; - user_id: string; - }; - items: QuestionAnswerPair[]; -}; - -export type ResponseHookSurveyReplied = { - survey: { - id: string; - survey_position: number; - survey_size: number; - survey_format: "conversationnal" | "cards" | undefined; - }; - response: { - id: string; - status: ResponseStatus; - }; - user: { - anonymous_id: string; - user_id: string; - }; - items: QuestionAnswerPair[]; -}; - -export type ResponseHookSurveyCompleted = { - survey: { - id: string; - survey_position: number; - survey_size: number; - survey_format: "conversationnal" | "cards" | undefined; - }; - response: { - id: string; - }; - user: { - anonymous_id: string; - user_id: string; - }; - items: QuestionAnswerPair[]; -}; - -export type ResponseHook = { - onReady: ResponseHookSDKReady; - onSurveyShowed: ResponseHookSurveyShowed; - onSurveyStarted: ResponseHookSurveyStarted; - onQuestionReplied: ResponseHookSurveyReplied; - onSurveyCompleted: ResponseHookSurveyCompleted; - onSurveyHidden: ResponseHookSurveyHidden; -}; - export type GlobalHooks = { - // eslint-disable-next-line no-unused-vars - [key in HookType | "onReady"]?: (payload: ResponseHook[key]) => void; + // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any + [key in HookType | "onReady"]?: (payload: any) => void; }; export type SurveyHooks = { - // eslint-disable-next-line no-unused-vars - [key in HookType]?: (payload: ResponseHook[key]) => void; + // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any + [key in HookType]?: (payload: any) => void; }; /** This is the Screeb tag options object. */ @@ -749,7 +476,7 @@ export const surveyStart = ( surveyId: string, allowMultipleResponses = true, hiddenFields: PropertyRecord = {}, - hooks: SurveyHooks | undefined = undefined + hooks?: SurveyHooks ) => callScreebCommand("survey.start", surveyId, { allow_multiple_responses: allowMultipleResponses, diff --git a/packages/screeb-sdk-react-example/src/main.tsx b/packages/screeb-sdk-react-example/src/main.tsx index d0effcf..0b7735f 100644 --- a/packages/screeb-sdk-react-example/src/main.tsx +++ b/packages/screeb-sdk-react-example/src/main.tsx @@ -19,7 +19,8 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( org_size: 20, }} hooks={{ - onReady: (payload) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onReady: (payload: any) => { // eslint-disable-next-line no-console console.log("onReady", payload); }, From 039f15f6a763935f657a043459fae330090b6b45 Mon Sep 17 00:00:00 2001 From: clement Date: Fri, 28 Jul 2023 15:59:23 +0200 Subject: [PATCH 3/4] feat(*): add hooks version --- .../screeb-sdk-angular-example/src/main.ts | 2 ++ .../screeb-sdk-angular/docs/classes/Screeb.md | 10 +++--- .../docs/classes/ScreebConfig.md | 2 +- .../docs/classes/ScreebModule.md | 3 +- .../src/lib/screeb-config.ts | 8 ++--- .../src/lib/screeb.module.ts | 3 +- .../screeb-sdk-angular/src/lib/screeb.ts | 10 +++--- .../screeb-sdk-browser-example/src/App.svelte | 1 + packages/screeb-sdk-browser/docs/README.md | 32 +++++++------------ packages/screeb-sdk-browser/src/index.ts | 27 ++++++---------- .../screeb-sdk-react-example/src/main.tsx | 1 + packages/screeb-sdk-react/docs/README.md | 2 +- packages/screeb-sdk-react/src/provider.tsx | 4 +-- packages/screeb-sdk-react/src/types.ts | 4 +-- 14 files changed, 49 insertions(+), 60 deletions(-) diff --git a/packages/screeb-sdk-angular-example/src/main.ts b/packages/screeb-sdk-angular-example/src/main.ts index f54e5d4..ce692ad 100644 --- a/packages/screeb-sdk-angular-example/src/main.ts +++ b/packages/screeb-sdk-angular-example/src/main.ts @@ -18,10 +18,12 @@ bootstrapApplication(AppComponent, { ScreebModule.forRoot({ autoInit: true, hooks: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any onReady: (payload: any) => { // eslint-disable-next-line no-console console.log("SDK is ready", payload); }, + version: "1.0.0", }, userId: "dev@screeb.app", userProperties: { diff --git a/packages/screeb-sdk-angular/docs/classes/Screeb.md b/packages/screeb-sdk-angular/docs/classes/Screeb.md index a5a7488..833ac31 100644 --- a/packages/screeb-sdk-angular/docs/classes/Screeb.md +++ b/packages/screeb-sdk-angular/docs/classes/Screeb.md @@ -371,7 +371,8 @@ this.screeb.init( authenticated: true }, { - onReady: (payload) => { + "version": "1.0.0", + "onReady": (payload) => { console.log("SDK is ready", payload); }, }, @@ -385,7 +386,7 @@ this.screeb.init( | `websiteId` | `string` | Your website/channel id. | | `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | -| `hooks?` | `GlobalHooks` | - | +| `hooks?` | `Hooks` | - | #### Returns @@ -446,7 +447,8 @@ this.screeb.surveyStart( article_id: 42 }, { - onSurveyShowed: (payload) => { + "version": "1.0.0", + "onSurveyShowed": (payload) => { console.log("Survey showed", payload); }, }, @@ -460,7 +462,7 @@ this.screeb.surveyStart( | `surveyId` | `string` | | `allowMultipleResponses` | `boolean` | | `hiddenFields` | `PropertyRecord` | -| `hooks?` | `SurveyHooks` | +| `hooks?` | `Hooks` | #### Returns diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md b/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md index 4c7bf2e..1e13e68 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebConfig.md @@ -42,7 +42,7 @@ ___ ### hooks -• `Optional` **hooks**: `GlobalHooks` +• `Optional` **hooks**: `Hooks` Hooks to define callback for various event diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md index 77ce6cf..f90e2f3 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md @@ -48,7 +48,8 @@ ScreebModule.forRoot({ authenticated: true }, { - onReady: (payload) => { + "version": "1.0.0", + "onReady": (payload) => { console.log("SDK is ready", payload); }, }, diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts index bf46063..78f6cc4 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb-config.ts @@ -1,9 +1,5 @@ import { Injectable } from "@angular/core"; -import { - GlobalHooks, - PropertyRecord, - ScreebOptions, -} from "@screeb/sdk-browser"; +import { Hooks, PropertyRecord, ScreebOptions } from "@screeb/sdk-browser"; /** Configuration of Screeb module */ @Injectable({ providedIn: "root" }) @@ -15,7 +11,7 @@ export class ScreebConfig { /** The properties of your user. */ userProperties?: PropertyRecord; /** Hooks to define callback for various event */ - hooks?: GlobalHooks; + hooks?: Hooks; /** * Indicates if Screeb should be automatically loaded. * This will ping to the Screeb servers. diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts index 591545f..ffe40f7 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts @@ -24,7 +24,8 @@ export class ScreebModule { * authenticated: true * }, * { - * onReady: (payload) => { + * "version": "1.0.0", + * "onReady": (payload) => { * console.log("SDK is ready", payload); * }, * }, diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts index eda10a5..201db3c 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts @@ -311,7 +311,8 @@ export class Screeb { * article_id: 42 * }, * { - * onSurveyShowed: (payload) => { + * "version": "1.0.0", + * "onSurveyShowed": (payload) => { * console.log("Survey showed", payload); * }, * }, @@ -322,7 +323,7 @@ export class Screeb { surveyId: string, allowMultipleResponses: boolean, hiddenFields: _Screeb.PropertyRecord, - hooks?: _Screeb.SurveyHooks + hooks?: _Screeb.Hooks ) { await this.ensureScreeb("surveyStart"); @@ -401,7 +402,8 @@ export class Screeb { * authenticated: true * }, * { - * onReady: (payload) => { + * "version": "1.0.0", + * "onReady": (payload) => { * console.log("SDK is ready", payload); * }, * }, @@ -412,7 +414,7 @@ export class Screeb { websiteId: string, userId?: string, userProperties?: _Screeb.PropertyRecord, - hooks?: _Screeb.GlobalHooks + hooks?: _Screeb.Hooks ) { await this.ensureScreeb("init", true); diff --git a/packages/screeb-sdk-browser-example/src/App.svelte b/packages/screeb-sdk-browser-example/src/App.svelte index 6af0675..46a03e3 100644 --- a/packages/screeb-sdk-browser-example/src/App.svelte +++ b/packages/screeb-sdk-browser-example/src/App.svelte @@ -22,6 +22,7 @@ // eslint-disable-next-line no-console console.log("screeb ready", e) }, + version: "1.0.0", } ) diff --git a/packages/screeb-sdk-browser/docs/README.md b/packages/screeb-sdk-browser/docs/README.md index 7d305fe..574b46f 100644 --- a/packages/screeb-sdk-browser/docs/README.md +++ b/packages/screeb-sdk-browser/docs/README.md @@ -6,14 +6,12 @@ ### Type Aliases -- [GlobalHooks](README.md#globalhooks) -- [HookType](README.md#hooktype) +- [Hooks](README.md#hooks) - [PropertyRecord](README.md#propertyrecord) - [PropertyType](README.md#propertytype) - [ScreebIdentityGetReturn](README.md#screebidentitygetreturn) - [ScreebObject](README.md#screebobject) - [ScreebOptions](README.md#screeboptions) -- [SurveyHooks](README.md#surveyhooks) ### Functions @@ -36,17 +34,15 @@ ## Type Aliases -### GlobalHooks +### Hooks -Ƭ **GlobalHooks**: { [key in HookType \| "onReady"]?: Function } +Ƭ **Hooks**: `Object` -___ - -### HookType +Hooks -Ƭ **HookType**: ``"onSurveyShowed"`` \| ``"onSurveyStarted"`` \| ``"onQuestionReplied"`` \| ``"onSurveyCompleted"`` \| ``"onSurveyHidden"`` +#### Index signature -Hooks +▪ [key: `string`]: `any` ___ @@ -111,12 +107,6 @@ This is the Screeb tag options object. | `screebEndpoint?` | `string` | Please don't do this. | | `window?` | `Window` | If you're running Screeb tag in an iframe, please set the inner window here. | -___ - -### SurveyHooks - -Ƭ **SurveyHooks**: { [key in HookType]?: Function } - ## Functions ### close @@ -435,7 +425,8 @@ Screeb.init( authenticated: true }, { - onReady: (payload) => { + "version": "1.0.0", + "onReady": (payload) => { console.log("SDK is ready", payload); }, }, @@ -449,7 +440,7 @@ Screeb.init( | `websiteId` | `string` | Your website/channel id. | | `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | [`PropertyRecord`](README.md#propertyrecord) | The properties of your user. ```text Requirements: - Property names must be limited to 128 characters - No more than 1000 attributes - Supported types for values: string, number, boolean and Date ``` | -| `hooks?` | [`GlobalHooks`](README.md#globalhooks) | Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden or when a question is replied. | +| `hooks?` | [`Hooks`](README.md#hooks) | Hooks to be called when SDK is ready or a survey is showed, started, completed, hidden or when a question is replied. | #### Returns @@ -544,7 +535,8 @@ Screeb.surveyStart( article_id: 42 }, { - onSurveyShowed: (payload) => { + "version": "1.0.0", + "onSurveyShowed": (payload) => { console.log("Survey showed", payload); }, }, @@ -558,7 +550,7 @@ Screeb.surveyStart( | `surveyId` | `string` | `undefined` | | `allowMultipleResponses` | `boolean` | `true` | | `hiddenFields` | [`PropertyRecord`](README.md#propertyrecord) | `{}` | -| `hooks?` | [`SurveyHooks`](README.md#surveyhooks) | `undefined` | +| `hooks?` | [`Hooks`](README.md#hooks) | `undefined` | #### Returns diff --git a/packages/screeb-sdk-browser/src/index.ts b/packages/screeb-sdk-browser/src/index.ts index 152b66f..c05ebe5 100644 --- a/packages/screeb-sdk-browser/src/index.ts +++ b/packages/screeb-sdk-browser/src/index.ts @@ -9,20 +9,9 @@ export type PropertyRecord = { /** * Hooks */ -export type HookType = - | "onSurveyShowed" - | "onSurveyStarted" - | "onQuestionReplied" - | "onSurveyCompleted" - | "onSurveyHidden"; - -export type GlobalHooks = { - // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any - [key in HookType | "onReady"]?: (payload: any) => void; -}; -export type SurveyHooks = { - // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any - [key in HookType]?: (payload: any) => void; +export type Hooks = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key: string]: any; }; /** This is the Screeb tag options object. */ @@ -156,7 +145,8 @@ export const load = (options: ScreebOptions = {}) => * authenticated: true * }, * { - * onReady: (payload) => { + * "version": "1.0.0", + * "onReady": (payload) => { * console.log("SDK is ready", payload); * }, * }, @@ -167,7 +157,7 @@ export const init = ( websiteId: string, userId?: string, userProperties?: PropertyRecord, - hooks?: GlobalHooks + hooks?: Hooks ) => { let identityObject; @@ -465,7 +455,8 @@ export const surveyClose = () => callScreebCommand("survey.close"); * article_id: 42 * }, * { - * onSurveyShowed: (payload) => { + * "version": "1.0.0", + * "onSurveyShowed": (payload) => { * console.log("Survey showed", payload); * }, * }, @@ -476,7 +467,7 @@ export const surveyStart = ( surveyId: string, allowMultipleResponses = true, hiddenFields: PropertyRecord = {}, - hooks?: SurveyHooks + hooks?: Hooks ) => callScreebCommand("survey.start", surveyId, { allow_multiple_responses: allowMultipleResponses, diff --git a/packages/screeb-sdk-react-example/src/main.tsx b/packages/screeb-sdk-react-example/src/main.tsx index 0b7735f..da73d5f 100644 --- a/packages/screeb-sdk-react-example/src/main.tsx +++ b/packages/screeb-sdk-react-example/src/main.tsx @@ -24,6 +24,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( // eslint-disable-next-line no-console console.log("onReady", payload); }, + version: "1.0.0", }} > diff --git a/packages/screeb-sdk-react/docs/README.md b/packages/screeb-sdk-react/docs/README.md index e8072fd..ea529cc 100644 --- a/packages/screeb-sdk-react/docs/README.md +++ b/packages/screeb-sdk-react/docs/README.md @@ -472,7 +472,7 @@ Properties of Screeb provider | Name | Type | Description | | :------ | :------ | :------ | -| `hooks?` | `GlobalHooks` | Hooks to define callback for various event | +| `hooks?` | `Hooks` | Hooks to define callback for various event | | `userId?` | `string` | The unique identifier of your user. | | `userProperties?` | `PropertyRecord` | The properties of your user. | | `websiteId` | `string` | Your website/channel id. | diff --git a/packages/screeb-sdk-react/src/provider.tsx b/packages/screeb-sdk-react/src/provider.tsx index 9ad4dc8..738c26c 100644 --- a/packages/screeb-sdk-react/src/provider.tsx +++ b/packages/screeb-sdk-react/src/provider.tsx @@ -142,7 +142,7 @@ export const ScreebProvider: React.FC< websiteId: string, userId?: string, userProperties?: Screeb.PropertyRecord, - hooks?: Screeb.GlobalHooks + hooks?: Screeb.Hooks ) => { await ensureScreeb( "init", @@ -191,7 +191,7 @@ export const ScreebProvider: React.FC< surveyId: string, allowMultipleResponses: boolean, hiddenFields: Screeb.PropertyRecord, - hooks?: Screeb.SurveyHooks + hooks?: Screeb.Hooks ) => await ensureScreeb("surveyStart", () => Screeb.surveyStart( diff --git a/packages/screeb-sdk-react/src/types.ts b/packages/screeb-sdk-react/src/types.ts index 8bb3752..a9c4b0d 100644 --- a/packages/screeb-sdk-react/src/types.ts +++ b/packages/screeb-sdk-react/src/types.ts @@ -1,6 +1,6 @@ /* eslint-disable no-unused-vars */ import { - GlobalHooks, + Hooks, PropertyRecord, ScreebIdentityGetReturn, ScreebOptions, @@ -15,7 +15,7 @@ export type ScreebProps = { /** The properties of your user. */ userProperties?: PropertyRecord; /** Hooks to define callback for various event */ - hooks?: GlobalHooks; + hooks?: Hooks; }; /** From 41e9dfa00f44c7f08a86c36209e4b150549810bf Mon Sep 17 00:00:00 2001 From: MD4 Date: Wed, 11 Oct 2023 16:14:56 +0200 Subject: [PATCH 4/4] fix(*): added types on hooks --- .../screeb-sdk-angular-example/src/main.ts | 4 +- .../screeb-sdk-angular/docs/classes/Screeb.md | 12 +- .../docs/classes/ScreebModule.md | 6 +- .../src/lib/screeb.module.ts | 6 +- .../screeb-sdk-angular/src/lib/screeb.ts | 12 +- .../screeb-sdk-browser-example/src/App.svelte | 4 +- packages/screeb-sdk-browser/docs/README.md | 51 ++++++-- .../screeb-sdk-browser/src/hooks.types.ts | 122 ++++++++++++++++++ packages/screeb-sdk-browser/src/index.ts | 76 ++--------- packages/screeb-sdk-browser/src/types.ts | 76 +++++++++++ .../screeb-sdk-react-example/src/main.tsx | 3 +- 11 files changed, 266 insertions(+), 106 deletions(-) create mode 100644 packages/screeb-sdk-browser/src/hooks.types.ts create mode 100644 packages/screeb-sdk-browser/src/types.ts diff --git a/packages/screeb-sdk-angular-example/src/main.ts b/packages/screeb-sdk-angular-example/src/main.ts index ce692ad..d0f1fc9 100644 --- a/packages/screeb-sdk-angular-example/src/main.ts +++ b/packages/screeb-sdk-angular-example/src/main.ts @@ -19,9 +19,9 @@ bootstrapApplication(AppComponent, { autoInit: true, hooks: { // eslint-disable-next-line @typescript-eslint/no-explicit-any - onReady: (payload: any) => { + onReady: (payload) => { // eslint-disable-next-line no-console - console.log("SDK is ready", payload); + console.log("onReady", payload); }, version: "1.0.0", }, diff --git a/packages/screeb-sdk-angular/docs/classes/Screeb.md b/packages/screeb-sdk-angular/docs/classes/Screeb.md index 833ac31..194b5fe 100644 --- a/packages/screeb-sdk-angular/docs/classes/Screeb.md +++ b/packages/screeb-sdk-angular/docs/classes/Screeb.md @@ -371,10 +371,8 @@ this.screeb.init( authenticated: true }, { - "version": "1.0.0", - "onReady": (payload) => { - console.log("SDK is ready", payload); - }, + version: "1.0.0", + onReady: (payload) => console.log("Screeb SDK is ready!", payload), }, ); ``` @@ -447,10 +445,8 @@ this.screeb.surveyStart( article_id: 42 }, { - "version": "1.0.0", - "onSurveyShowed": (payload) => { - console.log("Survey showed", payload); - }, + version: "1.0.0", + onSurveyShowed: (payload) => console.log("Survey showed", payload), }, ); ``` diff --git a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md index f90e2f3..3f9a9ed 100644 --- a/packages/screeb-sdk-angular/docs/classes/ScreebModule.md +++ b/packages/screeb-sdk-angular/docs/classes/ScreebModule.md @@ -48,10 +48,8 @@ ScreebModule.forRoot({ authenticated: true }, { - "version": "1.0.0", - "onReady": (payload) => { - console.log("SDK is ready", payload); - }, + version: "1.0.0", + onReady: (payload) => console.log("Screeb SDK is ready!", payload), }, }) ``` diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts index ffe40f7..c359b68 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.module.ts @@ -24,10 +24,8 @@ export class ScreebModule { * authenticated: true * }, * { - * "version": "1.0.0", - * "onReady": (payload) => { - * console.log("SDK is ready", payload); - * }, + * version: "1.0.0", + * onReady: (payload) => console.log("Screeb SDK is ready!", payload), * }, * }) * ``` diff --git a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts index 201db3c..2e589a1 100644 --- a/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts +++ b/packages/screeb-sdk-angular/projects/screeb-sdk-angular/src/lib/screeb.ts @@ -311,10 +311,8 @@ export class Screeb { * article_id: 42 * }, * { - * "version": "1.0.0", - * "onSurveyShowed": (payload) => { - * console.log("Survey showed", payload); - * }, + * version: "1.0.0", + * onSurveyShowed: (payload) => console.log("Survey showed", payload), * }, * ); * ``` @@ -402,10 +400,8 @@ export class Screeb { * authenticated: true * }, * { - * "version": "1.0.0", - * "onReady": (payload) => { - * console.log("SDK is ready", payload); - * }, + * version: "1.0.0", + * onReady: (payload) => console.log("Screeb SDK is ready!", payload), * }, * ); * ``` diff --git a/packages/screeb-sdk-browser-example/src/App.svelte b/packages/screeb-sdk-browser-example/src/App.svelte index 46a03e3..32c5f60 100644 --- a/packages/screeb-sdk-browser-example/src/App.svelte +++ b/packages/screeb-sdk-browser-example/src/App.svelte @@ -18,9 +18,9 @@ org_size: 20, }, { - onReady: (e) => { + onReady: (payload) => { // eslint-disable-next-line no-console - console.log("screeb ready", e) + console.log("onReady", payload) }, version: "1.0.0", } diff --git a/packages/screeb-sdk-browser/docs/README.md b/packages/screeb-sdk-browser/docs/README.md index 574b46f..1ceeaf7 100644 --- a/packages/screeb-sdk-browser/docs/README.md +++ b/packages/screeb-sdk-browser/docs/README.md @@ -9,6 +9,7 @@ - [Hooks](README.md#hooks) - [PropertyRecord](README.md#propertyrecord) - [PropertyType](README.md#propertytype) +- [ScreebFunction](README.md#screebfunction) - [ScreebIdentityGetReturn](README.md#screebidentitygetreturn) - [ScreebObject](README.md#screebobject) - [ScreebOptions](README.md#screeboptions) @@ -38,11 +39,19 @@ Ƭ **Hooks**: `Object` -Hooks +This is the Screeb tag hooks object. -#### Index signature +#### Type declaration -▪ [key: `string`]: `any` +| Name | Type | Description | +| :------ | :------ | :------ | +| `onQuestionReplied?` | `HookOnQuestionReplied` | This hook is triggered when a question is answered | +| `onReady?` | `HookOnReady` | This hook is triggered when Screeb SD is loaded, initialized and ready to rock | +| `onSurveyCompleted?` | `HookOnSurveyCompleted` | This hook is triggered when a survey is completed | +| `onSurveyHidden?` | `HookOnSurveyHidden` | This hook is triggered when a survey is hidden | +| `onSurveyShowed?` | `HookOnSurveyShowed` | This hook is triggered when a survey is displayed on screen (also triggered when page is reloaded) | +| `onSurveyStarted?` | `HookOnSurveyStarted` | This hook is triggered when a survey is started | +| `version` | `string` | This defines the version of hooks and their data | ___ @@ -66,6 +75,26 @@ This is property types that are supported by Screeb. ___ +### ScreebFunction + +Ƭ **ScreebFunction**: (...`_`: `unknown`[]) => `void` \| `Promise`<`unknown`\> + +#### Type declaration + +▸ (`..._`): `void` \| `Promise`<`unknown`\> + +##### Parameters + +| Name | Type | +| :------ | :------ | +| `..._` | `unknown`[] | + +##### Returns + +`void` \| `Promise`<`unknown`\> + +___ + ### ScreebIdentityGetReturn Ƭ **ScreebIdentityGetReturn**: `Object` @@ -78,7 +107,7 @@ This is the object returned by the function `identityGet()`. | :------ | :------ | :------ | | `anonymous_id` | `string` | Anonymous id given to each user | | `channel_id` | `string` | The current channel id with which the tag was initialized | -| `is_ready` | `boolean` | `true` if the tag us loaded, initialized and ready to rock | +| `is_ready` | `boolean` | `true` if the tag is loaded, initialized and ready to rock | | `session_end` | `string` | The current user session end time | | `session_id` | `string` | The current user session id | | `session_start` | `string` | The current user session start time | @@ -88,7 +117,7 @@ ___ ### ScreebObject -Ƭ **ScreebObject**: `ScreebFunction` & { `q?`: { `args`: `unknown`[] ; `ko`: (`reason?`: `unknown`) => `void` ; `ok`: (`value?`: `unknown`) => `void` ; `v`: `number` }[] } +Ƭ **ScreebObject**: [`ScreebFunction`](README.md#screebfunction) & { `q?`: { `args`: `unknown`[] ; `ko`: (`reason?`: `unknown`) => `void` ; `ok`: (`value?`: `unknown`) => `void` ; `v`: `number` }[] } This is the Screeb object publicly exposed in browser `window`. @@ -425,10 +454,8 @@ Screeb.init( authenticated: true }, { - "version": "1.0.0", - "onReady": (payload) => { - console.log("SDK is ready", payload); - }, + version: "1.0.0", + onReady: (payload) => console.log("Screeb SDK is ready!", payload), }, ); ``` @@ -535,10 +562,8 @@ Screeb.surveyStart( article_id: 42 }, { - "version": "1.0.0", - "onSurveyShowed": (payload) => { - console.log("Survey showed", payload); - }, + version: "1.0.0", + onSurveyShowed: (payload) => console.log("Survey showed", payload), }, ); ``` diff --git a/packages/screeb-sdk-browser/src/hooks.types.ts b/packages/screeb-sdk-browser/src/hooks.types.ts new file mode 100644 index 0000000..15358ad --- /dev/null +++ b/packages/screeb-sdk-browser/src/hooks.types.ts @@ -0,0 +1,122 @@ +export type ChannelType = "widget" | "ios" | "android"; + +export type Channel = { + id: string; + type: ChannelType; +}; + +export type User = { + anonymous_id: string; + userId?: string; +}; + +export type SurveyFormat = "conversationnal" | "cards"; + +export type SurveySize = 25 | 50 | 75 | 100 | 125 | 150; + +export type SurveyPosition = + | "center-left" + | "center-center" + | "center-right" + | "bottom-left" + | "bottom-center" + | "bottom-right"; + +export type Survey = { + id: string; + survey_position: SurveyPosition; + survey_format: SurveyFormat; + survey_size: 100; +}; + +export type ResponseStatus = + | "displayed" + | "started" + | "ended" + | "closed" + | "interrupted"; + +export type ResponseItemQuestion = { + id: string; + title: string; + type: "text" | "video"; + url?: string; +}; + +export type ResponseItemAnswer = { + replied_at?: string; + fields?: { + type: "string" | "number" | "boolean" | "none" | "time" | "file"; + text?: string; + number?: number; + boolean?: boolean; + time?: string; + }[]; +}; + +export type ResponseItem = { + question: ResponseItemQuestion; + answer: ResponseItemAnswer; +}; + +export type HookCommonProperties = { + channel: Channel; + user: User; + survey: Survey; +}; + +// eslint-disable-next-line no-unused-vars +export type HookOnReady = (data: { channel: Channel; user: User }) => void; + +export type HookOnSurveyShowed = ( + // eslint-disable-next-line no-unused-vars + data: HookCommonProperties & { + response: { + id: string; + items: ResponseItem[]; + }; + } +) => void; + +export type HookOnSurveyStarted = ( + // eslint-disable-next-line no-unused-vars + data: HookCommonProperties & { + response: { + id: string; + }; + } +) => void; + +export type HookOnQuestionReplied = ( + // eslint-disable-next-line no-unused-vars + data: HookCommonProperties & { + response: { + id: string; + status: null; + question: ResponseItemQuestion; + answer: ResponseItemAnswer; + items: ResponseItem[]; + }; + } +) => void; + +export type HookOnSurveyCompleted = ( + // eslint-disable-next-line no-unused-vars + data: HookCommonProperties & { + response: { + id: string; + items: ResponseItem[]; + }; + } +) => void; + +export type HookOnSurveyHidden = ( + // eslint-disable-next-line no-unused-vars + data: HookCommonProperties & { + response: { + id: string; + items: ResponseItem[]; + hide_reason: ResponseStatus; + }; + } +) => void; diff --git a/packages/screeb-sdk-browser/src/index.ts b/packages/screeb-sdk-browser/src/index.ts index c05ebe5..bb73100 100644 --- a/packages/screeb-sdk-browser/src/index.ts +++ b/packages/screeb-sdk-browser/src/index.ts @@ -1,59 +1,13 @@ -/** This is property types that are supported by Screeb. */ -export type PropertyType = number | boolean | string | Date | PropertyRecord; +import { + Hooks, + PropertyRecord, + ScreebFunction, + ScreebIdentityGetReturn, + ScreebObject, + ScreebOptions, +} from "./types"; -/** This is a property object that are supported by Screeb. */ -export type PropertyRecord = { - [key: string]: PropertyType | PropertyType[]; -}; - -/** - * Hooks - */ -export type Hooks = { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - [key: string]: any; -}; - -/** This is the Screeb tag options object. */ -export type ScreebOptions = { - /** If you're running Screeb tag in an iframe, please set the inner window here. */ - window?: Window; - /** Please don't do this. */ - screebEndpoint?: string; -}; - -// eslint-disable-next-line no-unused-vars -type ScreebFunction = (..._: unknown[]) => void | Promise; - -/** This is the Screeb object publicly exposed in browser `window`. */ -export type ScreebObject = ScreebFunction & { - q?: { - args: unknown[]; - // eslint-disable-next-line no-unused-vars - ko: (reason?: unknown) => void; - // eslint-disable-next-line no-unused-vars - ok: (value?: unknown) => void; - v: number; - }[]; -}; - -/** This is the object returned by the function `identityGet()`. */ -export type ScreebIdentityGetReturn = { - /** Anonymous id given to each user */ - anonymous_id: string; - /** The authenticated id assigned to the user. */ - user_id: string; - /** The current user session id */ - session_id: string; - /** The current user session start time */ - session_start: string; - /** The current user session end time */ - session_end: string; - /** The current channel id with which the tag was initialized */ - channel_id: string; - /** `true` if the tag us loaded, initialized and ready to rock */ - is_ready: boolean; -}; +export * from "./types"; declare const window: Window & { $screeb?: ScreebObject }; @@ -145,10 +99,8 @@ export const load = (options: ScreebOptions = {}) => * authenticated: true * }, * { - * "version": "1.0.0", - * "onReady": (payload) => { - * console.log("SDK is ready", payload); - * }, + * version: "1.0.0", + * onReady: (payload) => console.log("Screeb SDK is ready!", payload), * }, * ); * ``` @@ -455,10 +407,8 @@ export const surveyClose = () => callScreebCommand("survey.close"); * article_id: 42 * }, * { - * "version": "1.0.0", - * "onSurveyShowed": (payload) => { - * console.log("Survey showed", payload); - * }, + * version: "1.0.0", + * onSurveyShowed: (payload) => console.log("Survey showed", payload), * }, * ); * ``` diff --git a/packages/screeb-sdk-browser/src/types.ts b/packages/screeb-sdk-browser/src/types.ts new file mode 100644 index 0000000..fa6f489 --- /dev/null +++ b/packages/screeb-sdk-browser/src/types.ts @@ -0,0 +1,76 @@ +import { + HookOnQuestionReplied, + HookOnReady, + HookOnSurveyCompleted, + HookOnSurveyHidden, + HookOnSurveyShowed, + HookOnSurveyStarted, +} from "./hooks.types"; + +/** This is property types that are supported by Screeb. */ +export type PropertyType = number | boolean | string | Date | PropertyRecord; + +/** This is a property object that are supported by Screeb. */ +export type PropertyRecord = { + [key: string]: PropertyType | PropertyType[]; +}; + +/** This is the Screeb tag options object. */ +export type ScreebOptions = { + /** If you're running Screeb tag in an iframe, please set the inner window here. */ + window?: Window; + /** Please don't do this. */ + screebEndpoint?: string; +}; + +// eslint-disable-next-line no-unused-vars +export type ScreebFunction = (..._: unknown[]) => void | Promise; + +/** This is the Screeb object publicly exposed in browser `window`. */ +export type ScreebObject = ScreebFunction & { + q?: { + args: unknown[]; + // eslint-disable-next-line no-unused-vars + ko: (reason?: unknown) => void; + // eslint-disable-next-line no-unused-vars + ok: (value?: unknown) => void; + v: number; + }[]; +}; + +/** This is the object returned by the function `identityGet()`. */ +export type ScreebIdentityGetReturn = { + /** Anonymous id given to each user */ + anonymous_id: string; + /** The authenticated id assigned to the user. */ + user_id: string; + /** The current user session id */ + session_id: string; + /** The current user session start time */ + session_start: string; + /** The current user session end time */ + session_end: string; + /** The current channel id with which the tag was initialized */ + channel_id: string; + /** `true` if the tag is loaded, initialized and ready to rock */ + is_ready: boolean; +}; + +/** This is the Screeb tag hooks object. */ +export type Hooks = { + /** This defines the version of hooks and their data */ + version: string; + + /** This hook is triggered when Screeb SD is loaded, initialized and ready to rock */ + onReady?: HookOnReady; + /** This hook is triggered when a survey is displayed on screen (also triggered when page is reloaded) */ + onSurveyShowed?: HookOnSurveyShowed; + /** This hook is triggered when a survey is started */ + onSurveyStarted?: HookOnSurveyStarted; + /** This hook is triggered when a question is answered */ + onQuestionReplied?: HookOnQuestionReplied; + /** This hook is triggered when a survey is completed */ + onSurveyCompleted?: HookOnSurveyCompleted; + /** This hook is triggered when a survey is hidden */ + onSurveyHidden?: HookOnSurveyHidden; +}; diff --git a/packages/screeb-sdk-react-example/src/main.tsx b/packages/screeb-sdk-react-example/src/main.tsx index da73d5f..17b7dc1 100644 --- a/packages/screeb-sdk-react-example/src/main.tsx +++ b/packages/screeb-sdk-react-example/src/main.tsx @@ -19,8 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( org_size: 20, }} hooks={{ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onReady: (payload: any) => { + onReady: (payload) => { // eslint-disable-next-line no-console console.log("onReady", payload); },