@capillarytech/creatives-library 7.10.49 → 7.10.50

package/v2Containers/Whatsapp/index.js

@@ -51,9 +51,11 @@ import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import { validateTags } from '../../utils/tagValidations';
 
 let varMap = {};
 let editContent = {};
+let tagValidationResponse = {};
 
 export const Whatsapp = (props) => {
   const {
@@ -73,6 +75,7 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
+    getFormData
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -91,13 +94,16 @@ export const Whatsapp = (props) => {
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
-  const [templateStatus, setTemplateStatus] = useState();
+  const [templateStatus, setTemplateStatus] = useState(
+    WHATSAPP_STATUSES.unsubmitted,
+  );
   const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
   //for tag only
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
@@ -108,7 +114,8 @@ export const Whatsapp = (props) => {
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-
+    z-index: 1;
+    
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -140,7 +147,6 @@ export const Whatsapp = (props) => {
         setSpin(true);
         actions.getTemplateDetails(id);
       }
-      setEditFlow(true);
     }
     //cleanup code
     return () => {
@@ -154,9 +160,10 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = editData.templateDetails || templateData || {};
+    } = isFullMode ? editData.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
+      setEditFlow(true);
       setTemplateName(name);
       setTemplateDate(createdAt);
       const {
@@ -260,6 +267,27 @@ export const Whatsapp = (props) => {
     }
   }, [metaEntities, isEditFlow]);
 
+    //performs tag validation
+  useEffect(() => {
+    if (
+      !isFullMode &&
+      updatedSmsEditor?.length > 0 &&
+      !updatedSmsEditor.join('').match(validVarRegex)
+    ) {
+      tagValidationResponse =
+        validateTags({
+          content: updatedSmsEditor.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+        }) || {};
+      updateIsTagValidationError(
+        tagValidationResponse.unsupportedTags.length > 0,
+      );
+    }
+  }, [updatedSmsEditor, tags]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -467,13 +495,16 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: `$'${templateMessage}\nClick {{${
-                  addedVarCount + 1
-                }}} to unsubscribe'`,
+                content: 
+                  isEditFlow 
+                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
+                  : `$'${templateMessage}\nClick {{${
+                    addedVarCount + 1 }}} to unsubscribe'`,
               },
             ],
-            mediaType: 'text',
-            varMapped: {},
+            mediaType: 'TEXT',
+            varMapped: varMap,
+            templateEditor: templateMessage,
             accountId,
             accessToken,
             accountName,
@@ -518,6 +549,15 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const saveToMessage = () => {
+    getFormData({
+      value: createPayload(),
+      _id: params?.paramObj?.id,
+      validity: true,
+      type: 'WHATSAPP',
+    });
+  }
+
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -773,14 +813,23 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const tagValidationErrorMessage = () => {
+    const { unsupportedTags = [] } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    return <CapError>{tagError}</CapError>;
+  };
+
   const editModeContent = (
     <>
-      {templateStatus && (
-        <CapAlert
-          message={getTemplateStatusMessage()}
-          type={getTemplateStatusType()}
-        />
-      )}
+      <CapAlert
+        message={getTemplateStatusMessage()}
+        type={getTemplateStatusType()}
+      />
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -814,6 +863,7 @@ export const Whatsapp = (props) => {
       </CapTooltip>
 
       {renderMessageLength()}
+      {isTagValidationError && tagValidationErrorMessage()}
     </>
   );
   //edit methods end
@@ -834,12 +884,19 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{ templateMsg }}
-        whatsappContentLen={isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length}
         whatsappAccountName={accountName}
       />
     );
   };
 
+  const isEditDoneDisabled = () => {
+    return isTagValidationError || Object.values(varMap).some( (inputValue) => {
+      if (inputValue === '') {
+        return true;
+      }
+    });
+  }
+
   return (
     <CapSpin spinning={spin}>
       <CapRow>
@@ -874,6 +931,17 @@ export const Whatsapp = (props) => {
             </CapButton>
           </>
         )}
+        {!isFullMode && isEditFlow && (
+          <>
+            <CapButton
+              onClick={saveToMessage}
+              disabled={isEditDoneDisabled()}
+              className="whatsapp-create-btn"
+            >
+              <FormattedMessage {...messages.done} />
+            </CapButton>
+          </>
+        )}
       </WhatsappFooter>
     </CapSpin>
   );

package/v2Containers/Whatsapp/messages.js

@@ -232,4 +232,13 @@ export default defineMessages({
     id: `${prefix}.disabledEditTooltipStatus`,
     defaultMessage: 'awaiting for approval',
   },
+  done: {
+    id: `${prefix}.done`,
+    defaultMessage: 'Done',
+  },
+  unsupportedTagsValidationError: {
+    id: `${prefix}.unsupportedTagsValidationError`,
+    defaultMessage:
+      'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
 });