chore: install react share and implement social share demo

package-lock.json

@@ -35,7 +35,7 @@
         "react-redux": "7.2.9",
         "react-router": "5.2.1",
         "react-router-dom": "5.3.0",
-        "react-share": "4.4.1",
+        "react-share": "^4.4.1",
         "redux": "4.1.2",
         "regenerator-runtime": "0.13.11",
         "reselect": "4.1.7",

package.json

@@ -55,7 +55,7 @@
     "react-redux": "7.2.9",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
-    "react-share": "4.4.1",
+    "react-share": "^4.4.1",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.11",
     "reselect": "4.1.7",

src/courseware/course/sequence/Unit.jsx

@@ -15,6 +15,7 @@ import { useModel } from '../../../generic/model-store';
 import PageLoading from '../../../generic/PageLoading';
 import { fetchCourse } from '../../data';
 import BookmarkButton from '../bookmark/BookmarkButton';
+import ShareButton from '../share/ShareButton';
 import messages from './messages';
 
 const HonorCode = React.lazy(() => import('./honor-code'));
@@ -152,6 +153,8 @@ function Unit({
         isBookmarked={unit.bookmarked}
         isProcessing={unit.bookmarkedUpdateState === 'loading'}
       />
+      {/* TODO: social share exp. Need to remove later */}
+      {window.expSocialShareEnabled && <ShareButton url={window.expSocialShareAboutUrl} />}
       { !mmp2p.state.isEnabled && contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
         <Suspense
           fallback={(

src/courseware/course/share/ShareButton.jsx

@@ -0,0 +1,39 @@
+import { PropTypes } from 'prop-types';
+import { Icon } from '@edx/paragon';
+import { Share } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { TwitterShareButton } from 'react-share';
+
+import { stringifyUrl } from 'query-string';
+
+import messages from './messages';
+
+function ShareButton({ url }) {
+  const { formatMessage } = useIntl();
+
+  const twitterUrl = stringifyUrl({
+    url,
+    query: {
+      utm_source: 'twitter',
+      utm_medium: 'social',
+      utm_campaign: 'social-share-exp',
+    },
+  });
+
+  return (
+    <TwitterShareButton
+      url={twitterUrl}
+      resetButtonStyle={false}
+      className="px-1 ml-n1 btn-sm text-primary-500 btn btn-link"
+    >
+      <Icon src={Share} />
+      {formatMessage(messages.shareButton)}
+    </TwitterShareButton>
+  );
+}
+
+ShareButton.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+
+export default ShareButton;

src/courseware/course/share/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  shareButton: {
+    id: 'learn.sequence.share.button',
+    defaultMessage: 'Share this content',
+    description: 'share message button message',
+  },
+  shareModalTitle: {
+    id: 'learn.sequence.share.modal.title',
+    defaultMessage: 'Title',
+    description: 'share message modal title',
+  },
+  shareModalBody: {
+    id: 'learn.sequence.share.modal.body',
+    defaultMessage: 'Copy the link below to share this content.',
+    description: 'share message modal body',
+  },
+});
+
+export default messages;