@capillarytech/creatives-library 7.7.24 → 7.7.25

package/package.json

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

package/v2Containers/CapFacebookPreview/constants.js

@@ -11,3 +11,7 @@ export const GENERATE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_PREVIEW_FAIL
 
 export const CLEAR_PREVIEW = 'app/CapFacebookPreview/CLEAR_PREVIEW';
 
+export const PREVIEW_NOT_REQUESTED = "PreviewNotRequested";
+export const FETCH_PREVIEW_REQUESTED = "PreviewRequested";
+export const FETCH_PREVIEW_SUCCESS = "PreviewRequestSuccess";
+export const FETCH_PREVIEW_FAILURE = "PreviewRequestFailure";

package/v2Containers/CapFacebookPreview/index.js

@@ -30,6 +30,11 @@ import {
   CAROUSEL,
   NO_CALL_TO_ACTION,
 } from '../../v2Containers/Facebook/Advertisement/constant';
+import {
+  FETCH_PREVIEW_REQUESTED,
+  FETCH_PREVIEW_SUCCESS,
+  PREVIEW_NOT_REQUESTED,
+} from './constants';
 import './index.scss';
 
 export const CapFacebookPreview = (props) => {
@@ -55,7 +60,10 @@ export const CapFacebookPreview = (props) => {
   const [disableAfterPreviewGenerate, setDisableAfterPreviewGenerate] = useState(false);
   const [random, setRandom] = useState(0);
   const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
-  const {previewIframe = "", isFetchingPreview = false, previewIframeError = ""} = facebookPreviewData;
+  const {previewIframe = "", fetchPreviewStatus = PREVIEW_NOT_REQUESTED, previewIframeError = ""} = facebookPreviewData;
+  const [previewLoaded, setPreviewLoaded] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  let isSpinning = false;
   const facebookAdOptions = [
     {
       value: "DESKTOP_FEED_STANDARD",
@@ -284,9 +292,17 @@ export const CapFacebookPreview = (props) => {
   };
 
   const resetIframe = () => {
+    previewLoaded && setPreviewLoaded(false);
+    !isRefreshing && setIsRefreshing(true);
     const r = random + 1;
     setRandom(r);
   };
+  const unsetLoader = () => {
+    setTimeout(function() { 
+      !previewLoaded && setPreviewLoaded(true);
+      isRefreshing && setIsRefreshing(false);
+    }.bind(this), 5000);
+  }
   const getIframe = (iframe) => {
     const divTag = document.createElement('div');
     divTag.innerHTML = iframe;
@@ -295,13 +311,16 @@ export const CapFacebookPreview = (props) => {
       <iframe
         src={src}
         key={random}
-        style={{border: "none"}}
+        style={{ border: "none" }}
         width={"600px"}
         scrolling="no"
         height={"1000px"}
         className="cap-facebook-ad-iframe"
+        onLoad={
+          unsetLoader()
+        }
       />
-      </>);
+    </>);
   };
 
   const showRefreshButton = () => {
@@ -340,74 +359,80 @@ export const CapFacebookPreview = (props) => {
     }
   }, [previewIframeError]);
   return (
-    <CapSpin spinning={isFetchingPreview}>
-      <div style={{display: 'inline-block'}}>
-        <CapSelect
-          label={formatMessage(messages.previewBasedonAdPlacement)}
-          key={"select-previewBasedonAdPlacement"}
-          onChange={onChangeAdPreviewFormat}
-          style={{width: '328px', paddingBottom: 16 }}
-          options={adOptions}
-          value={adPreviewFormat}
+    <>
+      {isSpinning = (fetchPreviewStatus === FETCH_PREVIEW_REQUESTED) ||
+        ((fetchPreviewStatus === FETCH_PREVIEW_SUCCESS) && !previewLoaded) ||
+        isRefreshing}
+      <CapSpin
+        spinning={isSpinning}>
+        <div style={{ display: 'inline-block' }}>
+          <CapSelect
+            label={formatMessage(messages.previewBasedonAdPlacement)}
+            key={"select-previewBasedonAdPlacement"}
+            onChange={onChangeAdPreviewFormat}
+            style={{ width: '328px', paddingBottom: 16 }}
+            options={adOptions}
+            value={adPreviewFormat}
+          >
+          </CapSelect>
+        </div>
+        {!hideInfoText && <CapLabel
+          type="label1"
+          style={{ paddingBottom: 16, textAlign: 'left', width: 392 }}
         >
-        </CapSelect>
-      </div>
-      {!hideInfoText && <CapLabel
-        type="label1"
-        style={{paddingBottom: 16, textAlign: 'left', width: 392}}
+          {formatMessage(messages.previewAdDesc)}
+        </CapLabel>}
+        <div style={{ marginBottom: 16 }}>
+          {(disablePreviewButton || disableAfterPreviewGenerate) ?
+            <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
+              <div className="button-disabled-tooltip-wrapper">
+                <CapButton
+                  type="secondary"
+                  disabled
                 >
-        {formatMessage(messages.previewAdDesc)}
-      </CapLabel>}
-      <div style={{marginBottom: 16}}>
-        {(disablePreviewButton || disableAfterPreviewGenerate) ?
-          <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
-            <div className="button-disabled-tooltip-wrapper">
-              <CapButton
-                type="secondary"
-                disabled
-              >
-                <FormattedMessage {...messages.generatePreview} />
-              </CapButton>
-            </div>
-          </CapTooltip> :
-          <CapButton
+                  <FormattedMessage {...messages.generatePreview} />
+                </CapButton>
+              </div>
+            </CapTooltip> :
+            <CapButton
+              type="secondary"
+              onClick={generatePreview}
+            >
+              <FormattedMessage {...messages.generatePreview} />
+            </CapButton>}
+          {isRefreshButton && (<CapButton
+            onClick={resetIframe}
             type="secondary"
-            onClick={generatePreview}
+            style={{ marginLeft: 16 }}
           >
-            <FormattedMessage {...messages.generatePreview} />
-          </CapButton>}
-        {isRefreshButton && (<CapButton
-          onClick={resetIframe}
-          type="secondary"
-          style={{marginLeft: 16}}
-        >
-          {formatMessage(messages.refreshPreview)}
-        </CapButton>)}
-      </div>
-      {isRefreshButton && <div style={{marginBottom: 16}}>
-        <CapIcon
-          type="info"
-          svgProps={{
-            width: 16,
-            height: 16,
-          }}
-            >
-        </CapIcon>
-        <CapLabel.CapLabelInline
-          type="label1"
-          size="s"
-          style={{marginBottom: 16, width: 392}}
-                >
-          {formatMessage(messages.videoNotePreview)}
-        </CapLabel.CapLabelInline>
-      </div>}
-      {previewIframe === "" ? <CapImage
-        src={facebookEmptyPlaceholder}
-        alt="default"
-        width="316px"
-        height="392px"
-            /> : getIframe(previewIframe)}
-    </CapSpin>
+            {formatMessage(messages.refreshPreview)}
+          </CapButton>)}
+        </div>
+        {isRefreshButton && <div style={{ marginBottom: 16 }}>
+          <CapIcon
+            type="info"
+            svgProps={{
+              width: 16,
+              height: 16,
+            }}
+          >
+          </CapIcon>
+          <CapLabel.CapLabelInline
+            type="label1"
+            size="s"
+            style={{ marginBottom: 16, width: 392 }}
+          >
+            {formatMessage(messages.videoNotePreview)}
+          </CapLabel.CapLabelInline>
+        </div>}
+        {previewIframe === "" ? <CapImage
+          src={facebookEmptyPlaceholder}
+          alt="default"
+          width="316px"
+          height="392px"
+        /> : getIframe(previewIframe)}
+      </CapSpin>
+    </>
   );
 };
 

package/v2Containers/CapFacebookPreview/reducer.js

@@ -6,29 +6,38 @@
 
 import { fromJS } from 'immutable';
 import get from 'lodash/get';
-import * as types from './constants';
+import {
+  GENERATE_PREVIEW_REQUEST,
+  GENERATE_PREVIEW_SUCCESS,
+  GENERATE_PREVIEW_FAILURE,
+  CLEAR_PREVIEW,
+  FETCH_PREVIEW_REQUESTED,
+  FETCH_PREVIEW_SUCCESS,
+  FETCH_PREVIEW_FAILURE,
+  PREVIEW_NOT_REQUESTED,
+} from './constants';
 
 const initialState = fromJS({
-  isFetchingPreview: false,
+  fetchPreviewStatus: PREVIEW_NOT_REQUESTED,
   previewIframe: "",
   previewIframeError: "",
 });
 
 function capFacebookPreviewReducer(state = initialState, action) {
   switch (action.type) {
-    case types.GENERATE_PREVIEW_REQUEST:
-      return state.set('isFetchingPreview', true)
+    case GENERATE_PREVIEW_REQUEST:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_REQUESTED)
       .set('previewIframe', "")
       .set("previewIframeError", "");
-    case types.GENERATE_PREVIEW_SUCCESS:
-      return state.set('isFetchingPreview', false)
+    case GENERATE_PREVIEW_SUCCESS:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_SUCCESS)
       .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
-    case types.GENERATE_PREVIEW_FAILURE:
-      return state.set('isFetchingPreview', false)
+    case GENERATE_PREVIEW_FAILURE:
+      return state.set('fetchPreviewStatus', FETCH_PREVIEW_FAILURE)
       .set('previewIframe', "")
       .set("previewIframeError", get(action, 'payload.message', ""));
-    case types.CLEAR_PREVIEW:
-      return state.set('isFetchingPreview', false)
+    case CLEAR_PREVIEW:
+      return state.set('fetchPreviewStatus', PREVIEW_NOT_REQUESTED)
       .set('previewIframe', "")
       .set("previewIframeError", "");
     default: