@capillarytech/creatives-library 7.12.51 → 7.12.53

package/package.json

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

package/services/api.js

@@ -119,7 +119,7 @@ function request(url, options, handleUnauthorizedStatus) {
     .catch((error) => error);
 }
 
-function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false) {
+function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false, orgUnitId = false) {
   const token = loadItem('token');
   const orgID = loadItem('orgID');
   const user = loadItem('user');
@@ -138,6 +138,9 @@ function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeader
     if (token !== undefined) {
       headers['X-CAP-CT'] = token;
     }
+    if (orgUnitId) {
+      headers['X-CAP-OU'] = orgUnitId;
+    }
   } else {
     if (user && user.refID) {
       headers['X-CAP-REMOTE-USER'] = user.refID;
@@ -299,7 +302,7 @@ export const deleteAssetById = ({assetId, assetType}) => {
   // return API.deleteResource(url);
 };
 
-export const uploadFile = ({file, assetType, fileParams, mode, wechatParams}) => {
+export const uploadFile = ({file, assetType, fileParams, mode, wechatParams, whatsappParams}) => {
   const data = new FormData();
   data.append('file', file);
   data.append('fileParam', JSON.stringify(fileParams));
@@ -311,6 +314,11 @@ export const uploadFile = ({file, assetType, fileParams, mode, wechatParams}) =>
     data.append('appId', wechatParams.appId);
     data.append('appSecret', wechatParams.appSecret);
   }
+  if (whatsappParams) {
+    data.append('source', whatsappParams.source);
+    data.append('wabaId', whatsappParams.wabaId);
+    data.append('accessToken', whatsappParams.accessToken);
+  }
   const url = `${API_ENDPOINT}/assets/${assetType}`;
   // return API.post(url, data, true);
   return request(url, getAPICallObject('POST', data, true));
@@ -472,3 +480,8 @@ export const createWhatsappTemplate = ({ payload }) => {
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', payload));
 };
+
+export const getSenderDetails = (channel, orgUnitId) => {
+  const url = `${CAMPAIGNS_API_ORG_ENDPOINT}/meta/domainProperties?channel=${channel}`;
+  return request(url, getAPICallObject('GET', null, false, true, orgUnitId));
+};

package/v2Components/CapImageUpload/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /**
 *
 * CapImageUpload
@@ -16,10 +17,10 @@ import {
   CapImage,
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
-import get from 'lodash/get';
+import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
-import { FACEBOOK, RCS } from "../../v2Containers/CreativesContainer/constants";
+import { FACEBOOK, RCS, WHATSAPP } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -48,9 +49,10 @@ function CapImageUpload(props) {
 
 
   useEffect(() => {
-    if (imageData[`uploadedAssetData${index}`] && Object.keys(imageData[`uploadedAssetData${index}`]).length) {
-      const imgSrc = get(imageData, `uploadedAssetData${index}.metaInfo.secure_file_path`, '');
-      updateImageSrc(imgSrc);
+    const imageDataObj = imageData[`uploadedAssetData${index}`];
+    if (!isEmpty(imageDataObj)) {
+      const { secure_file_path = '', karixFileHandle = '' } = get(imageDataObj, 'metaInfo', {});
+      updateImageSrc(secure_file_path, karixFileHandle);
     }
   }, [imageData[`uploadedAssetData${index}`]]);
 
@@ -111,7 +113,7 @@ function CapImageUpload(props) {
     const { size } = file || {};
     const { height, width, error } = fileParams || {};
     if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
-      updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
+      updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
       updateImageErrorMessage('');
       uploadAsset(
@@ -143,7 +145,7 @@ function CapImageUpload(props) {
     const {secure_file_path: image, width, height, file_size: size} = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
     if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
-      updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
+      updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
     } else {
       updateImageErrorMessage('');
       updateImageSrc(image);
@@ -188,13 +190,15 @@ function CapImageUpload(props) {
           <CapButton className="dragger-button upload-image" type="secondary">
             <FormattedMessage {...messages.uploadComputer} />
           </CapButton>
-          <CapButton
-            className="dragger-button gallery-select"
-            type="secondary"
-            onClick={onGalleryClick}
-                >
-            <FormattedMessage {...messages.uploadGallery} />
-          </CapButton>
+          {channel !== WHATSAPP && (
+            <CapButton
+              className="dragger-button gallery-select"
+              type="secondary"
+              onClick={onGalleryClick}
+            >
+              <FormattedMessage {...messages.uploadGallery} />
+            </CapButton>
+          )}
         </CapUploader.CapDragger>
 
 
@@ -238,9 +242,21 @@ function CapImageUpload(props) {
       />
       </form>
       <div className="image-info-wrapper">
-        <CapHeadingSpan type="label2" className="image-dimension">
-          <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight}}/>
-        </CapHeadingSpan>
+        {channel === WHATSAPP ? (
+          <>
+            <CapHeadingSpan type="label2">
+              <FormattedMessage {...messages.whatsappImageSize} />
+            </CapHeadingSpan>
+            <CapHeadingSpan type="label2">
+              <FormattedMessage {...messages.whatsappAspectRatio} />
+            </CapHeadingSpan>
+          </>
+        ) : (
+          <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/CapImageUpload/messages.js

@@ -2,6 +2,14 @@ import { defineMessages } from 'react-intl';
 const scope = `creatives.componentsV2.CapImageUpload`;
 
 export default defineMessages({
+  whatsappImageSize: {
+    id: `${scope}.whatsappImageSize`,
+    defaultMessage: 'Size upto: 5MB',
+  },
+  whatsappAspectRatio: {
+    id: `${scope}.whatsappAspectRatio`,
+    defaultMessage: 'Max aspect ratio: 1.91:1',
+  },
   uploadGallery: {
     id: `${scope}.uploadGallery`,
     defaultMessage: 'Gallery',
@@ -34,10 +42,10 @@ export default defineMessages({
     id: `${scope}.format`,
     defaultMessage: 'Format: JPEG, JPG, PNG',
   },
-  imageIncorrectSize: {
-    id: `${scope}.imageIncorrectSize`,
+  imageErrorDesc: {
+    id: `${scope}.imageErrorDesc`,
     defaultMessage:
-      'Please upload the image with correct type, size and dimension',
+      'Please upload the image with allowed file extension, size, dimension and aspect ratio',
   },
   imageGallery: {
     id: `${scope}.imageGallery`,

package/v2Components/CapWhatsappCTA/constants.js

@@ -22,12 +22,23 @@ export const CTA_OPTIONS = [
   },
 ];
 
-export const CTA_URL_OPTIONS = [
+export const TWILIO_URL_OPTIONS = [
   {
     value: STATIC_URL,
     label: <FormattedMessage {...messages.ctaWebsiteTypeStatic} />,
   },
 ];
+
+export const KARIX_URL_OPTIONS = [
+  {
+    value: STATIC_URL,
+    label: <FormattedMessage {...messages.ctaWebsiteTypeStatic} />,
+  },
+  {
+    value: DYNAMIC_URL,
+    label: <FormattedMessage {...messages.ctaWebsiteTypeDynamic} />,
+  },
+];
 export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;

package/v2Components/CapWhatsappCTA/index.js

@@ -25,17 +25,32 @@ import {
   CTA_OPTIONS,
   BTN_MAX_LENGTH,
   PHONE_NUMBER_MAX_LENGTH,
-  CTA_URL_OPTIONS,
+  TWILIO_URL_OPTIONS,
+  KARIX_URL_OPTIONS,
   URL_MAX_LENGTH,
   PHONE_NUMBER,
   WEBSITE,
+  DYNAMIC_URL,
   STATIC_URL,
 } from './constants';
-import { INITIAL_CTA_DATA } from '../../v2Containers/Whatsapp/constants';
+import {
+  INITIAL_CTA_DATA,
+  HOST_KARIX,
+} from '../../v2Containers/Whatsapp/constants';
 
 export const CapWhatsappCTA = (props) => {
-  const { intl, ctaData = [], updateHandler, deleteHandler } = props;
+  const {
+    intl,
+    ctaData = [],
+    updateHandler,
+    deleteHandler,
+    isEditFlow,
+    hostName,
+  } = props;
   const { formatMessage } = intl;
+  const validVarRegex = /{{(1)}}/g;
+  const invalidVarRegex = /{{(.*?)}}/g;
+  const moreThanTwoBracketsRegex = /{{3,}(1)}{3,}/g;
 
   const [urlError, setUrlError] = useState(false);
 
@@ -45,6 +60,9 @@ export const CapWhatsappCTA = (props) => {
       ...clonedCta,
       [type]: value,
     };
+    if (type === 'urlType') {
+      clonedCta.url = '';
+    }
     updateHandler(clonedCta, index);
   };
 
@@ -119,11 +137,34 @@ export const CapWhatsappCTA = (props) => {
     updateHelper('phone_number', value, index);
   };
 
-  const onUrlChange = ({ target }) => {
+  const onUrlTypeChange = (value, index) => {
+    updateHelper('urlType', value, index);
+    setUrlError(false);
+  };
+
+  const onUrlChange = ({ target }, urlType) => {
     const { value, id } = target;
     let errorMessage = false;
     if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+    } else {
+      const validVarArr = value.match(validVarRegex) || [];
+      const validVarSet = [...new Set(validVarArr)];
+      const invalidVarArr = value.match(invalidVarRegex) || [];
+      const invalidVarSet = [...new Set(invalidVarArr)];
+      if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
+        if (urlType === STATIC_URL) {
+          errorMessage = formatMessage(messages.staticUrlWithVarErrorMessage);
+        } else if (validVarArr?.length > 1) {
+          errorMessage = formatMessage(
+            messages.dynamicUrlWithMoreVarErrorMessage,
+          );
+        } else if (invalidVarSet?.length !== validVarSet?.length) {
+          errorMessage = formatMessage(messages.dynamicUrlUnknownVars);
+        } else if (value.match(moreThanTwoBracketsRegex)?.length > 0) {
+          errorMessage = formatMessage(messages.useTwoBracketsOnly);
+        }
+      }
     }
     setUrlError(errorMessage);
     updateHelper('url', value, id);
@@ -152,7 +193,8 @@ export const CapWhatsappCTA = (props) => {
     const renderArray = [];
     const addBtnDisabled = ctaData.length === 1 && !ctaData[0].isSaved;
     ctaData.forEach((cta) => {
-      const { index, ctaType, text, phone_number, url, isSaved } = cta || {};
+      const { index, ctaType, text, phone_number, urlType, url, isSaved } =
+        cta || {};
       if (isSaved) {
         const ctaIsPhone = ctaType === PHONE_NUMBER;
         renderArray.push(
@@ -160,14 +202,8 @@ export const CapWhatsappCTA = (props) => {
             className="cap-whatsapp-saved-cta margin-t-12"
             align="middle"
             type="flex"
+            style={{ marginLeft: isEditFlow ? 0 : '' }}
           >
-            <CapColumn span={1}>
-              <CapIcon
-                size="s"
-                type="drag"
-                className="whatsapp-saved-cta-drag-icon"
-              />
-            </CapColumn>
             <CapColumn
               span={1}
               className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
@@ -183,7 +219,7 @@ export const CapWhatsappCTA = (props) => {
               </CapLabel>
             </CapColumn>
             {ctaIsPhone && (
-              <CapColumn span={11} align="left">
+              <CapColumn span={9} align="left">
                 <CapLabel className="phone">+{phone_number}</CapLabel>
               </CapColumn>
             )}
@@ -191,24 +227,32 @@ export const CapWhatsappCTA = (props) => {
               <>
                 <CapColumn span={3}>
                   <CapLabel className="url-type" type="label2">
-                    Static
+                    {urlType === STATIC_URL
+                      ? formatMessage(messages.ctaWebsiteTypeStatic)
+                      : formatMessage(messages.ctaWebsiteTypeDynamic)}
                   </CapLabel>
                 </CapColumn>
-                <CapColumn span={8} style={{ marginRight: '0px' }}>
-                  <CapLabel className="url">{url}</CapLabel>
+                <CapTooltip title={url} placement={'top'}>
+                  <CapColumn span={6} style={{ marginRight: '0px' }}>
+                    <CapLabel className="url">{url}</CapLabel>
+                  </CapColumn>
+                </CapTooltip>
+              </>
+            )}
+            {!isEditFlow && (
+              <>
+                <CapColumn
+                  span={1}
+                  className="whatsapp-saved-cta-edit-icon"
+                  onClick={() => editCta(index)}
+                >
+                  <CapIcon size="s" type="edit" />
+                </CapColumn>
+                <CapColumn span={1} onClick={() => deleteHandler(index)}>
+                  <CapIcon size="s" type="delete" />
                 </CapColumn>
               </>
             )}
-            <CapColumn
-              span={1}
-              className="whatsapp-saved-cta-edit-icon"
-              onClick={() => editCta(index)}
-            >
-              <CapIcon size="s" type="edit" />
-            </CapColumn>
-            <CapColumn span={1} onClick={() => deleteHandler(index)}>
-              <CapIcon size="s" type="delete" />
-            </CapColumn>
           </CapRow>,
         );
       } else {
@@ -284,19 +328,34 @@ export const CapWhatsappCTA = (props) => {
                   </CapHeading>
                   <CapSelect
                     id="whatsapp-cta-url-type"
-                    options={CTA_URL_OPTIONS || []}
-                    value={STATIC_URL}
+                    options={
+                      hostName === HOST_KARIX
+                        ? KARIX_URL_OPTIONS
+                        : TWILIO_URL_OPTIONS
+                    }
+                    onChange={(value) => onUrlTypeChange(value, index)}
+                    value={urlType}
                   />
                 </CapColumn>
                 <CapColumn span={12}>
                   {/* cta url */}
                   <CapHeading type="h4" className="cta-label">
                     {formatMessage(messages.ctaWebsiteUrl)}
+                    {urlType === DYNAMIC_URL && (
+                      <CapTooltipWithInfo
+                        infoIconProps={{
+                          style: { marginLeft: CAP_SPACE_04 },
+                        }}
+                        autoAdjustOverflow
+                        placement="right"
+                        title={formatMessage(messages.dynamicUrlTooltip)}
+                      />
+                    )}
                   </CapHeading>
                   <CapInput
                     id={index}
                     className="whatsapp-cta-url"
-                    onChange={onUrlChange}
+                    onChange={(event) => onUrlChange(event, urlType)}
                     placeholder={formatMessage(messages.ctaWebsitePlaceholder)}
                     value={url}
                     size="large"

package/v2Components/CapWhatsappCTA/index.scss

@@ -5,6 +5,7 @@
     margin-left: 24px;
     padding: 10px;
     border-radius: 4px;
+    height: 48px;
 
     div:not(:last-child) {
         margin-right: 9px;
@@ -25,10 +26,6 @@
         background-color: #f1f1f1;
     }
 
-    .whatsapp-saved-cta-drag-icon {
-        transform: rotate(90deg);
-    }
-
     .whatsapp-saved-cta-phone-icon {
         margin-bottom: -4px;
     }
@@ -36,8 +33,9 @@
     .whatsapp-saved-cta-button-text {
         font-weight: 500;
     }
-    .whatsapp-saved-cta-edit-icon{
-        margin-left: 16px;
+
+    .whatsapp-saved-cta-edit-icon {
+        margin-left: 110px;
     }
 }
 

package/v2Components/CapWhatsappCTA/messages.js

@@ -29,6 +29,10 @@ export default defineMessages({
     id: `${prefix}.ctaWebsiteTypeStatic`,
     defaultMessage: 'Static',
   },
+  ctaWebsiteTypeDynamic: {
+    id: `${prefix}.ctaWebsiteTypeDynamic`,
+    defaultMessage: 'Dynamic',
+  },
   ctaPhoneNoPlaceholder: {
     id: `${prefix}.ctaPhoneNoPlaceholder`,
     defaultMessage: 'Enter phone number',
@@ -66,4 +70,24 @@ export default defineMessages({
     id: `${prefix}.ctaOptionDisabledTooltip`,
     defaultMessage: 'This type of button can only be added once',
   },
+  dynamicUrlTooltip: {
+    id: `${prefix}.dynamicUrlTooltip`,
+    defaultMessage: 'Only one variable can be added to a URL. No need to add {{1}} to the end of the URL',
+  },
+  staticUrlWithVarErrorMessage: {
+    id: `${prefix}.staticUrlWithVarErrorMessage`,
+    defaultMessage: 'Button with URL type as static cannot contain variables',
+  },
+  dynamicUrlWithMoreVarErrorMessage: {
+    id: `${prefix}.dynamicUrlWithMoreVarErrorMessage`,
+    defaultMessage: 'Button with URL type as dynamic can have only 1 variable',
+  },
+  dynamicUrlUnknownVars: {
+    id: `${prefix}.dynamicUrlUnknownVars`,
+    defaultMessage: 'Valid variable is {{1}}',
+  },
+  useTwoBracketsOnly: {
+    id: `${prefix}.useTwoBracketsOnly`,
+    defaultMessage: 'Use two brackets on each side to declare a variable',
+  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -255,20 +255,16 @@
     }
   }
 
-  .whatsapp-brand-name {
-    position: absolute;
-    top: 11%;
-    left: 38%;
-    color: white;
-    font-size: small;
-  }
   .whatsapp-divider{
     margin: 8px 0;
   }
   .whatsapp-cta-preview{
     font-family: 'Roboto';
     font-size: 10px;
-    text-align: center;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-bottom: 4px;
   }
   .whatsapp-message-container{
     max-height: 292px;
@@ -277,6 +273,11 @@
   .whatsapp-content{
     margin: 2px 6px 1px 7px;
   }
+  .whatsapp-image{
+    width: 100%;
+    max-height: 123px;
+    margin-bottom: 4px;
+  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/index.js

@@ -155,7 +155,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       module,
       viberBrandName,
       viberAccountName,
-      whatsappAccountName,
       whatsappContentLen,
       intl,
       templateData,
@@ -322,7 +321,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       return renderArray;
     };
 
-    const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
     return (
@@ -616,7 +614,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                           </div>
                         );
                       }
-                      if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
+                      if ((type === IMAGE_CAROUSEL || type === TEMPLATE || type === 'template') && imageCarousel) {
                         return (
                           <div
                             style={{
@@ -725,12 +723,16 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       src={whatsappMobileAndroid}
                       alt={formatMessage(messages.previewGenerated)}
                     />
-                    <CapLabel className="whatsapp-brand-name">
-                      {whatsappUpdatedAccountName || ''}
-                    </CapLabel>
                     <div className="msg-container whatsapp-message-container">
                       <div className="message-pop align-left" style={whatsappSectionStyle}>
                         <CapLabel className="whatsapp-content">
+                          {content?.whatsappImageSrc && (
+                            <CapImage
+                              src={content.whatsappImageSrc}
+                              className="whatsapp-image"
+                              alt={formatMessage(messages.previewGenerated)}
+                            />
+                          )}
                           {content?.templateMsg || ''}
                         </CapLabel>
                         {renderWhatsappCtaPreview()}

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

@@ -59,12 +59,6 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
-        <CapLabel
-          className="whatsapp-brand-name"
-          type="label1"
-        >
-          30
-        </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -140,7 +134,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": "test",
+              "length": 30,
             }
           }
         />
@@ -166,12 +160,6 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
-        <CapLabel
-          className="whatsapp-brand-name"
-          type="label1"
-        >
-          30
-        </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -213,7 +201,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": "test",
+              "length": 30,
             }
           }
         />
@@ -239,10 +227,6 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
-        <CapLabel
-          className="whatsapp-brand-name"
-          type="label1"
-        />
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -279,7 +263,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

@@ -9,14 +9,12 @@ describe('Test Templates container', () => {
   const renderFunction = (
     channel,
     content,
-    whatsappAccountName,
     whatsappContentLen,
   ) => {
     renderedComponent = shallowWithIntl(
       <TemplatePreview
         channel={channel}
         content={content}
-        whatsappAccountName={whatsappAccountName}
         whatsappContentLen={whatsappContentLen}
       />,
     );