@capillarytech/creatives-library 8.0.168 → 8.0.169

package/package.json

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

package/utils/test-utils.js

@@ -7,10 +7,14 @@ import history from './history';
 import { Provider } from 'react-redux';
 import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import { initialReducer } from '../initialReducer';
-import initialState from '../initialState';
 
 function Wrapper({ children }) {
-  return <IntlProvider locale="en">{children}</IntlProvider>;
+  const store = configureStore({}, initialReducer, history);
+  return (
+    <Provider store={store}>
+      <IntlProvider locale="en">{children}</IntlProvider>
+    </Provider>
+  );
 }
 Wrapper.propTypes = {
   children: PropTypes.array,

package/v2Components/CapActionButton/index.js

@@ -9,10 +9,12 @@ import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapTagListWithInput from '../CapTagListWithInput';
 
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import messages from './messages';
 import './index.scss';
+
 export const CapActionButton = (props) => {
   const {
     intl,
@@ -20,6 +22,12 @@ export const CapActionButton = (props) => {
     type,
     updateButtonChange,
     suggestions = [],
+    tags = [],
+    injectedTags = {},
+    location = {},
+    selectedOfferDetails = [],
+
+    onContextChange,
   } = props;
   const { text = '', url = '' } = suggestions[0] || {};
   const [buttonText, setButtonText] = useState(text || '');
@@ -28,6 +36,13 @@ export const CapActionButton = (props) => {
 
   const { formatMessage } = intl;
 
+  const handleTagSelect = (data) => {
+    const tempMsg = `${buttonLink}{{${data}}}`;
+    setButtonLink(tempMsg);
+    onButtonLinkChange({ target: { value: tempMsg } });
+  };
+
+
   const onButtonTextChange = (e) => {
     const val = e.target.value;
     setButtonText(val);
@@ -81,18 +96,24 @@ export const CapActionButton = (props) => {
         }
       />
 
-      {/* button Link */}
-      <CapHeading type="h4" style={{ paddingTop: '20px' }}>
-        <FormattedMessage {...messages.templateButtonLink} />
-      </CapHeading>
-      <CapInput
-        id="rcs-template-Button-link"
-        onChange={onButtonLinkChange}
-        placeholder={formatMessage(messages.templateButtonLinkPlaceholder)}
-        data-testid="cta_btn_link"
-        value={buttonLink}
-        size="default"
-        errorMessage={buttonURLErrorMessage}
+      {/* button Link with tags */}
+      <CapTagListWithInput
+        inputId="rcs-template-Button-link"
+        inputValue={buttonLink}
+        inputOnChange={onButtonLinkChange}
+        inputPlaceholder={formatMessage(messages.templateButtonLinkPlaceholder)}
+        inputSize="default"
+        inputErrorMessage={buttonURLErrorMessage}
+        headingText={formatMessage(messages.templateButtonLink)}
+        headingType="h4"
+        headingStyle={{ paddingTop: '10px', marginRight: '56%' }}
+        moduleFilterEnabled={location?.query?.type !== 'embedded'}
+        onTagSelect={handleTagSelect}
+        onContextChange={onContextChange}
+        location={location}
+        tags={tags}
+        injectedTags={injectedTags}
+        selectedOfferDetails={selectedOfferDetails}
       />
 
       {/* divider */}
@@ -122,6 +143,25 @@ CapActionButton.propTypes = {
   type: PropTypes.string,
   updateButtonChange: PropTypes.func,
   suggestions: PropTypes.array,
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  onTagSelect: PropTypes.func,
+  onContextChange: PropTypes.func,
+};
+
+CapActionButton.defaultProps = {
+  buttonTextlen: 20,
+  type: '',
+  updateButtonChange: () => {},
+  suggestions: [],
+  tags: [],
+  injectedTags: {},
+  location: {},
+  selectedOfferDetails: [],
+  onTagSelect: () => {},
+  onContextChange: () => {},
 };
 
 export default injectIntl(CapActionButton);

package/v2Components/CapActionButton/messages.js

@@ -30,4 +30,8 @@ export default defineMessages({
     id: `${prefix}.comingSoonTooltip`,
     defaultMessage: 'Right now only one Call to action button is enabled, in future you would be able to add upto 3 buttons.',
   },
+  addLabels: {
+    id: `${prefix}.addLabels`,
+    defaultMessage: 'Add Labels',
+  },
 });

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

@@ -10,6 +10,132 @@ import {
 } from '../../../utils/test-utils';
 import { CapActionButton } from "../index";
 
+// Mock Cap UI Library components
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => 
+  function MockCapRow({ children, ...props }) {
+    return <div {...props} data-testid="cap-row">{children}</div>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => 
+  function MockCapHeading({ children, type, ...props }) {
+    const Tag = type === 'h4' ? 'h4' : 'div';
+    return <Tag {...props} data-testid="cap-heading">{children}</Tag>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => 
+  function MockCapInput({ onChange, value, placeholder, ...props }) {
+    return (
+      <input
+        type="text"
+        value={value || ''}
+        onChange={onChange}
+        placeholder={placeholder}
+        {...props}
+        data-testid="cap-input"
+      />
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapDivider', () => 
+  function MockCapDivider({ ...props }) {
+    return <hr {...props} data-testid="cap-divider" />;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => 
+  function MockCapButton({ children, ...props }) {
+    return <button {...props} data-testid="cap-button">{children}</button>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapTooltip', () => 
+  function MockCapTooltip({ children, title, ...props }) {
+    return (
+      <div {...props} data-testid="cap-tooltip" title={title}>
+        {children}
+      </div>
+    );
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => 
+  function MockCapLabel({ children, ...props }) {
+    return <label {...props} data-testid="cap-label">{children}</label>;
+  }
+);
+
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => 
+  function MockCapColumn({ children, ...props }) {
+    return <div {...props} data-testid="cap-column">{children}</div>;
+  }
+);
+
+jest.mock('../../../v2Containers/TagList', () => 
+  function MockTagList({ label, onTagSelect, onContextChange, ...props }) {
+    return (
+      <div data-testid="tag-list" {...props}>
+        <button
+          type="button"
+          onClick={() => onTagSelect && onTagSelect('test-tag')}
+          data-testid="tag-select-button"
+        >
+          {label || 'Add Label'}
+        </button>
+      </div>
+    );
+  }
+);
+
+jest.mock('../../../v2Containers/Line/Container/Wrapper/utils', () => ({
+  isUrl: jest.fn((url) => {
+    if (!url) return false;
+    return url.startsWith('http://') || url.startsWith('https://');
+  }),
+}));
+
+jest.mock('../messages', () => ({
+  __esModule: true,
+  default: {
+    templateButtonText: {
+      id: 'creatives.componentsV2.CapActionButton.templateButtonText',
+      defaultMessage: 'Button text',
+    },
+    templateButtonTextPlaceholder: {
+      id: 'creatives.componentsV2.CapActionButton.templateButtonTextPlaceholder',
+      defaultMessage: 'Enter button text',
+    },
+    templateButtonLink: {
+      id: 'creatives.componentsV2.CapActionButton.templateButtonLink',
+      defaultMessage: 'Button link',
+    },
+    templateButtonLinkPlaceholder: {
+      id: 'creatives.componentsV2.CapActionButton.templateButtonLinkPlaceholder',
+      defaultMessage: 'Enter button link',
+    },
+    addButton: {
+      id: 'creatives.componentsV2.CapActionButton.addButton',
+      defaultMessage: 'Add button',
+    },
+    inValidUrlErrorMessage: {
+      id: 'creatives.componentsV2.CapActionButton.inValidUrlErrorMessage',
+      defaultMessage: 'Button URL is not valid',
+    },
+    comingSoonTooltip: {
+      id: 'creatives.componentsV2.CapActionButton.comingSoonTooltip',
+      defaultMessage: 'Right now only one Call to action button is enabled, in future you would be able to add upto 3 buttons.',
+    },
+    addLabels: {
+      id: 'creatives.componentsV2.CapActionButton.addLabels',
+      defaultMessage: 'Add Labels',
+    },
+  },
+}));
+
+jest.mock('../index.scss', () => ({}));
+
 
 const initializeComponent = () => {
   const Component = injectIntl(CapActionButton);
@@ -18,6 +144,15 @@ const initializeComponent = () => {
     buttonTextlen={200}
     updateButtonChange={() => {}}
     suggestions={[{text: "text", url: 'url'}]}
+    tags={[]}
+    injectedTags={{}}
+    location={{}}
+    selectedOfferDetails={[]}
+    onContextChange={() => {}}
+    onButtonLinkChange={() => {}}
+    globalActions={{
+      fetchSchemaForEntity: () => {}
+    }}
   />);
 };
 

package/v2Components/CapDeviceContent/index.js

@@ -337,6 +337,11 @@ const CapDeviceContent = (props) => {
             deleteHandler={deleteHandler}
             isEditFlow={isEditFlow}
             deepLink={deepLink}
+            onContextChange={handleOnTagsContextChange}
+            location={location}
+            tags={tags}
+            injectedTags={injectedTags}
+            selectedOfferDetails={selectedOfferDetails}
           />
         )}
       </CapRow>

package/v2Components/CapInAppCTA/index.js

@@ -29,6 +29,7 @@ import {
   CTA_OPTIONS,
   URL_MAX_LENGTH,
 } from "./constants";
+import CapTagListWithInput from "../CapTagListWithInput";
 
 export const CapInAppCTA = (props) => {
   const {
@@ -36,9 +37,12 @@ export const CapInAppCTA = (props) => {
     ctaData = [],
     updateHandler,
     deleteHandler,
-    isEditFlow,
     deepLink,
-    channel,
+    onContextChange,
+    location,
+    tags,
+    injectedTags,
+    selectedOfferDetails,
   } = props;
   const { formatMessage } = intl;
 
@@ -122,6 +126,12 @@ export const CapInAppCTA = (props) => {
     const renderArray = [];
     ctaData?.forEach((cta) => {
       const { index, text, url, urlType, isSaved } = cta || {};
+
+      const onButtonTagSelect = (data) => {
+        const newUrl = `${url}{{${data}}}`;
+        updateHelper('url', newUrl, index);
+      };
+
       //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         renderArray.push(
@@ -225,18 +235,23 @@ export const CapInAppCTA = (props) => {
             )}
             {urlType === EXTERNAL_URL && (
               <>
-                <CapHeading type="h4">
-                  {formatMessage(messages.urlExternalLink)}
-                </CapHeading>
-                <CapInput
-                  id="inapp-cta-external-link"
-                  className="inapp-cta-external-link"
-                  onChange={onUrlChange}
-                  placeholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
-                  value={url}
-                  size="large"
-                  maxLength={URL_MAX_LENGTH}
-                  errorMessage={urlError}
+                <CapTagListWithInput
+                  inputId="inapp-cta-external-link"
+                  inputValue={url}
+                  inputOnChange={onUrlChange}
+                  inputPlaceholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
+                  inputSize="large"
+                  inputMaxLength={URL_MAX_LENGTH}
+                  inputErrorMessage={urlError}
+                  headingText={formatMessage(messages.urlExternalLink)}
+                  headingStyle={{ marginTop: '3%',marginRight: '65%'}}
+                  moduleFilterEnabled={location?.query?.type !== "embedded"}
+                  onTagSelect={onButtonTagSelect}
+                  onContextChange={onContextChange}
+                  location={location}
+                  tags={tags || []}
+                  injectedTags={injectedTags || {}}
+                  selectedOfferDetails={selectedOfferDetails}
                 />
               </>
             )}

package/v2Components/CapInAppCTA/index.scss

@@ -19,10 +19,8 @@
         }
 
         .inapp-render-btn-length {
-            margin-top: $CAP_SPACE_12;
             width: 90%;
             margin-left: 52%;
-            margin-bottom: $CAP_SPACE_12;
         }
     }
 

package/v2Components/CapInAppCTA/messages.js

@@ -82,4 +82,8 @@ export default defineMessages({
     id: `${prefix}.useTwoBracketsOnly`,
     defaultMessage: 'Use two brackets on each side to declare a variable',
   },
+  addLabel: {
+    id: `${prefix}.addLabel`,
+    defaultMessage: 'Add label',
+  },
 });

package/v2Components/CapMpushCTA/index.js

@@ -30,6 +30,8 @@ import {
 } from "./constants";
 import { PRIMARY } from "../../v2Containers/MobilePushNew/constants";
 import { URL } from "../../v2Containers/Whatsapp/constants";
+import TagList from "../../v2Containers/TagList";
+import CapTagListWithInput from "../CapTagListWithInput";
 
 export const CapMpushCTA = (props) => {
     const {
@@ -39,6 +41,11 @@ export const CapMpushCTA = (props) => {
         deleteHandler,
         deepLink,
         buttonType,
+        location,
+        tags,
+        injectedTags,
+        selectedOfferDetails,
+        handleOnTagsContextChange,
     } = props;
     const { formatMessage } = intl;
 
@@ -102,7 +109,7 @@ export const CapMpushCTA = (props) => {
     const renderLength = (len, max) => (
         <CapHeading
             type="label1"
-            className="inapp-render-btn-length"
+            className="mpush-render-btn-length"
         >
             {formatMessage(inAppMsg.templateMessageLength, {
                 currentLength: len,
@@ -216,6 +223,10 @@ export const CapMpushCTA = (props) => {
         
         filteredCtaData?.forEach((cta) => {
             const { index, text, urlType, isSaved } = cta || {};
+            const onButtonTagSelect = (data) => {
+                const newUrl = `${localUrlValues[index]}{{${data}}}`;
+                updateHelper('url', newUrl, index);
+            };
             if (isSaved) {
                 renderArray.push(
                     <CapRow
@@ -278,7 +289,7 @@ export const CapMpushCTA = (props) => {
                             />
                             {renderLength(text.length, BTN_MAX_LENGTH)}
                         </CapColumn>
-                        <CapColumn className="inapp-cta-buttons">
+                        <CapColumn className="mpush-cta-buttons">
                             <CapRow style={{ width: '30%', marginRight: '10px' }}>
                                 <CapHeading type="h4" className="cta-label">
                                     {formatMessage(messages.ctaType)}
@@ -307,22 +318,27 @@ export const CapMpushCTA = (props) => {
                                 </CapRow>
                             )}
                             {urlType === EXTERNAL_URL && (
-                                <CapRow style={{ width: '70%' }}>
-                                    <CapHeading type="h4">
-                                        {formatMessage(messages.urlExternalLink)}
-                                    </CapHeading>
-                                    <CapInput
-                                        id="inapp-cta-external-link"
-                                        className="inapp-cta-external-link"
-                                        onChange={onUrlChange}
-                                        placeholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
-                                        value={localUrlValues[index] || ''}
-                                        size="large"
-                                        maxLength={URL_MAX_LENGTH}
-                                        errorMessage={urlError}
-                                        data-index={index}
-                                    />
-                                </CapRow>
+                                <CapTagListWithInput
+                                    inputId="inapp-cta-external-link"
+                                    inputValue={localUrlValues[index] || ''}
+                                    inputOnChange={onUrlChange}
+                                    inputPlaceholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
+                                    inputSize="large"
+                                    inputMaxLength={URL_MAX_LENGTH}
+                                    inputErrorMessage={urlError}
+                                    headingText={formatMessage(messages.urlExternalLink)}
+                                    headingStyle={{ marginTop: '3%', marginRight: '50%'}}
+                                    containerStyle={{ width: '70%' }}
+                                    // tagListStyle={{ display: "flex" }}
+                                    moduleFilterEnabled={location?.query?.type !== "embedded"}
+                                    onTagSelect={onButtonTagSelect}
+                                    onContextChange={handleOnTagsContextChange}
+                                    location={location}
+                                    tags={tags || []}
+                                    injectedTags={injectedTags || {}}
+                                    selectedOfferDetails={selectedOfferDetails}
+                                    inputProps={{ 'data-index': index }}
+                                />
                             )}
                         </CapColumn>
                         {urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
@@ -330,26 +346,26 @@ export const CapMpushCTA = (props) => {
                                 <CapHeading type="h4">
                                     {formatMessage(messages.deepLinkKeys)}
                                 </CapHeading>
-                                                                    <CapLabel type="label2" className="cta-deep-link-keys-value">
-                                        {(() => {
-                                            if (deepLinkKeysFromSelectionArray.length > 0) {
-                                                return deepLinkKeysFromSelectionArray.join(', ');
-                                            }
-                                            if (deepLinkKeysArray.length > 0) {
-                                                return deepLinkKeysArray.join(', ');
-                                            }
-                                        })()}
-                                    </CapLabel>
-                                                                    <CapInput
-                                        id="inapp-deep-link-keys"
-                                        className="inapp-deep-link-keys"
-                                        onChange={onDeepLinkKeysChange}
-                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ')})}
-                                        value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
-                                        size="large"
-                                        data-index={index}
-                                        errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
-                                    />
+                                <CapLabel type="label2" className="cta-deep-link-keys-value">
+                                    {(() => {
+                                        if (deepLinkKeysFromSelectionArray.length > 0) {
+                                            return deepLinkKeysFromSelectionArray.join(', ');
+                                        }
+                                        if (deepLinkKeysArray.length > 0) {
+                                            return deepLinkKeysArray.join(', ');
+                                        }
+                                    })()}
+                                </CapLabel>
+                                <CapInput
+                                    id="inapp-deep-link-keys"
+                                    className="inapp-deep-link-keys"
+                                    onChange={onDeepLinkKeysChange}
+                                    placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
+                                    value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
+                                    size="large"
+                                    data-index={index}
+                                    errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
+                                />
                             </CapRow>
                         )}
                         <CapRow className="inapp-cta-save-delete-btn">

package/v2Components/CapMpushCTA/index.scss

@@ -7,14 +7,14 @@
     border: 1px solid $CAP_G06;
     border-radius: $CAP_SPACE_04;
 
-    .inapp-cta-buttons {
+    .mpush-cta-buttons {
         margin-top: $CAP_SPACE_12;
         display: flex;
         flex-direction: row;
         align-items: flex-end;
         justify-content: space-between;
 
-        .inapp-render-btn-length {
+        .mpush-render-btn-length {
             margin-top: $CAP_SPACE_12;
             width: 90%;
             margin-left: 52%;

package/v2Components/CapMpushCTA/messages.js

@@ -98,4 +98,8 @@ export default defineMessages({
     id: `${prefix}.useTwoBracketsOnly`,
     defaultMessage: 'Use two brackets on each side to declare a variable',
   },
+  addLabel: {
+    id: `${prefix}.addLabel`,
+    defaultMessage: 'Add label',
+  },
 });