{intl.formatMessage(messages.completed)}
++ {intl.formatMessage(messages.earned)} {intl.formatMessage(messages.share)} +
+
+ { twitterAccount && (
+ logClick('twitter')}
+ hashtags={['mooc']}
+ title={intl.formatMessage(messages.social, { platform: `@${twitterAccount}`, title })}
+ url={marketingUrl}
+ >
+
+ )}
+ logClick('facebook')}
+ className="ml-2"
+ quote={intl.formatMessage(messages.social, { platform: getConfig().SITE_NAME, title })}
+ url={marketingUrl}
+ >
+
+
+ );
+}
+
+SocialIcons.propTypes = {
+ courseId: PropTypes.string.isRequired,
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(SocialIcons);
diff --git a/src/courseware/course/celebration/assets/claps_280x201.gif b/src/courseware/course/celebration/assets/claps_280x201.gif
new file mode 100644
index 00000000..cab4cd01
Binary files /dev/null and b/src/courseware/course/celebration/assets/claps_280x201.gif differ
diff --git a/src/courseware/course/celebration/assets/claps_456x328.gif b/src/courseware/course/celebration/assets/claps_456x328.gif
new file mode 100644
index 00000000..5a587101
Binary files /dev/null and b/src/courseware/course/celebration/assets/claps_456x328.gif differ
diff --git a/src/courseware/course/celebration/index.js b/src/courseware/course/celebration/index.js
new file mode 100644
index 00000000..015f7d43
--- /dev/null
+++ b/src/courseware/course/celebration/index.js
@@ -0,0 +1,2 @@
+export { default as CelebrationModal } from './CelebrationModal';
+export { handleNextSectionCelebration, shouldCelebrateOnSectionLoad } from './utils';
diff --git a/src/courseware/course/celebration/messages.js b/src/courseware/course/celebration/messages.js
new file mode 100644
index 00000000..05b25c9d
--- /dev/null
+++ b/src/courseware/course/celebration/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ completed: {
+ id: 'learning.celebration.completed',
+ defaultMessage: 'You just completed the first section of your course.',
+ },
+ congrats: {
+ id: 'learning.celebration.congrats',
+ defaultMessage: 'Congratulations!',
+ },
+ earned: {
+ id: 'learning.celebration.earned',
+ defaultMessage: 'You earned it!',
+ },
+ forward: {
+ id: 'learning.celebration.forward',
+ defaultMessage: 'Keep going',
+ description: 'Button to close celebration dialog and get back to course',
+ },
+ share: {
+ id: 'learning.celebration.share',
+ defaultMessage: 'Take a moment to celebrate and share your progress.',
+ },
+ shareService: {
+ id: 'learning.celebration.share.service',
+ defaultMessage: 'Share your progress on {service}.',
+ },
+ social: {
+ id: 'learning.celebration.social',
+ defaultMessage: 'I’m on my way to completing {title} online with {platform}. What are you spending your time learning?',
+ description: 'Shown when sharing course progress on a social network',
+ },
+});
+
+export default messages;
diff --git a/src/courseware/course/celebration/utils.jsx b/src/courseware/course/celebration/utils.jsx
new file mode 100644
index 00000000..65c0fe55
--- /dev/null
+++ b/src/courseware/course/celebration/utils.jsx
@@ -0,0 +1,51 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { setFirstSectionCelebrationComplete } from '../../../data/api';
+import { clearLocalStorage, getLocalStorage, setLocalStorage } from '../../../data/localStorage';
+
+const CELEBRATION_LOCAL_STORAGE_KEY = 'CelebrationModal.showOnSectionLoad';
+
+// Records clicks through the end of a section, so that we can know whether we should celebrate when we finish loading
+function handleNextSectionCelebration(sequenceId, nextSequenceId) {
+ setLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY, {
+ prevSequenceId: sequenceId,
+ nextSequenceId,
+ });
+}
+
+function recordFirstSectionCelebration(courseId) {
+ // Tell the LMS
+ setFirstSectionCelebrationComplete(courseId);
+
+ // Tell our analytics
+ const { administrator } = getAuthenticatedUser();
+ sendTrackEvent('edx.ui.lms.celebration.first_section.opened', {
+ course_id: courseId,
+ is_staff: administrator,
+ });
+}
+
+// Looks at local storage to see whether we just came from the end of a section.
+// Note! This does have side effects (will clear some local storage and may start an api call).
+function shouldCelebrateOnSectionLoad(courseId, sequenceId, celebrateFirstSection) {
+ const celebrationIds = getLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY);
+ if (!celebrationIds) {
+ return false;
+ }
+
+ const {
+ prevSequenceId,
+ nextSequenceId,
+ } = celebrationIds;
+ const shouldCelebrate = sequenceId === nextSequenceId && celebrateFirstSection;
+
+ if (sequenceId !== prevSequenceId && sequenceId !== nextSequenceId) {
+ // Don't clear until we move off of current/prev sequence
+ clearLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY);
+ }
+
+ return shouldCelebrate;
+}
+
+export { handleNextSectionCelebration, recordFirstSectionCelebration, shouldCelebrateOnSectionLoad };
diff --git a/src/data/api.js b/src/data/api.js
index 38ad54f6..0f027d9c 100644
--- a/src/data/api.js
+++ b/src/data/api.js
@@ -37,6 +37,8 @@ function normalizeMetadata(metadata) {
tabs: normalizeTabUrls(metadata.id, camelCaseObject(metadata.tabs)),
showCalculator: metadata.show_calculator,
notes: camelCaseObject(metadata.notes),
+ marketingUrl: metadata.marketing_url,
+ celebrations: camelCaseObject(metadata.celebrations),
};
}
@@ -227,6 +229,14 @@ export async function getResumeBlock(courseId) {
return camelCaseObject(data);
}
+// Does not block on answer
+export function setFirstSectionCelebrationComplete(courseId) {
+ const url = new URL(`${getConfig().LMS_BASE_URL}/api/courseware/celebration/${courseId}`);
+ getAuthenticatedHttpClient().post(url.href, {
+ first_section: false,
+ });
+}
+
export async function updateCourseDeadlines(courseId) {
const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_experience/v1/reset_course_deadlines`);
await getAuthenticatedHttpClient().post(url.href, { course_key: courseId });
diff --git a/src/data/localStorage.js b/src/data/localStorage.js
new file mode 100644
index 00000000..ce3e38da
--- /dev/null
+++ b/src/data/localStorage.js
@@ -0,0 +1,51 @@
+// This file holds some convenience methods for dealing with localStorage.
+//
+// NOTE: These storage keys are not namespaced. That means that it's shared for the current fully
+// qualified domain. Namespacing could be added, but we'll cross that bridge when we need it.
+
+function getLocalStorage(key) {
+ try {
+ if (global.localStorage) {
+ const rawItem = global.localStorage.getItem(key);
+ if (rawItem) {
+ return JSON.parse(rawItem);
+ }
+ }
+ } catch (e) {
+ // If this fails for some reason, just return null.
+ }
+ return null;
+}
+
+function setLocalStorage(key, value) {
+ try {
+ if (global.localStorage) {
+ global.localStorage.setItem(key, JSON.stringify(value));
+ }
+ } catch (e) {
+ // If this fails, just bail.
+ }
+}
+
+function clearLocalStorage(key) {
+ try {
+ if (global.localStorage) {
+ global.localStorage.removeItem(key);
+ }
+ } catch (e) {
+ // If this fails, just bail.
+ }
+}
+
+function popLocalStorage(key) {
+ const value = getLocalStorage(key);
+ clearLocalStorage(key);
+ return value;
+}
+
+export {
+ clearLocalStorage,
+ getLocalStorage,
+ popLocalStorage,
+ setLocalStorage,
+};
diff --git a/src/index.jsx b/src/index.jsx
index 1eb6233d..7d6d68f2 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -69,6 +69,7 @@ initialize({
mergeConfig({
INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+ TWITTER_URL: process.env.TWITTER_URL || null,
}, 'LearnerAppConfig');
},
},
diff --git a/src/user-messages/UserMessagesProvider.jsx b/src/user-messages/UserMessagesProvider.jsx
index 3777dddb..d1d9eda0 100644
--- a/src/user-messages/UserMessagesProvider.jsx
+++ b/src/user-messages/UserMessagesProvider.jsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import UserMessagesContext from './UserMessagesContext';
+import { getLocalStorage, popLocalStorage, setLocalStorage } from '../data/localStorage';
export const ALERT_TYPES = {
ERROR: 'error',
@@ -10,50 +11,19 @@ export const ALERT_TYPES = {
INFO: 'info',
};
-// NOTE: This storage key is not namespaced. That means that it's shared for the current fully
-// qualified domain. Namespacing could be added by adding an optional prop to UserMessagesProvider
-// to set a namespace, but we'll cross that bridge when we need it.
const FLASH_MESSAGES_LOCAL_STORAGE_KEY = 'UserMessagesProvider.flashMessages';
-function getFlashMessages() {
- let flashMessages = [];
- try {
- if (global.localStorage) {
- const rawItem = global.localStorage.getItem(FLASH_MESSAGES_LOCAL_STORAGE_KEY);
- if (rawItem) {
- // Only try to parse and set flashMessages from the raw item if it exists.
- const parsed = JSON.parse(rawItem);
- if (Array.isArray(parsed)) {
- flashMessages = parsed;
- }
- }
- }
- } catch (e) {
- // If this fails for some reason, just return the empty array.
- }
- return flashMessages;
-}
-
function addFlashMessage(message) {
- try {
- if (global.localStorage) {
- const flashMessages = getFlashMessages();
- flashMessages.push(message);
- global.localStorage.setItem(FLASH_MESSAGES_LOCAL_STORAGE_KEY, JSON.stringify(flashMessages));
- }
- } catch (e) {
- // If this fails, just bail.
+ let flashMessages = getLocalStorage(FLASH_MESSAGES_LOCAL_STORAGE_KEY);
+ if (!flashMessages || !Array.isArray(flashMessages)) {
+ flashMessages = [];
}
+ flashMessages.push(message);
+ setLocalStorage(FLASH_MESSAGES_LOCAL_STORAGE_KEY, flashMessages);
}
-function clearFlashMessages() {
- try {
- if (global.localStorage) {
- global.localStorage.removeItem(FLASH_MESSAGES_LOCAL_STORAGE_KEY);
- }
- } catch (e) {
- // If this fails, just bail.
- }
+function popFlashMessages() {
+ return popLocalStorage(FLASH_MESSAGES_LOCAL_STORAGE_KEY) || [];
}
export default function UserMessagesProvider({ children }) {
@@ -103,12 +73,11 @@ export default function UserMessagesProvider({ children }) {
}
useEffect(() => {
- const flashMessages = getFlashMessages();
- flashMessages.forEach(flashMessage => add(flashMessage));
// We only allow flash messages to persist through one refresh, then we clear them out.
// If we want persistent messages, then add a 'persist' key to the messages and handle that
// as a separate local storage item.
- clearFlashMessages();
+ const flashMessages = popFlashMessages();
+ flashMessages.forEach(flashMessage => add(flashMessage));
}, []);
const value = {