@capillarytech/creatives-library 7.13.15 → 7.13.17

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.13.15",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "*/styles/",
+    "*global-styles*",
+    "*font*",
+    "*moment/locale*"
+  ],
+  "version": "7.13.17",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CapFacebookPreview/index.js

@@ -202,7 +202,6 @@ export const CapFacebookPreview = (props) => {
         creative: {
           object_story_spec: {
             page_id: pageId,
-            message: primaryText,
           },
         },
         ad_format: adPreviewFormat,

package/v2Containers/CapFacebookPreview/tests/index.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import {render, screen, fireEvent } from '../../../utils/test-utils';
+import {CapFacebookPreview} from '../index';
+import { facebookImgMockData, getPreviewActionCalledWith } from './mockdata';
+
+const ComponentToRender = injectIntl(CapFacebookPreview);
+const renderComponent = props => render(<ComponentToRender {...props} />);
+
+
+const getPreview = jest.fn();
+const clearPreview = jest.fn();
+
+
+describe("CapFacebookPreview Test",()=>{
+    it("It should call getPreview action with appropriate fields", ()=>{
+        const facebookPreviewActions = {
+            getPreview,
+            clearPreview
+        }
+
+        const props = {
+            ...facebookImgMockData, 
+            facebookPreviewActions
+
+        }
+
+        renderComponent(props);
+
+        const generatePreviewBtn = screen.getByRole('button', { name: /generate preview/i});
+        expect(generatePreviewBtn).toBeEnabled();
+
+        fireEvent.click(generatePreviewBtn);
+
+        expect(getPreview).toHaveBeenCalledTimes(1);
+        expect(getPreview).toHaveBeenCalledWith(getPreviewActionCalledWith);
+    })
+})

package/v2Containers/CapFacebookPreview/tests/mockdata.js

@@ -0,0 +1,60 @@
+export const facebookImgMockData = {
+    "disablePreviewButton": false,
+    "selectedAd": "IMAGE",
+    "previewData": [
+        {
+            "subType": "IMAGE",
+            "imageData": {
+                "imageSrc": "https://storage.crm.n.content-cdn.io/cdn-cgi/image/quality=75/intouch_creative_assets/e94dbe9b-b3a1-4eec-86d0-d859d7a.jpeg"
+            },
+            "videoData": {},
+            "webSiteLink": "https://www.google.com",
+            "linkHeadLine": "asdf",
+            "linkDesc": "asdfa",
+            "errorMsg": {
+                "websiteLinkErrorMsg": false
+            }
+        }
+    ],
+    "primaryText": "af",
+    "callToAction": "NO_CALL_TO_ACTION",
+    "displayLink": "",
+    "orgUnitFacebookPageSettingsMap": {
+        "pageId": "1234",
+        "pageName": "1234_Nightly",
+        "pageAccessToken": "randomPageAccessToken",
+        "pageStatus": "SENT",
+        "verificationStatus": "APPROVED",
+        "isPageAccessTokenUpdated": false
+    },
+    "accessToken": "randomAccessToken",
+    "accountId": "1234567",
+    "facebookPreviewData": {
+        "fetchPreviewStatus": "PreviewNotRequested",
+        "previewIframe": "",
+        "previewIframeError": ""
+    },
+};
+
+export const getPreviewActionCalledWith = {
+  accessToken: "randomAccessToken",
+  pageAccessToken: "randomPageAccessToken",
+  pageId: "1234",
+  actId: "act_1234567",
+  params: {
+    creative: {
+      object_story_spec: {
+        page_id: "1234",
+        link_data: {
+          description: "asdfa",
+          message: "af",
+          link: "https://www.google.com",
+          name: "asdf",
+          picture:
+            "https://storage.crm.n.content-cdn.io/cdn-cgi/image/quality=75/intouch_creative_assets/e94dbe9b-b3a1-4eec-86d0-d859d7a.jpeg",
+        },
+      },
+    },
+    ad_format: "DESKTOP_FEED_STANDARD",
+  },
+};

package/v2Containers/CreativesContainer/constants.js

@@ -22,4 +22,4 @@ export const RCS = "RCS";
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
 
-export const WHATSAPP_HELP_DOC_LINK = "https://docs.capillarytech.com/docs/create-whatsapp-template";
+export const WHATSAPP_HELP_DOC_LINK = "https://support.capillarytech.com/en/support/solutions/articles/4000180620-create-whatsapp-template";

package/v2Containers/Email/index.js

@@ -324,7 +324,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
-      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData !== nextProps.isGetFormData)) {
+      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData!==nextProps.isGetFormData)) {
         const formData = this.state.formData;
         let isBeeEditor = false;
         const isBEEEnable = this.checkBeeEditorAllowedForLibrary();
@@ -681,9 +681,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         channel: EMAIL,
         timeTaken,
         content: base?.[activeTab]?.['template-content'],
-        mode: isEdit ? EDIT : CREATE,
+        mode: isEdit ? EDIT : CREATE
       });
-
+      
       // this.resetSchema();
       let message;
       if (isEdit) {
@@ -872,6 +872,46 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           } else {
             schema.containers[index].isActive = false;
           }
+          // const isLanguageSupport = this.props.location.query.isLanguageSupport;
+
+          _.forEach(data.selectedLanguages, (lang, langIndex) => {
+            if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.currentOrgDetails.basic_details.base_language) {
+              const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
+              const tabContentSection = tabContent.inputFields[0].cols[0];
+              const panes = containers[0].panes.slice();
+              const firstPane = _.cloneDeep(panes[0]);
+              const sections = [];
+              _.forEach(firstPane.sections, (section) => {
+                let sect = _.cloneDeep(section);
+
+                if (sect.type === 'col-label') {
+                  sect = this.cloneColLabel(sect, (langIndex + 1));
+                } else if (sect.type === 'multicols') {
+                  sect = this.cloneMultiCol(sect, (langIndex + 1));
+                } else if (sect.type === 'parent') {
+                  sect = this.cloneParent(sect, (langIndex + 1));
+                }
+
+                sections.push(sect);
+                return true;
+              });
+              //
+
+              this.map[`template-content${data.selectedLanguages.indexOf(lang) + 1}`] = this.map['template-content'];
+              tabContentSection.id = `${tabContentSection.id}${index + 1}`;
+              tabContentSection.value = `${data[lang].language}`;
+
+              firstPane.sections = sections;
+              firstPane.sectionsHeaders = [tabContent];
+
+              // panes.push(firstPane);
+
+              schema.containers[index].panes.push(firstPane);
+            } else if (lang !== this.props.currentOrgDetails.basic_details.base_language) {
+              delete data[lang];
+              data.selectedLanguages.splice(langIndex, 1);
+            }
+          });
         }
         if (data.base) {
           formData.base = data;
@@ -2333,7 +2373,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const response = {
         action: "getFormData",
         postAction: this.state.getFormDataValue || 'next',
-        id: _.get(this.props, 'Email.templateDetails._id', ''),
+        id : _.get(this.props, 'Email.templateDetails._id', ''),
         value: this.transformFormData(passedData),
         validity: this.state.isFormValid,
         type: 'EMAIL',
@@ -2367,9 +2407,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const newdata = data;
 
       if (!isNaN(index) && newdata) {
-        // as baseLanguage & created template language are not same than it will pick from  template language
-        const baseLangTabKey = newdata[baseLanguage]?.tabKey || newdata.tabKey;
+        const baseLangTabKey = newdata[baseLanguage].tabKey;
         newdata.tabKey = baseLangTabKey;
+        newdata.activeTab = baseLanguage;
         if (newdata.base) {
           baseKey = baseLangTabKey;
         }
@@ -2391,7 +2431,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     obj.versions.base = formData.base;
     obj.versions.base.tabKey = baseKey;
     obj.versions.base.subject = formData['template-subject'];
-    obj.versions.base.activeTab = formData?.base?.activeTab || baseLanguage;
+    obj.versions.base.activeTab = baseLanguage;
     _.forEach(obj.versions.base.selectedLanguages, (language) => {
       if (obj.versions.base[language].is_drag_drop) {
         delete obj.versions.base[language].edmeditorsrc;
@@ -2690,7 +2730,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   isEdit={this.state.isEdit}
                   iframeParent={parent}
                   router={this.props.router}
-                  baseLanguage={this.state.formData[0]?.activeTab || this.props.currentOrgDetails.basic_details.base_language} // // as baseLanguage & created template language are not same than it will pick from  template language (activeTab has template language)
+                  baseLanguage={this.props.currentOrgDetails.basic_details.base_language}
                   supportedLanguages={this.getSupportedLanguages(this.props)}
                   isSchemaChanged={this.state.isSchemaChanged}
                   cmsTemplates={this.props.Templates.cmsTemplates}

package/v2Containers/Email/mockdata/mockdata.js

@@ -1,54 +0,0 @@
-export const EMAILPreviewMockData = {
-  loadingStatus: 0,
-  formData: {},
-  tabCount: 1,
-  currentTab: 1,
-  events: {
-    blur: (() => {}),
-    afterPaste: (() => {}),
-    change: (() => {}),
-  },
-  isEdit: false,
-  schema: {},
-  loading: false,
-  isFormValid: true,
-  injectedTags: {},
-  checkValidation: false,
-  saveEdmDataMode: 'save',
-  tabKey: '',
-  showEmailPreview: false,
-  device: "desktop",
-  editorInstanse: undefined,
-  showImageSelectionBox: false,
-  isDragDrop: false,
-  showConfirmationModal: false,
-  modalContent: {title: "", body: "", type: 'confirm', id: 'email-language-delete-modal'},
-  showModal: false,
-  page: 1,
-  perPageLimit: 25,
-  totalCount: 0,
-  searchText: '',
-  saveCount: 0,
-  cmsDataCount: 0,
-  targetSaveCount: 0,
-  saveObj: {},
-  showEdmEmailTemplates: false,
-  editDataSet: false,
-  languageDataSet: false,
-  addLanguageType: '',
-  startValidation: false,
-  saveForm: false,
-
-  params: {},
-  location: {
-    pathname: '/creatives/ui/v2',
-    search: '',
-    hash: '',
-    key: 'm54f44',
-    query: {module: "library"},
-  },
-  Templates: {},
-  Email: {},
-  isGetFormData: true,
-  currentOrgDetails: {basic_details: {}},
-};

package/v2Containers/Email/tests/index.test.js

@@ -1,35 +0,0 @@
-import React from "react";
-import { injectIntl } from 'react-intl';
-import '@testing-library/jest-dom';
-import {
-  render,
-} from '../../../utils/test-utils';
-import { EMAILPreviewMockData } from '../mockdata/mockdata';
-import { Email } from "../index";
-
-const initializeComponent = () => {
-  const Component = injectIntl(Email);
-  const resetUploadData = jest.fn();
-  const clearStoreValues = jest.fn();
-  const clearCRUDResponse = jest.fn();
-  const fetchSchemaForEntity = jest.fn();
-
-  return render( <Component
-    {...EMAILPreviewMockData}
-    templatesActions={{resetUploadData}}
-    actions={{
-      clearStoreValues,
-      clearCRUDResponse,
-    }}
-    globalActions={{
-      fetchSchemaForEntity,
-    }}
-    />);
-};
-
-describe('renders a message', () => {
-  it("Test if Email component renders", () => {
-    initializeComponent();
-  });
-});
-