@capillarytech/creatives-library 7.5.4 → 7.5.6

package/v2Containers/CapFacebookPreview/index.js

@@ -0,0 +1,396 @@
+/*
+ *
+ * CapFacebookPreview
+ *
+ */
+import PropTypes from 'prop-types';
+import React, { useState, useEffect} from "react";
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import {makeSelectCapFacebookPreview} from './selectors';
+
+import messages from './messages';
+import * as actions from './actions';
+import {
+  CapLabel,
+  CapSelect,
+  CapButton,
+  CapImage,
+  CapSpin,
+  CapIcon,
+} from "@capillarytech/cap-ui-library";
+import facebookEmptyPlaceholder from '../../assets/facebookEmptyPlaceholder.png';
+import {
+  IMAGE,
+  VIDEO,
+  CAROUSEL,
+} from '../../v2Containers/Facebook/Advertisement/constant';
+
+const NO_CALL_TO_ACTION = 'NO_CALL_TO_ACTION';
+
+export const CapFacebookPreview = (props) => {
+  const {
+    intl,
+    disablePreviewButton,
+    previewData,
+    facebookPreviewActions,
+    facebookPreviewData = {},
+    selectedAd,
+    primaryText,
+    callToAction,
+    orgUnitFacebookPageSettingsMap,
+    accessToken,
+    accountId,
+  } = props;
+  const {
+    formatMessage,
+    } = intl || {};
+  const [adPreviewFormat, setAdPreviewFormat] = useState("DESKTOP_FEED_STANDARD");
+  const [random, setRandom] = useState(0);
+  const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
+  const {previewIframe = "", isFetchingPreview = false} = facebookPreviewData;
+  const facebookAdOptions = [
+    {
+      value: "DESKTOP_FEED_STANDARD",
+      label: formatMessage(messages.desktopFeedStandard),
+    },
+    {
+      value: "FACEBOOK_STORY_MOBILE",
+      label: formatMessage(messages.facebookStoryMobile),
+    },
+    {
+      value: "INSTANT_ARTICLE_STANDARD",
+      label: formatMessage(messages.instantArticleStandard),
+    },
+    {
+      value: "INSTREAM_VIDEO_DESKTOP",
+      label: formatMessage(messages.instreamVideoDesktop),
+    },
+    {
+      value: "INSTREAM_VIDEO_MOBILE",
+      label: formatMessage(messages.instreamVideoMobile),
+    },
+    {
+      value: "MARKETPLACE_DESKTOP",
+      label: formatMessage(messages.marketplaceDesktop),
+    },
+    {
+      value: "MOBILE_FEED_BASIC",
+      label: formatMessage(messages.mobileFeedBasic),
+    },
+    {
+      value: "MARKETPLACE_MOBILE",
+      label: formatMessage(messages.marketplaceMobile),
+    },
+    {
+      value: "MOBILE_FEED_STANDARD",
+      label: formatMessage(messages.mobileFeedStandard),
+    },
+    {
+      value: "RIGHT_COLUMN_STANDARD",
+      label: formatMessage(messages.rightColumnStandard),
+    },
+    {
+      value: "SUGGESTED_VIDEO_DESKTOP",
+      label: formatMessage(messages.suggestedVideoDesktop),
+    },
+    {
+      value: "SUGGESTED_VIDEO_MOBILE",
+      label: formatMessage(messages.suggestedVideoMobile),
+    },
+    {
+      value: "WATCH_FEED_MOBILE",
+      label: formatMessage(messages.watchFeedMobile),
+    },
+  ];
+  const instaAdOptions = [
+    {
+      value: "INSTAGRAM_STANDARD",
+      label: formatMessage(messages.instagramStandard),
+    },
+    {
+      value: "INSTAGRAM_STORY",
+      label: formatMessage(messages.instagramStory),
+    },
+    {
+      value: "INSTAGRAM_EXPLORE_CONTEXTUAL",
+      label: formatMessage(messages.instagramExploreContextual),
+    },
+    {
+      value: "INSTAGRAM_EXPLORE_IMMERSIVE",
+      label: formatMessage(messages.instagramExploreImmersive),
+    },
+  ];
+  const messangerAdOptions = [
+    {
+      value: "MESSENGER_MOBILE_INBOX_MEDIA",
+      label: formatMessage(messages.messengerMobileInboxMedia),
+    },
+  ];
+  const audienceNetworkOptions = [
+    {
+      value: "AUDIENCE_NETWORK_INSTREAM_VIDEO",
+      label: formatMessage(messages.audienceNetworkInstreamVideo),
+    },
+    {
+      value: "AUDIENCE_NETWORK_INSTREAM_VIDEO_MOBILE",
+      label: formatMessage(messages.audienceNetworkInstreamVideoMobile),
+    },
+    {
+      value: "AUDIENCE_NETWORK_OUTSTREAM_VIDEO",
+      label: formatMessage(messages.audienceNetworkOutstreamVideo),
+    },
+    {
+      value: "AUDIENCE_NETWORK_REWARDED_VIDEO",
+      label: formatMessage(messages.audienceNetworkRewardedVideo),
+    },
+    {
+      value: "MOBILE_BANNER",
+      label: formatMessage(messages.mobileBanner),
+    },
+    {
+      value: "MOBILE_FULLWIDTH",
+      label: formatMessage(messages.mobileFullwidth),
+    },
+    {
+      value: "MOBILE_INTERSTITIAL",
+      label: formatMessage(messages.mobileInterstitial),
+    },
+    {
+      value: "MOBILE_MEDIUM_RECTANGLE",
+      label: formatMessage(messages.mobileMediumRectangle),
+    },
+    {
+      value: "MOBILE_NATIVE",
+      label: formatMessage(messages.mobileNative),
+    },
+  ];
+
+  const adOptions = [
+    ...facebookAdOptions,
+    ...instaAdOptions,
+    ...messangerAdOptions,
+    ...audienceNetworkOptions,
+  ];
+  const onChangeAdPreviewFormat = (value) => {
+    setAdPreviewFormat(value);
+  };
+
+  const generatePreview = () => {
+    const data = {
+      accessToken,
+      pageAccessToken,
+      pageId,
+      actId: `act_${accountId}`,
+      params: {
+        creative: {
+          object_story_spec: {
+            page_id: pageId,
+            message: primaryText,
+          },
+        },
+        ad_format: adPreviewFormat,
+      },
+    };
+    if (selectedAd !== CAROUSEL) {
+      const {
+         imageData = {},
+         webSiteLink,
+         linkDesc,
+         linkHeadLine,
+         subType,
+         videoData,
+        } = previewData[0];
+      if (subType === IMAGE) {
+        data.params.creative.object_story_spec = {
+          ...data.params.creative.object_story_spec,
+          link_data: {
+            description: linkDesc,
+            link: webSiteLink,
+            name: linkHeadLine,
+            picture: imageData.imageSrc,
+          } };
+        if (callToAction !== NO_CALL_TO_ACTION) {
+          data.params.creative.object_story_spec.link_data.call_to_action = {
+            type: callToAction,
+            value: {link: webSiteLink},
+          };
+        }
+        facebookPreviewActions.getImagePreview(data);
+      } else {
+        data.params.creative.object_story_spec.video_data = {
+          image_url: videoData.previewUrl,
+          videoUrl: videoData.videoSrc,
+          message: primaryText,
+          link_description: linkDesc,
+        };
+        if (callToAction !== NO_CALL_TO_ACTION) {
+          data.params.creative.object_story_spec.video_data.call_to_action = {
+            type: callToAction,
+            value: {link: webSiteLink},
+          };
+        }
+        facebookPreviewActions.getVideoPreview(data);
+      }
+    } else {
+      const childData = previewData.map((obj) => {
+        let arrayData = {
+          link: obj.webSiteLink,
+          name: obj.linkHeadLine,
+          description: obj.linkDesc,
+        };
+        if (callToAction !== NO_CALL_TO_ACTION) {
+          arrayData.call_to_action = {
+            type: callToAction,
+            value: {link: obj.webSiteLink},
+          };
+        }
+        if (obj.subType === VIDEO) {
+          arrayData = {
+            ...arrayData,
+            videoUrl: obj.videoData.videoSrc,
+            picture: obj.videoData.previewUrl,
+          };
+        } else {
+          arrayData = {
+            ...arrayData,
+            picture: obj.imageData.imageSrc,
+          };
+        }
+        return arrayData;
+      });
+      data.params.creative.object_story_spec = {
+        ...data.params.creative.object_story_spec,
+        link_data: {
+          message: primaryText,
+          child_attachments: childData,
+          multi_share_end_card: false,
+        },
+      };
+      facebookPreviewActions.getCarouselPreview(data);
+    }
+  };
+  const resetIframe = () => {
+    const r = random + 1;
+    setRandom(r);
+  };
+  const getIframe = (iframe) => {
+    const divTag = document.createElement('div');
+    divTag.innerHTML = iframe;
+    const src = divTag.getElementsByTagName('iframe')[0].getAttribute('src');
+    const width = divTag.getElementsByTagName('iframe')[0].getAttribute('width');
+    const height = divTag.getElementsByTagName('iframe')[0].getAttribute('height');
+    return (<>
+      <iframe
+        src={src}
+        key={random}
+        scrolling="yes"
+        style={{border: "none"}}
+        width={width}
+        height={height}
+        loading="lazy"
+      />
+      </>);
+  };
+  const showRefreshButton = () => {
+    let isRefresh = false;
+    props.previewData.forEach((obj) => {
+      if (obj.subType === VIDEO) {
+        isRefresh = true;
+        return isRefresh;
+      }
+    });
+    return isRefresh && previewIframe !== "";
+  };
+  const isRefreshButton = showRefreshButton();
+  useEffect(() => {
+    facebookPreviewActions.clearPreview();
+  }, []);
+  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}
+        >
+        </CapSelect>
+      </div>
+      <CapLabel
+        type="label1"
+        style={{paddingBottom: 16, textAlign: 'left', width: 392}}
+                >
+        {formatMessage(messages.previewAdDesc)}
+      </CapLabel>
+      <div style={{marginBottom: 16}}>
+        <CapButton
+          type="secondary"
+          disabled={disablePreviewButton}
+          onClick={generatePreview}
+      >
+          <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>
+  );
+};
+
+CapFacebookPreview.propTypes = {
+  disablePreviewButton: PropTypes.bool,
+  intl: intlShape,
+  previewData: PropTypes.array,
+  selectedAd: PropTypes.string,
+  facebookPreviewActions: PropTypes.func,
+  facebookPreviewData: PropTypes.any,
+  primaryText: PropTypes.string,
+  callToAction: PropTypes.string,
+  orgUnitFacebookPageSettingsMap: PropTypes.object,
+  accessToken: PropTypes.string,
+  accountId: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  facebookPreviewData: makeSelectCapFacebookPreview(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  facebookPreviewActions: bindActionCreators(actions, dispatch),
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CapFacebookPreview));

package/v2Containers/CapFacebookPreview/messages.js

@@ -0,0 +1,138 @@
+/*
+ * CapFacebookPreview Messages
+ *
+ * This contains all the text for the CapFacebookPreview component.
+ */
+import { defineMessages } from 'react-intl';
+const messagePrefix = 'creatives.containersV2.CapFacebookPreview';
+
+export default defineMessages({
+  previewBasedonAdPlacement: {
+    id: `${messagePrefix}.previewBasedonAdPlacement`,
+    defaultMessage: 'Preview based on ad placement',
+  },
+  previewAdDesc: {
+    id: `${messagePrefix}.previewAdDesc`,
+    defaultMessage: 'Please add Media, Primary text & Website link & click on “Generate preview” to view preview.',
+  },
+  generatePreview: {
+    id: `${messagePrefix}.generatePreview`,
+    defaultMessage: 'Generate preview',
+  },
+  desktopFeedStandard: {
+    id: `${messagePrefix}.desktopFeedStandard`,
+    defaultMessage: 'Desktop feed standard',
+  },
+  facebookStoryMobile: {
+    id: `${messagePrefix}.facebookStoryMobile`,
+    defaultMessage: 'Facebook story mobile',
+  },
+  instantArticleStandard: {
+    id: `${messagePrefix}.instantArticleStandard`,
+    defaultMessage: 'Instant article standard',
+  },
+  instreamVideoDesktop: {
+    id: `${messagePrefix}.instreamVideoDesktop`,
+    defaultMessage: 'Instream video desktop',
+  },
+  instreamVideoMobile: {
+    id: `${messagePrefix}.instreamVideoMobile`,
+    defaultMessage: 'Instream video mobile',
+  },
+  marketplaceDesktop: {
+    id: `${messagePrefix}.marketplaceDesktop`,
+    defaultMessage: 'Marketplace desktop',
+  },
+  marketplaceMobile: {
+    id: `${messagePrefix}.marketplaceMobile`,
+    defaultMessage: 'Marketplace mobile',
+  },
+  mobileFeedBasic: {
+    id: `${messagePrefix}.mobileFeedBasic`,
+    defaultMessage: 'Mobile feed basic',
+  },
+  mobileFeedStandard: {
+    id: `${messagePrefix}.mobileFeedStandard`,
+    defaultMessage: 'Mobile feed standard',
+  },
+  rightColumnStandard: {
+    id: `${messagePrefix}.rightColumnStandard`,
+    defaultMessage: 'Right column standard',
+  },
+  suggestedVideoDesktop: {
+    id: `${messagePrefix}.suggestedVideoDesktop`,
+    defaultMessage: 'Suggested video desktop',
+  },
+  suggestedVideoMobile: {
+    id: `${messagePrefix}.suggestedVideoMobile`,
+    defaultMessage: 'Suggested video mobile',
+  },
+  watchFeedMobile: {
+    id: `${messagePrefix}.watchFeedMobile`,
+    defaultMessage: 'Watch feed mobile',
+  },
+  instagramStandard: {
+    id: `${messagePrefix}.instagramStandard`,
+    defaultMessage: 'instagram_standard',
+  },
+  instagramStory: {
+    id: `${messagePrefix}.instagramStory`,
+    defaultMessage: 'Instagram story',
+  },
+  instagramExploreContextual: {
+    id: `${messagePrefix}.instagramExploreContextual`,
+    defaultMessage: 'instagram_explore_contextual',
+  },
+  instagramExploreImmersive: {
+    id: `${messagePrefix}.instagramExploreImmersive`,
+    defaultMessage: 'Instagram explore immersive',
+  },
+  messengerMobileInboxMedia: {
+    id: `${messagePrefix}.messengerMobileInboxMedia`,
+    defaultMessage: 'Messenger mobile inbox media',
+  },
+  audienceNetworkInstreamVideo: {
+    id: `${messagePrefix}.audienceNetworkInstreamVideo`,
+    defaultMessage: 'Audience network instream video',
+  },
+  audienceNetworkInstreamVideoMobile: {
+    id: `${messagePrefix}.audienceNetworkInstreamVideoMobile`,
+    defaultMessage: 'Audience network instream video mobile',
+  },
+  audienceNetworkOutstreamVideo: {
+    id: `${messagePrefix}.audienceNetworkOutstreamVideo`,
+    defaultMessage: 'Audience network outstream video',
+  },
+  audienceNetworkRewardedVideo: {
+    id: `${messagePrefix}.audienceNetworkRewardedVideo`,
+    defaultMessage: 'Audience network rewarded video',
+  },
+  mobileBanner: {
+    id: `${messagePrefix}.mobileBanner`,
+    defaultMessage: 'Mobile banner',
+  },
+  mobileFullwidth: {
+    id: `${messagePrefix}.mobileFullwidth`,
+    defaultMessage: 'Mobile fullwidth',
+  },
+  mobileInterstitial: {
+    id: `${messagePrefix}.mobileInterstitial`,
+    defaultMessage: 'Mobile interstitial',
+  },
+  mobileMediumRectangle: {
+    id: `${messagePrefix}.mobileMediumRectangle`,
+    defaultMessage: 'Mobile medium rectangle',
+  },
+  mobileNative: {
+    id: `${messagePrefix}.mobileNative`,
+    defaultMessage: 'Mobile native',
+  },
+  refreshPreview: {
+    id: `${messagePrefix}.refreshPreview`,
+    defaultMessage: 'Refresh preview',
+  },
+  videoNotePreview: {
+    id: `${messagePrefix}.videoNotePreview`,
+    defaultMessage: 'Facebook may take time to upload the video. Please try Refreshing.',
+  },
+});

package/v2Containers/CapFacebookPreview/reducer.js

@@ -0,0 +1,37 @@
+/*
+ *
+ * CapFacebookPreview reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import get from 'lodash/get';
+import * as types from './constants';
+
+const initialState = fromJS({
+  isFetchingPreview: false,
+  previewIframe: "",
+});
+
+function capFacebookPreviewReducer(state = initialState, action) {
+  switch (action.type) {
+    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', "");
+    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', ""));
+    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', "");
+    case types.CLEAR_PREVIEW:
+      return state.set('isFetchingPreview', false).set('previewIframe', "");
+    default:
+      return state;
+  }
+}
+
+export default capFacebookPreviewReducer;

package/v2Containers/CapFacebookPreview/sagas.js

@@ -0,0 +1,99 @@
+import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+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) {
+      yield put({
+        type: type.GENERATE_IMAGE_PREVIEW_FAILURE,
+        payload: errors,
+      });
+    } else {
+      yield put({
+        type: type.GENERATE_IMAGE_PREVIEW_SUCCESS,
+        payload: responsePreview,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: type.GENERATE_IMAGE_PREVIEW_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+export function* getVideoFacebookPreview(previewData) {
+  try {
+    const response = yield call(Api.getVideoFacebookPreview, previewData);
+    const { errors, response: responsePreview } = response;
+    if (errors && errors.length) {
+      yield put({
+        type: type.GENERATE_VIDEO_PREVIEW_FAILURE,
+        payload: errors,
+      });
+    } else {
+      yield put({
+        type: type.GENERATE_VIDEO_PREVIEW_SUCCESS,
+        payload: responsePreview,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: type.GENERATE_VIDEO_PREVIEW_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+export function* getCarouselFacebookPreview(previewData) {
+  try {
+    const response = yield call(Api.getCarouselFacebookPreview, previewData);
+    const { errors, response: responsePreview } = response;
+    if (errors && errors.length) {
+      yield put({
+        type: type.GENERATE_CAROUSEL_PREVIEW_FAILURE,
+        payload: errors,
+      });
+    } else {
+      yield put({
+        type: type.GENERATE_CAROUSEL_PREVIEW_SUCCESS,
+        payload: responsePreview,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: type.GENERATE_CAROUSEL_PREVIEW_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+
+function* watchImageFacebookPreview() {
+  const watcher = yield takeLatest(type.GENERATE_IMAGE_PREVIEW_REQUEST, getImageFacebookPreview);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchVideoFacebookPreview() {
+  const watcher = yield takeLatest(type.GENERATE_VIDEO_PREVIEW_REQUEST, getVideoFacebookPreview);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchCarouselFacebookPreview() {
+  const watcher = yield takeLatest(type.GENERATE_CAROUSEL_PREVIEW_REQUEST, getCarouselFacebookPreview);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export default [
+  watchImageFacebookPreview,
+  watchVideoFacebookPreview,
+  watchCarouselFacebookPreview,
+];
+

package/v2Containers/CapFacebookPreview/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the capFacebookPreview state domain
+ */
+const selectCapFacebookPreviewDomain = () => (state) => state.get('facebookPreview');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by CapFacebookPreview
+ */
+
+const makeSelectCapFacebookPreview = () => createSelector(
+  selectCapFacebookPreviewDomain(),
+  (substate) => substate && substate.toJS()
+);
+
+export {
+  selectCapFacebookPreviewDomain,
+  makeSelectCapFacebookPreview,
+};