feat: users with reputation less than 100 will be prompted to write answers

i18n/en_US.yaml

@@ -801,10 +801,18 @@ ui:
         edit link to refine and improve your existing answer, instead.</p>
       empty: Answer cannot be empty.
       characters: content must be at least 6 characters in length.
+      tips:
+        header_1: Thanks for your answer
+        li1_1: Please be sure to <strong>answer the question</strong>. Provide details and share your research.
+        li1_2: Back up any statements you make with references or personal experience.
+        header_2: But <strong>avoid</strong> ...
+        li2_1: Asking for help, seeking clarification, or responding to other answers.
+
     reopen:
       title: Reopen this post
       content: Are you sure you want to reopen?
       success: This post has been reopened
+
   delete:
     title: Delete this post
     question: >-

ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useState, FC, useEffect } from 'react';
-import { Form, Button } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
+import { Form, Button, Alert } from 'react-bootstrap';
+import { useTranslation, Trans } from 'react-i18next';
 
 import { marked } from 'marked';
 import classNames from 'classnames';
@@ -18,6 +18,7 @@ interface Props {
     /** question  id */
     qid: string;
     answered?: boolean;
+    loggedUserRank: number;
   };
   callback?: (obj) => void;
 }
@@ -39,6 +40,7 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
   const [focusType, setFocusType] = useState('');
   const [editorFocusState, setEditorFocusState] = useState(false);
   const [hasDraft, setHasDraft] = useState(false);
+  const [showTips, setShowTips] = useState(data.loggedUserRank < 100);
 
   usePromptWithUnload({
     when: Boolean(formData.content.value),
@@ -212,29 +214,58 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
             </div>
           )}
           {showEditor && (
-            <Editor
-              className={classNames(
-                'form-control p-0',
-                focusType === 'answer' && 'focus',
-              )}
-              value={formData.content.value}
-              autoFocus={editorFocusState}
-              onChange={(val) => {
-                setFormData({
-                  content: {
-                    value: val,
-                    isInvalid: false,
-                    errorMsg: '',
-                  },
-                });
-              }}
-              onFocus={() => {
-                setFocusType('answer');
-              }}
-              onBlur={() => {
-                setFocusType('');
-              }}
-            />
+            <>
+              <Editor
+                className={classNames(
+                  'form-control p-0',
+                  focusType === 'answer' && 'focus',
+                )}
+                value={formData.content.value}
+                autoFocus={editorFocusState}
+                onChange={(val) => {
+                  setFormData({
+                    content: {
+                      value: val,
+                      isInvalid: false,
+                      errorMsg: '',
+                    },
+                  });
+                }}
+                onFocus={() => {
+                  setFocusType('answer');
+                }}
+                onBlur={() => {
+                  setFocusType('');
+                }}
+              />
+
+              <Alert
+                variant="warning"
+                show={data.loggedUserRank < 100 && showTips}
+                onClose={() => setShowTips(false)}
+                dismissible
+                className="mt-3">
+                <p>{t('tips.header_1')}</p>
+                <ul>
+                  <li>
+                    <Trans
+                      i18nKey="question_detail.write_answer.tips.li1_1"
+                      components={{ strong: <strong /> }}
+                    />
+                  </li>
+                  <li>{t('tips.li1_2')}</li>
+                </ul>
+                <p>
+                  <Trans
+                    i18nKey="question_detail.write_answer.tips.header_2"
+                    components={{ strong: <strong /> }}
+                  />
+                </p>
+                <ul>
+                  <li>{t('tips.li2_1')}</li>
+                </ul>
+              </Alert>
+            </>
           )}
 
           <Form.Control.Feedback type="invalid">

ui/src/pages/Questions/Detail/index.tsx

@@ -57,6 +57,7 @@ const Index = () => {
   const isAuthor = userInfo?.username === question?.user_info?.username;
   const isAdmin = userInfo?.role_id === 2;
   const isLogged = Boolean(userInfo?.access_token);
+  const loggedUserRank = userInfo?.rank;
   const { state: locationState } = useLocation();
 
   useEffect(() => {
@@ -247,6 +248,7 @@ const Index = () => {
                 data={{
                   qid,
                   answered: question?.answered,
+                  loggedUserRank,
                 }}
                 callback={writeAnswerCallback}
               />