@ada-support/embed2 1.0.35 → 1.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,165 +1,28 @@
1
1
  # Embed 2
2
2
 
3
- Embed 2 helps clients to setup Ada Web Chat in their web application. These docs are for internal-use only; for client-facing docs check out our [docs repo](https://adasupport.github.io/documentation/#embed2).
4
-
5
- ## Setup
6
-
7
- These instructions will get Embed 2 up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
8
-
9
- ### 1. Start Embed 2
10
- Run this command:
11
- ```
12
- yarn && yarn start
13
- ```
14
- This will install dependencies and start the webpack dev server.
15
-
16
- ### 2. Open the example page
17
- 🎉 Head over to http://test.localhost:9001/example/. You should now be good to go! 🎉
18
-
19
- Instead of `test`, you can also use a different handle to use a different local bot instead.
20
-
21
- If you are new to Embed 2, the next step will be to familiarize yourself with its architecture. You can find `README.md`s in each of the major directories that will explain how it works.
22
-
23
- You can also test different configuration options in `example/index.html`.
24
-
25
- Finally, it is highly recommend that you install the following plugins (or equivalent) into your text editor / IDE:
26
- - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
27
- - [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
28
-
29
- ## Tooling
30
-
31
- ### Linting and Type Checking
32
-
33
- You can check for ESLint violations and type errors by running:
34
-
35
- ```
36
- yarn lint
37
- ```
38
-
39
- This will also run automatically during CI.
40
-
41
- ### Sentry
42
-
43
- If you want to run Sentry locally, you will need to set the value for the Sentry DSN in your .env file. Create and open your .env file:
44
-
45
- ```
46
- cp .env.example .env
47
- vim .env
48
- ```
49
-
50
- Find the Sentry DSN for the Embed 2 project at https://docs.sentry.io/error-reporting/configuration/?platform=browser and selecting "Embed" from the dropdown menu above the code snippet. Copy this value (it should be a string that looks like a URL) to the .env file.
51
-
52
- ### Checking Bundle Size
53
-
54
- Embed 2 is the entry to Ada's web chat, and is downloaded more than any other Ada script. As such, maintaining a small bundle size is extremely important. We do this by leveraging the browser cache, and using lightweight modules. Additionally, separate `modern` and `legacy` bundles are generated, so the majority of users who use new browser versions do not need to fetch superfluous polyfills.
55
-
56
- Bundle size should be checked periodically. You can check the bundle size by running:
57
-
58
- ```
59
- yarn bundle-report:modern
60
- ```
61
-
62
- and
63
-
64
- ```
65
- yarn bundle-report:legacy
66
- ```
67
-
68
- You will notice that many tabs are opened when running this command. Because Embed 2 is split between many sub-applications (representing framed components), a bundle analyzer is run for each application. The total bundle size is equal to sum of bundle sizes, plus external dependencies.
69
-
70
- ## Testing
71
-
72
- ### Unit testing
73
-
74
- Unit testing is done with Karma and Jasmine. Tests can be run on a local Chrome browser with:
75
-
76
- ```
77
- yarn test
78
- ```
79
-
80
- ### End-to-end testing
81
-
82
- #### TestCafe
83
-
84
- TestCafe can run E2E tests on real browsers via LambdaTest. These tests will run automatically during the CI pipeline, but can also be run locally.
85
-
86
- To run locally, you will first need to add `LT_USERNAME` and `LT_ACCESS_KEY` to your `.env` file. You can find your username and access key in the LambdaTest dashboard. If you have not used LambdaTest before, follow this setup guide [here](https://www.notion.so/adasupport/Cross-Browser-Testing-e141ba6682c0476ca96d329b53fc0bb2).
87
-
88
-
89
- Once you have added valid keys, you can now run TestCafe with:
3
+ Embed 2 allows clients to setup Ada Web Chat in their web application. For further information on how to use Embed, check out our [docs repo](https://adasupport.github.io/documentation/#embed2).
90
4
 
5
+ ## 1. Installation
6
+ NPM:
91
7
  ```
92
- yarn ci-testcafe
8
+ npm install @ada-support/embed2
93
9
  ```
94
-
95
- Note that this is the same command that runs during CI, and will make requests against the production API. If you would like to run against your local API, you can run:
96
-
10
+ Yarn:
97
11
  ```
98
- yarn tc
12
+ yarn add @ada-support/embed2
99
13
  ```
14
+ This will install the Embed 2 package and it's dependencies.
100
15
 
101
- #### Cypress
102
-
103
- Cypress E2E tests can be run using:
104
16
 
17
+ ## 2. Usage
18
+ First, import Embed 2 into your App:
105
19
  ```
106
- yarn ci-cypress
20
+ import adaEmbed from "@ada-support/embed2";
107
21
  ```
108
-
109
- ## Deployment
110
-
111
- ### Steps to Deploy
112
-
113
- Follow instructions listed on [this notion page](https://www.notion.so/adasupport/Deploying-Embed-2-71e2775038cd47c78732bf04bf1d0525)
114
-
115
- ### Beta
116
- Deployment of the beta script is handled automatically by CircleCI when merging a branch into `master`. Once merged, two different scripts will be added to the Ada CDN:
117
-
22
+ Second, place the code below to start Embed 2 when the DOM is ready:
118
23
  ```
119
- # Verisoned
120
-
121
- https://static.ada.support/embed-beta/legacy/entry/<FIRST 7 CHAR OF COMMIT HASH>/embed2.beta.js
24
+ adaEmbed.start({
25
+ handle: "bot-handle",
26
+ });
122
27
  ```
123
-
124
- And:
125
-
126
- ```
127
- # Verisonless
128
-
129
- https://static.ada.support/embed2.beta.js
130
- ```
131
-
132
- Before deploying to production, you should manually smoke test to make sure the beta script is working [here](https://jsfiddle.net/gn3ukc4r/show/).
133
-
134
- ### Production
135
- Once a beta script has been created, a production deployment will be "held" until approved by an Embed 2 admin. To approve the deploy, open the CircleCI job in question, and click on "Approve Job". You can read more about manual approval [here](https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval).
136
-
137
- Deploying production will create the following scripts:
138
-
139
- ```
140
- # Verisoned
141
-
142
- https://static.ada.support/embed/legacy/entry/<FIRST 7 CHAR OF COMMIT HASH>/embed2.js
143
- ```
144
-
145
- And:
146
-
147
- ```
148
- # Verisonless
149
-
150
- https://static.ada.support/embed2.js
151
- ```
152
-
153
- If you require access to the [Embed Procuction Deploys](https://github.com/orgs/AdaSupport/teams/embed-production-deploys) team (needed for production deployment), please reach out to an Engineering admin.
154
-
155
- ## Versioning
156
- We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [releases on this repository](https://github.com/AdaSupport/embed-frames/releases).
157
-
158
- ## Architecture
159
- ![Frontend Architecture@2x(1)](https://user-images.githubusercontent.com/9045634/97473287-32b0e100-1921-11eb-98c6-d3059d6f24a8.png)
160
-
161
- Loom explanation: <https://www.loom.com/share/22f7b0060b3f46c8b3781afb1aae4b89>
162
-
163
-
164
- ## Gotchas
165
- There are artifical timeouts in the application that may cause you not to see any errors with what you are working on. The longest timeout is 60000ms (60s). Please ensure you shorten this locally when you are testing your work. You can adjust this here: `src/common/constants/events.ts`
28
+ In the example above the `handle` key is a part of `AdaSettings`. To learn more about other settings, consult the [API reference](https://adasupport.github.io/documentation/#api-reference).
@@ -12,5 +12,5 @@ interface TriggerCampaignImplParams {
12
12
  messageService: MessageService;
13
13
  }
14
14
  export declare function triggerCampaignImpl({ adaSettings, chatterToken, campaign, ignoreStatus, ignoreFrequency, clearCampaignToTrigger, messageService, }: TriggerCampaignImplParams): void;
15
- export declare const getCampaignToTrigger: (adaSettings: StartOptions, chatterToken: string, marketingCampaigns: MarketingCampaign[], options: EvaluateCampaignParams) => MarketingCampaign;
15
+ export declare const getCampaignToTrigger: (adaSettings: StartOptions, marketingCampaigns: MarketingCampaign[] | undefined, options: EvaluateCampaignParams, onlyBasic: boolean) => MarketingCampaign;
16
16
  export {};
@@ -20,6 +20,7 @@ export declare class Embed {
20
20
  unmountCallback: () => void;
21
21
  initializationReject: (error: Error) => void;
22
22
  initializationResolve: () => void;
23
+ private debounceCampaignTrigger;
23
24
  static embed2Version: string;
24
25
  constructor(adaSettings: StartOptions, unmountCallback: () => void);
25
26
  renderPreactApp(): void;
@@ -20,5 +20,5 @@ export default class FC extends Channel {
20
20
  private static isMessageEvent;
21
21
  postMessage<T extends EmbedEvent>(eventName: T, data?: PayloadByEvent[T], id?: string, status?: FetchEventStatusType): void;
22
22
  addEventListener(handler: (type: string, payload?: object, id?: string, status?: FetchEventStatusType) => void): Refhandler;
23
- constructObjectToSend(type?: string, payload?: unknown, id?: string, status?: FetchEventStatusType): string;
23
+ constructObjectToSend(eventName?: string, payload?: unknown, id?: string, status?: FetchEventStatusType): string;
24
24
  }