@capillarytech/creatives-library 7.12.39 → 7.12.41

package/package.json

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

package/v2Components/CapWhatsappCTA/constants.js

@@ -27,11 +27,6 @@ export const CTA_URL_OPTIONS = [
     value: STATIC_URL,
     label: <FormattedMessage {...messages.ctaWebsiteTypeStatic} />,
   },
-  // {
-  //   value: DYNAMIC_URL,
-  //   label: <FormattedMessage {...messages.ctaWebsiteTypeDynamic} />,
-  //   disabled: true,
-  // },
 ];
 export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;

package/v2Components/CapWhatsappCTA/index.js

@@ -90,6 +90,7 @@ export const CapWhatsappCTA = (props) => {
 
   const ctaOptions = CTA_OPTIONS.map((option) => {
     const { value, label, tooltipLabel } = option;
+    //if button 1 is of type-> PHONE_NUMBER, it is disabled in second button
     const isDisabled = ctaData.length === 2 && ctaData[0].ctaType === value;
     return {
       value,
@@ -132,10 +133,7 @@ export const CapWhatsappCTA = (props) => {
     const { ctaType, text, phone_number, url } = ctaData[index] || {};
     if (text === '') {
       return true;
-    } else if (
-      ctaType === PHONE_NUMBER &&
-      (phone_number === '91' || phone_number === '' || phone_number.length < 5)
-    ) {
+    } else if (ctaType === PHONE_NUMBER && phone_number.length < 5) {
       return true;
     } else if (ctaType === WEBSITE && (url === '' || urlError)) {
       return true;
@@ -152,6 +150,7 @@ export const CapWhatsappCTA = (props) => {
 
   const renderedContent = () => {
     const renderArray = [];
+    const addBtnDisabled = ctaData.length === 1 && !ctaData[0].isSaved;
     ctaData.forEach((cta) => {
       const { index, ctaType, text, phone_number, url, isSaved } = cta || {};
       if (isSaved) {
@@ -166,17 +165,20 @@ export const CapWhatsappCTA = (props) => {
               <CapIcon
                 size="s"
                 type="drag"
-                style={{ transform: 'rotate(90deg)' }}
+                className="whatsapp-saved-cta-drag-icon"
               />
             </CapColumn>
             <CapColumn
               span={1}
-              style={{ marginBottom: ctaIsPhone ? '-4px' : '' }}
+              className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
               <CapIcon size="s" type={ctaIsPhone ? 'call' : 'launch'} />
             </CapColumn>
             <CapColumn span={6}>
-              <CapLabel type="label2" style={{ fontWeight: '500' }}>
+              <CapLabel
+                type="label2"
+                className="whatsapp-saved-cta-button-text"
+              >
                 {text}
               </CapLabel>
             </CapColumn>
@@ -199,7 +201,7 @@ export const CapWhatsappCTA = (props) => {
             )}
             <CapColumn
               span={1}
-              style={{ marginLeft: '16px' }}
+              className="whatsapp-saved-cta-edit-icon"
               onClick={() => editCta(index)}
             >
               <CapIcon size="s" type="edit" />
@@ -338,15 +340,14 @@ export const CapWhatsappCTA = (props) => {
     });
     // eslint-disable-next-line no-lone-blocks
     {
+      // when first button is not saved, add button is disabled with tooltip
       // eslint-disable-next-line no-unused-expressions
       ctaData.length < 2 &&
         renderArray.push(
           <CapRow>
             <CapTooltip
               title={
-                ctaData.length === 1 && !ctaData[0].isSaved
-                  ? formatMessage(messages.ctaAddDisabled)
-                  : ''
+                addBtnDisabled ? formatMessage(messages.ctaAddDisabled) : ''
               }
               placement={'right'}
             >
@@ -354,7 +355,7 @@ export const CapWhatsappCTA = (props) => {
                 <CapButton
                   type="flat"
                   id="whatsapp-cta-add-button"
-                  disabled={ctaData.length === 1 && !ctaData[0].isSaved}
+                  disabled={addBtnDisabled}
                   className="margin-t-12 margin-l-24"
                   isAddBtn
                   onClick={addCta}

package/v2Components/CapWhatsappCTA/index.scss

@@ -24,6 +24,21 @@
         text-align: center;
         background-color: #f1f1f1;
     }
+
+    .whatsapp-saved-cta-drag-icon {
+        transform: rotate(90deg);
+    }
+
+    .whatsapp-saved-cta-phone-icon {
+        margin-bottom: -4px;
+    }
+
+    .whatsapp-saved-cta-button-text {
+        font-weight: 500;
+    }
+    .whatsapp-saved-cta-edit-icon{
+        margin-left: 16px;
+    }
 }
 
 .cap-whatsapp-cta {

package/v2Components/CapWhatsappCTA/messages.js

@@ -29,10 +29,6 @@ export default defineMessages({
     id: `${prefix}.ctaWebsiteTypeStatic`,
     defaultMessage: 'Static',
   },
-  // ctaWebsiteTypeDynamic: {
-  //   id: `${prefix}.ctaWebsiteTypeDynamic`,
-  //   defaultMessage: 'Dynamic',
-  // },
   ctaPhoneNoPlaceholder: {
     id: `${prefix}.ctaPhoneNoPlaceholder`,
     defaultMessage: 'Enter phone number',

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

@@ -0,0 +1,152 @@
+import React from 'react';
+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 Component = injectIntl(CapWhatsappCTA);
+  return render(
+    <Component
+      ctaData={data}
+      updateHandler={updateHandler}
+      deleteHandler={deleteHandler}
+    />,
+  );
+};
+
+describe('CapWhatsappCTA', () => {
+  it('Test if CapWhatsappCTA component renders', () => {
+    initializeComponent([
+      {
+        index: 0,
+        ctaType: 'PHONE_NUMBER',
+        text: '',
+        phone_number: '9112345',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: false,
+      },
+    ]);
+    expect(screen.getByText('Type of action')).toBeInTheDocument();
+    expect(screen.getByText('Button text')).toBeInTheDocument();
+    expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+  });
+
+  it('first button', async () => {
+    initializeComponent([
+      {
+        index: 0,
+        ctaType: 'PHONE_NUMBER',
+        text: '',
+        phone_number: '9112345',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: false,
+      },
+    ]);
+    const btnTextEvent = {
+      target: {
+        value: 'Call us',
+        id: 0,
+      },
+    };
+    // button text
+    const buttontextInput = await screen.getByPlaceholderText(
+      'Enter button text',
+    );
+    fireEvent.change(buttontextInput, btnTextEvent);
+    expect(updateHandler).toHaveBeenCalledWith(
+      {
+        index: 0,
+        ctaType: 'PHONE_NUMBER',
+        text: 'Call us',
+        phone_number: '9112345',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: false,
+      },
+      '0',
+    );
+  });
+  it('second button', async () => {
+    initializeComponent([
+      {
+        index: 0,
+        ctaType: 'PHONE_NUMBER',
+        text: 'Call us',
+        phone_number: '9112345',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: true,
+      },
+      {
+        index: 1,
+        ctaType: 'WEBSITE',
+        text: 'Visit us',
+        phone_number: '',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: false,
+      },
+    ]);
+    const urlEvent1 = {
+      target: {
+        value: 'https://www.google.co.in',
+        id: 1,
+      },
+    };
+    const urlEvent2 = {
+      target: {
+        value: 'test',
+        id: 1,
+      },
+    };
+    // button text
+    const urlInput = await screen.getByPlaceholderText(
+      'Enter website URL',
+    );
+    fireEvent.change(urlInput, urlEvent1);
+    expect(updateHandler).toHaveBeenCalledWith(
+      {
+        index: 1,
+        ctaType: 'WEBSITE',
+        text: 'Visit us',
+        phone_number: '',
+        urlType: 'STATIC_URL',
+        url: 'https://www.google.co.in',
+        isSaved: false,
+      },
+      '1',
+    );
+    fireEvent.change(urlInput, urlEvent2);
+  });
+  it('both buttons', async () => {
+    initializeComponent([
+      {
+        index: 0,
+        ctaType: 'PHONE_NUMBER',
+        text: 'Call us',
+        phone_number: '9112345',
+        urlType: 'STATIC_URL',
+        url: '',
+        isSaved: true,
+      },
+      {
+        index: 1,
+        ctaType: 'WEBSITE',
+        text: 'Visit us',
+        phone_number: '',
+        urlType: 'STATIC_URL',
+        url: 'https://www.google.co.in',
+        isSaved: true,
+      },
+    ]);
+    expect(screen.getByText(/https:\/\/www\.google\.co\.in/i)).toBeInTheDocument();
+  });
+});

package/v2Components/TemplatePreview/index.js

@@ -21,7 +21,6 @@ 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');
@@ -324,7 +323,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     };
 
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
-    const whatsappUpdatedLen = whatsappContentLen !== undefined ? UNSUBSCRIBE_TEXT_LENGTH + whatsappContentLen : content?.charCount;
+    const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
     return (
       <CapRow>
@@ -342,10 +341,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             <>
               <WhatsappStatusContainer template={templateData} />
               <CapHeading type="h3" className="margin-t-12">
-                <FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: whatsappUpdatedLen}} />
-              </CapHeading>
-              <CapHeading type="h6">
-                <FormattedMessage {...messages.whatsappUnsubscribeLength} />
+                <FormattedMessage
+                  {...messages.whatsappMessageLength}
+                  values={{ length: whatsappUpdatedLen }}
+                />
               </CapHeading>
             </>
           ) : null}

package/v2Components/TemplatePreview/messages.js

@@ -22,18 +22,10 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
-  whatsappCharactersTotal: {
-    id: 'creatives.componentsV2.TemplatePreview.whatsappCharactersTotal',
-    defaultMessage: "{charCount} characters",
-  },
   optoutCharactersTotal: {
     id: 'app.components.TemplatePreview.optoutCharactersTotal',
     defaultMessage: "Includes optout tag ({optoutUrlLength} characters)",
   },
-  whatsappUnsubscribeLength: {
-    id: 'app.components.TemplatePreview.whatsappUnsubscribeLength',
-    defaultMessage: "Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)",
-  },
   whatsappMessageLength: {
     id: 'app.components.TemplatePreview.whatsappMessageLength',
     defaultMessage: "1 Message ({length} characters)",

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

@@ -3,10 +3,7 @@
 exports[`Test Templates container Should render correct preview component for rcs channel 1`] = `
 <CapRow>
   <CapColumn
-    span={16}
-  />
-  <CapColumn
-    span={8}
+    span={24}
   >
     <div
       className="preview-container "
@@ -24,7 +21,21 @@ exports[`Test Templates container Should render correct preview component for rc
         >
           <div
             className="message-pop sms"
-          />
+          >
+            <CapLabel
+              className="message-pop-item align-left rcs-content"
+              fontWeight="bold"
+              type="label5"
+            >
+              RCS Title
+            </CapLabel>
+            <CapLabel
+              className="message-pop-item align-left rcs-content rcs-desc"
+              type="label5"
+            >
+              RCS Description
+            </CapLabel>
+          </div>
         </div>
       </div>
     </div>
@@ -35,35 +46,187 @@ exports[`Test Templates container Should render correct preview component for rc
 exports[`Test Templates container Should render correct preview component for whatsapp channel 1`] = `
 <CapRow>
   <CapColumn
-    span={16}
+    span={24}
   >
-    <WhatsappStatusContainer />
-    <CapHeading
-      className="margin-t-12"
-      type="h3"
+    <div
+      className="preview-container "
     >
-      <FormattedMessage
-        defaultMessage="{charCount} characters"
-        id="creatives.componentsV2.TemplatePreview.whatsappCharactersTotal"
-        values={
+      <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"
+        >
+          30
+        </CapLabel>
+        <div
+          className="msg-container whatsapp-message-container"
+        >
+          <div
+            className="message-pop align-left"
+            style={
+              Object {
+                "background-color": "#ffffff",
+                "border-radius": "6px",
+                "left": 0,
+                "padding": "4px 0 0.571rem",
+                "width": "88%",
+              }
+            }
+          >
+            <CapLabel
+              className="whatsapp-content"
+              type="label1"
+            >
+              You have received {{1}} points
+            </CapLabel>
+            <CapDivider
+              className="whatsapp-divider"
+            />
+            <CapLabel
+              className="whatsapp-cta-preview"
+              type="label21"
+            >
+              <CapIcon
+                size="xs"
+                svgProps={
+                  Object {
+                    "style": Object {
+                      "marginRight": "4px",
+                    },
+                  }
+                }
+                type="call"
+              />
+              Call
+            </CapLabel>
+            <CapLabel
+              className="whatsapp-cta-preview"
+              type="label21"
+            >
+              <CapIcon
+                size="xs"
+                svgProps={
+                  Object {
+                    "style": Object {
+                      "marginRight": "4px",
+                    },
+                  }
+                }
+                type="launch"
+              />
+              Visit
+            </CapLabel>
+          </div>
+        </div>
+      </div>
+      <CapHeading
+        className="margin-t-16"
+        style={
           Object {
-            "charCount": undefined,
+            "textAlign": "center",
           }
         }
-      />
-    </CapHeading>
-    <CapHeading
-      type="h6"
+        type="h3"
+      >
+        <FormattedMessage
+          defaultMessage="1 Message ({length} characters)"
+          id="app.components.TemplatePreview.whatsappMessageLength"
+          values={
+            Object {
+              "length": "test",
+            }
+          }
+        />
+      </CapHeading>
+    </div>
+  </CapColumn>
+</CapRow>
+`;
+
+exports[`Test Templates container Should render correct preview component for whatsapp channel 2`] = `
+<CapRow>
+  <CapColumn
+    span={24}
+  >
+    <div
+      className="preview-container "
     >
-      <FormattedMessage
-        defaultMessage="Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)"
-        id="app.components.TemplatePreview.whatsappUnsubscribeLength"
-        values={Object {}}
-      />
-    </CapHeading>
+      <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"
+        >
+          30
+        </CapLabel>
+        <div
+          className="msg-container whatsapp-message-container"
+        >
+          <div
+            className="message-pop align-left"
+            style={
+              Object {
+                "background-color": "#ffffff",
+                "border-radius": "6px",
+                "left": 0,
+                "padding": "4px 0 0.571rem",
+                "width": "88%",
+              }
+            }
+          >
+            <CapLabel
+              className="whatsapp-content"
+              type="label1"
+            >
+              You have received {{1}} points
+            </CapLabel>
+            <CapDivider
+              className="whatsapp-divider"
+            />
+          </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": "test",
+            }
+          }
+        />
+      </CapHeading>
+    </div>
   </CapColumn>
+</CapRow>
+`;
+
+exports[`Test Templates container Should render correct preview component for whatsapp channel 3`] = `
+<CapRow>
   <CapColumn
-    span={8}
+    span={24}
   >
     <div
       className="preview-container "
@@ -116,7 +279,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": undefined,
+              "length": "test",
             }
           }
         />

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

@@ -3,22 +3,69 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 
 import { TemplatePreview } from '../index';
 
-
 describe('Test Templates container', () => {
   let renderedComponent;
 
-  const renderFunction = (channel) => {
+  const renderFunction = (
+    channel,
+    content,
+    whatsappAccountName,
+    whatsappContentLen,
+  ) => {
     renderedComponent = shallowWithIntl(
-      <TemplatePreview channel={channel} showCount />,
+      <TemplatePreview
+        channel={channel}
+        content={content}
+        whatsappAccountName={whatsappAccountName}
+        whatsappContentLen={whatsappContentLen}
+      />,
     );
   };
 
   it('Should render correct preview component for whatsapp channel', () => {
-    renderFunction('whatsapp');
+    renderFunction(
+      'whatsapp',
+      {
+        templateMsg: 'You have received {{1}} points',
+        ctaData: [
+          {
+            index: 0,
+            type: 'PHONE_NUMBER',
+            text: 'Call',
+            phone_number: '+917892303868',
+          },
+          {
+            index: 1,
+            type: 'STATIC_URL',
+            text: 'Visit',
+            url: 'https://www.capillarytech.com/',
+          },
+        ],
+      },
+      30,
+      'test',
+    );
+    expect(renderedComponent).toMatchSnapshot();
+    renderFunction(
+      'whatsapp',
+      {
+        templateMsg: 'You have received {{1}} points',
+        ctaData: [{}],
+      },
+      30,
+      'test',
+    );
+    expect(renderedComponent).toMatchSnapshot();
+    renderFunction('whatsapp', {}, 0, 'test');
     expect(renderedComponent).toMatchSnapshot();
   });
   it('Should render correct preview component for rcs channel', () => {
-    renderFunction('rcs');
+    renderFunction('rcs', {
+      rcsPreviewContent: {
+        rcsTitle: 'RCS Title',
+        rcsDesc: 'RCS Description',
+      },
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 });