WV-3154 Replace Social Tab with Citation Tab (#5346)

* Changed the social tab to the citation tab

* Changed citation to cite us & modified intro text

* Fixed test

config/default/common/config/wv.json/stories/default/worldview_intro.json

@@ -118,7 +118,7 @@
               },
               {
                 "target": "#wv-share-button",
-                "content": "Create a custom URL link of your Worldview page and share Worldview via social media with friends and colleagues!",
+                "content": "Create a custom URL link of your Worldview map view, access information about embedding Worldview, learn how to use imagery directly from GIBS, and remember to cite us!",
                 "placementBeacon": "bottom"
               },
               {

e2e/features/share/share-test.spec.js

@@ -29,12 +29,12 @@ test('Clicking the share link button opens the share dialog', async () => {
   await expect(shareToolbar).toBeVisible()
 })
 
-test('Share tabs link and social are visible and enabled', async () => {
+test('Share tabs link and cite us are visible and enabled', async () => {
   const linkShareNav = await page.locator('.link-share-nav')
-  const socialShareNav = await page.locator('.social-share-nav')
+  const citeUsShareNav = await page.locator('.cite-us-share-nav')
   const linkShareActive = await page.locator('.link-share-nav a')
   await expect(linkShareNav).toBeVisible()
-  await expect(socialShareNav).toBeVisible()
+  await expect(citeUsShareNav).toBeVisible()
   await expect(linkShareActive).toHaveClass(/active/)
 })
 
@@ -72,20 +72,6 @@ test('Share link clipboard with no time query string param in the page url will
   expect(shareLinkValue).toContain(`t=${year}-${monthText}-${dayText}`)
 })
 
-test('Clicking the social tab displays social share buttons', async () => {
-  const { shareToolbarButton } = selectors
-  const facebook = await page.locator('#fb-share')
-  const twitter = await page.locator('#tw-share')
-  const reddit = await page.locator('#rd-share')
-  const email = await page.locator('#email-share')
-  await shareToolbarButton.click()
-  await page.locator('.social-share-nav a').click()
-  await expect(facebook).toBeVisible()
-  await expect(twitter).toBeVisible()
-  await expect(reddit).toBeVisible()
-  await expect(email).toBeVisible()
-})
-
 test('Clicking Shorten link works with links less than 2049 characters', async () => {
   const { shareToolbarButton } = selectors
   const shortQueryString = 'http://localhost:3000/?l=Reference_Labels_15m,Reference_Features_15m,Coastlines_15m,VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=true&t=2022-08-10-T15%3A15%3A05Z'

web/js/containers/share.js

@@ -13,10 +13,9 @@ import {
   TabContent, TabPane,
 } from 'reactstrap';
 import googleTagManager from 'googleTagManager';
-import ShareLinks from '../components/toolbar/share/links';
 import ShareToolTips from '../components/toolbar/share/tooltips';
 import {
-  getPermalink, getShareLink, wrapWithIframe,
+  getPermalink, wrapWithIframe,
 } from '../modules/link/util';
 import onClickFeedback from '../modules/feedback/util';
 import initFeedback from '../modules/feedback/actions';
@@ -39,8 +38,8 @@ const getShortenRequestString = (mock, permalink) => {
   );
 };
 
-const DESKTOP_SHARE_TABS = ['link', 'embed', 'social'];
-const MOBILE_SHARE_TABS = ['link', 'social'];
+const DESKTOP_SHARE_TABS = ['link', 'embed', 'cite-us'];
+const MOBILE_SHARE_TABS = ['link', 'cite-us'];
 
 class ShareLinkContainer extends Component {
   constructor(props) {
@@ -142,34 +141,6 @@ class ShareLinkContainer extends Component {
     return getPermalink(queryString, selectedDate, isEmbed);
   };
 
-  onLinkClick = (type) => {
-    const permalink = this.getPermalink();
-    let shareLink = getShareLink(type, permalink);
-
-    googleTagManager.pushEvent({
-      event: 'share_social_platform',
-      social_type: type,
-    });
-
-    // If a short link can be generated, replace the full link.
-    if (type === 'twitter') {
-      const newTab = window.open('', '_blank');
-      this.getShortLink().then(({ link }) => {
-        shareLink = getShareLink(type, link);
-      }).finally(() => {
-        newTab.location = shareLink;
-      });
-    } else if (type === 'email') {
-      this.getShortLink().then(({ link }) => {
-        shareLink = getShareLink(type, link);
-      }).finally(() => {
-        window.location = shareLink;
-      });
-    } else {
-      window.open(shareLink, '_blank');
-    }
-  };
-
   setActiveTab = (activeTab) => {
     this.setState({ activeTab });
   };
@@ -242,6 +213,27 @@ class ShareLinkContainer extends Component {
     </InputGroup>
   );
 
+  renderTextareaGroup = (value, type) => (
+    <InputGroup>
+      <textarea
+        value={value}
+        name={`permalink-content-${type}`}
+        id={`permalink-content-${type}`}
+        className="form-control"
+        onChange={(e) => {
+          e.preventDefault();
+        }}
+      />
+      <Button
+        id={`copy-to-clipboard-button-${type}`}
+        onClick={() => this.copyToClipboard(value)}
+        onTouchEnd={() => this.copyToClipboard(value)}
+      >
+        COPY
+      </Button>
+    </InputGroup>
+  );
+
   renderLinkTab = () => {
     const { shortLink, urlShortening } = this.props;
     const {
@@ -318,23 +310,17 @@ class ShareLinkContainer extends Component {
     );
   };
 
-  renderSocialTab = () => {
-    const { isMobile } = this.props;
+  renderCiteUsTab = () => {
     const {
       activeTab,
     } = this.state;
+    const citeUsValue = 'We acknowledge the use of imagery from the NASA Worldview application (https://worldview.earthdata.nasa.gov), part of the NASA Earth Science Data and Information System (ESDIS).';
 
     return (
-      <TabPane tabId="social" className="share-tab-social">
-        {activeTab === 'social' && (
+      <TabPane tabId="cite-us" className="share-tab-cite-us">
+        {activeTab === 'cite-us' && (
           <>
-            <ShareLinks
-              isMobile={isMobile}
-              onClick={this.onLinkClick}
-            />
-            <p>
-              Share @NAME@ on social media.
-            </p>
+            {this.renderTextareaGroup(citeUsValue, 'cite-us')}
           </>
         )}
       </TabPane>
@@ -360,7 +346,7 @@ class ShareLinkContainer extends Component {
           <TabContent activeTab={activeTab}>
             {this.renderLinkTab()}
             {this.renderEmbedTab()}
-            {this.renderSocialTab()}
+            {this.renderCiteUsTab()}
           </TabContent>
         </div>
       </div>

web/js/modules/link/util.js

@@ -49,25 +49,6 @@ export function emailUrlParams(subject, body) {
   );
 }
 
-export function getShareLink(type, url) {
-  const shareMessage = 'Check out what I found in NASA @NAME@!';
-  const twMessage = 'Check out what I found in #NASAWorldview -';
-  const emailBody = `${shareMessage} - ${url}`;
-
-  switch (type) {
-    case 'twitter':
-      return twitterUrlParams(url, twMessage);
-    case 'facebook':
-      return facebookUrlParams('121285908450463', url, url, 'popup');
-    case 'reddit':
-      return redditUrlParams(url, shareMessage);
-    case 'email':
-      return emailUrlParams(shareMessage, emailBody);
-    default:
-      return undefined;
-  }
-}
-
 export function encode(value) {
   let encoded = encodeURIComponent(value);
   lodashEach(ENCODING_EXCEPTIONS, (exception) => {

web/scss/features/share.scss

@@ -1,50 +1,3 @@
-.social-share {
-  padding-top: 10px;
-  display: flexbox;
-  display: flex;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-}
-
-.social-share .icon-link {
-  background-color: #000;
-  border-radius: 50%;
-  color: #fff;
-  display: inline-block;
-  height: 48px;
-  line-height: 48px;
-  width: 48px;
-  font-size: 26px;
-  text-align: center;
-  cursor: pointer;
-  text-decoration: none;
-  border: 2px solid transparent;
-
-  &:hover {
-    border: 2px solid #fff;
-  }
-
-  & svg.svg-inline--fa {
-    margin-bottom: 2px;
-  }
-}
-
-.social-share .social-icon-container-facebook {
-  background-color: #3b5998;
-}
-
-.social-share .social-icon-container-twitter {
-  background-color: #00aced;
-}
-
-.social-share .social-icon-container-reddit-alien {
-  background-color: #ff5700;
-}
-
-.social-share .social-icon-container-email {
-  background-color: #505050;
-}
-
 .share-body {
   height: 108px;
 }
@@ -70,7 +23,12 @@
     }
   }
 
-  .share-tab-social {
+  .share-tab-cite-us {
+    textarea {
+      resize: none;
+      height: 70px;
+    }
+
     p {
       padding: 10px 1px;
     }