@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.125

package/containers/App/constants.js

@@ -18,7 +18,6 @@ export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
-export const ENABLE_NEW_MPUSH = "ENABLE_NEW_MPUSH";
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/containers/Email/index.js

@@ -1049,7 +1049,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           this.edmEvent = undefined;
         } else if (this.state.editorInstanse) {
-          this.state.editorInstanse.insertHtml(`<img src='${nextProps.Email.uploadedAssetData.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+          this.state.editorInstanse.insertHtml(`<img src='${nextProps.Email.uploadedAssetData.metaInfo.secure_file_path}' alt='Image'>`);
           //this.resetCkEditorInstance(this.state.currentTab, this.state.formData, true, nextProps.Email.uploadedAssetData, true);
         }
         this.setState({showImageSelectionBox: false});
@@ -1620,7 +1620,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (onInsert && !isImage) {
           this.state.editorInstanse.insertHtml(`{{${value}}}`);
         } else if (onInsert) {
-          this.state.editorInstanse.insertHtml(`<img src='${value.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+          this.state.editorInstanse.insertHtml(`<img src='${value.metaInfo.secure_file_path}' alt='Image'>`);
         }
       }
     });
@@ -1979,7 +1979,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       //   if (this.state.isDragDrop) {
       //     
       //   } else {
-      //     this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.public_url}' alt='Capillary Image'>`);
+      //     this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.public_url}' alt='Image'>`);
       //   }
       // }
     }
@@ -2070,7 +2070,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           this.edmEvent = undefined;
         } else if (this.state.editorInstanse) {
-          this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.secure_file_path}' alt='Capillary Image'>`);
+          this.state.editorInstanse.insertHtml(`<img src='${data.metaInfo.secure_file_path}' alt='Image'>`);
           //this.resetCkEditorInstance(this.state.currentTab, this.state.formData, true, data, true);
         }
       }
@@ -2446,7 +2446,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   selectAsset = (asset) => {
     if (this.state.editorInstanse) {
-      this.state.editorInstanse.insertHtml(`<img src='${asset}' alt='Capillary Image'>`);
+      this.state.editorInstanse.insertHtml(`<img src='${asset}' alt='Image'>`);
     }
   }
 

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -903,7 +903,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
   updateContentData = () => {
     if (this.state.editorInstanse) {
-      this.state.editorInstanse.insertHtml(`<img src='${this.props.ContentImageData.metaInfo.wechatUrl}' alt='Capillary Image'>`);
+      this.state.editorInstanse.insertHtml(`<img src='${this.props.ContentImageData.metaInfo.wechatUrl}' alt='Image'>`);
     }
     this.props.actions.clearContentImageStore();
     this.setState({loading: false});

package/package.json

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

package/services/api.js

@@ -231,7 +231,7 @@ export const createWeChatTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
-export const createMobilePushTemplate = (template) => {
+export const createMobilePushTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
   return request(url, getAPICallObject('POST', template));
 };

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -32,7 +32,7 @@ jest.mock('@capillarytech/cap-ui-utils', () => ({
   },
 }));
 
-jest.setTimeout(60000);
+jest.setTimeout(30000);
 
 const initializeCreatives = () => { 
   const store = configureStore(mockInitialState, initialReducer, history);
@@ -51,12 +51,6 @@ beforeEach(() => {
   server.listen();
   localStorage.clear();
   localStorage.setItem('token', true);
-  
-  // Mock cap auth
-  window.capAuth = {
-    hasFeatureAccess: jest.fn().mockReturnValue(false),
-    isInitialized: jest.fn().mockReturnValue(true),
-  };
 });
 
 // clean up once the tests are done
@@ -68,6 +62,7 @@ afterAll(() => {
 });
 
 describe("Creatives testing template creation", () => {
+  jest.useFakeTimers();
   it("Should navigate from creatives home page and create template in RCS channel", async () => {
     initializeCreatives();
     const creativesScreen = await helper.getCreativesScreen();
@@ -98,7 +93,7 @@ describe("Creatives testing template creation", () => {
       name: globalMessages.email.defaultMessage,
     });
     await userEvent.click(whatsapp);
-    await waitFor(() => {
+    waitFor(() => {
       expect(
         creativesScreen.getByText(
           /Whatsapp accounts are not setup for your brand/i

package/tests/integration/TemplateCreation/api-response.js

@@ -20418,8 +20418,3 @@ export const tag = {
   }
 };
 
-export const cdnTransformationConfig = {
-  enabled: false,
-  transformations: [],
-};
-

package/tests/integration/TemplateCreation/msw-handler.js

@@ -4,52 +4,73 @@ import 'whatwg-fetch';
 import * as apiResponse from './api-response';
 
 import config from '../../../config/app';
-import { MOBILE_PUSH } from '../../../v2Containers/CreativesContainer/constants';
 const API_ENDPOINT = config.development.api_endpoint;
 const AUTH_ENDPOINT = config.development.auth_endpoint;
 const CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_org_endpoint;
 
 export const server = setupServer(
-  rest.options('*', (req, res, ctx) => res(
-    ctx.status(200),
-    ctx.set('access-control-allow-origin', '*'),
-    ctx.set('Access-Control-Allow-Headers', 'x-cap-org'),
-    ctx.set('Access-Control-Allow-Headers', 'x-cap-remote-user'),
-    ctx.set('Access-Control-Allow-Headers', 'x-cap-api-data-context-org-id'),
-    ctx.set('Access-Control-Allow-Headers', 'x-cap-api-auth-org-id'),
-  )),
-  rest.get(`${AUTH_ENDPOINT}/auth/org/:orgId/users`, (req, res, ctx) => {
-    const { orgId } = req.params;
-    switch (orgId) {
-      case '50146':
-        return res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData));
-    }
-  }),
+    rest.options('*', (req, res, ctx) =>
+      res(
+        ctx.status(200),
+        ctx.set('access-control-allow-origin', '*'),
+        ctx.set('Access-Control-Allow-Headers', 'x-cap-org'),
+        ctx.set('Access-Control-Allow-Headers', 'x-cap-remote-user'),
+        ctx.set('Access-Control-Allow-Headers', 'x-cap-api-data-context-org-id'),
+        ctx.set('Access-Control-Allow-Headers', 'x-cap-api-auth-org-id'),
+      ),
+    ),
+    rest.get(`${AUTH_ENDPOINT}/auth/org/:orgId/users`, (req, res, ctx) => {
+      const { orgId } = req.params;
+      switch (orgId) {
+        case '50146':
+          return res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData));
+      }
+    }),
 
-  rest.get(`${AUTH_ENDPOINT}/user`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.authUserReonData))),
+    rest.get(`${AUTH_ENDPOINT}/user`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.authUserReonData)),
+    ),
 
-  rest.get(`${AUTH_ENDPOINT}/org/users`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData))),
-  rest.get(`${API_ENDPOINT}/templates/Sms`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.smsTemplates))),
-  rest.get(`${API_ENDPOINT}/templates/v1/Sms`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.smsTemplates))),
-  rest.get(`${API_ENDPOINT}/templates/Rcs`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.rcsTemplates))),
-  rest.get(`${API_ENDPOINT}/templates/v1/Rcs`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.rcsTemplates))),
-  rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) => {
-    const sourceName = req.url.searchParams.get('source_name');
-    switch (sourceName) {
-      case 'WHATSAPP':
-        return res(ctx.status(200), ctx.json(apiResponse.whatsappAccount));
-      case 'VIBER':
-        return res(ctx.status(200), ctx.json(apiResponse.viberAccount));
-      case MOBILE_PUSH:
-        return res(ctx.status(200), ctx.json(apiResponse.mpushAccount));
-      default:
-        return res(ctx.status(200), ctx.json(apiResponse.whatsappAccount));
-    }
-  }),
-  rest.get(`${API_ENDPOINT}/assets/image`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.gallery))),
-  rest.get(`${API_ENDPOINT}/templates/v1/Line`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.lineTemplates))),
-  rest.get(`${API_ENDPOINT}/templates/v1/Viber`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.viberTemplates))),
-  rest.get(`${API_ENDPOINT}/templates/v1/Email`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.emailTemplates))),
-  rest.get(`${API_ENDPOINT}/meta/TAG`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.tag))),
-  rest.get(`${CAMPAIGNS_API_ENDPOINT}/meta/domainProperties`, (req, res, ctx) => res(ctx.status(200), ctx.json(apiResponse.domainProperties))),
-);
+    rest.get(`${AUTH_ENDPOINT}/org/users`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.authOrgUsersReonData)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/Sms`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.smsTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/v1/Sms`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.smsTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/Rcs`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.rcsTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/v1/Rcs`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.rcsTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.viberAccount)),
+    ),
+    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) => 
+      res(ctx.status(200), ctx.json(apiResponse.whatsappAccount)),
+    ),
+    rest.get(`${API_ENDPOINT}/meta/wecrm`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.mpushAccount)),
+    ),
+    rest.get(`${API_ENDPOINT}/assets/image`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.gallery)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/v1/Line`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.lineTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/templates/v1/Viber`, (req, res, ctx) =>
+    res(ctx.status(200), ctx.json(apiResponse.viberTemplates)),
+  ),
+    rest.get(`${API_ENDPOINT}/templates/v1/Email`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.emailTemplates)),
+    ),
+    rest.get(`${API_ENDPOINT}/meta/TAG`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.tag)),
+    ),
+    rest.get(`${CAMPAIGNS_API_ENDPOINT}/meta/domainProperties`, (req, res, ctx) =>
+      res(ctx.status(200), ctx.json(apiResponse.domainProperties)),
+    ),
+  );

package/utils/common.js

@@ -22,7 +22,6 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -125,12 +124,6 @@ export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   null,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );
-
-export const hasNewMobilePushFeatureEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  ENABLE_NEW_MPUSH,
-);
-
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/commonUtils.js

@@ -35,7 +35,7 @@ export const addBaseToTemplate = (template) => {
         ...template.versions,
         base: {
           ...history[0],
-          ...( get(template, 'versions.base.subject') ? {subject: get(template, 'versions.base.subject')} : { subject: history?.[0]?.subject }),
+          ...( get(template, 'versions.base.subject') ? {subject : get(template, 'versions.base.subject')} :{ subject:history?.[0]?.subject }),
         },
       },
     });
@@ -151,7 +151,7 @@ export const validateLiquidTemplateContent = async (
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
   // Empty content check
-
+  
   if (!content || content.trim() === "") {
     onError({
       standardErrors: [emptyBodyError],
@@ -170,6 +170,7 @@ export const validateLiquidTemplateContent = async (
 
   const {askAiraResponse: result, isError} = await getLiquidTagsAsync(content);
   const validString = /\S/.test(content);
+
   // Handle API errors or empty content
   if (result?.errors?.length > 0 || !validString || isError) {
     let standardErrors = [];
@@ -301,6 +302,7 @@ export const _validatePlatformSpecificContent = async (
   if (singleTab === IOS) {
     isAndroidValid = true;
   }
+
   return isAndroidValid && isIosValid; // Overall success
 };
 
@@ -338,6 +340,7 @@ export const validateMobilePushContent = async (formData, options) => {
     if (iosContent) return [iosContent, IOS?.toLowerCase()];
     return ["", ""];
   };
+
   if (overallSuccess) {
     const [contentToSubmit, tabTypeToSubmit] = getContentToSubmit();
     // Call the FINAL onSuccess only ONCE here
@@ -370,6 +373,7 @@ export const validateInAppContent = async (formData, options) => {
     onSuccess, // FINAL success callback
     ...restOptions // Options for validateLiquidTemplateContent
   } = options;
+
   // Clear previous errors with new structure
   onError({
     standardErrors: {

package/v2Components/CapImageUpload/index.js

@@ -22,9 +22,7 @@ import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
 import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
-import {
-  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
-} from "../../v2Containers/CreativesContainer/constants";
+import { FACEBOOK, INAPP, RCS, WHATSAPP, VIBER } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -50,14 +48,14 @@ function CapImageUpload(props) {
   } = props;
   const {
     formatMessage,
-  } = intl || {};
+    } = intl || {};
 
 
   useEffect(() => {
     const imageDataObj = imageData[`uploadedAssetData${index}`];
     if (!isEmpty(imageDataObj)) {
-      const { secure_file_path = '' } = get(imageDataObj, 'metaInfo', {});
-      updateImageSrc(secure_file_path);
+      const { secure_file_path = '', karixFileHandle = '' } = get(imageDataObj, 'metaInfo', {});
+      updateImageSrc(secure_file_path, karixFileHandle);
     }
   }, [imageData[`uploadedAssetData${index}`]]);
 
@@ -67,7 +65,7 @@ function CapImageUpload(props) {
   const {CapHeadingSpan} = CapHeading;
   const ImageComponent = useCallback(
     () => (
-      <>
+        <>
         {
           !isEmpty(imageSrc) ? (
             <div className={`image-container upload ${props.ifError ? 'error' : ''}`}>
@@ -76,10 +74,10 @@ function CapImageUpload(props) {
               )}
             </div>
           ) : null}
-      </>
-    ),
-    [imageSrc],
-  );
+        </>
+      ),
+      [imageSrc],
+    );
 
   const WithLabel = LabelHOC(ImageComponent);
 
@@ -149,13 +147,10 @@ function CapImageUpload(props) {
   const onReUpload = useCallback(() => {
     updateImageSrc('');
     updateOnReUpload();
-    // Don't automatically trigger file dialog - let user choose between computer and gallery
   }, []);
 
   const onGalleryImageSelect = useCallback((imageTemplate) => {
-    const {
-      secure_file_path: image, width, height, file_size: size,
-    } = get(imageTemplate, 'metaInfo', {});
+    const {secure_file_path: image, width, height, file_size: size} = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
     if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
@@ -181,7 +176,7 @@ function CapImageUpload(props) {
           isFullMode={isFullMode}
           isLineAsset
           onGalleryImageSelect={onGalleryImageSelect}
-        />
+          />
       </>
     );
   }, []);
@@ -199,35 +194,34 @@ function CapImageUpload(props) {
 
   const getImageSection = useCallback(() => {
     if (imageSrc === "") {
-      return (
-        <>
-          <CapUploader.CapDragger
-            customRequest={capUploaderCustomRequest}
-            className="form-builder-dragger grey-background"
-            showUploadList={!isImageError}
-          >
-            <CapHeading className="dragger-title" type="h7">
-              <FormattedMessage {...messages.dragAndDrop} />
-            </CapHeading>
-            <CapHeading className="dragger-or" type="label6">
-              <FormattedMessage {...messages.or} />
-            </CapHeading>
-            <CapButton className="dragger-button upload-image" type="secondary">
-              <FormattedMessage {...messages.uploadComputer} />
+      return (<>
+        <CapUploader.CapDragger
+          customRequest={capUploaderCustomRequest}
+          className="form-builder-dragger grey-background"
+          showUploadList={!isImageError}
+        >
+          <CapHeading className="dragger-title" type="h7">
+            <FormattedMessage {...messages.dragAndDrop} />
+          </CapHeading>
+          <CapHeading className="dragger-or" type="label6">
+            <FormattedMessage {...messages.or} />
+          </CapHeading>
+          <CapButton className="dragger-button upload-image" type="secondary">
+            <FormattedMessage {...messages.uploadComputer} />
+          </CapButton>
+          {channel !== WHATSAPP && (
+            <CapButton
+              className="dragger-button gallery-select"
+              type="secondary"
+              onClick={onGalleryClick}
+            >
+              <FormattedMessage {...messages.uploadGallery} />
             </CapButton>
-            {channel !== WHATSAPP && (
-              <CapButton
-                className="dragger-button gallery-select"
-                type="secondary"
-                onClick={onGalleryClick}
-              >
-                <FormattedMessage {...messages.uploadGallery} />
-              </CapButton>
-            )}
-          </CapUploader.CapDragger>
-          <CapError type="error" className="upload-image-error">
-            {isImageError}
-          </CapError>
+          )}
+        </CapUploader.CapDragger>
+        <CapError type="error" className="upload-image-error">
+          {isImageError}
+        </CapError>
         </>
       );
     }
@@ -248,26 +242,26 @@ function CapImageUpload(props) {
   return (
     <div style={style} className="cap-custom-image-upload">
       <WithLabel
-        key="with-label"
+        key={`with-label`}
         ifError={!!isImageError}
 
-      />
-      <form encType="multipart/form-data" id="form" className={className}>
+    />
+      <form encType="multipart/form-data" id={`form`} className={className}>
         <input
-          key="imgFile"
+          key={`imgFile`}
           style={{ display: 'none' }}
-          id="imageFileName"
+          id="fileName"
           type="file"
           onChange={(e) => uploadImages(e, { files: e.target.files })}
           accept={supportedExtensions || "image/*"}
-        />
+      />
         {getImageSection()}
         <CapDrawer
           content={getGalleryDrawerContent()}
           visible={isDrawerRequired}
           width={430}
           onClose={() => updateDrawerRequirement(false)}
-        />
+      />
       </form>
       <div className="image-info-wrapper">
         {channel === WHATSAPP && (

package/v2Components/CapInAppCTA/index.js

@@ -38,7 +38,6 @@ export const CapInAppCTA = (props) => {
     deleteHandler,
     isEditFlow,
     deepLink,
-    channel,
   } = props;
   const { formatMessage } = intl;