Display warning & attachment fixes

src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.module.css

@@ -22,3 +22,12 @@
   align-items: center;
   margin-left: 10px;
 }
+
+.FormHelperText {
+  position: absolute;
+  margin-top: 65px;
+  color: #ff0000;
+  width: 85%;
+  left: 0px;
+  line-height: 1.3;
+}

src/containers/Chat/ChatMessages/AddAttachment/AddAttachment.tsx

@@ -58,6 +58,26 @@ export const AddAttachment: React.FC<AddAttachmentPropTypes> = ({
     attachmentURL: Yup.string().required('URL is required.'),
   });
 
+  const displayWarning = () => {
+    if (attachmentType === 'STICKER') {
+      return (
+        <div className={styles.FormHelperText}>
+          <ol>
+            <li>Animated stickers are not supported.</li>
+            <li>Captions along with stickers are not supported.</li>
+          </ol>
+        </div>
+      );
+    }
+    return (
+      <div className={styles.FormHelperText}>
+        <ol>
+          <li>Captions along with audio are not supported.</li>
+        </ol>
+      </div>
+    );
+  };
+
   const form = (
     <Formik
       enableReinitialize
@@ -80,8 +100,6 @@ export const AddAttachment: React.FC<AddAttachmentPropTypes> = ({
             }}
             handleCancel={() => {
               setAttachment(false);
-              setAttachmentType('');
-              setAttachmentURL('');
             }}
             buttonOk="Add"
             alignButtons="left"
@@ -95,11 +113,13 @@ export const AddAttachment: React.FC<AddAttachmentPropTypes> = ({
                   <CrossIcon
                     onClick={() => {
                       setAttachmentType('');
+                      setAttachmentURL('');
                       setAttachmentAdded(false);
                     }}
                   />
                 </div>
               ) : null}
+              {attachmentType === 'STICKER' || attachmentType === 'AUDIO' ? displayWarning() : null}
             </div>
           </DialogBox>
         </Form>

src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx

@@ -54,7 +54,7 @@ export const ChatInput: React.SFC<ChatInputProps> = (props) => {
   const [searchVal, setSearchVal] = useState('');
   const [attachment, setAttachment] = useState(false);
   const [attachmentAdded, setAttachmentAdded] = useState(false);
-  const [attachmentType, setAttachmentType] = useState('');
+  const [attachmentType, setAttachmentType] = useState<any>();
   const [attachmentURL, setAttachmentURL] = useState('');
   const [variable, setVariable] = useState(false);
   const [updatedEditorState, setUpdatedEditorState] = useState<any>();
@@ -354,6 +354,7 @@ export const ChatInput: React.SFC<ChatInputProps> = (props) => {
               className={updatedEditorState ? styles.CrossIcon : styles.CrossIconWithVariable}
               onClick={() => {
                 resetVariable();
+                resetAttachment();
               }}
             >
               <CrossIcon />

src/containers/Template/Form/Template.tsx

@@ -20,28 +20,6 @@ import { CREATE_MEDIA_MESSAGE } from '../../../graphql/mutations/Chat';
 import { Checkbox } from '../../../components/UI/Form/Checkbox/Checkbox';
 import { USER_LANGUAGES } from '../../../graphql/queries/Organization';
 
-const validation = {
-  language: Yup.object().nullable().required('Language is required.'),
-  label: Yup.string().required('Title is required.').max(50, 'Title length is too long.'),
-  body: Yup.string()
-    .transform((current, original) => {
-      return original.getCurrentContent().getPlainText();
-    })
-    .required('Message is required.'),
-  type: Yup.object()
-    .nullable()
-    .when('attachmentURL', {
-      is: (val) => val && val !== '',
-      then: Yup.object().required('Type is required.'),
-    }),
-  attachmentURL: Yup.string()
-    .nullable()
-    .when('type', {
-      is: (val) => val && val.id,
-      then: Yup.string().required('Attachment URL is required.'),
-    }),
-};
-
 const HSMValidation = {
   example: Yup.string()
     .transform((current, original) => {
@@ -436,6 +414,31 @@ const Template: React.SFC<TemplateProps> = (props) => {
     return data;
   };
 
+  const validation = {
+    language: Yup.object().nullable().required('Language is required.'),
+    label: Yup.string().required('Title is required.').max(50, 'Title length is too long.'),
+    body: Yup.string()
+      .transform((current, original) => {
+        return original.getCurrentContent().getPlainText();
+      })
+      .when('type', {
+        is: (val) => (!defaultAttribute.isHsm && !val) || defaultAttribute.isHsm,
+        then: Yup.string().required('Message is required.'),
+      }),
+    type: Yup.object()
+      .nullable()
+      .when('attachmentURL', {
+        is: (val) => val && val !== '',
+        then: Yup.object().required('Type is required.'),
+      }),
+    attachmentURL: Yup.string()
+      .nullable()
+      .when('type', {
+        is: (val) => val && val.id,
+        then: Yup.string().required('Attachment URL is required.'),
+      }),
+  };
+
   const validationObj = defaultAttribute.isHsm ? { ...validation, ...HSMValidation } : validation;
   const FormSchema = Yup.object().shape(validationObj, [['type', 'attachmentURL']]);