feat(Connections Panel): add a modal advertising google docs extension

Sefaria · Mar 17, 2024 · 6c07000 · 6c07000
1 parent 1c11279
commit 6c07000
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -1765,6 +1765,50 @@ div.interfaceLinks-row a {
 .singlePanel .recentlyViewed #history span {
   color: var(--medium-grey);
 }
+
+.gDocAdvertBox {
+  margin-top: 50px;
+  background: #EDEDEC;
+  padding: 20px;
+  border-radius: 6px;
+}
+.gDocAdvertBox span  {
+  font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+  color: #666666;
+}
+.gDocAdvertBox span #newExtension {
+  font-weight: 600;
+}
+.gDocAdvertBox #installNow {
+  margin-top: 18px;
+  width: 99px;
+  height: 30px;
+  border-radius: 6px;
+}
+.gDocAdvertBox #installNow a {
+  text-align: center;
+  background: #FFFFFF;
+  color: #666666;
+  text-decoration: none;
+  padding: 4px;
+  font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+}
+.gDocAdvertBox a {
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+  text-decoration: underline;
+}
 .readerPanel .navSidebarModule h3,
 .readerPanel .navSidebarModule h1,
 .readerPanel .bookPage h3{

diff --git a/static/js/AddToSourceSheet.jsx b/static/js/AddToSourceSheet.jsx
@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import Component from 'react-class';
 import sanitizeHtml  from 'sanitize-html';
 import { SignUpModalKind } from './sefaria/signupModalContent';
+import { GDocAdvertBox, GDocAdvertBanner } from './TextColumnBanner';
+
 
 
 class AddToSourceSheetBox extends Component {
@@ -244,6 +246,7 @@ class AddToSourceSheetBox extends Component {
           <span className="int-en noselect">Add to Sheet</span>
           <span className="int-he noselect">הוספה לדף המקורות</span>
         </div>
+        <GDocAdvertBox/>
       </div>);
   }
 }

diff --git a/static/js/TextColumnBanner.jsx b/static/js/TextColumnBanner.jsx
@@ -114,26 +114,41 @@ const OpenTransBanner = ({ openTranslations }) => {
  * @returns {JSX.Element}
  * @constructor
  */
+
+const GDocAdvertText = () => {
+    return    <InterfaceText>
+                <EnglishText> Add texts directly to your Google Docs with our <span id="newExtension">new extension</span>! <a href="https://www.sefaria.org/sheets/529099">Learn more</a></EnglishText>
+                <HebrewText> הוסיפו טקסטים מספריא ישירות לקובץ עם <span id="newExtension">התוסף החדש</span> שלנו! <a href="https://www.sefaria.org/sheets/529099">למדו עוד</a></HebrewText>
+             </InterfaceText>;
+}
+const GDocInstallLink = 'https://workspace.google.com/marketplace/app/sefaria/849562338091';
+export const GDocAdvertBox = () => {
+    const handleInstall = () => {
+        // set cookie and google analytics
+    }
+    return !cookie("gdoc_installed") &&
+            <div className="gDocAdvertBox">
+                <GDocAdvertText/>
+                <div id="installNow"><a href={GDocInstallLink} onClick={handleInstall}>Install Now</a></div>
+            </div>;
+}
+
 export const GDocAdvertBanner = () => {
     const buttons = [{
         text: "Install Now",
-        onClick: () => { window.location.href = 'https://workspace.google.com/marketplace/app/sefaria/849562338091'; },
+        onClick: () => { window.location.href = GDocInstallLink; },
         sideEffect: "close",
     }];
     const onClose = () => {
         cookie("gdoc_advert_banner_shown", JSON.stringify(1), {path: "/"});
     };
 
 
-
     return (
       !cookie("gdoc_advert_banner_shown") && document.location.href.includes('/sheets/') ?
       <div className="gDocAdvertBanner">
         <TextColumnBanner buttons={buttons} onClose={onClose}>
-            <InterfaceText>
-                <EnglishText> Add texts directly to your Google Docs with our new extension! <a href="https://www.sefaria.org/sheets/529099">Learn more</a></EnglishText>
-                <HebrewText> הוסיפו טקסטים מספריא ישירות לקובץ עם התוסף החדש שלנו! <a href="https://www.sefaria.org/sheets/529099">למדו עוד</a></HebrewText>
-            </InterfaceText>
+            <GDocAdvertText/>
         </TextColumnBanner>
       </div> : null
     );