@capillarytech/creatives-library 8.0.168-alpha.1 → 8.0.168-beta.0

package/package.json

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

package/utils/test-utils.js

@@ -7,14 +7,10 @@ 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 }) {
-  const store = configureStore({}, initialReducer, history);
-  return (
-    <Provider store={store}>
-      <IntlProvider locale="en">{children}</IntlProvider>
-    </Provider>
-  );
+  return <IntlProvider locale="en">{children}</IntlProvider>;
 }
 Wrapper.propTypes = {
   children: PropTypes.array,

package/v2Components/CapActionButton/index.js

@@ -9,12 +9,10 @@ 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,
@@ -22,12 +20,6 @@ export const CapActionButton = (props) => {
     type,
     updateButtonChange,
     suggestions = [],
-    tags = [],
-    injectedTags = {},
-    location = {},
-    selectedOfferDetails = [],
-
-    onContextChange,
   } = props;
   const { text = '', url = '' } = suggestions[0] || {};
   const [buttonText, setButtonText] = useState(text || '');
@@ -36,13 +28,6 @@ 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);
@@ -96,24 +81,18 @@ export const CapActionButton = (props) => {
         }
       />
 
-      {/* 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}
+      {/* 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}
       />
 
       {/* divider */}
@@ -143,25 +122,6 @@ 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,8 +30,4 @@ 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,132 +10,6 @@ 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);
@@ -144,15 +18,6 @@ const initializeComponent = () => {
     buttonTextlen={200}
     updateButtonChange={() => {}}
     suggestions={[{text: "text", url: 'url'}]}
-    tags={[]}
-    injectedTags={{}}
-    location={{}}
-    selectedOfferDetails={[]}
-    onContextChange={() => {}}
-    onButtonLinkChange={() => {}}
-    globalActions={{
-      fetchSchemaForEntity: () => {}
-    }}
   />);
 };
 

package/v2Components/CapDeviceContent/index.js

@@ -337,11 +337,6 @@ 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,7 +29,6 @@ import {
   CTA_OPTIONS,
   URL_MAX_LENGTH,
 } from "./constants";
-import CapTagListWithInput from "../CapTagListWithInput";
 
 export const CapInAppCTA = (props) => {
   const {
@@ -37,12 +36,9 @@ export const CapInAppCTA = (props) => {
     ctaData = [],
     updateHandler,
     deleteHandler,
+    isEditFlow,
     deepLink,
-    onContextChange,
-    location,
-    tags,
-    injectedTags,
-    selectedOfferDetails,
+    channel,
   } = props;
   const { formatMessage } = intl;
 
@@ -126,12 +122,6 @@ 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(
@@ -235,23 +225,18 @@ export const CapInAppCTA = (props) => {
             )}
             {urlType === EXTERNAL_URL && (
               <>
-                <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}
+                <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}
                 />
               </>
             )}

package/v2Components/CapInAppCTA/index.scss

@@ -19,8 +19,10 @@
         }
 
         .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,8 +82,4 @@ 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,8 +30,6 @@ 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 {
@@ -41,11 +39,6 @@ export const CapMpushCTA = (props) => {
         deleteHandler,
         deepLink,
         buttonType,
-        location,
-        tags,
-        injectedTags,
-        selectedOfferDetails,
-        handleOnTagsContextChange,
     } = props;
     const { formatMessage } = intl;
 
@@ -109,7 +102,7 @@ export const CapMpushCTA = (props) => {
     const renderLength = (len, max) => (
         <CapHeading
             type="label1"
-            className="mpush-render-btn-length"
+            className="inapp-render-btn-length"
         >
             {formatMessage(inAppMsg.templateMessageLength, {
                 currentLength: len,
@@ -223,10 +216,6 @@ 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
@@ -289,7 +278,7 @@ export const CapMpushCTA = (props) => {
                             />
                             {renderLength(text.length, BTN_MAX_LENGTH)}
                         </CapColumn>
-                        <CapColumn className="mpush-cta-buttons">
+                        <CapColumn className="inapp-cta-buttons">
                             <CapRow style={{ width: '30%', marginRight: '10px' }}>
                                 <CapHeading type="h4" className="cta-label">
                                     {formatMessage(messages.ctaType)}
@@ -318,27 +307,22 @@ export const CapMpushCTA = (props) => {
                                 </CapRow>
                             )}
                             {urlType === EXTERNAL_URL && (
-                                <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 }}
-                                />
+                                <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>
                             )}
                         </CapColumn>
                         {urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
@@ -346,26 +330,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;
 
-    .mpush-cta-buttons {
+    .inapp-cta-buttons {
         margin-top: $CAP_SPACE_12;
         display: flex;
         flex-direction: row;
         align-items: flex-end;
         justify-content: space-between;
 
-        .mpush-render-btn-length {
+        .inapp-render-btn-length {
             margin-top: $CAP_SPACE_12;
             width: 90%;
             margin-left: 52%;

package/v2Components/CapMpushCTA/messages.js

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