@capillarytech/creatives-library 7.5.6 → 7.5.8

package/package.json

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

package/v2Components/CapVideoUpload/index.js

@@ -274,6 +274,11 @@ function CapVideoUpload(props) {
         <CapHeading.CapHeadingSpan type="h6" className="video-description">
           <FormattedMessage {...messages.videoRatioDescription} />
 
+        </CapHeading.CapHeadingSpan>
+        {' '}
+        <CapHeading.CapHeadingSpan type="h6" className="video-description file-format">
+          <FormattedMessage {...messages.fileFormat} />
+
         </CapHeading.CapHeadingSpan>
         <CapHeading.CapHeadingSpan type="h6" className="video-description video-details">
           <FormattedMessage {...messages.videoSizeDescription} values={{size: bytes2Size(videoSize)}} />

package/v2Components/CapVideoUpload/index.scss

@@ -24,6 +24,9 @@ $classPrefix: cap-custom-video-upload;
     .video-details{
         float: right;
         position: absolute;
-        right: 40px;
+        right: 55px;
+    }
+    .file-format{
+        padding-left:9%;
     }
 }

package/v2Components/CapVideoUpload/messages.js

@@ -51,4 +51,8 @@ export default defineMessages({
     id: `${scope}.imageReUpload`,
     defaultMessage: 'Re upload',
   },
+  fileFormat: {
+    id: `${scope}.fileFormat`,
+    defaultMessage: 'File formats: MP4',
+  },
 });

package/v2Containers/CapFacebookPreview/index.js

@@ -20,15 +20,17 @@ import {
   CapImage,
   CapSpin,
   CapIcon,
+  CapNotification,
+  CapTooltip,
 } from "@capillarytech/cap-ui-library";
 import facebookEmptyPlaceholder from '../../assets/facebookEmptyPlaceholder.png';
 import {
   IMAGE,
   VIDEO,
   CAROUSEL,
+  NO_CALL_TO_ACTION,
 } from '../../v2Containers/Facebook/Advertisement/constant';
 
-const NO_CALL_TO_ACTION = 'NO_CALL_TO_ACTION';
 
 export const CapFacebookPreview = (props) => {
   const {
@@ -48,9 +50,10 @@ export const CapFacebookPreview = (props) => {
     formatMessage,
     } = intl || {};
   const [adPreviewFormat, setAdPreviewFormat] = useState("DESKTOP_FEED_STANDARD");
+  const [disableAfterPreviewGenerate, setDisableAfterPreviewGenerate] = useState(false);
   const [random, setRandom] = useState(0);
   const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
-  const {previewIframe = "", isFetchingPreview = false} = facebookPreviewData;
+  const {previewIframe = "", isFetchingPreview = false, previewIframeError = ""} = facebookPreviewData;
   const facebookAdOptions = [
     {
       value: "DESKTOP_FEED_STANDARD",
@@ -271,11 +274,14 @@ export const CapFacebookPreview = (props) => {
       };
       facebookPreviewActions.getCarouselPreview(data);
     }
+    setDisableAfterPreviewGenerate(true);
   };
+
   const resetIframe = () => {
     const r = random + 1;
     setRandom(r);
   };
+
   const getIframe = (iframe) => {
     const divTag = document.createElement('div');
     divTag.innerHTML = iframe;
@@ -294,6 +300,7 @@ export const CapFacebookPreview = (props) => {
       />
       </>);
   };
+
   const showRefreshButton = () => {
     let isRefresh = false;
     props.previewData.forEach((obj) => {
@@ -305,9 +312,28 @@ export const CapFacebookPreview = (props) => {
     return isRefresh && previewIframe !== "";
   };
   const isRefreshButton = showRefreshButton();
+
   useEffect(() => {
     facebookPreviewActions.clearPreview();
   }, []);
+
+  useEffect(() => {
+    if (disableAfterPreviewGenerate) {
+      setDisableAfterPreviewGenerate(false);
+    }
+  }, [previewData,
+    primaryText,
+    callToAction]);
+
+  useEffect(() => {
+    if (previewIframeError) {
+      CapNotification.error({
+        message: formatMessage(messages.generatePreviewError),
+      });
+      setDisableAfterPreviewGenerate(false);
+    }
+  }, [previewIframeError]);
+
   return (
     <CapSpin spinning={isFetchingPreview}>
       <div style={{display: 'inline-block'}}>
@@ -328,13 +354,23 @@ export const CapFacebookPreview = (props) => {
         {formatMessage(messages.previewAdDesc)}
       </CapLabel>
       <div style={{marginBottom: 16}}>
-        <CapButton
-          type="secondary"
-          disabled={disablePreviewButton}
-          onClick={generatePreview}
-      >
-          <FormattedMessage {...messages.generatePreview} />
-        </CapButton>
+        {(disablePreviewButton || disableAfterPreviewGenerate) ?
+          <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="secondary"
+                disabled
+              >
+                <FormattedMessage {...messages.generatePreview} />
+              </CapButton>
+            </div>
+          </CapTooltip> :
+          <CapButton
+            type="secondary"
+            onClick={generatePreview}
+          >
+            <FormattedMessage {...messages.generatePreview} />
+          </CapButton>}
         {isRefreshButton && (<CapButton
           onClick={resetIframe}
           type="secondary"

package/v2Containers/CapFacebookPreview/messages.js

@@ -135,4 +135,12 @@ export default defineMessages({
     id: `${messagePrefix}.videoNotePreview`,
     defaultMessage: 'Facebook may take time to upload the video. Please try Refreshing.',
   },
+  generatePreviewError: {
+    id: `${messagePrefix}.generatePreviewError`,
+    defaultMessage: 'Error in generating preview',
+  },
+  generatePreviewDisableToolTip: {
+    id: `${messagePrefix}.generatePreviewDisableToolTip`,
+    defaultMessage: 'Looks like either all the mandatory fields are not filled or there is no new change',
+  },
 });

package/v2Containers/CapFacebookPreview/reducer.js

@@ -11,6 +11,7 @@ import * as types from './constants';
 const initialState = fromJS({
   isFetchingPreview: false,
   previewIframe: "",
+  previewIframeError: "",
 });
 
 function capFacebookPreviewReducer(state = initialState, action) {
@@ -18,17 +19,24 @@ function capFacebookPreviewReducer(state = initialState, action) {
     case types.GENERATE_IMAGE_PREVIEW_REQUEST:
     case types.GENERATE_VIDEO_PREVIEW_REQUEST:
     case types.GENERATE_CAROUSEL_PREVIEW_REQUEST:
-      return state.set('isFetchingPreview', true).set('previewIframe', "");
+      return state.set('isFetchingPreview', true)
+      .set('previewIframe', "")
+      .set("previewIframeError", "");
     case types.GENERATE_IMAGE_PREVIEW_SUCCESS:
     case types.GENERATE_VIDEO_PREVIEW_SUCCESS:
     case types.GENERATE_CAROUSEL_PREVIEW_SUCCESS:
-      return state.set('isFetchingPreview', false).set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
+      return state.set('isFetchingPreview', false)
+      .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
     case types.GENERATE_IMAGE_PREVIEW_FAILURE:
     case types.GENERATE_VIDEO_PREVIEW_FAILURE:
     case types.GENERATE_CAROUSEL_PREVIEW_FAILURE:
-      return state.set('isFetchingPreview', false).set('previewIframe', "");
+      return state.set('isFetchingPreview', false)
+      .set('previewIframe', "")
+      .set("previewIframeError", get(action, 'payload.message', ""));
     case types.CLEAR_PREVIEW:
-      return state.set('isFetchingPreview', false).set('previewIframe', "");
+      return state.set('isFetchingPreview', false)
+      .set('previewIframe', "")
+      .set("previewIframeError", "");
     default:
       return state;
   }

package/v2Containers/CapFacebookPreview/sagas.js

@@ -6,11 +6,11 @@ import * as type from './constants';
 export function* getImageFacebookPreview(previewData) {
   try {
     const response = yield call(Api.getImageFacebookPreview, previewData );
-    const { errors, response: responsePreview } = response;
-    if (errors && errors.length) {
+    const { status, response: responsePreview } = response;
+    if (status && status.isError) {
       yield put({
         type: type.GENERATE_IMAGE_PREVIEW_FAILURE,
-        payload: errors,
+        payload: status,
       });
     } else {
       yield put({
@@ -29,11 +29,11 @@ export function* getImageFacebookPreview(previewData) {
 export function* getVideoFacebookPreview(previewData) {
   try {
     const response = yield call(Api.getVideoFacebookPreview, previewData);
-    const { errors, response: responsePreview } = response;
-    if (errors && errors.length) {
+    const { status, response: responsePreview } = response;
+    if (status && status.isError) {
       yield put({
         type: type.GENERATE_VIDEO_PREVIEW_FAILURE,
-        payload: errors,
+        payload: status,
       });
     } else {
       yield put({
@@ -52,11 +52,11 @@ export function* getVideoFacebookPreview(previewData) {
 export function* getCarouselFacebookPreview(previewData) {
   try {
     const response = yield call(Api.getCarouselFacebookPreview, previewData);
-    const { errors, response: responsePreview } = response;
-    if (errors && errors.length) {
+    const { status, response: responsePreview } = response;
+    if (status && status.isError) {
       yield put({
         type: type.GENERATE_CAROUSEL_PREVIEW_FAILURE,
-        payload: errors,
+        payload: status,
       });
     } else {
       yield put({

package/v2Containers/Facebook/Advertisement/constant.js

@@ -10,3 +10,4 @@ export const IMAGE = 'IMAGE';
 export const VIDEO = 'VIDEO';
 export const CAROUSEL = 'CAROUSEL';
 export const IMAGE_VIDEO = 'imageVideo';
+export const NO_CALL_TO_ACTION = 'NO_CALL_TO_ACTION';

package/v2Containers/Facebook/Advertisement/index.js

@@ -52,6 +52,7 @@ import {
   VIDEO,
   CAROUSEL,
   IMAGE_VIDEO,
+  NO_CALL_TO_ACTION,
 } from './constant';
 
 export const Advertisement = (props) => {
@@ -105,9 +106,8 @@ export const Advertisement = (props) => {
   const [primaryText, setPrimaryText] = useState('');
   const [pageId, setPageId] = useState(false);
   const [displayLink, setDisplayLink] = useState('');
-  const [callToAction, setCallToAction] = useState("NO_CALL_TO_ACTION");
+  const [callToAction, setCallToAction] = useState(NO_CALL_TO_ACTION);
   const [callToActionError, setCallToActionError] = useState(false);
-
   const [messageTitle, updateMessageTitle] = useState('');
   const [step, updateStep] = useState('modeSelection');
   const [activeIndex, updateActiveIndex] = useState(`${defaultActiveIndex}`);
@@ -116,7 +116,6 @@ export const Advertisement = (props) => {
   const [editNameState, setEditNameState] = useState(false);
   const isCarouselSelectedAd = selectedAd === CAROUSEL;
   const isImgVideoSelectedAd = selectedAd === IMAGE_VIDEO;
-
   const activeCarouselData = carouselData[activeIndex];
 
   const uploadFbAdAsset = useCallback(( file,
@@ -430,6 +429,7 @@ export const Advertisement = (props) => {
       flag = true;
       return flag;
     }
+    const subTypes = [];
     carouselData.forEach((obj) => {
       const {
         webSiteLink,
@@ -446,17 +446,19 @@ export const Advertisement = (props) => {
       } else if (Object.keys(videoData).length === 0 && subType === VIDEO) {
         flag = true;
       }
-      if (subType === VIDEO) {
-        if (callToAction === "NO_CALL_TO_ACTION" && !callToActionError) {
-          setCallToActionError(messages.callToActionMandatoryError);
-          flag = true;
-        } else if (callToAction !== "NO_CALL_TO_ACTION" && callToActionError) {
-          setCallToActionError(false);
-        }
-      }
+      subTypes.push(subType);
     });
-    if (callToAction === "NO_CALL_TO_ACTION" && callToActionError) {
-      flag = true;
+    if (subTypes.includes(VIDEO) ) {
+      if (callToAction === NO_CALL_TO_ACTION && !callToActionError) {
+        setCallToActionError(messages.callToActionMandatoryError);
+        flag = true;
+      } else if (callToAction !== NO_CALL_TO_ACTION && callToActionError) {
+        setCallToActionError(false);
+        flag = false;
+      }
+    } else if (callToActionError) {
+      setCallToActionError(false);
+      flag = false;
     }
     return flag;
   }, [
@@ -549,6 +551,7 @@ export const Advertisement = (props) => {
       onChange={onChangePrimaryText}
       defaultValue={primaryText || ''}
       value={primaryText || ''}
+      maxLength={125}
       rows={3}
       cols={2}
       placeholder={formatMessage(messages.primaryTextPlaceholder)}
@@ -858,7 +861,7 @@ export const Advertisement = (props) => {
              <div className="cap-header-facebook-ad">
                <CapHeading
                  type="h2"
-                 style={{display: 'inline'}}
+                 className="truncate-text"
                 >
                  {editNameState ? <CapInput
                    type="input"

package/v2Containers/Facebook/Advertisement/index.scss

@@ -12,6 +12,13 @@ $classPrefix: add-facebook-ad-section;
           padding: 0;
         }
     }
+    .truncate-text{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 112px;
+        max-width: 920px;
+    }
     .cap-header-facebook-ad{
         position: fixed;
         top: 27px;
@@ -29,15 +36,22 @@ $classPrefix: add-facebook-ad-section;
             margin-left: 6px;
         }
     }
-    .cap-image-upload-CAROUSEL{
+    .cap-custom-image-upload{
         .dragger-button.re-upload{
-            margin-top: 90px;    
-            top: 0;
+            margin-top: 50px;    
+            top: 0px;
             position: absolute;
-            right: 80;
+            right: 60px;
             color: $FONT_COLOR_05;
         }
+        .cap-image-upload-CAROUSEL{
+            .dragger-button.re-upload{
+                margin-top: 90px;  
+                right: 0px;  
+            }
+        }
     }
+    
     .facebook-ad-type-card{
         .ant-card-body {
             display:flex;

package/v2Containers/Facebook/index.js

@@ -358,6 +358,7 @@ Facebook.propTypes = {
   templateData: PropTypes.object,
   cap: PropTypes.object,
   messageDetails: PropTypes.object,
+  params: PropTypes.object,
   onFacebookSubmit: PropTypes.func,
   marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
   facebookActions: PropTypes.func,
@@ -365,6 +366,7 @@ Facebook.propTypes = {
   isFullMode: PropTypes.boolean,
   fbADData: PropTypes.object,
   onCreateComplete: PropTypes.func,
+  facebookTemplateData: PropTypes.object,
 };
 
 Facebook.defaultProps = {

package/v2Containers/Templates/index.js

@@ -422,7 +422,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (!nextProps.Templates.deleteTemplateInProgress && !isEqual(nextProps.Templates.deleteTemplateInProgress, this.props.Templates.deleteTemplateInProgress) &&
     nextProps.Templates.deleteResponse) {
-      const message = `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`;
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`;
       CapNotification.success({key: 'deleteSucess', message});
       this.getAllTemplates({params, resetPage: true});
     }
@@ -1802,7 +1802,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isLineChannel = channel === LINE;
 
-    
+
     if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {