@capillarytech/creatives-library 7.17.81 → 7.17.82-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.81",
+  "version": "7.17.82-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -25,6 +25,7 @@
     "jest-date-mock": "^1.0.8",
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
+    "ml-matrix": "6.10.8",
     "node-html-parser": "^5.4.2-0",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",

package/v2Components/CapWhatsappQuickReply/index.js

@@ -0,0 +1,230 @@
+import React from "react";
+import { injectIntl } from "react-intl";
+import cloneDeep from "lodash/cloneDeep";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapError from "@capillarytech/cap-ui-library/CapError";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import { CAP_SPACE_04 } from "@capillarytech/cap-ui-library/styled/variables";
+import messages from "./messages";
+import "./index.scss";
+import globalMessages from "../../v2Containers/Cap/messages";
+import { INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsapp/constants";
+import ctaMessages from "../CapWhatsappCTA/messages";
+
+const CapWhatsappQuickReply = ({
+  quickReplyData,
+  renderMessageLength,
+  setQuickReplyData,
+  isEditFlow,
+  intl,
+}) => {
+  const { TextArea } = CapInput;
+  const { formatMessage } = intl;
+
+  const handleTextChange = (e, index) => {
+    let error = false;
+    const {
+      target: { value },
+    } = e;
+    if (value?.length > 20) {
+      error = formatMessage(messages.templateButtonTextLengthError);
+    }
+    setQuickReplyData(
+      quickReplyData.map((quickReply) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            text: value,
+            error: error,
+          };
+        } else return quickReply;
+      })
+    );
+  };
+
+  const handleSaveAndEditBtn = (index, value) => {
+    setQuickReplyData(
+      quickReplyData.map((quickReply) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            isSaved: value,
+          };
+        } else return quickReply;
+      })
+    );
+  };
+
+  const handleDelete = (index) => {
+    setQuickReplyData((prevState) => {
+      const clonedQuickReplyData = cloneDeep(prevState);
+      const filteredQuickReplyData = clonedQuickReplyData.filter(
+        (i) => i.index !== index
+      );
+      return filteredQuickReplyData.map((quickReply, index) => {
+        quickReply.index = index;
+        return quickReply;
+      });
+    });
+  };
+
+  const addQuickReply = () => {
+    INITIAL_QUICK_REPLY_DATA[0].index = quickReplyData?.length || 0;
+    const clonedQuickReplyData = [
+      ...quickReplyData,
+      ...INITIAL_QUICK_REPLY_DATA,
+    ];
+    setQuickReplyData(clonedQuickReplyData);
+  };
+
+  const quickReplyDisable =
+    quickReplyData?.length === 1 && !quickReplyData?.[0].isSaved;
+  return (
+    <>
+      {quickReplyData?.length > 0 && !isEditFlow && (
+        <CapRow>
+          {quickReplyData?.map(({ index, isSaved, text, error }) => {
+            if (!isSaved) {
+              return (
+                <CapRow className="cap-whatsapp-quick-reply">
+                  <CapRow
+                    className="whatsapp-button-text-container"
+                    key={index}
+                  >
+                    <CapHeader
+                      title={
+                        <CapHeading
+                          type="h4"
+                          className="whatsapp-button-text-heading"
+                        >
+                          {formatMessage(messages.buttonText)}
+                          <CapTooltipWithInfo
+                            placement="right"
+                            infoIconProps={{
+                              style: { marginLeft: CAP_SPACE_04 },
+                            }}
+                            autoAdjustOverflow
+                          />
+                        </CapHeading>
+                      }
+                    />
+                    <CapRow className="whatsapp-button-text-input">
+                      <TextArea
+                        autosize={{ minRows: 1, maxRows: 5 }}
+                        placeholder={formatMessage(
+                          messages.buttonTextPlaceholder
+                        )}
+                        onChange={(e) => handleTextChange(e, index)}
+                        errorMessage={
+                          error && (
+                            <CapError className="whatsapp-template-message-error">
+                              {error}
+                            </CapError>
+                          )
+                        }
+                        value={text || ""}
+                      />
+                    </CapRow>
+                    {renderMessageLength("buttonText", text?.length || 0)}
+                    <CapRow className="whatsapp-cta-save-delete-btn">
+                      <CapTooltip
+                        title={
+                          text === "" || error
+                            ? formatMessage(ctaMessages.ctaSaveDisabled)
+                            : ""
+                        }
+                        placement={"bottom"}
+                      >
+                        <div className="button-disabled-tooltip-wrapper">
+                          <CapButton
+                            onClick={() => {
+                              handleSaveAndEditBtn(index, true);
+                            }}
+                            disabled={text === "" || error}
+                            className="whatsapp-cta-save-btn"
+                          >
+                            {formatMessage(globalMessages.save)}
+                          </CapButton>
+                        </div>
+                      </CapTooltip>
+                      <CapButton
+                        onClick={() => {
+                          handleDelete(index);
+                        }}
+                        className="whatsapp-cta-delete-btn whatsapp-quick-reply-delete-button"
+                        type="secondary"
+                      >
+                        {formatMessage(globalMessages.delete)}
+                      </CapButton>
+                    </CapRow>
+                  </CapRow>
+                </CapRow>
+              );
+            } else {
+              return (
+                <CapRow className="cap-whatsapp-quick-reply">
+                  <CapRow className="whatsapp-quick-reply-save-container">
+                    <CapColumn>
+                      <CapIcon type="six-dots" />
+                    </CapColumn>
+                    <CapColumn className="text-conatiner">{text}</CapColumn>
+                    <CapColumn className="quick-reply-icon">
+                      <CapIcon
+                        onClick={() => handleSaveAndEditBtn(index, false)}
+                        type="edit"
+                      />
+                      <CapIcon
+                        onClick={() => handleDelete(index)}
+                        type="delete"
+                      />
+                    </CapColumn>
+                  </CapRow>
+                </CapRow>
+              );
+            }
+          })}
+        </CapRow>
+      )}
+      {quickReplyData?.length > 0 && isEditFlow && 
+        quickReplyData.map(({text, index}) => (
+          <CapRow className='cap-whatsapp-quick-reply whatsapp-quick-reply-edit-container' key={index}>
+            <CapLabel type='label16'>{text}</CapLabel>
+          </CapRow>
+        ))
+      }
+      {quickReplyData?.length < 3 && !isEditFlow && (
+        <CapRow>
+          <CapTooltip
+            title={
+              quickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
+            }
+            placement={"right"}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="flat"
+                id="whatsapp-quick-reply-add-button"
+                disabled={quickReplyDisable}
+                className="margin-t-12 margin-l-24"
+                isAddBtn
+                onClick={addQuickReply}
+              >
+                {formatMessage(ctaMessages.addButton)}
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </CapRow>
+      )}
+    </>
+  );
+};
+
+export default injectIntl(CapWhatsappQuickReply);

package/v2Components/CapWhatsappQuickReply/index.scss

@@ -0,0 +1,40 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
+.cap-whatsapp-quick-reply {
+    border: solid 1px $CAP_G06;
+    margin-left: $CAP_SPACE_24;
+    margin-top: $CAP_SPACE_24;
+    border-radius: 0.285rem;
+    .whatsapp-button-text-container {
+        padding: $CAP_SPACE_16 $CAP_SPACE_24;
+    }
+    .whatsapp-button-text-heading {
+        display: flex;
+        text-align: center;
+    }
+    .whatsapp-quick-reply-delete-button {
+        margin-left: $CAP_SPACE_12;
+    }
+    .whatsapp-button-text-input {
+        margin-top: $CAP_SPACE_08;
+        margin-bottom: $CAP_SPACE_12;
+    }
+    .whatsapp-quick-reply-save-container {
+        display: flex;
+        align-items: center;
+        padding: $CAP_SPACE_08 $CAP_SPACE_12;
+        .text-conatiner {
+            padding-left: $CAP_SPACE_12;
+        }
+        .quick-reply-icon {
+            position: absolute;
+            right: $CAP_SPACE_12;
+        }
+    }
+}
+
+.whatsapp-quick-reply-edit-container {
+    padding: $CAP_SPACE_12;
+    margin-left: 0;
+    margin-top: $CAP_SPACE_16;
+}

package/v2Components/CapWhatsappQuickReply/messages.js

@@ -0,0 +1,20 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapWhatsappQuickReply`;
+export default defineMessages({
+  buttonText: {
+    id: `${prefix}.buttonText`,
+    defaultMessage: 'Button text',
+  },
+  buttonTextPlaceholder: {
+    id: `${prefix}.buttonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  templateButtonTextError: {
+    id: `${prefix}.templateButtonTextError`,
+    defaultMessage: 'Template footer length cannot exceed 20',
+  },
+  templateButtonTextLengthError: {
+    id: `${prefix}.templateButtonTextLengthError`,
+    defaultMessage: 'Text field length cannot exceed 20',
+  },
+});

package/v2Components/TemplatePreview/index.js

@@ -330,6 +330,33 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       return renderArray;
     };
 
+    const renderQuickReplyPreview = () => {
+      const renderArray = [];
+      const { quickReplyData = [] } = content || {};
+      if (quickReplyData?.length) {
+        renderArray.push(<CapDivider className="whatsapp-divider" />);
+        quickReplyData.forEach((quickReply, index) => {
+          const { text } = quickReply || {};
+          if (text) {
+            renderArray.push(
+              <CapLabel type="label21" className="whatsapp-cta-preview">
+                <CapIcon
+                  type='small-link'
+                  size="xs"
+                  svgProps={{ style: { marginRight: '4px' } }}
+                />
+                {text}
+              </CapLabel>
+            )
+          }
+          if (index < quickReplyData.length -1) {
+            renderArray.push(<CapDivider className="whatsapp-divider" />);
+          }
+        })
+      }
+      return renderArray;
+    }
+
     const handlePreview = () => {
       const {templatePreviewUrl = ''} = templateData;
       handlePreviewInNewTab(templatePreviewUrl);
@@ -772,8 +799,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                               {content?.docPreview}
                             </div>
                           )}
+                          {content?.templateHeaderPreview || ''}
                           {content?.templateMsg || ''}
+                          {content?.templateFooterPreview || ''}
                           {renderWhatsappCtaPreview()}
+                          {renderQuickReplyPreview()}
                         </div>
                       </div>
                     </div>

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

@@ -710,8 +710,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
-        "charCount": 151,
-        "ctaData": Array [
+        "buttonsData": Array [
           Object {
             "index": 0,
             "phone_number": "+919738752617",
@@ -725,6 +724,9 @@ exports[`Test SlideBoxContent container Should render correct component for what
             "url": "https://docs.google.com/{{1}}",
           },
         ],
+        "charCount": 151,
+        "footerMsg": "",
+        "headerMsg": "",
         "templateMsg": <CapLabel
           type="label5"
         >

package/v2Containers/Templates/index.js

@@ -107,7 +107,7 @@ import {
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
-import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -1174,7 +1174,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
-          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = ''} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', headerMsg, footerMsg} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1205,9 +1205,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     : 'whatsapp-message-without-media'
                 }`}
               >
+                {headerMsg}
                 {templateMsg}
+                {footerMsg}
               </span>
               {getWhatsappCta(template)}
+              {getWhatsappQuickReply(template)}
             </>
           );
           break;

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -1389,12 +1389,14 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <CapLabel
                               type="label9"
                             >
                               Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
                             </CapLabel>
+                            
                           </span>
                           <CapLabel
                             style={
@@ -1830,12 +1832,14 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <CapLabel
                               type="label9"
                             >
                               Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
                             </CapLabel>
+                            
                           </span>
                           <CapLabel
                             style={
@@ -2271,12 +2275,14 @@ exports[`Test Templates container Test max templates warning 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <CapLabel
                               type="label9"
                             >
                               Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
                             </CapLabel>
+                            
                           </span>
                           <CapLabel
                             style={

package/v2Containers/Whatsapp/constants.js

@@ -12,6 +12,8 @@ import messages from './messages';
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
+export const TEMPLATE_HEADER_MAX_LENGTH = 60;
+export const TEMPLATE_BUTTON_TEXT_MAX_LENGTH = 20;
 
 const prefix = 'app/v2Containers/Whatsapp';
 export const TEMPLATE_CREATE_REQUEST = `${prefix}/TEMPLATE_CREATE_REQUEST`;
@@ -178,6 +180,9 @@ export const WHATSAPP_MEDIA_TYPES = {
 export const NONE = 'NONE';
 export const CTA = 'CTA';
 export const QUICK_REPLY = 'QUICK_REPLY';
+export const HEADER_TEXT = 'header';
+export const FOOTER_TEXT = 'footer';
+export const MESSAGE_TEXT = 'message';
 export const WHATSAPP_BUTTON_TYPES = {
   NONE,
   CTA,
@@ -197,6 +202,16 @@ export const INITIAL_CTA_DATA = [
   },
 ];
 
+export const INITIAL_QUICK_REPLY_DATA = [
+  {
+    index: 0,
+    text: "",
+    type: "QUICK_REPLY",
+    isSaved: false,
+    error: "",
+  },
+];
+
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4)$/i);
 export const ALLOWED_EXTENSIONS_DOCUMENT_REGEX = (/\.(pdf)$/i);