@capillarytech/creatives-library 7.12.67 → 7.12.69

package/config/app.js

@@ -17,6 +17,7 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    //api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/services/tests/api.test.js

@@ -0,0 +1,26 @@
+import { getSenderDetails, uploadFile } from "../api";
+
+describe("getSenderDetails -- Test with valid responses", () => {
+  it("Should return correct response", () =>
+    expect(getSenderDetails("WHATSAPP", -1)).toEqual(Promise.resolve()));
+});
+
+describe("uploadFile -- whatsapp image upload", () => {
+  it("Should return correct response", () =>
+    expect(
+      uploadFile({
+        file: new Image(),
+        assetType: "image",
+        fileParams: {
+          width: 275,
+          height: 183,
+          error: false,
+        },
+        whatsappParams: {
+          source: "whatsapp",
+          wabaId: "107499611940863",
+          accessToken: "Bearer gDwEuRIm9icV6phixociSw==",
+        },
+      })
+    ).toEqual(Promise.resolve()));
+});

package/v2Components/CapWhatsappCTA/index.js

@@ -63,13 +63,8 @@ export const CapWhatsappCTA = (props) => {
       [type]: value,
     };
     if (type === 'urlType') {
-      if (value === STATIC_URL) {
-        clonedCta.url = '';
-        setUrlError(false);
-      } else if (value === DYNAMIC_URL) {
-        clonedCta.url = '{{1}}';
-        setUrlError(formatMessage(messages.ctaWebsiteUrlErrorMessage));
-      }
+      clonedCta.url = '';
+      setUrlError(false);
     }
     updateHandler(clonedCta, index);
   };
@@ -391,7 +386,11 @@ export const CapWhatsappCTA = (props) => {
                     id={index}
                     className="whatsapp-cta-url"
                     onChange={(event) => onUrlChange(event, urlType)}
-                    placeholder={formatMessage(messages.ctaWebsitePlaceholder)}
+                    placeholder={
+                      urlType === DYNAMIC_URL
+                        ? formatMessage(messages.ctaDynamicPlaceholder)
+                        : formatMessage(messages.ctaStaticPlaceholder)
+                    }
                     value={url}
                     size="large"
                     maxLength={URL_MAX_LENGTH}

package/v2Components/CapWhatsappCTA/index.scss

@@ -6,6 +6,7 @@
     padding: 10px;
     border-radius: 4px;
     height: 48px;
+    width: 619px;
 
     div:not(:last-child) {
         margin-right: 9px;
@@ -44,7 +45,7 @@
     }
 
     .whatsapp-cta-tag-revert {
-        margin-left: 100px;
+        margin-left: 90px;
         margin-top: 2px;
         transform: scaleX(-1);
     }

package/v2Components/CapWhatsappCTA/messages.js

@@ -41,10 +41,14 @@ export default defineMessages({
     id: `${prefix}.ctaWebsiteUrl`,
     defaultMessage: 'Website URL',
   },
-  ctaWebsitePlaceholder: {
-    id: `${prefix}.ctaWebsitePlaceholder`,
+  ctaStaticPlaceholder: {
+    id: `${prefix}.ctaStaticPlaceholder`,
     defaultMessage: 'Enter website URL',
   },
+  ctaDynamicPlaceholder: {
+    id: `${prefix}.ctaDynamicPlaceholder`,
+    defaultMessage: 'Enter URL, variable is added by default',
+  },
   ctaWebsiteUrlErrorMessage: {
     id: `${prefix}.ctaWebsiteUrlErrorMessage`,
     defaultMessage: 'URL is not valid',

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

@@ -3,18 +3,22 @@ import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapWhatsappCTA } from '../index';
-import { INITIAL_CTA_DATA } from '../../../v2Containers/Whatsapp/constants';
-import userEvent from '@testing-library/user-event';
 
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
-const initializeComponent = (data) => {
+const initializeComponent = (
+  data,
+  isEditFlow = false,
+  host = 'twiliowhatsapptrans',
+) => {
   const Component = injectIntl(CapWhatsappCTA);
   return render(
     <Component
       ctaData={data}
       updateHandler={updateHandler}
       deleteHandler={deleteHandler}
+      isEditFlow={isEditFlow}
+      hostName={host}
     />,
   );
 };
@@ -37,7 +41,6 @@ describe('CapWhatsappCTA', () => {
     expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
   });
-
   it('first button', async () => {
     initializeComponent([
       {
@@ -108,9 +111,7 @@ describe('CapWhatsappCTA', () => {
       },
     };
     // button text
-    const urlInput = await screen.getByPlaceholderText(
-      'Enter website URL',
-    );
+    const urlInput = await screen.getByPlaceholderText('Enter website URL');
     fireEvent.change(urlInput, urlEvent1);
     expect(updateHandler).toHaveBeenCalledWith(
       {
@@ -147,6 +148,8 @@ describe('CapWhatsappCTA', () => {
         isSaved: true,
       },
     ]);
-    expect(screen.getByText(/https:\/\/www\.google\.co\.in/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/https:\/\/www\.google\.co\.in/i),
+    ).toBeInTheDocument();
   });
 });

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

@@ -63,7 +63,7 @@ exports[`Test Templates container Should render correct preview component for wh
           className="whatsapp-brand-name"
           type="label1"
         >
-          30
+          test
         </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
@@ -83,6 +83,11 @@ exports[`Test Templates container Should render correct preview component for wh
             <div
               className="whatsapp-content"
             >
+              <CapImage
+                alt="Preview is being generated"
+                className="whatsapp-image"
+                src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
+              />
               You have received {{1}} points
               <CapDivider
                 className="whatsapp-divider"
@@ -139,7 +144,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": "test",
+              "length": 30,
             }
           }
         />
@@ -169,7 +174,7 @@ exports[`Test Templates container Should render correct preview component for wh
           className="whatsapp-brand-name"
           type="label1"
         >
-          30
+          test
         </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
@@ -211,7 +216,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": "test",
+              "length": 30,
             }
           }
         />
@@ -240,7 +245,9 @@ exports[`Test Templates container Should render correct preview component for wh
         <CapLabel
           className="whatsapp-brand-name"
           type="label1"
-        />
+        >
+          test
+        </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -276,7 +283,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": "test",
+              "length": 0,
             }
           }
         />

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

@@ -27,6 +27,7 @@ describe('Test Templates container', () => {
       'whatsapp',
       {
         templateMsg: 'You have received {{1}} points',
+        whatsappImageSrc: 'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg',
         ctaData: [
           {
             index: 0,
@@ -42,21 +43,22 @@ describe('Test Templates container', () => {
           },
         ],
       },
-      30,
       'test',
+      30,
     );
     expect(renderedComponent).toMatchSnapshot();
     renderFunction(
       'whatsapp',
       {
         templateMsg: 'You have received {{1}} points',
+        whatsappImageSrc: '',
         ctaData: [{}],
       },
-      30,
       'test',
+      30,
     );
     expect(renderedComponent).toMatchSnapshot();
-    renderFunction('whatsapp', {}, 0, 'test');
+    renderFunction('whatsapp', {}, 'test', 0);
     expect(renderedComponent).toMatchSnapshot();
   });
   it('Should render correct preview component for rcs channel', () => {

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

@@ -28,10 +28,63 @@ exports[`Test WhatsappStatusContainer component Should render correct status com
     tagTextColor="#f87d23"
   >
     <FormattedMessage
-      defaultMessage="Payment update"
-      id="creatives.containersV2.Whatsapp.paymentUpdate"
+      defaultMessage="Marketing"
+      id="creatives.containersV2.Whatsapp.marketing"
       values={Object {}}
     />
   </CapColoredTag>
 </CapRow>
 `;
+
+exports[`Test WhatsappStatusContainer component Should render correct status component for whatsapp channel 2`] = `
+<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="#f2e7fe"
+    tagFontSize="12px"
+    tagHeight="20px"
+    tagTextColor="#a451ff"
+  >
+    <FormattedMessage
+      defaultMessage="Alert update"
+      id="creatives.containersV2.Whatsapp.alertUpdate"
+      values={Object {}}
+    />
+  </CapColoredTag>
+</CapRow>
+`;
+
+exports[`Test WhatsappStatusContainer component Should render correct status component for whatsapp channel 3`] = `
+<CapRow
+  align="middle"
+  className="whatsapp-status-container"
+  type="flex"
+>
+  <CapStatus
+    color=""
+    height="0.571rem"
+    labelType="label3"
+    text=""
+    type=""
+    width="0.571rem"
+  />
+</CapRow>
+`;

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

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

package/v2Components/mockdata.js

@@ -1,39 +1,96 @@
 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
-                    }
-                }
-            }
+  whatsappTemplate1: {
+    _id: '62d3f971b497b671d3bbf8f7',
+    name: 'creatives_whatsapp6',
+    type: 'WHATSAPP',
+    versions: {
+      $init: true,
+      history: [],
+      base: {
+        content: {
+          whatsapp: {
+            status: 'approved',
+            templateId: '720951875646523',
+            hostName: 'karixwhatsappbulk',
+            accessToken: 'Bearer gDwEuRIm9icV6phixociSw==',
+            accountId: '107499611940863',
+            templateEditor: false,
+            karixFileHandle:
+              '4::aW1hZ2UvanBlZw==:ARZpmm0pMfsBvKepIjR-HG2HIw_78ynisr-riY1s4xpi2noK9QsvtvVfnZb5hUxks5HM5JHG0gCn_ZtPuJzya1SH3eq4Upn3M0eqsDLr4CzdPw:e:1658404714:259409122277300:100066839164237:ARbbCRjU-2ksqoUOp4Y',
+            imageUrl:
+              'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg',
+            mediaType: 'IMAGE',
+            buttons: [
+              {
+                phone_number: '+919738752617',
+                text: 'Call',
+                type: 'PHONE_NUMBER',
+                index: 0,
+              },
+              {
+                url: 'https://docs.google.com/{{1}}',
+                text: 'Visit',
+                type: 'DYNAMIC_URL',
+                index: 1,
+              },
+            ],
+            buttonType: 'CTA',
+            languages: [
+              {
+                content:
+                  'Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}\nClick {{3}} to unsubscribe',
+                language: 'en',
+              },
+            ],
+            category: 'MARKETING',
+            rejection_reason: '',
+          },
         },
-        "isActive": true,
-        "orgId": 50371,
-        "createdBy": "15000449",
-        "updatedBy": "15000449",
-        "createdAt": "2022-02-17T07:37:14.166Z",
-        "updatedAt": "2022-02-17T07:37:14.166Z",
-        "totalCount": 5
-    }
-}
+      },
+    },
+    isActive: true,
+    orgId: 50074,
+    createdBy: '15000449',
+    updatedBy: '15000449',
+    createdAt: '2022-07-17T11:58:45.592Z',
+    updatedAt: '2022-07-17T11:58:45.592Z',
+    totalCount: 8,
+  },
+  whatsappTemplate2: {
+    _id: '62d3edc8b497b63ff5bbf8ea',
+    name: 'test_twilio_159425',
+    type: 'WHATSAPP',
+    versions: {
+      $init: true,
+      history: [],
+      base: {
+        content: {
+          whatsapp: {
+            status: 'approved',
+            templateId: 'HTee0274fb8dfdd45427bb678f875b0d54',
+            hostName: 'twiliowhatsapptrans',
+            accessToken: '4676323eb5d1f975b0987070c03a8efc',
+            accountId: 'AC41030cebba9e2f1ce37c78235da0ee18',
+            templateEditor: false,
+            mediaType: 'TEXT',
+            languages: [
+              {
+                content: 'Hi {{1}}, your payment is successful.',
+                language: 'en',
+              },
+            ],
+            category: 'ALERT_UPDATE',
+            rejection_reason: null,
+          },
+        },
+      },
+    },
+    isActive: true,
+    orgId: 50371,
+    createdBy: '15000449',
+    updatedBy: '15000449',
+    createdAt: '2022-07-17T11:08:56.326Z',
+    updatedAt: '2022-07-17T11:08:56.326Z',
+    totalCount: 7,
+  },
+};

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -2,9 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
-import { CapHeader, CapIcons, CapLabel, CapLink, CapSteps, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapHeader, CapIcons, CapLabel, CapLink, CapSteps, CapIcon, CapHeading } from '@capillarytech/cap-ui-library';
 import moment from 'moment';
 import PropTypes from 'prop-types';
+import './index.scss';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
 import { LANGUAGE_OPTIONS } from '../Whatsapp/constants';
@@ -83,7 +84,7 @@ export function SlideBoxHeader(props) {
       {showTemplateNameHeader && templateNameRenderProp()}
       {slidBoxContent === 'preview' && (
       <CapHeader
-        title={templateData.name}
+        title={<CapHeading className='slidebox-header-template-name' type="h1">{templateData.name}</CapHeading>}
         description={<CapLabel type="label3">
           <FormattedMessage {...messages.lastUpdated} values={{date: moment(templateData.updatedAt).format('DD MMM YYYY'), user: templateData.updatedByName}}/>
         </CapLabel>}
@@ -102,7 +103,7 @@ export function SlideBoxHeader(props) {
               {showTemplateName ? (
                 <>
                   {renderData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
-                  {renderData("label2", templateName)}
+                  <StyledLabel className='whatsapp-rcs-template-name' type="label2">{templateName}</StyledLabel>
                 </>
               ) : ""}
               {isWhatsappEdit && (

package/v2Containers/CreativesContainer/index.scss

@@ -42,4 +42,19 @@ $classPrefix: add-creatives-section;
     .slidebox-header div:first-child {
         width: 100%;
     }
+}
+
+.slidebox-header-template-name{
+    max-width: 750px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.whatsapp-rcs-template-name{
+    display: inline-block;
+    width: 450px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -3px;
 }

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

@@ -710,7 +710,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
-        "charCount": 46,
+        "charCount": 151,
         "ctaData": Array [
           Object {
             "index": 0,
@@ -720,42 +720,41 @@ exports[`Test SlideBoxContent container Should render correct component for what
           },
           Object {
             "index": 1,
-            "text": "More info",
-            "type": "STATIC_URL",
-            "url": "https://fast.com/",
+            "text": "Visit",
+            "type": "DYNAMIC_URL",
+            "url": "https://docs.google.com/{{1}}",
           },
         ],
         "templateMsg": <CapLabel
           type="label5"
         >
-          1234567890
+          Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
         </CapLabel>,
+        "whatsappImageSrc": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg",
       }
     }
     showCount={true}
     templateData={
       Object {
-        "_id": "620e213d39bd394c58aeaaca",
-        "createdAt": "2022-02-17T10:19:42.211Z",
+        "_id": "62d3f971b497b671d3bbf8f7",
+        "createdAt": "2022-07-17T11:58:45.592Z",
         "createdBy": "15000449",
         "isActive": true,
         "mode": "preview",
-        "name": "amit123456",
-        "orgId": 50371,
-        "totalCount": 12,
+        "name": "creatives_whatsapp6",
+        "orgId": 50074,
+        "totalCount": 8,
         "type": "WHATSAPP",
-        "updatedAt": "2022-02-17T10:19:42.211Z",
+        "updatedAt": "2022-07-17T11:58:45.592Z",
         "updatedBy": "15000449",
-        "updatedByName": "Ashish Karan fd",
         "versions": Object {
           "$init": true,
           "base": Object {
             "content": Object {
               "whatsapp": Object {
-                "accessToken": "4676323eb5d1f975b0987070c03a8efc",
-                "accountId": "AC41030cebba9e2f1ce37c78235da0ee18",
-                "accountName": "whatsappTest",
+                "accessToken": "Bearer gDwEuRIm9icV6phixociSw==",
+                "accountId": "107499611940863",
                 "buttonType": "CTA",
                 "buttons": Array [
                   Object {
@@ -766,24 +765,27 @@ Click {{unsubscribe}} to unsubscribe
                   },
                   Object {
                     "index": 1,
-                    "text": "More info",
-                    "type": "STATIC_URL",
-                    "url": "https://fast.com/",
+                    "text": "Visit",
+                    "type": "DYNAMIC_URL",
+                    "url": "https://docs.google.com/{{1}}",
                   },
                 ],
-                "category": "ALERT_UPDATE",
+                "category": "MARKETING",
+                "hostName": "karixwhatsappbulk",
+                "imageUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg",
+                "karixFileHandle": "4::aW1hZ2UvanBlZw==:ARZpmm0pMfsBvKepIjR-HG2HIw_78ynisr-riY1s4xpi2noK9QsvtvVfnZb5hUxks5HM5JHG0gCn_ZtPuJzya1SH3eq4Upn3M0eqsDLr4CzdPw:e:1658404714:259409122277300:100066839164237:ARbbCRjU-2ksqoUOp4Y",
                 "languages": Array [
                   Object {
-                    "content": "1234567890
-Click {{1}} to unsubscribe",
+                    "content": "Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+Click {{3}} to unsubscribe",
                     "language": "en",
                   },
                 ],
-                "mediaType": "TEXT",
-                "rejection_reason": null,
+                "mediaType": "IMAGE",
+                "rejection_reason": "",
                 "status": "approved",
-                "templateEditor": "",
-                "templateId": "HT5203cccf5b1e9e41f222fab6cd6c2754",
+                "templateEditor": false,
+                "templateId": "720951875646523",
               },
             },
           },