Merge pull request #1855 from Sefaria/feature/sc-21757/place-a-messag…

…e-next-to-the-add-to-sheet

Feature/sc 21757/place a message next to the add to sheet

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 {
@@ -1765,6 +1765,54 @@ div.interfaceLinks-row a {
 .singlePanel .recentlyViewed #history span {
   color: var(--medium-grey);
 }
+
+.gDocAdvertBox {
+  margin-top: 50px;
+  background: var(--lighter-grey);
+  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: var(--dark-grey);
+}
+.gDocAdvertBox span #newExtension {
+  font-weight: 600;
+}
+.gDocAdvertBox #installNow {
+  margin-top: 18px;
+  width: 99px;
+  height: 30px;
+}
+.interface-hebrew .gDocAdvertBox #installNow {
+  width: 120px;
+}
+
+.gDocAdvertBox #installNow a {
+  border-radius: 6px;
+  text-align: center;
+  background: #FFFFFF;
+  color: var(--dark-grey);
+  text-decoration: none;
+  padding: 4px 9px;
+  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", "Helvetica Neue", "Helvetica", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+  text-decoration: underline;
+}
 .readerPanel .navSidebarModule h3,
 .readerPanel .navSidebarModule h1,
 .readerPanel .bookPage h3{
@@ -2332,7 +2380,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 +2425,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 +5553,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{

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 } from './Promotions';
+
 
 
 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>);
   }
 }

static/js/Header.jsx

@@ -15,7 +15,6 @@ import {
   DonateLink
 } from './Misc';
 
-
 class Header extends Component {
   constructor(props) {
     super(props)

static/js/Misc.jsx

@@ -23,6 +23,7 @@ import Cookies from "js-cookie";
 import {EditTextInfo} from "./BookPage";
 import ReactMarkdown from 'react-markdown';
 import TrackG4 from "./sefaria/trackG4";
+
 /**
  * Component meant to simply denote a language specific string to go inside an InterfaceText element
  * ```
@@ -60,6 +61,7 @@ const __filterChildrenByLanguage = (children, language) => {
   return newChildren;
 };
 
+
 const InterfaceText = ({text, html, markdown, children, context, disallowedMarkdownElements=[]}) => {
   /**
    * Renders a single span for interface string with either class `int-en`` or `int-he` depending on Sefaria.interfaceLang.

static/js/Promotions.jsx

@@ -1,8 +1,9 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, {useState, useContext, useEffect, useRef} from "react";
 import { AdContext, StrapiDataProvider, StrapiDataContext } from "./context";
 import classNames from "classnames";
 import Sefaria from "./sefaria/sefaria";
-import { OnInView } from "./Misc";
+import {EnglishText, HebrewText, InterfaceText, OnInView} from "./Misc";
+import $ from "./sefaria/sefariaJquery";
 
 const Promotions = () => {
   const [inAppAds, setInAppAds] = useState(Sefaria._inAppAds); // local cache
@@ -151,6 +152,32 @@ function trackSidebarAdClick(ad) {
     adType: "sidebar",
   });
 }
+const cookie = Sefaria._inBrowser ? $.cookie : Sefaria.util.cookie;
+const GDocAdvertText = () => {
+    const learnMoreLink = "https://sefaria.org/sheets/529099?origin=AddToSheetsPromo"
+    return    <InterfaceText>
+                <EnglishText> Add texts directly to your Google Docs with our <span id="newExtension">new extension</span>! <a href={learnMoreLink}>Learn more</a></EnglishText>
+                <HebrewText> הוסיפו טקסטים מספריא ישירות לקובץ גוגל עם <span id="newExtension">התוסף החדש</span> שלנו! <a href={learnMoreLink}>למדו עוד</a></HebrewText>
+             </InterfaceText>;
+}
+const GDocAdvertBox = React.memo(() => {
+    const gdocsCampaignId = "GDocs_Promo_AddToSheet";
+    const installNowLink = 'https://workspace.google.com/marketplace/app/sefaria/849562338091?utm_source=SefariaOrg&utm_medium=SidebarAdButton&utm_campaign=AddToSheetPromotion&utm_content=InstallFromAddToSheet';
+    const gdocsCampaignAd = {campaignId: gdocsCampaignId};
+    const gdocInstalled = 'gdoc_installed';
+    const handleInstall = () => {
+        cookie(gdocInstalled, JSON.stringify(1), {path: "/"});
+        trackSidebarAdClick(gdocsCampaignAd);
+    }
+    return !cookie(gdocInstalled) &&
+        <OnInView onVisible={() => trackSidebarAdImpression(gdocsCampaignAd)}>
+            <div className="gDocAdvertBox">
+              <GDocAdvertText/>
+              <div id="installNow"><a href={installNowLink}
+                                      onClick={handleInstall}><InterfaceText>Install Now</InterfaceText></a></div>
+            </div>
+          </OnInView>;
+});
 
 // Don't continuously rerender a SidebarAd if the parent component decides to rerender
 // This is done to prevent multiple views from registering from OnInView
@@ -218,4 +245,4 @@ const SidebarAd = React.memo(({ context, matchingAd }) => {
   );
 });
 
-export { Promotions };
+export { Promotions, GDocAdvertBox };

static/js/TextColumnBanner.jsx

@@ -109,8 +109,6 @@ const OpenTransBanner = ({ openTranslations }) => {
     );
 };
 
-
-
 /**
  * Banner which appears right above text column and informs a user of an action they can take
  * @param children: React element to display the call-to-action text.

static/js/sefaria/strings.js

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