WV-2782: Reimplement embed mode and associated documentation (#4589)

* reimplement embed tab // open feedback module on link click // recover embed doc * cleanup share.js * update feedback link style * fix clicking on feedback twice * fix contact us positioning * remove console log
nasa-gibs · Aug 22, 2023 · 0d073c1 · 0d073c1
1 parent 8ede228
commit 0d073c1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/web/js/containers/share.js b/web/js/containers/share.js
@@ -18,6 +18,8 @@ import ShareToolTips from '../components/toolbar/share/tooltips';
 import {
   getPermalink, getShareLink, wrapWithIframe,
 } from '../modules/link/util';
+import onClickFeedback from '../modules/feedback/util';
+import initFeedback from '../modules/feedback/actions';
 import { getSelectedDate } from '../modules/date/selectors';
 import Checkbox from '../components/util/checkbox';
 import HoverTooltip from '../components/util/hover-tooltip';
@@ -37,7 +39,7 @@ const getShortenRequestString = (mock, permalink) => {
   );
 };
 
-const SOCIAL_SHARE_TABS = ['link', 'social'];
+const SOCIAL_SHARE_TABS = ['link', 'embed', 'social'];
 
 class ShareLinkContainer extends Component {
   constructor(props) {
@@ -163,6 +165,16 @@ class ShareLinkContainer extends Component {
     this.setState({ activeTab });
   };
 
+  openFeedback = () => {
+    const {
+      isMobile,
+      feedbackIsInitiated,
+      feedbackEnabled,
+      sendFeedback,
+    } = this.props;
+    if (feedbackEnabled) sendFeedback(feedbackIsInitiated, isMobile);
+  };
+
   renderNavTabs = () => {
     const { embedDisableNavLink, isMobile } = this.props;
     const { activeTab } = this.state;
@@ -277,11 +289,11 @@ class ShareLinkContainer extends Component {
           <>
             {this.renderInputGroup(embedIframeHTMLCode, 'embed')}
             <p>
-              Embed @NAME@ in your website. See our
+              Please
               {' '}
-              <a id="share-embed-doc-link" className="share-embed-doc-link" href="https://github.com/nasa-gibs/worldview/blob/main/doc/embed.md" target="_blank" rel="noopener noreferrer">documentation</a>
+              <a onClick={this.openFeedback} id="feedback-url">contact us</a>
               {' '}
-              for a guide.
+              to enable Worldview embedding on your website.
             </p>
           </>
         )}
@@ -330,7 +342,7 @@ class ShareLinkContainer extends Component {
           {this.renderNavTabs()}
           <TabContent activeTab={activeTab}>
             {this.renderLinkTab()}
-            {/* {this.renderEmbedTab()} */}
+            {this.renderEmbedTab()}
             {this.renderSocialTab()}
           </TabContent>
         </div>
@@ -341,14 +353,17 @@ class ShareLinkContainer extends Component {
 
 function mapStateToProps(state) {
   const {
-    screenSize, config, shortLink, sidebar, tour,
+    screenSize, config, shortLink, sidebar, tour, feedback,
   } = state;
 
   const { features: { urlShortening } } = config;
   const isMobile = screenSize.isMobileDevice;
   const embedDisableNavLink = sidebar.activeTab === 'download' || tour.active;
+  const { features: { feedback: feedbackEnabled } } = config;
 
   return {
+    feedbackEnabled,
+    feedbackIsInitiated: feedback.isInitiated,
     urlShortening,
     embedDisableNavLink,
     isMobile,
@@ -364,6 +379,12 @@ const mapDispatchToProps = (dispatch) => ({
   requestShortLinkAction: (location, options) => dispatch(
     requestShortLink(location, 'application/json', null, options),
   ),
+  sendFeedback: (isInitiated, isMobile) => {
+    onClickFeedback(isInitiated, isMobile);
+    if (!isInitiated) {
+      dispatch(initFeedback());
+    }
+  },
 });
 
 export default connect(
@@ -373,10 +394,13 @@ export default connect(
 
 ShareLinkContainer.propTypes = {
   embedDisableNavLink: PropTypes.bool,
+  feedbackIsInitiated: PropTypes.bool,
+  feedbackEnabled: PropTypes.bool,
   isMobile: PropTypes.bool,
   mock: PropTypes.string,
   requestShortLinkAction: PropTypes.func,
   selectedDate: PropTypes.object,
+  sendFeedback: PropTypes.func,
   shortLink: PropTypes.object,
   urlShortening: PropTypes.bool,
 };
diff --git a/web/scss/features/share.scss b/web/scss/features/share.scss
@@ -107,3 +107,14 @@
     bottom: 14px;
   }
 }
+
+#feedback-url {
+  cursor: pointer;
+  text-decoration: none;
+  color: #7bf;
+}
+
+#feedback-url:hover {
+  text-decoration: underline;
+  color: #7bf !important;
+}