@capillarytech/creatives-library 7.10.66 → 7.10.68

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.10.66",
+  "version": "7.10.68",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,6 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
+    "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
     "@capillarytech/cap-ui-utils": "1.4.2",

package/utils/tests/v2Common.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { getObjFromQueryParams } from '../v2common';
+
+describe('Test v2common container', () => {
+  it('test getObjFromQueryParams', () => {
+    expect(getObjFromQueryParams("?channel=WHATSAPP&mode=CREATE")).toEqual({
+        channel: 'WHATSAPP',
+        mode: 'CREATE',
+    });
+  });
+});

package/utils/v2common.js

@@ -1,3 +1,10 @@
+
+// returns query items as obj when query string is passed
+/**
+ *
+ * @param {*} searchString // '?channel=whatsapp&mode=create
+ * @returns // { channel: 'whatsapp', mode: 'create' }
+ */
 export const getObjFromQueryParams = (searchString) => {
     const params = new URLSearchParams(searchString);
     const obj = {};

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -414,11 +414,4 @@
   span {
     font-size: $FONT_SIZE_VS;
   }
-}
-.whatsapp-brand-name{
-    position: absolute;
-    top: 11%;
-    left: 38%;
-    color: white;
-    font-size: small;
 }

package/v2Components/TemplatePreview/index.js

@@ -20,6 +20,7 @@ import {
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
+import { UNSUBSCRIBE_TEXT_LENGTH } from '../../v2Containers/Whatsapp/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg'
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
@@ -47,7 +48,7 @@ import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
 
-class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
     const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
       ((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
@@ -292,8 +293,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       </div>
     );
 
-    const whatsappUpdatedAccountName = whatsappAccountName || _.get(templateData, 'versions.base.content.whatsapp.accountName', '');
-    const whatsappUpdatedLen = whatsappContentLen !== undefined ? 36 + whatsappContentLen : content?.templateMsg?.length;
+    const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
+    const whatsappUpdatedLen = whatsappContentLen !== undefined ? UNSUBSCRIBE_TEXT_LENGTH + whatsappContentLen : content?.templateMsg?.length;
 
     return (
       <CapRow>

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Templates container Should render correct preview component for whatsapp channel 1`] = `
+<CapRow>
+  <CapColumn
+    span={16}
+  >
+    <WhatsappStatusContainer />
+    <CapHeading
+      className="margin-t-12"
+      type="h3"
+    >
+      <FormattedMessage
+        defaultMessage="{charCount} characters"
+        id="creatives.componentsV2.TemplatePreview.whatsappCharactersTotal"
+        values={
+          Object {
+            "charCount": undefined,
+          }
+        }
+      />
+    </CapHeading>
+    <CapHeading
+      type="h6"
+    >
+      <FormattedMessage
+        defaultMessage="Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)"
+        id="app.components.TemplatePreview.whatsappUnsubscribeLength"
+        values={Object {}}
+      />
+    </CapHeading>
+  </CapColumn>
+  <CapColumn
+    span={8}
+  >
+    <div
+      className="preview-container "
+    >
+      <div
+        className="shell-v2 align-center"
+      >
+        <CapImage
+          alt="Preview is being generated"
+          className="preview-image"
+          src="test-file-stub"
+        />
+        <CapLabel
+          className="whatsapp-brand-name"
+          type="label1"
+        />
+        <div
+          className="msg-container whatsapp-message-container"
+        >
+          <div
+            className="message-pop align-left"
+            style={
+              Object {
+                "background-color": "#efefef",
+                "border-radius": "6px",
+                "left": "10%",
+                "padding": "4px 0 0.571rem",
+                "width": "88%",
+              }
+            }
+          >
+            <CapLabel
+              className="whatsapp-content"
+              type="label1"
+            />
+          </div>
+        </div>
+      </div>
+      <CapHeading
+        className="margin-t-16"
+        style={
+          Object {
+            "textAlign": "center",
+          }
+        }
+        type="h3"
+      >
+        <FormattedMessage
+          defaultMessage="1 Message ({length} characters)"
+          id="app.components.TemplatePreview.whatsappMessageLength"
+          values={
+            Object {
+              "length": undefined,
+            }
+          }
+        />
+      </CapHeading>
+    </div>
+  </CapColumn>
+</CapRow>
+`;

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

@@ -1,10 +1,24 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
-// import TemplatePreview from '../index';
+import { TemplatePreview } from '../index';
+import mockdata from '../../mockdata';
 
-describe('<TemplatePreview />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
+
+describe('Test Templates container', () => {
+  let renderedComponent;
+
+  const renderFunction = () => {
+    renderedComponent = shallowWithIntl(
+      <TemplatePreview
+        channel="whatsapp"
+        showCount
+      />
+    );
+  };
+
+  it('Should render correct preview component for whatsapp channel', () => {
+    renderFunction();
+    expect(renderedComponent).toMatchSnapshot();
   });
 });

package/v2Components/WhatsappStatusContainer/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test WhatsappStatusContainer component Should render correct status component for whatsapp channel 1`] = `
+<CapRow
+  align="middle"
+  className="whatsapp-status-container"
+  type="flex"
+>
+  <CapStatus
+    color=""
+    height="0.571rem"
+    labelType="label3"
+    text={
+      <FormattedMessage
+        defaultMessage="Approved"
+        id="creatives.containersV2.Whatsapp.approved"
+        values={Object {}}
+      />
+    }
+    type="approved"
+    width="0.571rem"
+  />
+  <CapColoredTag
+    className="whatsapp-category-tag"
+    tagColor="#ffe5d2"
+    tagFontSize="12px"
+    tagHeight="20px"
+    tagTextColor="#f87d23"
+  >
+    <FormattedMessage
+      defaultMessage="Payment update"
+      id="creatives.containersV2.Whatsapp.paymentUpdate"
+      values={Object {}}
+    />
+  </CapColoredTag>
+</CapRow>
+`;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { WhatsappStatusContainer } from '../index';
+import mockdata from '../../mockdata';
+
+const { whatsappTemplate } = mockdata;
+
+describe('Test WhatsappStatusContainer component', () => {
+  let renderedComponent;
+
+  const renderFunction = () => {
+    renderedComponent = shallowWithIntl(
+      <WhatsappStatusContainer
+        template={whatsappTemplate}
+      />
+    );
+  };
+
+  it('Should render correct status component for whatsapp channel', () => {
+    renderFunction();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package/v2Components/mockdata.js

@@ -0,0 +1,39 @@
+export default {
+    whatsappTemplate: {
+        "_id": "620dfb2939bd39482baeaabd",
+        "name": "demo_2",
+        "type": "WHATSAPP",
+        "versions": {
+            "$init": true,
+            "history": [],
+            "base": {
+                "content": {
+                    "whatsapp": {
+                        "status": "approved",
+                        "templateId": "HTb91abec747c522c6865560016e3b9301",
+                        "accountName": "whatsappTest",
+                        "accessToken": "4676323eb5d1f975b0987070c03a8efc",
+                        "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
+                        "templateEditor": "",
+                        "mediaType": "TEXT",
+                        "languages": [
+                            {
+                                "content": "Hi {{1}}, your account is credited with {{2}}\n\nTC{{3}}\nClick {{4}} to unsubscribe",
+                                "language": "en"
+                            }
+                        ],
+                        "category": "PAYMENT_UPDATE",
+                        "rejection_reason": null
+                    }
+                }
+            }
+        },
+        "isActive": true,
+        "orgId": 50371,
+        "createdBy": "15000449",
+        "updatedBy": "15000449",
+        "createdAt": "2022-02-17T07:37:14.166Z",
+        "updatedAt": "2022-02-17T07:37:14.166Z",
+        "totalCount": 5
+    }
+}

package/v2Containers/Cap/messages.js

@@ -161,5 +161,10 @@ export default defineMessages({
     id: `creatives.containersV2.done`,
     defaultMessage: 'Done',
   },
+  "unsupportedTagsValidationError": {
+    id: `creatives.containersV2.unsupportedTagsValidationError`,
+    defaultMessage:
+      'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
 });
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -92,7 +92,7 @@ const getViber = ({
   return {};
 };
 
-function SlideBoxContent(props) {
+export function SlideBoxContent(props) {
   const {
       slidBoxContent,
       onSelectTemplate,

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -26,10 +26,9 @@ const renderWhatsappData = (type, value) => (
   <StyledLabel type={type}>
     {value}
   </StyledLabel>
-)
-function SlideBoxHeader(props) {
-
+);
 
+export function SlideBoxHeader(props) {
   const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';

package/v2Containers/CreativesContainer/index.js

@@ -47,7 +47,7 @@ const SlideBoxWrapper = styled.div`
     }
   }
 `;
-class Creatives extends React.Component {
+export class Creatives extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -373,8 +373,8 @@ class Creatives extends React.Component {
               varMapped,
               language,
               category,
-              mediaType
-            }
+              mediaType,
+            } = {},
           } = templateData;
           creativesTemplateData = {
             type: constants.WHATSAPP,
@@ -541,11 +541,11 @@ class Creatives extends React.Component {
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
-            languages,
+            languages = [{}],
             mediaType,
             category,
             templateEditor,
-            varMapped
+            varMapped,
           } = cloneDeep(versions.base.content.whatsapp);
           templateData = {
             channel,

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+
+import { SlideBoxContent } from '../SlideBoxContent';
+import mockdata from '../../mockdata';
+
+const { editTemplateData, previewTemplateData } = mockdata;
+
+jest.mock("../../../v2Components/FormBuilder", () => ({
+  __esModule: true,
+  default: (props) => <div className="FormBuilder-mock" {...props}>FormBuilder</div>,
+}));
+
+describe('Test SlideBoxContent container', () => {
+  const onCreateComplete = jest.fn();
+  let renderedComponent;
+
+  const renderFunction = (channel, mode, templateData) => {
+    renderedComponent = shallowWithIntl(
+      <SlideBoxContent
+        slidBoxContent={mode}
+        currentChannel={channel}
+        templateData={templateData}
+        onCreateComplete={onCreateComplete}
+      />
+    );
+  };
+
+  it('Should render correct component for whatsapp channel create mode', () => {
+    renderFunction("WHATSAPP", "createTemplate", { mode: "create" });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+
+  it('Should render correct component for whatsapp channel edit mode', () => {
+    renderFunction("WHATSAPP", "editTemplate", editTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for whatsapp channel preview mode', () => {
+    renderFunction("WHATSAPP", "preview", previewTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for whatsapp channel templates mode', () => {
+    renderFunction("WHATSAPP", "templates");
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+
+import { SlideBoxHeader } from '../SlideBoxHeader';
+import mockdata from '../../mockdata';
+
+const { editTemplateData, previewTemplateData } = mockdata;
+
+jest.mock("../../../v2Components/FormBuilder", () => ({
+  __esModule: true,
+  default: (props) => <div className="FormBuilder-mock" {...props}>FormBuilder</div>,
+}));
+
+describe('Test SlideBoxHeader container', () => {
+  const onCreateComplete = jest.fn();
+  let renderedComponent;
+
+  const renderFunction = (channel, mode, templateData, isFullMode) => {
+    renderedComponent = shallowWithIntl(
+      <SlideBoxHeader
+        slidBoxContent={mode}
+        channel={channel}
+        templateData={templateData}
+        onCreateComplete={onCreateComplete}
+        isFullMode={isFullMode}
+      />
+    );
+  };
+
+  it('Should render correct component for whatsapp channel create mode', () => {
+    renderFunction("WHATSAPP", "createTemplate", { mode: "create" });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+
+  it('Should render correct component for whatsapp channel edit mode', () => {
+    renderFunction("WHATSAPP", "editTemplate", editTemplateData, true);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for whatsapp channel preview mode', () => {
+    renderFunction("WHATSAPP", "preview", previewTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for whatsapp channel templates mode', () => {
+    renderFunction("WHATSAPP", "templates");
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    onCreateComplete={[MockFunction]}
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for whatsapp channel edit mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    getDefaultTags=""
+    location={
+      Object {
+        "pathname": "/whatsapp/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    params={
+      Object {
+        "id": "620e213d39bd394c58aeaaca",
+      }
+    }
+    templateData={
+      Object {
+        "_id": "620e213d39bd394c58aeaaca",
+        "mode": "edit",
+        "modeType": "",
+        "type": "WHATSAPP",
+        "whatsappTemplateCategory": "ALERT_UPDATE",
+        "whatsappTemplateName": "amit123456",
+      }
+    }
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for whatsapp channel preview mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="whatsapp"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "templateMsg": "1234567890
+Click {{unsubscribe}} to unsubscribe",
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "620e213d39bd394c58aeaaca",
+        "createdAt": "2022-02-17T10:19:42.211Z",
+        "createdBy": "15000449",
+        "isActive": true,
+        "mode": "preview",
+        "name": "amit123456",
+        "orgId": 50371,
+        "totalCount": 12,
+        "type": "WHATSAPP",
+        "updatedAt": "2022-02-17T10:19:42.211Z",
+        "updatedBy": "15000449",
+        "updatedByName": "Ashish Karan fd",
+        "versions": Object {
+          "$init": true,
+          "base": Object {
+            "content": Object {
+              "whatsapp": Object {
+                "accessToken": "4676323eb5d1f975b0987070c03a8efc",
+                "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
+                "accountName": "whatsappTest",
+                "category": "ALERT_UPDATE",
+                "languages": Array [
+                  Object {
+                    "content": "1234567890
+Click {{1}} to unsubscribe",
+                    "language": "en",
+                  },
+                ],
+                "mediaType": "TEXT",
+                "rejection_reason": null,
+                "status": "approved",
+                "templateEditor": "",
+                "templateId": "HT5203cccf5b1e9e41f222fab6cd6c2754",
+              },
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for whatsapp channel templates mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(withStyles__StyledComponent))))
+    FTPMode="create"
+    channel="whatsapp"
+    location={
+      Object {
+        "pathname": "/sms/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    messageDetails={Object {}}
+    onCreateComplete={[MockFunction]}
+    slidBoxContent="templates"
+  />
+</SlideBoxContent__CreativesWrapper>
+`;