@capillarytech/creatives-library 3.4.3 → 3.4.5

package/v2Containers/TemplatesV2/index.js

@@ -21,7 +21,6 @@ import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
-import Facebook from '../Facebook';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
@@ -34,44 +33,32 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   constructor(props) {
     super(props);
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
-    const {
-      intl,
-      channelsToHide = [],
-      channelsToDisable = [],
-      isFullMode,
-      onChannelChange,
-    } = props;
-
     const defaultPanes = {
-      sms: {content: <div></div>, tab: intl.formatMessage(messages.sms), key: 'sms'},
-      email: {content: <div></div>, tab: intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <div></div>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
+      sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <div></div>, tab: props.intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
+    const channelsToHide = this.props.channelsToHide || [];
+    const channelsToDisable = this.props.channelsToDisable || [];
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
       }, []);
 
-    if (isFullMode ) {
-      filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets'});
-    } else {
-      if (!channelsToHide.includes('callTask')) {
-        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task'});
-      }
-      if (!channelsToHide.includes('facebook')) {
-        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'});
-      }
+    if (props.isFullMode ) {
+      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.gallery), key: 'assets'});
+    } else if (!channelsToHide.includes('callTask')) {
+      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
 
     filteredPanes = filteredPanes.map( (pane) => {
       if (channelsToDisable.includes(pane.key)) {
-        // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
       }
-      return pane;
+    return pane;
     });
 
     const channel = ['sms', 'email', 'mobilepush', 'call_task'];
@@ -91,9 +78,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       selectedChannel: defaultChannel,
       panes,
     };
-    if (!isFullMode) {
-      onChannelChange(defaultChannel);
-    }
+    !props.isFullMode && this.props.onChannelChange(defaultChannel);
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
@@ -137,17 +122,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     />
   );
 
-  getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit } = this.props;
-    return (
-      <Facebook
-        messageDetails={messageDetails}
-        cap={cap}
-        onFacebookSubmit={onFacebookSubmit}
-      />
-    );
-  }
-
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
@@ -160,8 +134,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         return this.getCallTaskComponent();
       case 'assets':
         return this.getGalleryComponent(location);
-      case 'facebook':
-        return this.getFacebookComponent();
       default:
         return (<Templates
           key={channel}
@@ -210,16 +182,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-          <div className="component-wrapper">
-            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-              <StyledCapTab
-                panes={this.state.panes}
-                onChange={this.channelChange}
-                activeKey={this.state.selectedChannel}
-                defaultActiveKey={this.state.selectedChannel}
-                isFullMode={isFullMode}
-              />
-          </div>
+        <div className="component-wrapper">
+          {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
+          <StyledCapTab
+            panes={this.state.panes}
+            onChange={this.channelChange}
+            activeKey={this.state.selectedChannel}
+            defaultActiveKey={this.state.selectedChannel}
+            isFullMode={isFullMode}
+          />
+        </div>
       </div>
 
     );
@@ -241,9 +213,6 @@ TemplatesV2.propTypes = {
   channelsToHide: PropTypes.array,
   className: PropTypes.string.isRequired,
   channelsToDisable: PropTypes.array,
-  onFacebookSubmit: PropTypes.func,
-  messageDetails: PropTypes.object,
-  cap: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -42,10 +42,6 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.callTask',
     defaultMessage: 'Call Task',
   },
-  facebook: {
-    id: 'creatives.containersV2.TemplatesV2.facebook',
-    defaultMessage: 'Facebook',
-  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',

package/v2Components/MarketingObjective/MarketingObjective.style.js

@@ -1,73 +0,0 @@
-import { css } from 'styled-components';
-import {
-  CAP_SPACE_16,
-  CAP_PRIMARY,
-  CAP_G06,
-} from '@capillarytech/cap-ui-library/styled/variables';
-
-export default css`
-  .ant-radio-group.cap-radioCard-v2 {
-    .ant-radio-button-wrapper {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .icon-container {
-      background-color: transparent;
-
-      .anticon {
-        color: ${CAP_G06};
-      }
-
-      &.green-color {
-        background-color: transparent;
-
-        .anticon {
-          color: ${CAP_PRIMARY.base};
-        }
-      }
-    }
-  }
-
-  .radio-group-heading {
-    margin-top: ${CAP_SPACE_16};
-  }
-
-  .submit-button-section {
-    margin-top: ${CAP_SPACE_16};
-  }
-
-  .ant-radio-button-wrapper-checked {
-    &:not(.ant-radio-button-wrapper-disabled) {
-      box-shadow: none;
-    }
-  }
-
-  .ant-radio-group.cap-radioCard-v2 {
-    .ant-radio-button-wrapper-checked .radio-card-checked {
-      display: none;
-    }
-  }
-
-  .non-selected-radio-group {
-    .ant-radio-button-wrapper {
-      &:last-child {
-        display: none;
-      }
-    }
-  }
-
-  .selected-radio-group {
-    .ant-radio-button-wrapper-checked {
-      &:not(.ant-radio-button-wrapper-disabled) {
-        box-shadow: -1px 0 0 0 ${CAP_PRIMARY.base};
-      }
-    }
-
-    .ant-radio-group.cap-radioCard-v2 {
-      .ant-radio-button-wrapper-checked .radio-card-checked {
-        display: block;
-      }
-    }
-  }
-`;

package/v2Components/MarketingObjective/index.js

@@ -1,107 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage } from "react-intl";
-import {
-  CapHeading,
-  CapRadioCard,
-  CapLabel,
-  CapButton,
-  CapSpin,
-} from '@capillarytech/cap-ui-library';
-import messages from './messages';
-import styles from './MarketingObjective.style';
-import withStyles from '../../hoc/withStyles';
-
-const renderMarketingObjectiveList = ({
-  onMarketingObjectiveChange,
-  marketingObjectiveSelectedOption,
-  defaultmarketingObjective,
-  marketingObjectiveList = [],
-}) => {
-  const marketingList = (marketingObjective) => {
-    const { label, panes = [] } = marketingObjective;
-    const selectedPaneExists = panes.some((item) => item.value === marketingObjectiveSelectedOption);
-    const modifiedPanes = !selectedPaneExists
-      ? [...panes, {
-        value: marketingObjectiveSelectedOption,
-      }]
-      : panes;
-    return (
-      <div key={label} className={selectedPaneExists ? 'selected-radio-group' : 'non-selected-radio-group'}>
-        <CapHeading type="h4" className="radio-group-heading">{label}</CapHeading>
-        <CapRadioCard
-          onChange={({ target: { value } }) => onMarketingObjectiveChange(value)}
-          panes={modifiedPanes}
-          cardWidth="324px"
-          cardHeight="auto"
-          selected={marketingObjectiveSelectedOption}
-          defaultValue={defaultmarketingObjective}
-        />
-      </div>
-    );
-  };
-
-  return marketingObjectiveList.map((marketinObjective) => marketingList(marketinObjective));
-};
-
-const MarketingObjective = ({
-  onMarketingObjectiveSelect,
-  selectedMarketingObjective,
-  defaultmarketingObjective,
-  onSubmit,
-  className,
-  marketingObjectiveList,
-}) => {
-  const [marketingObjectiveSelectedOption, onMarketingObjectiveChange] = useState(selectedMarketingObjective || defaultmarketingObjective);
-
-  useEffect(() => {
-    [...document.querySelectorAll('.non-selected-radio-group .ant-radio-group')].forEach((node) => {
-      const paneToSelect = node.lastChild;
-      paneToSelect.click();
-    });
-  }, [marketingObjectiveSelectedOption]);
-
-  const onSubmitAction = () => {
-    onMarketingObjectiveSelect(marketingObjectiveSelectedOption);
-    onSubmit(false);
-  };
-
-  return (
-    <div className={className}>
-      <>
-        <CapHeading type="h3">
-          <FormattedMessage {...messages.fbMarketingObjectiveTitle} />
-        </CapHeading>
-        <CapLabel type="label1">
-          <FormattedMessage {...messages.fbMarketingObjectiveDescription} />
-        </CapLabel>
-      </>
-      <CapSpin spinning={!marketingObjectiveList.length}>
-        {renderMarketingObjectiveList({
-          onMarketingObjectiveChange,
-          marketingObjectiveSelectedOption,
-          defaultmarketingObjective,
-          marketingObjectiveList,
-        })}
-      </CapSpin>
-      <CapButton
-        type="primary"
-        className="submit-button-section"
-        onClick={() => onSubmitAction(false)}
-      >
-        <FormattedMessage {...messages.fbMarketingObjectiveDone} />
-      </CapButton>
-    </div>
-  );
-};
-
-MarketingObjective.propTypes = {
-  onMarketingObjectiveSelect: PropTypes.func,
-  selectedMarketingObjective: PropTypes.string,
-  defaultmarketingObjective: PropTypes.string,
-  onSubmit: PropTypes.func,
-  className: PropTypes.string,
-  marketingObjectiveList: PropTypes.arrayOf(PropTypes.object),
-};
-
-export default injectIntl(withStyles(MarketingObjective, styles));

package/v2Components/MarketingObjective/messages.js

@@ -1,23 +0,0 @@
-/*
- * Marketing Objective Messages
- *
- * This contains all the text for the Facebook component.
- */
-import { defineMessages } from 'react-intl';
-
-const messagePrefix = 'creatives.containersV2.FacebookMarketingObjective';
-
-export default defineMessages({
-  fbMarketingObjectiveTitle: {
-    id: `${messagePrefix}.fbMarketingObjectiveTitle`,
-    defaultMessage: 'Facebook Marketing Objective',
-  },
-  fbMarketingObjectiveDescription: {
-    id: `${messagePrefix}.fbMarketingObjectiveDescription`,
-    defaultMessage: 'Objectives help break reporting into a more granular level',
-  },
-  fbMarketingObjectiveDone: {
-    id: `${messagePrefix}.fbMarketingObjectiveDone`,
-    defaultMessage: 'Done',
-  },
-});

package/v2Containers/Facebook/Facebook.style.js

@@ -1,75 +0,0 @@
-import { css } from 'styled-components';
-import {
-  CAP_SPACE_44,
-  CAP_SPACE_28,
-  CAP_SPACE_20,
-  CAP_SPACE_12,
-  CAP_SPACE_08,
-  CAP_G07,
-  CAP_G12,
-  CAP_G06,
-  FONT_COLOR_05,
-} from '@capillarytech/cap-ui-library/styled/variables';
-
-export default css`
-  margin-left: ${CAP_SPACE_44};
-
-  .is-scrollable-section {
-    height: calc(100vh - 220px);
-    overflow-y: auto;
-  }
-
-  .account-details-wrapper {
-    border-bottom: 1px solid ${CAP_G12};
-    margin-bottom: ${CAP_SPACE_20};
-  }
-
-  .account-name-section {
-    margin-bottom: ${CAP_SPACE_28};
-  }
-
-  .account-section-container {
-    margin-bottom: ${CAP_SPACE_20};
-    max-width: 564px;
-  }
-
-  .ad-section {
-    margin-bottom: ${CAP_SPACE_44};
-  }
-
-  .dynamic-content-section {
-    max-width: 140px;
-
-    .facebook-dynamic-content {
-      color: ${CAP_G06};
-    }
-  }
-
-  .parameter-list {
-    padding: ${CAP_SPACE_08} ${CAP_SPACE_28};
-
-    .parameter-list-item {
-      list-style: none;
-      margin-bottom: ${CAP_SPACE_28};
-  
-      .parameter-index {
-        float: left;
-        margin-right: ${CAP_SPACE_12};
-        background: ${CAP_G07};
-        padding: 6px 10px;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .cap-button-v2 {
-    &.marketingObjective-change-button {
-      color: ${FONT_COLOR_05};
-      height: ${CAP_SPACE_20};
-    }
-  }
-`;
-
-export const CampaignDetailCapColumn = css`
-  margin-bottom: ${CAP_SPACE_20};
-`;

package/v2Containers/Facebook/actions.js

@@ -1,13 +0,0 @@
-/*
- *
- * Facebook actions
- *
- */
-
-import {
-  GET_MARKETING_OBJECTIVES,
-} from './constants';
-
-export const getMarketingObjectives = () => ({
-  type: GET_MARKETING_OBJECTIVES,
-});

package/v2Containers/Facebook/constants.js

@@ -1,25 +0,0 @@
-/*
- *
- * Facebook constants
- *
- */
-
-const prefix = 'app/Facebook';
-
-export const GET_MARKETING_OBJECTIVES = `${prefix}/GET_MARKETING_OBJECTIVES`;
-export const SET_MARKETING_OBJECTIVES_SUCCESS = `${prefix}/SET_MARKETING_OBJECTIVES_SUCCESS`;
-export const SET_MARKETING_OBJECTIVES_FAILURE = `${prefix}/SET_MARKETING_OBJECTIVES_FAILURE`;
-
-// marketing objectives constants
-
-export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';
-export const VALUE_BRAND_AWARENESS = 'VALUE_BRAND_AWARENESS';
-export const VALUE_CONVERSIONS = 'VALUE_CONVERSIONS';
-export const VALUE_LEAD_GENERATION = 'VALUE_LEAD_GENERATION';
-export const VALUE_LOCAL_AWARENESS = 'VALUE_LOCAL_AWARENESS';
-export const VALUE_MESSAGES = 'VALUE_MESSAGES';
-export const VALUE_PRODUCT_CATALOG_SALES = 'VALUE_PRODUCT_CATALOG_SALES';
-export const VALUE_REACH = 'VALUE_REACH';
-export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
-export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';
-export const VALUE_POST_ENGAGEMENT = 'VALUE_POST_ENGAGEMENT';