bug-fix: Fix feedback icon button disabled (#913)

Fixes: [AC-992](https://sendbird.atlassian.net/browse/AC-992)

### Changelogs
- N/A

[AC-992]:
https://sendbird.atlassian.net/browse/AC-992?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: chohongm

src/modules/Channel/components/MessageFeedbackModal/index.tsx

@@ -30,6 +30,8 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
   const { stringSet } = useContext(LocalizationContext);
   const { isMobile } = useMediaQueryContext();
 
+  const isEdit = message?.myFeedback && selectedFeedback === message.myFeedback.rating;
+
   const modalRef = useRef(null);
   const inputRef = useRef(null);
   const onKeyDown = useKeyDown(modalRef, {
@@ -79,7 +81,7 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
               </Button>
               <Button onClick={() => onSubmit?.(inputRef.current.value ?? '')}>
                 <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONCONTENT_1}>
-                  {stringSet.BUTTON__SUBMIT}
+                  { isEdit ? stringSet.BUTTON__SAVE : stringSet.BUTTON__SUBMIT }
                 </Label>
               </Button>
             </div>
@@ -90,10 +92,7 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
           <Input
             name='sendbird-message-feedback-modal-body__root'
             ref={inputRef}
-            value={(message?.myFeedback && selectedFeedback === message.myFeedback.rating)
-              ? message.myFeedback?.comment
-              : undefined
-            }
+            value={isEdit ? message.myFeedback?.comment : undefined}
             placeHolder={stringSet.FEEDBACK_CONTENT_PLACEHOLDER}
             autoFocus={true}
           />

src/ui/FeedbackIconButton/index.scss

@@ -14,6 +14,10 @@
   @include themed() {
     border-color: t(on-bg-4);
   }
+
+  &.sendbird-iconbutton__feedback__disabled {
+    cursor: not-allowed;
+  }
 }
 
 .sendbird-iconbutton__feedback__pressed {
@@ -33,6 +37,14 @@
       fill: t(on-bg-2);
     }
   }
+
+  &.sendbird-iconbutton__feedback__inner__disabled {
+    svg path {
+      @include themed() {
+        fill: t(on-bg-4);
+      }
+    }
+  }
 }
 
 .sendbird-iconbutton__feedback__inner__pressed {

src/ui/FeedbackIconButton/index.tsx

@@ -10,6 +10,7 @@ export interface FeedbackIconButtonProps {
   children: ReactNode;
   isSelected: boolean;
   onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
 }
 
 const FeedbackIconButton = React.forwardRef((
@@ -20,23 +21,27 @@ const FeedbackIconButton = React.forwardRef((
     children,
     isSelected,
     onClick = () => { /* noop */ },
+    disabled = false,
   } = props;
   return (
     <button
       className={[
         'sendbird-iconbutton__feedback',
         isSelected ? 'sendbird-iconbutton__feedback__pressed' : '',
+        disabled ? 'sendbird-iconbutton__feedback__disabled' : '',
       ].join(' ')}
       ref={ref}
       type='button'
       onClick={(e) => {
         onClick?.(e);
       }}
+      disabled={disabled}
     >
       <span
         className={[
           'sendbird-iconbutton__feedback__inner',
           isSelected ? 'sendbird-iconbutton__feedback__inner__pressed' : '',
+          disabled ? 'sendbird-iconbutton__feedback__inner__disabled' : '',
         ].join(' ')}
       >
         {children}

src/ui/MessageContent/index.tsx

@@ -333,6 +333,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                     setShowFeedbackModal(true);
                   }
                 }}
+                disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.GOOD}
               >
                 <Icon
                   type={IconTypes.FEEDBACK_LIKE}
@@ -350,6 +351,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                     setShowFeedbackModal(true);
                   }
                 }}
+                disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.BAD}
               >
                 <Icon
                   type={IconTypes.FEEDBACK_DISLIKE}