@capillarytech/creatives-library 7.5.5 → 7.5.7

package/package.json

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

package/v2Containers/CapFacebookPreview/index.js

@@ -20,6 +20,8 @@ import {
   CapImage,
   CapSpin,
   CapIcon,
+  CapNotification,
+  CapTooltip,
 } from "@capillarytech/cap-ui-library";
 import facebookEmptyPlaceholder from '../../assets/facebookEmptyPlaceholder.png';
 import {
@@ -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/index.js

@@ -107,7 +107,6 @@ export const Advertisement = (props) => {
   const [displayLink, setDisplayLink] = useState('');
   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 +115,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,

package/v2Containers/Facebook/index.js

@@ -186,7 +186,7 @@ const Facebook = (props) => {
   } = props;
   const {
     selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
-  } = templateData;
+  } = templateData || {};
   const [isDrawerVisible, setDrawerVisibility] = useState(false);
   const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
 
@@ -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/TemplatesV2/index.js

@@ -188,7 +188,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         case 'facebook':
           return this.getFacebookComponent();
         default:
-          return "";
+          break;
       }
     }
     const location = {pathname: `/${channel}`, search: '', query};