@capillarytech/creatives-library 3.4.5 → 3.4.6

package/v2Containers/Facebook/index.js

@@ -0,0 +1,358 @@
+/*
+ *
+ * Facebook
+ *
+ */
+import PropTypes from "prop-types";
+import React, { useState, useEffect } from "react";
+import { injectIntl, FormattedMessage, intlShape } from "react-intl";
+import {
+  CapHeading,
+  CapLabel,
+  CapRow,
+  CapColumn,
+  CapButton,
+  CapDrawer,
+  CapCustomCard,
+  CapIcon,
+} from '@capillarytech/cap-ui-library';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import messages from "./messages";
+import styles, { CampaignDetailCapColumn } from './Facebook.style';
+import * as actions from './actions';
+import withStyles from '../../hoc/withStyles';
+import MarketingObjective from '../../v2Components/MarketingObjective';
+import { makeSelectMarketingObjectiveList } from './selectors';
+import {
+  VALUE_APP_INSTALLS,
+  VALUE_BRAND_AWARENESS,
+  VALUE_CONVERSIONS,
+  VALUE_LEAD_GENERATION,
+  VALUE_LOCAL_AWARENESS,
+  VALUE_MESSAGES,
+  VALUE_POST_ENGAGEMENT,
+  VALUE_PRODUCT_CATALOG_SALES,
+  VALUE_REACH,
+  VALUE_VIDEO_VIEWS,
+  VALUE_LINK_CLICKS,
+} from './constants';
+
+const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
+
+const panesMapList = {
+  [VALUE_APP_INSTALLS]: 'fbMarketingObjectiveAppInstallTitle',
+  [VALUE_BRAND_AWARENESS]: 'fbMarketingObjectiveBrandAwarenessTitle',
+  [VALUE_CONVERSIONS]: 'fbMarketingObjectiveConversionsTitle',
+  [VALUE_LEAD_GENERATION]: 'fbMarketingObjectiveLeadGenerationTitle',
+  [VALUE_LOCAL_AWARENESS]: 'fbMarketingObjectiveStoreTrafficTitle',
+  [VALUE_MESSAGES]: 'fbMarketingObjectiveMessagesTitle',
+  [VALUE_POST_ENGAGEMENT]: 'fbMarketingObjectiveEngagementTitle',
+  [VALUE_PRODUCT_CATALOG_SALES]: 'fbMarketingObjectiveCatalogSalesTitle',
+  [VALUE_REACH]: 'fbMarketingObjectiveReachTitle',
+  [VALUE_VIDEO_VIEWS]: 'fbMarketingObjectiveVideoViewsTitle',
+  [VALUE_LINK_CLICKS]: 'fbMarketingObjectiveTrafficTitle',
+};
+
+const getCategorizedMarketingObjectiveList = (marketingObjectivesList, formatMessage) => {
+  const marketingObjectives = [
+    {
+      label: formatMessage(messages.fbMarketingObjectiveAwareness),
+      panes: [
+        {
+          title: formatMessage(messages.fbMarketingObjectiveBrandAwarenessTitle),
+          content: formatMessage(messages.fbMarketingObjectiveBrandAwarenessDescription),
+          value: VALUE_BRAND_AWARENESS,
+          icon: <CapIcon type="speaker" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveReachTitle),
+          content: formatMessage(messages.fbMarketingObjectiveReachDescription),
+          value: VALUE_REACH,
+          icon: <CapIcon type="connect" />,
+        },
+      ],
+    },
+    {
+      label: formatMessage(messages.fbMarketingObjectiveConsideration),
+      panes: [
+        {
+          title: formatMessage(messages.fbMarketingObjectiveTrafficTitle),
+          content: formatMessage(messages.fbMarketingObjectiveTrafficDescription),
+          value: VALUE_LINK_CLICKS,
+          icon: <CapIcon type="pointer" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveEngagementTitle),
+          content: formatMessage(messages.fbMarketingObjectiveEngagementDescription),
+          value: VALUE_POST_ENGAGEMENT,
+          icon: <CapIcon type="group-chat" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveAppInstallTitle),
+          content: formatMessage(messages.fbMarketingObjectiveAppInstallDescription),
+          value: VALUE_APP_INSTALLS,
+          icon: <CapIcon type="apps" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveVideoViewsTitle),
+          content: formatMessage(messages.fbMarketingObjectiveVideoViewsDescription),
+          value: VALUE_VIDEO_VIEWS,
+          icon: <CapIcon type="video" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveLeadGenerationTitle),
+          content: formatMessage(messages.fbMarketingObjectiveLeadGenerationDescription),
+          value: VALUE_LEAD_GENERATION,
+          icon: <CapIcon type="funnel" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveMessagesTitle),
+          content: formatMessage(messages.fbMarketingObjectiveMessagesDescription),
+          value: VALUE_MESSAGES,
+          icon: <CapIcon type="message-filled" />,
+        },
+      ],
+    },
+    {
+      label: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
+      panes: [
+        {
+          title: formatMessage(messages.fbMarketingObjectiveConversionsTitle),
+          content: formatMessage(messages.fbMarketingObjectiveConversionsDescription),
+          value: VALUE_CONVERSIONS,
+          icon: <CapIcon type="global" style={{fontSize: 20 }}/>,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveCatalogSalesTitle),
+          content: formatMessage(messages.fbMarketingObjectiveCatalogSalesDescription),
+          value: VALUE_PRODUCT_CATALOG_SALES,
+          icon: <CapIcon type="basket" />,
+        },
+        {
+          title: formatMessage(messages.fbMarketingObjectiveStoreTrafficTitle),
+          content: formatMessage(messages.fbMarketingObjectiveStoreTrafficDescription),
+          value: VALUE_LOCAL_AWARENESS,
+          icon: <CapIcon type="store-traffic" />,
+        },
+      ],
+    },
+  ];
+
+  return marketingObjectives.map(({ label, panes }) => ({
+    label,
+    panes: panes.filter((pane) => !!marketingObjectivesList.includes(pane.value)),
+  }));
+};
+
+const Facebook = (props) => {
+  const {
+    className,
+    templateData: {
+      selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
+    } = {},
+    cap: {
+      campaignDetails: {
+        name: fbCampaignValue,
+        socialRemoteCampaignId,
+        socialObjective,
+      } = {},
+      orgSettings: {
+        accountSettings: {
+          socialAccountSettings: {
+            facebookAccountSettings: [{
+              accountName,
+              accountId,
+            }] = [{}],
+          } = {},
+        } = {},
+      } = {},
+    } = {},
+    messageDetails: {
+      name: fbAdSetValue,
+      targetAudience: {
+        label: fbAudienceValue,
+      } = {},
+    } = {},
+    onFacebookSubmit,
+    marketingObjectiveList,
+    facebookActions,
+    intl,
+  } = props;
+
+  const [isDrawerVisible, setDrawerVisibility] = useState(false);
+  const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
+
+  useEffect(() => {
+    facebookActions.getMarketingObjectives();
+  }, []);
+
+  const categorizedMarketingObjectiveList = getCategorizedMarketingObjectiveList(marketingObjectiveList, intl.formatMessage);
+
+  const campaignDataList = [
+    {
+      label: 'fbCampaignName',
+      value: fbCampaignValue,
+    },
+    {
+      label: 'fbMarketingObjective',
+      value: selectedMarketingObjective ? intl.formatMessage(messages[panesMapList[selectedMarketingObjective]]) : '',
+      onChange: () => setDrawerVisibility(!isDrawerVisible),
+    },
+    {
+      label: 'fbAdSetName',
+      value: fbAdSetValue,
+    },
+    {
+      label: 'fbAudience',
+      value: fbAudienceValue || <FormattedMessage {...messages.fbNoAudienceSelected} />,
+    },
+  ];
+
+  const adSetParameters = ['fbAdsDetailOne', 'fbAdsDetailTwo', 'fbAdsDetailThree'];
+
+  const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
+
+  return (
+    <div className={className}>
+      <div className="is-scrollable-section">
+        <div className="account-details-wrapper">
+          <div className="account-name-section">
+            <CapHeading type="h4">
+              <FormattedMessage {...messages.fbAccount} />
+            </CapHeading>
+            <CapHeading type="h3">{accountName}</CapHeading>
+          </div>
+
+          <div className="account-section-container">
+            <CapHeading type="h3">
+              <FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
+            </CapHeading>
+            <CapLabel type="label1">
+              <FormattedMessage
+                {...messages.fbAdCampaignSetDetailsDescription}
+              />
+            </CapLabel>
+          </div>
+
+          <CapRow span={12} type="flex">
+            {campaignDataList.map(({ label, value, onChange }, index) => (
+              <StyledCampaignDetailCapColumn
+                span={index % 2 === 0 ? 6 : 14}
+                key={label}
+              >
+                <CapRow>
+                  <CapLabel type="label2">
+                    <FormattedMessage {...messages[label]} />
+                  </CapLabel>
+                  <CapHeading type="h4">
+                    {value}
+                    {!socialRemoteCampaignId && onChange && (
+                      <CapButton
+                        type="flat"
+                        className="marketingObjective-change-button"
+                        onClick={onChange}
+                      >
+                        <FormattedMessage {...messages.fbChange} />
+                      </CapButton>
+                    )}
+                  </CapHeading>
+                </CapRow>
+              </StyledCampaignDetailCapColumn>
+            ))}
+          </CapRow>
+          <CapDrawer
+            content={
+              <MarketingObjective
+                selectedMarketingObjective={selectedMarketingObjective}
+                onMarketingObjectiveSelect={onMarketingObjectiveSelect}
+                defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
+                onSubmit={setDrawerVisibility}
+                marketingObjectiveList={categorizedMarketingObjectiveList}
+              />
+            }
+            visible={isDrawerVisible}
+            width={372}
+            onClose={() => setDrawerVisibility(false)}
+          />
+        </div>
+
+        <div className="ad-section">
+          <div className="account-section-container">
+            <CapHeading type="h3">
+              <FormattedMessage {...messages.fbAdsTitle} />
+            </CapHeading>
+            <CapLabel type="label1">
+              <FormattedMessage {...messages.fbAdsDescription} />
+            </CapLabel>
+          </div>
+
+          <div>
+            <CapRow span={12} type="flex">
+              <CapColumn span={6}>
+                <CapCustomCard
+                  type="Facebook"
+                  FBDynamicComponent={() => (
+                    <CapIcon
+                      size="l"
+                      type="scenery"
+                      className="facebook-dynamic-content"
+                    />
+                  )}
+                />
+              </CapColumn>
+              <CapColumn span={16}>
+                <ul className="parameter-list">
+                  {adSetParameters.map((parameter, index) => (
+                    <li key={parameter} className="parameter-list-item">
+                      <CapLabel type="label2" className="parameter-index">
+                        {index + 1}
+                      </CapLabel>
+                      <CapHeading type="h5">
+                        <FormattedMessage {...messages[parameter]} />
+                      </CapHeading>
+                    </li>
+                  ))}
+                </ul>
+              </CapColumn>
+            </CapRow>
+          </div>
+        </div>
+      </div>
+      <CapButton
+        type="primary"
+        onClick={() =>
+          onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
+        }
+      >
+        <FormattedMessage {...messages.fbConfirm} />
+      </CapButton>
+    </div>
+  );
+};
+
+Facebook.propTypes = {
+  className: PropTypes.string.isRequired,
+  templateData: PropTypes.object,
+  cap: PropTypes.object,
+  messageDetails: PropTypes.object,
+  onFacebookSubmit: PropTypes.func.isRequired,
+  marketingObjectiveList: PropTypes.arrayOf(PropTypes.string),
+  facebookActions: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+Facebook.defaultProps = {
+  marketingObjectiveList: [],
+};
+
+const mapStateToProps = createStructuredSelector({
+  marketingObjectiveList: makeSelectMarketingObjectiveList(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  facebookActions: bindActionCreators(actions, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(Facebook, styles)));

package/v2Containers/Facebook/messages.js

@@ -0,0 +1,167 @@
+/*
+ * Facebook Messages
+ *
+ * This contains all the text for the Facebook component.
+ */
+import { defineMessages } from 'react-intl';
+
+const messagePrefix = 'creatives.containersV2.Facebook';
+
+export default defineMessages({
+  fbAccount: {
+    id: `${messagePrefix}.fbAccount`,
+    defaultMessage: 'Facebook Account',
+  },
+  fbAdCampaignSetDetailsTitle: {
+    id: `${messagePrefix}.fbAdCampaignSetDetailsTitle`,
+    defaultMessage: 'Ad campaign & ad set details',
+  },
+  fbAdCampaignSetDetailsDescription: {
+    id: `${messagePrefix}.fbAdCampaignSetDetailsDescription`,
+    defaultMessage: 'Once this message is approved, a campaign and an ad set will be created on Facebook Ad Manager with the same name as the current campaign and message name.',
+  },
+  fbCampaignName: {
+    id: `${messagePrefix}.fbCampaignName`,
+    defaultMessage: 'FB Campaign name',
+  },
+  fbMarketingObjective: {
+    id: `${messagePrefix}.fbMarketingObjective`,
+    defaultMessage: 'FB Marketing objective',
+  },
+  fbAdSetName: {
+    id: `${messagePrefix}.fbAdSetName`,
+    defaultMessage: 'Ad set name',
+  },
+  fbAudience: {
+    id: `${messagePrefix}.fbAudience`,
+    defaultMessage: 'Audience',
+  },
+  fbAdsTitle: {
+    id: `${messagePrefix}.fbAdsTitle`,
+    defaultMessage: 'Facebook ads',
+  },
+  fbAdsDescription: {
+    id: `${messagePrefix}.fbAdsDescription`,
+    defaultMessage: 'You may create ads in Facebook Ad Manager under the below mentioned ad set. The performance of these ads will be reported here in Engage+.',
+  },
+  fbAdsDetailOne: {
+    id: `${messagePrefix}.fbAdsDetailOne`,
+    defaultMessage: 'Only FB campaign & ad set creation is supported in Engage+',
+  },
+  fbAdsDetailTwo: {
+    id: `${messagePrefix}.fbAdsDetailTwo`,
+    defaultMessage: 'You can proceed with an empty content block',
+  },
+  fbAdsDetailThree: {
+    id: `${messagePrefix}.fbAdsDetailThree`,
+    defaultMessage: 'You can create ads later in Facebook ad manager.',
+  },
+  fbConfirm: {
+    id: `${messagePrefix}.fbConfirm`,
+    defaultMessage: 'Confirm',
+  },
+  fbChange: {
+    id: `${messagePrefix}.fbChange`,
+    defaultMessage: 'Change',
+  },
+  fbNoAudienceSelected: {
+    id: `${messagePrefix}.fbNoAudienceSelected`,
+    defaultMessage: 'Not Selected',
+  },
+  fbMarketingObjectiveAwareness: {
+    id: `${messagePrefix}.fbMarketingObjectiveAwareness`,
+    defaultMessage: 'Awareness',
+  },
+  fbMarketingObjectiveBrandAwarenessTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessTitle`,
+    defaultMessage: 'Brand awareness',
+  },
+  fbMarketingObjectiveBrandAwarenessDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveBrandAwarenessDescription`,
+    defaultMessage: 'Increase awareness for your brand by reaching people who are more likely to be interested in it.',
+  },
+  fbMarketingObjectiveReachTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveReachTitle`,
+    defaultMessage: 'Reach',
+  },
+  fbMarketingObjectiveReachDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveReachDescription`,
+    defaultMessage: 'Show your ad to the maximum number of people.',
+  },
+  fbMarketingObjectiveConsideration: {
+    id: `${messagePrefix}.fbMarketingObjectiveConsideration`,
+    defaultMessage: 'Consideration',
+  },
+  fbMarketingObjectiveTrafficTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveTrafficTitle`,
+    defaultMessage: 'Traffic',
+  },
+  fbMarketingObjectiveTrafficDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveTrafficDescription`,
+    defaultMessage: 'Send more people to a destination such as a website, app or Messenger conversation.',
+  },
+  fbMarketingObjectiveEngagementTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveEngagementTitle`,
+    defaultMessage: 'Engagement',
+  },
+  fbMarketingObjectiveEngagementDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveEngagementDescription`,
+    defaultMessage: 'Get more post engagements',
+  },
+  fbMarketingObjectiveAppInstallTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveAppInstallTitle`,
+    defaultMessage: 'App Installs',
+  },
+  fbMarketingObjectiveAppInstallDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveAppInstallsDescription`,
+    defaultMessage: 'Get more people to install your app.',
+  },
+  fbMarketingObjectiveVideoViewsTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveVideoViewsTitle`,
+    defaultMessage: 'Video Views',
+  },
+  fbMarketingObjectiveVideoViewsDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveVideoViewsDescription`,
+    defaultMessage: 'Get more people to view your video content.',
+  },
+  fbMarketingObjectiveLeadGenerationTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationTitle`,
+    defaultMessage: 'Lead Generation',
+  },
+  fbMarketingObjectiveLeadGenerationDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveLeadGenerationDescription`,
+    defaultMessage: 'Drive more sales leads, such as email addresses, from people interested in your brand or business.',
+  },
+  fbMarketingObjectiveMessagesTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveMessagesTitle`,
+    defaultMessage: 'Messages',
+  },
+  fbMarketingObjectiveMessagesDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveMessagesDescription`,
+    defaultMessage: 'Get more people to send messages to your business in Messenger.',
+  },
+  fbMarketingObjectiveConversionsTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveConversionsTitle`,
+    defaultMessage: 'Conversions',
+  },
+  fbMarketingObjectiveConversionsDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveConversionsDescription`,
+    defaultMessage: 'Drive valuable actions on your website, app or in Messenger.',
+  },
+  fbMarketingObjectiveCatalogSalesTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesTitle`,
+    defaultMessage: 'Catalog Sales',
+  },
+  fbMarketingObjectiveCatalogSalesDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveCatalogSalesDescription`,
+    defaultMessage: 'Create ads that automatically show items from your catalog based on your target audience.',
+  },
+  fbMarketingObjectiveStoreTrafficTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficTitle`,
+    defaultMessage: 'Store Traffic',
+  },
+  fbMarketingObjectiveStoreTrafficDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficDescription`,
+    defaultMessage: 'Drive visits to your physical stores by showing ads to people who are nearby.',
+  },
+});

package/v2Containers/Facebook/reducer.js

@@ -0,0 +1,31 @@
+/*
+ *
+ * Faceboook reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  SET_MARKETING_OBJECTIVES_SUCCESS,
+  SET_MARKETING_OBJECTIVES_FAILURE,
+} from './constants';
+
+export const initialState = fromJS({
+  marketinObjectives: {},
+});
+
+function facebookReducer(state = initialState, action) {
+  const { type, payload } = action;
+  switch (type) {
+    case SET_MARKETING_OBJECTIVES_SUCCESS: {
+      return state.set('marketinObjectivesData', payload).set('marketinObjectivesError', null);
+    }
+    case SET_MARKETING_OBJECTIVES_FAILURE: {
+      return state.set('marketinObjectivesData', []).set('marketinObjectivesError', payload);
+    }
+    default:
+      return state;
+  }
+}
+
+export default facebookReducer;

package/v2Containers/Facebook/sagas.js

@@ -0,0 +1,41 @@
+import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import {
+  GET_MARKETING_OBJECTIVES,
+  SET_MARKETING_OBJECTIVES_SUCCESS,
+  SET_MARKETING_OBJECTIVES_FAILURE,
+} from './constants';
+
+export function* fetchMarketingObjectives() {
+  try {
+    const response = yield call(Api.getMarketingObjectives, 'FACEBOOK');
+    const { errors, data } = response;
+    if (errors && errors.length) {
+      yield put({
+        type: SET_MARKETING_OBJECTIVES_FAILURE,
+        payload: errors,
+      });
+    } else {
+      yield put({
+        type: SET_MARKETING_OBJECTIVES_SUCCESS,
+        payload: data,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: SET_MARKETING_OBJECTIVES_FAILURE,
+      payload: error,
+    });
+  }
+}
+
+function* watchFetchMarketingObjective() {
+  const watcher = yield takeLatest(GET_MARKETING_OBJECTIVES, fetchMarketingObjectives);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+export default [
+  watchFetchMarketingObjective,
+];

package/v2Containers/Facebook/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the facebook state domain
+ */
+const selectFacebookDomain = () => (state) => state.get('facebook');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by Facebook
+ */
+
+export const makeSelectMarketingObjectiveList = () => createSelector(
+  selectFacebookDomain(),
+  (substate) => substate && substate.get('marketinObjectivesData'),
+);

package/v2Containers/MobilePush/Create/index.js

@@ -25,6 +25,8 @@ import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import messages from './messages';
 import getEventsMap from '../eventsMap';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_CREATE_MPUSH } from '../../App/constants';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -1402,7 +1404,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   saveFormData = (formData) => {
     //this function gets called from form bulder only when the form data is valid
     const obj = this.getTransformedData(formData);
+    const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
     this.props.actions.createTemplate(obj, () => {
+      GA.timeTracker.stopTimer(TRACK_CREATE_MPUSH, {
+        category: 'Creatives',
+        action: 'Create',
+        label,
+      });
       this.discardValues();
       const message = this.props.intl.formatMessage(messages.messageCreateSuccess);
       CapNotification.success({message, key: 'createMpushSuccess'});

package/v2Containers/MobilePush/Edit/index.js

@@ -29,6 +29,8 @@ import withCreatives from '../../../hoc/withCreatives';
 
 import getEventsMap from '../eventsMap';
 import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields} from '../commonMethods';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_EDIT_MPUSH } from '../../App/constants';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -271,6 +273,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
   onUpdateTemplateComplete = () => {
     console.log('reseting schema');
+    const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
+    GA.timeTracker.stopTimer(TRACK_EDIT_MPUSH, {
+      category: 'Creatives',
+      action: 'Edit',
+      label,
+    });
     this.resetSchema();
     this.setState({
       formData: {},

package/v2Containers/Sms/Create/_smsCreate.scss

@@ -12,3 +12,6 @@
   }
 }
 
+.sms-message-content .error-message{
+  width:75%;
+}

package/v2Containers/Sms/Create/index.js

@@ -26,7 +26,8 @@ import {SMS} from '../../CreativesContainer/constants';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
-
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_CREATE_SMS } from '../../App/constants'
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -201,6 +202,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({currentTab: data});
   }
   onCreateTemplateComplete = (editResponse) => {
+    GA.timeTracker.stopTimer(TRACK_CREATE_SMS, {
+      category: 'Creatives',
+      action: 'Create',
+    });
     if (editResponse.templateId) {
       this.resetSchema();
       this.setState({