Merge pull request #2353 from Sefaria/feature/sc-32572/stopgap-banner-in-new-editor-encourages-learning

Feature/sc 32572/stopgap banner in new editor encourages learning

Author: stevekaplan123

e2e-tests/tests/banner.spec.ts

@@ -21,7 +21,7 @@ test('Banner links exist - English', async ({ context }) => {
     expect(getPathAndParams(page.url())).toBe("/texts")
 
     // Testing Topics link
-    await page.getByRole('banner').getByRole('link', { name: 'Topics' }).click();
+    await page.getByRole('banner').getByRole('link', { name: 'Explore' }).click();
     expect(getPathAndParams(page.url())).toBe("/topics")
 
     // Testing Community link

static/css/s2.css

@@ -395,19 +395,23 @@ body.hasBannerMessage #s2.headerOnly {
 .interface-hebrew #bannerMessage {
   direction: rtl;
 }
+.genericBanner #bannerMessageClose {
+  font-size: 40px;
+  opacity: revert;
+  inset-inline-end: 60px;
+  top: revert;
+  border: none;
+  background: none;
+}
 #bannerMessageClose {
   position: absolute;
   top: -3px;
-  right: 7px;
+  inset-inline-end: 7px;
   color: white;
   opacity: 0.5;
   font-size: 26px;
   cursor: pointer;
 }
-.interface-hebrew #bannerMessageClose {
-  right: auto;
-  left: 7px;
-}
 #bannerMessageContent {
   display: flex;
   flex: 1;
@@ -9295,7 +9299,7 @@ body.interface-english .publishBox .react-tags__suggestions ul {
 }
 .editorSidebarToggle {
   position: fixed;
-  top: 150px;
+  top: 200px;
   right: 30px;
   height: 30px;
   width: 30px;
@@ -11882,7 +11886,7 @@ cursor: pointer;
 #staticContentWrapper .editorToggleHeader {
   margin: revert;
 }
-.editorToggleHeader {
+.editorToggleHeader, .genericBanner {
   padding-inline: 10%;
   background-color: var(--sefaria-blue);
   color: white;
@@ -11892,14 +11896,20 @@ cursor: pointer;
   margin-bottom: 80px;
   display: flex;
   justify-content: center;
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
   gap: 5px;
   align-items: center;
 }
 
-.interface-hebrew .editorToggleHeader {
+.genericBanner {
+  margin-block: revert;
+}
+
+.interface-hebrew .editorToggleHeader, .interface-hebrew .genericBanner {
   direction: rtl;
 }
-.editorToggleHeader .button {
+.editorToggleHeader .button, .genericBanner .button {
   white-space: nowrap;
   padding: 5px 8px;
   height: 30px;

static/js/Misc.jsx

@@ -2064,6 +2064,47 @@ const InterruptingMessage = ({
 };
 InterruptingMessage.displayName = "InterruptingMessage";
 
+const GenericBanner = ({message, children}) => {
+  return (
+      <div className="genericBanner">
+        {<InterfaceText>{message}</InterfaceText> }
+        {children}
+      </div>);
+}
+
+const LearnAboutNewEditorBanner = () => {
+  const cookieName = "learned_about_new_editor";
+  const shouldShowNotification = Sefaria._inBrowser && !document.cookie.includes(cookieName);
+  const [showNotification, toggleShowNotification] = useState(shouldShowNotification);
+  const [enURL, heURL] = ["/sheets/393695", "/sheets/399333"];
+  const linkURL = Sefaria._v({en: enURL, he: heURL});
+
+  const handleLearnMoreClick = () => {
+    window.open(linkURL, '_blank');
+  };
+
+  const setCookie = () => {
+    $.cookie(cookieName, 1, {path: "/", expires: 20*365});
+    toggleShowNotification(false);
+  }
+
+  if (!showNotification) {
+    return null;
+  }
+  return (
+    <GenericBanner
+      message="Welcome to the updated source sheet editor! Check out our step-by-step guide to the new interface."
+    >
+      {
+        <button className="button white" onClick={() => {handleLearnMoreClick(); setCookie();}}>
+          <InterfaceText>Get Started</InterfaceText>
+        </button>
+      }
+      <button id="bannerMessageClose" onClick={setCookie}>×</button>
+    </GenericBanner>
+  );
+};
+
 const Banner = ({ onClose }) => {
   const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] =
     useState(false);
@@ -3265,4 +3306,5 @@ export {
   LangSelectInterface,
   PencilSourceEditor,
   SmallBlueButton,
+  LearnAboutNewEditorBanner
 };

static/js/Sheet.jsx

@@ -15,6 +15,7 @@ import {
   SheetAuthorStatement,
   SheetTitle,
   CollectionStatement,
+  LearnAboutNewEditorBanner,
 } from './Misc';
 import {ProfilePic} from "./ProfilePic";
 
@@ -105,50 +106,53 @@ class Sheet extends Component {
     }
     else {
       content = (
-            <SheetContent
-          sheetNotice={sheet.sheetNotice}
-          sources={sheet.sources}
-          title={sheet.title}
-          handleClick={this.handleClick}
-          sheetSourceClick={this.props.onSegmentClick}
-          highlightedNode={this.props.highlightedNode}
-          highlightedRefsInSheet={this.props.highlightedRefsInSheet}
-          scrollToHighlighted={this.props.scrollToHighlighted}
-          authorStatement={sheet.ownerName}
-          authorUrl={sheet.ownerProfileUrl}
-          authorImage={sheet.ownerImageUrl}
-          collectionName={sheet.collectionName}
-          collectionSlug={sheet.displayedCollection}
-          collectionImage={sheet.collectionImage}
-          editable={Sefaria._uid === sheet.owner}
-          hasSidebar={this.props.hasSidebar}
-          setSelectedWords={this.props.setSelectedWords}
-          sheetNumbered={sheet.options.numbered}
-          hideImages={!!sheet.hideImages}
-          sheetID={sheet.id}
-        />
-      );
-    }
-    return (
-      <div className={classes}>
-        { sheet && Sefaria._uid === sheet.owner && Sefaria._uses_new_editor ?
-        <div className="sheetContent">
-          <SefariaEditor
-            data={sheet}
-            hasSidebar={this.props.hasSidebar}
+        <div className={classes}>
+          <SheetContent
+            sheetNotice={sheet.sheetNotice}
+            sources={sheet.sources}
+            title={sheet.title}
             handleClick={this.handleClick}
-            multiPanel={this.props.multiPanel}
             sheetSourceClick={this.props.onSegmentClick}
             highlightedNode={this.props.highlightedNode}
             highlightedRefsInSheet={this.props.highlightedRefsInSheet}
-            setDivineNameReplacement={this.props.setDivineNameReplacement}
-            divineNameReplacement={this.props.divineNameReplacement}
+            scrollToHighlighted={this.props.scrollToHighlighted}
+            authorStatement={sheet.ownerName}
+            authorUrl={sheet.ownerProfileUrl}
+            authorImage={sheet.ownerImageUrl}
+            collectionName={sheet.collectionName}
+            collectionSlug={sheet.displayedCollection}
+            collectionImage={sheet.collectionImage}
+            editable={Sefaria._uid === sheet.owner}
+            hasSidebar={this.props.hasSidebar}
+            setSelectedWords={this.props.setSelectedWords}
+            sheetNumbered={sheet.options.numbered}
+            hideImages={!!sheet.hideImages}
+            sheetID={sheet.id}
           />
-        </div>
-        :
-        content }
       </div>
-    );
+      );
+    }
+    const editor = (
+      <>
+        <LearnAboutNewEditorBanner/>
+        <div className={classes}>
+          <div className="sheetContent">
+            <SefariaEditor
+              data={sheet}
+              hasSidebar={this.props.hasSidebar}
+              handleClick={this.handleClick}
+              multiPanel={this.props.multiPanel}
+              sheetSourceClick={this.props.onSegmentClick}
+              highlightedNode={this.props.highlightedNode}
+              highlightedRefsInSheet={this.props.highlightedRefsInSheet}
+              setDivineNameReplacement={this.props.setDivineNameReplacement}
+              divineNameReplacement={this.props.divineNameReplacement}
+            />
+          </div>
+        </div>
+       </>);
+    const usingEditor = sheet && Sefaria._uid === sheet.owner && Sefaria._uses_new_editor;
+    return ( usingEditor ? editor : content )
   }
 }
 

static/js/sefaria/strings.js

@@ -535,8 +535,10 @@ const Strings = {
     "Go back to old version": "חזרה לגרסה הישנה",
     "Request for Feedback": "נא למלא משוב",
     "Thank you for trying the new Sefaria editor! We’d love to hear what you thought. Please take a few minutes to give us feedback on your experience.": "תודה שניסית את עורך ספריא החדש! נשמח מאוד לשמוע את דעתך עליו. אנו מבקשים ממך להקדיש כמה דקות למילוי משוב על חוויית השימוש שלך.",
+    "Welcome to the updated source sheet editor! Check out our step-by-step guide to the new interface.": "תחדשו! הנכם משתמשים כעת בתוכנה העדכנית לעריכת דפי מקורות בספריא. למדו עוד על השימוש בתוכנה בעזרת המדריך המלא למשתמשים חדשים.",
     "Did you encounter any issues while using the new editor? For example:": "האם נתקלת בבעיות בעת השימוש בעורך החדש? למשל...",
     "Technical problems": "בעיות טכניות",
+    "Get Started": "התחילו כאן",
     "Difficulties using the editor": "קושי להשתמש בעורך",
     "Missing features": "תכונות חסרות",
     "Tell us about it...": "ספר/י לנו על כך...",