docs: added a feedback component in quickstart guides (#2894)

* docs: added a feedback component in quickstart guides

* docs: added feedback to admin docs

www/docs/docusaurus.config.js

@@ -191,7 +191,10 @@ const config = {
         href: 'https://github.com/medusajs/medusa'
       },
     ],
-    reportCodeLinkPrefix: 'https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml'
+    reportCodeLinkPrefix: 'https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml',
+    footerFeedback: {
+      event: 'survey'
+    }
   },
   presets: [
     [

www/docs/src/components/Feedback/index.css

@@ -1,6 +1,7 @@
 
 .feedback-container {
   padding-top: var(--ifm-base-margin-vertical);
+  padding-bottom: var(--ifm-base-margin-vertical);
   border-top: 1px solid var(--ifm-doc-footer-border-color);
 }
 

www/docs/src/components/Feedback/index.js

@@ -5,7 +5,16 @@ import './index.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {useLocation} from '@docusaurus/router';
 
-export default function Feedback () {
+export default function Feedback ({
+  event,
+  question = 'Was this page helpful?',
+  positiveBtn = 'Yes',
+  negativeBtn = 'No',
+  positiveQuestion = 'What was most helpful?',
+  negativeQuestion = 'What can we improve?',
+  submitBtn = 'Submit',
+  submitMessage = 'Thank you for helping improve our documentation!'
+}) {
   const [showForm, setShowForm] = useState(false);
   const [submittedFeedback, setSubmittedFeedback] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -28,7 +37,7 @@ export default function Feedback () {
     if (isBrowser) {
       if (window.analytics) {
         setLoading(true);
-        window.analytics.track('survey', {
+        window.analytics.track(event, {
           url: location.pathname,
           label: document.title,
           feedback: positiveFeedback ? 'yes' : 'no',
@@ -63,21 +72,21 @@ export default function Feedback () {
           <>
             {(!showForm && !submittedFeedback) && (
               <div className='inline-feedback' ref={inlineFeedbackRef}>
-                <span>Was this page helpful?</span>
-                <button className='positive feedback-btn' onClick={handleFeedback}>Yes</button>
-                <button className='negative feedback-btn' onClick={handleFeedback}>No</button>
+                <span>{question}</span>
+                <button className='positive feedback-btn' onClick={handleFeedback}>{positiveBtn}</button>
+                <button className='negative feedback-btn' onClick={handleFeedback}>{negativeBtn}</button>
               </div>
             )}
             {(showForm && !submittedFeedback) && (
               <div className='inline-question' ref={inlineQuestionRef}>
-                <span>{positiveFeedback ? 'What was most helpful?' : 'What can we improve?'}</span>
+                <span>{positiveFeedback ? positiveQuestion : negativeQuestion}</span>
                 <textarea rows={4} value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
-                <button className='feedback-btn' onClick={submitFeedback} disabled={loading}>Submit</button>
+                <button className='feedback-btn' onClick={submitFeedback} disabled={loading}>{submitBtn}</button>
               </div>
             )}
             {submittedFeedback && (
               <div className='feedback-message' ref={inlineMessageRef}>
-                Thank you for helping improve our documentation!
+                {submitMessage}
               </div>
             )}
           </>

www/docs/src/css/_docspage.css

@@ -83,7 +83,7 @@ kbd {
 }
 
 .theme-doc-footer {
-  margin-top: var(--ifm-base-margin-vertical) !important;
+  margin-top: 0 !important;
   border-top: 1px solid var(--ifm-doc-footer-border-color) !important;
   padding-top: var(--ifm-base-margin-vertical);
 }

www/docs/src/theme/DocItem/Footer/index.js

@@ -2,15 +2,19 @@ import React from 'react';
 import Footer from '@theme-original/DocItem/Footer';
 import Feedback from '../../../components/Feedback';
 import { useDoc } from '@docusaurus/theme-common/internal';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
 export default function FooterWrapper(props) {
   const { metadata } = useDoc()
+  const { footerFeedback = { event: '' } } = useThemeConfig();
+
+  console.log(footerFeedback)
 
   return (
     <>
       {!metadata.frontMatter?.hide_footer && (
         <div className='docusaurus-mt-lg doc-footer'>
-          <Feedback />
+          <Feedback {...footerFeedback} />
           <Footer {...props} />
         </div>
       )}