CCS-100179 Fix input with empty data, add clean icon

frontend/app/components/Input.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react'
 import styled from 'styled-components'
+import Icon from '../assets/clear-input.svg'
 
 const InputStyled = styled.input.attrs({ className: 'input' })`
   padding: 12px 20px;
@@ -13,6 +14,13 @@ const InputStyled = styled.input.attrs({ className: 'input' })`
   background-color: var(--input-bg);
 `
 
+const CloseIcon = styled(Icon)`
+  position: absolute;
+  transform: translate(-150%, 102%);
+  color: #767676;
+  cursor: pointer;
+`
+
 type Props = {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   id?: string
@@ -22,7 +30,22 @@ type Props = {
 }
 
 const Input: FC<Props> = props => {
-  return <InputStyled {...props} />
+  const handleClear = () => {
+    const event = {
+      target: {
+        value: '',
+      },
+    } as React.ChangeEvent<HTMLInputElement>
+
+    props.onChange?.(event)
+  }
+
+  return (
+    <>
+      <InputStyled {...props} />
+      {!props.type && props.value && <CloseIcon onClick={handleClear} id={`${props.id}.field-clear`} />}
+    </>
+  )
 }
 
 export default Input

frontend/app/modules/send-message/send-message.store.ts

@@ -14,8 +14,10 @@ export class SendMessageStore {
     this.response = null
   }
 
-  async sendMessage(messageBody: string, groupChatId: string, userHuid: string): Promise<void> {
+  async sendMessage(messageBody: string, groupChatId: string, userHuidRaw: string): Promise<void> {
     try {
+      const userHuid = !userHuidRaw ? null : userHuidRaw
+
       const response = (await SDK.sendMessage({ messageBody, groupChatId, userHuid })) as StatusResponse
 
       if (response.payload.status === STATUS.ERROR) {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-feature-smartapp",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "SmartApp with all features",
   "main": "index.js",
   "scripts": {