feat: add option to hide comment disclaimer

newjersey · Jun 19, 2024 · 9b354e9 · 9b354e9
1 parent c931c74
commit 9b354e9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/feedback-widget.js b/feedback-widget.js
@@ -244,6 +244,15 @@ class NJFeedbackWidget extends window.HTMLElement {
     const contactLink = this.hasAttribute("contact-link")
       ? this.getAttribute("contact-link")
       : "https://www.nj.gov/nj/feedback.html";
+
+    let showCommentDisclaimer = true;
+    if (
+      this.hasAttribute("show-comment-disclaimer") &&
+      this.getAttribute("show-comment-disclaimer") === "false"
+    ) {
+      showCommentDisclaimer = false;
+    }
+
     const html = /*html*/ `
     <div class="feedback-container">
       <div id="ratingPrompt" class="flex-box">
@@ -264,14 +273,18 @@ class NJFeedbackWidget extends window.HTMLElement {
               <label id="commentPromptText" for="comment" class="feedback-text"
                 >${content.commentPromptPositive}</label
               >
-              <p class="disclaimer-text">
-                ${content.commentPromptDisclaimer}<a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href="${contactLink}"
-                  >${content.commentPromptDisclaimerLink}</a
-                >.
-              </p>
+              ${
+                showCommentDisclaimer
+                  ? `<p class="disclaimer-text">
+                      ${content.commentPromptDisclaimer}<a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="${contactLink}"
+                      >${content.commentPromptDisclaimerLink}</a
+                      >.
+                    </p>`
+                  : ""
+              }
             </div>
             <div>
               <textarea
@@ -303,7 +316,9 @@ class NJFeedbackWidget extends window.HTMLElement {
               <p class="disclaimer-text">${content.emailPrompt}</p>
             </div>
             <div>
-              <label for="email" class="email-label">${content.emailLabel}</label>
+              <label for="email" class="email-label">${
+                content.emailLabel
+              }</label>
               <input
                 type="email"
                 id="email"

diff --git a/feedback-widget.min.js b/feedback-widget.min.js
@@ -1,4 +1,4 @@
-function logGoogleEvent(action,label=void 0){"function"==typeof window.gtag&&window.gtag("event",action,{event_category:"Page feedback",event_label:label})}const LANG_TO_CONTENT={en:{ratingPrompt:"Did you find what you were looking for on this page?",ratingPositive:"Yes",ratingNegative:"No",commentPromptPositive:"Great! We're looking for ways to improve this page — what ideas come to mind?",commentPromptNegative:"Sorry to hear that. What were you looking for today?",commentPromptDisclaimer:"Your feedback helps improve this web page. For specific questions about your situation, ",commentPromptDisclaimerLink:"contact us",commentSubmit:"Send feedback",commentSubmitLoading:"Sending...",commentConfirmation:"Thanks for sharing your thoughts!",emailPrompt:"To hear about paid feedback opportunities in the future, join our user testing list.",emailLabel:"Email address",emailSubmit:"Join the list",emailSubmitLoading:"Joining...",errorMessage:"Try again, please. We didn't get your answer because of a technical issue.",emailConfirmation:"Thanks for signing up!"},es:{ratingPrompt:"¿Encontraste lo que buscabas en esta página?",ratingPositive:"Sí",ratingNegative:"No",commentPromptPositive:"¡Excelente! Estamos buscando formas de mejorar esta página. ¿Qué ideas se te ocurren?",commentPromptNegative:"Lamentamos escuchar eso. ¿De que se trataba su búsqueda?",commentPromptDisclaimer:"Sus comentarios nos ayudan a mejorar nuestro sitio de web. Si tiene preguntas específicas sobre su situación, ",commentPromptDisclaimerLink:"por favor póngase en contacto con nosotros",commentSubmit:"Enviar comentarios",commentSubmitLoading:"Enviando...",commentConfirmation:"¡Gracias por compartir tus ideas!",emailPrompt:"Para conocer mas oportunidades de comentarios pagados en el futuro, sea parte de nuestra lista de prueba de usuarios.",emailLabel:"Dirección de correo electrónico",emailSubmit:"Sea parte de la lista",emailSubmitLoading:"Enviando...",errorMessage:"Por favor, inténtalo de nuevo. No obtuvimos su respuesta debido a un problema técnico.",emailConfirmation:"¡Gracias por registrarte!"}},API_URL="https://innovation.nj.gov/app/feedback/dev",JSON_HEADER={"Content-Type":"application/json"};class NJFeedbackWidget extends window.HTMLElement{constructor(){super(),this.rating=!1,this.feedbackId=void 0,this.retryRating=!1,this.language=new URL(window.location).searchParams.get("lang")??"en"}connectedCallback(){this.innerHTML=this.getHTML(),this.applyListeners(),this.addStyling(),document.addEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}disconnectedCallback(){document.removeEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}handleChangeLanguage(e){this.language=e.detail,this.innerHTML=this.getHTML(),this.applyListeners()}applyListeners(){this.querySelector("#yesButton").addEventListener("click",_e=>{this.handleRating(!0)}),this.querySelector("#noButton").addEventListener("click",_e=>{this.handleRating(!1)}),this.querySelector("#commentForm").addEventListener("submit",e=>{e.preventDefault();const submitButton=document.getElementById("commentSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmitLoading,this.hideElement("#commentSubmitError");e=e.target.elements.comment.value,e=this.retryRating||null==this.feedbackId?{comment:e,rating:this.rating,pageURL:window.location.href}:{feedbackId:this.feedbackId,comment:e};fetch(API_URL+"/comment",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{null==this.feedbackId&&(this.feedbackId=data.feedbackId),"Success"===data.message&&null!=this.feedbackId?(this.hideElement("#commentPrompt"),this.showElement("#emailPrompt")):this.showElement("#commentSubmitError")}).catch(e=>{this.showElement("#commentSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmit})}),this.querySelector("#emailForm").addEventListener("submit",e=>{e.preventDefault();const submitButton=document.getElementById("emailSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmitLoading,this.hideElement("#emailSubmitError");e={feedbackId:this.feedbackId,email:e.target.elements.email.value};fetch(API_URL+"/email",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.hideElement("#emailPrompt"),this.showElement("#emailConfirmation","flex")):this.showElement("#emailSubmitError")}).catch(e=>{this.showElement("#emailSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmit})})}handleRating(rating){(this.rating=rating)||(this.querySelector("#commentPromptText").innerText=LANG_TO_CONTENT[this.language].commentPromptNegative),this.hideElement("#ratingPrompt"),this.showElement("#commentPrompt");let onlySaveRatingToAnalytics=!1;var postData;(onlySaveRatingToAnalytics=this.hasAttribute("only-save-rating-to-analytics")?"true"===this.getAttribute("only-save-rating-to-analytics"):onlySaveRatingToAnalytics)?logGoogleEvent("Clicked initial button",rating?"Yes":"No"):(document.getElementById("commentSubmit").disabled=!0,postData={pageURL:window.location.href,rating:rating},fetch(API_URL+"/rating",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(postData)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.feedbackId=data.feedbackId,logGoogleEvent("Clicked initial button",rating?"Yes":"No")):this.retryRating=!0}).catch(e=>{this.retryRating=!0}).finally(()=>{document.getElementById("commentSubmit").disabled=!1}))}showElement(selector,displayType="block"){this.querySelector(selector).style.display=displayType}hideElement(selector){this.querySelector(selector).style.display="none"}getHTML(){var content=LANG_TO_CONTENT[this.language],contactLink=this.hasAttribute("contact-link")?this.getAttribute("contact-link"):"https://www.nj.gov/nj/feedback.html";return`
+function logGoogleEvent(action,label=void 0){"function"==typeof window.gtag&&window.gtag("event",action,{event_category:"Page feedback",event_label:label})}let LANG_TO_CONTENT={en:{ratingPrompt:"Did you find what you were looking for on this page?",ratingPositive:"Yes",ratingNegative:"No",commentPromptPositive:"Great! We're looking for ways to improve this page — what ideas come to mind?",commentPromptNegative:"Sorry to hear that. What were you looking for today?",commentPromptDisclaimer:"Your feedback helps improve this web page. For specific questions about your situation, ",commentPromptDisclaimerLink:"contact us",commentSubmit:"Send feedback",commentSubmitLoading:"Sending...",commentConfirmation:"Thanks for sharing your thoughts!",emailPrompt:"To hear about paid feedback opportunities in the future, join our user testing list.",emailLabel:"Email address",emailSubmit:"Join the list",emailSubmitLoading:"Joining...",errorMessage:"Try again, please. We didn't get your answer because of a technical issue.",emailConfirmation:"Thanks for signing up!"},es:{ratingPrompt:"¿Encontraste lo que buscabas en esta página?",ratingPositive:"Sí",ratingNegative:"No",commentPromptPositive:"¡Excelente! Estamos buscando formas de mejorar esta página. ¿Qué ideas se te ocurren?",commentPromptNegative:"Lamentamos escuchar eso. ¿De que se trataba su búsqueda?",commentPromptDisclaimer:"Sus comentarios nos ayudan a mejorar nuestro sitio de web. Si tiene preguntas específicas sobre su situación, ",commentPromptDisclaimerLink:"por favor póngase en contacto con nosotros",commentSubmit:"Enviar comentarios",commentSubmitLoading:"Enviando...",commentConfirmation:"¡Gracias por compartir tus ideas!",emailPrompt:"Para conocer mas oportunidades de comentarios pagados en el futuro, sea parte de nuestra lista de prueba de usuarios.",emailLabel:"Dirección de correo electrónico",emailSubmit:"Sea parte de la lista",emailSubmitLoading:"Enviando...",errorMessage:"Por favor, inténtalo de nuevo. No obtuvimos su respuesta debido a un problema técnico.",emailConfirmation:"¡Gracias por registrarte!"}},API_URL="https://innovation.nj.gov/app/feedback/dev",JSON_HEADER={"Content-Type":"application/json"};class NJFeedbackWidget extends window.HTMLElement{constructor(){super(),this.rating=!1,this.feedbackId=void 0,this.retryRating=!1,this.language=new URL(window.location).searchParams.get("lang")??"en"}connectedCallback(){this.innerHTML=this.getHTML(),this.applyListeners(),this.addStyling(),document.addEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}disconnectedCallback(){document.removeEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}handleChangeLanguage(e){this.language=e.detail,this.innerHTML=this.getHTML(),this.applyListeners()}applyListeners(){this.querySelector("#yesButton").addEventListener("click",_e=>{this.handleRating(!0)}),this.querySelector("#noButton").addEventListener("click",_e=>{this.handleRating(!1)}),this.querySelector("#commentForm").addEventListener("submit",e=>{e.preventDefault();let submitButton=document.getElementById("commentSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmitLoading,this.hideElement("#commentSubmitError");e=e.target.elements.comment.value,e=this.retryRating||null==this.feedbackId?{comment:e,rating:this.rating,pageURL:window.location.href}:{feedbackId:this.feedbackId,comment:e};fetch(API_URL+"/comment",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{null==this.feedbackId&&(this.feedbackId=data.feedbackId),"Success"===data.message&&null!=this.feedbackId?(this.hideElement("#commentPrompt"),this.showElement("#emailPrompt")):this.showElement("#commentSubmitError")}).catch(e=>{this.showElement("#commentSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmit})}),this.querySelector("#emailForm").addEventListener("submit",e=>{e.preventDefault();let submitButton=document.getElementById("emailSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmitLoading,this.hideElement("#emailSubmitError");e={feedbackId:this.feedbackId,email:e.target.elements.email.value};fetch(API_URL+"/email",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.hideElement("#emailPrompt"),this.showElement("#emailConfirmation","flex")):this.showElement("#emailSubmitError")}).catch(e=>{this.showElement("#emailSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmit})})}handleRating(rating){(this.rating=rating)||(this.querySelector("#commentPromptText").innerText=LANG_TO_CONTENT[this.language].commentPromptNegative),this.hideElement("#ratingPrompt"),this.showElement("#commentPrompt");let onlySaveRatingToAnalytics=!1;var postData;(onlySaveRatingToAnalytics=this.hasAttribute("only-save-rating-to-analytics")?"true"===this.getAttribute("only-save-rating-to-analytics"):onlySaveRatingToAnalytics)?logGoogleEvent("Clicked initial button",rating?"Yes":"No"):(document.getElementById("commentSubmit").disabled=!0,postData={pageURL:window.location.href,rating:rating},fetch(API_URL+"/rating",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(postData)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.feedbackId=data.feedbackId,logGoogleEvent("Clicked initial button",rating?"Yes":"No")):this.retryRating=!0}).catch(e=>{this.retryRating=!0}).finally(()=>{document.getElementById("commentSubmit").disabled=!1}))}showElement(selector,displayType="block"){this.querySelector(selector).style.display=displayType}hideElement(selector){this.querySelector(selector).style.display="none"}getHTML(){var content=LANG_TO_CONTENT[this.language],contactLink=this.hasAttribute("contact-link")?this.getAttribute("contact-link"):"https://www.nj.gov/nj/feedback.html";let showCommentDisclaimer=!0;return this.hasAttribute("show-comment-disclaimer")&&"false"===this.getAttribute("show-comment-disclaimer")&&(showCommentDisclaimer=!1),`
     <div class="feedback-container">
       <div id="ratingPrompt" class="flex-box">
         <span class="feedback-text">${content.ratingPrompt}</span>
@@ -18,14 +18,14 @@ function logGoogleEvent(action,label=void 0){"function"==typeof window.gtag&&win
               <label id="commentPromptText" for="comment" class="feedback-text"
                 >${content.commentPromptPositive}</label
               >
-              <p class="disclaimer-text">
-                ${content.commentPromptDisclaimer}<a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href="${contactLink}"
-                  >${content.commentPromptDisclaimerLink}</a
-                >.
-              </p>
+              ${showCommentDisclaimer?`<p class="disclaimer-text">
+                      ${content.commentPromptDisclaimer}<a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="${contactLink}"
+                      >${content.commentPromptDisclaimerLink}</a
+                      >.
+                    </p>`:""}
             </div>
             <div>
               <textarea