feat: Added feedback submit failed dialog (#925)

chohongm · web-flow · commit cf2f64bf6430 · 2024-01-19T15:49:04.000+09:00
Fixes: [AC-1045](https://sendbird.atlassian.net/browse/AC-1045) Figma https://www.figma.com/file/SVbXU00FhjztekD8AiVukK/UIKit_Work-file_React?node-id=2165%3A11771&mode=dev [AC-1045]: https://sendbird.atlassian.net/browse/AC-1045?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/src/modules/Channel/components/MessageFeedbackFailedModal/index.tsx b/src/modules/Channel/components/MessageFeedbackFailedModal/index.tsx
@@ -0,0 +1,59 @@
+import React, { ReactElement, useContext, useRef } from 'react';
+import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import Modal from '../../../../ui/Modal';
+import Button, { ButtonTypes } from '../../../../ui/Button';
+import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
+import '../MessageFeedbackModal/index.scss';
+import { useKeyDown } from '../../../../hooks/useKeyDown/useKeyDown';
+
+export interface MessageFeedbackFailedModalProps {
+  text: string;
+  onCancel?: () => void;
+}
+
+export default function MessageFeedbackFailedModal(props: MessageFeedbackFailedModalProps): ReactElement {
+  const {
+    text,
+    onCancel,
+  } = props;
+
+  const { stringSet } = useContext(LocalizationContext);
+
+  const modalRef = useRef(null);
+  const onKeyDown = useKeyDown(modalRef, {
+    Enter: () => onCancel?.(),
+    Escape: () => onCancel?.(),
+  });
+
+  return (
+    <div onKeyDown={onKeyDown}>
+      <Modal
+        contentClassName='sendbird-message-feedback-modal-content__mobile'
+        type={ButtonTypes.PRIMARY}
+        onSubmit={onCancel}
+        onClose={onCancel}
+        submitText={stringSet.BUTTON__OK}
+        renderHeader={() => (
+          <div className='sendbird-modal__header'>
+            <Label
+              type={LabelTypography.H_1}
+              color={LabelColors.ONBACKGROUND_1}
+              className='sendbird-message-feedback-modal-header'
+            >
+              { text }
+            </Label>
+          </div>
+        )}
+        customFooter={
+          <div className='sendbird-message-feedback-modal-footer__root_failed'>
+            <Button onClick={onCancel}>
+              <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONCONTENT_1}>
+                { stringSet.BUTTON__OK }
+              </Label>
+            </Button>
+          </div>
+        }
+      />
+    </div>
+  );
+}
diff --git a/src/modules/Channel/components/MessageFeedbackModal/index.scss b/src/modules/Channel/components/MessageFeedbackModal/index.scss
@@ -13,6 +13,13 @@
   align-items: center;
 }
 
+.sendbird-message-feedback-modal-footer__root_failed {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 48px;
+}
+
 .sendbird-message-feedback-modal-footer__right-content {
   display: flex;
   gap: 8px;
diff --git a/src/modules/Channel/components/MessageFeedbackModal/index.tsx b/src/modules/Channel/components/MessageFeedbackModal/index.tsx
@@ -13,40 +13,56 @@ import { useKeyDown } from '../../../../hooks/useKeyDown/useKeyDown';
 export interface MessageFeedbackModalProps {
   selectedFeedback: FeedbackRating;
   message: CoreMessageType;
-  onCancel?: () => void;
+  onClose?: () => void;
   onSubmit?: (comment: string) => void;
+  onUpdate?: (comment: string) => void;
   onRemove?: () => void;
 }
 
 export default function MessageFeedbackModal(props: MessageFeedbackModalProps): ReactElement {
   const {
     selectedFeedback,
     message,
-    onCancel,
+    onClose,
     onSubmit,
+    onUpdate,
     onRemove,
   } = props;
 
   const { stringSet } = useContext(LocalizationContext);
   const { isMobile } = useMediaQueryContext();
 
   const isEdit = message?.myFeedback && selectedFeedback === message.myFeedback.rating;
+  const onSubmitWrapper = () => {
+    if (!selectedFeedback) return;
+    const comment = inputRef.current.value ?? '';
+    if (isEdit) {
+      if (comment !== message.myFeedback.comment) {
+        onUpdate?.(comment);
+      } else {
+        onClose?.();
+      }
+    } else if (!message.myFeedback) {
+      onSubmit?.(comment);
+    }
+  };
 
   const modalRef = useRef(null);
   const inputRef = useRef(null);
+
   const onKeyDown = useKeyDown(modalRef, {
-    Enter: () => onSubmit?.(inputRef.current.value ?? ''),
-    Escape: () => onCancel?.(),
+    Enter: () => onSubmitWrapper(),
+    Escape: () => onClose?.(),
   });
 
   return (
     <div onKeyDown={onKeyDown}>
       <Modal
         contentClassName='sendbird-message-feedback-modal-content__mobile'
         type={ButtonTypes.PRIMARY}
-        onCancel={onCancel}
+        onCancel={onClose}
         onSubmit={() => {
-          onSubmit?.(inputRef.current.value ?? '');
+          onSubmitWrapper();
         }}
         submitText={stringSet.BUTTON__SUBMIT}
         renderHeader={() => (
@@ -74,12 +90,12 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
                 : <div/>
             }
             <div className='sendbird-message-feedback-modal-footer__right-content'>
-              <Button type={ButtonTypes.SECONDARY} onClick={onCancel}>
+              <Button type={ButtonTypes.SECONDARY} onClick={onClose}>
                 <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONBACKGROUND_1}>
                   {stringSet.BUTTON__CANCEL}
                 </Label>
               </Button>
-              <Button onClick={() => onSubmit?.(inputRef.current.value ?? '')}>
+              <Button onClick={() => onSubmitWrapper()}>
                 <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONCONTENT_1}>
                   { isEdit ? stringSet.BUTTON__SAVE : stringSet.BUTTON__SUBMIT }
                 </Label>
diff --git a/src/ui/FeedbackIconButton/index.scss b/src/ui/FeedbackIconButton/index.scss
@@ -15,15 +15,29 @@
     border-color: t(on-bg-4);
   }
 
+  &:hover {
+    @include themed() {
+      background-color: t(bg-1);
+    }
+  }
+
   &.sendbird-iconbutton__feedback__disabled {
     cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
-}
 
-.sendbird-iconbutton__feedback__pressed {
-  @include themed() {
-    border-color: t(primary-3);
-    background-color: t(primary-3);
+  &.sendbird-iconbutton__feedback__pressed {
+    &:hover {
+      background-color: transparent;
+    }
+
+    @include themed() {
+      border-color: t(primary-3);
+      background-color: t(primary-3);
+    }
   }
 }
 
diff --git a/src/ui/Label/stringSet.ts b/src/ui/Label/stringSet.ts
@@ -216,12 +216,17 @@ const stringSet = {
     FEEDBACK_LIKE: 'Like',
     FEEDBACK_DISLIKE: 'Dislike',
     // Mobile feedback options menu items
-    EDIT_COMMENT: 'Edit Comment',
+    EDIT_COMMENT: 'Edit comment',
     REMOVE_FEEDBACK: 'Remove Feedback',
     // Feedback modal title
     FEEDBACK_MODAL_TITLE: 'Provide additional feedback (optional)',
     FEEDBACK_CONTENT_PLACEHOLDER: 'Leave a comment',
     BUTTON__REMOVE_FEEDBACK: 'Remove feedback',
+    // Feedback failed modal title
+    FEEDBACK_FAILED_SUBMIT: 'Couldn’t submit. Try again.',
+    FEEDBACK_FAILED_SAVE: 'Couldn’t save. Try again.',
+    FEEDBACK_FAILED_DELETE: 'Couldn’t delete. Try again.',
+
   },
 };
 
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
@@ -1,5 +1,5 @@
 import React, {
-  ReactElement, ReactNode,
+  ReactElement, ReactNode, useContext,
   useRef,
   useState,
 } from 'react';
@@ -23,7 +23,7 @@ import {
   CoreMessageType,
   isMultipleFilesMessage,
 } from '../../utils';
-import { useLocalization } from '../../lib/LocalizationContext';
+import { LocalizationContext, useLocalization } from '../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { EmojiContainer } from '@sendbird/chat';
@@ -43,6 +43,7 @@ import FeedbackIconButton from '../FeedbackIconButton';
 import MobileFeedbackMenu from '../MobileFeedbackMenu';
 import MessageFeedbackModal from '../../modules/Channel/components/MessageFeedbackModal';
 import { SbFeedbackStatus } from './types';
+import MessageFeedbackFailedModal from '../../modules/Channel/components/MessageFeedbackFailedModal';
 
 export interface MessageContentProps {
   className?: string | Array<string>;
@@ -141,6 +142,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const [selectedFeedback, setSelectedFeedback] = useState<FeedbackRating>(null);
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] = useState(false);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+  const [feedbackFailedText, setFeedbackFailedText] = useState('');
+
+  const { stringSet } = useContext(LocalizationContext);
 
   const isByMe = (userId === (message as SendableMessageType)?.sender?.userId)
     || ((message as SendableMessageType)?.sendingStatus === 'pending')
@@ -166,6 +170,11 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const isFeedbackEnabled = config?.groupChannel?.enableFeedback && isFeedbackMessage;
   const feedbackMessageClassName = isFeedbackEnabled ? 'sendbird-message-content__feedback' : '';
 
+  const onCloseFeedbackForm = () => {
+    setSelectedFeedback(null);
+    setShowFeedbackModal(false);
+  };
+
   // onMouseDown: (e: React.MouseEvent<T>) => void;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
@@ -473,40 +482,58 @@ export default function MessageContent(props: MessageContentProps): ReactElement
           />
         )
       }
-      {/* Feedback Modal */}
+      {/* Feedback modal */}
       {
         showFeedbackModal && (
           <MessageFeedbackModal
             selectedFeedback={selectedFeedback}
             message={message}
             onSubmit={async (comment: string) => {
-              if (!selectedFeedback) {
-                return;
-              }
-              if (!message.myFeedback) {
+              try {
                 await message.submitFeedback({
                   rating: selectedFeedback,
                   comment,
                 });
-              } else if (comment !== message.myFeedback.comment) {
-                const newFeedback: Feedback = new Feedback({
-                  id: message.myFeedback.id,
-                  rating: selectedFeedback,
-                  comment,
-                });
-                await message.updateFeedback(newFeedback);
+              } catch (error) {
+                config?.logger?.error?.('Channel: Submit feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
               }
-              setSelectedFeedback(null);
-              setShowFeedbackModal(false);
+              onCloseFeedbackForm();
             }}
-            onCancel={() => {
-              setSelectedFeedback(null);
-              setShowFeedbackModal(false);
+            onUpdate={async (comment: string) => {
+              const newFeedback: Feedback = new Feedback({
+                id: message.myFeedback.id,
+                rating: selectedFeedback,
+                comment,
+              });
+              try {
+                await message.updateFeedback(newFeedback);
+              } catch (error) {
+                config?.logger?.error?.('Channel: Update feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SAVE);
+              }
+              onCloseFeedbackForm();
             }}
+            onClose={onCloseFeedbackForm}
             onRemove={async () => {
-              await message.deleteFeedback(message.myFeedback.id);
-              setSelectedFeedback(null);
-              setShowFeedbackModal(false);
+              try {
+                await message.deleteFeedback(message.myFeedback.id);
+              } catch (error) {
+                config?.logger?.error?.('Channel: Delete feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
+              }
+              onCloseFeedbackForm();
+            }}
+          />
+        )
+      }
+      {/* Feedback failed modal */}
+      {
+        feedbackFailedText && (
+          <MessageFeedbackFailedModal
+            text={feedbackFailedText}
+            onCancel={() => {
+              setFeedbackFailedText('');
             }}
           />
         )
