@financial-times/cmp-client 2.2.3-alpha → 3.0.1-alpha

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.
Files changed (7) hide show
  1. package/README.md +84 -32
  2. package/dist/index.cjs +65 -2
  3. package/dist/index.js +65 -2
  4. package/dist/src/lib/properties.d.ts +72 -0
  5. package/dist/src/lib/properties.d.ts.map +1 -1
  6. package/docs/overview.jpg +0 -0
  7. package/package.json +3 -2
package/README.md CHANGED
@@ -2,24 +2,23 @@
2
2
 
3
3
  A client-side package to help you add a CMP (currently provided by Sourcepoint) to your application.
4
4
 
5
- ## Installation
5
+ <details>
6
+ <summary>How it works</summary>
6
7
 
7
- Install the package from npm:
8
+ [(Source on Confluence)](https://financialtimes.atlassian.net/wiki/spaces/ADS/pages/8151990292/New+Consent+Migration+Guide+for+teams#What-happens-when-a-user-visits-%5BinlineCard%5D--in-the-new-consent-framework%3F)
8
9
 
9
- ```copy
10
- npm install @financial-times/cmp-client
11
- ```
10
+ ![CMP Client Overview](./docs/overview.jpg)
12
11
 
13
- There are reference implementations that you can look at in `src/examples/cmp-client`.
12
+ </details>
14
13
 
15
- To see a demo in action in your browser, run:
14
+ ## Installation
15
+
16
+ Install the package from npm:
16
17
 
17
18
  ```copy
18
- npm run dev -w src/examples/cmp-client
19
+ npm install @financial-times/cmp-client
19
20
  ```
20
21
 
21
- Visit https://localhost:5173 (see setup details in `src/examples/cmp-client`) to interact with the banner and see how cookies are set accordingly
22
-
23
22
  ## Usage
24
23
 
25
24
  ```js
@@ -82,23 +81,6 @@ We will be adding new properties (websites under FT group) and their configs as
82
81
  </tbody>
83
82
  <table/>
84
83
 
85
- ## Responding to CMP events
86
-
87
- If you need to do additional work in response to events emitted by the CMP Vendor module you can do so via the `window._sp_.addEventListener` method:
88
-
89
- ```js
90
- window._sp_.addEventListener("onMessageReady", (messageType) => {... });
91
- window._sp_.addEventListener("onConsentReady", (legislation, consentUUID, consentString, consentMeta) => { ... });
92
- ```
93
-
94
- > [!Note]
95
- > The `onConsentReady` event is fired
96
- >
97
- > 1. As soon as the CMP has finished loading and the user's consent choices are available
98
- > 1. Subsequently, whenever the user's consent choices change
99
-
100
- See the [Sourcepoint docs](https://docs.sourcepoint.com/hc/en-us/articles/4412176150035-Queue-event-callbacks) for a full listing of the events you can listen for and the arguments passed to the callbacks.
101
-
102
84
  ### Available Properties (constantly being updated)
103
85
 
104
86
  <table>
@@ -121,12 +103,65 @@ See the [Sourcepoint docs](https://docs.sourcepoint.com/hc/en-us/articles/441217
121
103
  <td><code>FT_DOTCOM_PROD</code></td>
122
104
  <td>Configuration preset for all properties on FT.com domain operating in a production environment - <code>https://*.ft.com</code></td>
123
105
  </tr>
106
+ <tr>
107
+ <td><code>SP_THE_BANKER</code></td>
108
+ <td>Configuration preset for properties on thebanker.com domain</td>
109
+ </tr>
110
+ <tr>
111
+ <td><code>SP_PWMNET</code></td>
112
+ <td>Configuration preset for properties on pwmnet.com domain</td>
113
+ </tr>
114
+ <tr>
115
+ <td><code>SP_FDI_INTELLIGENCE</code></td>
116
+ <td>Configuration preset for properties on fdiintelligence.com domain</td>
117
+ </tr>
118
+ <tr>
119
+ <td><code>SP_BANKING_RR</code></td>
120
+ <td>Configuration preset for properties on bankingriskandregulation.com domain</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>SP_SUSTAINABLE_VIEWS</code></td>
124
+ <td>Configuration preset for properties on sustainableviews.com domain</td>
125
+ </tr>
126
+ <tr>
127
+ <td><code>SP_FT_ADVISER</code></td>
128
+ <td>Configuration preset for properties on ftadviser.com domain</td>
129
+ </tr>
130
+ <tr>
131
+ <td><code>SP_INVESTORS_CHRONICLE</code></td>
132
+ <td>Configuration preset for properties on investorschronicle.co.uk domain</td>
133
+ </tr>
134
+ <tr>
135
+ <td><code>MM_IGNITES_ASIA</code></td>
136
+ <td>Configuration preset for properties on ignitesasia.com domain</td>
137
+ </tr>
138
+ <tr>
139
+ <td><code>MM_IGNITES_EUROPE</code></td>
140
+ <td>Configuration preset for properties on igniteseurope.com domain</td>
141
+ </tr>
124
142
  </tbody>
125
143
  <table/>
126
144
 
145
+ ## Responding to CMP events
146
+
147
+ If you need to do additional work in response to events emitted by the CMP Vendor module – e.g. initialising vendor packages that match the purposes granted by the user – you can do so via the `window._sp_.addEventListener` method:
148
+
149
+ ```js
150
+ window._sp_.addEventListener("onMessageReady", (messageType) => {... });
151
+ window._sp_.addEventListener("onConsentReady", (legislation, consentUUID, consentString, consentMeta) => { ... });
152
+ ```
153
+
154
+ > [!Note]
155
+ > The `onConsentReady` event is fired
156
+ >
157
+ > 1. As soon as the CMP has finished loading and the user's consent choices are available
158
+ > 1. Subsequently, whenever the user's consent choices change
159
+
160
+ See the [Sourcepoint docs](https://docs.sourcepoint.com/hc/en-us/articles/4412176150035-Queue-event-callbacks) for a full listing of the events you can listen for and the arguments passed to the callbacks.
161
+
127
162
  ## Debugging
128
163
 
129
- You can verify that the CMP is correctly configured with the `debug` module, as deomstrated in [the CMP Client example](src/examples/src/scripts/cmp-client.ts):
164
+ You can verify that the CMP is correctly configured using the `logCmpEvents` method exported from the `debug` module:
130
165
 
131
166
  ```js
132
167
  import { debug } from "@financial-times/cmp-client";
@@ -134,10 +169,27 @@ import { debug } from "@financial-times/cmp-client";
134
169
  debug.logCmpEvents();
135
170
  ```
136
171
 
137
- If everything's working then when running the demo app you'll see the CMP log its lifecycle events to the console, _even if its UI isn't displayed_.
172
+ If everything's working then you'll see the CMP Module log its lifecycle events to the console, _even if its UI isn't displayed_.
173
+
174
+ This can easily happen when you've made a previous consent choice and the CMP is now picking it up from local storage. For this reason we recommend running in an incognito window during development.
175
+
176
+ > [!Note]
177
+ > Please ensure that your app always uses the latest version of the CMP Client package.
178
+ >
179
+ > You can check the version your live app is using by running the following in the browser console:
180
+ >
181
+ > ```copy
182
+ > window.FT_CMP_CLIENT_VERSION
183
+ > ```
184
+
185
+ ## Development
138
186
 
139
- This can easily happen when you've made a previous consent choice and the CMP is now picking it up from local storage. We recommend running in an incognito window during development.
187
+ If you have access to the source on Github you can take a look at [the reference implementations in `src/examples/cmp-client`](https://github.com/Financial-Times/privacy/tree/main/src/examples).
140
188
 
141
- ## How it works
189
+ To see a demo in action in your browser, run:
142
190
 
143
- The overview of how the CMP client works is diagrammatically [presented here](https://financialtimes.atlassian.net/wiki/spaces/ADS/pages/8151990292/New+Consent+Migration+Guide+for+teams#What-happens-when-a-user-visits-%5BinlineCard%5D--in-the-new-consent-framework%3F)
191
+ ```copy
192
+ npm run dev -w src/examples/cmp-client
193
+ ```
194
+
195
+ Visit https://localhost:5173 (see setup details in `src/examples/cmp-client`) to interact with the banner and see how cookies are set accordingly
package/dist/index.cjs CHANGED
@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
7
7
  };
8
8
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
9
9
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
10
- const version = "2.2.3-alpha";
10
+ const version = "3.0.1-alpha";
11
11
  const events = {
12
12
  onMessageChoiceSelect: (...args) => {
13
13
  console.log("[debug] onMessageChoiceSelect", args);
@@ -69,10 +69,73 @@ const FT_DOTCOM_PROD = {
69
69
  baseEndpoint: "https://consent-manager.ft.com",
70
70
  propertyId: 31642
71
71
  };
72
+ const SP_PWMNET = {
73
+ ...defaults,
74
+ accountId: 1906,
75
+ baseEndpoint: "https://consent-manager.pwmnet.com",
76
+ propertyId: 33414
77
+ };
78
+ const SP_FDI_INTELLIGENCE = {
79
+ ...defaults,
80
+ accountId: 1906,
81
+ baseEndpoint: "https://consent-manager.fdiintelligence.com",
82
+ propertyId: 34061
83
+ };
84
+ const SP_THE_BANKER = {
85
+ ...defaults,
86
+ accountId: 1906,
87
+ baseEndpoint: "https://consent-manager.thebanker.com",
88
+ propertyId: 34060
89
+ };
90
+ const SP_BANKING_RR = {
91
+ ...defaults,
92
+ accountId: 1906,
93
+ baseEndpoint: "https://consent-manager.bankingriskandregulation.com",
94
+ propertyId: 34059
95
+ };
96
+ const SP_SUSTAINABLE_VIEWS = {
97
+ ...defaults,
98
+ accountId: 1906,
99
+ baseEndpoint: "https://consent-manager.sustainableviews.com",
100
+ propertyId: 34058
101
+ };
102
+ const SP_FT_ADVISER = {
103
+ ...defaults,
104
+ accountId: 1906,
105
+ baseEndpoint: "https://consent-manager.ftadviser.com",
106
+ propertyId: 33416
107
+ };
108
+ const SP_INVESTORS_CHRONICLE = {
109
+ ...defaults,
110
+ accountId: 1906,
111
+ baseEndpoint: "https://consent-manager.investorschronicle.co.uk",
112
+ propertyId: 33415
113
+ };
114
+ const MM_IGNITES_ASIA = {
115
+ ...defaults,
116
+ accountId: 1906,
117
+ baseEndpoint: "https://cdn.privacy-mgmt.com",
118
+ propertyId: 33947
119
+ };
120
+ const MM_IGNITES_EUROPE = {
121
+ ...defaults,
122
+ accountId: 1906,
123
+ baseEndpoint: "https://cdn.privacy-mgmt.com",
124
+ propertyId: 33946
125
+ };
72
126
  const properties = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
73
127
  __proto__: null,
74
128
  FT_DOTCOM_PROD,
75
- FT_DOTCOM_TEST
129
+ FT_DOTCOM_TEST,
130
+ MM_IGNITES_ASIA,
131
+ MM_IGNITES_EUROPE,
132
+ SP_BANKING_RR,
133
+ SP_FDI_INTELLIGENCE,
134
+ SP_FT_ADVISER,
135
+ SP_INVESTORS_CHRONICLE,
136
+ SP_PWMNET,
137
+ SP_SUSTAINABLE_VIEWS,
138
+ SP_THE_BANKER
76
139
  }, Symbol.toStringTag, { value: "Module" }));
77
140
  function updateFooterLinkCMP() {
78
141
  const cookieLink = document.querySelector(
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
8
- const version = "2.2.3-alpha";
8
+ const version = "3.0.1-alpha";
9
9
  const events = {
10
10
  onMessageChoiceSelect: (...args) => {
11
11
  console.log("[debug] onMessageChoiceSelect", args);
@@ -67,10 +67,73 @@ const FT_DOTCOM_PROD = {
67
67
  baseEndpoint: "https://consent-manager.ft.com",
68
68
  propertyId: 31642
69
69
  };
70
+ const SP_PWMNET = {
71
+ ...defaults,
72
+ accountId: 1906,
73
+ baseEndpoint: "https://consent-manager.pwmnet.com",
74
+ propertyId: 33414
75
+ };
76
+ const SP_FDI_INTELLIGENCE = {
77
+ ...defaults,
78
+ accountId: 1906,
79
+ baseEndpoint: "https://consent-manager.fdiintelligence.com",
80
+ propertyId: 34061
81
+ };
82
+ const SP_THE_BANKER = {
83
+ ...defaults,
84
+ accountId: 1906,
85
+ baseEndpoint: "https://consent-manager.thebanker.com",
86
+ propertyId: 34060
87
+ };
88
+ const SP_BANKING_RR = {
89
+ ...defaults,
90
+ accountId: 1906,
91
+ baseEndpoint: "https://consent-manager.bankingriskandregulation.com",
92
+ propertyId: 34059
93
+ };
94
+ const SP_SUSTAINABLE_VIEWS = {
95
+ ...defaults,
96
+ accountId: 1906,
97
+ baseEndpoint: "https://consent-manager.sustainableviews.com",
98
+ propertyId: 34058
99
+ };
100
+ const SP_FT_ADVISER = {
101
+ ...defaults,
102
+ accountId: 1906,
103
+ baseEndpoint: "https://consent-manager.ftadviser.com",
104
+ propertyId: 33416
105
+ };
106
+ const SP_INVESTORS_CHRONICLE = {
107
+ ...defaults,
108
+ accountId: 1906,
109
+ baseEndpoint: "https://consent-manager.investorschronicle.co.uk",
110
+ propertyId: 33415
111
+ };
112
+ const MM_IGNITES_ASIA = {
113
+ ...defaults,
114
+ accountId: 1906,
115
+ baseEndpoint: "https://cdn.privacy-mgmt.com",
116
+ propertyId: 33947
117
+ };
118
+ const MM_IGNITES_EUROPE = {
119
+ ...defaults,
120
+ accountId: 1906,
121
+ baseEndpoint: "https://cdn.privacy-mgmt.com",
122
+ propertyId: 33946
123
+ };
70
124
  const properties = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
71
125
  __proto__: null,
72
126
  FT_DOTCOM_PROD,
73
- FT_DOTCOM_TEST
127
+ FT_DOTCOM_TEST,
128
+ MM_IGNITES_ASIA,
129
+ MM_IGNITES_EUROPE,
130
+ SP_BANKING_RR,
131
+ SP_FDI_INTELLIGENCE,
132
+ SP_FT_ADVISER,
133
+ SP_INVESTORS_CHRONICLE,
134
+ SP_PWMNET,
135
+ SP_SUSTAINABLE_VIEWS,
136
+ SP_THE_BANKER
74
137
  }, Symbol.toStringTag, { value: "Module" }));
75
138
  function updateFooterLinkCMP() {
76
139
  const cookieLink = document.querySelector(
package/dist/src/lib/properties.d.ts CHANGED
@@ -19,4 +19,76 @@ export declare const FT_DOTCOM_PROD: {
19
19
  gdpr: {};
20
20
  ccpa: {};
21
21
  };
22
+ export declare const SP_PWMNET: {
23
+ accountId: number;
24
+ baseEndpoint: string;
25
+ propertyId: number;
26
+ joinHref: boolean;
27
+ gdpr: {};
28
+ ccpa: {};
29
+ };
30
+ export declare const SP_FDI_INTELLIGENCE: {
31
+ accountId: number;
32
+ baseEndpoint: string;
33
+ propertyId: number;
34
+ joinHref: boolean;
35
+ gdpr: {};
36
+ ccpa: {};
37
+ };
38
+ export declare const SP_THE_BANKER: {
39
+ accountId: number;
40
+ baseEndpoint: string;
41
+ propertyId: number;
42
+ joinHref: boolean;
43
+ gdpr: {};
44
+ ccpa: {};
45
+ };
46
+ export declare const SP_BANKING_RR: {
47
+ accountId: number;
48
+ baseEndpoint: string;
49
+ propertyId: number;
50
+ joinHref: boolean;
51
+ gdpr: {};
52
+ ccpa: {};
53
+ };
54
+ export declare const SP_SUSTAINABLE_VIEWS: {
55
+ accountId: number;
56
+ baseEndpoint: string;
57
+ propertyId: number;
58
+ joinHref: boolean;
59
+ gdpr: {};
60
+ ccpa: {};
61
+ };
62
+ export declare const SP_FT_ADVISER: {
63
+ accountId: number;
64
+ baseEndpoint: string;
65
+ propertyId: number;
66
+ joinHref: boolean;
67
+ gdpr: {};
68
+ ccpa: {};
69
+ };
70
+ export declare const SP_INVESTORS_CHRONICLE: {
71
+ accountId: number;
72
+ baseEndpoint: string;
73
+ propertyId: number;
74
+ joinHref: boolean;
75
+ gdpr: {};
76
+ ccpa: {};
77
+ };
78
+ export declare const MM_IGNITES_ASIA: {
79
+ accountId: number;
80
+ baseEndpoint: string;
81
+ propertyId: number;
82
+ joinHref: boolean;
83
+ gdpr: {};
84
+ ccpa: {};
85
+ };
86
+ export declare const MM_IGNITES_EUROPE: {
87
+ accountId: number;
88
+ baseEndpoint: string;
89
+ propertyId: number;
90
+ joinHref: boolean;
91
+ gdpr: {};
92
+ ccpa: {};
93
+ };
22
94
  //# sourceMappingURL=properties.d.ts.map
package/dist/src/lib/properties.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../../../src/lib/properties.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;CAK1B,CAAC"}
1
+ {"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../../../src/lib/properties.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;CAK/B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAKzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAKzB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;CAKhC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAKzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;CAKlC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;CAK3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;CAK7B,CAAC"}
package/docs/overview.jpg ADDED
Binary file
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@financial-times/cmp-client",
3
- "version": "2.2.3-alpha",
3
+ "version": "3.0.1-alpha",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist",
8
- "typings"
8
+ "typings",
9
+ "docs"
9
10
  ],
10
11
  "main": "./dist/index.cjs",
11
12
  "module": "./dist/index.js",