@capillarytech/creatives-library 8.0.221 → 8.0.223-alpha.0

package/config/app.js

@@ -21,7 +21,6 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
-    // api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/constants/unified.js

@@ -187,5 +187,3 @@ export const LOGOUT_FAILURE = 'cap/LOGOUT_FAILURE';
 export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
 
 export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
-
-export const CAPILLARY_LOADING_LOGO = 'https://storage.crm.n.content-cdn.io/capillary/capillary_loading_logo.gif';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.221",
+  "version": "8.0.223-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -264,7 +264,6 @@ export const getUserData = () => {
 
 export const createTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/SMS`;
-  console.log("creating template",template);
   return request(url, getAPICallObject('POST', template));
 };
 
@@ -347,7 +346,6 @@ export const getAllTemplates = async ({channel, queryParams = {}}) => {
 
 export const deleteTemplate = ({channel, id}) => {
   const url = `${API_ENDPOINT}/templates/${id}/${channel}`;
-  console.log("deleting template", url);
   return request(url, getAPICallObject('DELETE'));
   //return API.deleteResource(url);
 };

package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js

@@ -19,6 +19,7 @@ const SendTestMessage = ({
   formData,
   isSendingTestMessage,
   formatMessage,
+  isContentValid = true,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -43,7 +44,11 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
+            <CapButton
+              onClick={handleSendTestMessage}
+              disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage || !isContentValid}
+              title={!isContentValid ? formatMessage(messages.contentInvalid) : ''}
+            >
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),
@@ -63,6 +68,7 @@ SendTestMessage.propTypes = {
   formData: PropTypes.object.isRequired,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  isContentValid: PropTypes.bool,
 };
 
 export default SendTestMessage;

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -52,6 +52,7 @@ import {
   INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
 } from './constants';
 import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
+import { validateIfTagClosed } from '../../utils/tagValidations';
 
 const TestAndPreviewSlidebox = (props) => {
   const {
@@ -103,10 +104,147 @@ const TestAndPreviewSlidebox = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately
   const previousBeeContentRef = useRef(''); // Track previous BEE content to prevent unnecessary updates
+  const [isContentValid, setIsContentValid] = useState(true); // Track if content tags are valid
 
   const isUpdatePreviewDisabled = useMemo(() => (
-    requiredTags.some((tag) => !customValues[tag.fullPath])
-  ), [requiredTags, customValues]);
+    requiredTags.some((tag) => !customValues[tag.fullPath]) || !isContentValid
+  ), [requiredTags, customValues, isContentValid]);
+
+  // Function to validate tags in content
+  const validateContentTags = (content) => {
+    if (!content) return true;
+    
+    try {
+      // Convert HTML to text (same as what's used for tag extraction)
+      // This ensures we validate the same content that will be used for tag extraction
+      const textContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+      
+      // Check if there are any braces in the content
+      const hasBraces = textContent.includes('{') || textContent.includes('}');
+      
+      // If no braces exist, content is valid (no tag validation needed)
+      if (!hasBraces) {
+        return true;
+      }
+      
+      // First check if tags are properly closed using the utility function
+      // This validates that all opening braces have corresponding closing braces
+      if (!validateIfTagClosed(textContent)) {
+        return false;
+      }
+      
+      // Now validate tag format: tags must be in format {{tag_name}}
+      // Find all valid tag patterns {{tag_name}}
+      const tagPattern = /{{[^}]*}}/g;
+      const matches = textContent.match(tagPattern) || [];
+      
+      // Remove all valid {{tag}} patterns from content to check for invalid braces
+      let contentWithoutValidTags = textContent;
+      matches.forEach((match) => {
+        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
+      });
+      
+      // Check if there are any remaining braces (single braces or unclosed braces)
+      // These would be invalid patterns like {tag}, {first, first}, etc.
+      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
+        return false;
+      }
+      
+      // Check each tag for valid format
+      for (const match of matches) {
+        // Valid tag format: {{tag_name}} - must start with {{ and end with }}
+        if (!match.startsWith('{{') || !match.endsWith('}}')) {
+          return false;
+        }
+        
+        // Extract tag name (content between {{ and }})
+        const tagName = match.slice(2, -2).trim();
+        
+        // Tag name should not be empty
+        if (!tagName) {
+          return false;
+        }
+        
+        // Check for invalid patterns in tag name
+        // Invalid patterns: "first or first", "first and first", etc.
+        const invalidPatterns = [
+          /\s+or\s+/i,  // " or " as separate word (e.g., "first or first")
+          /\s+and\s+/i, // " and " as separate word
+        ];
+        
+        for (const pattern of invalidPatterns) {
+          if (pattern.test(tagName)) {
+            return false;
+          }
+        }
+        
+        // Check for unclosed single braces in tag name (e.g., {{first{name}})
+        const singleOpenBraces = (tagName.match(/{/g) || []).length;
+        const singleCloseBraces = (tagName.match(/}/g) || []).length;
+        if (singleOpenBraces !== singleCloseBraces) {
+          return false;
+        }
+      }
+      
+      return true;
+    } catch (error) {
+      // If conversion fails, fall back to validating the original content
+      console.warn('Error converting content for validation:', error);
+      const hasBraces = content.includes('{') || content.includes('}');
+      if (!hasBraces) {
+        return true;
+      }
+      
+      // Apply same validation to original content
+      if (!validateIfTagClosed(content)) {
+        return false;
+      }
+      
+      const tagPattern = /{{[^}]*}}/g;
+      const matches = content.match(tagPattern) || [];
+      
+      // Remove all valid {{tag}} patterns from content to check for invalid braces
+      let contentWithoutValidTags = content;
+      matches.forEach((match) => {
+        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
+      });
+      
+      // Check if there are any remaining braces (single braces or unclosed braces)
+      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
+        return false;
+      }
+      
+      for (const match of matches) {
+        if (!match.startsWith('{{') || !match.endsWith('}}')) {
+          return false;
+        }
+        
+        const tagName = match.slice(2, -2).trim();
+        if (!tagName) {
+          return false;
+        }
+        
+        const invalidPatterns = [
+          /\s+or\s+/i,
+          /\s+and\s+/i,
+        ];
+        
+        for (const pattern of invalidPatterns) {
+          if (pattern.test(tagName)) {
+            return false;
+          }
+        }
+        
+        const singleOpenBraces = (tagName.match(/{/g) || []).length;
+        const singleCloseBraces = (tagName.match(/}/g) || []).length;
+        if (singleOpenBraces !== singleCloseBraces) {
+          return false;
+        }
+      }
+      
+      return true;
+    }
+  };
 
   // Function to resolve tags in text with custom values
   const resolveTagsInText = (text, tagValues) => {
@@ -153,6 +291,10 @@ const TestAndPreviewSlidebox = (props) => {
       if (existingContent && existingContent.trim() !== '') {
         // We already have content, update local state only if it's different
         if (existingContent !== previousBeeContentRef.current) {
+          // Validate content tags for BEE editor
+          const isValid = validateContentTags(existingContent);
+          setIsContentValid(isValid);
+          
           previousBeeContentRef.current = existingContent;
           setBeeContent(existingContent);
           setPreviewDataHtml({
@@ -186,6 +328,10 @@ const TestAndPreviewSlidebox = (props) => {
           }
 
           if (htmlFile) {
+            // Validate content tags
+            const isValid = validateContentTags(htmlFile);
+            setIsContentValid(isValid);
+
             // Update our states
             previousBeeContentRef.current = htmlFile;
             setBeeContent(htmlFile);
@@ -194,9 +340,16 @@ const TestAndPreviewSlidebox = (props) => {
               resolvedTitle: formData['template-subject'] || ''
             });
 
-            // Always extract tags when content changes
-            const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
-            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+            // Only extract tags if content is valid
+            if (isValid) {
+              const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
+              actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+            } else {
+              // Show error notification for invalid content
+              CapNotification.error({
+                message: formatMessage(messages.contentInvalid),
+              });
+            }
           }
 
           // Restore original handler
@@ -211,23 +364,45 @@ const TestAndPreviewSlidebox = (props) => {
         const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
         if (templateContent) {
+          // Validate content tags
+          const isValid = validateContentTags(templateContent);
+          setIsContentValid(isValid);
+
           // Update preview with initial content
           setPreviewDataHtml({
             resolvedBody: templateContent,
             resolvedTitle: formData['template-subject'] || ''
           });
 
-          // Always extract tags when showing
-          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          // Only extract tags if content is valid
+          if (isValid) {
+            const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          } else {
+            // Show error notification for invalid content
+            CapNotification.error({
+              message: formatMessage(messages.contentInvalid),
+            });
+          }
         } else {
           // Fallback to content prop if no template content
-          const payloadContent = convert(
-            getCurrentContent,
-            GLOBAL_CONVERT_OPTIONS
-          );
-          // Always extract tags when showing
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          const contentToValidate = getCurrentContent;
+          const isValid = validateContentTags(contentToValidate);
+          setIsContentValid(isValid);
+
+          // Only extract tags if content is valid
+          if (isValid) {
+            const payloadContent = convert(
+              contentToValidate,
+              GLOBAL_CONVERT_OPTIONS
+            );
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+          } else {
+            // Show error notification for invalid content
+            CapNotification.error({
+              message: formatMessage(messages.contentInvalid),
+            });
+          }
         }
       }
       
@@ -243,17 +418,28 @@ const TestAndPreviewSlidebox = (props) => {
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
     
-    if (templateContent && templateContent.trim() !== '') {
-      // Common function to handle content update
+    if (templateContent && templateContent.trim() !== '' && show) {
+      // Common function to handle content update with validation
       const handleContentUpdate = (content) => {
+        // Validate content tags for each update
+        const isValid = validateContentTags(content);
+        setIsContentValid(isValid);
+
         setPreviewDataHtml({
           resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
-        // Extract tags from content
-        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
-        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        // Only extract tags if content is valid
+        if (isValid) {
+          const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+        } else {
+          // Show error notification for invalid content
+          CapNotification.error({
+            message: formatMessage(messages.contentInvalid),
+          });
+        }
       };
 
       if (isDragDrop) {
@@ -287,6 +473,7 @@ const TestAndPreviewSlidebox = (props) => {
       setTagsExtracted(false);
       setPreviewDevice('desktop');
       setSelectedTestEntities([]);
+      setIsContentValid(true);
       actions.clearPrefilledValues();
     }
   }, [show]);
@@ -530,6 +717,22 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle update preview
   const handleUpdatePreview = async () => {
+    // Re-validate content to get latest state (in case liquid errors were fixed)
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const contentToValidate = templateContent || getCurrentContent;
+    const isValid = validateContentTags(contentToValidate);
+    setIsContentValid(isValid);
+
+    // Check if content is valid before updating preview
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
+
     try {
       // Include unsubscribe tag if content contains it
       const resolvedTags = { ...customValues };
@@ -559,9 +762,20 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const content = templateContent || getCurrentContent;
+
+    // Validate content tags before extracting
+    const isValid = validateContentTags(content);
+    setIsContentValid(isValid);
+
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
     
     // Check for personalization tags (excluding unsubscribe)
-    const content = templateContent || getCurrentContent;
     const tags = content.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
     
@@ -590,6 +804,22 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   const handleSendTestMessage = () => {
+    // Re-validate content to get latest state (in case liquid errors were fixed)
+    const currentTabData = formData[currentTab - 1];
+    const activeTab = currentTabData?.activeTab;
+    const templateContent = currentTabData?.[activeTab]?.['template-content'];
+    const contentToValidate = templateContent || getCurrentContent;
+    const isValid = validateContentTags(contentToValidate);
+    setIsContentValid(isValid);
+
+    // Check if content is valid before sending test message
+    if (!isValid) {
+      CapNotification.error({
+        message: formatMessage(messages.contentInvalid),
+      });
+      return;
+    }
+
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
       const group = testGroups.find((g) => g.groupId === entityId);
@@ -685,6 +915,7 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
+      isContentValid={isContentValid}
     />
   );
 

package/v2Components/TestAndPreviewSlidebox/messages.js

@@ -144,4 +144,12 @@ export default defineMessages({
     id: `${scope}.invalidJSON`,
     defaultMessage: 'Invalid JSON input',
   },
+  contentInvalid: {
+    id: `${scope}.contentInvalid`,
+    defaultMessage: 'Content is invalid. Please fix the tags in your content before testing or previewing.',
+  },
+  previewUpdateError: {
+    id: `${scope}.previewUpdateError`,
+    defaultMessage: 'Failed to update preview',
+  },
 });

package/v2Containers/Cap/index.js

@@ -54,7 +54,6 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-import {CAPILLARY_LOADING_LOGO} from '../../constants/unified';
 const gtm = window.dataLayer || [];
 const {
   logNewTab,
@@ -511,12 +510,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           <div className="cap-loader-box">
             <img
               className="loader-image"
-              src={CAPILLARY_LOADING_LOGO}
-              alt="Capillary"
-              loading="lazy"
-              data-testid="capillary-logo"
-              aria-label="Capillary loading logo"
-            />
+              src="https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/88561f46de9407021cad.gif"
+              alt="Capillary"/>
           </div> : <>
             <Helmet
               titleTemplate="Capillary - %s"

package/v2Containers/Login/index.js

@@ -14,7 +14,6 @@ import LoginForm from './components/LoginForm';
 import * as actions from '../Cap/actions';
 import { UserIsNotAuthenticated } from '../../utils/authWrapper';
 const logo = require('./assets/images/capillary_logo.png');
-import {CAPILLARY_LOADING_LOGO} from '../../constants/unified';
 
 export class Login extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -66,12 +65,8 @@ export class Login extends React.Component { // eslint-disable-line react/prefer
           ? <div className="cap-loader-box">
             <img
               className="loader-image"
-              src={CAPILLARY_LOADING_LOGO}
-              alt="Capillary"
-              loading="lazy"
-              data-testid="capillary-logo"
-              aria-label="Capillary loading logo"
-            />
+              src={"https://storage.crm.n.content-cdn.io/capillary/capillary_loading_logo.gif"}
+              alt="Capillary"/>
           </div>
           : <Col className="login-box" style={{textAlign: 'center'}}>
             <h2 className="ui image header">

package/v2Containers/Rcs/index.js

@@ -611,6 +611,9 @@ export const Rcs = (props) => {
 
   useEffect(() => {
     if (templateType === contentType.text_message) {
+      setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
+      setTemplateTitle('');
+      setTemplateTitleError('');
       if (!isEditFlow && isFullMode) {
         setUpdateRcsImageSrc('');
         setUpdateRcsVideoSrc({});
@@ -631,6 +634,7 @@ export const Rcs = (props) => {
       updateRcsImageSrc('');
       setRcsThumbnailSrc('');
     }
+    onTemplateDescChange({ target: { value: templateDesc } });
   }, [templateType, isEditFlow, isFullMode]);
   
   useEffect(() => {
@@ -875,9 +879,16 @@ export const Rcs = (props) => {
   };
 
   const onTemplateDescChange = ({ target: { value } }) => {
-    const lengthError = templateDescErrorHandler(value);
+    let errorMessage = false;
+    if(templateType === contentType.text_message && value?.length > RCS_TEXT_MESSAGE_MAX_LENGTH){
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+     } else if(templateType === contentType.rich_card && value?.length > RCS_RICH_CARD_MAX_LENGTH){
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+     } else {
+      errorMessage = false;
+    }
     const varError = variableErrorHandling(value);
-    const error = lengthError || varError;
+    const error = errorMessage || varError;
     setTemplateDesc(value);
     setTemplateDescError(error);
   };
@@ -900,7 +911,7 @@ export const Rcs = (props) => {
     if (value === '' && isMediaTypeText) {
       errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
     } else if (value?.length > maxLength) {
-      errorMessage = formatMessage(messages.templateDescLengthError, { maxLength });
+      errorMessage = formatMessage(messages.templateMessageLengthError);
     }
     
     if (isBraceError) {

package/v2Containers/Rcs/messages.js

@@ -127,7 +127,7 @@ export default defineMessages({
   },
   templateHeaderLengthError: {
     id: `${prefix}.templateHeaderLengthError`,
-    defaultMessage: 'Header text exceeds the character limit.',
+    defaultMessage: 'Title text exceeds the character limit.',
   },
   emptyTemplateMessageErrorMessage: {
     id: `${prefix}.emptyTemplateMessageErrorMessage`,
@@ -242,10 +242,6 @@ export default defineMessages({
     id: `${prefix}.carousel`,
     defaultMessage: 'carousel',
   },
-  templateDescLengthError: {
-    id: `${prefix}.templateDescLengthError`,
-    defaultMessage: 'Template message length cannot exceed {maxLength} characters',
-  },
   rcsDoneBtnToolTip: {
     id: `${prefix}.rcsDoneBtnToolTip`,
     defaultMessage: 'Please add template name {type} to proceed further',

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -64825,7 +64825,7 @@ new message content.",
                             className="rcs-template-title-input rcs-edit-disabled"
                             data-testid="template_title"
                             disabled={false}
-                            errorMessage={false}
+                            errorMessage=""
                             labelPosition="top"
                             onChange={[Function]}
                             size="default"
@@ -64834,13 +64834,13 @@ new message content.",
                             <ComponentWithLabelHOC__CapComponentStyled
                               className="component-with-label rcs-template-title-input rcs-edit-disabled"
                               disabled={false}
-                              errorMessage={false}
+                              errorMessage=""
                               labelPosition="top"
                             >
                               <div
                                 className="ComponentWithLabelHOC__CapComponentStyled-sc-1qk6bpg-0 kOOkix component-with-label rcs-template-title-input rcs-edit-disabled"
                                 disabled={false}
-                                errorMessage={false}
+                                errorMessage=""
                                 labelPosition="top"
                               >
                                 <ComponentWithLabelHOC__ComponentWithLabelWrapper
@@ -64853,7 +64853,7 @@ new message content.",
                                     <CapInput
                                       data-testid="template_title"
                                       disabled={false}
-                                      errorMessage={false}
+                                      errorMessage=""
                                       onChange={[Function]}
                                       size="default"
                                       value=""
@@ -78317,7 +78317,7 @@ new message content.",
                             className="rcs-template-title-input rcs-edit-disabled"
                             data-testid="template_title"
                             disabled={false}
-                            errorMessage={false}
+                            errorMessage=""
                             labelPosition="top"
                             onChange={[Function]}
                             size="default"
@@ -78326,13 +78326,13 @@ new message content.",
                             <ComponentWithLabelHOC__CapComponentStyled
                               className="component-with-label rcs-template-title-input rcs-edit-disabled"
                               disabled={false}
-                              errorMessage={false}
+                              errorMessage=""
                               labelPosition="top"
                             >
                               <div
                                 className="ComponentWithLabelHOC__CapComponentStyled-sc-1qk6bpg-0 kOOkix component-with-label rcs-template-title-input rcs-edit-disabled"
                                 disabled={false}
-                                errorMessage={false}
+                                errorMessage=""
                                 labelPosition="top"
                               >
                                 <ComponentWithLabelHOC__ComponentWithLabelWrapper
@@ -78345,7 +78345,7 @@ new message content.",
                                     <CapInput
                                       data-testid="template_title"
                                       disabled={false}
-                                      errorMessage={false}
+                                      errorMessage=""
                                       onChange={[Function]}
                                       size="default"
                                       value=""
@@ -88907,6 +88907,12 @@ new message content.",
             Array [
               0,
             ],
+            Array [
+              0,
+            ],
+            Array [
+              1,
+            ],
           ],
           "results": Array [
             Object {
@@ -88945,6 +88951,14 @@ new message content.",
               "type": "return",
               "value": undefined,
             },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
           ],
         },
         "createTemplate": [MockFunction],
@@ -89822,6 +89836,100 @@ new message content.",
                 "id": "creatives.containersV2.Rcs.btnDesc",
               },
             ],
+            Array [
+              Object {
+                "defaultMessage": "Image",
+                "id": "creatives.containersV2.Rcs.mediaImage",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Video/Slideshow",
+                "id": "creatives.containersV2.Rcs.mediaVideo",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "text message",
+                "id": "creatives.containersV2.Rcs.text_message",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "rich card",
+                "id": "creatives.containersV2.Rcs.richCard",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Not yet enabled. Coming soon!",
+                "id": "creatives.containersV2.Rcs.disabledCarouselTooltip",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "carousel",
+                "id": "creatives.containersV2.Rcs.carousel",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Enter template name",
+                "id": "creatives.containersV2.templateNamePlaceholder",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Creative name",
+                "id": "creatives.containersV2.creativeNameLabel",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Template Type",
+                "id": "creatives.containersV2.Rcs.templateTypeLabel",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Text message",
+                "id": "creatives.containersV2.Rcs.templateDescLabel",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Add variables",
+                "id": "creatives.containersV2.Rcs.addVar",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Enter the text message",
+                "id": "creatives.containersV2.Rcs.templateDescPlaceholder",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Characters count: {currentLength}/{maxLength}",
+                "id": "creatives.containersV2.Rcs.templateMessageLength",
+              },
+              Object {
+                "currentLength": 0,
+                "maxLength": 160,
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Buttons",
+                "id": "creatives.containersV2.Rcs.btnLabel",
+              },
+            ],
+            Array [
+              Object {
+                "defaultMessage": "Use buttons to redirect user to respective link or quick response/ action.",
+                "id": "creatives.containersV2.Rcs.btnDesc",
+              },
+            ],
           ],
           "results": Array [
             Object {
@@ -90344,6 +90452,66 @@ new message content.",
               "type": "return",
               "value": undefined,
             },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
           ],
         },
       }
@@ -97024,7 +97192,6 @@ new message content.",
                             Object {
                               "rcsPreviewContent": Object {
                                 "rcsDesc": "",
-                                "rcsImageSrc": "",
                                 "rcsSuggestions": Array [
                                   Object {
                                     "index": 0,
@@ -97037,7 +97204,6 @@ new message content.",
                                   },
                                 ],
                                 "rcsTitle": "",
-                                "rcsVideoSrc": "",
                               },
                             }
                           }
@@ -97051,7 +97217,6 @@ new message content.",
                               Object {
                                 "rcsPreviewContent": Object {
                                   "rcsDesc": "",
-                                  "rcsImageSrc": "",
                                   "rcsSuggestions": Array [
                                     Object {
                                       "index": 0,
@@ -97064,7 +97229,6 @@ new message content.",
                                     },
                                   ],
                                   "rcsTitle": "",
-                                  "rcsVideoSrc": "",
                                 },
                               }
                             }