@capillarytech/creatives-library 7.17.118-alpha.0 → 7.17.119

package/package.json

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

package/v2Components/CapImageUpload/index.js

@@ -177,7 +177,7 @@ function CapImageUpload(props) {
   const getImageSizeLabel = () => (
     <CapHeadingSpan type="label2">
       <FormattedMessage
-        {...messages.imageSize}
+        {...messages.channelImageSize}
         values={{
           size: MAX_SUPPORTED_IMAGE_SIZE[channel],
         }}
@@ -190,7 +190,7 @@ function CapImageUpload(props) {
       return (<>
         <CapUploader.CapDragger
           customRequest={capUploaderCustomRequest}
-          className="form-builder-dragger"
+          className="form-builder-dragger grey-background"
           showUploadList={!isImageError}
         >
           <CapHeading className="dragger-title" type="h7">
@@ -256,7 +256,7 @@ function CapImageUpload(props) {
       <div className="image-info-wrapper">
         {channel === WHATSAPP && (
           <>
-            {getImageSizeLabel}
+            {getImageSizeLabel()}
             <CapHeadingSpan type="label2">
               <FormattedMessage {...messages.whatsappAspectRatio} />
             </CapHeadingSpan>

package/v2Components/CapImageUpload/index.scss

@@ -14,4 +14,7 @@ $classPrefix: cap-custom-image-upload;
     justify-content: space-between;
     margin-top: 8px;
   }
+  .grey-background div {
+    background: $CAP_G10;
+  }
 }

package/v2Components/CapImageUpload/messages.js

@@ -55,8 +55,8 @@ export default defineMessages({
     id: `${scope}.aspectRatio`,
     defaultMessage: 'Aspect ratio: 1:1',
   },
-  imageSize: {
-    id: `${scope}.imageSize`,
+  channelImageSize: {
+    id: `${scope}.channelImageSize`,
     defaultMessage: 'Size upto: {size}MB',
   },
 });

package/v2Components/CapVideoUpload/constants.js

@@ -4,3 +4,4 @@ export const SUPPORTED_FILE_FORMATS = {
   VIBER: '3GP, MP4, MOV, M4V',
   DEFAULT: 'MP4',
 };
+export const VIBER_MAX_DURATION = 600; // seconds

package/v2Components/CapVideoUpload/index.js

@@ -19,7 +19,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import {bytes2Size, getDecodedFileName} from '../../utils/common';
-import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT } from './constants';
+import { SUPPORTED_FILE_FORMATS, WHATSAPP, DEFAULT, VIBER_MAX_DURATION } from './constants';
 import './index.scss';
 import { VIBER } from '../../v2Containers/CreativesContainer/constants';
 
@@ -42,7 +42,7 @@ function CapVideoUpload(props) {
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
-  const [videoDuration, updateVideoDuration] = useState('');
+  const [videoDuration, updateVideoDuration] = useState(null);
   const [isPlaying, updateIsPlaying] = useState(false);
   const [isSpinning, setSpinning] = useState(false);
 
@@ -100,6 +100,7 @@ function CapVideoUpload(props) {
           videoName: metaVideoName,
           videoId: metaVideoId,
           fileHandle: karixFileHandle,
+          videoDuration: null,
         },
         );
       }
@@ -200,6 +201,7 @@ function CapVideoUpload(props) {
     }
     const onReUpload = () => {
       updateVideoStatus(false);
+      updateVideoDuration(null);
       onVideoUploadUpdateAssestList(
         index,
         {
@@ -208,7 +210,7 @@ function CapVideoUpload(props) {
           videoHeight: "",
           videoWidth: "",
           videoSrc: "",
-          videoDuration: "",
+          videoDuration: null,
           videoId: "",
           fileHandle: "",
         }
@@ -218,12 +220,13 @@ function CapVideoUpload(props) {
     const updateMetadataLoaded = () => {
       const { current: { duration, videoHeight: metaVideoHeight, videoWidth: metaVideoWidth } = {} } = videoEl;
       if (duration) {
-        const value = moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss"); // to get the duration of video
-        updateVideoDuration(value);
+        updateVideoDuration(duration);
         if (videoWidth === undefined && videoHeight === undefined) {
-          onVideoUploadUpdateAssestList(
-            index,
-            {
+          if (
+            channel !== VIBER ||
+            (channel === VIBER && duration <= VIBER_MAX_DURATION)
+          ) {
+            onVideoUploadUpdateAssestList(index, {
               videoSrc,
               videoId,
               videoName,
@@ -231,13 +234,16 @@ function CapVideoUpload(props) {
               videoWidth: metaVideoWidth,
               previewUrl,
               fileHandle,
-              videoDuration,
-            }
-          );
+              videoDuration: duration,
+            });
+          } else {
+            onReUpload();
+            updateVideoErrorMessage(formatMessage(messages.videoDurationError));
+          }
         }
       }
     };
-
+    const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
         <div style={{ overflow: 'hidden' }}>
@@ -266,11 +272,11 @@ function CapVideoUpload(props) {
           </video>
           {showVideoNameAndDuration &&
             <div className="video-info">
-              <CapHeading type="h6">
+              <CapHeading type="h4">
                 {getDecodedFileName(videoName)}
               </CapHeading>
               <CapHeading type="h6">
-                {videoDuration}
+                {videoDurationValue}
               </CapHeading>
             </div>
           }
@@ -314,7 +320,7 @@ function CapVideoUpload(props) {
           </CapHeading.CapHeadingSpan>
           {' '}
           <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
-            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
           <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
             <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />
@@ -324,14 +330,14 @@ function CapVideoUpload(props) {
         <>
           {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS[DEFAULT] }} />
           </CapHeading.CapHeadingSpan>
         </>}
         {channel === VIBER &&
         <>
           {getVideoSizeDescription()}
           <CapHeading.CapHeadingSpan type="label2" className="whatsapp-format">
-            <FormattedMessage {...messages.fileFormat} values={{ format: SUPPORTED_FILE_FORMATS[channel] }} />
+            <FormattedMessage {...messages.channelFileFormat} values={{ format: SUPPORTED_FILE_FORMATS.VIBER }} />
           </CapHeading.CapHeadingSpan>
           <CapHeading.CapHeadingSpan type="label2" className="video-duration">
             <FormattedMessage {...messages.viberMaxDuration} />

package/v2Components/CapVideoUpload/messages.js

@@ -55,12 +55,16 @@ export default defineMessages({
     id: `${scope}.imageReUpload`,
     defaultMessage: 'Re upload',
   },
-  fileFormat: {
-    id: `${scope}.fileFormat`,
+  channelFileFormat: {
+    id: `${scope}.channelFileFormat`,
     defaultMessage: 'Format: {format}',
   },
   viberMaxDuration: {
     id: `${scope}.viberMaxDuration`,
     defaultMessage: 'Max Duration: 600 seconds',
   },
+  videoDurationError: {
+    id: `${scope}.videoDurationError`,
+    defaultMessage: 'Video duration should not exceed 600 seconds',
+  },
 });

package/v2Components/FormBuilder/constants.js

@@ -1,2 +1 @@
-export const AI_SUGGESTION_API_URL = `wss://${window.location.host}/arya/api/v1/ask-aira-service/content_gen/get_ai_suggestions`;
-export const CONTENT_RECOMMENDATION_BOT = "CONTENT_RECOMMENDATION_BOT";
+export const OUTBOUND = 'OUTBOUND';

package/v2Components/FormBuilder/index.js

@@ -51,7 +51,7 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS } from '../../v2Container
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT } from './constants';
+import { OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
@@ -1152,7 +1152,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let matchCustomerBarcode = regexCustomerBarcode.exec(content);
       // \S matches anything other than a space, a tab, a newline, or a carriage return.
       const validString= /\S/.test(contentForValidation);
-      if (isEmailUnsubscribeTagMandatory() && isEmail) {
+      if (isEmailUnsubscribeTagMandatory() && isEmail && this.props?.moduleType === OUTBOUND) {
         const missingTagIndex = response?.missingTags?.indexOf("unsubscribe");
         if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
           response?.missingTags?.splice(missingTagIndex, 1);
@@ -2375,13 +2375,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             && hasAiSuggestionsEnabled
             && this.props.isFullMode
             && (
-              <CapAskAira
+              <CapAskAira.ContentGenerationBot
                 text={messageContent || ""}
                 setText={(x) => {
                   this.updateFormData(x, val);
                 }}
-                botType={CONTENT_RECOMMENDATION_BOT}
-                websocketUrl={AI_SUGGESTION_API_URL}
+                iconPlacement="float-br"
+                rootStyle={{
+                  // 1rem is the margin-bottom of textarea
+                  bottom: 'calc(1rem + 0.2rem)',
+                  right: '0.2rem',
+                }}
               />
             )}
         </CapColumn>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -152,6 +152,7 @@ export function SlideBoxContent(props) {
       enableNewChannels,
       hideTestAndPreviewBtn,
       getCmsTemplatesInProgress = false,
+      moduleType,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -597,6 +598,7 @@ export function SlideBoxContent(props) {
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}
         getCmsTemplatesInProgress={getCmsTemplatesInProgress}
+        moduleType={moduleType}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -623,6 +625,7 @@ export function SlideBoxContent(props) {
         selectedOfferDetails={selectedOfferDetails}
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}
+        moduleType={moduleType}
       />
         )}
       {isEditMPush &&
@@ -911,5 +914,6 @@ SlideBoxContent.propTypes = {
   orgUnitId: PropTypes.any,
   smsRegister: PropTypes.any,
   getCmsTemplatesInProgress: PropTypes.bool,
+  moduleType: PropTypes.string,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -1260,6 +1260,7 @@ export class Creatives extends React.Component {
               enableNewChannels={enableNewChannels}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               getCmsTemplatesInProgress={this.props.Templates?.getCmsTemplatesInProgress}
+              moduleType={this.props.messageDetails?.type}
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/Email/index.js

@@ -2653,7 +2653,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
     const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = this.getImagePreviewContent();
-    const { selectedOfferDetails, getDefaultTags, Email: { CmsSettings = {} } = {} } = this.props;
+    const { selectedOfferDetails, getDefaultTags, Email: { CmsSettings = {} } = {}, moduleType = '' } = this.props;
     if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
       return (<div>Loading...</div>);
     }
@@ -2721,6 +2721,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   uuid={CmsSettings.uuid}
                   type={CmsSettings.type}
                   isEmailLoading={isLoading}
+                  moduleType={moduleType}
               /> : ''}
             </Col>
           </Row>
@@ -2776,6 +2777,7 @@ Email.propTypes = {
   selectedOfferDetails: PropTypes.array,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
+  moduleType: PropTypes.string,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/EmailWrapper/index.js

@@ -208,6 +208,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       cmsTemplatesLoader,
       editor,
       currentOrgDetails,
+      moduleType,
     } = this.props;
     const {
       templateName,
@@ -278,6 +279,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 onPreviewContentClicked={onPreviewContentClicked}
                 onTestContentClicked={onTestContentClicked}
                 editor={editor}
+                moduleType={moduleType}
               />}
               {!isShowEmailCreate && (
                 <CmsTemplatesComponent
@@ -319,6 +321,7 @@ EmailWrapper.propTypes = {
   selectedOfferDetails: PropTypes.array,
   getCmsTemplatesInProgress: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
+  moduleType: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({

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

@@ -52041,7 +52041,7 @@ new message content.",
                                   >
                                     <FormattedMessage
                                       defaultMessage="Size upto: {size}MB"
-                                      id="creatives.componentsV2.CapImageUpload.imageSize"
+                                      id="creatives.componentsV2.CapImageUpload.channelImageSize"
                                       values={
                                         Object {
                                           "size": 2,
@@ -67487,7 +67487,7 @@ new message content.",
                                   >
                                     <FormattedMessage
                                       defaultMessage="Size upto: {size}MB"
-                                      id="creatives.componentsV2.CapImageUpload.imageSize"
+                                      id="creatives.componentsV2.CapImageUpload.channelImageSize"
                                       values={
                                         Object {
                                           "size": 2,
@@ -82827,7 +82827,7 @@ new message content.",
                                   >
                                     <FormattedMessage
                                       defaultMessage="Size upto: {size}MB"
-                                      id="creatives.componentsV2.CapImageUpload.imageSize"
+                                      id="creatives.componentsV2.CapImageUpload.channelImageSize"
                                       values={
                                         Object {
                                           "size": 2,
@@ -98273,7 +98273,7 @@ new message content.",
                                   >
                                     <FormattedMessage
                                       defaultMessage="Size upto: {size}MB"
-                                      id="creatives.componentsV2.CapImageUpload.imageSize"
+                                      id="creatives.componentsV2.CapImageUpload.channelImageSize"
                                       values={
                                         Object {
                                           "size": 2,
@@ -122770,7 +122770,7 @@ new message content.",
                                   >
                                     <FormattedMessage
                                       defaultMessage="Size upto: {size}MB"
-                                      id="creatives.componentsV2.CapImageUpload.imageSize"
+                                      id="creatives.componentsV2.CapImageUpload.channelImageSize"
                                       values={
                                         Object {
                                           "size": 2,

package/v2Containers/Viber/index.js

@@ -370,7 +370,7 @@ export const Viber = (props) => {
       formClassName={"viber-video-upload"}
       channel={VIBER}
       errorMessage={formatMessage(messages.videoErrorMessage)}
-      showVideoNameAndDuration={false}
+      showVideoNameAndDuration
     />
   );
 
@@ -647,12 +647,6 @@ export const Viber = (props) => {
     if (messageContent?.trim() === '' || errorMessageTextarea) {
       return true;
     }
-    // // cannot send text + image only messages, Need to add button details or remove one of the components in order to proceed
-    // const trimedButtonText = buttonText.trim();
-    // const trimedButtonUrl = buttonURL.trim();
-    // if (messageContent !== '' && (trimedButtonText === '' && trimedButtonUrl === '')) {
-    //   return true;
-    // }
     //if template title is empty
     if (messageTitle?.trim() === '') {
       return true;