Add block UI for viewer that hasn't Liker ID

thematters · Oct 25, 2019 · 384bfd1 · 384bfd1
1 parent 40bdff1
commit 384bfd1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/src/components/CommentDigest/FooterActions/index.tsx b/src/components/CommentDigest/FooterActions/index.tsx
@@ -5,6 +5,7 @@ import { useContext, useState } from 'react'
 
 import { DateTime, Icon } from '~/components'
 import CommentForm from '~/components/Form/CommentForm'
+import { ModalSwitch } from '~/components/ModalManager'
 import { ViewerContext } from '~/components/Viewer'
 
 import { PATHS } from '~/common/enums'
@@ -112,20 +113,31 @@ const FooterActions: React.FC<FooterActionsProps> & {
           {hasForm && (
             <>
               <IconDotDivider />
-              <button
-                type="button"
-                className={showForm ? 'active' : ''}
-                onClick={() => {
-                  setShowForm(!showForm)
-                }}
-                disabled={!isActive || viewer.isInactive || isBlockedByAuthor}
-              >
-                <Icon
-                  id={ICON_COMMENT_SMALL.id}
-                  viewBox={ICON_COMMENT_SMALL.viewBox}
-                  size="small"
-                />
-              </button>
+
+              <ModalSwitch modalId="likeCoinTermModal">
+                {(open: any) => (
+                  <button
+                    type="button"
+                    className={showForm ? 'active' : ''}
+                    onClick={() => {
+                      if (viewer.isOnboarding || !viewer.likerId) {
+                        open()
+                      } else {
+                        setShowForm(!showForm)
+                      }
+                    }}
+                    disabled={
+                      !isActive || viewer.isInactive || isBlockedByAuthor
+                    }
+                  >
+                    <Icon
+                      id={ICON_COMMENT_SMALL.id}
+                      viewBox={ICON_COMMENT_SMALL.viewBox}
+                      size="small"
+                    />
+                  </button>
+                )}
+              </ModalSwitch>
             </>
           )}
         </div>

diff --git a/src/components/Form/CommentForm/index.tsx b/src/components/Form/CommentForm/index.tsx
@@ -9,6 +9,7 @@ import COMMENT_COMMENTS from '~/components/GQL/queries/commentComments'
 import { Icon } from '~/components/Icon'
 import IconSpinner from '~/components/Icon/Spinner'
 import { Translate } from '~/components/Language'
+import { ModalSwitch } from '~/components/ModalManager'
 import { Spinner } from '~/components/Spinner'
 import { ViewerContext } from '~/components/Viewer'
 
@@ -193,6 +194,25 @@ const CommentForm = ({
 }
 
 export default (props: CommentFormProps) => {
+  const viewer = useContext(ViewerContext)
+
+  if (viewer.isOnboarding || !viewer.likerId) {
+    return (
+      <ModalSwitch modalId="likeCoinTermModal">
+        {(open: any) => (
+          <button className="blocked" onClick={open}>
+            <Translate
+              zh_hant="設置 Liker ID 後即可參與精彩討論"
+              zh_hans="设置 Liker ID 后即可参与精彩讨论"
+            />
+
+            <style jsx>{styles}</style>
+          </button>
+        )}
+      </ModalSwitch>
+    )
+  }
+
   if (props.blocked) {
     return (
       <section className="blocked">

diff --git a/src/components/Form/CommentForm/styles.css b/src/components/Form/CommentForm/styles.css
@@ -15,6 +15,8 @@
 }
 
 .blocked {
+  display: block;
+  width: 100%;
   padding: var(--spacing-x-tight);
 
   color: var(--color-grey-dark);