@capillarytech/creatives-library 7.14.28 → 7.14.29

package/package.json

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

package/services/api.js

@@ -318,6 +318,7 @@ export const uploadFile = ({file, assetType, fileParams, mode, wechatParams, wha
     data.append('source', whatsappParams.source);
     data.append('wabaId', whatsappParams.wabaId);
     data.append('accessToken', whatsappParams.accessToken);
+    data.append('hostName', whatsappParams.hostName);
   }
   const url = `${API_ENDPOINT}/assets/${assetType}`;
   // return API.post(url, data, true);
@@ -476,9 +477,12 @@ export const checkBulkDuplicates = (data) => {
   return request(url, getAPICallObject('POST', data));
 };
 
-export const createWhatsappTemplate = ({ payload }) => {
+export const createWhatsappTemplate = ({gupshupMediaFile, payload }) => {
+  const data = new FormData();
+  data.append('gupshupMediaFile', gupshupMediaFile);
+  data.append('payload', JSON.stringify(payload));
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
-  return request(url, getAPICallObject('POST', payload));
+  return request(url, getAPICallObject('POST', data, true));
 };
 
 export const getSenderDetails = (channel, orgUnitId) => {

package/v2Components/CapWhatsappCTA/constants.js

@@ -29,7 +29,7 @@ export const TWILIO_URL_OPTIONS = [
   },
 ];
 
-export const KARIX_URL_OPTIONS = [
+export const KARIX_GUPSHUP_URL_OPTIONS = [
   {
     value: STATIC_URL,
     label: <FormattedMessage {...messages.ctaWebsiteTypeStatic} />,

package/v2Components/CapWhatsappCTA/index.js

@@ -27,7 +27,7 @@ import {
   BTN_MAX_LENGTH,
   PHONE_NUMBER_MAX_LENGTH,
   TWILIO_URL_OPTIONS,
-  KARIX_URL_OPTIONS,
+  KARIX_GUPSHUP_URL_OPTIONS,
   URL_MAX_LENGTH,
   PHONE_NUMBER,
   WEBSITE,
@@ -36,7 +36,7 @@ import {
 } from './constants';
 import {
   INITIAL_CTA_DATA,
-  HOST_KARIX,
+  HOST_TWILIO,
 } from '../../v2Containers/Whatsapp/constants';
 
 export const CapWhatsappCTA = (props) => {
@@ -359,9 +359,9 @@ export const CapWhatsappCTA = (props) => {
                   <CapSelect
                     id="whatsapp-cta-url-type"
                     options={
-                      hostName === HOST_KARIX
-                        ? KARIX_URL_OPTIONS
-                        : TWILIO_URL_OPTIONS
+                      hostName === HOST_TWILIO
+                        ? TWILIO_URL_OPTIONS
+                        : KARIX_GUPSHUP_URL_OPTIONS
                     }
                     onChange={(value) => onUrlTypeChange(value, index)}
                     value={urlType}

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -104,7 +104,7 @@ describe('Test SlideBoxContent container', () => {
     expect(getCreativesData).toHaveBeenCalledTimes(2);
   });
 
-  it.only('It should clear templateData, on channel change.', async () => {
+  it('It should clear templateData, on channel change.', async () => {
     renderFunction(
       'WHATSAPP',
       'editTemplate',

package/v2Containers/Templates/_templates.scss

@@ -616,14 +616,14 @@
   text-overflow: ellipsis;
 }
 
-.whatsapp-message-with-image {
+.whatsapp-message-with-media {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.whatsapp-message-without-image {
+.whatsapp-message-without-media {
   display: -webkit-box;
   -webkit-line-clamp: 10;
   -webkit-box-orient: vertical;

package/v2Containers/Templates/index.js

@@ -93,12 +93,13 @@ import {
 import { MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
 import {
   TWILIO_CATEGORY_OPTIONS,
-  KARIX_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
   STATUS_OPTIONS,
   CATEGORY as WHATSAPP_CATEGORY,
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
-  HOST_KARIX,
+  HOST_TWILIO,
+  HOST_GUPSHUP,
 } from '../Whatsapp/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
@@ -113,7 +114,7 @@ import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
 
-import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -911,7 +912,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           } = {},
         } = {},
       } = template;
-      if (this.props.isFullMode && !this.props.isDltFromRcs && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
+      if (this.props.isFullMode && !this.props.isDltFromRcs && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved) && !(this.state.hostName === HOST_GUPSHUP)) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
@@ -1094,8 +1095,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <span
                 className={`${
                   (whatsappImageSrc || whatsappVideoPreviewImg || docPreview)
-                    ? 'whatsapp-message-with-image'
-                    : 'whatsapp-message-without-image'
+                    ? 'whatsapp-message-with-media'
+                    : 'whatsapp-message-without-media'
                 }`}
               >
                 {templateMsg}
@@ -2552,9 +2553,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
             <CapSelectFilter
               placement="bottomLeft"
-              data={this.state.hostName === HOST_KARIX
-                ? KARIX_CATEGORY_OPTIONS
-                : TWILIO_CATEGORY_OPTIONS}
+              data={this.state.hostName === HOST_TWILIO
+                ? TWILIO_CATEGORY_OPTIONS
+                : KARIX_GUPSHUP_CATEGORY_OPTIONS}
               onSelect={this.setWhatsappCategory}
               selectedValue={this.state.selectedWhatsappCategory}
               placeholder="Category"

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

@@ -788,7 +788,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                           />
                           
                           <span
-                            className="whatsapp-message-with-image"
+                            className="whatsapp-message-with-media"
                           >
                             <CapLabel
                               type="label9"
@@ -1223,7 +1223,7 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                           />
                           
                           <span
-                            className="whatsapp-message-with-image"
+                            className="whatsapp-message-with-media"
                           >
                             <CapLabel
                               type="label9"
@@ -1658,7 +1658,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
                           />
                           
                           <span
-                            className="whatsapp-message-with-image"
+                            className="whatsapp-message-with-media"
                           >
                             <CapLabel
                               type="label9"

package/v2Containers/Whatsapp/actions.js

@@ -8,9 +8,10 @@ import {
   CLEAR_WHATSAPP_ASSET,
 } from './constants';
 
-export function createWhatsappTemplate(payload, callback) {
+export function createWhatsappTemplate(gupshupMediaFile, payload, callback) {
   return {
     type: TEMPLATE_CREATE_REQUEST,
+    gupshupMediaFile,
     payload,
     callback,
   };

package/v2Containers/Whatsapp/constants.js

@@ -43,7 +43,7 @@ export const WHATSAPP_CATEGORIES = {
   otp: 'OTP',
 };
 
-export const KARIX_CATEGORY_OPTIONS = [
+export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
   {
     key: 'transactional',
     value: WHATSAPP_CATEGORIES.transactional,
@@ -186,6 +186,7 @@ export const WHATSAPP_VIDEO_SIZE = 16000000; // 16MB
 export const WHATSAPP_DOCUMENT_SIZE = 16000000; // 16MB
 export const HOST_TWILIO = 'twiliowhatsapptrans';
 export const HOST_KARIX = 'karixwhatsappbulk';
+export const HOST_GUPSHUP = 'gupshupwhatsappbulk';
 export const SIZE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 export const DOCUMENT_FORMAT = 'PDF';
 export const DOCUMENT_SIZE = '16 MB';

package/v2Containers/Whatsapp/index.js

@@ -44,7 +44,7 @@ import {
   TEMPLATE_MESSAGE_MAX_LENGTH,
   WHATSAPP,
   TWILIO_CATEGORY_OPTIONS,
-  KARIX_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
   LANGUAGE_OPTIONS,
   WHATSAPP_STATUSES,
   TAG,
@@ -142,6 +142,7 @@ export const Whatsapp = (props) => {
   const [whatsappDocParams, setWhatsappDocParams] = useState({});
   const [karixFileHandle, setKarixFileHandle] = useState('');
   const [assetList, updateAssetList] = useState([]);
+  const [gupshupMediaFile, setGupshupMediaFile] = useState();
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
@@ -466,7 +467,7 @@ export const Whatsapp = (props) => {
     </CapRow>
   );
 
-  const karixCategoryOptions = KARIX_CATEGORY_OPTIONS.map((option) => ({
+  const karixGupshupCategoryOptions = KARIX_GUPSHUP_CATEGORY_OPTIONS.map((option) => ({
     value: option.value,
     label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
   }));
@@ -707,12 +708,16 @@ export const Whatsapp = (props) => {
     </>
   );
 
-  const uploadWhatsappImage = (file, type, fileParams) => {
+  const uploadWhatsappAsset = (file, type, fileParams) => {
     const whatsappParams = {
       source: WHATSAPP.toLowerCase(),
       wabaId: accountId,
       accessToken,
+      hostName: host,
     };
+    if (isFullMode && !isEditFlow && host !== HOST_KARIX) {
+      setGupshupMediaFile(file);
+    }
     actions.uploadWhatsappAsset(file, type, fileParams, 0, whatsappParams);
   };
 
@@ -732,12 +737,12 @@ export const Whatsapp = (props) => {
 
   const setUpdateWhatsappVideoSrc = useCallback(
     (index, data) => {
-      const {videoSrc = '', previewUrl = ''} = data;
+      const { videoSrc = '', previewUrl = '', fileHandle = '' } = data;
       setWhatsappVideoSrcAndPreview({
         whatsappVideoSrc: videoSrc,
         whatsappVideoPreviewImg: previewUrl,
       });
-      setKarixFileHandle(data?.fileHandle);
+      setKarixFileHandle(fileHandle);
       updateAssetList(data);
       actions.clearWhatsappAsset(0);
     },
@@ -763,7 +768,7 @@ export const Whatsapp = (props) => {
       style={{ paddingTop: '20px' }}
       allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
       imgSize={WHATSAPP_IMG_SIZE}
-      uploadAsset={uploadWhatsappImage}
+      uploadAsset={uploadWhatsappAsset}
       isFullMode={isFullMode}
       imageSrc={whatsappImageSrc}
       updateImageSrc={setUpdateWhatsappImageSrc}
@@ -782,7 +787,7 @@ export const Whatsapp = (props) => {
       allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
       videoSize={WHATSAPP_VIDEO_SIZE}
       isFullMode={isFullMode}
-      uploadAsset={uploadWhatsappImage}
+      uploadAsset={uploadWhatsappAsset}
       uploadedAssetList={assetList}
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
@@ -800,7 +805,7 @@ export const Whatsapp = (props) => {
     <CapDocumentUpload
       allowedExtensionsRegex={ALLOWED_EXTENSIONS_DOCUMENT_REGEX}
       documentSize={WHATSAPP_DOCUMENT_SIZE}
-      uploadAsset={uploadWhatsappImage}
+      uploadAsset={uploadWhatsappAsset}
       isFullMode={isFullMode}
       documentSrc={whatsappDocSource}
       updateDocumentSrc={setUpdateWhatsappDocSrc}
@@ -1030,7 +1035,7 @@ export const Whatsapp = (props) => {
 
   const createApprovalHandler = () => {
     setSpin(true);
-    actions.createWhatsappTemplate(createPayload(), (resp, errorMessage) => {
+    actions.createWhatsappTemplate(gupshupMediaFile, createPayload(), (resp, errorMessage) => {
       actionCallback({ resp, errorMessage });
       if (!errorMessage) {
         onCreateComplete();
@@ -1073,7 +1078,7 @@ export const Whatsapp = (props) => {
       return true;
     }
     //if media type is image, video or document and the mediaType file is not uploaded
-    if ( !isMediaTypeText && karixFileHandle === '') {
+    if (!isMediaTypeText && host === HOST_KARIX && karixFileHandle === '') {
       return true;
     }
     //cta
@@ -1152,7 +1157,7 @@ export const Whatsapp = (props) => {
       <CapSelect
         id="select-whatsapp-category"
         options={
-          host === HOST_KARIX ? karixCategoryOptions : twilioCategoryOptions
+          host === HOST_KARIX ? karixGupshupCategoryOptions : twilioCategoryOptions
         }
         onChange={onTemplateCategoryChange}
         value={templateCategory}

package/v2Containers/Whatsapp/sagas.js

@@ -36,10 +36,10 @@ function* watchUploadWhatsappAsset() {
   yield cancel(watcher);
 }
 
-export function* sendForApprovalCreate({ payload, callback }) {
+export function* sendForApprovalCreate({ gupshupMediaFile, payload, callback }) {
   let errorMsg;
   try {
-    const result = yield call(Api.createWhatsappTemplate, { payload });
+    const result = yield call(Api.createWhatsappTemplate, { gupshupMediaFile, payload });
     if (result?.status?.code && result.status.code >= 400) {
       errorMsg = result?.message || result.status.code;
       throw errorMsg;

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

@@ -397484,6 +397484,7 @@ exports[`Creatives Whatsapp test2/> set all valid values and send for approval 2
         "createWhatsappTemplate": [MockFunction] {
           "calls": Array [
             Array [
+              undefined,
               Object {
                 "name": "template_name",
                 "type": "WHATSAPP",
@@ -417931,6 +417932,7 @@ exports[`Creatives Whatsapp test2/> set all valid values and send for approval 3
         "createWhatsappTemplate": [MockFunction] {
           "calls": Array [
             Array [
+              undefined,
               Object {
                 "name": "template_name",
                 "type": "WHATSAPP",

package/v2Containers/Whatsapp/tests/index.test.js

@@ -306,7 +306,7 @@ describe('Creatives Whatsapp test2/>', () => {
     constants.INITIAL_CTA_DATA = [];
     renderHelper({});
     let event = { target: { value: 'template_name' } };
-    createWhatsappTemplate.mockImplementation((obj, callback) => {
+    createWhatsappTemplate.mockImplementation((undefined, obj, callback) => {
       callback();
     });
 
@@ -356,7 +356,7 @@ describe('Creatives Whatsapp test2/>', () => {
     ];
     renderHelper({});
     let event = { target: { value: 'template_name' } };
-    createWhatsappTemplate.mockImplementation((obj, callback) => {
+    createWhatsappTemplate.mockImplementation((undefined, obj, callback) => {
       callback();
     });
 
@@ -416,7 +416,7 @@ describe('Creatives Whatsapp test2/>', () => {
     ];
     renderHelper({});
     let event = { target: { value: 'template_name' } };
-    createWhatsappTemplate.mockImplementation((obj, callback) => {
+    createWhatsappTemplate.mockImplementation((undefined, obj, callback) => {
       callback();
     });
 

package/v2Containers/Whatsapp/utils.js

@@ -8,13 +8,13 @@ import { WHATSAPP } from '../CreativesContainer/constants';
 import {
   STATUS_OPTIONS,
   TWILIO_CATEGORY_OPTIONS,
-  KARIX_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
   WHATSAPP_STATUSES,
   PHONE_NUMBER,
   NONE,
   CTA,
   WHATSAPP_MEDIA_TYPES,
-  HOST_KARIX,
+  HOST_TWILIO,
   SIZE_UNITS,
 } from '../Whatsapp/constants';
 import './styles.scss';
@@ -142,15 +142,13 @@ export const getWhatsappCta = (template) => {
   return renderArray;
 };
 
-export const getWhatsappCategory = (category, hostName) => {
-  return (
-    hostName === HOST_KARIX ? KARIX_CATEGORY_OPTIONS : TWILIO_CATEGORY_OPTIONS
+export const getWhatsappCategory = (category, hostName) => (
+    hostName === HOST_TWILIO ? TWILIO_CATEGORY_OPTIONS : KARIX_GUPSHUP_CATEGORY_OPTIONS
   ).find((obj) => obj.value === category);
-};
 
 export const getWhatsappStatus = (status) => {
   if ([WHATSAPP_STATUSES.pending, WHATSAPP_STATUSES.unsubmitted].includes(status)) {
     status = WHATSAPP_STATUSES.awaitingApproval;
   }
   return STATUS_OPTIONS.find((obj) => obj.value === status);
-}
+};