@financial-times/n-myft-ui 30.4.5 → 31.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/.circleci/config.yml +11 -11
  2. package/.circleci/shared-helpers/helper-setup-heroku-cli +2 -2
  3. package/Makefile +8 -2
  4. package/build-state/npm-shrinkwrap.json +884 -871
  5. package/components/jsx/follow-plus-instant-alerts/index.js +16 -0
  6. package/components/jsx/preferences-modal/index.js +35 -10
  7. package/package.json +35 -33
package/components/jsx/follow-plus-instant-alerts/index.js CHANGED
@@ -44,7 +44,22 @@ const instantAlertsIconUpdate = ({ event, followPlusInstantAlerts }) => {
44
44
  toggleInstantAlertsClass({instantAlertsOn, followPlusInstantAlerts });
45
45
  };
46
46
 
47
+ const instantAlertsIconOff = ({ event, followPlusInstantAlerts }) => {
48
+ const modalConceptId = followPlusInstantAlerts.dataset.conceptId;
49
+ if (!event || !modalConceptId) {
50
+ return;
51
+ }
47
52
 
53
+ const currentConcept = event.detail.subject === modalConceptId;
54
+ if (!currentConcept) {
55
+ return;
56
+ }
57
+
58
+ toggleInstantAlertsClass({
59
+ instantAlertsOn: false,
60
+ followPlusInstantAlerts,
61
+ });
62
+ };
48
63
 
49
64
 
50
65
  const sendModalToggleEvent = ({ followPlusInstantAlerts }) => {
@@ -73,4 +88,5 @@ export default () => {
73
88
  document.body.addEventListener('myft.user.followed.concept.load', (event) => instantAlertsIconLoad({event, followPlusInstantAlerts}));
74
89
 
75
90
  document.body.addEventListener('myft.user.followed.concept.update', (event) => instantAlertsIconUpdate({event, followPlusInstantAlerts}));
91
+ document.body.addEventListener('myft.user.followed.concept.remove', (event) => instantAlertsIconOff({ event, followPlusInstantAlerts }));
76
92
  };
package/components/jsx/preferences-modal/index.js CHANGED
@@ -45,6 +45,16 @@ const positionModal = ({ event, preferencesModal } = {}) => {
45
45
  }
46
46
  };
47
47
 
48
+ const toggleCheckboxStatus = ({ instantAlertsCheckbox, isChecked }) => {
49
+ if (isChecked) {
50
+ instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
51
+ instantAlertsCheckbox.checked = true;
52
+ } else {
53
+ instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
54
+ instantAlertsCheckbox.checked = false;
55
+ }
56
+ }
57
+
48
58
  const tracking = (conceptId) => {
49
59
  const trackingData = {
50
60
  category: 'component',
@@ -88,7 +98,6 @@ const removeTopic = async ({ event, conceptId, preferencesModal }) => {
88
98
  try {
89
99
  await myFtClient.remove('user', null, 'followed', 'concept', conceptId, { token: csrfToken });
90
100
  preferenceModalShowAndHide({ preferencesModal });
91
-
92
101
  } catch (error) {
93
102
  renderError({ message: 'Sorry, we are unable to remove this topic. Please try again later or try from <a href="/myft">myFT</a>', preferencesModal });
94
103
  }
@@ -144,13 +153,11 @@ const setCheckboxForAlertConcept = ({ event, preferencesModal }) => {
144
153
  // 2. the said concept has instant alert enabled
145
154
  // if so, check the checkbox within the modal
146
155
  const currentConcept = event.detail.items.find(item => item && item.uuid === conceptId);
147
- if (currentConcept && currentConcept._rel && currentConcept._rel.instant) {
148
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
149
- instantAlertsCheckbox.checked = true;
150
- } else {
151
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
152
- instantAlertsCheckbox.checked = false;
153
- }
156
+ const isChecked = currentConcept && currentConcept._rel && currentConcept._rel.instant;
157
+ toggleCheckboxStatus({
158
+ instantAlertsCheckbox,
159
+ isChecked,
160
+ });
154
161
  };
155
162
 
156
163
  const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModal }) => {
@@ -166,11 +173,13 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
166
173
  token: csrfToken
167
174
  };
168
175
 
176
+ toggleCheckboxStatus({
177
+ instantAlertsCheckbox,
178
+ isChecked: instantAlertsCheckbox.checked,
179
+ });
169
180
  if (instantAlertsCheckbox.checked) {
170
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-off';
171
181
  data._rel = {instant: 'true'};
172
182
  } else {
173
- instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
174
183
  data._rel = {instant: 'false'};
175
184
  }
176
185
 
@@ -190,6 +199,21 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
190
199
  instantAlertsCheckbox.removeAttribute('disabled');
191
200
  };
192
201
 
202
+ const setCheckboxForAlertConceptToOff = ({ event, preferencesModal }) => {
203
+ const conceptId = preferencesModal.dataset.conceptId;
204
+ const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
205
+
206
+ const currentConcept = event.detail.subject === conceptId;
207
+ if (!currentConcept) {
208
+ return;
209
+ }
210
+
211
+ toggleCheckboxStatus({
212
+ instantAlertsCheckbox,
213
+ isChecked: false,
214
+ });
215
+ }
216
+
193
217
  export default () => {
194
218
  /**
195
219
  * This feature is part of a test
@@ -224,4 +248,5 @@ export default () => {
224
248
  document.addEventListener('myft.user.preferred.preference.load', (event) => getAlertsPreferences({ event, preferencesModal }));
225
249
 
226
250
  document.body.addEventListener('myft.user.followed.concept.load', (event) => setCheckboxForAlertConcept({ event, preferencesModal }));
251
+ document.body.addEventListener('myft.user.followed.concept.remove', (event) => setCheckboxForAlertConceptToOff({ event, preferencesModal }));
227
252
  };
package/package.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "name": "@financial-times/n-myft-ui",
3
- "version": "30.4.5",
3
+ "version": "31.0.0",
4
4
  "description": "Client side component for interaction with myft",
5
5
  "main": "server.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1",
8
8
  "commit": "commit-wizard",
9
- "prepare": "npx snyk protect || npx snyk protect -d || true",
10
- "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
9
+ "prepare": "npx snyk protect || npx snyk protect -d || true"
11
10
  },
12
11
  "repository": {
13
12
  "type": "git",
@@ -20,48 +19,48 @@
20
19
  },
21
20
  "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
22
21
  "devDependencies": {
23
- "@financial-times/dotcom-build-base": "^8.1.0",
24
- "@financial-times/dotcom-build-code-splitting": "^8.1.0",
25
- "@financial-times/dotcom-build-js": "^8.1.0",
26
- "@financial-times/dotcom-build-sass": "^8.1.0",
27
- "@financial-times/dotcom-server-handlebars": "^8.1.0",
28
- "@financial-times/n-express": "^27.5.0",
29
- "@financial-times/n-gage": "^8.3.2",
22
+ "@financial-times/dotcom-build-base": "^8.2.1",
23
+ "@financial-times/dotcom-build-code-splitting": "^8.2.1",
24
+ "@financial-times/dotcom-build-js": "^8.2.1",
25
+ "@financial-times/dotcom-build-sass": "^8.2.1",
26
+ "@financial-times/dotcom-server-handlebars": "^8.2.1",
27
+ "@financial-times/n-express": "^28.0.3",
28
+ "@financial-times/n-gage": "^9.0.1",
30
29
  "ascii-table": "0.0.9",
31
30
  "autoprefixer": "9.7.0",
32
31
  "aws-sdk-mock": "4.5.0",
33
32
  "babel-cli": "^6.26.0",
34
- "babel-core": "^6.2.1",
33
+ "babel-core": "^6.26.3",
35
34
  "babel-loader": "7.1.4",
36
35
  "babel-plugin-add-module-exports": "^0.3.0",
37
36
  "babel-plugin-transform-async-to-generator": "^6.24.1",
38
- "babel-plugin-transform-es2015-classes": "^6.8.0",
39
- "babel-plugin-transform-es2015-modules-commonjs": "^6.5.2",
37
+ "babel-plugin-transform-es2015-classes": "^6.24.1",
38
+ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
40
39
  "babel-plugin-transform-runtime": "^6.23.0",
41
40
  "babel-preset-env": "^1.7.0",
42
41
  "babel-preset-es2015": "^6.6.0",
43
42
  "babel-preset-react": "^6.24.1",
44
- "babel-runtime": "^6.9.2",
45
- "brotli": "^1.3.1",
46
- "chai": "4.2.0",
43
+ "babel-runtime": "^6.26.0",
44
+ "brotli": "^1.3.3",
45
+ "chai": "4.3.8",
47
46
  "chalk": "2.4.2",
48
- "check-engine": "^1.10.1",
47
+ "check-engine": "^1.12.0",
49
48
  "css-loader": "^0.23.1",
50
49
  "denodeify": "^1.2.1",
51
50
  "eslint": "6.5.1",
52
- "eslint-plugin-react": "^7.33.1",
51
+ "eslint-plugin-react": "^7.33.2",
53
52
  "extract-css-block-webpack-plugin": "^1.3.0",
54
53
  "fetch-mock": "^5.0.3",
55
- "handlebars": "^4.0.6",
56
- "handlebars-loader": "^1.4.0",
54
+ "handlebars": "^4.7.8",
55
+ "handlebars-loader": "^1.7.3",
57
56
  "http-server": "^0.11.1",
58
57
  "hyperons": "^0.4.1",
59
58
  "imports-loader": "0.8.0",
60
59
  "inject-loader": "^4.0.1",
61
60
  "karma": "4.4.1",
62
- "karma-browserstack-launcher": "1.5.1",
61
+ "karma-browserstack-launcher": "1.6.0",
63
62
  "karma-chai": "^0.1.0",
64
- "karma-chrome-launcher": "3.1.0",
63
+ "karma-chrome-launcher": "3.2.0",
65
64
  "karma-firefox-launcher": "^1.0.0",
66
65
  "karma-html-reporter": "^0.2.6",
67
66
  "karma-mocha": "^1.3.0",
@@ -71,22 +70,23 @@
71
70
  "karma-viewport": "^1.0.9",
72
71
  "karma-webpack": "^4.0.2",
73
72
  "lintspaces-cli": "^0.7.0",
74
- "lolex": "5.1.1",
73
+ "lolex": "5.1.2",
75
74
  "mocha": "6.2.2",
76
75
  "mockery": "2.1.0",
77
76
  "node-fetch": "2.6.0",
78
77
  "nodemon": "^1.9.2",
79
- "npm-prepublish": "^1.2.1",
80
- "pa11y-ci": "^2.1.1",
78
+ "npm-prepublish": "^1.2.3",
79
+ "pa11y-ci": "^3.0.1",
81
80
  "postcss-loader": "^0.9.1",
81
+ "puppeteer": "^18.2.1",
82
82
  "regenerator-runtime": "^0.13.3",
83
- "sass": "^1.51.0",
83
+ "sass": "^1.68.0",
84
84
  "semver": "6.3.0",
85
85
  "sinon": "^7.1.0",
86
- "sinon-chai": "^3.2.0",
87
- "snyk": "^1.216.5",
86
+ "sinon-chai": "^3.7.0",
87
+ "snyk": "^1.1227.0",
88
88
  "sucrase": "^3.34.0",
89
- "webpack": "^4.46.0",
89
+ "webpack": "^4.47.0",
90
90
  "webpack-cli": "^4.9.2"
91
91
  },
92
92
  "peerDependencies": {
@@ -104,7 +104,7 @@
104
104
  "react": "^16.14.0"
105
105
  },
106
106
  "dependencies": {
107
- "date-fns": "2.16.1",
107
+ "date-fns": "2.30.0",
108
108
  "fetchres": "^1.7.2",
109
109
  "form-serialize": "^0.7.2",
110
110
  "ftdomdelegate": "^4.0.6",
@@ -114,12 +114,14 @@
114
114
  "ready-state": "^2.0.5",
115
115
  "superstore-sync": "^2.1.1"
116
116
  },
117
+ "overrides": {
118
+ "puppeteer": "$puppeteer"
119
+ },
117
120
  "volta": {
118
- "node": "16.14.2",
119
- "npm": "7.24.2"
121
+ "node": "18.18.0"
120
122
  },
121
123
  "engines": {
122
- "node": "16.x",
124
+ "node": "16.x || 18.x",
123
125
  "npm": "7.x || 8.x || 9.x"
124
126
  },
125
127
  "x-dash": {