@edx/frontend-plugin-advertisements 1.16.0 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.rst +110 -127
  2. package/package.json +1 -1
package/README.rst CHANGED
@@ -35,135 +35,83 @@ documented in the repository README.
35
35
 
36
36
  .. _Learning MFE: https://github.com/openedx/frontend-app-learning
37
37
 
38
- Local Setup and Installation
39
- ----------------------------
40
-
41
- - Navigate to whichever parent folder holds your edx devstack folders
42
- - Navigate to the src folder, and clone this repo by running: `git clone git@github.com:edx/frontend-plugin-advertisements.git`
43
- - In `frontend-app-learning`, Add these lines to your `env.config.js` file:
44
- ```
45
- import { UpgradeNotification, LockPaywall } from '@edx/frontend-plugin-advertisements';
46
- import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
47
-
48
- // Insert any other imports here
49
-
50
- // Load environment variables from .env file
51
- const config = {
52
- pluginSlots: {
53
-
54
- // Insert any other plugins here
55
-
56
- notification_widget_plugin: {
57
- plugins: [
58
- {
59
- op: PLUGIN_OPERATIONS.Insert,
60
- widget: {
61
- id: 'notification_widget_plugin',
62
- type: DIRECT_PLUGIN,
63
- RenderWidget: UpgradeNotification,
38
+ Local Development
39
+ -----------------
40
+
41
+ This plugin is intended for use with the `Learning MFE`_, specifically with several plugin slots defined in the MFE.
42
+ In order to install a local checkout of this plugin into the `Learning MFE`_ instead of from npm, follow the
43
+ documentation for `local module development`_ in the `Learning MFE`_. Additionally, if you would like for these
44
+ components to appear in the correct plugin slots, you will need a local ``env.config.js`` file in your copy of
45
+ ``frontend-app-learning`` which includes the following lines::
46
+
47
+
48
+ import { UpgradeNotification, LockPaywall } from '@edx/frontend-plugin-advertisements';
49
+ import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
50
+
51
+ // Insert any other imports here
52
+
53
+ // Load environment variables from .env file
54
+ const config = {
55
+ pluginSlots: {
56
+
57
+ // Insert any other plugins here
58
+
59
+ notification_widget_plugin: {
60
+ plugins: [
61
+ {
62
+ op: PLUGIN_OPERATIONS.Insert,
63
+ widget: {
64
+ id: 'notification_widget_plugin',
65
+ type: DIRECT_PLUGIN,
66
+ RenderWidget: UpgradeNotification,
67
+ },
64
68
  },
65
- },
66
- ],
67
- },
68
- notification_tray_plugin: {
69
- plugins: [
70
- {
71
- op: PLUGIN_OPERATIONS.Insert,
72
- widget: {
73
- id: 'notification_tray_plugin',
74
- type: DIRECT_PLUGIN,
75
- RenderWidget: UpgradeNotification,
76
- // RenderWidget: DefaultUpgradeNotification,
69
+ ],
70
+ },
71
+ notification_tray_plugin: {
72
+ plugins: [
73
+ {
74
+ op: PLUGIN_OPERATIONS.Insert,
75
+ widget: {
76
+ id: 'notification_tray_plugin',
77
+ type: DIRECT_PLUGIN,
78
+ RenderWidget: UpgradeNotification,
79
+ },
77
80
  },
78
- },
79
- ],
80
- },
81
- outline_tab_notifications_plugin: {
82
- keepDefault: false,
83
- plugins: [
84
- {
85
- op: PLUGIN_OPERATIONS.Insert,
86
- widget: {
87
- id: 'outline_tab_notifications_plugin',
88
- type: DIRECT_PLUGIN,
89
- RenderWidget: UpgradeNotification,
90
- // RenderWidget: DefaultUpgradeNotification,
81
+ ],
82
+ },
83
+ outline_tab_notifications_plugin: {
84
+ keepDefault: false,
85
+ plugins: [
86
+ {
87
+ op: PLUGIN_OPERATIONS.Insert,
88
+ widget: {
89
+ id: 'outline_tab_notifications_plugin',
90
+ type: DIRECT_PLUGIN,
91
+ RenderWidget: UpgradeNotification,
92
+ },
91
93
  },
92
- },
93
- ],
94
- },
95
- fbe_message_plugin: { // plugin slot id
96
- keepDefault: false,
97
- plugins: [
98
- {
99
- op: PLUGIN_OPERATIONS.Insert,
100
- widget: {
101
- id: 'fbe_message_plugin',
102
- type: DIRECT_PLUGIN,
103
- priority: 10,
104
- RenderWidget: LockPaywall,
94
+ ],
95
+ },
96
+ fbe_message_plugin: { // plugin slot id
97
+ keepDefault: false,
98
+ plugins: [
99
+ {
100
+ op: PLUGIN_OPERATIONS.Insert,
101
+ widget: {
102
+ id: 'fbe_message_plugin',
103
+ type: DIRECT_PLUGIN,
104
+ priority: 10,
105
+ RenderWidget: LockPaywall,
106
+ },
105
107
  },
106
- },
107
- ],
108
+ ],
109
+ },
108
110
  },
109
- },
110
- OPTIMIZELY_FULL_STACK_SDK_KEY: 'vtr_upgrade',
111
- };
112
-
113
- export default config;
114
- ```
115
- - Restart frontend-app-learning
116
-
117
- Experiments
118
- -----------
119
- - In order to view experiments locally:
120
- - Make sure your devstack is up and running.
121
- - Sign into the LMS using your audit account (username: `audit@example.com`, password: `edx`).
122
- - Navigate to the demo course: http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course/home
123
- - The demo course already has a paywall for the verified track enabled
124
-
125
- - The experiments present in this repo as of 05-29-2025 can be tested as such:
126
- - In mocks/optimizely/index.jsx, switch enabled to "true" and variationKey to your desired variationKey
127
- - These variationKeys can be found in data/optimizely.js:
128
-
129
- - NOTE: Please update this whenever an experiment is created or modified.
130
- ```
131
- OPTIMIZELY_VTR_EXPERIMENT_VARIATION_KEYS
132
- WHY_NOT_SURVEY: 'why_not_survey',
133
- - A survey to ask what would motivate you to upgrade if you say no
134
- - NOTE: This experimental feature only appears in-sequence within graded sequences.
135
- CERTIFICATE_PREVIEW: 'certificate_preview',
136
- - Preview a mockup of the certificate that you will receive at the end of the course in the upgrade notification
137
- PARTNER_BRANDING: 'partner_branding',
138
- - Show the logo of the partner associated with the course (e.g. Harvard, MIT)
139
- CONTROL: 'control',
140
- - The default user experience
141
- OFF: 'off',
142
- ```
143
-
144
- - Note that incourse paywall = in squenece
145
- - upgrade notification = in sidebar notification
146
-
147
- Example:
148
- - Say we want to view the certificate preview. We'd go to mocks/optimizely/index.jsx and do this:
149
- ```
150
- const useDecision = (experimentKey) => (
151
- // To mock optimizely for local smoke testing, set the value of "enabled" to "true" and
152
- // replace "replace_me" with the desired value from OPTIMIZELY_VTR_EXPERIMENT_VARIATION_KEYS
153
- // which can be found in src/data/optimizely.js
154
- [{ enabled: true, variationKey: 'certificate_preview' }]
155
- );
156
- ```
157
- - The experimental feature should then appear in the Demo Course.
158
-
159
-
160
- Development
161
- -----------
162
- This plugin is intended for use with the `Learning MFE`_, specifically with several plugin slots defined in the MFE.
163
- In order to install a local checkout of this plugin into the `Learning MFE`_ instead of from npm, follow the
164
- documentation for `local module development`_ in the `Learning MFE`_. Additionally, if you would like for these
165
- components to appear in the correct plugin slots, you will need a local ``env.config.js`` file in your copy of
166
- ``frontend-app-learning``.
111
+ OPTIMIZELY_FULL_STACK_SDK_KEY: 'vtr_upgrade',
112
+ };
113
+
114
+ export default config;
167
115
 
168
116
  If you are planning to run the `Learning MFE`_ in `devstack`_, be sure to clone this repository into a ``src``
169
117
  subdirectory of your `devstack`_ workspace directory so that the code is properly mounted into the `Learning MFE`_
@@ -189,12 +137,47 @@ up by the `Learning MFE`_ via the hot module reloading process.::
189
137
  .. _Mounting frontend packages from src directory: https://github.com/openedx/devstack/blob/master/docs/decisions/0005-frontend-package-mounts.rst
190
138
 
191
139
  Development with Optimizely
192
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~
140
+ ---------------------------
193
141
  This repository uses the Optimizely SDK to implement frontend experiments. In order to simplify local development,
194
- this repository contains a mock Optimizely implementation. Please see the `instructions`_ for further details.
142
+ this repository contains a mock Optimizely implementation.
143
+
144
+ In order for the mock Optimizely to work, you must map the ``mocks/optimizely/index.jsx`` module to the npm package name
145
+ by creating a ``module.config.js`` file and adding the following line to ``localModules``::
146
+
147
+ {moduleName: '@optimizely/react-sdk', dir: '../src/frontend-plugin-advertisements/src/mocks/optimizely', dist: '.' }
148
+
149
+ If you want a more thorough guide on this, lease see these `instructions`_ for further details.
195
150
 
196
151
  .. _instructions: https://github.com/edx/frontend-plugin-advertisements/tree/main/src/mocks/optimizely/README.rst
197
152
 
153
+ How To View Experiments Locally
154
+ -------------------------------
155
+ Make sure your devstack is up and running, and sign into the LMS using your audit account (username: ``audit@example.com``,
156
+ password: ``edx``). Navigate to the demo course: http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course/home which
157
+ already has a paywall for the verified track enabled. To select your experiment treatment, go to ``mocks/optimizely/index.jsx``.
158
+ In the ``useDecision`` definition, switch ``enabled`` to "true" and ``variationKey`` to your desired variationKey.
159
+
160
+ The variationKeys can be found within ``data/optimizely.js`` and should look like this::
161
+
162
+ const OPTIMIZELY_VTR_EXPERIMENT_VARIATION_KEYS = {
163
+ WHY_NOT_SURVEY: 'why_not_survey',
164
+ CERTIFICATE_PREVIEW: 'certificate_preview',
165
+ PARTNER_BRANDING: 'partner_branding',
166
+ CONTROL: 'control',
167
+ OFF: 'off',
168
+ };
169
+
170
+ For example, say we want to view the certificate preview. We'd go to mocks/optimizely/index.jsx and do this::
171
+
172
+ const useDecision = (experimentKey) => (
173
+ // To mock optimizely for local smoke testing, set the value of "enabled" to "true" and
174
+ // replace "replace_me" with the desired value from OPTIMIZELY_VTR_EXPERIMENT_VARIATION_KEYS
175
+ // which can be found in src/data/optimizely.js
176
+ [{ enabled: true, variationKey: 'certificate_preview' }]
177
+ );
178
+
179
+ The experimental feature should then appear in the Demo Course.
180
+
198
181
  License
199
182
  =======
200
183
 
@@ -212,4 +195,4 @@ Contact `edx/masters-devs-cosmonauts` if you need help with this repository.
212
195
  Reporting Security Issues
213
196
  =========================
214
197
 
215
- Please do not report security issues in public. Email security@edx.org instead.
198
+ Please do not report security issues in public. Email security@edx.org instead.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edx/frontend-plugin-advertisements",
3
- "version": "1.16.0",
3
+ "version": "1.17.0",
4
4
  "description": "Frontend plugin for edX in course advertisements",
5
5
  "main": "dist/index.js",
6
6
  "repository": {