@capillarytech/creatives-library 7.12.66 → 7.12.68

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.66",
+  "version": "7.12.68",
   "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/CapImageUpload/index.js

@@ -242,7 +242,7 @@ function CapImageUpload(props) {
       />
       </form>
       <div className="image-info-wrapper">
-        {channel === WHATSAPP ? (
+        {channel === WHATSAPP && (
           <>
             <CapHeadingSpan type="label2">
               <FormattedMessage {...messages.whatsappImageSize} />
@@ -251,12 +251,12 @@ function CapImageUpload(props) {
               <FormattedMessage {...messages.whatsappAspectRatio} />
             </CapHeadingSpan>
           </>
-        ) : (
+        )}
+        {channel !== WHATSAPP && (
           <CapHeadingSpan type="label2" className="image-dimension">
             <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight }} />
           </CapHeadingSpan>
-        )
-        }
+        )}
         {channel === FACEBOOK && (
           <CapHeadingSpan type="label2" className="image-aspect-ratio">
             <FormattedMessage {...messages.aspectRatio} />

package/v2Components/CapWhatsappCTA/index.js

@@ -62,12 +62,13 @@ export const CapWhatsappCTA = (props) => {
       ...clonedCta,
       [type]: value,
     };
-    if (type === 'urlType' && value === STATIC_URL) {
-      clonedCta.url = '';
+    if (type === 'urlType') {
+      if (value === STATIC_URL) {
+        clonedCta.url = '';
+      } else if (value === DYNAMIC_URL) {
+        clonedCta.url = '{{1}}';
+      }
       setUrlError(false);
-    } else if (type === 'urlType' && value === DYNAMIC_URL) {
-      clonedCta.url = '{{1}}';
-      setUrlError(formatMessage(messages.ctaWebsiteUrlErrorMessage));
     }
     updateHandler(clonedCta, index);
   };
@@ -164,7 +165,10 @@ export const CapWhatsappCTA = (props) => {
     let errorMessage = false;
     if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
-    } else if (urlType === STATIC_URL && value.match(invalidVarRegex)?.length > 0) {
+    } else if (
+      urlType === STATIC_URL &&
+      value.match(invalidVarRegex)?.length > 0
+    ) {
       errorMessage = formatMessage(messages.staticUrlWithVarErrorMessage);
     }
     setUrlError(errorMessage);
@@ -196,6 +200,7 @@ export const CapWhatsappCTA = (props) => {
     ctaData.forEach((cta) => {
       const { index, ctaType, text, phone_number, urlType, url, isSaved } =
         cta || {};
+      //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         const ctaIsPhone = ctaType === PHONE_NUMBER;
         const urlTypeIsDynamic = urlType === DYNAMIC_URL;
@@ -284,6 +289,7 @@ export const CapWhatsappCTA = (props) => {
           </CapRow>,
         );
       } else {
+        //this is to display buttons before they are saved, only in create mode.
         renderArray.push(
           <CapRow
             className="cap-whatsapp-cta margin-t-16"

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;

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/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",
               },
             },
           },

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

@@ -242,8 +242,8 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
           id="creatives.containersV2.Creatives.lastUpdated"
           values={
             Object {
-              "date": "17 Feb 2022",
-              "user": "Ashish Karan fd",
+              "date": "17 Jul 2022",
+              "user": undefined,
             }
           }
         />
@@ -257,7 +257,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
       </SlideBoxHeader__PrefixWrapper>
     }
     size="large"
-    title="amit123456"
+    title="creatives_whatsapp6"
     titleClass=""
   />
 </div>