@capillarytech/creatives-library 7.12.24 → 7.12.26

package/package.json

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

package/v2Components/CapActionButton/index.js

@@ -45,13 +45,14 @@ export const CapActionButton = (props) => {
     let errorMessage = false;
     if (!isUrl(val)) {
       errorMessage = formatMessage(messages.inValidUrlErrorMessage);
-    } else {
-      updateButtonChange([{
-        type,
-        text: buttonText,
-        url: val,
-      }]);
     }
+    updateButtonChange({
+      type,
+      text: buttonText,
+      url: val,
+      error: errorMessage,
+    });
+
     updateButtonURLErrorMessage(errorMessage);
   };
 

package/v2Components/CapActionButton/tests/__snapshots__/index.test.js.snap

@@ -76,81 +76,6 @@ exports[`CapActionButton test Test if CapActionButton component renders 1`] = `
 `;
 
 exports[`CapActionButton test Test if CapActionButton component renders 2`] = `
-<CapRow
-  className="cap-action-button"
->
-  <CapHeading
-    type="h4"
-  >
-    <FormattedMessage
-      defaultMessage="Button text"
-      id="creatives.componentsV2.CapActionButton.templateButtonText"
-      values={Object {}}
-    />
-  </CapHeading>
-  <_class
-    id="rcs-template-Button-Text"
-    labelPosition="top"
-    maxLength={200}
-    onChange={[Function]}
-    placeholder="Enter button text"
-    size="default"
-    suffix={
-      <CapLabel
-        type="label1"
-      >
-        9 / 200
-      </CapLabel>
-    }
-    value="testValue"
-  />
-  <CapHeading
-    style={
-      Object {
-        "paddingTop": "20px",
-      }
-    }
-    type="h4"
-  >
-    <FormattedMessage
-      defaultMessage="Button link"
-      id="creatives.componentsV2.CapActionButton.templateButtonLink"
-      values={Object {}}
-    />
-  </CapHeading>
-  <_class
-    errorMessage="Button URL is not valid"
-    id="rcs-template-Button-link"
-    labelPosition="top"
-    onChange={[Function]}
-    placeholder="Enter button link"
-    size="default"
-    value="testValue"
-  />
-  <CapDivider
-    style={
-      Object {
-        "marginBottom": 16,
-        "marginTop": 23,
-      }
-    }
-  />
-  <CapTooltip
-    placement="topLeft"
-    title="Not enabled yet. Coming soon!"
-  >
-    <CapButton
-      className="disabled-button"
-      isAddBtn={true}
-      type="flat"
-    >
-      Add button
-    </CapButton>
-  </CapTooltip>
-</CapRow>
-`;
-
-exports[`CapActionButton test Test if CapActionButton component renders 3`] = `
 <CapRow
   className="cap-action-button"
 >

package/v2Containers/Rcs/constants.js

@@ -19,7 +19,7 @@ export const TEMPLATE_DESC_MAX_LENGTH = 1000;
 export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
 export const TEMPLATE_TITLE_MAX_LENGTH = 200;
 export const TEMPLATE_BUTTON_TEXT_MAX_LENGTH = 20;
-
+export const CTA = 'CTA';
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';

package/v2Containers/Rcs/index.js

@@ -70,6 +70,7 @@ import {
   VERTICAL,
   STANDALONE,
   RICHCARD,
+  CTA,
 } from './constants';
 import globalMessages from '../Cap/messages';
 import messages from './messages';
@@ -132,6 +133,7 @@ export const Rcs = (props) => {
   const [dltPreviewData, setDltPreviewData] = useState('');
   const [suggestions, setSuggestions] = useState([]);
   const [buttonType, setButtonType] = useState('');
+  const [suggestionError, setSuggestionError] = useState(true);
   const mediaRadioOptions = [
     {
       value: RCS_MEDIA_TYPES.NONE,
@@ -166,8 +168,15 @@ export const Rcs = (props) => {
     }
     }
 `;
-  const updateButtonChange = (val) => {
-    setSuggestions(val);
+  const updateButtonChange = (data) => {
+    const {
+      type,
+      text,
+      url,
+      error,
+  } = data;
+    setSuggestions([{type, text, url}]);
+    setSuggestionError(error);
   };
   const RcsLabel = styled.div`
     display: flex;
@@ -182,14 +191,14 @@ export const Rcs = (props) => {
             <FormattedMessage {...messages.templateCTAButtonDesc} />
           </CapLabel>
         </div>
-        {buttonType && <CapActionButton
-          type="CTA"
+        {buttonType.includes(CTA) && <CapActionButton
+          type={CTA}
           buttonTextlen={TEMPLATE_BUTTON_TEXT_MAX_LENGTH}
           updateButtonChange={updateButtonChange}
           suggestions={suggestions}
           />}
       </>,
-      value: "CTA",
+      value: CTA,
     },
     {
       label: <CapTooltip
@@ -248,7 +257,7 @@ export const Rcs = (props) => {
       setEditFlow(true);
       if (rcsSuggestions.length > 0) {
         setSuggestions(rcsSuggestions);
-        setButtonType(["CTA"]);
+        setButtonType(CTA);
       }
 
       // for DLT Fallback message
@@ -453,10 +462,11 @@ export const Rcs = (props) => {
     }
     return errorMessage;
   };
-  const onChangeButtonTypes = (val) => {
-    setButtonType(val[0]);
+
+  const onChangeButtonTypes = useCallback((checkedValues) => {
+    setButtonType(checkedValues);
     setSuggestions([]);
-  };
+  });
   const renderTextComponent = (
     <>
       {/* template title */}
@@ -1002,7 +1012,7 @@ export const Rcs = (props) => {
 
     // if call to action (Button text & link) is not added
     const {text, url} = suggestions[0] || {};
-    if (buttonType && !(text && url) ) {
+    if (buttonType.includes(CTA) && !(text && url && !suggestionError ) ) {
       return true;
     }
     if (templateDescError || fallbackMessageError) {
@@ -1029,7 +1039,7 @@ export const Rcs = (props) => {
     let mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
     mediaTypeMsg = formatMessage(messages[mediaTypeMsg]);
     const {text, url} = suggestions[0] || {};
-    if (buttonType && !(text && url) ) {
+    if (buttonType.includes(CTA) && !(text && url) ) {
       mediaTypeMsg = `${formatMessage(messages.buttonTextAndUrl)} ${mediaTypeMsg} `;
     }
     return (