Add share notice dialog and acceptance logic in Zen Rices component

zen-browser · Dec 27, 2024 · 433df89 · 433df89
1 parent 598ede6
commit 433df89
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 7 deletions.
diff --git a/l10n b/l10n
diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
@@ -95,6 +95,7 @@ pref('zen.rice.api.url', "https://share.zen-browser.app");
 #else
 pref('zen.rice.api.url', "http://localhost:3000");
 #endif
+pref('zen.rice.share.notice.accepted', false);
 
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels

diff --git a/src/browser/base/content/zen-styles/zen-rices.css b/src/browser/base/content/zen-styles/zen-rices.css
@@ -12,7 +12,8 @@
   align-items: center;
 }
 
-#zen-rice-share-dialog {
+#zen-rice-share-dialog,
+#zen-rice-share-dialog-notice {
   color: var(--panel-color);
   background: var(--arrowpanel-background);
   border-radius: var(--zen-panel-radius);
@@ -141,11 +142,11 @@
     position: absolute;
     transform: translateX(-100%);
     pointer-events: none;
-    animation: zen-rice-form-out 0.8s ease;
+    animation: zen-rice-form-out 0.5s ease;
   }
 
   #zen-rice-share-second-form {
-    animation: zen-rice-form-in 0.8s ease forwards;
+    animation: zen-rice-form-in 0.5s ease forwards;
     justify-content: center;
 
     & > hbox {
@@ -183,11 +184,15 @@
     max-height: 0px;
     animation: zen-rice-form-in-2 0.5s ease forwards;
 
-    & h1 {
+    & > h1 {
       margin: 0;
       font-size: 20px;
     }
 
+    & > p {
+      color: var(--text-color-deemphasized);
+    }
+
     & label {
       margin: 0;
       margin-top: 15px;
@@ -196,3 +201,17 @@
     }
   }
 }
+
+#zen-rice-share-dialog-notice {
+  padding: 15px;
+
+  & > p {
+    color: var(--text-color-deemphasized);
+    margin-top: 5px;
+  }
+
+  .panel-footer {
+    margin-top: 10px;
+    align-items: center;
+  }
+}
diff --git a/src/browser/base/zen-components/ZenRices.mjs b/src/browser/base/zen-components/ZenRices.mjs
@@ -137,7 +137,15 @@
       }
       this._shareDialog = window.MozXULElement.parseXULToFragment(`
         <vbox id="zen-rice-share-dialog-overlay" hidden="true">
-          <vbox id="zen-rice-share-dialog">
+          <vbox id="zen-rice-share-dialog-notice">
+            <h1 data-l10n-id="zen-rice-share-notice" />
+            <p data-l10n-id="zen-rice-share-notice-details" />
+            <html:moz-button-group class="panel-footer">
+              <html:a href="https://docs.zen-browser.app/guides/" target="_blank" data-l10n-id="zen-learn-more-text" onclick="gZenThemePicker.riceManager.openLink(event)" />
+              <button onclick="gZenThemePicker.riceManager.acceptNotice()" class="footer-button" data-l10n-id="zen-rice-share-accept" slot="primary" default="true" />
+            </html:moz-button-group>
+          </vbox>
+          <vbox id="zen-rice-share-dialog" hidden="true">
             <html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
             <hbox class="zen-rice-share-content">
               <vbox id="zen-rice-share-first-form">
@@ -174,6 +182,7 @@
               </vbox>
               <vbox id="zen-rice-share-success" hidden="true">
                 <h1 data-l10n-id="zen-rice-share-success" />
+                <p data-l10n-id="zen-rice-share-succes-details" />
                 <label data-l10n-id="zen-rice-share-success-link" />
                 <html:input type="text" readonly="true" id="zen-rice-share-success-link" onclick="this.select()" />
                 <html:moz-button-group class="panel-footer">
@@ -189,6 +198,27 @@
       return this._shareDialog;
     }
 
+    get hasAcceptedNotice() {
+      return Services.prefs.getBoolPref("zen.rice.share.notice.accepted", false);
+    }
+
+    set hasAcceptedNotice(value) {
+      Services.prefs.setBoolPref("zen.rice.share.notice.accepted", value);
+    }
+
+    openLink(event) {
+      event.stopPropagation();
+      this.cancel();
+      gZenUIManager.openAndChangeToTab("https://docs.zen-browser.app/guides/");
+    }
+
+    acceptNotice() {
+      this.hasAcceptedNotice = true;
+      const notice = document.getElementById("zen-rice-share-dialog-notice");
+      notice.setAttribute("hidden", "true");
+      this.openShareDialog();
+    }
+
     toggleOptions(event) {
       if (event.originalTarget.closest(".options-header")) {
         const options = document.getElementById("zen-rice-share-options");
@@ -202,10 +232,16 @@
         .QueryInterface(Ci.nsIInterfaceRequestor)
         .getInterface(Ci.nsIAppWindow)
         .rollupAllPopups();
-
       const dialog = this.shareDialog;
       dialog.removeAttribute("hidden");
 
+      if (!this.hasAcceptedNotice) {
+        const notice = document.getElementById("zen-rice-share-dialog-notice");
+        notice.removeAttribute("hidden");
+        return;
+      }
+
+      document.getElementById("zen-rice-share-dialog").removeAttribute("hidden");
       document.getElementById("zen-rice-share-name").focus();
 
       // Initialize the dialog with the current values