@capillarytech/creatives-library 8.0.104 → 8.0.106-alpha.0

package/config/app.js

@@ -17,16 +17,16 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/creatives',
-    campaigns_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/campaigns',
-    campaigns_api_org_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/org/campaign',
-    auth_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/auth',
-    arya_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1',
-    subscription_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
-    exports_api_endpoint: 'https://devenv-crm.cc.capillarytech.com/arya/api/v1/export/data',
+    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/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',
+    arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',
+    subscription_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
+    exports_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/export/data',
     login_url: '/auth/login',
     dashboard_url: '/sms',
-    liquid_endpoint: 'https://devenv-crm.cc.capillarytech.com/iris/v2/template',
+    liquid_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/template',
     dashboard_url_v2: '/v2',
   },
   testing: {

package/package.json

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

package/v2Components/CapWhatsappCTA/index.js

@@ -20,7 +20,7 @@ import globalMessages from '../../v2Containers/Cap/messages';
 import whatsappMsg from '../../v2Containers/Whatsapp/messages';
 import messages from './messages';
 import './index.scss';
-import { isUrl,isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import TagList from '../../v2Containers/TagList';
 import {
   CTA_OPTIONS,
@@ -50,6 +50,7 @@ export const CapWhatsappCTA = (props) => {
     tags = [],
     injectedTags = {},
     selectedOfferDetails = [],
+    eventContextTags = [],
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -134,8 +135,7 @@ export const CapWhatsappCTA = (props) => {
     clonedCta.push(cloneDeep(INITIAL_CTA_DATA[0]));
     if (clonedCta.length === 2) {
       clonedCta[1].index = 1;
-      clonedCta[1].ctaType =
-        clonedCta[0].ctaType === PHONE_NUMBER ? WEBSITE : PHONE_NUMBER;
+      clonedCta[1].ctaType = clonedCta[0].ctaType === PHONE_NUMBER ? WEBSITE : PHONE_NUMBER;
     }
     updateHandler(clonedCta, null, true);
   };
@@ -168,8 +168,8 @@ export const CapWhatsappCTA = (props) => {
     if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
     } else if (
-      urlType === STATIC_URL &&
-      value.match(invalidVarRegex)?.length > 0
+      urlType === STATIC_URL
+      && value.match(invalidVarRegex)?.length > 0
     ) {
       errorMessage = formatMessage(messages.staticUrlWithVarErrorMessage);
     }
@@ -178,12 +178,14 @@ export const CapWhatsappCTA = (props) => {
   };
 
   const ctaSaveDisabled = (index) => {
-    const { ctaType, text, phone_number, url } = ctaData[index] || {};
+    const {
+      ctaType, text, phone_number, url,
+    } = ctaData[index] || {};
     if (text === '' || buttonError) {
       return true;
-    } else if (ctaType === PHONE_NUMBER && phone_number.length < 5) {
+    } if (ctaType === PHONE_NUMBER && phone_number.length < 5) {
       return true;
-    } else if (ctaType === WEBSITE && (url === '' || urlError)) {
+    } if (ctaType === WEBSITE && (url === '' || urlError)) {
       return true;
     }
     return false;
@@ -200,8 +202,9 @@ export const CapWhatsappCTA = (props) => {
     const renderArray = [];
     const addBtnDisabled = ctaData.length === 1 && !ctaData[0].isSaved;
     ctaData.forEach((cta) => {
-      const { index, ctaType, text, phone_number, urlType, url, isSaved } =
-        cta || {};
+      const {
+        index, ctaType, text, phone_number, urlType, url, isSaved,
+      } = cta || {};
       //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         const ctaIsPhone = ctaType === PHONE_NUMBER;
@@ -229,7 +232,10 @@ export const CapWhatsappCTA = (props) => {
             </CapColumn>
             {ctaIsPhone && (
               <CapColumn span={10} align="left">
-                <CapLabel className="phone">+{phone_number}</CapLabel>
+                <CapLabel className="phone">
+                  +
+                  {phone_number}
+                </CapLabel>
               </CapColumn>
             )}
             {!ctaIsPhone && (
@@ -241,7 +247,7 @@ export const CapWhatsappCTA = (props) => {
                       : formatMessage(messages.ctaWebsiteTypeDynamic)}
                   </CapLabel>
                 </CapColumn>
-                <CapTooltip title={url} placement={'top'}>
+                <CapTooltip title={url} placement="top">
                   <CapColumn span={7} style={{ marginRight: '0px' }}>
                     <CapLabel className="url">{url}</CapLabel>
                   </CapColumn>
@@ -271,6 +277,7 @@ export const CapWhatsappCTA = (props) => {
                   tags={tags}
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
+                  eventContextTags={eventContextTags}
                 />
               </CapColumn>
             )}
@@ -282,7 +289,7 @@ export const CapWhatsappCTA = (props) => {
               >
                 <CapTooltip
                   title={formatMessage(messages.whatsappCtaTagListRevert)}
-                  placement={'top'}
+                  placement="top"
                 >
                   <CapIcon size="s" type="return" />
                 </CapTooltip>
@@ -414,7 +421,7 @@ export const CapWhatsappCTA = (props) => {
                     ? formatMessage(messages.ctaSaveDisabled)
                     : ''
                 }
-                placement={'bottom'}
+                placement="bottom"
               >
                 <div className="button-disabled-tooltip-wrapper">
                   <CapButton
@@ -442,15 +449,15 @@ export const CapWhatsappCTA = (props) => {
     {
       // when first button is not saved, add button is disabled with tooltip
       // eslint-disable-next-line no-unused-expressions
-      ctaData.length < 2 &&
-        !isEditFlow &&
-        renderArray.push(
+      ctaData.length < 2
+        && !isEditFlow
+        && renderArray.push(
           <CapRow>
             <CapTooltip
               title={
                 addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
               }
-              placement={'right'}
+              placement="right"
             >
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -180,7 +180,7 @@ EmailWrapperView.propTypes = {
   isTemplateNameEmpty: PropTypes.bool,
   modes: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
-  EmailLayout: PropTypes.string,
+  EmailLayout: PropTypes.object,
   modeContent: PropTypes.object,
   useFileUpload: PropTypes.func.isRequired,
   uploadButtonLabel: PropTypes.node.isRequired,

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import find from 'lodash/find';
 import { GA } from '@capillarytech/cap-ui-utils';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { CHANNEL_CREATE_TRACK_MAPPING } from '../../App/constants';

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -367,41 +367,83 @@ describe('useEmailWrapper', () => {
   });
 
   it('calls setEdmTemplate/setBEETemplate in useEffect when in EDITOR mode and CREATE_TEMPLATE_CONTENT step', async () => {
+    // 1. Setup
     const templateId = 'editorTemplate456';
     const mockTemplateData = { _id: templateId, name: 'Selected Editor Template' };
-    find.mockReturnValue(mockTemplateData);
 
-    const initialHookProps = {
+    // Ensure mocks are clean from previous tests
+    find.mockClear();
+    isEmpty.mockClear();
+    mockProps.templatesActions.setEdmTemplate.mockClear();
+    mockProps.templatesActions.setBEETemplate.mockClear();
+    mockProps.showNextStep.mockClear();
+
+    // 2. Mock find (this will be called by the *internal* handleEdmDefaultTemplateSelection)
+    find.mockImplementation((array, criteria) => {
+      // console.log('DEBUG: find called with', JSON.stringify(array), JSON.stringify(criteria)); // Optional debug
+      if (array && criteria && criteria._id === templateId && array[0]?._id === templateId) {
+        return mockTemplateData;
+      }
+      return null;
+    });
+
+    // 3. Initial Render (Template Selection Step)
+    const initialProps = {
       ...mockProps,
       step: STEPS.TEMPLATE_SELECTION,
       emailCreateMode: EMAIL_CREATE_MODES.EDITOR,
       CmsTemplates: [mockTemplateData],
       SelectedEdmDefaultTemplate: null,
+      // selectedCreateMode is initially '' from hook's useState
     };
-
     const { result, rerender } = renderHook((props) => useEmailWrapper(props), {
-      initialProps: initialHookProps
+        initialProps: initialProps
     });
 
+    // 4. Simulate user selecting a template ID via the exposed callback (useEditor)
     reactAct(() => {
+      // This maps to useEditor which calls setModeContent and showNextStep
       result.current.cmsTemplatesProps.handleEdmDefaultTemplateSelection(templateId);
     });
-
-    expect(result.current.modeContent).toEqual({ id: templateId });
-    expect(mockProps.showNextStep).toHaveBeenCalled();
-
-    const nextStepProps = {
-      ...initialHookProps,
-      step: STEPS.CREATE_TEMPLATE_CONTENT,
+    // Verify internal state updated and mock called
+    expect(result.current.modeContent).toEqual({ id: templateId }); // State updated
+    expect(mockProps.showNextStep).toHaveBeenCalledTimes(1); // User action effect
+
+    // 5. Rerender with step changed to CREATE_TEMPLATE_CONTENT
+    const createContentProps = {
+      ...initialProps, // Base props
+      step: STEPS.CREATE_TEMPLATE_CONTENT, // *** Change step ***
+      SelectedEdmDefaultTemplate: null // *** Ensure this is null ***
+      // The internal state `modeContent = { id: templateId }` persists
+      // The internal state `selectedCreateMode = ''` also persists (not changed yet)
     };
 
-    rerender(nextStepProps);
+    // Mock isEmpty just before rerender for the specific check inside the effect
+    isEmpty.mockImplementation(val => {
+      // console.log('DEBUG: isEmpty called with', JSON.stringify(val)); // Optional debug
+      // Return true ONLY for the 'SelectedEdmDefaultTemplate' check (which is null)
+      if (val === null) return true;
+      // Provide a fallback for other potential isEmpty calls if needed
+      if (typeof val === 'object' && !val) return true;
+      if (typeof val === 'object' && Object.keys(val).length === 0) return true;
+      if (typeof val === 'string' && val.trim().length === 0) return true;
+      return !val;
+    });
+
+    rerender(createContentProps);
 
-    await waitFor(() => {
-        expect(find).toHaveBeenCalledWith([mockTemplateData], { _id: templateId });
-        expect(mockProps.templatesActions.setEdmTemplate).toHaveBeenCalledWith(mockTemplateData);
-        expect(mockProps.templatesActions.setBEETemplate).toHaveBeenCalledWith(mockTemplateData);
+    // 6. Wait for effects triggered by the rerender
+    await reactAct(async () => {
+      // Short pause allows React's scheduler to run effects
+      await new Promise(resolve => setTimeout(resolve, 0));
     });
+
+
+    // Assert that the template setting actions were called as a result of the effect
+    expect(mockProps.templatesActions.setEdmTemplate).toHaveBeenCalledTimes(1);
+    expect(mockProps.templatesActions.setEdmTemplate).toHaveBeenCalledWith(mockTemplateData);
+    expect(mockProps.templatesActions.setBEETemplate).toHaveBeenCalledTimes(1);
+    expect(mockProps.templatesActions.setBEETemplate).toHaveBeenCalledWith(mockTemplateData);
   });
 
   it('sets selectedCreateMode in useEffect when in UPLOAD mode and CREATE_TEMPLATE_CONTENT step with EmailLayout', async () => {

package/v2Containers/TagList/index.js

@@ -7,6 +7,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Tree } from 'antd';
 import _ from 'lodash';
@@ -16,17 +17,20 @@ import makeSelectTagList from './selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import * as actions from './actions';
 import * as globalActions from '../Cap/actions';
+import messages, { scope } from './messages';
+
 // import styled from styled-components;
 import CapTagList from '../../v2Components/CapTagList';
 import './_tagList.scss';
 import { selectCurrentOrgDetails, makeSelectFetchingSchemaError } from '../Cap/selectors';
-import { injectIntl } from 'react-intl';
-import { scope } from './messages';
-import messages from './messages';
-import { handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature, transformBadgeTags } from '../../utils/common';
-import { GIFT_VOUCHER_RELATED_TAGS, PROMO_ENGINE_RELATED_TAGS, BADGES_RELATED_TAGS, BADGES_ENROLL, BADGES_ISSUE } from '../../containers/App/constants';
+import {
+  handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature, transformBadgeTags,
+} from '../../utils/common';
+import {
+  GIFT_VOUCHER_RELATED_TAGS, PROMO_ENGINE_RELATED_TAGS, BADGES_RELATED_TAGS, BADGES_ENROLL, BADGES_ISSUE,
+} from '../../containers/App/constants';
 
-const TreeNode = Tree.TreeNode;
+const {TreeNode} = Tree;
 
 export class TagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -52,35 +56,35 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       this.setState({loading: true});
     }
     if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-
       this.setState({loading: false});
     }
     if (!_.isEqual(nextProps.tags, this.props.tags)) {
-
       this.setState({loading: false});
     }
     if (nextProps?.fetchingSchemaError) {
       this.setState({tagsError: nextProps?.fetchingSchemaError});
     }
-
   }
+
   componentDidUpdate(prevProps) {
     if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
       this.generateTags(this.props);
     }
   }
+
   onSelect = (selectedKeys) => {
     this.props.onTagSelect(selectedKeys[0]);
   };
 
-  onClick = (e, data) => {
+  // onClick = (e, data) => {
 
-  };
+  // };
 
   getTagsforContext = (data) => {
     //this.setState({loading: true});
     this.props.onContextChange(data);
   }
+
   generateTags = (props) => {
     let tags = {};
     let injectedTags = {};
@@ -108,24 +112,26 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     if (eventContextTags?.length) {
       const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.entryEvent);
       eventContextTagsObj.eventContextTags = {
-        name: TAG_HEADER_MSG_LABEL,
-        desc: TAG_HEADER_MSG_LABEL,
-        resolved: true,
+        "name": TAG_HEADER_MSG_LABEL,
+        "desc": TAG_HEADER_MSG_LABEL,
+        "resolved": true,
         'tag-header': true,
-        subtags: {},
+        "subtags": {},
       };
 
       eventContextTags.forEach((tag) => {
-        const { tagName, label, profileId, profileName } = tag || {};
+        const {
+          tagName, label, profileId, profileName,
+        } = tag || {};
         if (!profileId || !tagName || !label || !profileName) return;
         // Initializing the tags profile if it doesn't exist
         if (!eventContextTagsObj?.eventContextTags?.subtags?.[profileId]) {
           eventContextTagsObj.eventContextTags.subtags[profileId] = {
-            name: profileName,
-            desc: profileName,
-            resolved: true,
+            "name": profileName,
+            "desc": profileName,
+            "resolved": true,
             "tag-header": true,
-            subtags: {},
+            "subtags": {},
           };
         }
         // Adding the current tag to the profile group
@@ -138,6 +144,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     }
     this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
   }
+
   populateTags(tagsList) {
     const mainTags = {};
     const excludedTags = [];
@@ -164,8 +171,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       }
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          "name": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
-          "desc": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          name: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          desc: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
         mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -245,7 +252,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       };
     };
     offerDetails.forEach((offer) => {
-      const { id, couponName, description, couponSeriesId } = offer;
+      const {
+        id, couponName, description, couponSeriesId,
+      } = offer;
       const couponId = id || couponSeriesId;
       const couponSubTags = {};
       couponTagsKeys.forEach((couponTagKey) => {

package/v2Containers/Whatsapp/index.js

@@ -879,6 +879,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               deleteHandler={deleteHandler}
               isEditFlow={isEditFlow}
               hostName={host}
+              tags={tags || []}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
             />
           )}
         </>
@@ -2694,6 +2698,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
               tags={tags || []}
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
             />
           )}
           {isBtnTypeQuickReply && (