From 7d642208522d36ba6f9a10a533972d1448817be8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 17:35:48 +0000
Subject: [PATCH 01/82] chore(deps): update dependency babel-plugin-formatjs to
v10.5.14
---
package-lock.json | 8 ++++----
package.json | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 37648b1c..091761a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "13.0.28",
- "babel-plugin-formatjs": "10.5.13",
+ "babel-plugin-formatjs": "10.5.14",
"eslint-plugin-import": "2.29.1",
"glob": "7.2.3",
"history": "5.3.0",
@@ -7022,9 +7022,9 @@
}
},
"node_modules/babel-plugin-formatjs": {
- "version": "10.5.13",
- "resolved": "https://registry.npmjs.org/babel-plugin-formatjs/-/babel-plugin-formatjs-10.5.13.tgz",
- "integrity": "sha512-0dtMhoa6q0P5lUHBphLd8/y+CRlh5IG3Rq+Wk64kOEDwUVZF8xq1qMSjC3iw1wH4tmP2qTzBL+Bz1xEjyBd/ew==",
+ "version": "10.5.14",
+ "resolved": "https://registry.npmjs.org/babel-plugin-formatjs/-/babel-plugin-formatjs-10.5.14.tgz",
+ "integrity": "sha512-F++4Txa2bxrjbvspLxIXBDwcbKOftUvGgBDlz0hGe/fp7eXSPBJcu49xWj0/5VyMgSad4gKmBzWE5bfC27x19Q==",
"dependencies": {
"@babel/core": "^7.10.4",
"@babel/helper-plugin-utils": "^7.10.4",
diff --git a/package.json b/package.json
index 3aa662c1..02a75d25 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "13.0.28",
- "babel-plugin-formatjs": "10.5.13",
+ "babel-plugin-formatjs": "10.5.14",
"eslint-plugin-import": "2.29.1",
"glob": "7.2.3",
"history": "5.3.0",
From faf4ff84889a43ea21f5e03a4b30d47950c3c25a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 19:13:00 +0000
Subject: [PATCH 02/82] fix(deps): update dependency @edx/frontend-platform to
v7.1.3
---
package-lock.json | 24 ++++++++++++------------
package.json | 2 +-
2 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 091761a3..33a45337 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "AGPL-3.0",
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
- "@edx/frontend-platform": "7.1.2",
+ "@edx/frontend-platform": "7.1.3",
"@edx/openedx-atlas": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "6.5.1",
"@fortawesome/free-brands-svg-icons": "6.5.1",
@@ -2283,9 +2283,9 @@
}
},
"node_modules/@edx/frontend-platform": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-7.1.2.tgz",
- "integrity": "sha512-iKd8n6QoFjaATEfLOYe+gsJLHFoGWpZbX2Z4D6hM+OthTISE98K8+/7Gx7PAcT9vlJEA33OVIThncZYwYaaluw==",
+ "version": "7.1.3",
+ "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-7.1.3.tgz",
+ "integrity": "sha512-klw0pvFnAo8k8iVPxcR9WCPLaYqV2AFdnz1COF6hJ6gOIFuj2Mb5cuEy9di89INpZFO/0FEHq1IBVojm1rbJcg==",
"dependencies": {
"@cospired/i18n-iso-languages": "4.2.0",
"@formatjs/intl-pluralrules": "4.3.3",
@@ -2304,7 +2304,7 @@
"lodash.merge": "4.6.2",
"lodash.snakecase": "4.1.1",
"pubsub-js": "1.9.4",
- "react-intl": "6.6.2",
+ "react-intl": "6.6.3",
"universal-cookie": "4.0.4"
},
"bin": {
@@ -2573,9 +2573,9 @@
}
},
"node_modules/@formatjs/intl": {
- "version": "2.10.0",
- "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.0.tgz",
- "integrity": "sha512-X3xT9guVkKDS86EKV80lS0KxoazUglkJTGZO66sKY7otgl0VeStPA8B3u8UkKT47PexVV98fUzjpkchYmbe9nw==",
+ "version": "2.10.1",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.1.tgz",
+ "integrity": "sha512-dsLG15U7xDi8yzKf4hcAWSsCaez3XrjTO2oaRHPyHtXLm1aEzYbDw6bClo/HMHu+iwS5GbDqT3DV+hYP2ylScg==",
"dependencies": {
"@formatjs/ecma402-abstract": "1.18.2",
"@formatjs/fast-memoize": "2.2.0",
@@ -18118,13 +18118,13 @@
}
},
"node_modules/react-intl": {
- "version": "6.6.2",
- "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.2.tgz",
- "integrity": "sha512-IpW2IkLtGENSFlX3vfH11rjuCIsW0VyjT0Q1pPKMZPtT2z1FxLt4weFT5Ezti2TScT1xiyb3aQBFth9EB7jzAg==",
+ "version": "6.6.3",
+ "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.3.tgz",
+ "integrity": "sha512-vLKI0f+Q3pXD5szmCUPikTY7CJDPtxCBMG5YABQZ3IGEKzNB47zlvXyasUFfT25zpgQXeOfhRCdx4q6ubuR6bA==",
"dependencies": {
"@formatjs/ecma402-abstract": "1.18.2",
"@formatjs/icu-messageformat-parser": "2.7.6",
- "@formatjs/intl": "2.10.0",
+ "@formatjs/intl": "2.10.1",
"@formatjs/intl-displaynames": "6.6.6",
"@formatjs/intl-listformat": "7.5.5",
"@types/hoist-non-react-statics": "^3.3.1",
diff --git a/package.json b/package.json
index 02a75d25..57a05824 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
},
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
- "@edx/frontend-platform": "7.1.2",
+ "@edx/frontend-platform": "7.1.3",
"@edx/openedx-atlas": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "6.5.1",
"@fortawesome/free-brands-svg-icons": "6.5.1",
From cf2b50005bea8255194fc281303b1f1706153f01 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 10 Apr 2024 21:26:38 +0000
Subject: [PATCH 03/82] fix(deps): update font awesome to v6.5.2
---
package-lock.json | 36 ++++++++++++++++++------------------
package.json | 6 +++---
2 files changed, 21 insertions(+), 21 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 33a45337..c6bf1d4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,9 @@
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-platform": "7.1.3",
"@edx/openedx-atlas": "^0.6.0",
- "@fortawesome/fontawesome-svg-core": "6.5.1",
- "@fortawesome/free-brands-svg-icons": "6.5.1",
- "@fortawesome/free-solid-svg-icons": "6.5.1",
+ "@fortawesome/fontawesome-svg-core": "6.5.2",
+ "@fortawesome/free-brands-svg-icons": "6.5.2",
+ "@fortawesome/free-solid-svg-icons": "6.5.2",
"@fortawesome/react-fontawesome": "0.2.0",
"@openedx/paragon": "^22.1.1",
"@optimizely/react-sdk": "^2.9.1",
@@ -2694,45 +2694,45 @@
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
- "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+ "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
- "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+ "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
"hasInstallScript": true,
"dependencies": {
- "@fortawesome/fontawesome-common-types": "6.5.1"
+ "@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz",
- "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==",
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
"hasInstallScript": true,
"dependencies": {
- "@fortawesome/fontawesome-common-types": "6.5.1"
+ "@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
- "version": "6.5.1",
- "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
- "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+ "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
"hasInstallScript": true,
"dependencies": {
- "@fortawesome/fontawesome-common-types": "6.5.1"
+ "@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
diff --git a/package.json b/package.json
index 57a05824..28904b24 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,9 @@
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-platform": "7.1.3",
"@edx/openedx-atlas": "^0.6.0",
- "@fortawesome/fontawesome-svg-core": "6.5.1",
- "@fortawesome/free-brands-svg-icons": "6.5.1",
- "@fortawesome/free-solid-svg-icons": "6.5.1",
+ "@fortawesome/fontawesome-svg-core": "6.5.2",
+ "@fortawesome/free-brands-svg-icons": "6.5.2",
+ "@fortawesome/free-solid-svg-icons": "6.5.2",
"@fortawesome/react-fontawesome": "0.2.0",
"@openedx/paragon": "^22.1.1",
"@optimizely/react-sdk": "^2.9.1",
From 65e95a4d1bc5570fd0322d599f497b7d2312bd78 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 11 Apr 2024 01:48:26 +0000
Subject: [PATCH 04/82] chore(deps): update dependency @openedx/frontend-build
to v13.1.4
---
package-lock.json | 450 +++++++++++++++++++++++++++++++++++++++-------
package.json | 2 +-
2 files changed, 387 insertions(+), 65 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index c6bf1d4d..6ef5d2e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,7 +50,7 @@
"devDependencies": {
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
- "@openedx/frontend-build": "13.0.28",
+ "@openedx/frontend-build": "13.1.4",
"babel-plugin-formatjs": "10.5.14",
"eslint-plugin-import": "2.29.1",
"glob": "7.2.3",
@@ -2167,9 +2167,9 @@
}
},
"node_modules/@csstools/cascade-layer-name-parser": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.7.tgz",
- "integrity": "sha512-9J4aMRJ7A2WRjaRLvsMeWrL69FmEuijtiW1XlK/sG+V0UJiHVYUyvj9mY4WAXfU/hGIiGOgL8e0jJcRyaZTjDQ==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.9.tgz",
+ "integrity": "sha512-RRqNjxTZDUhx7pxYOBG/AkCVmPS3zYzfE47GEhIGkFuWFTQGJBgWOUUkKNo5MfxIfjDz5/1L3F3rF1oIsYaIpw==",
"funding": [
{
"type": "github",
@@ -2184,14 +2184,14 @@
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
- "@csstools/css-parser-algorithms": "^2.5.0",
- "@csstools/css-tokenizer": "^2.2.3"
+ "@csstools/css-parser-algorithms": "^2.6.1",
+ "@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@csstools/css-parser-algorithms": {
- "version": "2.5.0",
- "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz",
- "integrity": "sha512-abypo6m9re3clXA00eu5syw+oaPHbJTPapu9C4pzNsJ4hdZDzushT50Zhu+iIYXgEe1CxnRMn7ngsbV+MLrlpQ==",
+ "version": "2.6.1",
+ "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz",
+ "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==",
"funding": [
{
"type": "github",
@@ -2206,13 +2206,13 @@
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
- "@csstools/css-tokenizer": "^2.2.3"
+ "@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@csstools/css-tokenizer": {
- "version": "2.2.3",
- "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz",
- "integrity": "sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==",
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz",
+ "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==",
"funding": [
{
"type": "github",
@@ -2228,9 +2228,9 @@
}
},
"node_modules/@csstools/media-query-list-parser": {
- "version": "2.1.7",
- "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.7.tgz",
- "integrity": "sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ==",
+ "version": "2.1.9",
+ "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz",
+ "integrity": "sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==",
"funding": [
{
"type": "github",
@@ -2245,8 +2245,8 @@
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
- "@csstools/css-parser-algorithms": "^2.5.0",
- "@csstools/css-tokenizer": "^2.2.3"
+ "@csstools/css-parser-algorithms": "^2.6.1",
+ "@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@discoveryjs/json-ext": {
@@ -3932,9 +3932,9 @@
}
},
"node_modules/@openedx/frontend-build": {
- "version": "13.0.28",
- "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-13.0.28.tgz",
- "integrity": "sha512-9CSTpA7EGlC5lHaH03X3E1YpCp2SPsJ5It7905KimacGlliK0yf8FZIyluOCm3jSGQ5u/xjvZyw6xbl0XJCKZA==",
+ "version": "13.1.4",
+ "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-13.1.4.tgz",
+ "integrity": "sha512-YqXU6KgFnmDD/vGLvq/A9NP6R8lHfaEx64ajQC50ebFMlF3J7HWUruct4PuroeTupq9UAfRZUilzQHYQZjV08A==",
"dependencies": {
"@babel/cli": "7.22.5",
"@babel/core": "7.22.5",
@@ -3950,7 +3950,7 @@
"@fullhuman/postcss-purgecss": "5.0.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
"@svgr/webpack": "8.1.0",
- "autoprefixer": "10.4.16",
+ "autoprefixer": "10.4.19",
"babel-jest": "26.6.3",
"babel-loader": "9.1.3",
"babel-plugin-formatjs": "^10.4.0",
@@ -3964,19 +3964,20 @@
"dotenv-webpack": "8.0.1",
"eslint": "8.44.0",
"eslint-config-airbnb": "19.0.4",
+ "eslint-plugin-formatjs": "^4.12.2",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
- "express": "4.18.2",
+ "express": "^4.18.2",
"file-loader": "6.2.0",
"html-webpack-plugin": "5.6.0",
"identity-obj-proxy": "3.0.0",
"image-minimizer-webpack-plugin": "3.8.3",
"jest": "26.6.3",
"mini-css-extract-plugin": "1.6.2",
- "postcss": "8.4.33",
- "postcss-custom-media": "10.0.2",
+ "postcss": "8.4.38",
+ "postcss-custom-media": "10.0.4",
"postcss-loader": "7.3.4",
"postcss-rtlcss": "5.1.0",
"react-dev-utils": "12.0.1",
@@ -3988,11 +3989,11 @@
"source-map-loader": "4.0.2",
"style-loader": "3.3.4",
"url-loader": "4.1.1",
- "webpack": "5.89.0",
- "webpack-bundle-analyzer": "4.10.1",
- "webpack-cli": "5.1.4",
- "webpack-dev-server": "4.15.1",
- "webpack-merge": "5.10.0"
+ "webpack": "^5.89.0",
+ "webpack-bundle-analyzer": "^4.10.1",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-server": "^4.15.1",
+ "webpack-merge": "^5.10.0"
},
"bin": {
"fedx-scripts": "bin/fedx-scripts.js"
@@ -4792,9 +4793,9 @@
}
},
"node_modules/@openedx/frontend-build/node_modules/jest-snapshot/node_modules/semver": {
- "version": "7.5.4",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
- "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+ "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
"dependencies": {
"lru-cache": "^6.0.0"
},
@@ -6007,6 +6008,11 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
},
+ "node_modules/@types/picomatch": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-2.3.3.tgz",
+ "integrity": "sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg=="
+ },
"node_modules/@types/prettier": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
@@ -6074,6 +6080,11 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
},
+ "node_modules/@types/semver": {
+ "version": "7.5.8",
+ "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+ "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
+ },
"node_modules/@types/send": {
"version": "0.17.4",
"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -6140,6 +6151,229 @@
"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
"integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
},
+ "node_modules/@typescript-eslint/scope-manager": {
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+ "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+ "dependencies": {
+ "@typescript-eslint/types": "6.21.0",
+ "@typescript-eslint/visitor-keys": "6.21.0"
+ },
+ "engines": {
+ "node": "^16.0.0 || >=18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/@typescript-eslint/types": {
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+ "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+ "engines": {
+ "node": "^16.0.0 || >=18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree": {
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+ "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+ "dependencies": {
+ "@typescript-eslint/types": "6.21.0",
+ "@typescript-eslint/visitor-keys": "6.21.0",
+ "debug": "^4.3.4",
+ "globby": "^11.1.0",
+ "is-glob": "^4.0.3",
+ "minimatch": "9.0.3",
+ "semver": "^7.5.4",
+ "ts-api-utils": "^1.0.1"
+ },
+ "engines": {
+ "node": "^16.0.0 || >=18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/array-union": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+ "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dependencies": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+ "version": "11.1.0",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+ "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+ "dependencies": {
+ "array-union": "^2.1.0",
+ "dir-glob": "^3.0.1",
+ "fast-glob": "^3.2.9",
+ "ignore": "^5.2.0",
+ "merge2": "^1.4.1",
+ "slash": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+ "version": "9.0.3",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+ "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+ "dependencies": {
+ "brace-expansion": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=16 || 14 >=14.17"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+ "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+ "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+ },
+ "node_modules/@typescript-eslint/utils": {
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
+ "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+ "dependencies": {
+ "@eslint-community/eslint-utils": "^4.4.0",
+ "@types/json-schema": "^7.0.12",
+ "@types/semver": "^7.5.0",
+ "@typescript-eslint/scope-manager": "6.21.0",
+ "@typescript-eslint/types": "6.21.0",
+ "@typescript-eslint/typescript-estree": "6.21.0",
+ "semver": "^7.5.4"
+ },
+ "engines": {
+ "node": "^16.0.0 || >=18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ },
+ "peerDependencies": {
+ "eslint": "^7.0.0 || ^8.0.0"
+ }
+ },
+ "node_modules/@typescript-eslint/utils/node_modules/lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@typescript-eslint/utils/node_modules/semver": {
+ "version": "7.6.0",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+ "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@typescript-eslint/utils/node_modules/yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+ },
+ "node_modules/@typescript-eslint/visitor-keys": {
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+ "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+ "dependencies": {
+ "@typescript-eslint/types": "6.21.0",
+ "eslint-visitor-keys": "^3.4.1"
+ },
+ "engines": {
+ "node": "^16.0.0 || >=18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/typescript-eslint"
+ }
+ },
+ "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+ "version": "3.4.3",
+ "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/eslint"
+ }
+ },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -6838,9 +7072,9 @@
}
},
"node_modules/autoprefixer": {
- "version": "10.4.16",
- "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
- "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+ "version": "10.4.19",
+ "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+ "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
"funding": [
{
"type": "opencollective",
@@ -6856,9 +7090,9 @@
}
],
"dependencies": {
- "browserslist": "^4.21.10",
- "caniuse-lite": "^1.0.30001538",
- "fraction.js": "^4.3.6",
+ "browserslist": "^4.23.0",
+ "caniuse-lite": "^1.0.30001599",
+ "fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
@@ -7413,9 +7647,9 @@
"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
},
"node_modules/browserslist": {
- "version": "4.22.2",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
- "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
+ "version": "4.23.0",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+ "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
"funding": [
{
"type": "opencollective",
@@ -7431,8 +7665,8 @@
}
],
"dependencies": {
- "caniuse-lite": "^1.0.30001565",
- "electron-to-chromium": "^1.4.601",
+ "caniuse-lite": "^1.0.30001587",
+ "electron-to-chromium": "^1.4.668",
"node-releases": "^2.0.14",
"update-browserslist-db": "^1.0.13"
},
@@ -7564,9 +7798,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001579",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
- "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+ "version": "1.0.30001608",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz",
+ "integrity": "sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==",
"funding": [
{
"type": "opencollective",
@@ -9015,9 +9249,9 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
},
"node_modules/electron-to-chromium": {
- "version": "1.4.643",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.643.tgz",
- "integrity": "sha512-QHscvvS7gt155PtoRC0dR2ilhL8E9LHhfTQEq1uD5AL0524rBLAwpAREFH06f87/e45B9XkR6Ki5dbhbCsVEIg=="
+ "version": "1.4.733",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.733.tgz",
+ "integrity": "sha512-gUI9nhI2iBGF0OaYYLKOaOtliFMl+Bt1rY7VmEjwxOxqoYLub/D9xmduPEhbw2imE6gYkJKhIE5it+KE2ulVxQ=="
},
"node_modules/email-prop-type": {
"version": "3.0.1",
@@ -9427,6 +9661,59 @@
"ms": "^2.1.1"
}
},
+ "node_modules/eslint-plugin-formatjs": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-formatjs/-/eslint-plugin-formatjs-4.13.0.tgz",
+ "integrity": "sha512-sxgHQNyVclNRO7aydGwxohwxYR03/oRDW0uUXFWayNMPTlnb9sET3LCovBjvQF7qAHDGFDcLwg4ECSyui4nG8A==",
+ "dependencies": {
+ "@formatjs/icu-messageformat-parser": "2.7.6",
+ "@formatjs/ts-transformer": "3.13.12",
+ "@types/eslint": "7 || 8",
+ "@types/picomatch": "^2.3.0",
+ "@typescript-eslint/utils": "^6.18.1",
+ "emoji-regex": "^10.2.1",
+ "magic-string": "^0.30.0",
+ "picomatch": "^2.3.1",
+ "tslib": "2.6.2",
+ "typescript": "5",
+ "unicode-emoji-utils": "^1.2.0"
+ },
+ "peerDependencies": {
+ "eslint": "7 || 8"
+ }
+ },
+ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/ts-transformer": {
+ "version": "3.13.12",
+ "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-3.13.12.tgz",
+ "integrity": "sha512-uf1+DgbsCrzHAg7uIf0QlzpIkHYxRSRig5iJa9FaoUNIDZzNEE2oW/uLLLq7I9Z2FLIPhbmgq8hbW40FoQv+Fg==",
+ "dependencies": {
+ "@formatjs/icu-messageformat-parser": "2.7.6",
+ "@types/json-stable-stringify": "^1.0.32",
+ "@types/node": "14 || 16 || 17",
+ "chalk": "^4.0.0",
+ "json-stable-stringify": "^1.0.1",
+ "tslib": "^2.4.0",
+ "typescript": "5"
+ },
+ "peerDependencies": {
+ "ts-jest": ">=27"
+ },
+ "peerDependenciesMeta": {
+ "ts-jest": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/eslint-plugin-formatjs/node_modules/@types/node": {
+ "version": "17.0.45",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+ "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+ },
+ "node_modules/eslint-plugin-formatjs/node_modules/emoji-regex": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+ "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
+ },
"node_modules/eslint-plugin-import": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
@@ -15628,6 +15915,17 @@
"lz-string": "bin/bin.js"
}
},
+ "node_modules/magic-string": {
+ "version": "0.30.9",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+ "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+ "dependencies": {
+ "@jridgewell/sourcemap-codec": "^1.4.15"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/mailto-link": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
@@ -16917,9 +17215,9 @@
}
},
"node_modules/postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -16937,7 +17235,7 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -16991,9 +17289,9 @@
}
},
"node_modules/postcss-custom-media": {
- "version": "10.0.2",
- "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
- "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
+ "version": "10.0.4",
+ "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.4.tgz",
+ "integrity": "sha512-Ubs7O3wj2prghaKRa68VHBvuy3KnTQ0zbGwqDYY1mntxJD0QL2AeiAy+AMfl3HBedTCVr2IcFNktwty9YpSskA==",
"funding": [
{
"type": "github",
@@ -17005,10 +17303,10 @@
}
],
"dependencies": {
- "@csstools/cascade-layer-name-parser": "^1.0.5",
- "@csstools/css-parser-algorithms": "^2.3.2",
- "@csstools/css-tokenizer": "^2.2.1",
- "@csstools/media-query-list-parser": "^2.1.5"
+ "@csstools/cascade-layer-name-parser": "^1.0.9",
+ "@csstools/css-parser-algorithms": "^2.6.1",
+ "@csstools/css-tokenizer": "^2.2.4",
+ "@csstools/media-query-list-parser": "^2.1.9"
},
"engines": {
"node": "^14 || ^16 || >=18"
@@ -20042,9 +20340,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -20980,6 +21278,17 @@
"node": ">=8"
}
},
+ "node_modules/ts-api-utils": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+ "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+ "engines": {
+ "node": ">=16"
+ },
+ "peerDependencies": {
+ "typescript": ">=4.2.0"
+ }
+ },
"node_modules/tsconfig-paths": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -21211,6 +21520,19 @@
"node": ">=4"
}
},
+ "node_modules/unicode-emoji-utils": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/unicode-emoji-utils/-/unicode-emoji-utils-1.2.0.tgz",
+ "integrity": "sha512-djUB91p/6oYpgps4W5K/MAvM+UspoAANHSUW495BrxeLRoned3iNPEDQgrKx9LbLq93VhNz0NWvI61vcfrwYoA==",
+ "dependencies": {
+ "emoji-regex": "10.3.0"
+ }
+ },
+ "node_modules/unicode-emoji-utils/node_modules/emoji-regex": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+ "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
+ },
"node_modules/unicode-match-property-ecmascript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
diff --git a/package.json b/package.json
index 28904b24..5b938c2c 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
"devDependencies": {
"@edx/browserslist-config": "^1.1.1",
"@edx/reactifex": "1.1.0",
- "@openedx/frontend-build": "13.0.28",
+ "@openedx/frontend-build": "13.1.4",
"babel-plugin-formatjs": "10.5.14",
"eslint-plugin-import": "2.29.1",
"glob": "7.2.3",
From 564ec70d9e3d1bdd4b904184f0be047717776f83 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 11 Apr 2024 04:08:08 +0000
Subject: [PATCH 05/82] fix(deps): update dependency @openedx/paragon to
v22.2.1
---
package-lock.json | 13 ++++++++++---
1 file changed, 10 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6ef5d2e5..824226d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5055,9 +5055,16 @@
}
},
"node_modules/@openedx/paragon": {
- "version": "22.1.1",
- "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.1.1.tgz",
- "integrity": "sha512-XPRuV9zn7BeCIYfU5kE2XZ4YevjA0wfS/fuydB8Ta/aNY1dw9fQ7CjHOIfkZqDic4Jygusj/uhE/1WYJD8kvyw==",
+ "version": "22.2.1",
+ "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.2.1.tgz",
+ "integrity": "sha512-Dd7PzvHwNnUokqbFkuOpugJZ9dHaUBOcYwqAA2aMoN7tgi4xEZWsfDFyP1+se2UPuR7NvNGammEesLAwGQ0Ylw==",
+ "workspaces": [
+ "example",
+ "component-generator",
+ "www",
+ "icons",
+ "dependent-usage-analyzer"
+ ],
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
From 611af073268759470187c8f3edf863c73ec85548 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 11 Apr 2024 06:43:02 +0000
Subject: [PATCH 06/82] fix(deps): update dependency algoliasearch to v4.23.3
---
package-lock.json | 183 +++++++++++++++++++++++++---------------------
1 file changed, 101 insertions(+), 82 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 824226d7..5dad67b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,74 +69,74 @@
}
},
"node_modules/@algolia/cache-browser-local-storage": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.22.1.tgz",
- "integrity": "sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.3.tgz",
+ "integrity": "sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==",
"dependencies": {
- "@algolia/cache-common": "4.22.1"
+ "@algolia/cache-common": "4.23.3"
}
},
"node_modules/@algolia/cache-common": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.22.1.tgz",
- "integrity": "sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA=="
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.3.tgz",
+ "integrity": "sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A=="
},
"node_modules/@algolia/cache-in-memory": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.22.1.tgz",
- "integrity": "sha512-ve+6Ac2LhwpufuWavM/aHjLoNz/Z/sYSgNIXsinGofWOysPilQZPUetqLj8vbvi+DHZZaYSEP9H5SRVXnpsNNw==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.3.tgz",
+ "integrity": "sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==",
"dependencies": {
- "@algolia/cache-common": "4.22.1"
+ "@algolia/cache-common": "4.23.3"
}
},
"node_modules/@algolia/client-account": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.22.1.tgz",
- "integrity": "sha512-k8m+oegM2zlns/TwZyi4YgCtyToackkOpE+xCaKCYfBfDtdGOaVZCM5YvGPtK+HGaJMIN/DoTL8asbM3NzHonw==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.3.tgz",
+ "integrity": "sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==",
"dependencies": {
- "@algolia/client-common": "4.22.1",
- "@algolia/client-search": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/client-common": "4.23.3",
+ "@algolia/client-search": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/client-analytics": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.22.1.tgz",
- "integrity": "sha512-1ssi9pyxyQNN4a7Ji9R50nSdISIumMFDwKNuwZipB6TkauJ8J7ha/uO60sPJFqQyqvvI+px7RSNRQT3Zrvzieg==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.3.tgz",
+ "integrity": "sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==",
"dependencies": {
- "@algolia/client-common": "4.22.1",
- "@algolia/client-search": "4.22.1",
- "@algolia/requester-common": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/client-common": "4.23.3",
+ "@algolia/client-search": "4.23.3",
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/client-common": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.22.1.tgz",
- "integrity": "sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.3.tgz",
+ "integrity": "sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==",
"dependencies": {
- "@algolia/requester-common": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/client-personalization": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.22.1.tgz",
- "integrity": "sha512-sl+/klQJ93+4yaqZ7ezOttMQ/nczly/3GmgZXJ1xmoewP5jmdP/X/nV5U7EHHH3hCUEHeN7X1nsIhGPVt9E1cQ==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.3.tgz",
+ "integrity": "sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==",
"dependencies": {
- "@algolia/client-common": "4.22.1",
- "@algolia/requester-common": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/client-common": "4.23.3",
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/client-search": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.22.1.tgz",
- "integrity": "sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.3.tgz",
+ "integrity": "sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==",
"dependencies": {
- "@algolia/client-common": "4.22.1",
- "@algolia/requester-common": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/client-common": "4.23.3",
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/events": {
@@ -145,47 +145,65 @@
"integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
},
"node_modules/@algolia/logger-common": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.22.1.tgz",
- "integrity": "sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg=="
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.3.tgz",
+ "integrity": "sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g=="
},
"node_modules/@algolia/logger-console": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.22.1.tgz",
- "integrity": "sha512-O99rcqpVPKN1RlpgD6H3khUWylU24OXlzkavUAMy6QZd1776QAcauE3oP8CmD43nbaTjBexZj2nGsBH9Tc0FVA==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.3.tgz",
+ "integrity": "sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==",
"dependencies": {
- "@algolia/logger-common": "4.22.1"
+ "@algolia/logger-common": "4.23.3"
+ }
+ },
+ "node_modules/@algolia/recommend": {
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.3.tgz",
+ "integrity": "sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==",
+ "dependencies": {
+ "@algolia/cache-browser-local-storage": "4.23.3",
+ "@algolia/cache-common": "4.23.3",
+ "@algolia/cache-in-memory": "4.23.3",
+ "@algolia/client-common": "4.23.3",
+ "@algolia/client-search": "4.23.3",
+ "@algolia/logger-common": "4.23.3",
+ "@algolia/logger-console": "4.23.3",
+ "@algolia/requester-browser-xhr": "4.23.3",
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/requester-node-http": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/@algolia/requester-browser-xhr": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.22.1.tgz",
- "integrity": "sha512-dtQGYIg6MteqT1Uay3J/0NDqD+UciHy3QgRbk7bNddOJu+p3hzjTRYESqEnoX/DpEkaNYdRHUKNylsqMpgwaEw==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.3.tgz",
+ "integrity": "sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==",
"dependencies": {
- "@algolia/requester-common": "4.22.1"
+ "@algolia/requester-common": "4.23.3"
}
},
"node_modules/@algolia/requester-common": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.22.1.tgz",
- "integrity": "sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg=="
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.3.tgz",
+ "integrity": "sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw=="
},
"node_modules/@algolia/requester-node-http": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.22.1.tgz",
- "integrity": "sha512-JfmZ3MVFQkAU+zug8H3s8rZ6h0ahHZL/SpMaSasTCGYR5EEJsCc8SI5UZ6raPN2tjxa5bxS13BRpGSBUens7EA==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.3.tgz",
+ "integrity": "sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==",
"dependencies": {
- "@algolia/requester-common": "4.22.1"
+ "@algolia/requester-common": "4.23.3"
}
},
"node_modules/@algolia/transporter": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.22.1.tgz",
- "integrity": "sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.3.tgz",
+ "integrity": "sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==",
"dependencies": {
- "@algolia/cache-common": "4.22.1",
- "@algolia/logger-common": "4.22.1",
- "@algolia/requester-common": "4.22.1"
+ "@algolia/cache-common": "4.23.3",
+ "@algolia/logger-common": "4.23.3",
+ "@algolia/requester-common": "4.23.3"
}
},
"node_modules/@ampproject/remapping": {
@@ -6741,24 +6759,25 @@
}
},
"node_modules/algoliasearch": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.22.1.tgz",
- "integrity": "sha512-jwydKFQJKIx9kIZ8Jm44SdpigFwRGPESaxZBaHSV0XWN2yBJAOT4mT7ppvlrpA4UGzz92pqFnVKr/kaZXrcreg==",
+ "version": "4.23.3",
+ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.3.tgz",
+ "integrity": "sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==",
"dependencies": {
- "@algolia/cache-browser-local-storage": "4.22.1",
- "@algolia/cache-common": "4.22.1",
- "@algolia/cache-in-memory": "4.22.1",
- "@algolia/client-account": "4.22.1",
- "@algolia/client-analytics": "4.22.1",
- "@algolia/client-common": "4.22.1",
- "@algolia/client-personalization": "4.22.1",
- "@algolia/client-search": "4.22.1",
- "@algolia/logger-common": "4.22.1",
- "@algolia/logger-console": "4.22.1",
- "@algolia/requester-browser-xhr": "4.22.1",
- "@algolia/requester-common": "4.22.1",
- "@algolia/requester-node-http": "4.22.1",
- "@algolia/transporter": "4.22.1"
+ "@algolia/cache-browser-local-storage": "4.23.3",
+ "@algolia/cache-common": "4.23.3",
+ "@algolia/cache-in-memory": "4.23.3",
+ "@algolia/client-account": "4.23.3",
+ "@algolia/client-analytics": "4.23.3",
+ "@algolia/client-common": "4.23.3",
+ "@algolia/client-personalization": "4.23.3",
+ "@algolia/client-search": "4.23.3",
+ "@algolia/logger-common": "4.23.3",
+ "@algolia/logger-console": "4.23.3",
+ "@algolia/recommend": "4.23.3",
+ "@algolia/requester-browser-xhr": "4.23.3",
+ "@algolia/requester-common": "4.23.3",
+ "@algolia/requester-node-http": "4.23.3",
+ "@algolia/transporter": "4.23.3"
}
},
"node_modules/algoliasearch-helper": {
From dba93333fded652989e9a02d4b168a84fb3fbc21 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 11 Apr 2024 09:17:34 +0000
Subject: [PATCH 07/82] fix(deps): update dependency algoliasearch-helper to
v3.17.0
---
package-lock.json | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5dad67b3..19e3f81c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6781,9 +6781,9 @@
}
},
"node_modules/algoliasearch-helper": {
- "version": "3.16.3",
- "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.16.3.tgz",
- "integrity": "sha512-1OuJT6sONAa9PxcOmWo5WCAT3jQSpCR9/m5Azujja7nhUQwAUDvaaAYrcmUySsrvHh74usZHbE3jFfGnWtZj8w==",
+ "version": "3.17.0",
+ "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.17.0.tgz",
+ "integrity": "sha512-R5422OiQjvjlK3VdpNQ/Qk7KsTIGeM5ACm8civGifOVWdRRV/3SgXuKmeNxe94Dz6fwj/IgpVmXbHutU4mHubg==",
"dependencies": {
"@algolia/events": "^4.0.1"
},
From c663f6fa30e6e848dfe551c69207cf1de0039d64 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Wed, 17 Apr 2024 17:00:28 +0500
Subject: [PATCH 08/82] Rebase 2u main with master (#1228)
* chore(deps): update dependency babel-plugin-formatjs to v10.5.14
* fix(deps): update dependency @edx/frontend-platform to v7.1.3
* fix(deps): update font awesome to v6.5.2
* chore(deps): update dependency @openedx/frontend-build to v13.1.4
* fix(deps): update dependency @openedx/paragon to v22.2.1
* fix(deps): update dependency algoliasearch to v4.23.3
* fix(deps): update dependency algoliasearch-helper to v3.17.0
---------
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
From 6f325c20c323f36bc53082f27db6bcad2f530728 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Wed, 3 Apr 2024 11:28:39 +0500
Subject: [PATCH 09/82] feat: implement multi step registration experiment
---
src/common-components/messages.jsx | 6 +
src/config/index.js | 2 +
src/logistration/Logistration.jsx | 55 ++-
src/logistration/Logistration.test.jsx | 7 +
src/register/RegistrationPage.jsx | 341 +++++++++++++-----
src/register/RegistrationPage.test.jsx | 5 +
.../ConfigurableRegistrationForm.jsx | 24 +-
.../components/RegistrationFailure.jsx | 11 +-
.../ConfigurableRegistrationForm.test.jsx | 8 +
.../tests/RegistrationFailure.test.jsx | 5 +
.../components/tests/ThirdPartyAuth.test.jsx | 5 +
src/register/data/actions.js | 20 +-
.../data/optimizelyExperiment/helper.js | 105 ++++++
...ltiStepRegistrationExperimentVariation.jsx | 54 +++
src/register/data/reducers.js | 25 ++
src/register/data/sagas.js | 7 +-
src/register/data/tests/reducers.test.js | 5 +
src/register/data/utils.js | 37 +-
src/register/messages.jsx | 23 ++
src/sass/_registration.scss | 4 -
20 files changed, 610 insertions(+), 139 deletions(-)
create mode 100644 src/register/data/optimizelyExperiment/helper.js
create mode 100644 src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx
index 08e88b8f..6f0e69ca 100644
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -132,6 +132,12 @@ const messages = defineMessages({
defaultMessage: 'Company or school credentials',
description: 'Company or school login link text.',
},
+ // multi step registration experiment messages
+ 'tab.back.btn.text': {
+ id: 'tab.back.btn.text',
+ defaultMessage: 'Back',
+ description: 'Tab back button text',
+ },
});
export default messages;
diff --git a/src/config/index.js b/src/config/index.js
index fa3613aa..5d221faa 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -34,6 +34,8 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+ // Multi Step Registration Experiment
+ MULTI_STEP_REGISTRATION_EXPERIMENT_ID: process.env.MULTI_STEP_REGISTRATION_EXPERIMENT_ID || '',
};
export default configuration;
diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx
index 9451aa27..5199e1b3 100644
--- a/src/logistration/Logistration.jsx
+++ b/src/logistration/Logistration.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -7,10 +7,11 @@ import { getAuthService } from '@edx/frontend-platform/auth';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Icon,
+ IconButton,
Tab,
Tabs,
} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
+import { ArrowBackIos, ChevronLeft } from '@openedx/paragon/icons';
import PropTypes from 'prop-types';
import { Navigate, useNavigate } from 'react-router-dom';
@@ -27,7 +28,11 @@ import {
import { LoginPage } from '../login';
import { backupLoginForm } from '../login/data/actions';
import { RegistrationPage } from '../register';
-import { backupRegistrationForm } from '../register/data/actions';
+import { backupRegistrationForm, setMultiStepRegistrationExpData } from '../register/data/actions';
+import {
+ FIRST_STEP,
+ getMultiStepRegistrationPreviousStep,
+} from '../register/data/optimizelyExperiment/helper';
const Logistration = (props) => {
const { selectedPage, tpaProviders } = props;
@@ -42,6 +47,10 @@ const Logistration = (props) => {
const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
+ const dispatch = useDispatch();
+ const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
+ const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
+
useEffect(() => {
const authService = getAuthService();
if (authService) {
@@ -91,6 +100,39 @@ const Logistration = (props) => {
);
+ /**
+ * Temporary function created to resolve the complexity in tabs conditioning for multi-step
+ * registration experiment
+ */
+ const getTabs = () => {
+ if (multiStepRegistrationPageStep !== FIRST_STEP) {
+ const prevStep = getMultiStepRegistrationPreviousStep(multiStepRegistrationPageStep);
+ return (
+
+ {
+ dispatch(setMultiStepRegistrationExpData(multiStepRegExpVariation, prevStep));
+ }}
+ variant="primary"
+ size="inline"
+ className="mr-1"
+ />
+ {formatMessage(messages['tab.back.btn.text'])}
+
+ );
+ }
+ return (
+ handleOnSelect(tabKey, selectedPage)}>
+
+
+
+ );
+ };
+
const isValidTpaHint = () => {
const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
return !!provider;
@@ -123,12 +165,7 @@ const Logistration = (props) => {
)
- : (!isValidTpaHint() && !hideRegistrationLink && (
- handleOnSelect(tabKey, selectedPage)}>
-
-
-
- ))}
+ : (!isValidTpaHint() && !hideRegistrationLink && getTabs())}
{ key && (
)}
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index 87bf3e70..ce7af88f 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,12 +15,16 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
+import { FIRST_STEP, NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
+jest.mock('../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -63,6 +67,8 @@ describe('Logistration', () => {
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
},
commonComponents: {
thirdPartyAuthContext: {
@@ -83,6 +89,7 @@ describe('Logistration', () => {
username: 'test-user',
})),
}));
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 80ac1f6b..70897a31 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -17,14 +17,29 @@ import RegistrationFailure from './components/RegistrationFailure';
import {
backupRegistrationFormBegin,
clearRegistrationBackendError,
+ fetchRealtimeValidations,
registerNewUser,
setEmailSuggestionInStore,
+ setMultiStepRegistrationExpData,
setUserPipelineDataLoaded,
} from './data/actions';
import {
FORM_SUBMISSION_ERROR,
TPA_AUTHENTICATION_FAILURE,
} from './data/constants';
+import {
+ CONTROL,
+ FIRST_STEP,
+ getMultiStepRegistrationNextStep,
+ getRegisterButtonLabelInExperiment,
+ getRegisterButtonSubmitStateInExperiment,
+ MULTI_STEP_REGISTRATION_EXP_VARIATION,
+ NOT_INITIALIZED,
+ SECOND_STEP,
+ shouldDisplayFieldInExperiment, THIRD_STEP,
+} from './data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import getBackendValidations from './data/selectors';
import {
isFormValid, prepareRegistrationPayload,
@@ -73,6 +88,13 @@ const RegistrationPage = (props) => {
const shouldBackupState = useSelector(state => state.register.shouldBackupState);
const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);
const submitState = useSelector(state => state.register.submitState);
+ const backendValidations = useSelector(getBackendValidations);
+ const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
+ const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
+ const isValidatingMultiStepRegistrationPage = useSelector(
+ state => state.register.isValidatingMultiStepRegistrationPage,
+ );
+ const validationsSubmitState = useSelector(state => state.register.validationsSubmitState);
const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);
const optionalFields = useSelector(state => state.commonComponents.optionalFields);
@@ -85,7 +107,6 @@ const RegistrationPage = (props) => {
const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
- const backendValidations = useSelector(getBackendValidations);
const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
const tpaHint = useMemo(() => getTpaHint(), []);
@@ -102,6 +123,26 @@ const RegistrationPage = (props) => {
? formatMessage(messages['create.account.cta.button'], { label: cta })
: formatMessage(messages['create.account.for.free.button']);
+ /**
+ * Multi-Step Registration Page Experiment
+ */
+ const multiStepRegistrationExpVariation = useMultiStepRegistrationExperimentVariation(
+ multiStepRegExpVariation, registrationEmbedded, tpaHint, currentProvider, thirdPartyAuthApiStatus,
+ );
+
+ useEffect(() => {
+ if (isValidatingMultiStepRegistrationPage && backendValidations
+ && Object.values(backendValidations).every(value => value === '')
+ ) {
+ setErrorCode({ type: '', count: 0 });
+ const nextStep = getMultiStepRegistrationNextStep(multiStepRegistrationPageStep);
+ dispatch(setMultiStepRegistrationExpData(multiStepRegistrationExpVariation, nextStep));
+ }
+ }, [ // eslint-disable-line react-hooks/exhaustive-deps
+ isValidatingMultiStepRegistrationPage,
+ backendValidations,
+ ]);
+
/**
* Set the userPipelineDetails data in formFields for only first time
*/
@@ -148,8 +189,11 @@ const RegistrationPage = (props) => {
formFields: { ...formFields },
errors: { ...errors },
}));
+ dispatch(setMultiStepRegistrationExpData(
+ multiStepRegistrationExpVariation, multiStepRegistrationPageStep, false,
+ ));
}
- }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+ }, [shouldBackupState]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
if (backendValidations) {
@@ -169,13 +213,21 @@ const RegistrationPage = (props) => {
useEffect(() => {
if (registrationResult.success) {
+ let registeredEventProps = {};
+
+ if (multiStepRegistrationExpVariation !== NOT_INITIALIZED) {
+ registeredEventProps = {
+ variation: multiStepRegistrationExpVariation,
+ };
+ }
+
// This event is used by GTM
- sendTrackEvent('edx.bi.user.account.registered.client', {});
+ sendTrackEvent('edx.bi.user.account.registered.client', registeredEventProps);
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
- }, [registrationResult]);
+ }, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
const handleOnChange = (event) => {
const { name } = event.target;
@@ -247,7 +299,56 @@ const RegistrationPage = (props) => {
const handleSubmit = (e) => {
e.preventDefault();
- registerUser();
+
+ if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
+ && multiStepRegistrationPageStep !== THIRD_STEP) {
+ let formFieldsPayload = {};
+
+ if (multiStepRegistrationPageStep === FIRST_STEP) {
+ // We only want to validate email in the first step of registration
+ // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
+ formFieldsPayload = { email: formFields.email };
+ } else if (multiStepRegistrationPageStep === SECOND_STEP) {
+ // We only want to validate name and password field in the second step of registration
+ // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
+ formFieldsPayload = { name: formFields.name, password: formFields.password };
+ }
+
+ const { isValid, fieldErrors } = isFormValid(
+ formFieldsPayload, errors, {}, {}, formatMessage,
+ );
+ setErrors(prevErrors => ({
+ ...prevErrors,
+ ...fieldErrors,
+ }));
+ // returning if not valid
+ if (!isValid) {
+ setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
+ } else {
+ dispatch(fetchRealtimeValidations(formFieldsPayload, true));
+ }
+ } else if (multiStepRegistrationExpVariation === CONTROL && multiStepRegistrationPageStep !== SECOND_STEP) {
+ // We only want to validate name, email and password fields in the first step of CONTROL registration
+ // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
+ const formFieldsPayload = { name: formFields.name, email: formFields.email, password: formFields.password };
+
+ const { isValid, fieldErrors } = isFormValid(
+ formFieldsPayload, errors, {}, {}, formatMessage,
+ );
+
+ setErrors(prevErrors => ({
+ ...prevErrors,
+ ...fieldErrors,
+ }));
+ // returning if not valid
+ if (!isValid) {
+ setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
+ } else {
+ dispatch(fetchRealtimeValidations(formFieldsPayload, true));
+ }
+ } else {
+ registerUser();
+ }
};
useEffect(() => {
@@ -282,104 +383,146 @@ const RegistrationPage = (props) => {
getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
}
/>
- {autoSubmitRegForm && !errorCode.type ? (
-
-
-
- ) : (
-
+ )}
);
};
diff --git a/src/register/RegistrationPage.test.jsx b/src/register/RegistrationPage.test.jsx
index 2634713f..1f6fd1a3 100644
--- a/src/register/RegistrationPage.test.jsx
+++ b/src/register/RegistrationPage.test.jsx
@@ -17,6 +17,9 @@ import {
setUserPipelineDataLoaded,
} from './data/actions';
import { INTERNAL_SERVER_ERROR } from './data/constants';
+import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from './RegistrationPage';
import {
AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
@@ -30,6 +33,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('./data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -128,6 +132,7 @@ describe('RegistrationPage', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index be1f9c27..5e69c7c0 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import { FormFieldRenderer } from '../../field-renderer';
import { FIELDS } from '../data/constants';
+import { FIRST_STEP, shouldDisplayFieldInExperiment } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -31,6 +32,8 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors,
setFormFields,
autoSubmitRegistrationForm,
+ multiStepRegistrationExpVariation,
+ multiStepRegistrationPageStep,
} = props;
const countryList = useMemo(() => getCountryList(getLocale()), []);
@@ -105,7 +108,9 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
};
- if (flags.showConfigurableRegistrationFields) {
+ if (flags.showConfigurableRegistrationFields && shouldDisplayFieldInExperiment(
+ 'other_fields', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
Object.keys(fieldDescriptions).forEach(fieldName => {
const fieldData = fieldDescriptions[fieldName];
switch (fieldData.name) {
@@ -157,7 +162,9 @@ const ConfigurableRegistrationForm = (props) => {
});
}
- if (flags.showConfigurableEdxFields || showCountryField) {
+ if ((flags.showConfigurableEdxFields || showCountryField) && shouldDisplayFieldInExperiment(
+ 'country', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
{
);
}
- if (flags.showMarketingEmailOptInCheckbox) {
+ if (flags.showMarketingEmailOptInCheckbox && shouldDisplayFieldInExperiment(
+ 'marketing_email_opt_in', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
{
);
}
- if (flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode) {
+ if ((flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode)
+ && shouldDisplayFieldInExperiment(
+ 'honor_code', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
@@ -227,11 +239,15 @@ ConfigurableRegistrationForm.propTypes = {
setFieldErrors: PropTypes.func.isRequired,
setFormFields: PropTypes.func.isRequired,
autoSubmitRegistrationForm: PropTypes.bool,
+ multiStepRegistrationExpVariation: PropTypes.string,
+ multiStepRegistrationPageStep: PropTypes.string,
};
ConfigurableRegistrationForm.defaultProps = {
fieldDescriptions: {},
autoSubmitRegistrationForm: false,
+ multiStepRegistrationExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
};
export default ConfigurableRegistrationForm;
diff --git a/src/register/components/RegistrationFailure.jsx b/src/register/components/RegistrationFailure.jsx
index c34c2af7..f2a83585 100644
--- a/src/register/components/RegistrationFailure.jsx
+++ b/src/register/components/RegistrationFailure.jsx
@@ -13,12 +13,13 @@ import {
TPA_AUTHENTICATION_FAILURE,
TPA_SESSION_EXPIRED,
} from '../data/constants';
+import { FIRST_STEP } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
const RegistrationFailureMessage = (props) => {
const { formatMessage } = useIntl();
const {
- context, errorCode, failureCount,
+ context, errorCode, failureCount, multiStepRegistrationPageStep,
} = props;
useEffect(() => {
@@ -49,7 +50,11 @@ const RegistrationFailureMessage = (props) => {
errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
break;
default:
- errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
+ if (multiStepRegistrationPageStep !== FIRST_STEP) {
+ errorMessage = formatMessage(messages['multistep.registration.form.submission.error']);
+ } else {
+ errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
+ }
break;
}
@@ -65,6 +70,7 @@ RegistrationFailureMessage.defaultProps = {
context: {
errorMessage: null,
},
+ multiStepRegistrationPageStep: FIRST_STEP,
};
RegistrationFailureMessage.propTypes = {
@@ -74,6 +80,7 @@ RegistrationFailureMessage.propTypes = {
}),
errorCode: PropTypes.string.isRequired,
failureCount: PropTypes.number.isRequired,
+ multiStepRegistrationPageStep: PropTypes.string,
};
export default RegistrationFailureMessage;
diff --git a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
index 537d11eb..28269072 100644
--- a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
+++ b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -11,6 +11,9 @@ import configureStore from 'redux-mock-store';
import { registerNewUser } from '../../data/actions';
import { FIELDS } from '../../data/constants';
+import { FIRST_STEP, NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
@@ -22,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
@@ -93,6 +97,9 @@ describe('ConfigurableRegistrationForm', () => {
registrationError: {},
registrationFormData,
usernameSuggestions: [],
+ multiStepRegistrationPageStep: FIRST_STEP,
+ multiStepRegExpVariation: '',
+ isValidatingMultiStepRegistrationPage: false,
},
commonComponents: {
thirdPartyAuthApiStatus: null,
@@ -121,6 +128,7 @@ describe('ConfigurableRegistrationForm', () => {
};
window.location = { search: '' };
getLocale.mockImplementationOnce(() => ('en-us'));
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/RegistrationFailure.test.jsx b/src/register/components/tests/RegistrationFailure.test.jsx
index 003cc966..b9667c9c 100644
--- a/src/register/components/tests/RegistrationFailure.test.jsx
+++ b/src/register/components/tests/RegistrationFailure.test.jsx
@@ -12,6 +12,9 @@ import configureStore from 'redux-mock-store';
import {
FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
} from '../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import RegistrationFailureMessage from '../RegistrationFailure';
@@ -23,6 +26,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -121,6 +125,7 @@ describe('RegistrationFailure', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/ThirdPartyAuth.test.jsx b/src/register/components/tests/ThirdPartyAuth.test.jsx
index 917f10f9..45672ad5 100644
--- a/src/register/components/tests/ThirdPartyAuth.test.jsx
+++ b/src/register/components/tests/ThirdPartyAuth.test.jsx
@@ -12,6 +12,9 @@ import configureStore from 'redux-mock-store';
import {
COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
} from '../../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -22,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -120,6 +124,7 @@ describe('ThirdPartyAuth', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/data/actions.js b/src/register/data/actions.js
index 9fa5aed5..530f3bc8 100644
--- a/src/register/data/actions.js
+++ b/src/register/data/actions.js
@@ -8,6 +8,7 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
+export const REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA = 'REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA';
// Backup registration form
export const backupRegistrationForm = () => ({
@@ -20,18 +21,19 @@ export const backupRegistrationFormBegin = (data) => ({
});
// Validate fields from the backend
-export const fetchRealtimeValidations = (formPayload) => ({
+export const fetchRealtimeValidations = (formPayload, isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.BASE,
- payload: { formPayload },
+ payload: { formPayload, isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsBegin = () => ({
+export const fetchRealtimeValidationsBegin = (isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.BEGIN,
+ payload: { isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsSuccess = (validations) => ({
+export const fetchRealtimeValidationsSuccess = (validations, isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.SUCCESS,
- payload: { validations },
+ payload: { validations, isValidatingMultiStepRegistrationPage },
});
export const fetchRealtimeValidationsFailure = () => ({
@@ -83,3 +85,11 @@ export const setUserPipelineDataLoaded = (value) => ({
type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
payload: { value },
});
+
+// Multi Step Registration Experiment Actions
+export const setMultiStepRegistrationExpData = (
+ multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage,
+) => ({
+ type: REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
+ payload: { multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage },
+});
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
new file mode 100644
index 00000000..e59ec718
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -0,0 +1,105 @@
+/**
+ * This file contains data for Multi Step Registration Optimizely experiment
+ */
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from '../../messages';
+
+export const NOT_INITIALIZED = 'experiment-not-initialized';
+export const CONTROL = 'control-registration-page';
+export const MULTI_STEP_REGISTRATION_EXP_VARIATION = 'multi-step-registration-page';
+
+export const FIRST_STEP = 'first-step';
+export const SECOND_STEP = 'second-step';
+export const THIRD_STEP = 'third-step';
+
+export const CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS = ['name', 'email', 'password', 'marketing_email_opt_in', 'ThirdPartyAuth'];
+export const CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS = ['username', 'country'];
+export const CONTROL_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
+
+export const MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS = ['email', 'marketing_email_opt_in', 'ThirdPartyAuth'];
+export const MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS = ['name', 'password'];
+export const MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS = ['username', 'country'];
+export const MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
+
+const MULTI_STEP_REGISTRATION_EXP_PAGE = 'authn_register_page';
+
+export function getMultiStepRegistrationExperimentVariation() {
+ try {
+ if (window.optimizely
+ && window.optimizely.get('data').experiments[getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID]) {
+ const selectedVariant = window.optimizely.get('state').getVariationMap()[
+ getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID
+ ];
+ return selectedVariant?.name;
+ }
+ } catch (e) { /* empty */ }
+ return '';
+}
+
+export function activateMultiStepRegistrationExperiment() {
+ window.optimizely = window.optimizely || [];
+ window.optimizely.push({
+ type: 'page',
+ pageName: MULTI_STEP_REGISTRATION_EXP_PAGE,
+ });
+}
+
+/**
+ * We want to display username and honor_code fields in second page if user is in multi-step
+ * registration page experiment
+ */
+export const shouldDisplayFieldInExperiment = (fieldName, expVariation, registerPageStep) => (
+ !expVariation || expVariation === NOT_INITIALIZED
+ || (expVariation === CONTROL
+ && (
+ CONTROL_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
+ || (registerPageStep === FIRST_STEP && CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === SECOND_STEP && CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
+ ))
+ || (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
+ && (
+ MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
+ || (registerPageStep === FIRST_STEP && MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === SECOND_STEP && MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === THIRD_STEP && MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS.includes(fieldName))
+ ))
+);
+
+export const getRegisterButtonLabelInExperiment = (
+ existingButtonLabel, expVariation, registerPageStep, formatMessage,
+) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
+ return formatMessage(messages['multistep.registration.exp.continue.button']);
+ }
+ return existingButtonLabel;
+};
+
+export const getRegisterButtonSubmitStateInExperiment = (
+ registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
+) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP) {
+ return validationsSubmitState;
+ }
+ return registerSubmitState;
+};
+
+export const getMultiStepRegistrationPreviousStep = (currentStep) => {
+ if (currentStep === THIRD_STEP) {
+ return SECOND_STEP;
+ }
+ if (currentStep === SECOND_STEP) {
+ return FIRST_STEP;
+ }
+ return currentStep;
+};
+
+export const getMultiStepRegistrationNextStep = (currentStep) => {
+ if (currentStep === FIRST_STEP) {
+ return SECOND_STEP;
+ }
+ if (currentStep === SECOND_STEP) {
+ return THIRD_STEP;
+ }
+ return currentStep;
+};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
new file mode 100644
index 00000000..692101b7
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import {
+ activateMultiStepRegistrationExperiment,
+ getMultiStepRegistrationExperimentVariation,
+ NOT_INITIALIZED,
+} from './helper';
+import { COMPLETE_STATE } from '../../../data/constants';
+
+/**
+ * This hook returns activates multi step registration experiment and returns the experiment
+ * variation for the user.
+ */
+const useMultiStepRegistrationExperimentVariation = (
+ initExpVariation,
+ registrationEmbedded,
+ tpaHint,
+ currentProvider,
+ thirdPartyAuthApiStatus,
+) => {
+ const [variation, setVariation] = useState(initExpVariation);
+
+ useEffect(() => {
+ if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
+ || thirdPartyAuthApiStatus !== COMPLETE_STATE) {
+ return variation;
+ }
+
+ const getVariation = () => {
+ const expVariation = getMultiStepRegistrationExperimentVariation();
+ if (expVariation) {
+ setVariation(expVariation);
+ } else {
+ // This is to handle the case when user dont get variation for some reason, the register page
+ // shows unlimited spinner.
+ setVariation(NOT_INITIALIZED);
+ }
+ };
+
+ activateMultiStepRegistrationExperiment();
+
+ const timer = setTimeout(getVariation, 300);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [ // eslint-disable-line react-hooks/exhaustive-deps
+ currentProvider, initExpVariation, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
+ ]);
+
+ return variation;
+};
+
+export default useMultiStepRegistrationExperimentVariation;
diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js
index 70c3a994..32438877 100644
--- a/src/register/data/reducers.js
+++ b/src/register/data/reducers.js
@@ -5,9 +5,11 @@ import {
REGISTER_NEW_USER,
REGISTER_SET_COUNTRY_CODE,
REGISTER_SET_EMAIL_SUGGESTIONS,
+ REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from './actions';
+import { FIRST_STEP } from './optimizelyExperiment/helper';
import {
DEFAULT_STATE,
PENDING_STATE,
@@ -35,10 +37,14 @@ export const defaultState = {
},
validations: null,
submitState: DEFAULT_STATE,
+ validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
+ isValidatingMultiStepRegistrationPage: false,
};
const reducer = (state = defaultState, action = {}) => {
@@ -85,12 +91,22 @@ const reducer = (state = defaultState, action = {}) => {
registrationError: { ...registrationErrorTemp },
};
}
+ case REGISTER_FORM_VALIDATIONS.BEGIN: {
+ return {
+ ...state,
+ validationsSubmitState: action.payload?.isValidatingMultiStepRegistrationPage
+ ? PENDING_STATE
+ : state.validationsSubmitState,
+ };
+ }
case REGISTER_FORM_VALIDATIONS.SUCCESS: {
const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
return {
...state,
validations: validationWithoutUsernameSuggestions,
+ isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
+ validationsSubmitState: DEFAULT_STATE,
};
}
case REGISTER_FORM_VALIDATIONS.FAILURE:
@@ -98,6 +114,7 @@ const reducer = (state = defaultState, action = {}) => {
...state,
validationApiRateLimited: true,
validations: null,
+ validationsSubmitState: DEFAULT_STATE,
};
case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
return {
@@ -129,6 +146,14 @@ const reducer = (state = defaultState, action = {}) => {
emailSuggestion: action.payload.emailSuggestion,
},
};
+ case REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA: {
+ return {
+ ...state,
+ multiStepRegExpVariation: action.payload.multiStepRegExpVariation,
+ multiStepRegistrationPageStep: action.payload.multiStepRegistrationPageStep,
+ isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
+ };
+ }
default:
return {
...state,
diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js
index 0325cd4b..3edd395e 100644
--- a/src/register/data/sagas.js
+++ b/src/register/data/sagas.js
@@ -40,10 +40,13 @@ export function* handleNewUserRegistration(action) {
export function* fetchRealtimeValidations(action) {
try {
- yield put(fetchRealtimeValidationsBegin());
+ yield put(fetchRealtimeValidationsBegin(action.payload?.isValidatingMultiStepRegistrationPage));
const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
- yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
+ yield put(fetchRealtimeValidationsSuccess(
+ camelCaseObject(fieldValidations),
+ action.payload?.isValidatingMultiStepRegistrationPage,
+ ));
} catch (e) {
if (e.response && e.response.status === 403) {
yield put(fetchRealtimeValidationsFailure());
diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js
index 3e2270ab..909704d2 100644
--- a/src/register/data/tests/reducers.test.js
+++ b/src/register/data/tests/reducers.test.js
@@ -11,6 +11,7 @@ import {
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from '../actions';
+import { FIRST_STEP } from '../optimizelyExperiment/helper';
import reducer from '../reducers';
describe('Registration Reducer Tests', () => {
@@ -34,10 +35,14 @@ describe('Registration Reducer Tests', () => {
},
validations: null,
submitState: DEFAULT_STATE,
+ validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
+ isValidatingMultiStepRegistrationPage: false,
};
it('should return the initial state', () => {
diff --git a/src/register/data/utils.js b/src/register/data/utils.js
index b0cff129..747f2f2c 100644
--- a/src/register/data/utils.js
+++ b/src/register/data/utils.js
@@ -43,30 +43,39 @@ export const isFormValid = (
Object.keys(payload).forEach(key => {
switch (key) {
case 'name':
- fieldErrors.name = validateName(payload.name, formatMessage);
+ if (!fieldErrors.name) {
+ fieldErrors.name = validateName(payload.name, formatMessage);
+ }
if (fieldErrors.name) { isValid = false; }
break;
case 'email': {
- const {
- fieldError, confirmEmailError, suggestion,
- } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
- if (fieldError) {
- fieldErrors.email = fieldError;
- isValid = false;
+ if (!fieldErrors.email) {
+ const {
+ fieldError, confirmEmailError, suggestion,
+ } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+ if (fieldError) {
+ fieldErrors.email = fieldError;
+ isValid = false;
+ }
+ if (confirmEmailError) {
+ fieldErrors.confirm_email = confirmEmailError;
+ isValid = false;
+ }
+ emailSuggestion = suggestion;
}
- if (confirmEmailError) {
- fieldErrors.confirm_email = confirmEmailError;
- isValid = false;
- }
- emailSuggestion = suggestion;
+ if (fieldErrors.email) { isValid = false; }
break;
}
case 'username':
- fieldErrors.username = validateUsername(payload.username, formatMessage);
+ if (!fieldErrors.username) {
+ fieldErrors.username = validateUsername(payload.username, formatMessage);
+ }
if (fieldErrors.username) { isValid = false; }
break;
case 'password':
- fieldErrors.password = validatePasswordField(payload.password, formatMessage);
+ if (!fieldErrors.password) {
+ fieldErrors.password = validatePasswordField(payload.password, formatMessage);
+ }
if (fieldErrors.password) { isValid = false; }
break;
default:
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index 39d9e7f5..cea5e5df 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -201,6 +201,29 @@ const messages = defineMessages({
defaultMessage: 'Did you mean',
description: 'Did you mean alert suggestion',
},
+ // MultiStep Registration experiment
+ 'multistep.registration.exp.continue.button': {
+ id: 'multistep.registration.exp.continue.button',
+ defaultMessage: 'Continue',
+ description: 'Label text for multistep registration page second step',
+ },
+ 'multistep.registration.username.second.step.guideline.content': {
+ id: 'multistep.registration.username.second.step.guideline.content',
+ defaultMessage: 'Finish Registration',
+ description: 'Guideline content for username field in multi-step registration experiment step 2',
+ },
+ 'multistep.registration.username.third.step.guideline.content': {
+ id: 'multistep.registration.username.third.step.guideline.content',
+ defaultMessage: 'To finalize your registration, please confirm your country of residence '
+ + 'and create a public username that will identify you in your course communication forums. '
+ + 'The username cannot be changed.',
+ description: 'Guideline content for username field in multi-step registration experiment step 2',
+ },
+ 'multistep.registration.form.submission.error': {
+ id: 'multistep.registration.form.submission.error',
+ defaultMessage: 'Please check your responses for this and the previous step and try again.',
+ description: 'Error message that appears on top of the form when invalid form is submitted',
+ },
});
export default messages;
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 75889601..4126da9a 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -1,7 +1,3 @@
-.register-button {
- min-width: 14.4rem;
-}
-
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From 90f650ce3eb0778e5328727184cecfc81b6a41d5 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:04:28 +0500
Subject: [PATCH 10/82] feat: add multi step registration eventing (#1226)
* feat: implement multi step registration experiment
* feat: add multi step registration eventing
---
src/common-components/SocialAuthProviders.jsx | 14 ++++-
src/common-components/ThirdPartyAuth.jsx | 4 ++
src/register/RegistrationPage.jsx | 35 +++++++++++-
.../data/optimizelyExperiment/track.js | 56 +++++++++++++++++++
...ltiStepRegistrationExperimentVariation.jsx | 2 +
5 files changed, 108 insertions(+), 3 deletions(-)
create mode 100644 src/register/data/optimizelyExperiment/track.js
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index abe06da7..5cdb04e0 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -9,14 +9,24 @@ import PropTypes from 'prop-types';
import messages from './messages';
import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
+import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
const SocialAuthProviders = (props) => {
const { formatMessage } = useIntl();
- const { referrer, socialAuthProviders } = props;
+ const {
+ referrer,
+ socialAuthProviders,
+ multiStepRegistrationExpVariation,
+ } = props;
function handleSubmit(e) {
e.preventDefault();
+ if (multiStepRegistrationExpVariation === CONTROL
+ || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
+ trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
+ }
const url = e.currentTarget.dataset.providerUrl;
window.location.href = getConfig().LMS_BASE_URL + url;
}
@@ -60,6 +70,7 @@ const SocialAuthProviders = (props) => {
SocialAuthProviders.defaultProps = {
referrer: LOGIN_PAGE,
socialAuthProviders: [],
+ multiStepRegistrationExpVariation: '',
};
SocialAuthProviders.propTypes = {
@@ -73,6 +84,7 @@ SocialAuthProviders.propTypes = {
registerUrl: PropTypes.string,
skipRegistrationForm: PropTypes.bool,
})),
+ multiStepRegistrationExpVariation: PropTypes.string,
};
export default SocialAuthProviders;
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 3b782036..d64615e0 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -32,6 +32,7 @@ const ThirdPartyAuth = (props) => {
handleInstitutionLogin,
thirdPartyAuthApiStatus,
isLoginPage,
+ multiStepRegistrationExpVariation,
} = props;
const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -78,6 +79,7 @@ const ThirdPartyAuth = (props) => {
)}
@@ -93,6 +95,7 @@ ThirdPartyAuth.defaultProps = {
secondaryProviders: [],
thirdPartyAuthApiStatus: PENDING_STATE,
isLoginPage: false,
+ multiStepRegistrationExpVariation: '',
};
ThirdPartyAuth.propTypes = {
@@ -120,6 +123,7 @@ ThirdPartyAuth.propTypes = {
),
thirdPartyAuthApiStatus: PropTypes.string,
isLoginPage: PropTypes.bool,
+ multiStepRegistrationExpVariation: PropTypes.string,
};
export default ThirdPartyAuth;
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 70897a31..19b3d774 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -34,10 +34,17 @@ import {
getRegisterButtonLabelInExperiment,
getRegisterButtonSubmitStateInExperiment,
MULTI_STEP_REGISTRATION_EXP_VARIATION,
- NOT_INITIALIZED,
SECOND_STEP,
shouldDisplayFieldInExperiment, THIRD_STEP,
} from './data/optimizelyExperiment/helper';
+import {
+ trackMultiStepRegistrationFormSubmitBtnClicked,
+ trackMultiStepRegistrationStep1SubmitBtnClicked,
+ trackMultiStepRegistrationStep2SubmitBtnClicked,
+ trackMultiStepRegistrationStep2Viewed,
+ trackMultiStepRegistrationStep3SubmitBtnClicked,
+ trackMultiStepRegistrationStep3Viewed,
+} from './data/optimizelyExperiment/track';
import useMultiStepRegistrationExperimentVariation
from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import getBackendValidations from './data/selectors';
@@ -136,6 +143,17 @@ const RegistrationPage = (props) => {
) {
setErrorCode({ type: '', count: 0 });
const nextStep = getMultiStepRegistrationNextStep(multiStepRegistrationPageStep);
+ if (nextStep === SECOND_STEP) {
+ trackMultiStepRegistrationStep2Viewed(multiStepRegistrationExpVariation);
+ if (multiStepRegistrationExpVariation === CONTROL) {
+ trackMultiStepRegistrationFormSubmitBtnClicked(multiStepRegistrationExpVariation);
+ }
+ } else if (nextStep === THIRD_STEP) {
+ trackMultiStepRegistrationStep3Viewed();
+ if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
+ trackMultiStepRegistrationFormSubmitBtnClicked(multiStepRegistrationExpVariation);
+ }
+ }
dispatch(setMultiStepRegistrationExpData(multiStepRegistrationExpVariation, nextStep));
}
}, [ // eslint-disable-line react-hooks/exhaustive-deps
@@ -215,7 +233,8 @@ const RegistrationPage = (props) => {
if (registrationResult.success) {
let registeredEventProps = {};
- if (multiStepRegistrationExpVariation !== NOT_INITIALIZED) {
+ if (multiStepRegistrationExpVariation === CONTROL
+ || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
registeredEventProps = {
variation: multiStepRegistrationExpVariation,
};
@@ -300,15 +319,25 @@ const RegistrationPage = (props) => {
const handleSubmit = (e) => {
e.preventDefault();
+ if (multiStepRegistrationExpVariation === CONTROL
+ && multiStepRegistrationPageStep === SECOND_STEP) {
+ trackMultiStepRegistrationStep2SubmitBtnClicked(multiStepRegistrationExpVariation);
+ }
+ if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
+ && multiStepRegistrationPageStep === THIRD_STEP) {
+ trackMultiStepRegistrationStep3SubmitBtnClicked();
+ }
if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
&& multiStepRegistrationPageStep !== THIRD_STEP) {
let formFieldsPayload = {};
if (multiStepRegistrationPageStep === FIRST_STEP) {
+ trackMultiStepRegistrationStep1SubmitBtnClicked(multiStepRegistrationExpVariation);
// We only want to validate email in the first step of registration
// Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
formFieldsPayload = { email: formFields.email };
} else if (multiStepRegistrationPageStep === SECOND_STEP) {
+ trackMultiStepRegistrationStep2SubmitBtnClicked(multiStepRegistrationExpVariation);
// We only want to validate name and password field in the second step of registration
// Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
formFieldsPayload = { name: formFields.name, password: formFields.password };
@@ -328,6 +357,7 @@ const RegistrationPage = (props) => {
dispatch(fetchRealtimeValidations(formFieldsPayload, true));
}
} else if (multiStepRegistrationExpVariation === CONTROL && multiStepRegistrationPageStep !== SECOND_STEP) {
+ trackMultiStepRegistrationStep1SubmitBtnClicked(multiStepRegistrationExpVariation);
// We only want to validate name, email and password fields in the first step of CONTROL registration
// Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
const formFieldsPayload = { name: formFields.name, email: formFields.email, password: formFields.password };
@@ -518,6 +548,7 @@ const RegistrationPage = (props) => {
secondaryProviders={secondaryProviders}
handleInstitutionLogin={handleInstitutionLogin}
thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
+ multiStepRegistrationExpVariation={multiStepRegistrationExpVariation}
/>
)}
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
new file mode 100644
index 00000000..8db71809
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/track.js
@@ -0,0 +1,56 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+export const eventNames = {
+ multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
+ multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
+ multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
+ multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
+ multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
+ multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
+ multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
+ multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
+};
+
+export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep3Viewed = () => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
+};
+
+export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
+};
+
+export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
+ variation: expVariation,
+ });
+};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
index 692101b7..97d0a233 100644
--- a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
+++ b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
@@ -5,6 +5,7 @@ import {
getMultiStepRegistrationExperimentVariation,
NOT_INITIALIZED,
} from './helper';
+import { trackMultiStepRegistrationStep1Viewed } from './track';
import { COMPLETE_STATE } from '../../../data/constants';
/**
@@ -30,6 +31,7 @@ const useMultiStepRegistrationExperimentVariation = (
const expVariation = getMultiStepRegistrationExperimentVariation();
if (expVariation) {
setVariation(expVariation);
+ trackMultiStepRegistrationStep1Viewed(expVariation);
} else {
// This is to handle the case when user dont get variation for some reason, the register page
// shows unlimited spinner.
From b219fe3683c97e4547257e2b61e936e67caefa20 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
Date: Mon, 22 Apr 2024 11:34:47 +0500
Subject: [PATCH 11/82] fix: fix register button width
---
src/register/RegistrationPage.jsx | 6 +++++-
src/register/data/optimizelyExperiment/helper.js | 7 +++++++
src/sass/_registration.scss | 8 ++++++++
3 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 19b3d774..7bca6255 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -31,6 +31,7 @@ import {
CONTROL,
FIRST_STEP,
getMultiStepRegistrationNextStep,
+ getRegisterButtonClassInExperiment,
getRegisterButtonLabelInExperiment,
getRegisterButtonSubmitStateInExperiment,
MULTI_STEP_REGISTRATION_EXP_VARIATION,
@@ -522,7 +523,10 @@ const RegistrationPage = (props) => {
name="register-user"
type="submit"
variant="brand"
- className="mt-4 mb-4"
+ className={`
+ mt-4 mb-4
+ ${getRegisterButtonClassInExperiment(multiStepRegistrationExpVariation, multiStepRegistrationPageStep)}
+ `}
state={getRegisterButtonSubmitStateInExperiment(
submitState,
validationsSubmitState,
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
index e59ec718..7140d5ec 100644
--- a/src/register/data/optimizelyExperiment/helper.js
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -75,6 +75,13 @@ export const getRegisterButtonLabelInExperiment = (
return existingButtonLabel;
};
+export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
+ return 'continue-button';
+ }
+ return 'register-button';
+};
+
export const getRegisterButtonSubmitStateInExperiment = (
registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
) => {
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 4126da9a..884af10d 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -1,3 +1,11 @@
+.register-button {
+ min-width: 14.4rem;
+}
+
+.continue-button {
+ min-width: 7rem;
+}
+
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From 378250398394c86d4821efc3eadcc9dd3ce5cadf Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
Date: Mon, 22 Apr 2024 15:17:08 +0500
Subject: [PATCH 12/82] fix: fix register button loader for control
---
src/register/data/optimizelyExperiment/helper.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
index 7140d5ec..f3d21381 100644
--- a/src/register/data/optimizelyExperiment/helper.js
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -85,7 +85,8 @@ export const getRegisterButtonClassInExperiment = (expVariation, registerPageSte
export const getRegisterButtonSubmitStateInExperiment = (
registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP) {
+ if ((expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP)
+ || (expVariation === CONTROL && registerPageStep !== SECOND_STEP)) {
return validationsSubmitState;
}
return registerSubmitState;
From 03d1666c2cf7a341f57c9e0c93c1ab518f0e1af0 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:28:05 +0500
Subject: [PATCH 13/82] feat: capture marketing lead in experiment events
(#1243)
---
src/register/RegistrationPage.jsx | 3 ++-
src/register/data/optimizelyExperiment/track.js | 3 ++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 7bca6255..e4da4b0a 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -145,7 +145,8 @@ const RegistrationPage = (props) => {
setErrorCode({ type: '', count: 0 });
const nextStep = getMultiStepRegistrationNextStep(multiStepRegistrationPageStep);
if (nextStep === SECOND_STEP) {
- trackMultiStepRegistrationStep2Viewed(multiStepRegistrationExpVariation);
+ const isMarketingLead = formFields.email && configurableFormFields?.marketingEmailsOptIn;
+ trackMultiStepRegistrationStep2Viewed(multiStepRegistrationExpVariation, isMarketingLead);
if (multiStepRegistrationExpVariation === CONTROL) {
trackMultiStepRegistrationFormSubmitBtnClicked(multiStepRegistrationExpVariation);
}
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
index 8db71809..68a6347a 100644
--- a/src/register/data/optimizelyExperiment/track.js
+++ b/src/register/data/optimizelyExperiment/track.js
@@ -17,9 +17,10 @@ export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
});
};
-export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+export const trackMultiStepRegistrationStep2Viewed = (expVariation, isMarketingLead) => {
sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
variation: expVariation,
+ is_marketing_lead: isMarketingLead,
});
};
From d8947a4c0ad7fd4dcd28224f49fa68545a589601 Mon Sep 17 00:00:00 2001
From: mubbsharanwar
Date: Mon, 6 May 2024 15:57:54 +0500
Subject: [PATCH 14/82] revert: multistep registration experiment revert
multistep registration experiment changes
VAN-1930
---
src/common-components/SocialAuthProviders.jsx | 14 +-
src/common-components/ThirdPartyAuth.jsx | 4 -
src/common-components/messages.jsx | 6 -
src/config/index.js | 2 -
src/logistration/Logistration.jsx | 55 +--
src/logistration/Logistration.test.jsx | 7 -
src/register/RegistrationPage.jsx | 377 +++++-------------
src/register/RegistrationPage.test.jsx | 5 -
.../ConfigurableRegistrationForm.jsx | 24 +-
.../components/RegistrationFailure.jsx | 11 +-
.../ConfigurableRegistrationForm.test.jsx | 8 -
.../tests/RegistrationFailure.test.jsx | 5 -
.../components/tests/ThirdPartyAuth.test.jsx | 5 -
src/register/data/actions.js | 21 +-
.../data/optimizelyExperiment/helper.js | 113 ------
.../data/optimizelyExperiment/track.js | 57 ---
...ltiStepRegistrationExperimentVariation.jsx | 56 ---
src/register/data/reducers.js | 25 --
src/register/data/sagas.js | 7 +-
src/register/data/tests/reducers.test.js | 5 -
src/register/data/utils.js | 36 +-
src/register/messages.jsx | 23 --
src/sass/_registration.scss | 4 -
23 files changed, 136 insertions(+), 734 deletions(-)
delete mode 100644 src/register/data/optimizelyExperiment/helper.js
delete mode 100644 src/register/data/optimizelyExperiment/track.js
delete mode 100644 src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index 5cdb04e0..abe06da7 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -9,24 +9,14 @@ import PropTypes from 'prop-types';
import messages from './messages';
import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
-import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
-import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
const SocialAuthProviders = (props) => {
const { formatMessage } = useIntl();
- const {
- referrer,
- socialAuthProviders,
- multiStepRegistrationExpVariation,
- } = props;
+ const { referrer, socialAuthProviders } = props;
function handleSubmit(e) {
e.preventDefault();
- if (multiStepRegistrationExpVariation === CONTROL
- || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
- trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
- }
const url = e.currentTarget.dataset.providerUrl;
window.location.href = getConfig().LMS_BASE_URL + url;
}
@@ -70,7 +60,6 @@ const SocialAuthProviders = (props) => {
SocialAuthProviders.defaultProps = {
referrer: LOGIN_PAGE,
socialAuthProviders: [],
- multiStepRegistrationExpVariation: '',
};
SocialAuthProviders.propTypes = {
@@ -84,7 +73,6 @@ SocialAuthProviders.propTypes = {
registerUrl: PropTypes.string,
skipRegistrationForm: PropTypes.bool,
})),
- multiStepRegistrationExpVariation: PropTypes.string,
};
export default SocialAuthProviders;
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index d64615e0..3b782036 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -32,7 +32,6 @@ const ThirdPartyAuth = (props) => {
handleInstitutionLogin,
thirdPartyAuthApiStatus,
isLoginPage,
- multiStepRegistrationExpVariation,
} = props;
const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -79,7 +78,6 @@ const ThirdPartyAuth = (props) => {
)}
@@ -95,7 +93,6 @@ ThirdPartyAuth.defaultProps = {
secondaryProviders: [],
thirdPartyAuthApiStatus: PENDING_STATE,
isLoginPage: false,
- multiStepRegistrationExpVariation: '',
};
ThirdPartyAuth.propTypes = {
@@ -123,7 +120,6 @@ ThirdPartyAuth.propTypes = {
),
thirdPartyAuthApiStatus: PropTypes.string,
isLoginPage: PropTypes.bool,
- multiStepRegistrationExpVariation: PropTypes.string,
};
export default ThirdPartyAuth;
diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx
index 6f0e69ca..08e88b8f 100644
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -132,12 +132,6 @@ const messages = defineMessages({
defaultMessage: 'Company or school credentials',
description: 'Company or school login link text.',
},
- // multi step registration experiment messages
- 'tab.back.btn.text': {
- id: 'tab.back.btn.text',
- defaultMessage: 'Back',
- description: 'Tab back button text',
- },
});
export default messages;
diff --git a/src/config/index.js b/src/config/index.js
index 5d221faa..fa3613aa 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -34,8 +34,6 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
- // Multi Step Registration Experiment
- MULTI_STEP_REGISTRATION_EXPERIMENT_ID: process.env.MULTI_STEP_REGISTRATION_EXPERIMENT_ID || '',
};
export default configuration;
diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx
index 5199e1b3..9451aa27 100644
--- a/src/logistration/Logistration.jsx
+++ b/src/logistration/Logistration.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -7,11 +7,10 @@ import { getAuthService } from '@edx/frontend-platform/auth';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Icon,
- IconButton,
Tab,
Tabs,
} from '@openedx/paragon';
-import { ArrowBackIos, ChevronLeft } from '@openedx/paragon/icons';
+import { ChevronLeft } from '@openedx/paragon/icons';
import PropTypes from 'prop-types';
import { Navigate, useNavigate } from 'react-router-dom';
@@ -28,11 +27,7 @@ import {
import { LoginPage } from '../login';
import { backupLoginForm } from '../login/data/actions';
import { RegistrationPage } from '../register';
-import { backupRegistrationForm, setMultiStepRegistrationExpData } from '../register/data/actions';
-import {
- FIRST_STEP,
- getMultiStepRegistrationPreviousStep,
-} from '../register/data/optimizelyExperiment/helper';
+import { backupRegistrationForm } from '../register/data/actions';
const Logistration = (props) => {
const { selectedPage, tpaProviders } = props;
@@ -47,10 +42,6 @@ const Logistration = (props) => {
const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
- const dispatch = useDispatch();
- const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
- const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
-
useEffect(() => {
const authService = getAuthService();
if (authService) {
@@ -100,39 +91,6 @@ const Logistration = (props) => {
);
- /**
- * Temporary function created to resolve the complexity in tabs conditioning for multi-step
- * registration experiment
- */
- const getTabs = () => {
- if (multiStepRegistrationPageStep !== FIRST_STEP) {
- const prevStep = getMultiStepRegistrationPreviousStep(multiStepRegistrationPageStep);
- return (
-
- {
- dispatch(setMultiStepRegistrationExpData(multiStepRegExpVariation, prevStep));
- }}
- variant="primary"
- size="inline"
- className="mr-1"
- />
- {formatMessage(messages['tab.back.btn.text'])}
-
- );
- }
- return (
- handleOnSelect(tabKey, selectedPage)}>
-
-
-
- );
- };
-
const isValidTpaHint = () => {
const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
return !!provider;
@@ -165,7 +123,12 @@ const Logistration = (props) => {
)
- : (!isValidTpaHint() && !hideRegistrationLink && getTabs())}
+ : (!isValidTpaHint() && !hideRegistrationLink && (
+ handleOnSelect(tabKey, selectedPage)}>
+
+
+
+ ))}
{ key && (
)}
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index ce7af88f..87bf3e70 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,16 +15,12 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
-import { FIRST_STEP, NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
-jest.mock('../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -67,8 +63,6 @@ describe('Logistration', () => {
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
},
commonComponents: {
thirdPartyAuthContext: {
@@ -89,7 +83,6 @@ describe('Logistration', () => {
username: 'test-user',
})),
}));
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index e4da4b0a..80ac1f6b 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -17,37 +17,14 @@ import RegistrationFailure from './components/RegistrationFailure';
import {
backupRegistrationFormBegin,
clearRegistrationBackendError,
- fetchRealtimeValidations,
registerNewUser,
setEmailSuggestionInStore,
- setMultiStepRegistrationExpData,
setUserPipelineDataLoaded,
} from './data/actions';
import {
FORM_SUBMISSION_ERROR,
TPA_AUTHENTICATION_FAILURE,
} from './data/constants';
-import {
- CONTROL,
- FIRST_STEP,
- getMultiStepRegistrationNextStep,
- getRegisterButtonClassInExperiment,
- getRegisterButtonLabelInExperiment,
- getRegisterButtonSubmitStateInExperiment,
- MULTI_STEP_REGISTRATION_EXP_VARIATION,
- SECOND_STEP,
- shouldDisplayFieldInExperiment, THIRD_STEP,
-} from './data/optimizelyExperiment/helper';
-import {
- trackMultiStepRegistrationFormSubmitBtnClicked,
- trackMultiStepRegistrationStep1SubmitBtnClicked,
- trackMultiStepRegistrationStep2SubmitBtnClicked,
- trackMultiStepRegistrationStep2Viewed,
- trackMultiStepRegistrationStep3SubmitBtnClicked,
- trackMultiStepRegistrationStep3Viewed,
-} from './data/optimizelyExperiment/track';
-import useMultiStepRegistrationExperimentVariation
- from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import getBackendValidations from './data/selectors';
import {
isFormValid, prepareRegistrationPayload,
@@ -96,13 +73,6 @@ const RegistrationPage = (props) => {
const shouldBackupState = useSelector(state => state.register.shouldBackupState);
const userPipelineDataLoaded = useSelector(state => state.register.userPipelineDataLoaded);
const submitState = useSelector(state => state.register.submitState);
- const backendValidations = useSelector(getBackendValidations);
- const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
- const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
- const isValidatingMultiStepRegistrationPage = useSelector(
- state => state.register.isValidatingMultiStepRegistrationPage,
- );
- const validationsSubmitState = useSelector(state => state.register.validationsSubmitState);
const fieldDescriptions = useSelector(state => state.commonComponents.fieldDescriptions);
const optionalFields = useSelector(state => state.commonComponents.optionalFields);
@@ -115,6 +85,7 @@ const RegistrationPage = (props) => {
const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
+ const backendValidations = useSelector(getBackendValidations);
const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
const tpaHint = useMemo(() => getTpaHint(), []);
@@ -131,38 +102,6 @@ const RegistrationPage = (props) => {
? formatMessage(messages['create.account.cta.button'], { label: cta })
: formatMessage(messages['create.account.for.free.button']);
- /**
- * Multi-Step Registration Page Experiment
- */
- const multiStepRegistrationExpVariation = useMultiStepRegistrationExperimentVariation(
- multiStepRegExpVariation, registrationEmbedded, tpaHint, currentProvider, thirdPartyAuthApiStatus,
- );
-
- useEffect(() => {
- if (isValidatingMultiStepRegistrationPage && backendValidations
- && Object.values(backendValidations).every(value => value === '')
- ) {
- setErrorCode({ type: '', count: 0 });
- const nextStep = getMultiStepRegistrationNextStep(multiStepRegistrationPageStep);
- if (nextStep === SECOND_STEP) {
- const isMarketingLead = formFields.email && configurableFormFields?.marketingEmailsOptIn;
- trackMultiStepRegistrationStep2Viewed(multiStepRegistrationExpVariation, isMarketingLead);
- if (multiStepRegistrationExpVariation === CONTROL) {
- trackMultiStepRegistrationFormSubmitBtnClicked(multiStepRegistrationExpVariation);
- }
- } else if (nextStep === THIRD_STEP) {
- trackMultiStepRegistrationStep3Viewed();
- if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
- trackMultiStepRegistrationFormSubmitBtnClicked(multiStepRegistrationExpVariation);
- }
- }
- dispatch(setMultiStepRegistrationExpData(multiStepRegistrationExpVariation, nextStep));
- }
- }, [ // eslint-disable-line react-hooks/exhaustive-deps
- isValidatingMultiStepRegistrationPage,
- backendValidations,
- ]);
-
/**
* Set the userPipelineDetails data in formFields for only first time
*/
@@ -209,11 +148,8 @@ const RegistrationPage = (props) => {
formFields: { ...formFields },
errors: { ...errors },
}));
- dispatch(setMultiStepRegistrationExpData(
- multiStepRegistrationExpVariation, multiStepRegistrationPageStep, false,
- ));
}
- }, [shouldBackupState]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
useEffect(() => {
if (backendValidations) {
@@ -233,22 +169,13 @@ const RegistrationPage = (props) => {
useEffect(() => {
if (registrationResult.success) {
- let registeredEventProps = {};
-
- if (multiStepRegistrationExpVariation === CONTROL
- || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
- registeredEventProps = {
- variation: multiStepRegistrationExpVariation,
- };
- }
-
// This event is used by GTM
- sendTrackEvent('edx.bi.user.account.registered.client', registeredEventProps);
+ sendTrackEvent('edx.bi.user.account.registered.client', {});
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
- }, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [registrationResult]);
const handleOnChange = (event) => {
const { name } = event.target;
@@ -320,67 +247,7 @@ const RegistrationPage = (props) => {
const handleSubmit = (e) => {
e.preventDefault();
-
- if (multiStepRegistrationExpVariation === CONTROL
- && multiStepRegistrationPageStep === SECOND_STEP) {
- trackMultiStepRegistrationStep2SubmitBtnClicked(multiStepRegistrationExpVariation);
- }
- if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
- && multiStepRegistrationPageStep === THIRD_STEP) {
- trackMultiStepRegistrationStep3SubmitBtnClicked();
- }
- if (multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
- && multiStepRegistrationPageStep !== THIRD_STEP) {
- let formFieldsPayload = {};
-
- if (multiStepRegistrationPageStep === FIRST_STEP) {
- trackMultiStepRegistrationStep1SubmitBtnClicked(multiStepRegistrationExpVariation);
- // We only want to validate email in the first step of registration
- // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
- formFieldsPayload = { email: formFields.email };
- } else if (multiStepRegistrationPageStep === SECOND_STEP) {
- trackMultiStepRegistrationStep2SubmitBtnClicked(multiStepRegistrationExpVariation);
- // We only want to validate name and password field in the second step of registration
- // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
- formFieldsPayload = { name: formFields.name, password: formFields.password };
- }
-
- const { isValid, fieldErrors } = isFormValid(
- formFieldsPayload, errors, {}, {}, formatMessage,
- );
- setErrors(prevErrors => ({
- ...prevErrors,
- ...fieldErrors,
- }));
- // returning if not valid
- if (!isValid) {
- setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
- } else {
- dispatch(fetchRealtimeValidations(formFieldsPayload, true));
- }
- } else if (multiStepRegistrationExpVariation === CONTROL && multiStepRegistrationPageStep !== SECOND_STEP) {
- trackMultiStepRegistrationStep1SubmitBtnClicked(multiStepRegistrationExpVariation);
- // We only want to validate name, email and password fields in the first step of CONTROL registration
- // Doing manual validations to avoid the case where user clicks CTA without focusing out of field.
- const formFieldsPayload = { name: formFields.name, email: formFields.email, password: formFields.password };
-
- const { isValid, fieldErrors } = isFormValid(
- formFieldsPayload, errors, {}, {}, formatMessage,
- );
-
- setErrors(prevErrors => ({
- ...prevErrors,
- ...fieldErrors,
- }));
- // returning if not valid
- if (!isValid) {
- setErrorCode(prevState => ({ type: FORM_SUBMISSION_ERROR, count: prevState.count + 1 }));
- } else {
- dispatch(fetchRealtimeValidations(formFieldsPayload, true));
- }
- } else {
- registerUser();
- }
+ registerUser();
};
useEffect(() => {
@@ -415,150 +282,104 @@ const RegistrationPage = (props) => {
getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
}
/>
- {(autoSubmitRegForm && !errorCode.type)
- || (!multiStepRegistrationExpVariation && !(registrationEmbedded || !!tpaHint || !!currentProvider))
- ? (
-
-
-
- ) : (
-
+
+
+ ) : (
+
- )}
+ )}
+
+
+ )}
+
);
};
diff --git a/src/register/RegistrationPage.test.jsx b/src/register/RegistrationPage.test.jsx
index 1f6fd1a3..2634713f 100644
--- a/src/register/RegistrationPage.test.jsx
+++ b/src/register/RegistrationPage.test.jsx
@@ -17,9 +17,6 @@ import {
setUserPipelineDataLoaded,
} from './data/actions';
import { INTERNAL_SERVER_ERROR } from './data/constants';
-import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from './RegistrationPage';
import {
AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
@@ -33,7 +30,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('./data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -132,7 +128,6 @@ describe('RegistrationPage', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index 5e69c7c0..be1f9c27 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
import { FormFieldRenderer } from '../../field-renderer';
import { FIELDS } from '../data/constants';
-import { FIRST_STEP, shouldDisplayFieldInExperiment } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -32,8 +31,6 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors,
setFormFields,
autoSubmitRegistrationForm,
- multiStepRegistrationExpVariation,
- multiStepRegistrationPageStep,
} = props;
const countryList = useMemo(() => getCountryList(getLocale()), []);
@@ -108,9 +105,7 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
};
- if (flags.showConfigurableRegistrationFields && shouldDisplayFieldInExperiment(
- 'other_fields', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableRegistrationFields) {
Object.keys(fieldDescriptions).forEach(fieldName => {
const fieldData = fieldDescriptions[fieldName];
switch (fieldData.name) {
@@ -162,9 +157,7 @@ const ConfigurableRegistrationForm = (props) => {
});
}
- if ((flags.showConfigurableEdxFields || showCountryField) && shouldDisplayFieldInExperiment(
- 'country', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableEdxFields || showCountryField) {
formFieldDescriptions.push(
{
);
}
- if (flags.showMarketingEmailOptInCheckbox && shouldDisplayFieldInExperiment(
- 'marketing_email_opt_in', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showMarketingEmailOptInCheckbox) {
formFieldDescriptions.push(
{
);
}
- if ((flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode)
- && shouldDisplayFieldInExperiment(
- 'honor_code', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode) {
formFieldDescriptions.push(
@@ -239,15 +227,11 @@ ConfigurableRegistrationForm.propTypes = {
setFieldErrors: PropTypes.func.isRequired,
setFormFields: PropTypes.func.isRequired,
autoSubmitRegistrationForm: PropTypes.bool,
- multiStepRegistrationExpVariation: PropTypes.string,
- multiStepRegistrationPageStep: PropTypes.string,
};
ConfigurableRegistrationForm.defaultProps = {
fieldDescriptions: {},
autoSubmitRegistrationForm: false,
- multiStepRegistrationExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
};
export default ConfigurableRegistrationForm;
diff --git a/src/register/components/RegistrationFailure.jsx b/src/register/components/RegistrationFailure.jsx
index f2a83585..c34c2af7 100644
--- a/src/register/components/RegistrationFailure.jsx
+++ b/src/register/components/RegistrationFailure.jsx
@@ -13,13 +13,12 @@ import {
TPA_AUTHENTICATION_FAILURE,
TPA_SESSION_EXPIRED,
} from '../data/constants';
-import { FIRST_STEP } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
const RegistrationFailureMessage = (props) => {
const { formatMessage } = useIntl();
const {
- context, errorCode, failureCount, multiStepRegistrationPageStep,
+ context, errorCode, failureCount,
} = props;
useEffect(() => {
@@ -50,11 +49,7 @@ const RegistrationFailureMessage = (props) => {
errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
break;
default:
- if (multiStepRegistrationPageStep !== FIRST_STEP) {
- errorMessage = formatMessage(messages['multistep.registration.form.submission.error']);
- } else {
- errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
- }
+ errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
break;
}
@@ -70,7 +65,6 @@ RegistrationFailureMessage.defaultProps = {
context: {
errorMessage: null,
},
- multiStepRegistrationPageStep: FIRST_STEP,
};
RegistrationFailureMessage.propTypes = {
@@ -80,7 +74,6 @@ RegistrationFailureMessage.propTypes = {
}),
errorCode: PropTypes.string.isRequired,
failureCount: PropTypes.number.isRequired,
- multiStepRegistrationPageStep: PropTypes.string,
};
export default RegistrationFailureMessage;
diff --git a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
index 28269072..537d11eb 100644
--- a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
+++ b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -11,9 +11,6 @@ import configureStore from 'redux-mock-store';
import { registerNewUser } from '../../data/actions';
import { FIELDS } from '../../data/constants';
-import { FIRST_STEP, NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
@@ -97,9 +93,6 @@ describe('ConfigurableRegistrationForm', () => {
registrationError: {},
registrationFormData,
usernameSuggestions: [],
- multiStepRegistrationPageStep: FIRST_STEP,
- multiStepRegExpVariation: '',
- isValidatingMultiStepRegistrationPage: false,
},
commonComponents: {
thirdPartyAuthApiStatus: null,
@@ -128,7 +121,6 @@ describe('ConfigurableRegistrationForm', () => {
};
window.location = { search: '' };
getLocale.mockImplementationOnce(() => ('en-us'));
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/RegistrationFailure.test.jsx b/src/register/components/tests/RegistrationFailure.test.jsx
index b9667c9c..003cc966 100644
--- a/src/register/components/tests/RegistrationFailure.test.jsx
+++ b/src/register/components/tests/RegistrationFailure.test.jsx
@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
} from '../../data/constants';
-import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import RegistrationFailureMessage from '../RegistrationFailure';
@@ -26,7 +23,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -125,7 +121,6 @@ describe('RegistrationFailure', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/ThirdPartyAuth.test.jsx b/src/register/components/tests/ThirdPartyAuth.test.jsx
index 45672ad5..917f10f9 100644
--- a/src/register/components/tests/ThirdPartyAuth.test.jsx
+++ b/src/register/components/tests/ThirdPartyAuth.test.jsx
@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
} from '../../../data/constants';
-import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -124,7 +120,6 @@ describe('ThirdPartyAuth', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/data/actions.js b/src/register/data/actions.js
index 530f3bc8..68bfe9e6 100644
--- a/src/register/data/actions.js
+++ b/src/register/data/actions.js
@@ -8,8 +8,6 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
-export const REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA = 'REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA';
-
// Backup registration form
export const backupRegistrationForm = () => ({
type: BACKUP_REGISTRATION_DATA.BASE,
@@ -21,19 +19,18 @@ export const backupRegistrationFormBegin = (data) => ({
});
// Validate fields from the backend
-export const fetchRealtimeValidations = (formPayload, isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidations = (formPayload) => ({
type: REGISTER_FORM_VALIDATIONS.BASE,
- payload: { formPayload, isValidatingMultiStepRegistrationPage },
+ payload: { formPayload },
});
-export const fetchRealtimeValidationsBegin = (isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidationsBegin = () => ({
type: REGISTER_FORM_VALIDATIONS.BEGIN,
- payload: { isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsSuccess = (validations, isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidationsSuccess = (validations) => ({
type: REGISTER_FORM_VALIDATIONS.SUCCESS,
- payload: { validations, isValidatingMultiStepRegistrationPage },
+ payload: { validations },
});
export const fetchRealtimeValidationsFailure = () => ({
@@ -85,11 +82,3 @@ export const setUserPipelineDataLoaded = (value) => ({
type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
payload: { value },
});
-
-// Multi Step Registration Experiment Actions
-export const setMultiStepRegistrationExpData = (
- multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage,
-) => ({
- type: REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
- payload: { multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage },
-});
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
deleted file mode 100644
index f3d21381..00000000
--- a/src/register/data/optimizelyExperiment/helper.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * This file contains data for Multi Step Registration Optimizely experiment
- */
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from '../../messages';
-
-export const NOT_INITIALIZED = 'experiment-not-initialized';
-export const CONTROL = 'control-registration-page';
-export const MULTI_STEP_REGISTRATION_EXP_VARIATION = 'multi-step-registration-page';
-
-export const FIRST_STEP = 'first-step';
-export const SECOND_STEP = 'second-step';
-export const THIRD_STEP = 'third-step';
-
-export const CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS = ['name', 'email', 'password', 'marketing_email_opt_in', 'ThirdPartyAuth'];
-export const CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS = ['username', 'country'];
-export const CONTROL_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
-
-export const MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS = ['email', 'marketing_email_opt_in', 'ThirdPartyAuth'];
-export const MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS = ['name', 'password'];
-export const MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS = ['username', 'country'];
-export const MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
-
-const MULTI_STEP_REGISTRATION_EXP_PAGE = 'authn_register_page';
-
-export function getMultiStepRegistrationExperimentVariation() {
- try {
- if (window.optimizely
- && window.optimizely.get('data').experiments[getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID]) {
- const selectedVariant = window.optimizely.get('state').getVariationMap()[
- getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID
- ];
- return selectedVariant?.name;
- }
- } catch (e) { /* empty */ }
- return '';
-}
-
-export function activateMultiStepRegistrationExperiment() {
- window.optimizely = window.optimizely || [];
- window.optimizely.push({
- type: 'page',
- pageName: MULTI_STEP_REGISTRATION_EXP_PAGE,
- });
-}
-
-/**
- * We want to display username and honor_code fields in second page if user is in multi-step
- * registration page experiment
- */
-export const shouldDisplayFieldInExperiment = (fieldName, expVariation, registerPageStep) => (
- !expVariation || expVariation === NOT_INITIALIZED
- || (expVariation === CONTROL
- && (
- CONTROL_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
- || (registerPageStep === FIRST_STEP && CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === SECOND_STEP && CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
- ))
- || (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
- && (
- MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
- || (registerPageStep === FIRST_STEP && MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === SECOND_STEP && MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === THIRD_STEP && MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS.includes(fieldName))
- ))
-);
-
-export const getRegisterButtonLabelInExperiment = (
- existingButtonLabel, expVariation, registerPageStep, formatMessage,
-) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
- return formatMessage(messages['multistep.registration.exp.continue.button']);
- }
- return existingButtonLabel;
-};
-
-export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
- return 'continue-button';
- }
- return 'register-button';
-};
-
-export const getRegisterButtonSubmitStateInExperiment = (
- registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
-) => {
- if ((expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP)
- || (expVariation === CONTROL && registerPageStep !== SECOND_STEP)) {
- return validationsSubmitState;
- }
- return registerSubmitState;
-};
-
-export const getMultiStepRegistrationPreviousStep = (currentStep) => {
- if (currentStep === THIRD_STEP) {
- return SECOND_STEP;
- }
- if (currentStep === SECOND_STEP) {
- return FIRST_STEP;
- }
- return currentStep;
-};
-
-export const getMultiStepRegistrationNextStep = (currentStep) => {
- if (currentStep === FIRST_STEP) {
- return SECOND_STEP;
- }
- if (currentStep === SECOND_STEP) {
- return THIRD_STEP;
- }
- return currentStep;
-};
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
deleted file mode 100644
index 68a6347a..00000000
--- a/src/register/data/optimizelyExperiment/track.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-
-export const eventNames = {
- multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
- multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
- multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
- multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
- multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
- multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
- multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
- multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
-};
-
-export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep2Viewed = (expVariation, isMarketingLead) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
- variation: expVariation,
- is_marketing_lead: isMarketingLead,
- });
-};
-
-export const trackMultiStepRegistrationStep3Viewed = () => {
- sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
-};
-
-export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
- sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
-};
-
-export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
- variation: expVariation,
- });
-};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
deleted file mode 100644
index 97d0a233..00000000
--- a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import {
- activateMultiStepRegistrationExperiment,
- getMultiStepRegistrationExperimentVariation,
- NOT_INITIALIZED,
-} from './helper';
-import { trackMultiStepRegistrationStep1Viewed } from './track';
-import { COMPLETE_STATE } from '../../../data/constants';
-
-/**
- * This hook returns activates multi step registration experiment and returns the experiment
- * variation for the user.
- */
-const useMultiStepRegistrationExperimentVariation = (
- initExpVariation,
- registrationEmbedded,
- tpaHint,
- currentProvider,
- thirdPartyAuthApiStatus,
-) => {
- const [variation, setVariation] = useState(initExpVariation);
-
- useEffect(() => {
- if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
- || thirdPartyAuthApiStatus !== COMPLETE_STATE) {
- return variation;
- }
-
- const getVariation = () => {
- const expVariation = getMultiStepRegistrationExperimentVariation();
- if (expVariation) {
- setVariation(expVariation);
- trackMultiStepRegistrationStep1Viewed(expVariation);
- } else {
- // This is to handle the case when user dont get variation for some reason, the register page
- // shows unlimited spinner.
- setVariation(NOT_INITIALIZED);
- }
- };
-
- activateMultiStepRegistrationExperiment();
-
- const timer = setTimeout(getVariation, 300);
-
- return () => {
- clearTimeout(timer);
- };
- }, [ // eslint-disable-line react-hooks/exhaustive-deps
- currentProvider, initExpVariation, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
- ]);
-
- return variation;
-};
-
-export default useMultiStepRegistrationExperimentVariation;
diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js
index 32438877..70c3a994 100644
--- a/src/register/data/reducers.js
+++ b/src/register/data/reducers.js
@@ -5,11 +5,9 @@ import {
REGISTER_NEW_USER,
REGISTER_SET_COUNTRY_CODE,
REGISTER_SET_EMAIL_SUGGESTIONS,
- REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from './actions';
-import { FIRST_STEP } from './optimizelyExperiment/helper';
import {
DEFAULT_STATE,
PENDING_STATE,
@@ -37,14 +35,10 @@ export const defaultState = {
},
validations: null,
submitState: DEFAULT_STATE,
- validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
- isValidatingMultiStepRegistrationPage: false,
};
const reducer = (state = defaultState, action = {}) => {
@@ -91,22 +85,12 @@ const reducer = (state = defaultState, action = {}) => {
registrationError: { ...registrationErrorTemp },
};
}
- case REGISTER_FORM_VALIDATIONS.BEGIN: {
- return {
- ...state,
- validationsSubmitState: action.payload?.isValidatingMultiStepRegistrationPage
- ? PENDING_STATE
- : state.validationsSubmitState,
- };
- }
case REGISTER_FORM_VALIDATIONS.SUCCESS: {
const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
return {
...state,
validations: validationWithoutUsernameSuggestions,
- isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
- validationsSubmitState: DEFAULT_STATE,
};
}
case REGISTER_FORM_VALIDATIONS.FAILURE:
@@ -114,7 +98,6 @@ const reducer = (state = defaultState, action = {}) => {
...state,
validationApiRateLimited: true,
validations: null,
- validationsSubmitState: DEFAULT_STATE,
};
case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
return {
@@ -146,14 +129,6 @@ const reducer = (state = defaultState, action = {}) => {
emailSuggestion: action.payload.emailSuggestion,
},
};
- case REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA: {
- return {
- ...state,
- multiStepRegExpVariation: action.payload.multiStepRegExpVariation,
- multiStepRegistrationPageStep: action.payload.multiStepRegistrationPageStep,
- isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
- };
- }
default:
return {
...state,
diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js
index 3edd395e..0325cd4b 100644
--- a/src/register/data/sagas.js
+++ b/src/register/data/sagas.js
@@ -40,13 +40,10 @@ export function* handleNewUserRegistration(action) {
export function* fetchRealtimeValidations(action) {
try {
- yield put(fetchRealtimeValidationsBegin(action.payload?.isValidatingMultiStepRegistrationPage));
+ yield put(fetchRealtimeValidationsBegin());
const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
- yield put(fetchRealtimeValidationsSuccess(
- camelCaseObject(fieldValidations),
- action.payload?.isValidatingMultiStepRegistrationPage,
- ));
+ yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
} catch (e) {
if (e.response && e.response.status === 403) {
yield put(fetchRealtimeValidationsFailure());
diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js
index 909704d2..3e2270ab 100644
--- a/src/register/data/tests/reducers.test.js
+++ b/src/register/data/tests/reducers.test.js
@@ -11,7 +11,6 @@ import {
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from '../actions';
-import { FIRST_STEP } from '../optimizelyExperiment/helper';
import reducer from '../reducers';
describe('Registration Reducer Tests', () => {
@@ -35,14 +34,10 @@ describe('Registration Reducer Tests', () => {
},
validations: null,
submitState: DEFAULT_STATE,
- validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
- isValidatingMultiStepRegistrationPage: false,
};
it('should return the initial state', () => {
diff --git a/src/register/data/utils.js b/src/register/data/utils.js
index 747f2f2c..ee08f0b6 100644
--- a/src/register/data/utils.js
+++ b/src/register/data/utils.js
@@ -43,39 +43,31 @@ export const isFormValid = (
Object.keys(payload).forEach(key => {
switch (key) {
case 'name':
- if (!fieldErrors.name) {
- fieldErrors.name = validateName(payload.name, formatMessage);
- }
+ fieldErrors.name = validateName(payload.name, formatMessage);
if (fieldErrors.name) { isValid = false; }
break;
case 'email': {
- if (!fieldErrors.email) {
- const {
- fieldError, confirmEmailError, suggestion,
- } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
- if (fieldError) {
- fieldErrors.email = fieldError;
- isValid = false;
- }
- if (confirmEmailError) {
- fieldErrors.confirm_email = confirmEmailError;
- isValid = false;
- }
- emailSuggestion = suggestion;
+ const {
+ fieldError, confirmEmailError, suggestion,
+ } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+ if (fieldError) {
+ fieldErrors.email = fieldError;
+ isValid = false;
}
+ if (confirmEmailError) {
+ fieldErrors.confirm_email = confirmEmailError;
+ isValid = false;
+ }
+ emailSuggestion = suggestion;
if (fieldErrors.email) { isValid = false; }
break;
}
case 'username':
- if (!fieldErrors.username) {
- fieldErrors.username = validateUsername(payload.username, formatMessage);
- }
+ fieldErrors.username = validateUsername(payload.username, formatMessage);
if (fieldErrors.username) { isValid = false; }
break;
case 'password':
- if (!fieldErrors.password) {
- fieldErrors.password = validatePasswordField(payload.password, formatMessage);
- }
+ fieldErrors.password = validatePasswordField(payload.password, formatMessage);
if (fieldErrors.password) { isValid = false; }
break;
default:
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index cea5e5df..39d9e7f5 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -201,29 +201,6 @@ const messages = defineMessages({
defaultMessage: 'Did you mean',
description: 'Did you mean alert suggestion',
},
- // MultiStep Registration experiment
- 'multistep.registration.exp.continue.button': {
- id: 'multistep.registration.exp.continue.button',
- defaultMessage: 'Continue',
- description: 'Label text for multistep registration page second step',
- },
- 'multistep.registration.username.second.step.guideline.content': {
- id: 'multistep.registration.username.second.step.guideline.content',
- defaultMessage: 'Finish Registration',
- description: 'Guideline content for username field in multi-step registration experiment step 2',
- },
- 'multistep.registration.username.third.step.guideline.content': {
- id: 'multistep.registration.username.third.step.guideline.content',
- defaultMessage: 'To finalize your registration, please confirm your country of residence '
- + 'and create a public username that will identify you in your course communication forums. '
- + 'The username cannot be changed.',
- description: 'Guideline content for username field in multi-step registration experiment step 2',
- },
- 'multistep.registration.form.submission.error': {
- id: 'multistep.registration.form.submission.error',
- defaultMessage: 'Please check your responses for this and the previous step and try again.',
- description: 'Error message that appears on top of the form when invalid form is submitted',
- },
});
export default messages;
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 884af10d..75889601 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -2,10 +2,6 @@
min-width: 14.4rem;
}
-.continue-button {
- min-width: 7rem;
-}
-
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From 52e438652c306ea60b80308a2450d1a1381fbfb1 Mon Sep 17 00:00:00 2001
From: Blue
Date: Tue, 7 May 2024 16:44:47 +0500
Subject: [PATCH 15/82] 2u-main rebase with master (#1246)
Rebase 2u-main with master
---
.env | 1 +
src/common-components/ThirdPartyAuth.jsx | 3 +-
src/config/index.js | 1 +
.../CountryField/CountryField.jsx | 2 +-
src/register/RegistrationPage.jsx | 26 ++++++----
src/register/RegistrationPage.test.jsx | 49 ++++++++++++++++++-
.../ConfigurableRegistrationForm.jsx | 6 ++-
7 files changed, 73 insertions(+), 15 deletions(-)
diff --git a/.env b/.env
index 661e6802..9d2c9658 100644
--- a/.env
+++ b/.env
@@ -23,6 +23,7 @@ POST_REGISTRATION_REDIRECT_URL=''
SEARCH_CATALOG_URL=''
# ***** Features flags *****
DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_AUTO_GENERATED_USERNAME=''
ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 3b782036..7dcef3e1 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -37,6 +37,7 @@ const ThirdPartyAuth = (props) => {
const isSocialAuthActive = !!providers.length && !currentProvider;
const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;
+ const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
return (
<>
@@ -61,7 +62,7 @@ const ThirdPartyAuth = (props) => {
)}
- {thirdPartyAuthApiStatus === PENDING_STATE ? (
+ {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
diff --git a/src/config/index.js b/src/config/index.js
index fa3613aa..badb6fe7 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -4,6 +4,7 @@ const configuration = {
USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
// Features
DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
+ ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
diff --git a/src/register/RegistrationFields/CountryField/CountryField.jsx b/src/register/RegistrationFields/CountryField/CountryField.jsx
index c411750b..4f9e06c6 100644
--- a/src/register/RegistrationFields/CountryField/CountryField.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.jsx
@@ -97,7 +97,7 @@ const CountryField = (props) => {
};
const getCountryList = () => countryList.map((country) => (
-
+
{country[COUNTRY_DISPLAY_KEY]}
));
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 80ac1f6b..8c5ea79f 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -60,6 +60,7 @@ const RegistrationPage = (props) => {
showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,
showConfigurableRegistrationFields: getConfig().ENABLE_DYNAMIC_REGISTRATION_FIELDS,
showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,
+ autoGeneratedUsernameEnabled: getConfig().ENABLE_AUTO_GENERATED_USERNAME,
};
const {
handleInstitutionLogin,
@@ -215,6 +216,9 @@ const RegistrationPage = (props) => {
delete payload.password;
payload.social_auth_provider = currentProvider;
}
+ if (flags.autoGeneratedUsernameEnabled) {
+ delete payload.username;
+ }
// Validating form data before submitting
const { isValid, fieldErrors, emailSuggestion } = isFormValid(
@@ -324,16 +328,18 @@ const RegistrationPage = (props) => {
helpText={[formatMessage(messages['help.text.email'])]}
floatingLabel={formatMessage(messages['registration.email.label'])}
/>
-
+ {!flags.autoGeneratedUsernameEnabled && (
+
+ )}
{!currentProvider && (
{
jest.clearAllMocks();
});
- const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
+ const populateRequiredFields = (
+ getByLabelText,
+ payload,
+ isThirdPartyAuth = false,
+ autoGeneratedUsernameEnabled = false,
+ ) => {
fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
- fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+ if (!autoGeneratedUsernameEnabled) {
+ fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+ }
fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
fireEvent.change(getByLabelText('Country/Region'), { target: { value: payload.country, name: 'country' } });
@@ -299,6 +306,44 @@ describe('RegistrationPage', () => {
});
});
+ it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', () => {
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: true,
+ });
+ jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+ const payload = {
+ name: 'John Doe',
+ email: 'john.doe@gmail.com',
+ password: 'password1',
+ country: 'Pakistan',
+ honor_code: true,
+ totalRegistrationTime: 0,
+ };
+
+ store.dispatch = jest.fn(store.dispatch);
+ const { getByLabelText, container } = render(routerWrapper(reduxWrapper()));
+ populateRequiredFields(getByLabelText, payload, false, true);
+ const button = container.querySelector('button.btn-brand');
+ fireEvent.click(button);
+ expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: false,
+ });
+ });
+
+ it('should not display UsernameField when ENABLE_AUTO_GENERATED_USERNAME is true', () => {
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: true,
+ });
+
+ const { queryByLabelText } = render(routerWrapper(reduxWrapper()));
+ expect(queryByLabelText('Username')).toBeNull();
+
+ mergeConfig({
+ ENABLE_AUTO_GENERATED_USERNAME: false,
+ });
+ });
+
it('should not dispatch registerNewUser on empty form Submission', () => {
store.dispatch = jest.fn(store.dispatch);
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index be1f9c27..8c300b7e 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -33,7 +33,11 @@ const ConfigurableRegistrationForm = (props) => {
autoSubmitRegistrationForm,
} = props;
- const countryList = useMemo(() => getCountryList(getLocale()), []);
+ /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
+ States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
+ confused and unable to create an account. So we added the United States entry in the dropdown list.
+ */
+ const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
let showTermsOfServiceAndHonorCode = false;
let showCountryField = false;
From dcbd644a257573306d4ae64f3b034925cc51f388 Mon Sep 17 00:00:00 2001
From: Blue
Date: Mon, 13 May 2024 14:11:03 +0500
Subject: [PATCH 16/82] feat: implement auto generated username experiment
(#1248)
* feat: implement auto generated username registration exp
---
src/config/index.js | 1 +
src/logistration/Logistration.test.jsx | 5 +
src/register/RegistrationPage.jsx | 203 ++++++++++--------
src/register/RegistrationPage.test.jsx | 5 +
.../ConfigurableRegistrationForm.test.jsx | 5 +
.../tests/RegistrationFailure.test.jsx | 5 +
.../components/tests/ThirdPartyAuth.test.jsx | 5 +
src/register/data/actions.js | 7 +
.../data/optimizelyExperiment/helper.js | 30 +++
...utoGeneratedUsernameExperimentVariation.js | 53 +++++
src/register/data/reducers.js | 8 +
src/register/data/tests/reducers.test.js | 1 +
12 files changed, 234 insertions(+), 94 deletions(-)
create mode 100644 src/register/data/optimizelyExperiment/helper.js
create mode 100644 src/register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation.js
diff --git a/src/config/index.js b/src/config/index.js
index badb6fe7..78cea882 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -35,6 +35,7 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+ AUTO_GENERATED_USERNAME_EXPERIMENT_ID: process.env.AUTO_GENERATED_USERNAME_EXPERIMENT_ID || '',
};
export default configuration;
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index 87bf3e70..b16ae216 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,12 +15,16 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
+import { NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+ from '../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
+jest.mock('../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -84,6 +88,7 @@ describe('Logistration', () => {
})),
}));
+ useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
config: {
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 8c5ea79f..22f12e14 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -18,6 +18,7 @@ import {
backupRegistrationFormBegin,
clearRegistrationBackendError,
registerNewUser,
+ setAutoGeneratedUsernameExperimentData,
setEmailSuggestionInStore,
setUserPipelineDataLoaded,
} from './data/actions';
@@ -25,6 +26,8 @@ import {
FORM_SUBMISSION_ERROR,
TPA_AUTHENTICATION_FAILURE,
} from './data/constants';
+import { AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION, NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation from './data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
import getBackendValidations from './data/selectors';
import {
isFormValid, prepareRegistrationPayload,
@@ -68,6 +71,7 @@ const RegistrationPage = (props) => {
} = props;
const backedUpFormData = useSelector(state => state.register.registrationFormData);
+ const initExpVariation = useSelector(state => state.register.autoGeneratedUsernameExperimentVariation);
const registrationError = useSelector(state => state.register.registrationError);
const registrationErrorCode = registrationError?.errorCode;
const registrationResult = useSelector(state => state.register.registrationResult);
@@ -103,6 +107,12 @@ const RegistrationPage = (props) => {
? formatMessage(messages['create.account.cta.button'], { label: cta })
: formatMessage(messages['create.account.for.free.button']);
+ const autoGeneratedUsernameExpVariation = useAutoGeneratedUsernameExperimentVariation(
+ initExpVariation, registrationEmbedded, tpaHint, currentProvider, thirdPartyAuthApiStatus,
+ );
+
+ const hideUsernameField = flags.autoGeneratedUsernameEnabled
+ || autoGeneratedUsernameExpVariation === AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION;
/**
* Set the userPipelineDetails data in formFields for only first time
*/
@@ -149,8 +159,10 @@ const RegistrationPage = (props) => {
formFields: { ...formFields },
errors: { ...errors },
}));
+ dispatch(setAutoGeneratedUsernameExperimentData(autoGeneratedUsernameExpVariation));
}
- }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+ }, [shouldBackupState, configurableFormFields, // eslint-disable-line react-hooks/exhaustive-deps
+ formFields, errors, dispatch, backedUpFormData]);
useEffect(() => {
if (backendValidations) {
@@ -216,7 +228,7 @@ const RegistrationPage = (props) => {
delete payload.password;
payload.social_auth_provider = currentProvider;
}
- if (flags.autoGeneratedUsernameEnabled) {
+ if (hideUsernameField) {
delete payload.username;
}
@@ -286,106 +298,109 @@ const RegistrationPage = (props) => {
getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
}
/>
- {autoSubmitRegForm && !errorCode.type ? (
-
-
-
- ) : (
-
+ ) : (
+
+
-
- {!flags.autoGeneratedUsernameEnabled && (
-
+
- )}
- {!currentProvider && (
-
- )}
-
- e.preventDefault()}
- />
- {!registrationEmbedded && (
-
+ )}
+ {!currentProvider && (
+
+ )}
+
- )}
-
-
+ {
+ dispatch(setMultiStepRegistrationExpData(multiStepRegExpVariation, prevStep));
+ }}
+ variant="primary"
+ size="inline"
+ className="mr-1"
+ />
+ {formatMessage(messages['tab.back.btn.text'])}
+
+ );
+ }
+ return (
+ handleOnSelect(tabKey, selectedPage)}>
+
+
+
+ );
+ };
+
const isValidTpaHint = () => {
const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
return !!provider;
@@ -123,12 +165,7 @@ const Logistration = (props) => {
)
- : (!isValidTpaHint() && !hideRegistrationLink && (
- handleOnSelect(tabKey, selectedPage)}>
-
-
-
- ))}
+ : (!isValidTpaHint() && !hideRegistrationLink && getTabs())}
{ key && (
)}
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index 87bf3e70..ce7af88f 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,12 +15,16 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
+import { FIRST_STEP, NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
+jest.mock('../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -63,6 +67,8 @@ describe('Logistration', () => {
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
},
commonComponents: {
thirdPartyAuthContext: {
@@ -83,6 +89,7 @@ describe('Logistration', () => {
username: 'test-user',
})),
}));
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 8c5ea79f..145c5a38 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -176,7 +176,7 @@ const RegistrationPage = (props) => {
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
- }, [registrationResult]);
+ }, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
const handleOnChange = (event) => {
const { name } = event.target;
diff --git a/src/register/RegistrationPage.test.jsx b/src/register/RegistrationPage.test.jsx
index 18e4e513..59a4d8aa 100644
--- a/src/register/RegistrationPage.test.jsx
+++ b/src/register/RegistrationPage.test.jsx
@@ -17,6 +17,9 @@ import {
setUserPipelineDataLoaded,
} from './data/actions';
import { INTERNAL_SERVER_ERROR } from './data/constants';
+import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from './RegistrationPage';
import {
AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
@@ -30,6 +33,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('./data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -128,6 +132,7 @@ describe('RegistrationPage', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index 8c300b7e..ce0fbea5 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import { FormFieldRenderer } from '../../field-renderer';
import { FIELDS } from '../data/constants';
+import { FIRST_STEP, shouldDisplayFieldInExperiment } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -31,6 +32,8 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors,
setFormFields,
autoSubmitRegistrationForm,
+ multiStepRegistrationExpVariation,
+ multiStepRegistrationPageStep,
} = props;
/** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
@@ -109,7 +112,9 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
};
- if (flags.showConfigurableRegistrationFields) {
+ if (flags.showConfigurableRegistrationFields && shouldDisplayFieldInExperiment(
+ 'other_fields', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
Object.keys(fieldDescriptions).forEach(fieldName => {
const fieldData = fieldDescriptions[fieldName];
switch (fieldData.name) {
@@ -161,7 +166,9 @@ const ConfigurableRegistrationForm = (props) => {
});
}
- if (flags.showConfigurableEdxFields || showCountryField) {
+ if ((flags.showConfigurableEdxFields || showCountryField) && shouldDisplayFieldInExperiment(
+ 'country', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
{
);
}
- if (flags.showMarketingEmailOptInCheckbox) {
+ if (flags.showMarketingEmailOptInCheckbox && shouldDisplayFieldInExperiment(
+ 'marketing_email_opt_in', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
{
);
}
- if (flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode) {
+ if ((flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode)
+ && shouldDisplayFieldInExperiment(
+ 'honor_code', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
+ )) {
formFieldDescriptions.push(
@@ -231,11 +243,15 @@ ConfigurableRegistrationForm.propTypes = {
setFieldErrors: PropTypes.func.isRequired,
setFormFields: PropTypes.func.isRequired,
autoSubmitRegistrationForm: PropTypes.bool,
+ multiStepRegistrationExpVariation: PropTypes.string,
+ multiStepRegistrationPageStep: PropTypes.string,
};
ConfigurableRegistrationForm.defaultProps = {
fieldDescriptions: {},
autoSubmitRegistrationForm: false,
+ multiStepRegistrationExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
};
export default ConfigurableRegistrationForm;
diff --git a/src/register/components/RegistrationFailure.jsx b/src/register/components/RegistrationFailure.jsx
index c34c2af7..f2a83585 100644
--- a/src/register/components/RegistrationFailure.jsx
+++ b/src/register/components/RegistrationFailure.jsx
@@ -13,12 +13,13 @@ import {
TPA_AUTHENTICATION_FAILURE,
TPA_SESSION_EXPIRED,
} from '../data/constants';
+import { FIRST_STEP } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
const RegistrationFailureMessage = (props) => {
const { formatMessage } = useIntl();
const {
- context, errorCode, failureCount,
+ context, errorCode, failureCount, multiStepRegistrationPageStep,
} = props;
useEffect(() => {
@@ -49,7 +50,11 @@ const RegistrationFailureMessage = (props) => {
errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
break;
default:
- errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
+ if (multiStepRegistrationPageStep !== FIRST_STEP) {
+ errorMessage = formatMessage(messages['multistep.registration.form.submission.error']);
+ } else {
+ errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
+ }
break;
}
@@ -65,6 +70,7 @@ RegistrationFailureMessage.defaultProps = {
context: {
errorMessage: null,
},
+ multiStepRegistrationPageStep: FIRST_STEP,
};
RegistrationFailureMessage.propTypes = {
@@ -74,6 +80,7 @@ RegistrationFailureMessage.propTypes = {
}),
errorCode: PropTypes.string.isRequired,
failureCount: PropTypes.number.isRequired,
+ multiStepRegistrationPageStep: PropTypes.string,
};
export default RegistrationFailureMessage;
diff --git a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
index 3d664260..00fe5595 100644
--- a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
+++ b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -11,6 +11,9 @@ import configureStore from 'redux-mock-store';
import { registerNewUser } from '../../data/actions';
import { FIELDS } from '../../data/constants';
+import { FIRST_STEP, NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
@@ -22,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
@@ -93,6 +97,9 @@ describe('ConfigurableRegistrationForm', () => {
registrationError: {},
registrationFormData,
usernameSuggestions: [],
+ multiStepRegistrationPageStep: FIRST_STEP,
+ multiStepRegExpVariation: '',
+ isValidatingMultiStepRegistrationPage: false,
},
commonComponents: {
thirdPartyAuthApiStatus: null,
@@ -121,6 +128,7 @@ describe('ConfigurableRegistrationForm', () => {
};
window.location = { search: '' };
getLocale.mockImplementationOnce(() => ('en-us'));
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/RegistrationFailure.test.jsx b/src/register/components/tests/RegistrationFailure.test.jsx
index 003cc966..b9667c9c 100644
--- a/src/register/components/tests/RegistrationFailure.test.jsx
+++ b/src/register/components/tests/RegistrationFailure.test.jsx
@@ -12,6 +12,9 @@ import configureStore from 'redux-mock-store';
import {
FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
} from '../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import RegistrationFailureMessage from '../RegistrationFailure';
@@ -23,6 +26,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -121,6 +125,7 @@ describe('RegistrationFailure', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/ThirdPartyAuth.test.jsx b/src/register/components/tests/ThirdPartyAuth.test.jsx
index 917f10f9..45672ad5 100644
--- a/src/register/components/tests/ThirdPartyAuth.test.jsx
+++ b/src/register/components/tests/ThirdPartyAuth.test.jsx
@@ -12,6 +12,9 @@ import configureStore from 'redux-mock-store';
import {
COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
} from '../../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useMultiStepRegistrationExperimentVariation
+ from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -22,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
+jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -120,6 +124,7 @@ describe('ThirdPartyAuth', () => {
institutionLogin: false,
};
window.location = { search: '' };
+ useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/data/actions.js b/src/register/data/actions.js
index 9fa5aed5..530f3bc8 100644
--- a/src/register/data/actions.js
+++ b/src/register/data/actions.js
@@ -8,6 +8,7 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
+export const REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA = 'REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA';
// Backup registration form
export const backupRegistrationForm = () => ({
@@ -20,18 +21,19 @@ export const backupRegistrationFormBegin = (data) => ({
});
// Validate fields from the backend
-export const fetchRealtimeValidations = (formPayload) => ({
+export const fetchRealtimeValidations = (formPayload, isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.BASE,
- payload: { formPayload },
+ payload: { formPayload, isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsBegin = () => ({
+export const fetchRealtimeValidationsBegin = (isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.BEGIN,
+ payload: { isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsSuccess = (validations) => ({
+export const fetchRealtimeValidationsSuccess = (validations, isValidatingMultiStepRegistrationPage) => ({
type: REGISTER_FORM_VALIDATIONS.SUCCESS,
- payload: { validations },
+ payload: { validations, isValidatingMultiStepRegistrationPage },
});
export const fetchRealtimeValidationsFailure = () => ({
@@ -83,3 +85,11 @@ export const setUserPipelineDataLoaded = (value) => ({
type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
payload: { value },
});
+
+// Multi Step Registration Experiment Actions
+export const setMultiStepRegistrationExpData = (
+ multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage,
+) => ({
+ type: REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
+ payload: { multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage },
+});
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
new file mode 100644
index 00000000..e59ec718
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -0,0 +1,105 @@
+/**
+ * This file contains data for Multi Step Registration Optimizely experiment
+ */
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from '../../messages';
+
+export const NOT_INITIALIZED = 'experiment-not-initialized';
+export const CONTROL = 'control-registration-page';
+export const MULTI_STEP_REGISTRATION_EXP_VARIATION = 'multi-step-registration-page';
+
+export const FIRST_STEP = 'first-step';
+export const SECOND_STEP = 'second-step';
+export const THIRD_STEP = 'third-step';
+
+export const CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS = ['name', 'email', 'password', 'marketing_email_opt_in', 'ThirdPartyAuth'];
+export const CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS = ['username', 'country'];
+export const CONTROL_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
+
+export const MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS = ['email', 'marketing_email_opt_in', 'ThirdPartyAuth'];
+export const MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS = ['name', 'password'];
+export const MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS = ['username', 'country'];
+export const MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
+
+const MULTI_STEP_REGISTRATION_EXP_PAGE = 'authn_register_page';
+
+export function getMultiStepRegistrationExperimentVariation() {
+ try {
+ if (window.optimizely
+ && window.optimizely.get('data').experiments[getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID]) {
+ const selectedVariant = window.optimizely.get('state').getVariationMap()[
+ getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID
+ ];
+ return selectedVariant?.name;
+ }
+ } catch (e) { /* empty */ }
+ return '';
+}
+
+export function activateMultiStepRegistrationExperiment() {
+ window.optimizely = window.optimizely || [];
+ window.optimizely.push({
+ type: 'page',
+ pageName: MULTI_STEP_REGISTRATION_EXP_PAGE,
+ });
+}
+
+/**
+ * We want to display username and honor_code fields in second page if user is in multi-step
+ * registration page experiment
+ */
+export const shouldDisplayFieldInExperiment = (fieldName, expVariation, registerPageStep) => (
+ !expVariation || expVariation === NOT_INITIALIZED
+ || (expVariation === CONTROL
+ && (
+ CONTROL_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
+ || (registerPageStep === FIRST_STEP && CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === SECOND_STEP && CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
+ ))
+ || (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
+ && (
+ MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
+ || (registerPageStep === FIRST_STEP && MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === SECOND_STEP && MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
+ || (registerPageStep === THIRD_STEP && MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS.includes(fieldName))
+ ))
+);
+
+export const getRegisterButtonLabelInExperiment = (
+ existingButtonLabel, expVariation, registerPageStep, formatMessage,
+) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
+ return formatMessage(messages['multistep.registration.exp.continue.button']);
+ }
+ return existingButtonLabel;
+};
+
+export const getRegisterButtonSubmitStateInExperiment = (
+ registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
+) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP) {
+ return validationsSubmitState;
+ }
+ return registerSubmitState;
+};
+
+export const getMultiStepRegistrationPreviousStep = (currentStep) => {
+ if (currentStep === THIRD_STEP) {
+ return SECOND_STEP;
+ }
+ if (currentStep === SECOND_STEP) {
+ return FIRST_STEP;
+ }
+ return currentStep;
+};
+
+export const getMultiStepRegistrationNextStep = (currentStep) => {
+ if (currentStep === FIRST_STEP) {
+ return SECOND_STEP;
+ }
+ if (currentStep === SECOND_STEP) {
+ return THIRD_STEP;
+ }
+ return currentStep;
+};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
new file mode 100644
index 00000000..692101b7
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import {
+ activateMultiStepRegistrationExperiment,
+ getMultiStepRegistrationExperimentVariation,
+ NOT_INITIALIZED,
+} from './helper';
+import { COMPLETE_STATE } from '../../../data/constants';
+
+/**
+ * This hook returns activates multi step registration experiment and returns the experiment
+ * variation for the user.
+ */
+const useMultiStepRegistrationExperimentVariation = (
+ initExpVariation,
+ registrationEmbedded,
+ tpaHint,
+ currentProvider,
+ thirdPartyAuthApiStatus,
+) => {
+ const [variation, setVariation] = useState(initExpVariation);
+
+ useEffect(() => {
+ if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
+ || thirdPartyAuthApiStatus !== COMPLETE_STATE) {
+ return variation;
+ }
+
+ const getVariation = () => {
+ const expVariation = getMultiStepRegistrationExperimentVariation();
+ if (expVariation) {
+ setVariation(expVariation);
+ } else {
+ // This is to handle the case when user dont get variation for some reason, the register page
+ // shows unlimited spinner.
+ setVariation(NOT_INITIALIZED);
+ }
+ };
+
+ activateMultiStepRegistrationExperiment();
+
+ const timer = setTimeout(getVariation, 300);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [ // eslint-disable-line react-hooks/exhaustive-deps
+ currentProvider, initExpVariation, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
+ ]);
+
+ return variation;
+};
+
+export default useMultiStepRegistrationExperimentVariation;
diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js
index 70c3a994..32438877 100644
--- a/src/register/data/reducers.js
+++ b/src/register/data/reducers.js
@@ -5,9 +5,11 @@ import {
REGISTER_NEW_USER,
REGISTER_SET_COUNTRY_CODE,
REGISTER_SET_EMAIL_SUGGESTIONS,
+ REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from './actions';
+import { FIRST_STEP } from './optimizelyExperiment/helper';
import {
DEFAULT_STATE,
PENDING_STATE,
@@ -35,10 +37,14 @@ export const defaultState = {
},
validations: null,
submitState: DEFAULT_STATE,
+ validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
+ isValidatingMultiStepRegistrationPage: false,
};
const reducer = (state = defaultState, action = {}) => {
@@ -85,12 +91,22 @@ const reducer = (state = defaultState, action = {}) => {
registrationError: { ...registrationErrorTemp },
};
}
+ case REGISTER_FORM_VALIDATIONS.BEGIN: {
+ return {
+ ...state,
+ validationsSubmitState: action.payload?.isValidatingMultiStepRegistrationPage
+ ? PENDING_STATE
+ : state.validationsSubmitState,
+ };
+ }
case REGISTER_FORM_VALIDATIONS.SUCCESS: {
const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
return {
...state,
validations: validationWithoutUsernameSuggestions,
+ isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
+ validationsSubmitState: DEFAULT_STATE,
};
}
case REGISTER_FORM_VALIDATIONS.FAILURE:
@@ -98,6 +114,7 @@ const reducer = (state = defaultState, action = {}) => {
...state,
validationApiRateLimited: true,
validations: null,
+ validationsSubmitState: DEFAULT_STATE,
};
case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
return {
@@ -129,6 +146,14 @@ const reducer = (state = defaultState, action = {}) => {
emailSuggestion: action.payload.emailSuggestion,
},
};
+ case REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA: {
+ return {
+ ...state,
+ multiStepRegExpVariation: action.payload.multiStepRegExpVariation,
+ multiStepRegistrationPageStep: action.payload.multiStepRegistrationPageStep,
+ isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
+ };
+ }
default:
return {
...state,
diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js
index 0325cd4b..3edd395e 100644
--- a/src/register/data/sagas.js
+++ b/src/register/data/sagas.js
@@ -40,10 +40,13 @@ export function* handleNewUserRegistration(action) {
export function* fetchRealtimeValidations(action) {
try {
- yield put(fetchRealtimeValidationsBegin());
+ yield put(fetchRealtimeValidationsBegin(action.payload?.isValidatingMultiStepRegistrationPage));
const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
- yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
+ yield put(fetchRealtimeValidationsSuccess(
+ camelCaseObject(fieldValidations),
+ action.payload?.isValidatingMultiStepRegistrationPage,
+ ));
} catch (e) {
if (e.response && e.response.status === 403) {
yield put(fetchRealtimeValidationsFailure());
diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js
index 3e2270ab..909704d2 100644
--- a/src/register/data/tests/reducers.test.js
+++ b/src/register/data/tests/reducers.test.js
@@ -11,6 +11,7 @@ import {
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from '../actions';
+import { FIRST_STEP } from '../optimizelyExperiment/helper';
import reducer from '../reducers';
describe('Registration Reducer Tests', () => {
@@ -34,10 +35,14 @@ describe('Registration Reducer Tests', () => {
},
validations: null,
submitState: DEFAULT_STATE,
+ validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
+ multiStepRegExpVariation: '',
+ multiStepRegistrationPageStep: FIRST_STEP,
+ isValidatingMultiStepRegistrationPage: false,
};
it('should return the initial state', () => {
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index 39d9e7f5..cea5e5df 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -201,6 +201,29 @@ const messages = defineMessages({
defaultMessage: 'Did you mean',
description: 'Did you mean alert suggestion',
},
+ // MultiStep Registration experiment
+ 'multistep.registration.exp.continue.button': {
+ id: 'multistep.registration.exp.continue.button',
+ defaultMessage: 'Continue',
+ description: 'Label text for multistep registration page second step',
+ },
+ 'multistep.registration.username.second.step.guideline.content': {
+ id: 'multistep.registration.username.second.step.guideline.content',
+ defaultMessage: 'Finish Registration',
+ description: 'Guideline content for username field in multi-step registration experiment step 2',
+ },
+ 'multistep.registration.username.third.step.guideline.content': {
+ id: 'multistep.registration.username.third.step.guideline.content',
+ defaultMessage: 'To finalize your registration, please confirm your country of residence '
+ + 'and create a public username that will identify you in your course communication forums. '
+ + 'The username cannot be changed.',
+ description: 'Guideline content for username field in multi-step registration experiment step 2',
+ },
+ 'multistep.registration.form.submission.error': {
+ id: 'multistep.registration.form.submission.error',
+ defaultMessage: 'Please check your responses for this and the previous step and try again.',
+ description: 'Error message that appears on top of the form when invalid form is submitted',
+ },
});
export default messages;
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 75889601..4126da9a 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -1,7 +1,3 @@
-.register-button {
- min-width: 14.4rem;
-}
-
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From 99850574fbdabd1dfcd920f1dc53d1022f6916b4 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:04:28 +0500
Subject: [PATCH 31/82] feat: add multi step registration eventing (#1226)
* feat: implement multi step registration experiment
* feat: add multi step registration eventing
---
src/common-components/SocialAuthProviders.jsx | 14 ++++-
src/common-components/ThirdPartyAuth.jsx | 4 ++
.../data/optimizelyExperiment/track.js | 56 +++++++++++++++++++
...ltiStepRegistrationExperimentVariation.jsx | 2 +
4 files changed, 75 insertions(+), 1 deletion(-)
create mode 100644 src/register/data/optimizelyExperiment/track.js
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index abe06da7..5cdb04e0 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -9,14 +9,24 @@ import PropTypes from 'prop-types';
import messages from './messages';
import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
+import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
const SocialAuthProviders = (props) => {
const { formatMessage } = useIntl();
- const { referrer, socialAuthProviders } = props;
+ const {
+ referrer,
+ socialAuthProviders,
+ multiStepRegistrationExpVariation,
+ } = props;
function handleSubmit(e) {
e.preventDefault();
+ if (multiStepRegistrationExpVariation === CONTROL
+ || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
+ trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
+ }
const url = e.currentTarget.dataset.providerUrl;
window.location.href = getConfig().LMS_BASE_URL + url;
}
@@ -60,6 +70,7 @@ const SocialAuthProviders = (props) => {
SocialAuthProviders.defaultProps = {
referrer: LOGIN_PAGE,
socialAuthProviders: [],
+ multiStepRegistrationExpVariation: '',
};
SocialAuthProviders.propTypes = {
@@ -73,6 +84,7 @@ SocialAuthProviders.propTypes = {
registerUrl: PropTypes.string,
skipRegistrationForm: PropTypes.bool,
})),
+ multiStepRegistrationExpVariation: PropTypes.string,
};
export default SocialAuthProviders;
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 7dcef3e1..406c8cf8 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -32,6 +32,7 @@ const ThirdPartyAuth = (props) => {
handleInstitutionLogin,
thirdPartyAuthApiStatus,
isLoginPage,
+ multiStepRegistrationExpVariation,
} = props;
const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -79,6 +80,7 @@ const ThirdPartyAuth = (props) => {
)}
@@ -94,6 +96,7 @@ ThirdPartyAuth.defaultProps = {
secondaryProviders: [],
thirdPartyAuthApiStatus: PENDING_STATE,
isLoginPage: false,
+ multiStepRegistrationExpVariation: '',
};
ThirdPartyAuth.propTypes = {
@@ -121,6 +124,7 @@ ThirdPartyAuth.propTypes = {
),
thirdPartyAuthApiStatus: PropTypes.string,
isLoginPage: PropTypes.bool,
+ multiStepRegistrationExpVariation: PropTypes.string,
};
export default ThirdPartyAuth;
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
new file mode 100644
index 00000000..8db71809
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/track.js
@@ -0,0 +1,56 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+export const eventNames = {
+ multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
+ multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
+ multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
+ multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
+ multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
+ multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
+ multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
+ multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
+};
+
+export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep3Viewed = () => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
+};
+
+export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
+ sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
+};
+
+export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
+ variation: expVariation,
+ });
+};
+
+export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
+ sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
+ variation: expVariation,
+ });
+};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
index 692101b7..97d0a233 100644
--- a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
+++ b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
@@ -5,6 +5,7 @@ import {
getMultiStepRegistrationExperimentVariation,
NOT_INITIALIZED,
} from './helper';
+import { trackMultiStepRegistrationStep1Viewed } from './track';
import { COMPLETE_STATE } from '../../../data/constants';
/**
@@ -30,6 +31,7 @@ const useMultiStepRegistrationExperimentVariation = (
const expVariation = getMultiStepRegistrationExperimentVariation();
if (expVariation) {
setVariation(expVariation);
+ trackMultiStepRegistrationStep1Viewed(expVariation);
} else {
// This is to handle the case when user dont get variation for some reason, the register page
// shows unlimited spinner.
From 4f48e82959186d145b6b67ddcbd545d9008441a7 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
Date: Mon, 22 Apr 2024 11:34:47 +0500
Subject: [PATCH 32/82] fix: fix register button width
---
src/register/data/optimizelyExperiment/helper.js | 7 +++++++
src/sass/_registration.scss | 8 ++++++++
2 files changed, 15 insertions(+)
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
index e59ec718..7140d5ec 100644
--- a/src/register/data/optimizelyExperiment/helper.js
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -75,6 +75,13 @@ export const getRegisterButtonLabelInExperiment = (
return existingButtonLabel;
};
+export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
+ if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
+ return 'continue-button';
+ }
+ return 'register-button';
+};
+
export const getRegisterButtonSubmitStateInExperiment = (
registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
) => {
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 4126da9a..884af10d 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -1,3 +1,11 @@
+.register-button {
+ min-width: 14.4rem;
+}
+
+.continue-button {
+ min-width: 7rem;
+}
+
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From 788a42b341f9a80c2fc0c3f51b6c01e6b3921170 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
Date: Mon, 22 Apr 2024 15:17:08 +0500
Subject: [PATCH 33/82] fix: fix register button loader for control
---
src/register/data/optimizelyExperiment/helper.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
index 7140d5ec..f3d21381 100644
--- a/src/register/data/optimizelyExperiment/helper.js
+++ b/src/register/data/optimizelyExperiment/helper.js
@@ -85,7 +85,8 @@ export const getRegisterButtonClassInExperiment = (expVariation, registerPageSte
export const getRegisterButtonSubmitStateInExperiment = (
registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP) {
+ if ((expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP)
+ || (expVariation === CONTROL && registerPageStep !== SECOND_STEP)) {
return validationsSubmitState;
}
return registerSubmitState;
From f8290adab516f0883d9691c8a12752fadde328e6 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
<52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:28:05 +0500
Subject: [PATCH 34/82] feat: capture marketing lead in experiment events
(#1243)
---
src/register/data/optimizelyExperiment/track.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
index 8db71809..68a6347a 100644
--- a/src/register/data/optimizelyExperiment/track.js
+++ b/src/register/data/optimizelyExperiment/track.js
@@ -17,9 +17,10 @@ export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
});
};
-export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+export const trackMultiStepRegistrationStep2Viewed = (expVariation, isMarketingLead) => {
sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
variation: expVariation,
+ is_marketing_lead: isMarketingLead,
});
};
From a90ebb7d4d7ce6dd886ce6f97db1cba31ea6c626 Mon Sep 17 00:00:00 2001
From: mubbsharanwar
Date: Mon, 6 May 2024 15:57:54 +0500
Subject: [PATCH 35/82] revert: multistep registration experiment revert
multistep registration experiment changes
VAN-1930
---
src/common-components/SocialAuthProviders.jsx | 14 +--
src/common-components/ThirdPartyAuth.jsx | 4 -
src/common-components/messages.jsx | 6 -
src/config/index.js | 2 -
src/logistration/Logistration.jsx | 55 ++-------
src/logistration/Logistration.test.jsx | 7 --
src/register/RegistrationPage.jsx | 2 +-
src/register/RegistrationPage.test.jsx | 5 -
.../ConfigurableRegistrationForm.jsx | 24 +---
.../components/RegistrationFailure.jsx | 11 +-
.../ConfigurableRegistrationForm.test.jsx | 8 --
.../tests/RegistrationFailure.test.jsx | 5 -
.../components/tests/ThirdPartyAuth.test.jsx | 5 -
src/register/data/actions.js | 21 +---
.../data/optimizelyExperiment/helper.js | 113 ------------------
.../data/optimizelyExperiment/track.js | 57 ---------
...ltiStepRegistrationExperimentVariation.jsx | 56 ---------
src/register/data/reducers.js | 25 ----
src/register/data/sagas.js | 7 +-
src/register/data/tests/reducers.test.js | 5 -
src/register/data/utils.js | 36 +++---
src/register/messages.jsx | 23 ----
src/sass/_registration.scss | 4 -
23 files changed, 38 insertions(+), 457 deletions(-)
delete mode 100644 src/register/data/optimizelyExperiment/helper.js
delete mode 100644 src/register/data/optimizelyExperiment/track.js
delete mode 100644 src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index 5cdb04e0..abe06da7 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -9,24 +9,14 @@ import PropTypes from 'prop-types';
import messages from './messages';
import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
-import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
-import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
const SocialAuthProviders = (props) => {
const { formatMessage } = useIntl();
- const {
- referrer,
- socialAuthProviders,
- multiStepRegistrationExpVariation,
- } = props;
+ const { referrer, socialAuthProviders } = props;
function handleSubmit(e) {
e.preventDefault();
- if (multiStepRegistrationExpVariation === CONTROL
- || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
- trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
- }
const url = e.currentTarget.dataset.providerUrl;
window.location.href = getConfig().LMS_BASE_URL + url;
}
@@ -70,7 +60,6 @@ const SocialAuthProviders = (props) => {
SocialAuthProviders.defaultProps = {
referrer: LOGIN_PAGE,
socialAuthProviders: [],
- multiStepRegistrationExpVariation: '',
};
SocialAuthProviders.propTypes = {
@@ -84,7 +73,6 @@ SocialAuthProviders.propTypes = {
registerUrl: PropTypes.string,
skipRegistrationForm: PropTypes.bool,
})),
- multiStepRegistrationExpVariation: PropTypes.string,
};
export default SocialAuthProviders;
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 406c8cf8..7dcef3e1 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -32,7 +32,6 @@ const ThirdPartyAuth = (props) => {
handleInstitutionLogin,
thirdPartyAuthApiStatus,
isLoginPage,
- multiStepRegistrationExpVariation,
} = props;
const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -80,7 +79,6 @@ const ThirdPartyAuth = (props) => {
)}
@@ -96,7 +94,6 @@ ThirdPartyAuth.defaultProps = {
secondaryProviders: [],
thirdPartyAuthApiStatus: PENDING_STATE,
isLoginPage: false,
- multiStepRegistrationExpVariation: '',
};
ThirdPartyAuth.propTypes = {
@@ -124,7 +121,6 @@ ThirdPartyAuth.propTypes = {
),
thirdPartyAuthApiStatus: PropTypes.string,
isLoginPage: PropTypes.bool,
- multiStepRegistrationExpVariation: PropTypes.string,
};
export default ThirdPartyAuth;
diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx
index 6f0e69ca..08e88b8f 100644
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -132,12 +132,6 @@ const messages = defineMessages({
defaultMessage: 'Company or school credentials',
description: 'Company or school login link text.',
},
- // multi step registration experiment messages
- 'tab.back.btn.text': {
- id: 'tab.back.btn.text',
- defaultMessage: 'Back',
- description: 'Tab back button text',
- },
});
export default messages;
diff --git a/src/config/index.js b/src/config/index.js
index 781db13c..badb6fe7 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -35,8 +35,6 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
- // Multi Step Registration Experiment
- MULTI_STEP_REGISTRATION_EXPERIMENT_ID: process.env.MULTI_STEP_REGISTRATION_EXPERIMENT_ID || '',
};
export default configuration;
diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx
index 5199e1b3..9451aa27 100644
--- a/src/logistration/Logistration.jsx
+++ b/src/logistration/Logistration.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -7,11 +7,10 @@ import { getAuthService } from '@edx/frontend-platform/auth';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Icon,
- IconButton,
Tab,
Tabs,
} from '@openedx/paragon';
-import { ArrowBackIos, ChevronLeft } from '@openedx/paragon/icons';
+import { ChevronLeft } from '@openedx/paragon/icons';
import PropTypes from 'prop-types';
import { Navigate, useNavigate } from 'react-router-dom';
@@ -28,11 +27,7 @@ import {
import { LoginPage } from '../login';
import { backupLoginForm } from '../login/data/actions';
import { RegistrationPage } from '../register';
-import { backupRegistrationForm, setMultiStepRegistrationExpData } from '../register/data/actions';
-import {
- FIRST_STEP,
- getMultiStepRegistrationPreviousStep,
-} from '../register/data/optimizelyExperiment/helper';
+import { backupRegistrationForm } from '../register/data/actions';
const Logistration = (props) => {
const { selectedPage, tpaProviders } = props;
@@ -47,10 +42,6 @@ const Logistration = (props) => {
const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
- const dispatch = useDispatch();
- const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
- const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
-
useEffect(() => {
const authService = getAuthService();
if (authService) {
@@ -100,39 +91,6 @@ const Logistration = (props) => {
);
- /**
- * Temporary function created to resolve the complexity in tabs conditioning for multi-step
- * registration experiment
- */
- const getTabs = () => {
- if (multiStepRegistrationPageStep !== FIRST_STEP) {
- const prevStep = getMultiStepRegistrationPreviousStep(multiStepRegistrationPageStep);
- return (
-
- {
- dispatch(setMultiStepRegistrationExpData(multiStepRegExpVariation, prevStep));
- }}
- variant="primary"
- size="inline"
- className="mr-1"
- />
- {formatMessage(messages['tab.back.btn.text'])}
-
- );
- }
- return (
- handleOnSelect(tabKey, selectedPage)}>
-
-
-
- );
- };
-
const isValidTpaHint = () => {
const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
return !!provider;
@@ -165,7 +123,12 @@ const Logistration = (props) => {
)
- : (!isValidTpaHint() && !hideRegistrationLink && getTabs())}
+ : (!isValidTpaHint() && !hideRegistrationLink && (
+ handleOnSelect(tabKey, selectedPage)}>
+
+
+
+ ))}
{ key && (
)}
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index ce7af88f..87bf3e70 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,16 +15,12 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
-import { FIRST_STEP, NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
-jest.mock('../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -67,8 +63,6 @@ describe('Logistration', () => {
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
},
commonComponents: {
thirdPartyAuthContext: {
@@ -89,7 +83,6 @@ describe('Logistration', () => {
username: 'test-user',
})),
}));
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 145c5a38..8c5ea79f 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -176,7 +176,7 @@ const RegistrationPage = (props) => {
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
- }, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [registrationResult]);
const handleOnChange = (event) => {
const { name } = event.target;
diff --git a/src/register/RegistrationPage.test.jsx b/src/register/RegistrationPage.test.jsx
index 59a4d8aa..18e4e513 100644
--- a/src/register/RegistrationPage.test.jsx
+++ b/src/register/RegistrationPage.test.jsx
@@ -17,9 +17,6 @@ import {
setUserPipelineDataLoaded,
} from './data/actions';
import { INTERNAL_SERVER_ERROR } from './data/constants';
-import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from './RegistrationPage';
import {
AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
@@ -33,7 +30,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('./data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -132,7 +128,6 @@ describe('RegistrationPage', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index ce0fbea5..8c300b7e 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
import { FormFieldRenderer } from '../../field-renderer';
import { FIELDS } from '../data/constants';
-import { FIRST_STEP, shouldDisplayFieldInExperiment } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -32,8 +31,6 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors,
setFormFields,
autoSubmitRegistrationForm,
- multiStepRegistrationExpVariation,
- multiStepRegistrationPageStep,
} = props;
/** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
@@ -112,9 +109,7 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
};
- if (flags.showConfigurableRegistrationFields && shouldDisplayFieldInExperiment(
- 'other_fields', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableRegistrationFields) {
Object.keys(fieldDescriptions).forEach(fieldName => {
const fieldData = fieldDescriptions[fieldName];
switch (fieldData.name) {
@@ -166,9 +161,7 @@ const ConfigurableRegistrationForm = (props) => {
});
}
- if ((flags.showConfigurableEdxFields || showCountryField) && shouldDisplayFieldInExperiment(
- 'country', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableEdxFields || showCountryField) {
formFieldDescriptions.push(
{
);
}
- if (flags.showMarketingEmailOptInCheckbox && shouldDisplayFieldInExperiment(
- 'marketing_email_opt_in', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showMarketingEmailOptInCheckbox) {
formFieldDescriptions.push(
{
);
}
- if ((flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode)
- && shouldDisplayFieldInExperiment(
- 'honor_code', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
- )) {
+ if (flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode) {
formFieldDescriptions.push(
@@ -243,15 +231,11 @@ ConfigurableRegistrationForm.propTypes = {
setFieldErrors: PropTypes.func.isRequired,
setFormFields: PropTypes.func.isRequired,
autoSubmitRegistrationForm: PropTypes.bool,
- multiStepRegistrationExpVariation: PropTypes.string,
- multiStepRegistrationPageStep: PropTypes.string,
};
ConfigurableRegistrationForm.defaultProps = {
fieldDescriptions: {},
autoSubmitRegistrationForm: false,
- multiStepRegistrationExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
};
export default ConfigurableRegistrationForm;
diff --git a/src/register/components/RegistrationFailure.jsx b/src/register/components/RegistrationFailure.jsx
index f2a83585..c34c2af7 100644
--- a/src/register/components/RegistrationFailure.jsx
+++ b/src/register/components/RegistrationFailure.jsx
@@ -13,13 +13,12 @@ import {
TPA_AUTHENTICATION_FAILURE,
TPA_SESSION_EXPIRED,
} from '../data/constants';
-import { FIRST_STEP } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
const RegistrationFailureMessage = (props) => {
const { formatMessage } = useIntl();
const {
- context, errorCode, failureCount, multiStepRegistrationPageStep,
+ context, errorCode, failureCount,
} = props;
useEffect(() => {
@@ -50,11 +49,7 @@ const RegistrationFailureMessage = (props) => {
errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
break;
default:
- if (multiStepRegistrationPageStep !== FIRST_STEP) {
- errorMessage = formatMessage(messages['multistep.registration.form.submission.error']);
- } else {
- errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
- }
+ errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
break;
}
@@ -70,7 +65,6 @@ RegistrationFailureMessage.defaultProps = {
context: {
errorMessage: null,
},
- multiStepRegistrationPageStep: FIRST_STEP,
};
RegistrationFailureMessage.propTypes = {
@@ -80,7 +74,6 @@ RegistrationFailureMessage.propTypes = {
}),
errorCode: PropTypes.string.isRequired,
failureCount: PropTypes.number.isRequired,
- multiStepRegistrationPageStep: PropTypes.string,
};
export default RegistrationFailureMessage;
diff --git a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
index 00fe5595..3d664260 100644
--- a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
+++ b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -11,9 +11,6 @@ import configureStore from 'redux-mock-store';
import { registerNewUser } from '../../data/actions';
import { FIELDS } from '../../data/constants';
-import { FIRST_STEP, NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
@@ -97,9 +93,6 @@ describe('ConfigurableRegistrationForm', () => {
registrationError: {},
registrationFormData,
usernameSuggestions: [],
- multiStepRegistrationPageStep: FIRST_STEP,
- multiStepRegExpVariation: '',
- isValidatingMultiStepRegistrationPage: false,
},
commonComponents: {
thirdPartyAuthApiStatus: null,
@@ -128,7 +121,6 @@ describe('ConfigurableRegistrationForm', () => {
};
window.location = { search: '' };
getLocale.mockImplementationOnce(() => ('en-us'));
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/RegistrationFailure.test.jsx b/src/register/components/tests/RegistrationFailure.test.jsx
index b9667c9c..003cc966 100644
--- a/src/register/components/tests/RegistrationFailure.test.jsx
+++ b/src/register/components/tests/RegistrationFailure.test.jsx
@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
} from '../../data/constants';
-import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import RegistrationFailureMessage from '../RegistrationFailure';
@@ -26,7 +23,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -125,7 +121,6 @@ describe('RegistrationFailure', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/components/tests/ThirdPartyAuth.test.jsx b/src/register/components/tests/ThirdPartyAuth.test.jsx
index 45672ad5..917f10f9 100644
--- a/src/register/components/tests/ThirdPartyAuth.test.jsx
+++ b/src/register/components/tests/ThirdPartyAuth.test.jsx
@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
} from '../../../data/constants';
-import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
-import useMultiStepRegistrationExperimentVariation
- from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
-jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -124,7 +120,6 @@ describe('ThirdPartyAuth', () => {
institutionLogin: false,
};
window.location = { search: '' };
- useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {
diff --git a/src/register/data/actions.js b/src/register/data/actions.js
index 530f3bc8..68bfe9e6 100644
--- a/src/register/data/actions.js
+++ b/src/register/data/actions.js
@@ -8,8 +8,6 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
-export const REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA = 'REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA';
-
// Backup registration form
export const backupRegistrationForm = () => ({
type: BACKUP_REGISTRATION_DATA.BASE,
@@ -21,19 +19,18 @@ export const backupRegistrationFormBegin = (data) => ({
});
// Validate fields from the backend
-export const fetchRealtimeValidations = (formPayload, isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidations = (formPayload) => ({
type: REGISTER_FORM_VALIDATIONS.BASE,
- payload: { formPayload, isValidatingMultiStepRegistrationPage },
+ payload: { formPayload },
});
-export const fetchRealtimeValidationsBegin = (isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidationsBegin = () => ({
type: REGISTER_FORM_VALIDATIONS.BEGIN,
- payload: { isValidatingMultiStepRegistrationPage },
});
-export const fetchRealtimeValidationsSuccess = (validations, isValidatingMultiStepRegistrationPage) => ({
+export const fetchRealtimeValidationsSuccess = (validations) => ({
type: REGISTER_FORM_VALIDATIONS.SUCCESS,
- payload: { validations, isValidatingMultiStepRegistrationPage },
+ payload: { validations },
});
export const fetchRealtimeValidationsFailure = () => ({
@@ -85,11 +82,3 @@ export const setUserPipelineDataLoaded = (value) => ({
type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
payload: { value },
});
-
-// Multi Step Registration Experiment Actions
-export const setMultiStepRegistrationExpData = (
- multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage,
-) => ({
- type: REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
- payload: { multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage },
-});
diff --git a/src/register/data/optimizelyExperiment/helper.js b/src/register/data/optimizelyExperiment/helper.js
deleted file mode 100644
index f3d21381..00000000
--- a/src/register/data/optimizelyExperiment/helper.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * This file contains data for Multi Step Registration Optimizely experiment
- */
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from '../../messages';
-
-export const NOT_INITIALIZED = 'experiment-not-initialized';
-export const CONTROL = 'control-registration-page';
-export const MULTI_STEP_REGISTRATION_EXP_VARIATION = 'multi-step-registration-page';
-
-export const FIRST_STEP = 'first-step';
-export const SECOND_STEP = 'second-step';
-export const THIRD_STEP = 'third-step';
-
-export const CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS = ['name', 'email', 'password', 'marketing_email_opt_in', 'ThirdPartyAuth'];
-export const CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS = ['username', 'country'];
-export const CONTROL_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
-
-export const MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS = ['email', 'marketing_email_opt_in', 'ThirdPartyAuth'];
-export const MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS = ['name', 'password'];
-export const MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS = ['username', 'country'];
-export const MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
-
-const MULTI_STEP_REGISTRATION_EXP_PAGE = 'authn_register_page';
-
-export function getMultiStepRegistrationExperimentVariation() {
- try {
- if (window.optimizely
- && window.optimizely.get('data').experiments[getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID]) {
- const selectedVariant = window.optimizely.get('state').getVariationMap()[
- getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID
- ];
- return selectedVariant?.name;
- }
- } catch (e) { /* empty */ }
- return '';
-}
-
-export function activateMultiStepRegistrationExperiment() {
- window.optimizely = window.optimizely || [];
- window.optimizely.push({
- type: 'page',
- pageName: MULTI_STEP_REGISTRATION_EXP_PAGE,
- });
-}
-
-/**
- * We want to display username and honor_code fields in second page if user is in multi-step
- * registration page experiment
- */
-export const shouldDisplayFieldInExperiment = (fieldName, expVariation, registerPageStep) => (
- !expVariation || expVariation === NOT_INITIALIZED
- || (expVariation === CONTROL
- && (
- CONTROL_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
- || (registerPageStep === FIRST_STEP && CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === SECOND_STEP && CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
- ))
- || (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
- && (
- MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
- || (registerPageStep === FIRST_STEP && MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === SECOND_STEP && MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
- || (registerPageStep === THIRD_STEP && MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS.includes(fieldName))
- ))
-);
-
-export const getRegisterButtonLabelInExperiment = (
- existingButtonLabel, expVariation, registerPageStep, formatMessage,
-) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
- return formatMessage(messages['multistep.registration.exp.continue.button']);
- }
- return existingButtonLabel;
-};
-
-export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
- if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
- return 'continue-button';
- }
- return 'register-button';
-};
-
-export const getRegisterButtonSubmitStateInExperiment = (
- registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
-) => {
- if ((expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP)
- || (expVariation === CONTROL && registerPageStep !== SECOND_STEP)) {
- return validationsSubmitState;
- }
- return registerSubmitState;
-};
-
-export const getMultiStepRegistrationPreviousStep = (currentStep) => {
- if (currentStep === THIRD_STEP) {
- return SECOND_STEP;
- }
- if (currentStep === SECOND_STEP) {
- return FIRST_STEP;
- }
- return currentStep;
-};
-
-export const getMultiStepRegistrationNextStep = (currentStep) => {
- if (currentStep === FIRST_STEP) {
- return SECOND_STEP;
- }
- if (currentStep === SECOND_STEP) {
- return THIRD_STEP;
- }
- return currentStep;
-};
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
deleted file mode 100644
index 68a6347a..00000000
--- a/src/register/data/optimizelyExperiment/track.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-
-export const eventNames = {
- multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
- multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
- multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
- multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
- multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
- multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
- multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
- multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
-};
-
-export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep2Viewed = (expVariation, isMarketingLead) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
- variation: expVariation,
- is_marketing_lead: isMarketingLead,
- });
-};
-
-export const trackMultiStepRegistrationStep3Viewed = () => {
- sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
-};
-
-export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
- sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
-};
-
-export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
- variation: expVariation,
- });
-};
-
-export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
- sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
- variation: expVariation,
- });
-};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
deleted file mode 100644
index 97d0a233..00000000
--- a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import {
- activateMultiStepRegistrationExperiment,
- getMultiStepRegistrationExperimentVariation,
- NOT_INITIALIZED,
-} from './helper';
-import { trackMultiStepRegistrationStep1Viewed } from './track';
-import { COMPLETE_STATE } from '../../../data/constants';
-
-/**
- * This hook returns activates multi step registration experiment and returns the experiment
- * variation for the user.
- */
-const useMultiStepRegistrationExperimentVariation = (
- initExpVariation,
- registrationEmbedded,
- tpaHint,
- currentProvider,
- thirdPartyAuthApiStatus,
-) => {
- const [variation, setVariation] = useState(initExpVariation);
-
- useEffect(() => {
- if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
- || thirdPartyAuthApiStatus !== COMPLETE_STATE) {
- return variation;
- }
-
- const getVariation = () => {
- const expVariation = getMultiStepRegistrationExperimentVariation();
- if (expVariation) {
- setVariation(expVariation);
- trackMultiStepRegistrationStep1Viewed(expVariation);
- } else {
- // This is to handle the case when user dont get variation for some reason, the register page
- // shows unlimited spinner.
- setVariation(NOT_INITIALIZED);
- }
- };
-
- activateMultiStepRegistrationExperiment();
-
- const timer = setTimeout(getVariation, 300);
-
- return () => {
- clearTimeout(timer);
- };
- }, [ // eslint-disable-line react-hooks/exhaustive-deps
- currentProvider, initExpVariation, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
- ]);
-
- return variation;
-};
-
-export default useMultiStepRegistrationExperimentVariation;
diff --git a/src/register/data/reducers.js b/src/register/data/reducers.js
index 32438877..70c3a994 100644
--- a/src/register/data/reducers.js
+++ b/src/register/data/reducers.js
@@ -5,11 +5,9 @@ import {
REGISTER_NEW_USER,
REGISTER_SET_COUNTRY_CODE,
REGISTER_SET_EMAIL_SUGGESTIONS,
- REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from './actions';
-import { FIRST_STEP } from './optimizelyExperiment/helper';
import {
DEFAULT_STATE,
PENDING_STATE,
@@ -37,14 +35,10 @@ export const defaultState = {
},
validations: null,
submitState: DEFAULT_STATE,
- validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
- isValidatingMultiStepRegistrationPage: false,
};
const reducer = (state = defaultState, action = {}) => {
@@ -91,22 +85,12 @@ const reducer = (state = defaultState, action = {}) => {
registrationError: { ...registrationErrorTemp },
};
}
- case REGISTER_FORM_VALIDATIONS.BEGIN: {
- return {
- ...state,
- validationsSubmitState: action.payload?.isValidatingMultiStepRegistrationPage
- ? PENDING_STATE
- : state.validationsSubmitState,
- };
- }
case REGISTER_FORM_VALIDATIONS.SUCCESS: {
const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
return {
...state,
validations: validationWithoutUsernameSuggestions,
- isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
- validationsSubmitState: DEFAULT_STATE,
};
}
case REGISTER_FORM_VALIDATIONS.FAILURE:
@@ -114,7 +98,6 @@ const reducer = (state = defaultState, action = {}) => {
...state,
validationApiRateLimited: true,
validations: null,
- validationsSubmitState: DEFAULT_STATE,
};
case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
return {
@@ -146,14 +129,6 @@ const reducer = (state = defaultState, action = {}) => {
emailSuggestion: action.payload.emailSuggestion,
},
};
- case REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA: {
- return {
- ...state,
- multiStepRegExpVariation: action.payload.multiStepRegExpVariation,
- multiStepRegistrationPageStep: action.payload.multiStepRegistrationPageStep,
- isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
- };
- }
default:
return {
...state,
diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js
index 3edd395e..0325cd4b 100644
--- a/src/register/data/sagas.js
+++ b/src/register/data/sagas.js
@@ -40,13 +40,10 @@ export function* handleNewUserRegistration(action) {
export function* fetchRealtimeValidations(action) {
try {
- yield put(fetchRealtimeValidationsBegin(action.payload?.isValidatingMultiStepRegistrationPage));
+ yield put(fetchRealtimeValidationsBegin());
const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
- yield put(fetchRealtimeValidationsSuccess(
- camelCaseObject(fieldValidations),
- action.payload?.isValidatingMultiStepRegistrationPage,
- ));
+ yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
} catch (e) {
if (e.response && e.response.status === 403) {
yield put(fetchRealtimeValidationsFailure());
diff --git a/src/register/data/tests/reducers.test.js b/src/register/data/tests/reducers.test.js
index 909704d2..3e2270ab 100644
--- a/src/register/data/tests/reducers.test.js
+++ b/src/register/data/tests/reducers.test.js
@@ -11,7 +11,6 @@ import {
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from '../actions';
-import { FIRST_STEP } from '../optimizelyExperiment/helper';
import reducer from '../reducers';
describe('Registration Reducer Tests', () => {
@@ -35,14 +34,10 @@ describe('Registration Reducer Tests', () => {
},
validations: null,
submitState: DEFAULT_STATE,
- validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
- multiStepRegExpVariation: '',
- multiStepRegistrationPageStep: FIRST_STEP,
- isValidatingMultiStepRegistrationPage: false,
};
it('should return the initial state', () => {
diff --git a/src/register/data/utils.js b/src/register/data/utils.js
index 25694527..e7773e2b 100644
--- a/src/register/data/utils.js
+++ b/src/register/data/utils.js
@@ -43,39 +43,31 @@ export const isFormValid = (
Object.keys(payload).forEach(key => {
switch (key) {
case 'name':
- if (!fieldErrors.name) {
- fieldErrors.name = validateName(payload.name, formatMessage);
- }
+ fieldErrors.name = validateName(payload.name, formatMessage);
if (fieldErrors.name) { isValid = false; }
break;
case 'email': {
- if (!fieldErrors.email) {
- const {
- fieldError, confirmEmailError, suggestion,
- } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
- if (fieldError) {
- fieldErrors.email = fieldError;
- isValid = false;
- }
- if (confirmEmailError) {
- fieldErrors.confirm_email = confirmEmailError;
- isValid = false;
- }
- emailSuggestion = suggestion;
+ const {
+ fieldError, confirmEmailError, suggestion,
+ } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+ if (fieldError) {
+ fieldErrors.email = fieldError;
+ isValid = false;
}
+ if (confirmEmailError) {
+ fieldErrors.confirm_email = confirmEmailError;
+ isValid = false;
+ }
+ emailSuggestion = suggestion;
if (fieldErrors.email) { isValid = false; }
break;
}
case 'username':
- if (!fieldErrors.username) {
- fieldErrors.username = validateUsername(payload.username, formatMessage);
- }
+ fieldErrors.username = validateUsername(payload.username, formatMessage);
if (fieldErrors.username) { isValid = false; }
break;
case 'password':
- if (!fieldErrors.password) {
- fieldErrors.password = validatePasswordField(payload.password, formatMessage);
- }
+ fieldErrors.password = validatePasswordField(payload.password, formatMessage);
if (fieldErrors.password) { isValid = false; }
break;
default:
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index cea5e5df..39d9e7f5 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -201,29 +201,6 @@ const messages = defineMessages({
defaultMessage: 'Did you mean',
description: 'Did you mean alert suggestion',
},
- // MultiStep Registration experiment
- 'multistep.registration.exp.continue.button': {
- id: 'multistep.registration.exp.continue.button',
- defaultMessage: 'Continue',
- description: 'Label text for multistep registration page second step',
- },
- 'multistep.registration.username.second.step.guideline.content': {
- id: 'multistep.registration.username.second.step.guideline.content',
- defaultMessage: 'Finish Registration',
- description: 'Guideline content for username field in multi-step registration experiment step 2',
- },
- 'multistep.registration.username.third.step.guideline.content': {
- id: 'multistep.registration.username.third.step.guideline.content',
- defaultMessage: 'To finalize your registration, please confirm your country of residence '
- + 'and create a public username that will identify you in your course communication forums. '
- + 'The username cannot be changed.',
- description: 'Guideline content for username field in multi-step registration experiment step 2',
- },
- 'multistep.registration.form.submission.error': {
- id: 'multistep.registration.form.submission.error',
- defaultMessage: 'Please check your responses for this and the previous step and try again.',
- description: 'Error message that appears on top of the form when invalid form is submitted',
- },
});
export default messages;
diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss
index 884af10d..75889601 100644
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -2,10 +2,6 @@
min-width: 14.4rem;
}
-.continue-button {
- min-width: 7rem;
-}
-
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}
From ad0d75ab0df747e11973a72246e8808c2d85b916 Mon Sep 17 00:00:00 2001
From: Blue
Date: Mon, 13 May 2024 14:11:03 +0500
Subject: [PATCH 36/82] feat: implement auto generated username experiment
(#1248)
* feat: implement auto generated username registration exp
---
src/config/index.js | 1 +
src/logistration/Logistration.test.jsx | 5 +
src/register/RegistrationPage.jsx | 203 ++++++++++--------
src/register/RegistrationPage.test.jsx | 5 +
.../ConfigurableRegistrationForm.test.jsx | 5 +
.../tests/RegistrationFailure.test.jsx | 5 +
.../components/tests/ThirdPartyAuth.test.jsx | 5 +
src/register/data/actions.js | 7 +
.../data/optimizelyExperiment/helper.js | 30 +++
...utoGeneratedUsernameExperimentVariation.js | 53 +++++
src/register/data/reducers.js | 8 +
src/register/data/tests/reducers.test.js | 1 +
12 files changed, 234 insertions(+), 94 deletions(-)
create mode 100644 src/register/data/optimizelyExperiment/helper.js
create mode 100644 src/register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation.js
diff --git a/src/config/index.js b/src/config/index.js
index badb6fe7..78cea882 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -35,6 +35,7 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+ AUTO_GENERATED_USERNAME_EXPERIMENT_ID: process.env.AUTO_GENERATED_USERNAME_EXPERIMENT_ID || '',
};
export default configuration;
diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx
index 87bf3e70..b16ae216 100644
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -15,12 +15,16 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
+import { NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+ from '../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
+jest.mock('../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -84,6 +88,7 @@ describe('Logistration', () => {
})),
}));
+ useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },
config: {
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 8c5ea79f..22f12e14 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -18,6 +18,7 @@ import {
backupRegistrationFormBegin,
clearRegistrationBackendError,
registerNewUser,
+ setAutoGeneratedUsernameExperimentData,
setEmailSuggestionInStore,
setUserPipelineDataLoaded,
} from './data/actions';
@@ -25,6 +26,8 @@ import {
FORM_SUBMISSION_ERROR,
TPA_AUTHENTICATION_FAILURE,
} from './data/constants';
+import { AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION, NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation from './data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
import getBackendValidations from './data/selectors';
import {
isFormValid, prepareRegistrationPayload,
@@ -68,6 +71,7 @@ const RegistrationPage = (props) => {
} = props;
const backedUpFormData = useSelector(state => state.register.registrationFormData);
+ const initExpVariation = useSelector(state => state.register.autoGeneratedUsernameExperimentVariation);
const registrationError = useSelector(state => state.register.registrationError);
const registrationErrorCode = registrationError?.errorCode;
const registrationResult = useSelector(state => state.register.registrationResult);
@@ -103,6 +107,12 @@ const RegistrationPage = (props) => {
? formatMessage(messages['create.account.cta.button'], { label: cta })
: formatMessage(messages['create.account.for.free.button']);
+ const autoGeneratedUsernameExpVariation = useAutoGeneratedUsernameExperimentVariation(
+ initExpVariation, registrationEmbedded, tpaHint, currentProvider, thirdPartyAuthApiStatus,
+ );
+
+ const hideUsernameField = flags.autoGeneratedUsernameEnabled
+ || autoGeneratedUsernameExpVariation === AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION;
/**
* Set the userPipelineDetails data in formFields for only first time
*/
@@ -149,8 +159,10 @@ const RegistrationPage = (props) => {
formFields: { ...formFields },
errors: { ...errors },
}));
+ dispatch(setAutoGeneratedUsernameExperimentData(autoGeneratedUsernameExpVariation));
}
- }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+ }, [shouldBackupState, configurableFormFields, // eslint-disable-line react-hooks/exhaustive-deps
+ formFields, errors, dispatch, backedUpFormData]);
useEffect(() => {
if (backendValidations) {
@@ -216,7 +228,7 @@ const RegistrationPage = (props) => {
delete payload.password;
payload.social_auth_provider = currentProvider;
}
- if (flags.autoGeneratedUsernameEnabled) {
+ if (hideUsernameField) {
delete payload.username;
}
@@ -286,106 +298,109 @@ const RegistrationPage = (props) => {
getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
}
/>
- {autoSubmitRegForm && !errorCode.type ? (
-
-
-
- ) : (
-
+ ) : (
+
+
-
- {!flags.autoGeneratedUsernameEnabled && (
-
+
- )}
- {!currentProvider && (
-
- )}
-
- e.preventDefault()}
- />
- {!registrationEmbedded && (
-
+ )}
+ {!currentProvider && (
+
+ )}
+
- )}
-
-