WIP: configurable social links

components/contribution-flow/ContributionFlowSuccess.js

@@ -5,14 +5,14 @@
 import { Mastodon } from '@styled-icons/fa-brands/Mastodon';
 import { Twitter } from '@styled-icons/fa-brands/Twitter';
 import { themeGet } from '@styled-system/theme-get';
-import { get } from 'lodash';
+import { get, uniqBy } from 'lodash';
 import { withRouter } from 'next/router';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import styled from 'styled-components';
 
 import { AnalyticsEvent } from '../../lib/analytics/events';
 import { track } from '../../lib/analytics/plausible';
 import { getTwitterHandleFromCollective } from '../../lib/collective';
 import { getIntervalFromGQLV2Frequency } from '../../lib/constants/intervals';
 import { ORDER_STATUS } from '../../lib/constants/order-status';
 import { formatCurrency } from '../../lib/currency-utils';
@@ -20,13 +20,15 @@
 import { formatManualInstructions } from '../../lib/payment-method-utils';
 import { getStripe } from '../../lib/stripe';
 import {
+  blueSkyShareURL,
   facebookShareURL,
   followOrderRedirectUrl,
   getCollectivePageRoute,
   mastodonShareURL,
   tweetURL,
 } from '../../lib/url-helpers';
 import { getWebsiteUrl } from '../../lib/utils';
+import { SocialLinkType } from '@/lib/graphql/types/v2/schema';
 
 import Container from '../../components/Container';
 import { Box, Flex } from '../../components/Grid';
@@ -115,6 +117,54 @@
   );
 };
 
+/**
+ * @returns {object}
+ *  - url: A URL to share in the tweet
+ *  - icon: A React component to display the icon
+ */
+const getShareProperties = (service, url, text) => {
+  switch (service) {
+    case SocialLinkType.TWITTER:
+      return {
+        name: 'Twitter',
+        icon: <Twitter size="1.2em" color="#4E5052" />,
+        url: tweetURL({ url, text }),
+      };
+    case SocialLinkType.FACEBOOK:
+      return {
+        name: 'Facebook',
+        icon: <Facebook size="1.2em" color="#4E5052" />,
+        url: facebookShareURL({ u: url }),
+      };
+    case SocialLinkType.MASTODON:
+      return {
+        name: 'Mastodon',
+        icon: <Mastodon size="1.2em" color="#4E5052" />,
+        url: mastodonShareURL({ text: `${text} ${url}` }),
+      };
+    case SocialLinkType.BLUESKY:
+      return {
+        name: 'Bluesky',
+        icon: <Bluesky size="1.2em" color="#4E5052" />,
+        url: blueSkyShareURL({ text: `${text} ${url}` }),
+      };
+    default:
+      return null;
+  }
+};
+
+const getSocialLinksForAccount = (account, shareURL, shareSuccessMessage) => {
+  const allSocialLinks = [...(account?.socialLinks || []), ...(account?.parent?.socialLinks || [])];
+  if (isAccountFediverse(account) || isAccountFediverse(account?.parent)) {
+    allSocialLinks.push({ type: SocialLinkType.MASTODON });
+  }
+
+  const uniqueSocialLinks = uniqBy(allSocialLinks, 'type');
+  return uniqueSocialLinks
+    .map(socialLink => getShareProperties(socialLink.type, shareURL, shareSuccessMessage))
+    .filter(Boolean);
+};
+
 const getMainTag = collective => {
   if (collective.host?.slug === 'opensource' || collective.tags?.includes('open source')) {
     return 'open source';
@@ -128,7 +178,6 @@
     collective: PropTypes.object,
     LoggedInUser: PropTypes.object,
     intl: PropTypes.object,
-    loadingLoggedInUser: PropTypes.bool,
     router: PropTypes.object,
     isEmbed: PropTypes.bool,
     data: PropTypes.object,
@@ -321,7 +370,6 @@
     const { order } = data;
     const shareURL = `${getWebsiteUrl()}/${collective.slug}`;
     const isProcessing = order?.status === ORDER_STATUS.PROCESSING;
-    const isFediverse = order && (isAccountFediverse(order.toAccount) || isAccountFediverse(order.toAccount.parent));
 
     const loading = data.loading || !this.state?.loaded;
 
@@ -335,7 +383,13 @@
       );
     }
 
-    const toAccountTwitterHandle = getTwitterHandleFromCollective(order?.toAccount);
+    const shareSuccessMessage = intl.formatMessage(
+      order.toAccount.type === 'EVENT' ? successMsgs.event : successMsgs.default,
+      { collective: order.toAccount.name, event: order.toAccount.name },
+    );
+
+    // Only enable share links for social networks that are connected by the collective
+    const shareLinks = getSocialLinksForAccount(order.toAccount, shareURL, shareSuccessMessage);
     return (
       <React.Fragment>
         {!isEmbed && isProcessing && (
@@ -434,45 +488,17 @@
                     </Box>
                   )}
                   <Flex justifyContent="center" mt={3}>
-                    <ShareLink
-                      href={tweetURL({
-                        url: shareURL,
-                        text: intl.formatMessage(
-                          order.toAccount.type === 'EVENT' ? successMsgs.event : successMsgs.default,
-                          {
-                            collective: toAccountTwitterHandle ? `@${toAccountTwitterHandle}` : order.toAccount.name,
-                            event: order.toAccount.name,
-                          },
-                        ),
-                      })}
-                    >
-                      <Twitter size="1.2em" color="#4E5052" />
-                      <FormattedMessage id="tweetIt" defaultMessage="Tweet it" />
-                    </ShareLink>
-                    {!isFediverse && (
-                      <ShareLink href={facebookShareURL({ u: shareURL })}>
-                        <Facebook size="1.2em" color="#4E5052" />
-                        <FormattedMessage id="shareIt" defaultMessage="Share it" />
-                      </ShareLink>
-                    )}
-                    {isFediverse && (
-                      <ShareLink
-                        href={mastodonShareURL({
-                          text:
-                            // eslint-disable-next-line prefer-template
-                            intl.formatMessage(
-                              order.toAccount.type === 'EVENT' ? successMsgs.event : successMsgs.default,
-                              {
-                                collective: order.toAccount.name,
-                                event: order.toAccount.name,
-                              },
-                            ) + ` ${shareURL}`,
-                        })}
-                      >
-                        <Mastodon size="1.2em" color="#4E5052" />
-                        <FormattedMessage id="shareOnMastodon" defaultMessage="Share on Mastodon" />
-                      </ShareLink>
-                    )}
+                    {shareLinks.length > 0 &&
+                      shareLinks.map(shareLink => (
+                        <ShareLink key={shareLink.url} href={shareLink.url}>
+                          {shareLink.icon}
+                          <FormattedMessage
+                            defaultMessage="Share on {serviceName}"
+                            id="45jyHl"
+                            values={{ serviceName: shareLink.name }}
+                          />
+                        </ShareLink>
+                      ))}
                   </Flex>
                   {LoggedInUser && (
                     <Box px={1}>

lib/url-helpers.ts

@@ -100,6 +100,14 @@ export const facebookShareURL = opts => {
   return `https://www.facebook.com/sharer/sharer.php${objectToQueryString(opts)}`;
 };
 
+/**
+ * @param opts {object} With the following attributes:
+ *  - text: The message to share
+ */
+export const blueSkyShareURL = opts => {
+  return `https://bsky.app/intent/compose?${objectToQueryString(opts)}`;
+};
+
 /**
  * @param opts {object} With the following attributes:
  *  - url: The URL of the page that you wish to share.