@capillarytech/creatives-library 7.12.50 → 7.12.53

package/v2Components/WhatsappStatusContainer/index.js

@@ -1,58 +1,48 @@
 import React from 'react';
-import { CapRow, CapStatus, CapColoredTag } from '@capillarytech/cap-ui-library';
-import { WHATSAPP } from '../../v2Containers/CreativesContainer/constants';
+import { get } from 'lodash';
 import {
-    CATEGORY as WHATSAPP_CATEGORY,
-    STATUS as WHATSAPP_STATUS,
-} from '../../v2Containers/Whatsapp/constants';
-import { getWhatsappCategory, getWhatsappStatus } from '../../v2Containers/Whatsapp/utils';
+  CapRow,
+  CapStatus,
+  CapColoredTag,
+} from '@capillarytech/cap-ui-library';
+import {
+  getWhatsappCategory,
+  getWhatsappStatus,
+} from '../../v2Containers/Whatsapp/utils';
 import './_whatsappStatusContainer.scss';
 
 export const WhatsappStatusContainer = (props) => {
+  const {
+    status = '',
+    category = '',
+    hostName = '',
+  } = get(props, 'template.versions.base.content.whatsapp', {});
+  const categoryObj = getWhatsappCategory(category, hostName) || {};
+  const {
+    label: categoryLabel,
+    tagColor: categoryTagColor,
+    tagTextColor: categoryTextColor,
+  } = categoryObj;
+  return (
+    <CapRow type="flex" align="middle" className="whatsapp-status-container">
+      <CapStatus
+        type={status}
+        text={getWhatsappStatus(status)?.label}
+        labelType="label3"
+      />
+      {categoryLabel ? (
+        <CapColoredTag
+          tagColor={categoryTagColor}
+          tagTextColor={categoryTextColor}
+          tagHeight="20px"
+          tagFontSize="12px"
+          className="whatsapp-category-tag"
+        >
+          {categoryLabel}
+        </CapColoredTag>
+      ) : null}
+    </CapRow>
+  );
+};
 
-    const { template } = props;
-
-    const {
-        versions: {
-          base: {
-            content: {
-                [WHATSAPP.toLowerCase()]: {
-                [WHATSAPP_STATUS]: status,
-                [WHATSAPP_CATEGORY]: category,
-              } = {},
-            } = {},
-          } = {},
-        } = {},
-    } = template;
-
-    const categoryObj = getWhatsappCategory(category) || {};
-    const {
-        label: categoryLabel,
-        tagColor: categoryTagColor,
-        tagTextColor: categoryTextColor,
-    } = categoryObj;
-    return (
-        <CapRow type="flex" align="middle" className="whatsapp-status-container">
-            <CapStatus
-                type={status}
-                text={getWhatsappStatus(status)?.label}
-                labelType="label3"
-            />
-            {
-            categoryLabel ? (
-                <CapColoredTag
-                    tagColor={categoryTagColor}
-                    tagTextColor={categoryTextColor}
-                    tagHeight="20px"
-                    tagFontSize="12px"
-                    className="whatsapp-category-tag"
-                >
-                    {categoryLabel}
-                </CapColoredTag>
-            ) : null
-            }
-        </CapRow>
-    )
-}
-
-export default WhatsappStatusContainer;
+export default WhatsappStatusContainer;

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

@@ -3,9 +3,9 @@ import { injectIntl } from 'react-intl';
 
 import * as actions from '../actions';
 import {Cap} from '../index';
-import mockdata from '../../mockdata';
+import mockData from '../../mockdata';
 import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
-const { match, location, capGlobal, language } = mockdata;
+const { match, location, capGlobal, language } = mockData;
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   GA: {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -6,7 +6,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsWrapper from '../SmsWrapper';
-import isEmpty from 'lodash/isEmpty';
 // import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
@@ -240,9 +239,10 @@ export function SlideBoxContent(props) {
           baseUrl,
           video,
           template,
-          contents,
+          contents = {},
+          type = '',
         }) => {
-          const isNewLineFormat = isEmpty(template) && !isEmpty(contents);
+          const isNewLineFormat = type === 'flex';
           const {
             originalContentUrl,
             externalLink: {
@@ -262,10 +262,11 @@ export function SlideBoxContent(props) {
           previewContent.video = originalContentUrl;
           previewContent.actionUrl = linkUri;
           if (isNewLineFormat) {
-            previewContent.imageCarousel = get(contents, 'contents', [{}]).map(({
-              hero: { url = ''} = {},
-              footer: { contents: [{ action: { label = '' } = {} }] = [{}] } = {},
-            }) => ({ imageUrl: url, actionLabel: label }));
+            const { contents: flexContent = [] } = contents;
+            previewContent.imageCarousel = flexContent.map((data) => ({
+              imageUrl: get(data, "hero.url", ""),
+              actionLabel: get(data, "footer.contents[0].action.label", ""),
+            }));
           } else {
             previewContent.imageCarousel = get(template, 'columns', [{}]).map(({ imageUrl, action: { label: actionLabel } = {} }) => ({ imageUrl, actionLabel }) );
           }
@@ -413,7 +414,6 @@ export function SlideBoxContent(props) {
         content={getChannelPreviewContent(templateData)}
         viberBrandName={selectedAccount || ""}
         viberAccountName={(selectedAccount || "")[0]}
-        whatsappAccountName={selectedAccount}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -4,11 +4,22 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 
-const { whatsappEditTemplateData, whatsappPreviewTemplateData, rcsEditTemplateData, rcsPreviewTemplateData, lineEditTemplateData, linePreviewTemplateData1, linePreviewTemplateData2, linePreviewTemplateData3, linePreviewTemplateData4, linePreviewTemplateContent, viberPreviewTemplateData } = mockdata;
-
-jest.mock("../../../v2Components/FormBuilder", () => ({
+const {
+  whatsappEditTemplateData,
+  whatsappPreviewTemplateData,
+  rcsEditTemplateData,
+  rcsPreviewTemplateData,
+  linePreviewTemplateData1,
+  linePreviewTemplateData2,
+} = mockdata;
+
+jest.mock('../../../v2Components/FormBuilder', () => ({
   __esModule: true,
-  default: (props) => <div className="FormBuilder-mock" {...props}>FormBuilder</div>,
+  default: (props) => (
+    <div className="FormBuilder-mock" {...props}>
+      FormBuilder
+    </div>
+  ),
 }));
 
 describe('Test SlideBoxContent container', () => {
@@ -22,76 +33,57 @@ describe('Test SlideBoxContent container', () => {
         currentChannel={channel}
         templateData={templateData}
         onCreateComplete={onCreateComplete}
-      />
+      />,
     );
   };
 
   it('Should render correct component for whatsapp channel create mode', () => {
-    renderFunction("WHATSAPP", "createTemplate", { mode: "create" });
+    renderFunction('WHATSAPP', 'createTemplate', { mode: 'create' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel edit mode', () => {
-    renderFunction("WHATSAPP", "editTemplate", whatsappEditTemplateData);
+    renderFunction('WHATSAPP', 'editTemplate', whatsappEditTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel preview mode', () => {
-    renderFunction("WHATSAPP", "preview", whatsappPreviewTemplateData);
+    renderFunction('WHATSAPP', 'preview', whatsappPreviewTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel templates mode', () => {
-    renderFunction("WHATSAPP", "templates");
+    renderFunction('WHATSAPP', 'templates');
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for rcs channel create mode', () => {
-    renderFunction("RCS", "createTemplate", { mode: "create" });
+    renderFunction('RCS', 'createTemplate', { mode: 'create' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for rcs channel edit mode', () => {
-    renderFunction("RCs", "editTemplate", rcsEditTemplateData);
+    renderFunction('RCs', 'editTemplate', rcsEditTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for rcs channel preview mode', () => {
-    renderFunction("RCS", "preview", rcsPreviewTemplateData);
+    renderFunction('RCS', 'preview', rcsPreviewTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for rcs channel templates mode', () => {
-    renderFunction("RCS", "templates");
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('Should render correct component for line channel create mode', () => {
-    renderFunction("LINE", "createTemplate", { mode: "create" });
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('Should render correct component for line channel edit mode', () => {
-    renderFunction("LINE", "editTemplate", lineEditTemplateData);
+    renderFunction('RCS', 'templates');
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for line channel preview mode', () => {
-    renderFunction("LINE", "preview", linePreviewTemplateData1);
+    renderFunction('LINE', 'preview', linePreviewTemplateData1);
     expect(renderedComponent).toMatchSnapshot();
-    renderFunction("LINE", "preview", linePreviewTemplateData2);
+    renderFunction('LINE', 'preview', linePreviewTemplateData2);
     expect(renderedComponent).toMatchSnapshot();
-    renderFunction("LINE", "preview", linePreviewTemplateData3);
-    expect(renderedComponent).toMatchSnapshot();
-    renderFunction("LINE", "preview", linePreviewTemplateData4);
-    expect(renderedComponent).toMatchSnapshot();
-    renderFunction("LINE", "preview", linePreviewTemplateContent);
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('Should render correct component for viber channel preview mode', () => {
-    renderFunction("VIBER", "preview", viberPreviewTemplateData);
+    delete linePreviewTemplateData2.versions.base.content.messages[0].contents;
+    renderFunction('LINE', 'preview', linePreviewTemplateData2);
     expect(renderedComponent).toMatchSnapshot();
   });
-
 });