Use amazon_link for BuyBook

src/app/content/components/BuyBook.spec.tsx

@@ -3,27 +3,34 @@ import renderer from 'react-test-renderer';
 import createTestStore from '../../../test/createTestStore';
 import TestContainer from '../../../test/TestContainer';
 import { Store } from '../../types';
+import { Book } from '../types';
 import BuyBook from './BuyBook';
 
 describe('BuyBook', () => {
   let store: Store;
+  const bookWithLink = {
+    amazon_link: 'https://amazon.com/some-book',
+  } as Book;
+  const bookWithoutLink = {
+    amazon_link: '',
+  } as Book;
 
   beforeEach(() => {
     store = createTestStore();
   });
 
-  it('renders', () => {
+  it('renders when book has amazon_link', () => {
     const component = renderer.create(<TestContainer store={store}>
-      <BuyBook />
+      <BuyBook book={bookWithLink } />
     </TestContainer>);
 
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('returns null', () => {
+  it('returns null when book lacks amazon_link', () => {
     const component = renderer.create(<TestContainer store={store}>
-      <BuyBook />
+      <BuyBook book={bookWithoutLink} />
     </TestContainer>);
 
     const tree = component.toJSON();

src/app/content/components/BuyBook.tsx

@@ -5,6 +5,7 @@ import { textRegularSize } from '../../components/Typography';
 import theme from '../../theme';
 import { contentTextWidth } from './constants';
 import { disablePrint } from './utils/disablePrint';
+import { Book, BookWithOSWebData } from '../types';
 
 // tslint:disable-next-line:variable-name
 const BuyBookAlignment = styled.div`
@@ -33,17 +34,17 @@ const BuyBookLink = styled.a`
 `;
 
 // tslint:disable-next-line: variable-name
-const BuyBook = () => {
-  const config = {
-    url: '*** placeholder ***',
-  };
+const BuyBook = ({book}: {book: Book}) => {
+  const bookWithOSwebData = book as BookWithOSWebData;
 
-return <BuyBookAlignment>
-    <div>*** Book link needs updated ***</div>
+  if (!bookWithOSwebData.amazon_link) {
+    return null;
+  }
+  return <BuyBookAlignment>
     <BuyBookLink
       target='_blank'
       rel='noopener'
-      href={config.url}
+      href={bookWithOSwebData.amazon_link}
       data-analytics-label='buy-book'
     >
       <FormattedMessage id='i18n:toolbar:buy-book:text'>

src/app/content/components/Content.tsx

@@ -7,6 +7,7 @@ import ErrorBoundary from '../../errors/components/ErrorBoundary';
 import Notifications from '../../notifications/components/Notifications';
 import theme from '../../theme';
 import { AppState } from '../../types';
+import { Book } from '../types';
 import HighlightsPopUp from '../highlights/components/HighlightsPopUp';
 import KeyboardShortcutsPopup from '../keyboardShortcuts/components/KeyboardShortcutsPopup';
 import PracticeQuestionsPopup from '../practiceQuestions/components/PracticeQuestionsPopup';
@@ -33,6 +34,7 @@ import PrevNextBar from './PrevNextBar';
 import Navigation from './Navigation';
 import Topbar from './Topbar';
 import Wrapper from './Wrapper';
+import { book } from '../selectors';
 
 // tslint:disable-next-line:variable-name
 const Background = styled.div`
@@ -69,7 +71,7 @@ const OuterWrapper = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-const Content = ({mobileExpanded}: {mobileExpanded: boolean}) => <Layout>
+const Content = ({mobileExpanded, book: bookInfo}: {mobileExpanded: boolean; book: Book; }) => <Layout>
   <ScrollOffset
     desktopOffset={
       bookBannerDesktopMiniHeight
@@ -99,7 +101,7 @@ const Content = ({mobileExpanded}: {mobileExpanded: boolean}) => <Layout>
             <Page>
               <PrevNextBar />
               <LabsCTA />
-              <BuyBook />
+              <BuyBook book={bookInfo} />
             </Page>
             <Attribution />
             <Footer />
@@ -113,5 +115,6 @@ const Content = ({mobileExpanded}: {mobileExpanded: boolean}) => <Layout>
 export default connect(
   (state: AppState) => ({
     mobileExpanded: mobileToolbarOpen(state),
+    book: book(state),
   })
 )(Content);

src/app/content/components/__snapshots__/BuyBook.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BuyBook renders 1`] = `
+exports[`BuyBook renders when book has amazon_link 1`] = `
 .c0 {
   width: 100%;
   display: -webkit-box;
@@ -49,13 +49,10 @@ exports[`BuyBook renders 1`] = `
 <div
   className="c0"
 >
-  <div>
-    *** Book link needs updated ***
-  </div>
   <a
     className="c1"
     data-analytics-label="buy-book"
-    href="*** placeholder ***"
+    href="https://amazon.com/some-book"
     rel="noopener"
     target="_blank"
   >
@@ -64,66 +61,4 @@ exports[`BuyBook renders 1`] = `
 </div>
 `;
 
-exports[`BuyBook returns null 1`] = `
-.c0 {
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 0 auto;
-  max-width: 82.5rem;
-  overflow: visible;
-}
-
-.c1 {
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  font-size: 1.6rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  height: 5rem;
-  width: 19rem;
-  color: #d4450c;
-  border: solid 0.1rem;
-  font-weight: 700;
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-<div
-  className="c0"
->
-  <div>
-    *** Book link needs updated ***
-  </div>
-  <a
-    className="c1"
-    data-analytics-label="buy-book"
-    href="*** placeholder ***"
-    rel="noopener"
-    target="_blank"
-  >
-    Order a print copy
-  </a>
-</div>
-`;
+exports[`BuyBook returns null when book lacks amazon_link 1`] = `null`;