@capillarytech/creatives-library 7.17.12 → 7.17.14-alpha.0

package/components/Ckeditor/index.js

@@ -13,14 +13,14 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_test/ckeditor4/ckeditor.js";
+const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_full/ckeditor/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
   locale = JSON.parse(user).lang;
 }
 const CKEditorConfig = {
-  skin: 'moono',
+  skin: 'moono-lisa',
   toolbar: [
     { name: 'document', items: ['Source', '-'] },
     { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

package/containers/TagList/constants.js

@@ -18,4 +18,13 @@ export const GET_TRANSLATION_MAPPED = {
   'ja-JP': 'ja-JP',
 };
 
-export const JAPANESE_HIDE_DATE_ARRAY = ['mm/dd/yyyy', 'dd/mm/yyyy', 'mm/dd/yy', 'dd Mon yyyy', 'Day, Mon dd, yy', 'dd.mm.yy', 'dd Mon', 'dd/m/yyyy'];
+export const JAPANESE_HIDE_DATE_TAGS = [
+  "mm/dd/yyyy",
+  "dd/mm/yyyy",
+  "mm/dd/yy",
+  "dd Mon yyyy",
+  "Day, Mon dd, yy",
+  "dd.mm.yy",
+  "dd Mon",
+  "dd/m/yyyy",
+];

package/package.json

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

package/utils/common.js

@@ -6,6 +6,7 @@ import {
   CARD_RELATED_TAGS,
   CARD_BASED_SCOPE,
 } from '../containers/App/constants';
+import { apiMessageFormatHandler } from './commonUtils';
 
 export function getUserNameById(userId, allUserList) {
   let userName = "";
@@ -262,3 +263,61 @@ export const isTraiDLTEnable = (isFullMode, smsRegister) => {
   const isTraiDltFeature = isTraiDltFeatureForOrg && isTraiEnableforLib;
   return isTraiDltFeature;
 };
+
+export const intlKeyGenerator = (value = "") => {
+  if (value && typeof value === "string")
+    return value.replace(/[^a-zA-Z0-9_]/g, "");
+  return value.props.defaultMessage.replace(/[^a-zA-Z0-9_]/g, "");
+};
+
+export const handleInjectedData = (data, scope) => {
+  let tagType;
+  for (const tagKey in data) {
+    if (data.hasOwnProperty(tagKey)) {
+      const tag = data[tagKey];
+
+      if (tag?.name === "Registration custom fields") {
+        tagType = "CustomTagMessage";
+      } else if (tag?.name === "Customer extended fields") {
+        tagType = "ExtendedTagMessage";
+      }
+
+      if (tag?.name) {
+        const name = tag?.name;
+        const key = intlKeyGenerator(name);
+        const id = tagType
+          ? `${scope}.${key}_name.${tagType}`
+          : `${scope}.${key}`;
+
+        tag["name"] = apiMessageFormatHandler(id, name);
+      }
+
+      if (tag["subtags"]) {
+        for (const subtagKey in tag["subtags"]) {
+          if (tag["subtags"].hasOwnProperty(subtagKey)) {
+            const subtag = tag["subtags"][subtagKey];
+            if (subtag?.name) {
+              const name = subtag?.name;
+              const key = intlKeyGenerator(name);
+              const id = tagType
+                ? `${scope}.${key}_name.${tagType}`
+                : `${scope}.${key}`;
+
+              subtag["name"] = apiMessageFormatHandler(id, name);
+            }
+            if (subtag?.desc) {
+              const desc = subtag?.desc;
+              const key = intlKeyGenerator(desc);
+              const id = tagType
+                ? `${scope}.${key}_desc.${tagType}`
+                : `${scope}.${key}`;
+
+              subtag["desc"] = apiMessageFormatHandler(id, desc);
+            }
+          }
+        }
+      }
+    }
+  }
+  return data;
+};

package/utils/commonUtils.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const apiMessageFormatHandler = (id, fallback) => (
+    <FormattedMessage id={id} defaultMessage={fallback} />
+);

package/v2Components/CapTagList/index.js

@@ -19,8 +19,14 @@ import { CARD_RELATED_TAGS } from '../../containers/App/constants';
 import { hasCardBasedScope } from '../../utils/common';
 import moment from 'moment';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
-import { GET_TRANSLATION_MAPPED, JAPANESE_HELP_TEXT, JAPANESE_HIDE_DATE_ARRAY, TAG_TRANSLATION_DOC } from '../../containers/TagList/constants';
+import {
+  GET_TRANSLATION_MAPPED,
+  JAPANESE_HELP_TEXT,
+  TAG_TRANSLATION_DOC,
+} from "../../containers/TagList/constants";
 import { HIDE_ENGAGEMENT_CHANNELS } from '../../v2Containers/App/constants';
+import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
+
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
@@ -156,9 +162,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   renderTags(tags, searchString = '') {
-    const { disableRelatedTags, childTagsToDisable, parentTagstoDisable, showCardsRelatedTags } = this.props.disableTagsDetails;
-    const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
-    const hideDefaultJpTranslation = accessibleFeatures.includes(HIDE_ENGAGEMENT_CHANNELS);
+    const { disableRelatedTags, childTagsToDisable, parentTagstoDisable, showCardsRelatedTags } = this?.props?.disableTagsDetails;
+    const { accessibleFeatures = [] } = this?.props?.currentOrgDetails || {};
+    const hideDateTagsForJpLocale = accessibleFeatures.includes(HIDE_ENGAGEMENT_CHANNELS);
     const list = [];
     const loyaltyAttrDisableText = <FormattedMessage {...messages.loyaltyAttributeDisable} />;
     let clonedTags = _.cloneDeep(tags);
@@ -174,7 +180,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       if (_.has(val, 'subtags')) {
         const disabled = disableRelatedTags ? parentTagstoDisable.includes(key) : false;
         const temp = this.renderTags(val.subtags, '', disabled);
-        const tempNode = (
+        const tagValue = (
           <CapTreeNode
             title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.name}</CapTooltip> : val.name}
             tag={val}
@@ -184,13 +190,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             {temp}
           </CapTreeNode>
         );
-        if (hideDefaultJpTranslation) {
-          if (!JAPANESE_HIDE_DATE_ARRAY.includes(val.name)) {
-            list.push(tempNode);
-          }
-        } else {
-          list.push(tempNode);
-        }
+        hidingDateTagsForJpLocale(hideDateTagsForJpLocale, val, list, tagValue);
       } else if (searchString === '' || !searchString || ((val.name || '').toLowerCase().indexOf(searchString.toLowerCase()) !== -1)) {
         const childDisabled = disableRelatedTags ? childTagsToDisable.includes(key) : false;
         const tempNode = (
@@ -202,13 +202,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             disabled={childDisabled}
           >
           </CapTreeNode>);
-        if (hideDefaultJpTranslation) {
-          if (!JAPANESE_HIDE_DATE_ARRAY.includes(val.name)) {
-            list.push(tempNode);
-          }
-        } else {
-          list.push(tempNode);
-        }
+        hidingDateTagsForJpLocale(hideDateTagsForJpLocale, val, list, tempNode);
       }
     });
     return list;
@@ -294,15 +288,15 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         >
           {contentSection}
         </CapModal> :
-          <CapPopover
-            visible={visible}
-            onVisibleChange={this.togglePopoverVisibility}
-            content={contentSection}
-            trigger="click"
-            placement="rightTop"
+        <CapPopover
+          visible={visible}
+          onVisibleChange={this.togglePopoverVisibility}
+          content={contentSection}
+          trigger="click"
+          placement="rightTop"
           >
-            <CapButton isAddBtn type="flat">{label || ''}</CapButton>
-          </CapPopover>
+          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
+        </CapPopover>
         }
         <CapModal
           visible={this.state.showModal}

package/v2Components/Ckeditor/index.js

@@ -13,14 +13,14 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_test/ckeditor4/ckeditor.js";
+const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_full/ckeditor/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
   locale = JSON.parse(user).lang;
 }
 const CKEditorConfig = {
-  skin: 'moono',
+  skin: 'moono-lisa',
   toolbar: [
     { name: 'document', items: ['Source', '-'] },
     { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

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

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { injectIntl } from "react-intl";
+import "@testing-library/jest-dom";
+import { render, getByText, screen } from "../../../utils/test-utils";
+import Ckeditor from "../index";
+
+const initializeComponent = () => {
+  const Component = injectIntl(Ckeditor);
+
+  //const originalComponentDidMount = Ckeditor.prototype.componentDidMount;
+  Ckeditor.prototype.componentDidMount = jest.fn();
+  Ckeditor.prototype.handleContentChange = jest.fn();
+
+  //Render with default props.
+  return render(<Component />);
+};
+
+describe("Load Ckeditor", () => {
+  it("Test if Ckeditor Mounts", () => {
+    initializeComponent();
+
+    expect(Ckeditor.prototype.componentDidMount).toHaveBeenCalled();
+  });
+
+  it("Test if Ckeditor un-Mounts", () => {
+    // Spy on the componentWillUnmount method
+    const componentWillUnmountSpy = jest.spyOn(
+      Ckeditor.prototype,
+      "componentWillUnmount"
+    );
+
+    // Render the component
+    const { unmount } = initializeComponent();
+
+    // Manually unmount the component (simulate unmounting)
+    unmount();
+
+    // Assert that componentWillUnmount has been called
+    expect(componentWillUnmountSpy).toHaveBeenCalled();
+
+    // Clean up the spy
+    componentWillUnmountSpy.mockRestore();
+  });
+});

package/v2Containers/Cap/constants.js

@@ -15,9 +15,9 @@ export const GET_USER_DATA_REQUEST = 'cap/GET_USER_DATA_REQUEST_V2';
 export const GET_USER_DATA_SUCCESS = 'cap/GET_USER_DATA_SUCCESS_V2';
 export const GET_USER_DATA_FAILURE = 'cap/GET_USER_DATA_FAILURE_V2';
 
-export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE';
-export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST';
-export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS';
+export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE_V2';
+export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST_V2';
+export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS_V2';
 export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
 export const HIDE_TAGS = 'cap/HIDE_TAGS';
 

package/v2Containers/Email/initialSchema.js

@@ -351,7 +351,7 @@ export const response = {
                             fontFamily: "open-sans, sans-serif",
                             fontStyle: "normal",
                             fontWeight: "600",
-                            justifyContent: "flex-end",
+                            marginLeft: "0.313rem",
                           },
                           customComponent: true,
                           width: 2,

package/v2Containers/LanguageProvider/reducer.js

@@ -17,7 +17,9 @@ const initialState = fromJS({
 function languageProviderReducer(state = initialState, action) {
   switch (action.type) {
     case types.GET_LOCIZ_MESSAGE_REQUEST:
-      return state.set('localeLoading', true);
+      return state
+        .set('localeLoading', true)
+        .set('locale', action.locale);
     case types.GET_LOCIZ_MESSAGE_SUCCESS:
       return state
         .set('localeLoading', false)

package/v2Containers/LanguageProvider/tests/reducer.test.js

@@ -3,6 +3,7 @@ import { fromJS } from 'immutable';
 import languageProviderReducer from '../reducer';
 import {
   CHANGE_LOCALE,
+  GET_LOCIZ_MESSAGE_REQUEST,
 } from '../constants';
 
 describe('languageProviderReducer', () => {
@@ -21,4 +22,12 @@ describe('languageProviderReducer', () => {
       messages: {},
     });
   });
+
+  it('make locize message request', () => {
+    expect(languageProviderReducer(undefined, { type: GET_LOCIZ_MESSAGE_REQUEST, locale: 'de' }).toJS()).toEqual({
+      locale: "de",
+      localeLoading: true,
+      messages: {},
+    });
+  });
 });

package/v2Containers/Line/Container/Text/index.js

@@ -56,7 +56,7 @@ export const LineText = ({
     const [messageTitle, updateTextMessageTitle] = useState('');
     const [isDrawerRequired, updateDrawerRequirement] = useState(false);
     const [selectedTemplate, updateSelectedTemplate] = useState();
-    const [translationLang, updateTranslationLang] = useState('');
+    const [translationLang, updateTranslationLang] = useState('en');
 
     useEffect(() => {
         const { messageTitle = '', messageContent = '', type, isInit } = content;
@@ -73,19 +73,17 @@ export const LineText = ({
             }
         }
     }, [content]);
-        const getTranslationMappedLocale = (locale) => {
-            return GET_TRANSLATION_MAPPED?.[locale];
-        }
-    
+
+    //To Find from which locale user is loggedin
     useEffect(() => {
-        const user = localStorage.getItem('user');
-        let locale = 'en';
-        moment.locale(locale);
-        if (user) {
-          locale = JSON.parse(user).lang || locale;
-        }
-        locale = getTranslationMappedLocale(locale);
-        updateTranslationLang(locale);
+      const user = localStorage.getItem("user");
+      let locale = "en";
+      if (user) {
+        locale = JSON.parse(user)?.lang || locale;
+      }
+      locale = GET_TRANSLATION_MAPPED?.[locale];
+      moment.locale(locale);
+      updateTranslationLang(locale);
     }, []);
      
     useEffect(() => {

package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap

@@ -23058,7 +23058,7 @@ new message content.",
                                     </div>
                                   </ComponentWithLabelHOC__CapComponentStyled>
                                 </_class>
-                                <Connect(UserIsAuthenticated(Connect(TagList)))
+                                <Connect(UserIsAuthenticated(Connect(InjectIntl(TagList))))
                                   id="undefined_tags"
                                   injectedTags={Object {}}
                                   key="undefined_tags"
@@ -23079,7 +23079,7 @@ new message content.",
                                   tags={Array []}
                                   userLocale="en-US"
                                 >
-                                  <UserIsAuthenticated(Connect(TagList))
+                                  <UserIsAuthenticated(Connect(InjectIntl(TagList)))
                                     authData={
                                       Object {
                                         "app": Object {},
@@ -23125,7 +23125,7 @@ new message content.",
                                     tags={Array []}
                                     userLocale="en-US"
                                   />
-                                </Connect(UserIsAuthenticated(Connect(TagList)))>
+                                </Connect(UserIsAuthenticated(Connect(InjectIntl(TagList))))>
                                 <CapDrawer
                                   content={
                                     <React.Fragment>