@capillarytech/creatives-library 7.5.4 → 7.5.5

package/config/app.js

@@ -5,6 +5,7 @@ const config = {
   production: {
     api_endpoint: '/arya/api/v1/creatives',
     campaigns_api_endpoint: '/iris/v2/campaigns',
+    campaigns_api_org_endpoint: '/iris/v2/org/campaign',
     auth_endpoint: '/arya/api/v1/auth',
     arya_endpoint: '/arya/api/v1',
     login_url: '/auth/login',
@@ -17,6 +18,7 @@ const config = {
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
+    campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
     arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',
     subscription_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/org-settings/subscription',

package/index.js

@@ -75,6 +75,10 @@ import viberSaga from './v2Containers/Viber/sagas';
 
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
+import FacebookPreview from './v2Containers/CapFacebookPreview';
+import FacebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
+import FacebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
+
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
 import { updateCharCount } from './utils/smsCharCountV2';
@@ -101,6 +105,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const ViberContainer = {Viber, viberReducer, viberSaga};
+const FacebookPreviewContainer = { FacebookPreview, FacebookPreviewReducer, FacebookPreviewSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -145,4 +150,5 @@ export { CapContainer,
   GalleryContainer,
   FTPContainer,
   ViberContainer,
+  FacebookPreviewContainer,
 };

package/package.json

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

package/reducers.js

@@ -9,7 +9,7 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 
 import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
 import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
-
+import CapFacebookPreviewReducer from 'v2Containers/CapFacebookPreview/reducer';
 
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
@@ -64,6 +64,7 @@ export default function createReducer(asyncReducers) {
     email: emailReducer,
     ebill: ebillReducer,
     beeEditor: beeEditorReducer,
+    facebookPreview: CapFacebookPreviewReducer,
     FTP: ftpReducer,
     ...asyncReducers,
   });

package/routes.js

@@ -637,6 +637,8 @@ export default function createRoutes(store) {
           import('v2Containers/Line/Container/reducer'),
           import('v2Containers/Viber/sagas'),
           import('v2Containers/Viber/reducer'),
+          import('v2Containers/CapFacebookPreview/sagas'),
+          import('v2Containers/CapFacebookPreview/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -658,6 +660,7 @@ export default function createRoutes(store) {
           facebookSagas, facebookReducer,
           lineCreateSagas, lineCreateReducer,
           viberSagas, viberReducer,
+          capFacebookPreviewSagas, capFacebookPreviewReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -675,6 +678,7 @@ export default function createRoutes(store) {
           injectReducer('facebook', facebookReducer.default);
           injectReducer('lineCreate', lineCreateReducer.default);
           injectReducer('viber', viberReducer.default);
+          injectReducer('facebookPreview', capFacebookPreviewReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -691,6 +695,7 @@ export default function createRoutes(store) {
           injectSagas(facebookSagas.default);
           injectSagas(lineCreateSagas.default);
           injectSagas(viberSagas.default);
+          injectSagas(capFacebookPreviewSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -11,12 +11,15 @@ import { GA } from '@capillarytech/cap-ui-utils';
 let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
+let CAMPAIGNS_API_ORG_ENDPOINT = config.development.campaigns_api_org_endpoint;
+
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
 let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
   CAMPAIGNS_API_ENDPOINT = config.production.campaigns_api_endpoint;
+  CAMPAIGNS_API_ORG_ENDPOINT = config.production.campaigns_api_org_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
   ARYA_ENDPOINT = config.production.arya_endpoint;
   SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
@@ -203,6 +206,7 @@ export const createWeChatTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/WECHAT`;
   return request(url, getAPICallObject('POST', template));
 };
+
 export const createMobilePushTemplate = ({template}) => {
   console.log('in api.js', template);
   const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
@@ -245,7 +249,6 @@ export const getTemplateDetails = ({id, channel}) => {
 };
 
 export const getAllTemplates = ({channel, queryParams}) => {
-  console.log('in api.js', channel, queryParams);
   const url = `${API_ENDPOINT}/templates/${channel}?query=${encodeURIComponent(JSON.stringify(queryParams))}`;
   return request(url, getAPICallObject('GET'));
 };
@@ -370,6 +373,11 @@ export const createViberTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createFacebookADTemplate = ({template}) => {
+  const url = `${API_ENDPOINT}/templates/FACEBOOK`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const getLocizMessage = async (locale) => {
   const appName = 'creatives_v2';
   const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
@@ -403,3 +411,28 @@ export const createCustomRow = (data) => {
   const url = `${API_ENDPOINT}/cms/saveRows`;
   return request(url, getAPICallObject('POST', data));
 };
+
+export const getImageFacebookPreview = ({previewData}) => {
+  const url = `${API_ENDPOINT}/facebook/getImagePreview`;
+  return request(url, getAPICallObject('POST', previewData));
+};
+
+export const getVideoFacebookPreview = ({previewData}) => {
+  const url = `${API_ENDPOINT}/facebook/getVideoPreview`;
+  return request(url, getAPICallObject('POST', previewData));
+};
+
+export const getCarouselFacebookPreview = ({previewData}) => {
+  const url = `${API_ENDPOINT}/facebook/getCarouselPreview`;
+  return request(url, getAPICallObject('POST', previewData));
+};
+
+export const getOrgOUs = ({ orgID }) => {
+  const url = `${ARYA_ENDPOINT}/org/${orgID}/oulist`;
+  return request(url, getAPICallObject('GET'));
+};
+
+export const getOrgLevelCampaignSettings = () => {
+  const url = `${CAMPAIGNS_API_ORG_ENDPOINT}/settings`;
+  return request(url, getAPICallObject('GET', null, false, true));
+};

package/utils/common.js

@@ -49,7 +49,7 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
         name: tag.label[userLocale] || tag.label.en,
         value: tag.value,
       };
-    } else if (tag['tag-header'] && mainTags[tag.value]) { 
+    } else if (tag['tag-header'] && mainTags[tag.value]) {
       // to check it this tag header is already available in mainTags object,
       //If yes, it will concat the subtag
       mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -215,3 +215,15 @@ function getSubTags(subtagsParam) {
   });
   return result;
 }
+
+export const bytes2Size = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${Math.ceil((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};

package/v2Components/CapImageUpload/index.js

@@ -0,0 +1,260 @@
+/**
+*
+* CapImageUpload
+*
+*/
+
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from "prop-types";
+
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import {
+  CapDrawer,
+  CapUploader,
+  CapHeading,
+  CapButton,
+  CapImage,
+} from '@capillarytech/cap-ui-library';
+import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
+import get from 'lodash/get';
+import './index.scss';
+import Gallery from '../../v2Containers/Assets/Gallery';
+
+import messages from './messages';
+function CapImageUpload(props) {
+  const {
+    intl,
+    allowedExtensionsRegex,
+    imgWidth,
+    imgHeight,
+    imgSize,
+    uploadAsset,
+    supportedExtensions,
+    isFullMode,
+    style,
+    imageSrc,
+    updateImageSrc,
+    updateOnReUpload,
+    index,
+    className,
+    imageData,
+  } = props;
+  const {
+    formatMessage,
+    } = intl || {};
+
+
+  useEffect(() => {
+    if (imageData[`uploadedAssetData${index}`] && Object.keys(imageData[`uploadedAssetData${index}`]).length) {
+      const imgSrc = get(imageData, `uploadedAssetData${index}.metaInfo.secure_file_path`, '');
+      updateImageSrc(imgSrc);
+    }
+  }, [imageData[`uploadedAssetData${index}`]]);
+
+  const [isImageError, updateImageErrorMessage] = useState(false);
+  const [isDrawerRequired, updateDrawerRequirement] = useState(false);
+
+  const {CapHeadingSpan} = CapHeading;
+  const ImageComponent = useCallback(() => (<>
+    <div
+      className={`image-container upload ${props.ifError ? 'error' : ''}`}
+    >
+      {imageSrc !== "" && (<CapImage src={imageSrc || ""} alt="upload-image-src" height="400" />)}
+    </div></>
+  ), []);
+
+  const WithLabel = LabelHOC(ImageComponent);
+
+  const uploadImages = useCallback((e, {files}) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const _URL = window.URL || window.webkitURL;
+    let incorrectFile = false;
+    const file = files[0];
+    if (!allowedExtensionsRegex.test(file.name)) {
+      incorrectFile = true;
+    }
+    const img = new Image();
+    img.src = _URL.createObjectURL(file);
+    img.onload = () => {
+      const fileParams = {
+        width: img.width,
+        height: img.height,
+        error: file && (file.size / (1e+6) > 3), // checking error based on file size
+      };
+      submitAction({file, type: 'image', fileParams}, incorrectFile);
+    };
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
+  }, []);
+
+  const submitAction = useCallback((data, incorrectFile) => {
+    const {
+      file: {size},
+      fileParams: {
+          height,
+          width,
+      },
+    } = data;
+    if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth) {
+      updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
+    } else {
+      updateImageErrorMessage('');
+      uploadAsset(
+        data.file,
+        data.type,
+        data.fileParams,
+        index,
+      );
+    }
+  }, [isImageError]);
+
+  const capUploaderCustomRequest = useCallback((uploadData) => {
+    uploadImages(undefined, {files: [uploadData.file]});
+  }, []);
+
+  const setDrawerVisibility = useCallback((drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag), [isDrawerRequired]);
+
+  const onGalleryClick = useCallback((event) => {
+    event.stopPropagation();
+    setDrawerVisibility(true);
+  }, []);
+
+  const onReUpload = useCallback(() => {
+    updateImageSrc('');
+    updateOnReUpload();
+  }, []);
+
+  const onGalleryImageSelect = useCallback((imageTemplate) => {
+    const image = get(imageTemplate, 'metaInfo.secure_file_path');
+    updateDrawerRequirement(false);
+    if (!allowedExtensionsRegex.test(image)) {
+      updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
+    } else {
+      updateImageErrorMessage('');
+      updateImageSrc(image);
+    }
+  }, [isImageError, isDrawerRequired]);
+
+  const getGalleryDrawerContent = useCallback(() => {
+    const locationGallery = {
+      pathname: `/assets`,
+      search: '',
+      query: !isFullMode ? {type: 'embedded', module: 'library'} : {},
+    };
+    return (
+      <>
+        <CapHeading type="h3">
+          {formatMessage(messages.imageGallery)}
+        </CapHeading>
+        <Gallery
+          location={locationGallery}
+          isFullMode={isFullMode}
+          isLineAsset
+          onGalleryImageSelect={onGalleryImageSelect}
+          />
+      </>
+    );
+  }, []);
+
+  const getImageSection = useCallback(() => {
+    if (imageSrc === "") {
+      return (<>
+        <CapUploader.CapDragger
+          customRequest={capUploaderCustomRequest}
+          className="form-builder-dragger"
+        >
+          <CapHeading className="dragger-title" type="h7">
+            <FormattedMessage {...messages.dragAndDrop} />
+          </CapHeading>
+          <CapHeading className="dragger-or" type="label6">
+            <FormattedMessage {...messages.or} />
+          </CapHeading>
+          <CapButton className="dragger-button upload-image" type="secondary">
+            <FormattedMessage {...messages.uploadComputer} />
+          </CapButton>
+          <CapButton
+            className="dragger-button gallery-select"
+            type="secondary"
+            onClick={onGalleryClick}
+                >
+            <FormattedMessage {...messages.uploadGallery} />
+          </CapButton>
+        </CapUploader.CapDragger>
+
+
+        </>
+      );
+    }
+    return (
+      <CapButton
+        className="dragger-button re-upload"
+        type="flat"
+        onClick={onReUpload}
+       >
+        <FormattedMessage {...messages.imageReUpload} />
+      </CapButton>
+    );
+  }, []);
+
+  return (
+    <div style={style} className="cap-custom-image-upload">
+      <WithLabel
+        key={`with-label`}
+        errorMessage={isImageError} ifError={!!isImageError}
+
+    />
+      <form encType="multipart/form-data" id={`form`} className={className}>
+        <input
+          key={`imgFile`}
+          style={{ display: 'none' }}
+          id="fileName"
+          type="file"
+          onChange={(e) => uploadImages(e, { files: e.target.files })}
+          accept={supportedExtensions || "image/*"}
+      />
+        {getImageSection()}
+        <CapDrawer
+          content={getGalleryDrawerContent()}
+          visible={isDrawerRequired}
+          width={430}
+          onClose={() => updateDrawerRequirement(false)}
+      />
+      </form>
+      <div className="image-info-wrapper">
+        <CapHeadingSpan type="label2" className="image-dimension">
+          <FormattedMessage {...messages.imageDimenstionDescription} values={{ width: imgWidth, height: imgHeight}}/>
+        </CapHeadingSpan>
+        <CapHeadingSpan type="label2" className="image-aspect-ratio">
+          <FormattedMessage {...messages.aspectRatio} />
+        </CapHeadingSpan>
+        <CapHeadingSpan type="label2" className="image-format">
+          <FormattedMessage {...messages.format} />
+        </CapHeadingSpan>
+      </div>
+    </div>
+  );
+}
+
+CapImageUpload.propTypes = {
+  allowedExtensionsRegex: PropTypes.any,
+  imgWidth: PropTypes.number,
+  imgHeight: PropTypes.number,
+  imgSize: PropTypes.number,
+  uploadAsset: PropTypes.func,
+  supportedExtensions: PropTypes.any,
+  style: PropTypes.any,
+  imageSrc: PropTypes.string,
+  updateImageSrc: PropTypes.func,
+  intl: intlShape,
+  isFullMode: PropTypes.bool,
+  className: PropTypes.string,
+  updateOnReUpload: PropTypes.func,
+  imageData: PropTypes.object,
+  index: PropTypes.number,
+};
+
+export default injectIntl(CapImageUpload);

package/v2Components/CapImageUpload/index.scss

@@ -0,0 +1,32 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: cap-custom-image-upload;
+
+.#{$classPrefix} {
+    .image-container{
+        .upload{
+            margin-top: 20;
+            background-color: $CAP_G09;
+        }
+    }
+    .upload-image{
+        margin-right: $CAP_SPACE_08
+    }
+    .gallery-select{
+        margin-left: $CAP_SPACE_08
+    }
+    .image-format{
+        float: right; 
+    }
+    .image-aspect-ratio{
+        margin-top: $CAP_SPACE_12;
+        margin-left: 64px; 
+    }
+    .image-dimension{
+        margin-top: $CAP_SPACE_12;
+        margin-right: 46px; 
+    }
+    .image-info-wrapper{
+        margin-bottom: 15px; 
+    }
+}

package/v2Components/CapImageUpload/messages.js

@@ -0,0 +1,49 @@
+import { defineMessages } from 'react-intl';
+const scope = `creatives.componentsV2.CapImageUpload`;
+
+export default defineMessages({
+  uploadGallery: {
+    id: `${scope}.uploadGallery`,
+    defaultMessage: 'Gallery',
+  },
+  uploadComputer: {
+    id: `${scope}.uploadComputer`,
+    defaultMessage: 'Your computer',
+  },
+  or: {
+    id: `${scope}.or`,
+    defaultMessage: 'OR',
+  },
+  dragAndDrop: {
+    id: `${scope}.dragAndDrop`,
+    defaultMessage: 'Drag and drop image here',
+  },
+  uploadImageDescription: {
+    id: `${scope}.uploadImageDescription`,
+    defaultMessage: 'The relevant image that complements the message context.',
+  },
+  imageReUpload: {
+    id: `${scope}.imageReUpload`,
+    defaultMessage: 'Re upload',
+  },
+  imageDimenstionDescription: {
+    id: `${scope}.imageDimenstionDescription`,
+    defaultMessage: 'Dimensions: {width}px x {height}px',
+  },
+  format: {
+    id: `${scope}.format`,
+    defaultMessage: 'Format: JPG, PNG',
+  },
+  imageIncorrectSize: {
+    id: `${scope}.imageIncorrectSize`,
+    defaultMessage: 'Please upload the image with correct type, size and dimension',
+  },
+  imageGallery: {
+    id: `${scope}.imageGallery`,
+    defaultMessage: 'Gallery',
+  },
+  aspectRatio: {
+    id: `${scope}.aspectRatio`,
+    defaultMessage: 'Aspect ratio: 1:1',
+  },
+});

package/v2Components/CapRadioCardCustom/index.js

@@ -0,0 +1,66 @@
+/**
+*
+* CapRadioCardCustom
+*
+*/
+import PropTypes from "prop-types";
+import React from 'react';
+import {
+  CAP_G06,
+  CAP_COLOR_06,
+  CAP_WHITE,
+  CAP_SPACE_08,
+  CAP_SPACE_12,
+  CAP_SPACE_04,
+ } from '@capillarytech/cap-ui-library/styled/variables';
+
+import styled from 'styled-components';
+import { CapDivider } from "@capillarytech/cap-ui-library";
+function CapRadioCardCustom(props) {
+  const {
+    showSelected,
+    wrapperStyle,
+    component,
+  } = props;
+  const RadioLeftContainer = styled.div`
+    width: 62px;
+    height: 64px;
+    margin: 0 ${CAP_SPACE_12} ${CAP_SPACE_04} 0;
+    padding: 5px 0 0;
+    border-radius: ${CAP_SPACE_08};
+    border: solid 1px ${CAP_G06};
+    background-color: ${CAP_WHITE};
+`;
+  const BottomContainer = styled.div`
+    width: 60px;
+    height: 41px;
+    padding: 9px 20px ${CAP_SPACE_08};
+    border-bottom-left-radius: ${CAP_SPACE_08};
+    border-bottom-right-radius: ${CAP_SPACE_08};
+    background-color: ${(styledProps) => styledProps.selected ? CAP_COLOR_06 : CAP_WHITE};
+`;
+  const TopContainer = styled.div`
+    width: ${(styledProps) => styledProps.width};
+    height: 5px;
+    margin: 0 25px 2px 2px;
+    background-color: ${CAP_G06};
+`;
+  return (
+    <RadioLeftContainer>
+      <TopContainer width="13px"/>
+      <TopContainer width="38px"/>
+      <CapDivider style={{margin: '4px 0px -1px'}}></CapDivider>
+      <BottomContainer style={wrapperStyle} selected={showSelected}>
+        {component}
+      </BottomContainer>
+    </RadioLeftContainer>
+  );
+}
+
+CapRadioCardCustom.propTypes = {
+  component: PropTypes.any,
+  wrapperStyle: PropTypes.any,
+  showSelected: PropTypes.string,
+};
+
+export default CapRadioCardCustom;