feat: add Facebook share button to allow users to share workshop prog… (#66610)

Co-authored-by: Venkat <venkat@Venkats-MacBook-Pro.local>

client/i18n/locales/english/translations.json

@@ -116,6 +116,7 @@
     "share-on-x": "Share on X",
     "share-on-bluesky": "Share on BlueSky",
     "share-on-threads": "Share on Threads",
+    "share-on-facebook": "Share on Facebook",
     "play-scene": "Press Play",
     "download-latest-version": "Download the Latest Version",
     "more-ways-to-sign-in": "More ways to sign in",
@@ -442,6 +443,7 @@
     "edit-my-profile": "Edit My Profile",
     "add-bluesky": "Share this certification on BlueSky",
     "add-threads": "Share this certification on Threads",
+    "add-facebook": "Share this certification on Facebook",
     "experience": {
       "heading": "Experience",
       "share-experience": "Share your professional experience",

client/src/components/share/index.tsx

@@ -18,6 +18,7 @@ export const Share = ({
       xRedirectURL={redirectURLs.xUrl}
       blueSkyRedirectURL={redirectURLs.blueSkyUrl}
       threadsRedirectURL={redirectURLs.threadsURL}
+      facebookRedirectURL={redirectURLs.facebookUrl}
       minified={minified}
     />
   );

client/src/components/share/share-template.test.tsx

@@ -11,6 +11,7 @@ describe('Share Template Testing', () => {
       xRedirectURL={redirectURL}
       blueSkyRedirectURL={redirectURL}
       threadsRedirectURL={redirectURL}
+      facebookRedirectURL={redirectURL}
     />
   );
   test('Testing share template Click Redirect Event', () => {
@@ -34,5 +35,12 @@ describe('Share Template Testing', () => {
 
     expect(threadsLink).toBeInTheDocument();
     expect(threadsLink).toHaveAttribute('href', 'string');
+
+    const facebookLink = screen.queryByRole('link', {
+      name: 'buttons.share-on-facebook aria.opens-new-window'
+    });
+
+    expect(facebookLink).toBeInTheDocument();
+    expect(facebookLink).toHaveAttribute('href', 'string');
   });
 });

client/src/components/share/share-template.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import {
   faXTwitter,
   faBluesky,
-  faInstagram
+  faInstagram,
+  faFacebook
 } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ShareRedirectProps } from './types';
@@ -12,6 +13,7 @@ export const ShareTemplate: React.ComponentType<ShareRedirectProps> = ({
   xRedirectURL,
   blueSkyRedirectURL,
   threadsRedirectURL,
+  facebookRedirectURL,
   minified
 }) => {
   const { t } = useTranslation();
@@ -50,6 +52,17 @@ export const ShareTemplate: React.ComponentType<ShareRedirectProps> = ({
         {!minified && t('buttons.share-on-threads')}
         <span className='sr-only'>{t('aria.opens-new-window')}</span>
       </a>
+      <a
+        data-testid='share-on-facebook'
+        className='btn fade-in'
+        href={facebookRedirectURL}
+        target='_blank'
+        rel='noreferrer'
+      >
+        <FontAwesomeIcon icon={faFacebook} size='1x' aria-hidden='true' />
+        {!minified && t('buttons.share-on-facebook')}
+        <span className='sr-only'>{t('aria.opens-new-window')}</span>
+      </a>
     </>
   );
 };

client/src/components/share/types.ts

@@ -8,5 +8,6 @@ export interface ShareRedirectProps {
   xRedirectURL: string;
   blueSkyRedirectURL: string;
   threadsRedirectURL: string;
+  facebookRedirectURL: string;
   minified?: boolean;
 }

client/src/components/share/use-share.test.tsx

@@ -43,5 +43,9 @@ describe('useShare', () => {
     expect(shareResult.current.threadsURL).toBe(
       `https://${threadsData.domain}/${threadsData.action}?original_referer=${threadsData.developerDomainURL}&text=${tweetMessage}${nextLine}&url=${redirectFreeCodeCampLearnURL}`
     );
+
+    expect(shareResult.current.facebookUrl).toBe(
+      `https://www.facebook.com/sharer/sharer.php?u=${redirectFreeCodeCampLearnURL}&hashtag=${hastag}freecodecamp`
+    );
   });
 });

client/src/components/share/use-share.tsx

@@ -24,10 +24,16 @@ export const threadsData = {
   developerDomainURL: 'https://developers.facebook.com'
 };
 
+export const facebookData = {
+  action: 'sharer/sharer.php',
+  domain: 'www.facebook.com'
+};
+
 interface ShareUrls {
   xUrl: string;
   blueSkyUrl: string;
   threadsURL: string;
+  facebookUrl: string;
 }
 
 export const useShare = ({ superBlock, block }: ShareProps): ShareUrls => {
@@ -43,9 +49,12 @@ export const useShare = ({ superBlock, block }: ShareProps): ShareUrls => {
 
   const threadRedirectURL = `https://${threadsData.domain}/${threadsData.action}?original_referer=${threadsData.developerDomainURL}&text=${tweetMessage}${nextLine}&url=${redirectFreeCodeCampLearnURL}`;
 
+  const facebookRedirectURL = `https://${facebookData.domain}/${facebookData.action}?u=${redirectFreeCodeCampLearnURL}&hashtag=${hastag}freecodecamp`;
+
   return {
     xUrl: xRedirectURL,
     blueSkyUrl: blueSkyRedirectURL,
-    threadsURL: threadRedirectURL
+    threadsURL: threadRedirectURL,
+    facebookUrl: facebookRedirectURL
   };
 };