From 03e42f45bb0e54b33ac69b779f8c2adcaa375783 Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Fri, 9 Dec 2022 13:34:18 -0500
Subject: [PATCH] chore: add facebook button back

---
 .../__snapshots__/index.test.jsx.snap         | 22 ++++++++++--
 .../components/CourseCardMenu/index.jsx       | 36 ++++++++++---------
 .../components/CourseCardMenu/index.test.jsx  | 13 +++----
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap
index 44fe18c..7ef6a6c 100644
--- a/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap
@@ -26,9 +26,18 @@ exports[`CourseCardMenu enrolled, share enabled, email setting enable snapshot 1
       >
         Email settings
       </Dropdown.Item>
+      <Dropdown.Item>
+        <FacebookShareButton
+          onClick={[MockFunction facebookShareClick]}
+          quote="I'm taking test-course-name online with facebook-social-brand.  Check it out!"
+          url="facebook-share-url"
+        >
+          Share to Facebook
+        </FacebookShareButton>
+      </Dropdown.Item>
       <TwitterShareButton
         className="pgn__dropdown-item dropdown-item"
-        onClick={[MockFunction handleTwitterShare]}
+        onClick={[MockFunction twitterShareClick]}
         resetButtonStyle={false}
         title="I'm taking test-course-name online with twitter-social-brand.  Check it out!"
         url="twitter-share-url"
@@ -76,9 +85,18 @@ exports[`CourseCardMenu masquerading snapshot 1`] = `
       >
         Email settings
       </Dropdown.Item>
+      <Dropdown.Item>
+        <FacebookShareButton
+          onClick={[MockFunction facebookShareClick]}
+          quote="I'm taking test-course-name online with facebook-social-brand.  Check it out!"
+          url="facebook-share-url"
+        >
+          Share to Facebook
+        </FacebookShareButton>
+      </Dropdown.Item>
       <TwitterShareButton
         className="pgn__dropdown-item dropdown-item"
-        onClick={[MockFunction handleTwitterShare]}
+        onClick={[MockFunction twitterShareClick]}
         resetButtonStyle={false}
         title="I'm taking test-course-name online with twitter-social-brand.  Check it out!"
         url="twitter-share-url"
diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.jsx
index 87bd4d9..5386311 100644
--- a/src/containers/CourseCard/components/CourseCardMenu/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/index.jsx
@@ -23,13 +23,18 @@ export const CourseCardMenu = ({ cardId }) => {
 
   const { courseName } = appHooks.useCardCourseData(cardId);
   const { isEnrolled, isEmailEnabled } = appHooks.useCardEnrollmentData(cardId);
-  const { twitter } = appHooks.useCardSocialSettingsData(cardId);
+  const { twitter, facebook } = appHooks.useCardSocialSettingsData(cardId);
   const { isMasquerading } = appHooks.useMasqueradeData();
   const handleTwitterShare = appHooks.useTrackCourseEvent(
     track.socialShare,
     cardId,
     'twitter',
   );
+  const handleFacebookShare = appHooks.useTrackCourseEvent(
+    track.socialShare,
+    cardId,
+    'facebook',
+  );
 
   const emailSettingsModal = useEmailSettings();
   const unenrollModal = useUnenrollData();
@@ -65,21 +70,20 @@ export const CourseCardMenu = ({ cardId }) => {
               {formatMessage(messages.emailSettings)}
             </Dropdown.Item>
           )}
-          {/* Disabled pending PM decision on missing quote param in updated FB api.
-            {facebook.isEnabled && (
-              <Dropdown.Item>
-                <ReactShare.FacebookShareButton
-                  url={facebook.shareUrl}
-                  quote={formatMessage(messages.shareQuote, {
-                    courseName,
-                    socialBrand: facebook.socialBrand,
-                  })}
-                >
-                  {formatMessage(messages.shareToFacebook)}
-                </ReactShare.FacebookShareButton>
-              </Dropdown.Item>
-            )}
-          */}
+          {facebook.isEnabled && (
+            <Dropdown.Item>
+              <ReactShare.FacebookShareButton
+                url={facebook.shareUrl}
+                onClick={handleFacebookShare}
+                quote={formatMessage(messages.shareQuote, {
+                  courseName,
+                  socialBrand: facebook.socialBrand,
+                })}
+              >
+                {formatMessage(messages.shareToFacebook)}
+              </ReactShare.FacebookShareButton>
+            </Dropdown.Item>
+          )}
           {twitter.isEnabled && (
             <ReactShare.TwitterShareButton
               url={twitter.shareUrl}
diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx
index 5dbd34a..bf63756 100644
--- a/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx
@@ -14,7 +14,7 @@ jest.mock('data/redux', () => ({
     useCardEnrollmentData: jest.fn(),
     useCardSocialSettingsData: jest.fn(),
     useMasqueradeData: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
+    useTrackCourseEvent: (_, __, site) => jest.fn().mockName(`${site}ShareClick`),
   },
 }));
 jest.mock('./hooks', () => ({
@@ -60,7 +60,6 @@ describe('CourseCardMenu', () => {
     appHooks.useCardCourseData.mockReturnValue({ courseName });
     appHooks.useCardEnrollmentData.mockReturnValue({ isEnrolled: true, isEmailEnabled: true });
     appHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
-    appHooks.useTrackCourseEvent.mockReturnValue(jest.fn().mockName('handleTwitterShare'));
   });
   describe('enrolled, share enabled, email setting enable', () => {
     beforeEach(() => {
@@ -70,7 +69,9 @@ describe('CourseCardMenu', () => {
       expect(wrapper).toMatchSnapshot();
     });
     it('renders share buttons', () => {
-      // expect(wrapper.find('FacebookShareButton').length).toEqual(1);
+      el = wrapper.find('FacebookShareButton');
+      expect(el.length).toEqual(1);
+      expect(el.prop('url')).toEqual('facebook-share-url');
       el = wrapper.find('TwitterShareButton');
       expect(el.length).toEqual(1);
       expect(el.prop('url')).toEqual('twitter-share-url');
@@ -93,7 +94,7 @@ describe('CourseCardMenu', () => {
       appHooks.useCardSocialSettingsData.mockReturnValueOnce({
         ...defaultSocialShare,
         twitter: { ...defaultSocialShare.twitter, isEnabled: false },
-        // facebook: { ...defaultSocialShare.facebook, isEnabled: false },
+        facebook: { ...defaultSocialShare.facebook, isEnabled: false },
       });
       appHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false, isEmailEnabled: false });
       wrapper = shallow(<CourseCardMenu {...props} />);
@@ -102,7 +103,7 @@ describe('CourseCardMenu', () => {
       expect(wrapper).toMatchSnapshot();
     });
     it('does not renders share buttons', () => {
-      // expect(wrapper.find('FacebookShareButton').length).toEqual(0);
+      expect(wrapper.find('FacebookShareButton').length).toEqual(0);
       expect(wrapper.find('TwitterShareButton').length).toEqual(0);
     });
     it('does not render unenroll modal toggle', () => {
@@ -123,7 +124,7 @@ describe('CourseCardMenu', () => {
       expect(wrapper).toMatchSnapshot();
     });
     it('renders share buttons', () => {
-      // expect(wrapper.find('FacebookShareButton').length).toEqual(1);
+      expect(wrapper.find('FacebookShareButton').length).toEqual(1);
       el = wrapper.find('TwitterShareButton');
       expect(el.length).toEqual(1);
       expect(el.prop('url')).toEqual('twitter-share-url');