Feature/sc 31198/introduce info warning dialog period 5

static/css/s2.css

@@ -6878,6 +6878,45 @@ But not to use a display block directive that might break continuous mode for ot
   color: #999;
   text-decoration: underline;
 }
+#interruptingMessage.sheetsWarning {
+  height: 70%;
+  width: 70%;
+  border: 5px solid black;
+}
+#interruptingMessage.sheetsWarning  .button {
+  color: black;
+  background: var(--highlight-blue);
+  margin-top: 120px;
+  border: 5px solid black;
+  border-radius: revert;
+}
+#interruptingMessage.sheetsWarning a {
+  color: var(--inline-link-blue);
+  text-decoration: underline;
+}
+#interruptingMessage.sheetsWarning h1 {
+  font-weight: 500;
+  font-style: normal;
+  margin-bottom: 60px;
+}
+#interruptingMessage.sheetsWarning p {
+  margin-bottom: 30px;
+}
+@media screen and (max-width: 800px) {
+  #interruptingMessage.sheetsWarning {
+    font-size: smaller;
+  }
+  #interruptingMessage.sheetsWarning  .button {
+    margin-top: 40px;
+  }
+  #interruptingMessage.sheetsWarning h1 {
+    margin-bottom: 20px;
+    font-size: large;
+  }
+  #interruptingMessage.sheetsWarning p {
+    margin-bottom: 15px;
+  }
+}
 .manuscriptImage {
   width: auto;
   max-height: 180px;
@@ -11198,6 +11237,17 @@ cursor: pointer;
 .profile-page .social-icon:hover img {
   opacity: 0.6;
 }
+#staticContentWrapper .editorToggleHeader {
+  width: 100%;
+  background-color: #18345D;
+  color: white;
+  height: 60px;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: revert;
+}
 .editorToggleHeader {
   width: 100%;
   background-color: #18345D;
@@ -11207,7 +11257,7 @@ cursor: pointer;
   margin-top: -60px;
   margin-left: -12px;
   margin-bottom: 80px;
-  padding-right: 12px;
+  padding: 0 100px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11218,12 +11268,24 @@ cursor: pointer;
   direction: rtl;
 }
 .editorToggleHeader .button {
+  white-space: nowrap;
   padding: 5px 8px;
   margin-inline-start: 15px;
   margin-top: 5px;
   height: 30px;
   letter-spacing: 0;
 }
+.editorToggleHeader > span.int-he:first-child {
+  margin-inline-start: 250px;
+}
+.editorToggleHeader .learnMore {
+  text-decoration: underline;
+  color: white;
+  margin-inline-end: 200px;
+  margin-inline-start: 20px;
+  width: 15%;
+  padding: revert;
+}
 .feedbackOverlay {
   position: fixed;
   width: 100%;

static/css/sheets.css

@@ -1628,12 +1628,9 @@ body.hasBannerMessage .sheetsEditNavTop {
 	padding: 16px 20px;
 	margin-bottom: 0;
 }
-.sheetsEditNavTop .button {
+.sheetsEditNavTop #save {
 	background-color: #212e50;
 	border-color: #212e50;
-	padding: 12px 24px;
-}
-.sheetsEditNavTop .button {
     padding: 5px 12px;
 }
 #customTextLanguageToggle {

static/js/Misc.jsx

@@ -23,6 +23,9 @@ import ReactMarkdown from 'react-markdown';
 import TrackG4 from "./sefaria/trackG4";
 import { ReaderApp } from './ReaderApp';
 
+
+const cookie = Sefaria._inBrowser ? $.cookie : Sefaria.util.cookie;
+
 /**
  * Component meant to simply denote a language specific string to go inside an InterfaceText element
  * ```
@@ -1886,6 +1889,31 @@ const replaceNewLinesWithLinebreaks = (content) => {
   );
 }
 
+const SheetsEditorWarning = () => {
+  const [hasAcknowledgedFinalWarning, toggleHasAcknowledgedFinalWarning] = useState(Boolean(cookie("hasAcknowledgedFinalWarning")));
+  const handleClick = () => {
+    cookie("hasAcknowledgedFinalWarning", "true", { path: "/", expires: 50 });
+    toggleHasAcknowledgedFinalWarning(true);
+  }
+  if (!!hasAcknowledgedFinalWarning) {
+    return null;
+  }
+  else {
+    return <div id="interruptingMessageBox">
+          <div id="interruptingMessageOverlay"></div>
+          <div id="interruptingMessage" className="sheetsWarning">
+              <h1>End of Life for the Original Sefaria Source Sheet Editor</h1>
+          <p>As of "Dec. 1, 2024" the original sheets editor created by Sefaria for the
+          benefit of its users back in 2015, will no longer be available.</p>
+          <p>In your Profile, you will have the ability to switch between the 2 editors until
+          the deadline.</p>
+          <p>Please take the time to learn more about this important change by reading
+            this <a href="https://sefaria.org/sheets/eol-old-editor" target="_blank">help article.</a></p>
+          <div className="button" onClick={handleClick}>Thank you, I understand.</div>
+          </div>
+    </div>
+  }
+}
 const InterruptingMessage = ({
   onClose,
 }) => {
@@ -3245,4 +3273,5 @@ export {
   LangSelectInterface,
   PencilSourceEditor,
   SmallBlueButton,
+  SheetsEditorWarning
 };

static/js/ReaderApp.jsx

@@ -32,7 +32,7 @@ import {
   InterruptingMessage,
   Banner,
   CookiesNotification,
-  CommunityPagePreviewControls
+  CommunityPagePreviewControls, SheetsEditorWarning
 } from './Misc';
 import { Promotions } from './Promotions';
 import Component from 'react-class';
@@ -2276,6 +2276,7 @@ toggleSignUpModal(modalContentKind = SignUpModalKind.Default) {
           <div id="readerAppWrap">
             <InterruptingMessage />
             <Banner onClose={this.setContainerMode} />
+            <SheetsEditorWarning/>
             <div className={classes} onClick={this.handleInAppLinkClick}>
               {header}
               {panels}

static/js/UserProfile.jsx

@@ -448,9 +448,10 @@ UserProfile.propTypes = {
 
 const EditorToggleHeader = ({usesneweditor}) => {
  const [feedbackHeaderState, setFeedbackHeaderState] = useState("hidden")
-
- const text = <InterfaceText>{usesneweditor ? "You are currently testing the new Sefaria editor." : "You are currently using the old Sefaria editor."}</InterfaceText>;
- const buttonText = <InterfaceText>{usesneweditor ? "Go back to old version" : "Try the new version"}</InterfaceText>;
+ const old_editor_msg = "Sefaria's original source sheet editor will no longer be supported after March 15, 2025. Start using the new editor now or click to learn more about this important change.";
+ const new_editor_msg = "You are currently using the new source sheet editor. The old editor will no longer be available after March 15, 2025. Click to learn more about this important change.";
+ const text = <InterfaceText>{usesneweditor ? new_editor_msg : old_editor_msg}</InterfaceText>;
+ const buttonText = <InterfaceText>{usesneweditor ? "Go Back to Old Version" : "Switch to New Editor"}</InterfaceText>;
 
  const sendFeedback = () => {
 
@@ -547,6 +548,7 @@ const EditorToggleHeader = ({usesneweditor}) => {
    <>
    <div className="editorToggleHeader sans-serif">{text}
      <a href="#" onClick={()=>toggleFeedbackOverlayState()} className="button white" role="button">{buttonText}</a>
+       <a href="https://sefaria.org/sheets/eol-old-editor" className="learnMore"><InterfaceText>Learn More</InterfaceText></a>
    </div>
    {feedbackHeaderState != "hidden" ? <div className="feedbackOverlay">{overlayContent}</div> : null}
    </>

static/js/sefaria/strings.js

@@ -523,9 +523,11 @@ const Strings = {
     "Missing features": "תכונות חסרות",
     "Tell us about it...": "ספר/י לנו על כך...",
     "Submit Feedback": "לשליחת המשוב",
+    "You are currently using the new source sheet editor. The old editor will no longer be available after March 15, 2025. Click to learn more about this important change.":    "אתה משתמש כרגע בעורך גיליון המקור החדש. העורך הישן לא יהיה זמין יותר לאחר 15 במרץ 2025. לחץ למידע נוסף על השינוי החשוב הזה.",
+    "Sefaria's original source sheet editor will no longer be supported after March 15, 2025. Start using the new editor now or click to learn more about this important change.": "עורך גיליון המקור המקורי של ספריה לא יהיה נתמך עוד לאחר 15 במרץ 2025. התחל להשתמש בעורך החדש עכשיו או לחץ כדי ללמוד עוד על השינוי החשוב הזה.",
+    "Go Back to Old Version": "חזור לגרסה הישנה",
+    "Switch to New Editor": "עבור לעורך חדש",
     "Thank you!": "תודה רבה!",
-    "You are currently testing the new Sefaria editor.": "ברגע זה הינך עושה שימוש בעורך החדש של ספריא",
-    "You are currently using the old Sefaria editor.": "כעת הינך עושה שימוש בגרסה הישנה של עורך ספריא",
     "Try the new version": "להתנסוּת בגרסה החדשה",
     "Your feedback is greatly appreciated. You can now edit your sheets again using the old source sheet editor. If you have any questions or additional feedback you can reach us at": "אנחנו מעריכים מאוד את המשוב שלך. כעת באפשרותך לחזור לערוך את הדפים שלך באמצעות עורך המסמכים הישן. לשאלות או למשוב נוסף אפשר לפנות אלינו בדוא\"ל:",
 

templates/sheets.html

@@ -21,9 +21,22 @@
 <!-- CSS placed here so it has precedence over other sheets in base.html -->
 <link rel="stylesheet" href="{% static 'css/sheets.css' %}">
 <link rel="stylesheet" href="{% static 'css/sheets-print.css' %}" media="print" />
+
 <div id="sheetsContent" data-interface-lang="{{ request.interfaceLang }}">
 
     <div class="sheetsEditNavTop">
+        <div class="editorToggleHeader sans-serif">
+            <span class="int-en">Sefaria's original source sheet editor will no longer be supported after March 15, 2025. Start using the new editor now or click to learn more about this important change.</span>
+            <span class="int-he">עורך גיליון המקור המקורי של ספריה לא יהיה נתמך עוד לאחר 15 במרץ 2025. התחל להשתמש בעורך החדש עכשיו או לחץ כדי ללמוד עוד על השינוי החשוב הזה.</span>
+            <a href="/enable_new_editor" class="button white" role="button">
+                <span class="int-en">Switch to New Editor</span>
+                <span class="int-he">עבור לעורך חדש</span>
+            </a>
+            <a href="https://sefaria.org/sheets/eol-old-editor" class="learnMore">
+                <span class="int-en">Learn More</span>
+                <span class="int-he">למידע נוסף</span>
+            </a>
+        </div>
         <div class="sheetsMenuBar" role="menu">
             <div class="sheetsMenuBarInner">
                 <div class="sheetsMenuBarCommands">