@capillarytech/creatives-library 7.5.4 → 7.5.6

package/v2Containers/Facebook/reducer.js

@@ -8,14 +8,34 @@ import { fromJS } from 'immutable';
 import {
   SET_MARKETING_OBJECTIVES_SUCCESS,
   SET_MARKETING_OBJECTIVES_FAILURE,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  UPLOAD_FB_AD_ASSET_SUCCESS,
+  UPLOAD_FB_AD_ASSET_FAILURE,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  CREATE_FACEBOOK_AD_TEMPLATE_FAILURE,
+  CLEAR_FACEBOOK_AD_ASSET,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  EDIT_FACEBOOK_AD_TEMPLATE_FAILURE,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE,
+  CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST,
+  CLEAR_FACEBOOK_AD_DATA,
+  GET_ORG_OU_LIST_REQUEST,
+  GET_ORG_OU_LIST_FAILURE,
+  GET_ORG_OU_LIST_SUCCESS,
 } from './constants';
 
 export const initialState = fromJS({
   marketinObjectives: {},
+  uploadedAssetData: {},
 });
 
 function facebookReducer(state = initialState, action) {
-  const { type, payload } = action;
+  const { type, payload, templateType} = action;
   switch (type) {
     case SET_MARKETING_OBJECTIVES_SUCCESS: {
       return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
@@ -23,6 +43,80 @@ function facebookReducer(state = initialState, action) {
     case SET_MARKETING_OBJECTIVES_FAILURE: {
       return state.set('marketinObjectivesData', []).set('marketinObjectivesError', payload);
     }
+    case UPLOAD_FB_AD_ASSET_REQUEST:
+      return state
+              .set('uploadAssetSuccess', false)
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', true);
+    case UPLOAD_FB_AD_ASSET_SUCCESS:
+      return state
+              .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', false)
+              .set(templateType !== undefined ? `uploadedAssetData${templateType}` : 'uploadedAssetData', action.data);
+    case UPLOAD_FB_AD_ASSET_FAILURE:
+      return state
+              .set('uploadAssetSuccess', false)
+              .set(templateType !== undefined ? `assetUploading${templateType}` : 'assetUploading', false);
+    case CREATE_FACEBOOK_AD_TEMPLATE_REQUEST:
+      return state
+              .set('createTemplateInProgress', true)
+              .set('createTemplateError', false)
+              .set('createTemplateErrorMessage', fromJS(""));
+    case CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS:
+      return state.set('createTemplateInProgress', false)
+              .set('response', action.data)
+              .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+              .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case CREATE_FACEBOOK_AD_TEMPLATE_FAILURE:
+      return state
+              .set('createTemplateInProgress', false)
+              .set('createTemplateError', true)
+              .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case CLEAR_FACEBOOK_AD_ASSET:
+      return state
+                .delete(templateType !== undefined ? `uploadedAssetData${templateType}` : 'uploadedAssetData');
+            // FOR EDIT
+    case EDIT_FACEBOOK_AD_TEMPLATE_REQUEST:
+      return state
+              .set('editTemplateInProgress', true)
+              .set('editTemplateError', false)
+              .set('editTemplateErrorMessage', fromJS(""));
+    case EDIT_FACEBOOK_AD_TEMPLATE_SUCCESS:
+      return state.set('editTemplateInProgress', false)
+                .set('editResponse', action.data)
+                .set('editTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+                .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case EDIT_FACEBOOK_AD_TEMPLATE_FAILURE:
+      return state
+                .set('editTemplateInProgress', false)
+                .set('editTemplateError', true)
+                .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS:
+      return state.set('getTemplateDetailsInProgress', false)
+                .set('templateDetails', action.data);
+    case GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE:
+    case CLEAR_FACEBOOK_AD_EDIT_RESPONSE_REQUEST:
+      return state.set('editResponse', {});
+    case CLEAR_FACEBOOK_AD_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    case CLEAR_FACEBOOK_AD_DATA:
+      return state
+                .delete('uploadedAssetData')
+                .delete('metaEntities')
+                .delete('templateDetails');
+    case GET_ORG_OU_LIST_REQUEST: {
+      return state.set('orgOuData', fromJS({ status: 'REQUEST' }));
+    }
+    case GET_ORG_OU_LIST_SUCCESS: {
+      return state.set(
+        'orgOuData',
+        fromJS({ status: 'SUCCESS', data: action.payload }),
+      );
+    }
+    case GET_ORG_OU_LIST_FAILURE: {
+      return state.set('orgOuData', fromJS({ status: 'FAILURE' }));
+    }
     default:
       return state;
   }

package/v2Containers/Facebook/sagas.js

@@ -5,6 +5,21 @@ import {
   GET_MARKETING_OBJECTIVES,
   SET_MARKETING_OBJECTIVES_SUCCESS,
   SET_MARKETING_OBJECTIVES_FAILURE,
+  UPLOAD_FB_AD_ASSET_REQUEST,
+  UPLOAD_FB_AD_ASSET_SUCCESS,
+  UPLOAD_FB_AD_ASSET_FAILURE,
+  CREATE_FACEBOOK_AD_TEMPLATE_REQUEST,
+  CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS,
+  CREATE_FACEBOOK_AD_TEMPLATE_FAILURE,
+  EDIT_FACEBOOK_AD_TEMPLATE_REQUEST,
+  EDIT_TEMPLATE_FACEBOOK_AD_SUCCESS,
+  EDIT_FACEBOOK_AD_TEMPLATE_FAILURE,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS,
+  GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE,
+  GET_ORG_OU_LIST_FAILURE,
+  GET_ORG_OU_LIST_SUCCESS,
+  GET_ORG_OU_LIST_REQUEST,
 } from './constants';
 
 export function* fetchMarketingObjectives() {
@@ -29,13 +44,134 @@ export function* fetchMarketingObjectives() {
     });
   }
 }
+export function* getOrgOUs({ orgID } = {}) {
+  try {
+    const apiResponse = yield call(Api.getOrgOUs, { orgID });
+    if (apiResponse.status === 200) {
+      yield put({
+        type: GET_ORG_OU_LIST_SUCCESS,
+        payload: apiResponse.result,
+      });
+    } else {
+      yield put({
+        type: GET_ORG_OU_LIST_FAILURE,
+        payload: apiResponse,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: GET_ORG_OU_LIST_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+export function* uploadFbAdAsset(file, assetType, fileParams ) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({
+      type: UPLOAD_FB_AD_ASSET_SUCCESS,
+      data: result.response.asset,
+      statusCode: result.status ? result.status.code : '',
+      templateType: file.templateType,
+    });
+  } catch (error) {
+    yield put({ type: UPLOAD_FB_AD_ASSET_FAILURE, error });
+  }
+}
+export function* createFacebookADTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createFacebookADTemplate, { template });
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    yield put({ type: CREATE_FACEBOOK_AD_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: CREATE_FACEBOOK_AD_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createFacebookADTemplate, {template});
+    if (result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    if (callback) {
+      callback(result.response);
+    }
+    yield put({ type: EDIT_TEMPLATE_FACEBOOK_AD_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+  } catch (error) {
+    yield put({ type: EDIT_FACEBOOK_AD_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+export function* getTemplateDetails({id, callback}) {
+  try {
+    const result = yield call(Api.getTemplateDetails, {id, channel: 'FACEBOOK'});
+    yield put({ type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+    if (callback) {
+      callback(false);
+    }
+  } catch (error) {
+    yield put({ type: GET_FACEBOOK_AD_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(CREATE_FACEBOOK_AD_TEMPLATE_REQUEST, createFacebookADTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(GET_FACEBOOK_AD_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchEditTemplate() {
+  const watcher = yield takeLatest(EDIT_FACEBOOK_AD_TEMPLATE_REQUEST, editTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
 
 function* watchFetchMarketingObjective() {
   const watcher = yield takeLatest(GET_MARKETING_OBJECTIVES, fetchMarketingObjectives);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
 }
+function* watchUploadFbADAsset() {
+  const watcher = yield takeLatest(UPLOAD_FB_AD_ASSET_REQUEST, uploadFbAdAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+export function* watchGetOrgOUs() {
+  yield takeLatest(GET_ORG_OU_LIST_REQUEST, getOrgOUs);
+}
 
 export default [
   watchFetchMarketingObjective,
+  watchUploadFbADAsset,
+  watchEditTemplate,
+  watchGetTemplateDetails,
+  watchCreateTemplate,
+  watchGetOrgOUs,
 ];
+

package/v2Containers/Facebook/selectors.js

@@ -5,6 +5,11 @@ import { createSelector } from 'reselect';
  */
 const selectFacebookDomain = () => (state) => state.get('facebook');
 
+const selectTemplateDomain = () => (state) => state.get('templates');
+export const makeSelectTemplate = () => createSelector(
+  selectTemplateDomain(),
+  (substate) => substate && substate.toJS()
+);
 /**
  * Other specific selectors
  */
@@ -18,3 +23,8 @@ export const makeSelectMarketingObjectiveList = () => createSelector(
   selectFacebookDomain(),
   (substate) => substate && substate.get('marketinObjectivesData'),
 );
+
+export const makeSelectFbAd = () => createSelector(
+  selectFacebookDomain(),
+  (substate) => substate && substate.toJS()
+);

package/v2Containers/Line/Container/Video/index.js

@@ -46,7 +46,6 @@ export const LineVideo = ({
   updateUploadedAssetList,
   deleteUploadedImgList,
 }) => {
-
   if (activeKey !== 'video') {
     return null;
   }
@@ -118,7 +117,7 @@ export const LineVideo = ({
       updateVideoDuration(videoDuration);
       updateActionUrl(linkUri || actionUrl);
       updateActionLabel(videoActionLabel);
-      updateSelectedAction(selectedAction || (!!videoActionLabel ? DISPLAY_ACTION_BUTTON : HIDE_ACTION_BUTTON));
+      updateSelectedAction(selectedAction || (videoActionLabel ? DISPLAY_ACTION_BUTTON : HIDE_ACTION_BUTTON));
       updateTitle(altText);
       if (videoPreviewUrl) {
         updateImagePreview(videoPreviewUrl);
@@ -224,11 +223,9 @@ export const LineVideo = ({
         messageType: 'videoSrc',
       });
     }
-  }
+  };
 
-  const checkAction = useCallback((label = actionLabel, url = actionUrl, type = selectedAction) => {
-    return type === DISPLAY_ACTION_BUTTON ? (url && label && !updateActionLabelError(label) && !updateActionUrlError(url)) : true;
-  }, [actionLabel, actionUrl, selectedAction]);
+  const checkAction = useCallback((label = actionLabel, url = actionUrl, type = selectedAction) => type === DISPLAY_ACTION_BUTTON ? (url && label && !updateActionLabelError(label) && !updateActionUrlError(url)) : true, [actionLabel, actionUrl, selectedAction]);
 
   const submitVideoAction = useCallback((data, incorrectFile) => {
     const {
@@ -305,7 +302,7 @@ export const LineVideo = ({
       selectedAction,
       messageType: 'videoSrc',
     });
-  }
+  };
 
   const onReUpload = () => {
     updateVideoStatus(false);
@@ -332,24 +329,24 @@ export const LineVideo = ({
       selectedAction,
       messageType: 'videoSrc',
     });
-  }
+  };
 
   const onSelectTemplate = useCallback((event) => {
     event.stopPropagation();
     updateTemplateDrawerRequirement(true);
-  }, [])
+  }, []);
 
   const playVideo = (e) => {
     if (e.target.paused && !isPlaying) {
       e.target.play();
     }
-  } 
+  };
 
   const pauseVideo = (e) => {
     if (!e.target.paused && isPlaying) {
       e.target.pause();
     }
-  }
+  };
 
   const getVideoSection = () => {
     if (!isVideo) {
@@ -412,7 +409,7 @@ export const LineVideo = ({
             onMouseOut={pauseVideo}
             ref={videoEl}
           >
-              <source src={videoSrc} type="video/mp4" />
+            <source src={videoSrc} type="video/mp4" />
           </video>
           <div style={{ marginLeft: CAP_SPACE_24 }}>
             <CapHeading type="h6">
@@ -425,7 +422,7 @@ export const LineVideo = ({
         </div>
       </Fragment>
     );
-  }
+  };
 
   const onTitleChange = ({ target: { value } }) => {
     updateTitle(value);
@@ -451,7 +448,7 @@ export const LineVideo = ({
       selectedAction,
       messageType: 'videoSrc',
     });
-  }
+  };
 
   const onChangeSelectedAction = () => {
     event.stopPropagation();
@@ -474,7 +471,7 @@ export const LineVideo = ({
       selectedAction: value,
       messageType: 'videoSrc',
     });
-  }
+  };
 
   const updateActionLabelError = (value = '') => {
     if (value.length > MAX_ACTION_LABEL_LENGTH) {
@@ -486,7 +483,7 @@ export const LineVideo = ({
     } else {
       updateActionLabelErrorMessage();
     }
-  }
+  };
 
   const updateActionUrlError = (value) => {
     if (value === '') {
@@ -498,7 +495,7 @@ export const LineVideo = ({
     } else {
       updateActionUrlErrorMessage();
     }
-  }
+  };
 
   const onActionLabelChange = ({ target: { value } }) => {
     updateActionLabel(value);
@@ -520,7 +517,7 @@ export const LineVideo = ({
       selectedAction,
       messageType: 'videoSrc',
     });
-  }
+  };
 
   const onActionUrlChange = ({ target: { value } }) => {
     updateActionUrl(value);
@@ -542,10 +539,9 @@ export const LineVideo = ({
       selectedAction,
       messageType: 'videoSrc',
     });
-  }
+  };
 
-  const getActionSection = () => {
-    return (
+  const getActionSection = () => (
       <>
         <CapHeading type="h6" style={{ marginTop: CAP_SPACE_12 }}>
           <FormattedMessage {...messages.actionButtonLabel} />
@@ -558,12 +554,12 @@ export const LineVideo = ({
           options={[
             {
               label: 'Hide',
-              value: HIDE_ACTION_BUTTON
+              value: HIDE_ACTION_BUTTON,
             },
             {
               label: 'Display',
-              value: DISPLAY_ACTION_BUTTON
-            }
+              value: DISPLAY_ACTION_BUTTON,
+            },
           ]}
         />
         {
@@ -593,18 +589,18 @@ export const LineVideo = ({
             : null
         }
       </>
-    )
-  }
+    );
 
   const getLineVideoSection = () => {
     if (!isCreateNew) {
       return (
-        <div className="form-builder-dragger" style={{
-          textAlign: 'center',
-          border: `1px dashed ${CAP_G06}`,
-          minHeight: 120,
-          padding: 60
-        }}>
+        <div
+          className="form-builder-dragger" style={{
+            textAlign: 'center',
+            border: `1px dashed ${CAP_G06}`,
+            minHeight: 120,
+            padding: 60,
+          }}>
           <CapHeader
             className="choice-title"
             size="regular"
@@ -634,7 +630,8 @@ export const LineVideo = ({
           >
             <FormattedMessage {...messages.textMessageSelectTemplate} />
           </CapButton>
-        </div>);
+        </div>
+      );
     } else {
       return (
         <>
@@ -652,7 +649,7 @@ export const LineVideo = ({
         </>
       );
     }
-  }
+  };
 
   const setNewContent = useCallback(() => updateCreateNew(true), []);
 
@@ -688,9 +685,9 @@ export const LineVideo = ({
     updateVideoDuration(videoDuration);
     updateActionUrl(linkUri);
     updateActionLabel(label);
-    updateSelectedAction(!!label ? DISPLAY_ACTION_BUTTON : HIDE_ACTION_BUTTON);
+    updateSelectedAction(label ? DISPLAY_ACTION_BUTTON : HIDE_ACTION_BUTTON);
     updateTitle(altText);
-  }
+  };
 
   const getLineVideoDrawerContent = () => {
     const lineTextTemplates = Templates.templates;
@@ -699,8 +696,8 @@ export const LineVideo = ({
     }
 
     const cardDataList = [];
-    lineTextTemplates.forEach(template => {
-      let templateData = {};
+    lineTextTemplates.forEach((template) => {
+      const templateData = {};
       const {
         content: {
           messages: [{
@@ -780,7 +777,7 @@ export const LineVideo = ({
         />
       </form>
     </div>
-  )
-}
+  );
+};
 
-export default injectIntl(withStyles(LineVideo, style));
+export default injectIntl(withStyles(LineVideo, style));

package/v2Containers/Templates/_templates.scss

@@ -20,6 +20,32 @@
 
 .creatives-templates-list {
   .pagination-container {
+    .FACEBOOK {
+      .ant-card-body {
+        background-color: $CAP_G09;
+        height: 320px;
+      }
+    
+      &.no-image .ant-card-meta {
+        height: 276px;
+        background: $CAP_WHITE;
+        padding: $CAP_SPACE_16 $CAP_SPACE_12;
+    
+        .ant-card-meta-description {
+          height: 250px;
+          word-wrap: break-word;
+        }
+      }
+
+      &.carousel-img-section {
+        .ant-card-body {
+          padding: $CAP_SPACE_24 0;
+        }
+        .ant-card-meta {
+          padding: 0;
+        }
+      }
+    }
     .LINE {
       .ant-card-body {
         background-color: $CAP_G09;

package/v2Containers/Templates/actions.js

@@ -7,7 +7,7 @@
 import * as types from './constants';
 
 export function getAllTemplates(channel, queryParams) {
-  console.log('get all templates action trigereed', channel, queryParams);
+  // console.log('get all templates action trigereed', channel, queryParams);
   return {
     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
   };
@@ -44,6 +44,12 @@ export function getWeCrmAccounts(source) {
   };
 }
 
+export function getAccountsSettings() {
+  return {
+    type: types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST,
+  };
+}
+
 export function setWeChatAccount(weChatAccount) {
   console.log('setting wechat account', weChatAccount);
   return {
@@ -66,6 +72,13 @@ export function setViberAccount(viberAccount) {
   };
 }
 
+export function setFacebookAccount(faceBookAccount) {
+  return {
+    type: types.SET_FACEBOOK_ACCOUNT,
+    faceBookAccount,
+  };
+}
+
 export function handleHtmlUpload(selectedTemplate) {
   return {
     type: types.SET_SELECTED_LAYOUT,

package/v2Containers/Templates/constants.js

@@ -44,8 +44,16 @@ export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPL
 
 export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
 export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
+export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACCOUNT";
 
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
 export const GET_DEAFULT_BEE_TEMPLATES_FAILURE = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_FAILURE';
+
+export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST =
+  'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST';
+export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS =
+  'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS';
+export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE =
+  'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE';