feat: Add a banner in the editors (to tell sheet authors about our GD…

…ocs extension)
Sefaria · Mar 13, 2024 · 1ffcc03 · 1ffcc03
1 parent 3612a12
commit 1ffcc03
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -758,7 +758,7 @@ div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
   margin-inline-start: 23px;
   margin-top: 3px;
 }
-.loggedIn .help { 
+.loggedIn .help {
   margin-inline-start: 17px;
 }
 .loggedIn .help img {
@@ -2332,7 +2332,7 @@ div.interfaceLinks-row a {
 }
 .imageWithCaptionPhoto{
   border: 1px solid #EDEDEC;
-  max-width: 100%; 
+  max-width: 100%;
   height: auto;
   padding: 0 44;
   top: 121px;
@@ -2377,7 +2377,7 @@ div.interfaceLinks-row a {
   .topicImage{
     padding-left: 0;
     padding-right: 0;
-    margin-top: 30px;  
+    margin-top: 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -5505,8 +5505,8 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
 .segment.enOnly .en{
   display: initial;
 }
-/* 
-This is an attempt to fix dictionary entries in this layout (hebrew continuous) from having the headwords flip to the right instead of left. 
+/*
+This is an attempt to fix dictionary entries in this layout (hebrew continuous) from having the headwords flip to the right instead of left.
 But not to use a display block directive that might break continuous mode for other English only texts
  */
 .readerPanel.hebrew.continuous .segment.enOnly .en{
@@ -8668,6 +8668,13 @@ h3.aboutSheetHeader {
   color: var(--dark-grey);
 }
 
+.gDocAdvertBanner {
+  top: 60px;
+  position: absolute;
+  width: 100%;
+  z-index: 101;
+}
+
 .aboutSheetPanel hr {
   height: 0px;
   border: 1px solid var(--light-grey);

diff --git a/static/js/Header.jsx b/static/js/Header.jsx
@@ -14,7 +14,7 @@ import {
   LanguageToggleButton,
   DonateLink
 } from './Misc';
-
+import { GDocAdvertBanner } from './TextColumnBanner';
 
 class Header extends Component {
   constructor(props) {
@@ -101,6 +101,7 @@ class Header extends Component {
       boxShadow: this.props.hasBoxShadow,
       mobile: !this.props.multiPanel
     });
+    console.log(this.props)
     return (
       <div className={headerClasses} role="banner">
         <div className={headerInnerClasses}>
@@ -117,6 +118,7 @@ class Header extends Component {
           close={this.props.onMobileMenuButtonClick} />
         }
         <GlobalWarningMessage />
+        <GDocAdvertBanner />
       </div>
     );
   }

diff --git a/static/js/TextColumnBanner.jsx b/static/js/TextColumnBanner.jsx
@@ -109,6 +109,36 @@ const OpenTransBanner = ({ openTranslations }) => {
     );
 };
 
+/**
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const GDocAdvertBanner = () => {
+    const buttons = [{
+        text: "Install Now",
+        onClick: () => { window.location.href = 'https://workspace.google.com/marketplace/app/sefaria/849562338091'; },
+        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>
+        </TextColumnBanner>
+      </div> : null
+    );
+};
+
 
 
 /**

diff --git a/static/js/sefaria/strings.js b/static/js/sefaria/strings.js
@@ -514,6 +514,8 @@ const Strings = {
     "Author": "מחבר",
     "Authors": "מחברים",
 
+    "Install Now": "התקינו עכשיו",
+
     //Topics
     "Wikipedia": "ויקיפדיה",
     "Jewish Encyclopedia": "האנציקלופדיה היהודית",